/* Styles for the generated subpages (and the login joke on every page). */
a.portrait{display:block}a.logo{display:block;color:inherit;text-decoration:none}
.nav a[aria-current]{background:#fff000;color:blue}
.login.denied>strong{background:red}
.columns.two{grid-template-columns:192px minmax(0,1fr)}
.page{min-width:0;padding-bottom:10px}
.page-title{margin:4px 0 10px;font:italic bold clamp(30px,4.4vw,50px) 'Comic Sans MS',cursive;text-decoration:underline;text-decoration-color:red;text-underline-offset:8px}
.lede{font-size:19px;line-height:1.45;margin:0 0 12px}
.center{text-align:center}.red{color:red}
.box{border:1px solid #f56bb3;background:#fff;margin-bottom:14px;scroll-margin-top:10px}
.box>h2{margin:0;padding:6px 12px;background:#000;color:red;font-size:26px;line-height:1.1}
.box>h2 small{font-size:.6em}
.box.yellow{border-color:#e3bd00;background:#ffffd6}.box.yellow>h2{color:yellow}
.box.green{border-color:#2dff3c}.box.green>h2{color:#2bff21}
.box-body{padding:10px 14px;font-size:17px;line-height:1.5}
.blurb{margin:0 0 10px;font-style:italic;font-family:Georgia,serif;font-size:18px}
.gallery{display:flex;flex-wrap:wrap;gap:14px}
.tile{width:128px;text-align:center;font-size:15px;line-height:1.2}
.frame{display:block;position:relative;width:128px;height:141px;overflow:hidden;border:2px solid #000;margin-bottom:4px;background:#000}
.frame .thumb,.about .thumb{display:block;height:141px;width:128px;margin:0;background-image:url('todd.png');background-repeat:no-repeat;background-size:1222px 1287px}
.thumb.beard{background-position:0 -53px}
.thumb.knows{background-position:-60px -1008px}
.thumb.closeup{background-position:-590px -400px}
.sepia{filter:sepia(1) contrast(1.1)}.noir{filter:grayscale(1) contrast(1.5)}.hot{filter:hue-rotate(250deg) saturate(2.5)}
.flip{transform:scaleX(-1)}.blur{filter:blur(7px) brightness(.8);transform:scale(1.15)}
.overlay{position:absolute;inset:0;display:grid;place-items:center;font-size:40px;color:#fff;text-shadow:0 0 6px #000}
.overlay.play{font-size:44px;color:#fff;opacity:.85}
.duration{position:absolute;right:3px;bottom:3px;background:#000;color:#fff;font:bold 12px 'Courier New',monospace;padding:1px 4px}
.badge{position:absolute;right:4px;bottom:2px;font-size:30px}
.views{display:block;color:#555;font-size:12px;font-weight:normal;margin-top:2px}
.checks{list-style:none;padding:0;margin:6px 0;text-align:left}.checks li{line-height:1.7;font-weight:bold}.checks li:before{content:'☑';color:red;font-size:21px;margin-right:6px}
.about{display:flex;gap:16px;align-items:flex-start;margin-bottom:12px}
.about-photo{display:flex;flex-direction:column;gap:8px;flex:none}.about .thumb{border:4px ridge #999}
.stats{border-collapse:collapse;width:100%}.stats th,.stats td{border:1px solid #999;padding:5px 10px;text-align:left}.stats th{background:#f2f2ff;width:35%;white-space:nowrap}
.letter{font:italic 20px Georgia,serif;margin:0}.letter cite{display:block;text-align:right;margin-top:8px;font-family:'Comic Sans MS',cursive}
.faq dt{color:red;font-weight:bold;font-size:19px;margin-top:14px}.faq dt:first-child{margin-top:0}.faq dd{margin:3px 0 0 22px}
.tiers{margin-top:22px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
.tier{position:relative;background:#ffff00;border:4px ridge #e3bd00;text-align:center;padding:10px}
.tier h2{background:#000;color:yellow;margin:-10px -10px 8px;padding:6px 0;font-size:23px}
.tier.featured{background:#ffe1ef;border-color:#f06;transform:scale(1.03)}
.tier .checks{font-size:15px}
.flag{position:absolute;top:-16px;right:-12px;background:red;color:#fff000;font-weight:1000;padding:3px 8px;transform:rotate(8deg);border:2px solid #000}
.fine{font-size:13px;color:#555;margin-top:16px}
.legal li{margin-bottom:8px}
.counter{width:max-content;margin:4px auto;background:#000;color:red;font:bold 46px 'Courier New',monospace;letter-spacing:6px;padding:4px 12px;border:5px ridge #2dff3c;text-shadow:0 0 8px red}
.huge{font-size:clamp(56px,10vw,110px);font-weight:1000;text-align:center;margin:8px 0;color:red;text-shadow:4px 4px #000}
@media(max-width:950px){.columns.two{grid-template-columns:155px minmax(0,1fr)}.tiers{grid-template-columns:1fr}.tier.featured{transform:none}}
@media(max-width:650px){.gallery{gap:8px;justify-content:center}.about{flex-direction:column;align-items:center}.about-photo{flex-direction:row}}
.ticker i{font-style:normal}
@media(max-width:650px){a.portrait{display:none}}
/* Fake login: "members" see locked photos (except the forever-locked ones). */
.login.logged-in{justify-content:center;gap:4px;text-align:center}.login.logged-in>strong{position:absolute;top:0}.login{position:relative}
.login.logged-in{padding-top:30px}.login .hello{font-size:17px;font-weight:bold;max-width:95%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.login .logout{font-size:13px;padding:2px 12px}
.member .frame:not(.forever) .blur{filter:none;transform:none}
.member .frame:not(.forever) .lock{display:none}
.members-only{display:none}.member .members-only{display:block}.member .guest-only{display:none}
.members-only .huge{font-size:clamp(34px,6vw,64px)}
@media(max-width:950px){.flag{right:6px}}
.nav a.nav-login{display:none}
.login.inline{margin:12px auto}
@media(max-width:650px){.nav a.nav-login{display:block}.login.inline{display:flex}html.member .nav a.nav-login{display:none}}