:root{--bg:#080b10;--s1:#0f151d;--s2:#16202b;--line:#26323f;--ink:#ece8de;--muted:#a2adba;--amber:#e8a050;--amber2:#f2b66f;--teal:#4aa69a;--blue:#6aaee0;--dot:rgba(106,174,224,.13);color-scheme:dark;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body[data-current=team]{--dot:rgba(106,174,224,.16)}
body[data-current=submissions]{--dot:rgba(74,166,154,.18)}
body[data-current=comics]{--dot:rgba(232,160,80,.12)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 76px);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.65 "Work Sans",system-ui,sans-serif}
h1,h2,h3{font-family:Anton,Impact,"Arial Narrow",sans-serif;font-weight:400;letter-spacing:.015em;margin:0;line-height:1.1}
h2{font-size:clamp(1.9rem,4.5vw,2.7rem);margin-bottom:10px}h3{font-size:1.4rem}
a{color:inherit}img{max-width:100%}p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
[hidden]{display:none!important}
.skip{position:absolute;left:-999px;top:8px;background:var(--amber);color:#14100b;padding:10px 16px;z-index:50;font-weight:600}.skip:focus{left:8px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.bar{overflow:hidden;background:var(--amber);border-bottom:3px solid #14100b;color:#14100b;font-weight:600;font-size:.92rem}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(8,11,16,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:400 1.3rem Anton,Impact,sans-serif;letter-spacing:.02em}.brand img{height:38px;width:auto}
nav{display:flex;gap:24px;align-items:center}
nav a:not(.btn){text-decoration:none;color:var(--muted);padding:4px 0;border-bottom:2px solid transparent}nav a:not(.btn):hover{color:var(--ink)}nav a.on{color:var(--ink);border-color:var(--amber)}
.menu{display:none;background:none;border:1px solid var(--line);color:var(--ink);font:600 .95rem "Work Sans",sans-serif;padding:8px 14px;border-radius:4px;cursor:pointer}
.btn{display:inline-block;background:var(--amber);color:#14100b;font:600 1rem "Work Sans",sans-serif;padding:13px 24px;border:1px solid var(--amber);border-radius:4px;text-decoration:none;cursor:pointer;transition:background .15s}.btn:hover{background:var(--amber2)}
.btn.sm{padding:8px 16px;font-size:.95rem}.btn.ghost{background:transparent;color:var(--ink);border-color:var(--teal)}.btn.ghost:hover{background:rgba(74,166,154,.16)}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.glow{background-color:var(--bg);background-image:radial-gradient(var(--dot) 1.4px,transparent 1.9px);background-size:16px 16px}
.hero{padding:56px 0 76px}.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.title{width:min(100%,480px);height:auto;display:block}
.hero h1,.info h1{font-size:clamp(1.7rem,3.8vw,2.4rem);margin:16px 0 12px}
.lead{color:var(--muted);max-width:46ch}
.coverlink{display:block;justify-self:center;width:100%;max-width:400px;transform:rotate(2deg);transition:transform .2s}.coverlink:hover{transform:rotate(0)}
.coverlink img{display:block;width:100%;height:auto;border:2px solid var(--ink);box-shadow:10px 10px 0 var(--amber)}
.count{display:flex;gap:10px;margin:0 0 24px}.count div{background:var(--s1);border:1px solid var(--line);border-top:2px solid var(--amber);padding:10px 12px;min-width:76px;text-align:center}
.count b{display:block;font:400 2rem Anton,Impact,sans-serif;color:var(--amber);line-height:1.1;font-variant-numeric:tabular-nums}.count span{font-size:.8rem;color:var(--muted)}
.live{font:400 1.7rem Anton,Impact,sans-serif;color:var(--amber);margin:0}
section{padding:68px 0;border-top:1px solid var(--line)}section.band{background:var(--s1)}
.sub{color:var(--muted);max-width:56ch}.sub+*{margin-top:28px}
.row{display:grid;grid-template-columns:140px 1fr;gap:24px;align-items:center;background:var(--s2);border:1px solid var(--line);padding:18px;max-width:760px}
.row img,.card img{width:100%;height:auto;display:block;border:1px solid var(--line)}.row p{color:var(--muted);margin:6px 0 16px}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.box{background:var(--s1);border:1px solid var(--line);padding:24px}.box p{color:var(--muted);margin:8px 0 0}
.phead{padding:56px 20px 8px}.phead h1{font-size:clamp(2.3rem,6vw,3.8rem);margin-bottom:14px}
.series-box{background:var(--s1);border:1px solid var(--line);padding:32px;max-width:820px}.series-box>.sub{margin-bottom:26px}
.subs{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}.subs>div{padding:26px 32px 0 0;max-width:290px}.subs>div+div{padding-left:32px;border-left:1px solid var(--line)}
.sh{font-size:1.3rem;color:var(--amber);margin-bottom:14px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,230px));gap:26px}.card{display:block;text-decoration:none}.series-box .card{width:190px}
.card h3{font-size:1.2rem;margin:12px 0 2px}.card p{margin:0;color:var(--muted);font-size:.92rem}a.card:hover img{border-color:var(--amber)}
.ph{display:grid;place-items:center;aspect-ratio:2/3;background:var(--bg);border:1px solid var(--line);font:400 6rem Anton,Impact,sans-serif;color:var(--muted)}
.social{display:flex;flex-wrap:wrap;gap:12px}.social a{border:1px solid var(--line);background:var(--s1);padding:10px 20px;border-radius:999px;text-decoration:none}.social a:hover{border-color:var(--teal);color:var(--teal)}
.listing{padding:32px 0 80px}.listing .wrap{display:grid;grid-template-columns:minmax(0,440px) 1fr;gap:56px;align-items:start}
.back{display:inline-block;margin-bottom:14px;color:var(--muted);text-decoration:none}.back:hover{color:var(--amber)}
.stage{position:relative;background:#030405;border:2px solid var(--ink);box-shadow:8px 8px 0 var(--amber)}
.stage img{display:block;width:100%;aspect-ratio:1980/3075;object-fit:contain}
.nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(8,11,16,.8);color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer}.nav:hover{border-color:var(--amber);color:var(--amber)}
.prev{left:10px}.next{right:10px}
.capline{display:flex;justify-content:space-between;margin:12px 2px 10px;font-weight:600}.capline span:last-child{color:var(--muted);font-weight:400}
.thumbs{display:flex;gap:8px;flex-wrap:wrap}.thumbs button{padding:0;width:58px;background:none;border:2px solid var(--line);cursor:pointer;opacity:.7}.thumbs button:hover{opacity:1}.thumbs button[aria-current=true]{border-color:var(--amber);opacity:1}
.thumbs img{display:block;width:100%;aspect-ratio:1980/3075;object-fit:cover}
.team{display:grid;gap:14px;margin:26px 0 28px}.team div{border-left:3px solid var(--teal);padding-left:14px}.team dt{color:var(--muted);font-size:.9rem}.team dd{margin:0;font:400 1.35rem Anton,Impact,sans-serif}
.mystery{overflow:hidden}.mystery img{filter:blur(22px) brightness(.35) saturate(.5);transform:scale(1.2)}
.q{position:absolute;inset:0;display:grid;place-items:center;font:400 13rem Anton,Impact,sans-serif;color:var(--amber);text-shadow:0 0 40px rgba(0,0,0,.8)}
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}.person{padding:28px;background:var(--s1);border:1px solid var(--line)}.person h2{font-size:clamp(1.8rem,3vw,2.2rem)}
.photo{aspect-ratio:4/5;display:grid;place-content:center;gap:6px;text-align:center;padding:16px;border:2px dashed var(--muted);background:var(--bg);color:var(--muted)}.photo b{font:400 1.3rem Anton,Impact,sans-serif;color:var(--ink)}.photo small{font-size:.8rem}
.role{color:var(--teal);font-weight:600;margin:6px 0 18px}.bio{color:var(--muted);font-style:italic}
.notice{border-left:3px solid var(--amber);background:var(--s2);padding:14px 18px;max-width:720px;color:var(--muted);margin-bottom:0}
.contact{background:var(--s2);border:1px solid var(--line);border-top:3px solid var(--teal);padding:28px;max-width:720px}.contact p{margin:0 0 6px;color:var(--muted)}
.contact .mail{display:block;font:400 clamp(1.4rem,4vw,2rem) Anton,Impact,sans-serif;color:var(--ink);margin:4px 0 18px;word-break:break-all}.contact .mail:hover{color:var(--teal)}
.tpl{list-style:none;counter-reset:t;padding:0;margin:0;max-width:760px;display:grid;gap:12px}
.tpl li{counter-increment:t;position:relative;background:var(--s2);border:1px solid var(--line);padding:18px 18px 18px 70px}
.tpl li::before{content:counter(t);position:absolute;left:18px;top:14px;font:400 2rem Anton,Impact,sans-serif;color:var(--amber)}
.tpl h3{font-size:1.2rem;margin-bottom:4px}.tpl p{margin:0;color:var(--muted)}
.rules{max-width:720px;padding-left:1.2em;margin:0}.rules li{margin-bottom:.7em;color:var(--muted)}.rules li::marker{color:var(--teal)}
footer{background:var(--s1);border-top:4px solid var(--amber);padding:48px 0 28px;color:var(--muted);font-size:.95rem}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:32px}
footer h3{font:600 .9rem "Work Sans",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:12px}
footer nav{display:block}
.jump{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.jump b{font:400 1rem Anton,Impact,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);margin-right:4px}
.jump a{border:1px solid var(--line);padding:6px 14px;border-radius:999px;text-decoration:none;font-size:.95rem}.jump a:hover{border-color:var(--teal);color:var(--teal)}
.tag{display:inline-block;margin-top:6px;font:400 .85rem Anton,Impact,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);border:1px solid var(--teal);padding:2px 8px}
.rule{border:0;border-top:2px dashed #2f3b49;margin:0 0 36px}
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.stamp{display:inline-block;font:400 1.05rem Anton,Impact,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);border:2px solid var(--amber);padding:4px 12px;transform:rotate(-2deg);margin-bottom:10px}
.ticker{background:var(--amber);color:#14100b;border-block:3px solid #14100b;overflow:hidden;font:400 1.3rem Anton,Impact,sans-serif;letter-spacing:.08em;text-transform:uppercase}
h2::after,.phead h1::after{content:"";display:block;width:56px;height:4px;background:var(--amber);margin-top:10px}
section{border-top:3px solid #1d2733}
section.band{background-color:var(--s1);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.028) 0 2px,transparent 2px 10px)}
.series-box,.box,.contact,.person,.tpl li,.row{border:2px solid #2f3b49;box-shadow:6px 6px 0 #000}
.notice b{font:400 1.1rem Anton,Impact,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);margin-right:8px}
.doc{max-width:720px}.doc h2{font-size:1.5rem;margin:30px 0 8px}.doc h2::after{display:none}.doc p,.doc li{color:var(--muted)}
footer ul{list-style:none;margin:0;padding:0}footer li{margin-bottom:8px}footer a{text-decoration:none}footer a:hover{color:var(--amber)}
.fbrand{display:flex;align-items:center;gap:10px;color:var(--ink);font:400 1.2rem Anton,Impact,sans-serif;margin-bottom:10px}.fbrand img{height:34px}
.legal{border-top:1px solid var(--line);margin-top:34px;padding-top:20px;font-size:.85rem}.legal p{margin:0 0 6px;max-width:80ch}
@media (max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.hero .wrap,.listing .wrap{grid-template-columns:1fr;gap:32px}.coverlink{order:-1;max-width:300px}.row{grid-template-columns:1fr}.row img{max-width:190px}.hero{padding-top:36px}.stage{max-width:420px}.person{padding:20px}.series-box{padding:22px}.subs{grid-template-columns:1fr}.subs>div+div{padding-left:0;border-left:0;border-top:1px solid var(--line);margin-top:26px}.subs>div{padding-right:0}.count div{min-width:62px;padding:8px}.count b{font-size:1.6rem}.q{font-size:9rem}}
@media (max-width:1280px){.menu{display:inline-block}#nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--s1);border-bottom:1px solid var(--line);padding:10px 20px 16px}#nav.open{display:flex}#nav a:not(.btn){padding:12px 0;border-bottom:1px solid var(--line)}#nav .btn{margin-top:12px;text-align:center}}
@media (max-width:520px){.fgrid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.mq{display:flex;width:max-content;animation:mq 60s linear infinite;will-change:transform}
.ticker .mq{animation-duration:50s;animation-direction:reverse}
.g{display:flex;flex:none}
.mi{display:block;white-space:nowrap;padding:9px 3rem 9px 0;color:inherit;text-decoration:none}
.ticker .mi{padding:8px 2rem 8px 0}
a.mi:hover{text-decoration:underline}
.bar:hover .mq,.bar:focus-within .mq,.ticker:hover .mq{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq{animation:none!important;width:100%}.mq .g{width:100%;justify-content:center}.mq .g+.g,.mq .g .mi:nth-child(n+2){display:none}.mi,.ticker .mi{white-space:normal;text-align:center;padding:9px 14px}}
.tag,.person .stamp{white-space:nowrap}

/* ===== V4: subtle motion (hover devices only) ===== */
.btn,.social a,.jump a{transition:background .2s ease,transform .2s ease,border-color .2s ease,color .2s ease}
nav a:not(.btn){transition:color .2s ease,border-color .2s ease}
@media (hover:hover){
.btn:hover{transform:translateY(-2px) scale(1.03)}
.social a:hover,.jump a:hover{transform:translateY(-2px)}
}
.btn:active{transform:none}
/* ===== V4: Comics overview ===== */
.overview main{position:relative;isolation:isolate;background:#070a0e}
.overview main::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.09;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.overview main::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 7px),repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 11px)}
.overview .phead{padding-top:64px}
.overview .phead .sub{max-width:44ch}
.overview .jump{margin-top:20px}
.overview .series-box{position:relative;background-color:#0c1219;border:2px solid #34414f;outline:1px solid #1a232d;outline-offset:6px;box-shadow:0 22px 40px -18px #000,8px 8px 0 #000;max-width:860px;padding:34px 36px 38px;margin-bottom:10px}
.overview .series-box::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.overview .series-box>*{position:relative}
.overview .series-box h2{display:inline-block;font-size:clamp(2.2rem,5vw,3.2rem)}
.overview .no{float:right;font:400 .95rem Anton,Impact,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border:1px solid #34414f;padding:3px 10px;margin-top:6px}
.overview .series-box>.sub{clear:both}
.overview .subs{border-top:2px dashed #2b3744;gap:0}
.overview .subs>div,.overview .cards{padding-top:28px}
.overview .subs>div{padding-right:36px;max-width:340px}
.overview .subs>div+div{padding-left:36px;border-left:2px dashed #2b3744}
.overview .sh{display:flex;align-items:center;gap:10px;font-size:1.15rem;letter-spacing:.12em;text-transform:uppercase}
.overview .sh::after{content:"";flex:1;border-top:1px solid #34414f}
.overview .series-box .card{width:210px;perspective:900px}
.overview .card .cover{display:block;border:2px solid #8f8a7e;background:#000;box-shadow:0 2px 0 #000,0 18px 24px -12px rgba(0,0,0,.9),5px 5px 0 #000;transition:transform .25s ease,box-shadow .25s ease;transform-origin:50% 60%}
.overview .card .cover img{display:block;width:100%;height:auto;border:0}
.overview .card h3{margin-top:16px;font-size:1.3rem}
.overview .card p{margin:0}
.overview a.card:hover .cover,.overview a.card:focus-visible .cover{transform:translateY(-6px) scale(1.04) rotate(-.8deg);box-shadow:0 2px 0 #000,0 28px 30px -12px rgba(0,0,0,.95),8px 8px 0 #000}
.overview a.card:hover img{border-color:transparent}
.overview a.card:hover h3{color:var(--amber)}
.overview .ph{position:relative;border:2px solid #34414f;background-color:#05080b;box-shadow:5px 5px 0 #000;overflow:hidden}
.overview .ph::before{content:"";position:absolute;inset:0;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.overview .rule{border-top:2px dashed #2b3744}
@media (hover:none){.overview a.card:hover .cover{transform:none}}
@media (max-width:640px){.overview .series-box{padding:24px 22px 28px;outline-offset:4px}.overview .subs>div{padding-right:0;max-width:none}.overview .subs>div+div{padding-left:0;border-left:0;border-top:2px dashed #2b3744;margin-top:28px}.overview .series-box .card{width:min(210px,70vw)}}
@media (prefers-reduced-motion:reduce){.btn:hover,.social a:hover,.jump a:hover,.overview a.card:hover .cover,.overview a.card:focus-visible .cover{transform:none!important}}

/* ===== V5: motion & atmosphere ===== */
/* page transition (progressive enhancement; falls back to a quick fade-in) */
@view-transition{navigation:auto}
header{view-transition-name:site-header}
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}
@supports not (view-transition-name:none){main{animation:pagein .3s ease backwards}}
@keyframes pagein{from{opacity:0}}
/* entrance on load */
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
@keyframes riseCover{from{opacity:0;transform:translateY(12px) rotate(2deg)}}
.hero .wrap>div{animation:rise .55s ease backwards}
.hero .coverlink{animation:riseCover .6s ease .12s backwards}
.phead h1,.phead .sub,.phead .jump,.listing .viewer,.listing .info{animation:rise .5s ease backwards}
.phead .sub,.listing .info{animation-delay:.08s}.phead .jump{animation-delay:.16s}
/* scroll reveal (class added by JS only, so content is visible without it) */
.rv{opacity:0;transform:translateY(18px);transition:opacity .55s ease var(--rd,0s),transform .55s cubic-bezier(.2,.7,.2,1) var(--rd,0s)}
.rv.in{opacity:1;transform:none}
/* buttons */
.btn{transition:background .2s ease,transform .18s ease,border-color .2s ease,color .2s ease,filter .2s ease}
.btn:active{transform:translateY(1px) scale(.98);filter:brightness(.94)}
.btn.mag{--mx:0px;--my:0px}
@media (hover:hover){
.btn:not(.ghost):hover{filter:brightness(1.1)}
.btn.mag:hover{transform:translate(var(--mx),var(--my)) translateY(-2px) scale(1.03)}
.btn.mag:active{transform:translate(var(--mx),var(--my)) translateY(1px) scale(.98)}
nav a:not(.btn){background:linear-gradient(var(--amber),var(--amber)) no-repeat 0 100%/0 2px;background-origin:border-box;transition:color .2s ease,border-color .2s ease,background-size .28s ease}
nav a:not(.btn):hover,nav a:not(.btn):focus-visible{background-size:100% 2px}
}
/* touch: tap feedback instead of hover */
@media (hover:none){
a,button{-webkit-tap-highlight-color:rgba(232,155,60,.18)}
.btn:active,.social a:active,.jump a:active{transform:scale(.97);filter:brightness(.9)}
.overview a.card:active .cover,.coverlink:active{transform:scale(.98)}
}
/* covers: soft shadow, return glide, light sweep */
.overview .card .cover{position:relative;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.coverlink{position:relative;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.coverlink img{transition:box-shadow .35s ease}
.coverlink::before{content:"";position:absolute;inset:-10px}
.overview a.card .cover::before{content:"";position:absolute;inset:-10px;z-index:1}
.coverlink::after,.overview .card .cover::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.17) 50%,transparent 58%) no-repeat 130% 0/260% 100%}
@keyframes sheen{0%{opacity:1;background-position:130% 0}100%{opacity:1;background-position:-30% 0}}
@media (hover:hover){
.coverlink:hover{transform:rotate(0) translateY(-6px) scale(1.03)}
.coverlink:hover img{box-shadow:12px 14px 0 var(--amber),0 30px 36px -10px rgba(0,0,0,.85)}
.coverlink:hover::after,.overview a.card:hover .cover::after{animation:sheen .9s ease .05s both}
.stage{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
}
/* atmosphere: very slow grain shift + drifting dust (behind content) */
body::after{animation:grain 4s steps(1) infinite}
@keyframes grain{0%{background-position:0 0}20%{background-position:-34px 21px}40%{background-position:27px -41px}60%{background-position:-18px -29px}80%{background-position:43px 12px}}
.glow{position:relative;overflow:clip}
.glow>*{position:relative;z-index:1}
.glow::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(100% + 340px);pointer-events:none;opacity:.55;background-image:radial-gradient(circle,rgba(232,155,60,.5) 0 1.3px,transparent 1.7px),radial-gradient(circle,rgba(150,200,215,.4) 0 1px,transparent 1.4px);background-size:340px 340px,170px 170px;background-position:70px 90px,120px 30px;animation:drift 55s linear infinite;will-change:transform}
@keyframes drift{to{transform:translateY(-340px)}}
/* signature intro (shown only when the head script adds html.intro) */
#intro{display:none}
html.intro #intro{display:flex;overflow:hidden;position:fixed;inset:0;z-index:100;align-items:center;justify-content:center;background:#05070a;animation:introOut .45s ease 3.25s forwards}
html.intro #intro.skipped{animation:introOut .25s ease forwards}
@keyframes introOut{to{opacity:0;visibility:hidden}}
#intro .skip-intro{position:absolute;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));background:none;border:1px solid #2f3b49;color:var(--muted);font:600 .85rem "Work Sans",sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:7px 14px;border-radius:3px;cursor:pointer;opacity:0;animation:fadeIn .3s ease .4s forwards}
#intro .skip-intro:hover{color:var(--ink);border-color:var(--amber)}
@keyframes fadeIn{to{opacity:1}}
@media (max-width:760px){body::after,.glow::before{animation:none}.glow::before{display:none}}
@media (prefers-reduced-motion:reduce){
@view-transition{navigation:none}
#intro{display:none!important}
body::after,.glow::before,.hero .wrap>div,.hero .coverlink,.phead h1,.phead .sub,.phead .jump,.listing .viewer,.listing .info,main{animation:none!important}
.glow::before{display:none}
.coverlink:hover,.coverlink:hover img,.btn.mag:hover,.btn:active,.stage{transform:none!important}
.coverlink::after,.overview .card .cover::after{display:none}
}

/* ===== V9: white lantern glow behind the logo (CSS only) + start gating ===== */
#intro:not(.go),#intro:not(.go) *{animation-play-state:paused!important}
@keyframes auraBreath{from{opacity:1}to{opacity:.72}}
@media (prefers-reduced-motion:reduce){#intro .aura{display:none}}

/* ===== V10: two-stage intro (lantern, then lettering) ===== */
#intro .logo{position:relative;isolation:isolate;width:min(250px,58vw)}
#intro .stack{position:relative;width:100%;aspect-ratio:559/779}
#intro .stack img{position:absolute;display:block;height:auto;opacity:0}
#intro .lant{left:12.97%;top:0;width:74.061%;animation:lanternIn 1.5s cubic-bezier(.2,.7,.2,1) .1s forwards}
#intro .word{left:0;top:85.751%;width:100%;animation:wordIn 1.1s ease 1.55s forwards}
@keyframes lanternIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
@keyframes wordIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#intro .lit{position:absolute;z-index:2;inset:0;pointer-events:none;opacity:0;-webkit-mask-image:url(assets/intro-lantern.png),url(assets/intro-word.png);mask-image:url(assets/intro-lantern.png),url(assets/intro-word.png);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:74.061% 80.103%,100% 14.249%;mask-size:74.061% 80.103%,100% 14.249%;-webkit-mask-position:50% 0,50% 100%;mask-position:50% 0,50% 100%;background:linear-gradient(100deg,transparent 40%,rgba(232,155,60,.6) 50%,transparent 60%) no-repeat 130% 0/300% 100%;animation:litPass 1.4s ease 1.9s forwards}
@keyframes litPass{0%{opacity:1;background-position:130% 0}100%{opacity:1;background-position:-30% 0}}
#intro .aura{position:absolute;z-index:0;left:50%;top:38%;width:290%;aspect-ratio:1.1;margin:-131.8% 0 0 -145%;pointer-events:none;opacity:0;animation:auraIn 3.5s ease forwards}
#intro .aura::before,#intro .aura::after{content:"";position:absolute;border-radius:50%}
#intro .aura::before{inset:0;background:radial-gradient(closest-side,rgba(255,243,226,.24),rgba(255,236,212,.10) 38%,rgba(255,236,210,.03) 62%,transparent 100%)}
#intro .aura::after{left:24%;right:24%;top:22%;bottom:22%;background:radial-gradient(closest-side,rgba(255,248,235,.36),rgba(255,238,214,.14) 45%,transparent 100%);animation:auraBreath 1.9s ease-in-out .9s infinite alternate}
@keyframes auraIn{0%{opacity:0;transform:scale(.8)}40%{opacity:1;transform:scale(1)}100%{opacity:.75;transform:scale(1.03)}}

/* ===== V16: intro sound toggle ===== */

/* ===== V21: sound switch ===== */
.snd-switch{display:inline-flex;align-items:center;gap:9px;font:600 .72rem "Work Sans",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#8a94a1;background:rgba(11,15,21,.9);border:1px solid #3a4452;border-radius:999px;padding:5px 7px 5px 12px;cursor:pointer;transition:color .3s ease,border-color .3s ease,box-shadow .35s ease,background .3s ease}
.snd-corner{position:fixed;left:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:40}
.snd-track{position:relative;display:block;width:52px;height:24px;border-radius:999px;background:#1a2028;border:1px solid #4a5563;transition:background .35s ease,border-color .35s ease}
.snd-knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#8a94a1;transition:transform .35s cubic-bezier(.3,1.4,.5,1),background .35s ease,box-shadow .35s ease}
.snd-state{position:absolute;top:50%;right:7px;transform:translateY(-50%);font-size:.6rem;letter-spacing:.06em;color:#8a94a1;transition:color .3s ease}
.snd-switch:hover{color:#b7c0cb;border-color:#6b7889}
.snd-switch:hover .snd-knob{background:#a3adba}
.snd-switch.on{color:#f2b05f;border-color:rgba(232,155,60,.6);box-shadow:0 0 0 1px rgba(232,155,60,.16),0 0 16px rgba(232,155,60,.26)}
.snd-switch.on:hover{border-color:#e89b3c}
.snd-switch.on .snd-track{background:#2a1a0a;border-color:#e89b3c}
.snd-switch.on .snd-knob,.snd-switch.on:hover .snd-knob{transform:translateX(28px);background:#f0a24a;box-shadow:0 0 9px 1px rgba(240,162,74,.65)}
.snd-switch.on .snd-state{right:auto;left:7px;color:#f2b05f}
#intro .snd-intro{position:absolute;left:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));padding:7px 9px 7px 14px;font-size:.78rem;opacity:0;animation:fadeIn .3s ease .4s forwards}
footer{padding-bottom:76px}
@media (max-width:420px){.snd-corner{left:10px}.snd-switch{padding-left:10px;gap:7px}}

/* ===== V32 accounts (new classes only; nothing above is changed) ===== */
nav .navlink{font:inherit;background:none;border:0;border-bottom:2px solid transparent;padding:4px 0;color:var(--muted);cursor:pointer}nav .navlink:hover,nav .navlink:focus-visible{color:var(--ink);border-color:var(--amber)}
nav .navlink[hidden]{display:none!important}
#acctLink[data-signed-in]{max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:1280px){#nav .navlink{padding:12px 0;text-align:left;border-bottom:1px solid var(--line)}#acctLink[data-signed-in]{max-width:none}}
.acct-card{background:var(--s1);border:1px solid var(--line);max-width:480px;padding:28px;margin-bottom:22px}
.acct-card h2{font-size:1.5rem;margin-bottom:6px}.acct-card h2::after{margin-top:8px;width:40px;height:3px}
.acct-form{display:flex;flex-direction:column;gap:6px}
.acct-form label{font-weight:600;font-size:.95rem;margin-top:10px}
.acct-form input[type=text],.acct-form input[type=email],.acct-form input[type=password]{width:100%;font:400 1rem "Work Sans",sans-serif;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:12px 14px}
.acct-form input:focus{border-color:var(--amber);outline-offset:1px}
.acct-form .chk{display:flex;align-items:center;gap:8px;font-weight:400;color:var(--muted);margin-top:8px}
.acct-form button[type=submit]{margin-top:16px;align-self:flex-start}.acct-form button[disabled]{opacity:.6;cursor:progress}
.hint{color:var(--muted);font-size:.9rem;margin:4px 0 0}
.fmsg{min-height:1.5em;margin:12px 0 0;font-weight:600}.fmsg.bad{color:#ff8f7a}.fmsg.good{color:var(--teal)}
.alt{margin:18px 0 0;color:var(--muted)}.alt a{color:var(--amber)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.acct-dl{margin:0;display:grid;gap:12px}.acct-dl div{display:grid;gap:2px}.acct-dl dt{color:var(--muted);font-size:.85rem;letter-spacing:.06em;text-transform:uppercase}.acct-dl dd{margin:0;overflow-wrap:anywhere}
.acct-card details summary{cursor:pointer;color:var(--muted)}.btn.danger{background:#b3402e;border-color:#b3402e;color:#fff}.btn.danger:hover{background:#c9503c}
@media (max-width:480px){.acct-card{padding:20px}}

/* V41 header: page links, then the campaign button, then the account dropdown at the far right */
header nav{margin-left:auto}
.acct{position:relative;flex:none;margin-left:18px}
.acctbtn{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:4px;padding:7px 12px;font:600 .95rem "Work Sans",sans-serif;cursor:pointer;max-width:176px;min-height:40px;box-sizing:border-box}
.acctbtn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acctbtn:hover,.acctbtn[aria-expanded=true]{border-color:var(--amber)}
.acctbtn:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.acctbtn[data-signed-in] .acctico{color:var(--amber)}
.acctmenu{position:absolute;right:0;top:calc(100% + 8px);min-width:196px;background:var(--s1);border:1px solid var(--line);border-radius:4px;box-shadow:0 16px 36px rgba(0,0,0,.6);padding:6px;z-index:30;display:grid;gap:2px}
.acctmenu[hidden]{display:none}
.acctmenu a,.acctmenu button{display:block;width:100%;box-sizing:border-box;text-align:left;background:none;border:0;border-radius:3px;color:var(--ink);padding:12px 14px;font:400 1rem "Work Sans",sans-serif;text-decoration:none;cursor:pointer;min-height:44px}
.acctmenu a:hover,.acctmenu button:hover{background:var(--s2)}
.acctmenu a:focus-visible,.acctmenu button:focus-visible{outline:2px solid var(--amber);outline-offset:-2px;background:var(--s2)}
.acctmenu button:disabled{opacity:.6;cursor:default}
header .menu{margin-left:10px}
@media (max-width:1280px){.acct{margin-left:auto}header .menu{margin-left:10px}}
@media (max-width:520px){.acctbtn span{display:none}.acctbtn{padding:7px 10px}}
@media (min-width:1281px){header .wrap{max-width:1320px}header nav{gap:16px}.acctbtn{max-width:150px}}
@media (min-width:1500px){header .wrap{max-width:1480px}header nav{gap:24px}.acctbtn{max-width:176px}}