/* avoid-ai-design-ignore: SD2 -- charcoal ground with a crimson accent is the owner's fixed art direction (README, Art direction), not a default. */
/* site.css: every stylesheet in cascade order. The sections are separated by banners; later sections win. */

/* ============ 1. Base: tokens, header, hero, sections, project cards, dialog, ocular ============ */
:root{--bg:#0a0a0b;--surface:#111112;--cream:#eae7df;--muted:#91918e;--red:#d93639;--line:#2a2928;--sage:#94a78d;--sans:'Manrope',Arial,sans-serif;--display:'Barlow Condensed','Arial Narrow',Impact,sans-serif;--mono:'IBM Plex Mono',monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:85px}body{margin:0;background:var(--bg);color:var(--cream);font-family:var(--sans);-webkit-font-smoothing:antialiased}body:has(dialog[open]){overflow:hidden}::selection{background:var(--red);color:var(--cream)}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid var(--red-text);outline-offset:6px}img,svg{display:block}svg{width:24px;height:24px}p,h1,h2,h3{margin:0}em{font-style:normal}button[hidden],[hidden]{display:none!important}.svg-defs{width:0;height:0;position:absolute}.mono,.eyebrow{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.01em}.eyebrow{display:block;font-size:12px;letter-spacing:.01em}.red{color:var(--red)}.muted{color:var(--muted)}.grain{position:fixed;inset:0;z-index:8;pointer-events:none;opacity:.038;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.6' filter='url(%23n)'/%3E%3C/svg%3E")}.scroll-progress{position:fixed;left:0;top:0;z-index:50;height:2px;background:var(--red);width:0}.skip-link{position:fixed;top:-70px;left:20px;z-index:100;background:var(--cream);color:var(--bg);padding:12px}.skip-link:focus{top:10px}
.site-header{height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 5.1%;border-bottom:1px solid var(--line);background:var(--bg);position:relative;z-index:15}.brand{display:flex;gap:10px;align-items:center;font-size:15px;font-weight:800;letter-spacing:-.6px;white-space:nowrap}.brand svg{width:29px;height:29px;color:var(--red)}.brand-light{font-weight:400}.desktop-nav{display:flex;gap:38px;margin-left:85px}.desktop-nav a{font-size:12px;position:relative;transition:none}.desktop-nav a:hover{color:var(--red)}.desktop-nav span{font-family:var(--mono);font-size:12px;margin-left:5px;color:#747471;vertical-align:super}.header-actions{display:flex;align-items:center;gap:26px}.sound-toggle{display:flex;gap:9px;align-items:center;font:600 13px var(--sans);letter-spacing:.01em;color:#b1b1ac;padding:10px 0}.sound-bars{display:flex;align-items:center;gap:3px;height:17px}.sound-bars i{height:5px;width:2px;background:var(--red);transition:none}.sound-bars i:nth-child(2){height:12px}.sound-bars i:nth-child(3){height:8px}.sound-bars i:nth-child(4){height:15px}.sound-toggle[aria-pressed=true] .sound-bars i{animation:equalizer 1s infinite alternate}.sound-toggle[aria-pressed=true] .sound-bars i:nth-child(2){animation-delay:-.5s}.sound-toggle[aria-pressed=true] .sound-bars i:nth-child(3){animation-delay:-.8s}.header-x{padding:7px}.header-x svg{width:15px;height:15px}.menu-toggle{display:none;width:28px;padding:5px 0}.menu-toggle span{display:block;width:23px;height:1px;background:var(--cream);margin:6px 0;transition:transform .2s}.mobile-nav{position:absolute;top:76px;right:0;left:0;background:var(--bg);z-index:20;padding:22px 6%;border-bottom:1px solid var(--line)}.mobile-nav a{display:block;font:20px var(--display);padding:12px 0}
.hero{min-height:740px;height:calc(100svh - 88px);max-height:980px;position:relative;overflow:hidden}.hero-art{position:absolute;inset:-2%;background:url('assets/itachi-hero-v3.webp') center 40%/cover no-repeat;will-change:transform;transition:none}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,11,.3) 0%,transparent 70%),linear-gradient(0deg,var(--bg) 0%,transparent 28%,transparent 82%,rgba(10,10,11,.2) 100%)}#embers{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.status-dot{width:5px;height:5px;display:inline-block;background:var(--sage);border-radius:50%;margin-right:8px;box-shadow:0 0 7px #94a78d66}.hero-content{position:relative;margin-left:8%;padding-top:125px;width:610px;z-index:2}.hero-eyebrow{color:#bbb6ae;font-size:12px;letter-spacing:.01em;margin-bottom:23px}.hero h1{font:800 clamp(126px,12.4vw,190px)/.77 var(--display);letter-spacing:-3px;width:max-content}.hero h1>span{display:block}.hero h1>span+span{margin-top:12px}.outline-text{color:transparent;-webkit-text-stroke:1px var(--cream)}.hero-copy{margin-top:30px;display:flex;flex-direction:column;gap:11px}.hero-copy p{font-size:22px;line-height:1.38;font-weight:500;letter-spacing:-.6px}.hero-copy p em{color:var(--red)}.hero-copy>span{font-size:12px;line-height:1.8;color:#a5a39d}.hero-actions{display:flex;align-items:center;gap:29px;margin-top:25px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;font-size:12px;padding:16px 19px;min-height:48px;transition:transform .2s}.button:hover{transform:translateY(-2px)}.button-red{background:var(--red);color:#fff}.button-red:hover{background:#b9292c}.button svg{width:16px;height:16px}.text-link{display:inline-flex;gap:16px;align-items:center;font-size:12px;padding:5px 0}.text-link>span{font-size:18px;transition:transform .2s}.text-link:hover>span{transform:translate(2px,-2px)}.hero-kanji{position:absolute;right:3.1%;top:100px;writing-mode:vertical-rl;font-size:17px;letter-spacing:.01em;color:#d9cab27a}.hero-activation{display:flex;align-items:center;gap:15px;position:absolute;right:6%;bottom:95px;z-index:3}.eye-button{width:54px;height:54px;border:1px solid #ae3b3966;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#11111199;transition:transform .3s}.eye-button:hover{transform:scale(1.13);border-color:var(--red)}.eye-button svg{width:34px;height:34px;color:var(--red)}.hero-activation .mono{font-size:12px;line-height:1.8;letter-spacing:.01em;color:var(--cream)}.activation-muted{color:#7d7772}.hero-bottom{position:absolute;left:5.1%;right:5.1%;bottom:24px;display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:.01em}.hero-bottom>a{display:flex;align-items:center;gap:20px;color:#a5a39d}.hero-bottom>a span{font-size:19px}.hero-bottom .red{font-size:14px;margin-right:8px}.hero-location{color:#a5a39d}.hero-location>span{margin-left:13px;color:var(--cream)}
.section-pad{padding:112px 8%}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px}.section-heading .eyebrow{margin-bottom:25px}.section-heading h2{font-size:clamp(32px,3.7vw,53px);line-height:1.15;letter-spacing:-2px;font-weight:500}.section-heading>p{font-size:12px;line-height:1.8;color:var(--muted);margin-bottom:7px}.project-toolbar{margin-top:53px;border-top:1px solid var(--line);padding:22px 0;display:flex;justify-content:space-between;align-items:center;gap:20px}.archive-label{font-size:12px;letter-spacing:.01em}.archive-label>span{color:var(--muted);margin-left:8px}.project-filters{display:flex;gap:20px}.project-filters button{font-size:12px;color:#b1afaa;padding:7px 0;position:relative}.project-filters button:after{content:'';position:absolute;bottom:0;height:1px;left:0;right:0;background:var(--red);transform:scaleX(0);transition:transform .2s}.project-filters button.active{color:var(--cream)}.project-filters button.active:after{transform:scaleX(1)}.project-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:42px 27px}.project-card{min-width:0}.project-card-link{display:block}.project-image{position:relative;background:var(--surface);overflow:hidden;aspect-ratio:1.52;border:1px solid #232323}.project-image>img{width:100%;height:100%;object-fit:cover;transition:transform .65s;filter:saturate(.75)}.project-card-link:hover .project-image>img{transform:scale(1.04);filter:saturate(1.25)}.project-image:after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 80px #0002;pointer-events:none}.project-status{position:absolute;right:20px;top:17px;font:12px var(--mono);color:#bdb7ad;border:1px solid #71686366;padding:6px 8px;letter-spacing:.01em;background:#11111299}.project-info{padding-top:21px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.project-info .eyebrow{font-size:12px;letter-spacing:.01em;color:#9a9891;margin-bottom:11px}.project-info h3{font-size:24px;font-weight:500;letter-spacing:-.8px}.project-info p{color:var(--muted);font-size:12px;margin-top:8px}.project-arrow{border:1px solid var(--line);width:38px;height:38px;display:flex;justify-content:center;align-items:center;border-radius:50%;transition:none;margin-top:20px;flex-shrink:0}.project-arrow svg{width:15px;height:15px}.project-card-link:hover .project-arrow{background:var(--red);border-color:var(--red)}.project-wide{grid-column:1/-1}.project-wide .project-card-link{display:grid;grid-template-columns:1.3fr 1fr;gap:27px;align-items:center}.project-wide .project-image{aspect-ratio:2.35}.project-wide .project-info{padding-left:25px;padding-top:0}.project-wide .project-info h3{font-size:33px}.project-wide .project-arrow{margin-right:7px}.archive-foot{border-bottom:1px solid var(--line);padding:28px 0 23px;margin-top:30px;display:flex;align-items:center;justify-content:space-between}.archive-foot>.mono{font-size:12px;color:var(--muted);letter-spacing:.01em}
.universe{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;background:#0d0d0e;padding-top:95px;padding-bottom:95px}.universe-mark{position:relative;width:100%;aspect-ratio:1;max-width:450px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,#52201e1a,transparent 67%)}.orbit{position:absolute;width:85%;height:85%;border:1px solid #34302c;border-radius:50%}.orbit-one:before,.orbit-two:before{content:'';position:absolute;top:14%;left:14%;width:5px;height:5px;background:var(--sage);border-radius:50%}.orbit-two{width:64%;height:64%;border-color:#652a27;transform:rotate(130deg)}.universe-mark:after,.universe-mark:before{content:'';position:absolute;left:0;top:50%;width:100%;height:1px;background:#282420}.universe-mark:before{transform:rotate(90deg)}.universe-eye{width:39%;height:39%;color:var(--red);position:relative;z-index:1;opacity:.88;filter:drop-shadow(0 0 24px #d936391f)}.orbit-label{position:absolute;top:4%;font-size:12px;color:#97948c;letter-spacing:.01em;background:#0d0d0e;padding:5px}.universe-coordinate{position:absolute;left:4%;bottom:4%;font-size:12px;color:var(--muted)}.universe-content .eyebrow{margin-bottom:28px}.universe-content h2{font-size:clamp(33px,3.5vw,49px);letter-spacing:-1.8px;line-height:1.14;font-weight:500;margin-bottom:25px}.universe-content h2 em{color:var(--sage)}.universe-content p{color:#aaa7a0;line-height:1.85;font-size:12px;max-width:410px;margin-top:15px}.identity-tags{display:flex;gap:25px;font-size:12px;margin-top:30px;padding-top:21px;border-top:1px solid var(--line);color:#b1aaa2}
.manifesto{padding-top:110px;padding-bottom:85px}.manifesto>.eyebrow{color:var(--muted);font-size:12px}.manifesto>p{font-size:clamp(48px,6.6vw,96px);letter-spacing:-4px;line-height:1.03;margin-top:35px;font-weight:500}.crossed{color:#9a9690;position:relative;display:inline-block}.crossed:after{content:'';position:absolute;left:-10%;width:120%;height:4px;background:var(--red);top:58%;transform:rotate(-8deg)}.manifesto-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:25px}.manifesto-bottom>.mono{font-size:12px;color:var(--muted)}.contact{background:#121111;border-top:1px solid var(--line);padding-top:58px;padding-bottom:60px;position:relative;overflow:hidden}.contact:after{content:'';position:absolute;right:-100px;bottom:-100px;width:500px;height:500px;border:1px solid #852e2728;border-radius:50%;pointer-events:none}.contact-top{display:flex;justify-content:space-between;gap:20px}.contact-top>.mono{font-size:12px;color:var(--muted)}.contact-main{display:flex;align-items:center;justify-content:space-between;margin-top:45px;gap:30px}.contact-main h2{font:700 clamp(65px,7.7vw,112px)/.89 var(--display);letter-spacing:-1px}.contact-circle{width:170px;height:170px;border-radius:50%;background:var(--red);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;flex-shrink:0;margin-right:35px;transition:transform .3s}.contact-circle:hover{transform:rotate(-10deg);background:#c2292b}.contact-circle svg{width:35px;height:35px}.contact-circle>span{text-align:center;font:12px/1.5 var(--mono);letter-spacing:.01em}.contact-bottom{display:flex;justify-content:space-between;align-items:flex-end;margin-top:40px;gap:30px}.contact-bottom p{color:var(--muted);font-size:12px;line-height:1.8}.contact-bottom .text-link{font-size:16px}.footer{padding:32px 5.1%;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line)}.footer .brand{font-size:12px}.footer .brand svg{width:23px;height:23px}.footer>.mono{font-size:12px;color:var(--muted);letter-spacing:.01em}.footer .text-link{font-size:12px;color:#b6b1aa}.to-top{font-size:22px;line-height:1;padding:6px 10px}
.js-ready .reveal{opacity:0;transform:translateY(24px);transition:opacity .65s, transform .65s}.js-ready .reveal.is-visible{opacity:1;transform:none}.genjutsu-active .hero-art{filter:saturate(1.4) contrast(1.04)}.genjutsu-active .outline-text{-webkit-text-stroke-color:var(--red)}.genjutsu-active .hero h1{color:#f2ece0}.genjutsu-active .universe-eye{animation:eye-spin 16s linear infinite}.genjutsu-overlay{position:fixed;inset:0;background:#160506ee;z-index:60;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;visibility:hidden;gap:45px}.genjutsu-overlay.playing{animation:awakening 1.65s var(--ease-out) both;visibility:visible}.genjutsu-eye{width:170px;height:170px;color:var(--red);filter:drop-shadow(0 0 55px #d9363955)}.genjutsu-overlay.playing .genjutsu-eye{animation:eye-spin 1.65s var(--ease-io)}.genjutsu-ring{position:absolute;width:350px;height:350px;border:1px solid #d9363955;border-radius:50%}.genjutsu-overlay.playing .genjutsu-ring{animation:expanding 1.65s var(--ease-out) both}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);background:var(--cream);color:var(--bg);padding:16px 24px;z-index:80;opacity:0;visibility:hidden;transition:none;font-size:12px;letter-spacing:.01em;max-width:90%;text-align:center}.toast.visible{opacity:1;visibility:visible;transform:translate(-50%,0)}
dialog{width:min(780px,90vw);padding:0;background:var(--bg);color:var(--cream);border:1px solid #51433e;max-height:90svh;overflow:auto}dialog::backdrop{background:#000d;}.dialog-close{position:absolute;right:18px;top:14px;z-index:2;font-size:26px;width:40px;height:40px;background:#0a0a0bdd;border:1px solid #51433e;border-radius:50%}.dialog-image{width:100%;max-height:300px;object-fit:cover}.dialog-body{padding:35px 40px 40px}.dialog-body .eyebrow{color:var(--red);font-size:12px}.dialog-body h2{font-size:36px;font-weight:500;letter-spacing:-1px;margin:17px 0}.dialog-body p{font-size:13px;color:#aaa6a0;line-height:1.9}.dialog-stack{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.dialog-stack>span{padding:6px 9px;border:1px solid var(--line);font:12px var(--mono)}.dialog-links{display:flex;gap:20px;flex-wrap:wrap;align-items:center;margin-top:26px}.dialog-note{font:12px var(--mono);letter-spacing:.01em;color:var(--muted);margin-top:22px}
:root{--red-text:#ef5557}.red,.hero-copy p em,.dialog-body .eyebrow{color:var(--red-text)}.sound-toggle,.menu-toggle{min-width:44px;min-height:44px}.menu-toggle{width:44px;padding-left:10px}.project-filters button{min-height:44px}.eye-button{min-width:44px;min-height:44px}
@keyframes equalizer{to{transform:scaleY(.25)}}@keyframes eye-spin{to{transform:rotate(360deg)}}@keyframes awakening{0%{opacity:0}18%{opacity:1}65%{opacity:1}100%{opacity:0}}@keyframes expanding{0%{transform:scale(.4);opacity:.9}100%{transform:scale(6);opacity:0}}
@media(min-width:1600px){.hero-content{padding-top:150px}.hero-copy{margin-top:40px}.hero-actions{margin-top:30px}.section-pad{padding-left:max(8%,calc((100vw - 1340px)/2));padding-right:max(8%,calc((100vw - 1340px)/2))}}
@media(max-width:1100px){.desktop-nav{margin-left:0;gap:25px}.hero{min-height:720px}.hero-content{margin-left:6%;width:500px;padding-top:133px}.hero h1{font-size:150px}.hero-art{background-position:57% center}.hero-shade{background:linear-gradient(90deg,#0a0a0b44,transparent 75%),linear-gradient(0deg,var(--bg),transparent 35%)}.section-pad{padding:85px 6%}.hero-activation{right:5%;bottom:100px}.universe{gap:40px}.project-wide .project-info{padding-left:5px}.identity-tags{gap:15px}.footer{flex-wrap:wrap}.contact-circle{margin-right:0;width:145px;height:145px}}
@media(max-width:760px){html{scroll-padding-top:25px}.site-header{height:76px;padding:0 6%}.brand{font-size:13px}.brand svg{width:27px;height:27px}.desktop-nav{display:none}.header-actions{gap:20px}.sound-label{display:none}.header-x{display:none}.menu-toggle{display:block}.hero{height:auto;min-height:870px;max-height:none}.hero-art{inset:0;background-size:auto 620px;background-position:60% -15px;background-repeat:no-repeat;opacity:.82}.hero-shade{background:linear-gradient(0deg,var(--bg) 8%,#0a0a0bd9 29%,#0a0a0b22 62%,transparent 85%),linear-gradient(90deg,#0a0a0b55,transparent 70%)}.hero-content{margin-left:6%;padding-top:300px;width:88%}.hero-eyebrow{font-size:12px;letter-spacing:.01em;margin-bottom:19px}.hero h1{font-size:clamp(104px,26vw,178px);letter-spacing:-2px;line-height:.78}.hero h1>span+span{margin-top:9px}.hero-copy{margin-top:25px;gap:10px}.hero-copy p{font-size:22px}.hero-copy>span{font-size:12px;line-height:1.8}.hero-actions{gap:22px;margin-top:23px;flex-wrap:wrap}.button{padding:15px 16px;font-size:12px;gap:22px}.hero-actions>.text-link{font-size:12px;gap:10px}.hero-kanji{right:6%;top:72px;font-size:12px;letter-spacing:.01em}.hero-activation{top:215px;right:6%;bottom:auto}.hero-activation .mono{font-size:12px;letter-spacing:.01em}.eye-button{width:41px;height:41px}.eye-button svg{width:27px;height:27px}.hero-bottom{left:6%;right:6%;bottom:24px;font-size:12px;letter-spacing:.01em}.hero-bottom>a{gap:9px}.hero-location{display:none}.section-pad{padding:65px 6%}.section-heading{display:block}.section-heading h2{font-size:37px;letter-spacing:-1.5px}.section-heading .eyebrow{font-size:12px;margin-bottom:22px}.section-heading>p{margin-top:20px;font-size:12px}.project-toolbar{margin-top:30px;padding:18px 0;align-items:flex-start;flex-direction:column;gap:15px}.project-filters{gap:24px}.project-grid{grid-template-columns:1fr;gap:32px}.project-info{padding-top:16px}.project-info h3{font-size:25px}.project-info .eyebrow{font-size:12px}.project-status{font-size:12px}.project-wide{grid-column:auto}.project-wide .project-card-link{display:block}.project-wide .project-image{aspect-ratio:1.52}.project-wide .project-info{padding:16px 0 0}.project-wide .project-info h3{font-size:25px}.project-wide .project-arrow{margin-right:0}.archive-foot{flex-direction:column;align-items:flex-start;gap:18px;margin-top:20px}.archive-foot>.mono{font-size:12px}.universe{grid-template-columns:1fr;gap:35px;padding-top:35px;padding-bottom:65px}.universe-mark{max-width:320px;margin:auto}.universe-content h2{font-size:39px}.universe-content .eyebrow{font-size:12px}.universe-content p{font-size:12px}.identity-tags{font-size:12px;gap:20px}.manifesto>p{font-size:clamp(48px,11.7vw,80px);letter-spacing:-2px;margin-top:27px}.manifesto>.eyebrow{font-size:12px;letter-spacing:.01em}.manifesto-bottom>.mono{font-size:12px;letter-spacing:.01em}.crossed:after{height:3px}.contact-top{flex-direction:column;gap:20px}.contact-top .eyebrow{font-size:12px}.contact-main{margin-top:35px;gap:15px;align-items:flex-end}.contact-main h2{font-size:clamp(56px,13vw,93px);line-height:.95}.contact-circle{width:90px;height:90px;gap:7px;margin-bottom:5px}.contact-circle svg{width:23px;height:23px}.contact-circle>span{font-size:12px;letter-spacing:.01em}.contact-bottom{flex-direction:column;align-items:flex-start;gap:20px;margin-top:28px}.contact-bottom p{font-size:12px}.contact-bottom .text-link{font-size:15px}.footer{padding:27px 6%;gap:23px}.footer .brand{font-size:12px}.footer>.mono{order:4;width:100%;font-size:12px}.footer>.text-link{margin-left:auto;font-size:12px;gap:8px}.to-top{padding:0}.dialog-body{padding:25px}.dialog-body h2{font-size:28px}.dialog-body p{font-size:12px}.genjutsu-eye{width:130px;height:130px}.genjutsu-ring{width:230px;height:230px}}
.hero-kanji{font-family:var(--display);font-size:14px;letter-spacing:.4em}
@media(max-width:760px){.hero-art{background-position:83% -15px}.hero-activation{right:auto;left:6%;top:225px}.hero-kanji{font-size:12px;letter-spacing:.01em}}
@media(max-width:370px){.hero{min-height:830px}.hero-content{padding-top:290px}.hero-actions{gap:14px}.hero-copy>span{font-size:12px}.project-filters{gap:19px}.hero-bottom{font-size:12px}.contact-main{flex-direction:column;align-items:flex-start}.contact-circle{align-self:flex-end;margin-top:-35px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none}.js-ready .reveal{opacity:1;transform:none}.genjutsu-overlay.playing{display:none}.hero-art{will-change:auto}}

/* Consistent icons and quieter editorial details. */
.icon { width: 16px; height: 16px; flex-shrink: 0; }
.header-x { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--cream); transition: none; }
.header-x svg { width: 20px; height: 20px; }
.header-x:hover { color: #fff; background: #ffffff08; }
.text-link { min-height: 44px; }
.text-link svg { width: 16px; height: 16px; transition: transform .2s; }
.text-link:hover svg:not(.icon--x) { transform: translate(2px, -2px); }
.text-link.social-link { min-height: 44px; gap: 13px; }
.text-link.social-link svg { width: 14px; height: 14px; opacity: .8; }
.text-link.social-link:hover svg { opacity: 1; }
.contact-circle svg.icon--x { width: 42px; height: 42px; }
.current-quest > .icon { width: 14px; height: 14px; margin-left: 9px; transition: transform .2s; }
.current-quest:hover > .icon { transform: translate(2px, -2px); }
.hero-bottom > a .icon { width: 17px; height: 17px; }

.identity-tags > span + span { border-left: 1px solid #433431; padding-left: 22px; }
.to-top { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.to-top .icon { width: 20px; height: 20px; }
.dialog-close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.dialog-close .icon { width: 20px; height: 20px; }
.status-dot { background: var(--red); box-shadow: 0 0 7px #d936392b; }
@media(max-width:760px) {
  .header-x { display: none; }
  .contact-circle svg.icon--x { width: 29px; height: 29px; }
  
  .identity-tags { gap: 15px; }
  .identity-tags > span + span { padding-left: 15px; }
  .current-quest > .icon { width: 12px; height: 12px; margin-left: 0; }
}
@media(prefers-reduced-motion:reduce) {
  .text-link:hover svg, .current-quest:hover > .icon { transform: none; }
}

/* A live side quest inside the archive. */
.hero-aura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 74% 32%, #d9363940 0, #941f2215 28%, transparent 58%);
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity 1.2s var(--ease-out);
}
.genjutsu-active .hero-aura { opacity: .8; animation: aura-breath 7s var(--ease-io) infinite alternate; }
.current-quest {
  display: flex;
  align-items: center;
  gap: 11px;
  width: fit-content;
  max-width: 100%;
  margin-top: 19px;
  padding-top: 14px;
  border-top: 1px solid #68625855;
  color: #b5b1a8;
  font-size: 12px;
  letter-spacing: .01em;
  transition: none;
}
.current-quest:hover { color: var(--cream); }
.current-quest > span:last-child { margin-left: 9px; font-size: 15px; transition: transform .2s; }
.current-quest:hover > span:last-child { transform: translate(2px, -2px); }
.quest-marker { width: 5px; height: 5px; border-radius: 50%; background: var(--red); flex-shrink: 0; }
.quest-label { color: var(--sage); margin-right: 10px; font-size: 12px; letter-spacing: .01em; }

.code-keyword { color: var(--red-text); }
.code-function { color: var(--cream); }
.code-string { color: var(--sage); }

.project-grid.single-result { grid-template-columns: 1fr; }
.single-result .project-card:not(.project-featured):not(.project-release) { max-width: 760px; width: 100%; }
.project-card-link:hover .project-image > img { filter: saturate(1.05) brightness(1.09); }
.project-card-link:hover .project-arrow { transform: translate(2px, -2px); }
.project-arrow { transition: transform .2s; }
.project-featured {
  grid-column: 1 / -1;
  background: #101011;
  border: 1px solid #33332e;
}
.feature-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 17px 26px;
  border-bottom: 1px solid #33332e;
  color: #9c9990;
  font-size: 12px;
  letter-spacing: .01em;
}
.live-status { color: var(--sage); white-space: nowrap; }
.feature-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  padding: 35px;
  align-items: center;
}
.feature-visual { min-width: 0; display: block; border: 1px solid #494b40; background: #1c211d; }
.browser-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  gap: 12px;
  padding: 0 12px;
  border-bottom: 1px solid #44483d;
  background: #141916;
  color: #a0a899;
  font-size: 12px;
  letter-spacing: .01em;
}

.browser-chrome > span:last-child { font-size: 14px; }
.retro-display {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 1.22;
  min-height: 330px;
  background: radial-gradient(ellipse at 60% 25%, #313a2c, transparent 66%), #1c211d;
}
.retro-display:after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(transparent 0 3px, #0000000b 3px 4px);
  opacity: .45;
  z-index: 3;
}
.retro-preview {
  position: relative;
  display: block;
  width: 73%;
  aspect-ratio: 625 / 620;
  overflow: hidden;
  margin: 24px auto 42px;
  transform: rotate(-3deg);
  transform-origin: center;
  box-shadow: 9px 18px 32px #00000065;
  transition: transform .65s var(--ease-out);
  filter: saturate(.85);
}
.retro-preview > img { position: absolute; top: 0; left: -52.4%; width: 204.8%; max-width: none; height: auto; }
.feature-visual:hover .retro-preview { transform: rotate(-1deg) scale(1.025); filter: saturate(1.08); }
.retro-sticker {
  position: absolute;
  left: 18px;
  bottom: 29px;
  z-index: 4;
  padding: 11px 14px 13px;
  background: #d4d96c;
  color: #141916;
  transform: rotate(-7deg);
  font: 800 31px/.85 var(--display);
  letter-spacing: -.4px;
  box-shadow: 3px 5px 0 #0a0a0b44;
}

.feature-copy { min-width: 0; }
.feature-copy > .eyebrow { color: var(--sage); font-size: 12px; line-height: 1.7; letter-spacing: .01em; margin-bottom: 21px; }
.feature-copy h3 { font: 700 clamp(55px, 5.1vw, 76px)/.9 var(--display); letter-spacing: -.8px; text-transform: none; }
.feature-subtitle { display: block; color: var(--sage); font: 600 25px/1.2 var(--display); letter-spacing: .01em; margin-top: 13px; }
.feature-copy > p { font-size: 12px; line-height: 1.85; color: #aaa79e; margin-top: 23px; max-width: 370px; }
.feature-context { display: block; padding-top: 18px; margin-top: 23px; border-top: 1px solid #33332e; color: #8b8d81; font-size: 12px; letter-spacing: .01em; line-height: 1.7; }
.feature-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 21px; margin-top: 23px; }
.feature-actions .button { font-size: 12px; padding: 15px 16px; gap: 20px; }
.feature-actions .text-link { color: #bbb7ad; font-size: 12px; min-height: 44px; }
.feature-actions .text-link:hover { color: var(--cream); }
.genjutsu-active .universe-eye { filter: drop-shadow(0 0 28px #d9363955); }
.genjutsu-active .orbit-two { border-color: #9f353555; }
.genjutsu-sequence { position: relative; width: 170px; height: 170px; }
.genjutsu-sequence .genjutsu-eye { position: absolute; inset: 0; width: 100%; height: 100%; }
.genjutsu-sequence .awakened-stage { opacity: 0; }
.genjutsu-overlay.playing .genjutsu-eye.normal-stage { animation: normal-awakening 1.65s var(--ease-io) both; }
.genjutsu-overlay.playing .genjutsu-eye.awakened-stage { animation: mangekyo-awakening 1.65s var(--ease-io) both; }
@keyframes aura-breath { from { opacity: .5; } to { opacity: .85; } }
@keyframes normal-awakening {
  0% { opacity: 0; transform: rotate(-30deg) scale(.8); }
  18%, 30% { opacity: 1; }
  46% { opacity: 0; transform: rotate(110deg) scale(.92); }
  100% { opacity: 0; transform: rotate(140deg) scale(.9); }
}
@keyframes mangekyo-awakening {
  0%, 30% { opacity: 0; transform: rotate(-55deg) scale(.86); }
  48% { opacity: 1; transform: rotate(0) scale(1.05); }
  65% { opacity: 1; transform: rotate(18deg) scale(1); }
  100% { opacity: 0; transform: rotate(42deg) scale(1.1); }
}

@media(max-width:1100px) {
  
  
  .feature-layout { padding: 27px; gap: 28px; grid-template-columns: 1.1fr 1fr; }
  .feature-copy h3 { font-size: 60px; }
  .retro-display { min-height: 320px; }
  .feature-actions { gap: 9px 16px; }
}
@media(max-width:760px) {
  .hero { min-height: 920px; }
  .hero-aura { background: radial-gradient(ellipse at 66% 18%, #d9363940, transparent 44%); }
  .current-quest { margin-top: 18px; padding-top: 13px; gap: 9px; font-size: 12px; letter-spacing: .01em; }
  .quest-label { font-size: 12px; letter-spacing: .01em; margin-right: 6px; }
  .current-quest > span:last-child { margin-left: 0; font-size: 14px; }
  
  
  
  .project-filters { flex-wrap: wrap; gap: 6px 22px; }
  .feature-topline { padding: 14px 17px; font-size: 12px; letter-spacing: .01em; gap: 10px; }
  .live-status .status-dot { width: 4px; height: 4px; margin-right: 5px; }
  .feature-layout { grid-template-columns: 1fr; padding: 20px; gap: 28px; }
  .retro-display { aspect-ratio: auto; height: 290px; min-height: 0; }
  .retro-preview { width: min(73%, 300px); margin-top: 18px; }
  .retro-sticker { left: 13px; bottom: 24px; padding: 10px 12px; font-size: 29px; }
  
  .browser-chrome { height: 30px; font-size: 12px; padding: 0 9px; }
  .feature-copy > .eyebrow { margin-bottom: 16px; font-size: 12px; }
  .feature-copy h3 { font-size: 56px; max-width: 300px; }
  .feature-subtitle { font-size: 24px; margin-top: 10px; }
  .feature-copy > p { margin-top: 18px; font-size: 12px; }
  .feature-context { font-size: 12px; padding-top: 16px; margin-top: 19px; }
  .feature-actions { margin-top: 19px; gap: 8px 17px; }
  .feature-actions .button { font-size: 12px; gap: 13px; padding: 14px 13px; }
  .genjutsu-sequence { width: 130px; height: 130px; }
}
@media(max-width:370px) {
  .hero { min-height: 900px; }
  .current-quest { font-size: 12px; gap: 7px; }
  .quest-label { font-size: 12px; margin-right: 4px; }
  
  .feature-layout { padding: 16px; }
  .feature-copy h3 { font-size: 51px; }
  .retro-display { height: 260px; }
  
  .feature-topline { padding: 13px; letter-spacing: .01em; }
}
@media(prefers-reduced-motion:reduce) {
  .genjutsu-active .hero-aura { opacity: .65; }
  .feature-visual:hover .retro-preview { transform: rotate(-3deg); }
  .current-quest:hover > span:last-child, .project-card-link:hover .project-arrow { transform: none; }
}

/* Releases, worlds in development, and what comes next. */
.project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 38px 28px; }
.project-grid.single-result { grid-template-columns: 1fr; }
.single-result .project-card.project-release { max-width: none; }
.project-card-link {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  border: 0;
  background: none;
}
.project-card-link .project-image { aspect-ratio: 1.6; }
.project-card-link { position: relative; }
.project-details-trigger { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; z-index: 2; }
.project-details-trigger:focus-visible { outline: 2px solid var(--red-text); outline-offset: 8px; }
.project-card-link:focus-within .project-arrow { border-color: var(--red-text); color: var(--red-text); }
.project-card-link .project-image > img { filter: saturate(.93); }
.project-card-link .project-image:after {
  background: linear-gradient(180deg, #0707088c, transparent 28%, transparent 72%, #07070830);
  box-shadow: inset 0 0 60px #00000026;
}
 .project-card-link .project-status { z-index: 1; }

.project-card-link .project-status { color: #e1dcd2; background: #0a0a0bca; border-color: #c9b6a44d; font-size: 12px; }
.project-card-link .project-info { padding-top: 20px; }
.project-card-link .project-info h3 { font: 600 clamp(32px, 3.5vw, 48px)/1 var(--display); letter-spacing: -.3px; }
.project-card-link .project-info p { line-height: 1.7; margin-top: 10px; }
.project-card-link .project-info .eyebrow { font-size: 12px; line-height: 1.8; }
.project-card-link .project-arrow { margin-top: 22px; width: 42px; height: 42px; }
.project-card-link:focus-visible { outline-offset: 8px; }
.project-card-link:focus-visible .project-arrow { border-color: var(--red-text); color: var(--red-text); }

.project-release {
  grid-column: 1 / -1;
  border: 1px solid #443435;
  background: linear-gradient(120deg, #191415 0%, #111112 58%);
}
.release-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid #443435;
  padding: 17px 26px;
  color: #a8a09a;
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: .01em;
}
.release-topline > span:last-child { color: var(--red-text); }
.release-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 35px;
  padding: 28px;
}
.release-visual {
  position: relative;
  min-width: 0;
  min-height: 350px;
  overflow: hidden;
  display: block;
  padding: 0;
  border: 1px solid #4d373b;
  background: #100e12;
  isolation: isolate;
}
.release-visual > img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
  transition: transform .8s var(--ease-out);
}
.release-visual:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, #08070bd9);
  pointer-events: none;
}
.release-visual:hover > img { transform: scale(1.035); filter: brightness(1.08); }
.release-visual:focus-visible { outline-offset: 5px; }
.release-art-label {
  position: absolute;
  z-index: 1;
  bottom: 19px;
  left: 20px;
  right: 20px;
  color: #d4cdd5;
  text-align: left;
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: .01em;
}
.release-copy { min-width: 0; align-self: center; padding: 7px 0; }
.release-copy > .eyebrow { color: var(--red-text); font-size: 12px; line-height: 1.8; letter-spacing: .01em; margin-bottom: 18px; }
.release-copy h3 { font: 700 clamp(57px, 5.9vw, 83px)/.9 var(--display); letter-spacing: -.7px; text-transform: none; }
.release-subtitle { margin-top: 12px; font: 500 25px/1.2 var(--display); letter-spacing: .01em; color: #c5acae; }
.release-description { margin-top: 20px; max-width: 420px; color: #b0a8a4; font-size: 12px; line-height: 1.85; }
.project-tokens { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.project-tokens > span { border: 1px solid #423334; color: #bbb0aa; padding: 6px 8px; font: 12px/1.4 var(--mono); letter-spacing: .01em; }
.release-install {
  padding: 13px 15px;
  margin-top: 20px;
  border: 1px solid #3d3032;
  background: #0a090ba6;
}
.release-install code { font: 12px/1.7 var(--mono); color: #e0d3cd; letter-spacing: .01em; }
.release-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 18px; margin-top: 21px; }
.release-actions .button { font-size: 12px; padding: 14px 16px; gap: 19px; }
.release-actions .text-link { color: #bdb5ad; font-size: 12px; }
.release-actions .text-link:hover { color: var(--cream); }
.next-chapters { margin-top: 58px; padding-top: 37px; border-top: 1px solid #37302e; }
.next-heading { display: grid; grid-template-columns: 1fr auto; gap: 12px 30px; align-items: end; }
.next-heading .eyebrow { grid-column: 1 / -1; color: #a38d85; font-size: 12px; letter-spacing: .01em; }
.next-heading h3 { font: 500 34px/1.1 var(--sans); letter-spacing: -1px; }
.next-heading > p { color: var(--muted); font-size: 12px; line-height: 1.8; max-width: 350px; }
.next-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 27px; }
.next-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  padding: 26px;
  background: #111011;
  border: 1px solid #302929;
}

.next-card h4 { margin: 0 0 10px; font-size: 18px; font-weight: 500; letter-spacing: -.4px; line-height: 1.4; }
.next-card p { color: #9d9790; font-size: 12px; line-height: 1.85; }
.next-status { grid-column: 2; color: #c3a7a0; font-size: 12px; letter-spacing: .01em; padding-top: 2px; }
@media(min-width:1600px) {
  .release-layout { padding: 35px; gap: 42px; }
  .release-visual { min-height: 410px; }
}
@media(max-width:1100px) {
  .release-layout { padding: 25px; gap: 28px; }
  .release-copy h3 { font-size: clamp(48px, 6.2vw, 66px); }
  .release-visual { min-height: 360px; }
  .release-actions { gap: 5px 16px; }
  .next-card { padding: 23px; gap: 14px; }
}
@media(max-width:760px) {
  .project-grid { grid-template-columns: 1fr; gap: 33px; }
  .project-card-link .project-info h3 { font-size: 41px; }
  .project-card-link .project-info .eyebrow { font-size: 12px; }
  .project-card-link .project-image { aspect-ratio: 1.5; }
  
  .project-card-link .project-status { right: 15px; top: 15px; font-size: 12px; }
  .project-card-link .project-info { padding-top: 17px; }
  .project-card-link .project-arrow { width: 40px; height: 40px; margin-top: 23px; }
  
  .release-topline { padding: 14px 17px; font-size: 12px; gap: 12px; letter-spacing: .01em; }
  .release-layout { grid-template-columns: 1fr; padding: 20px; gap: 27px; }
  .release-visual { aspect-ratio: 1.5; min-height: 0; }
  .release-art-label { left: 14px; right: 14px; bottom: 13px; font-size: 12px; letter-spacing: .01em; }
  .release-copy { padding: 0; }
  .release-copy > .eyebrow { font-size: 12px; margin-bottom: 17px; }
  .release-copy h3 { font-size: clamp(42px, 15vw, 66px); }
  .release-subtitle { font-size: 25px; margin-top: 11px; }
  .release-description { font-size: 12px; margin-top: 18px; }
  .project-tokens { margin-top: 18px; gap: 6px; }
  .project-tokens > span { font-size: 12px; padding: 6px 7px; }
  .release-install { padding: 12px 13px; margin-top: 18px; }
  .release-install code { font-size: 12px; }
  .release-actions { margin-top: 18px; gap: 7px 17px; }
  .release-actions .button { padding: 14px 13px; gap: 13px; font-size: 12px; }
  .next-chapters { margin-top: 43px; padding-top: 29px; }
  .next-heading { display: block; }
  .next-heading .eyebrow { margin-bottom: 17px; font-size: 12px; }
  .next-heading h3 { font-size: 30px; }
  .next-heading > p { margin-top: 12px; font-size: 12px; }
  .next-grid { grid-template-columns: 1fr; gap: 13px; margin-top: 23px; }
  .next-card { padding: 22px 20px; gap: 13px 16px; }
  .next-card h4 { font-size: 18px; }
  .next-card p { font-size: 12px; }
  .next-status { font-size: 12px; }
}
@media(max-width:370px) {
  .release-layout { padding: 16px; gap: 24px; }
  .release-topline { padding: 13px; font-size: 12px; letter-spacing: .01em; }
  .release-copy h3 { font-size: clamp(42px, 15vw, 55px); }
  .project-card-link .project-info h3 { font-size: 35px; }
  .project-card-link .project-info p { font-size: 12px; }
  
  .project-card-link .project-status { right: 12px; top: 12px; font-size: 12px; }
  .release-art-label { font-size: 12px; letter-spacing: .01em; }
  .next-card { padding: 20px 16px; }
}
@media(prefers-reduced-motion:reduce) {
  .release-visual:hover > img, .project-card-link:hover .project-image > img { transform: none; }
}

/* The inner world: a tactile Sharingan, with its own awakening state. */
.universe-mark > .orbit,
.universe-mark:before,
.universe-mark:after { pointer-events: none; }
.universe-eye-control {
  position: relative;
  z-index: 2;
  width: 39%;
  aspect-ratio: 1;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  touch-action: pan-y pinch-zoom;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.universe-eye-control:active { cursor: grabbing; }
.universe-eye-control:focus-visible { outline: 1px solid var(--red-text); outline-offset: 11px; }
.universe-eye-control:before {
  content: '';
  position: absolute;
  inset: -27%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, #dc343322, transparent 67%);
  opacity: .3;
  transform: scale(.9);
  transition: opacity .8s var(--ease-out), transform 1s var(--ease-out);
}
.ocular-rotor {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(var(--ocular-turn, 0deg));
  transition: transform 1s var(--ease-out);
}
.universe-mark .universe-eye-control .universe-eye {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--red);
  opacity: .9;
  filter: drop-shadow(0 0 24px #d936391f);
  animation: none;
  transition: opacity .65s var(--ease-out), transform .9s var(--ease-out);
  pointer-events: none;
}
.universe-mark .universe-eye-control .ocular-normal { transform: rotate(0deg) scale(1); }
.universe-mark .universe-eye-control .ocular-awakened { opacity: 0; transform: rotate(-45deg) scale(.82); }
.universe-mark.is-awakened .universe-eye-control .ocular-normal { opacity: 0; transform: rotate(45deg) scale(.82); }
.universe-mark.is-awakened .universe-eye-control .ocular-awakened {
  opacity: 1;
  transform: rotate(0deg) scale(1);
  filter: drop-shadow(0 0 25px #e6383a55);
}
.universe-eye-control:hover:before,
.universe-eye-control:focus-visible:before { opacity: .7; transform: scale(1); }
.universe-mark.is-awakened .universe-eye-control:before { opacity: 1; transform: scale(1.15); }
.universe-mark .orbit { transition: none; }
.universe-mark.is-awakened .orbit-one { border-color: #65312e; }
.universe-mark.is-awakened .orbit-two { border-color: #b83a38aa; box-shadow: 0 0 30px #d9363910, inset 0 0 30px #d9363910; }
.universe-mark.is-transforming .orbit-two { animation: ocular-orbit-flash 1.1s var(--ease-out) both; }
.universe-mark.is-dragging .ocular-rotor { transition: none; }
.universe-mark.is-dragging .universe-eye-control { cursor: grabbing; }
.universe-mark.is-dragging .orbit-two { border-color: #ce4a4588; }
.ocular-hint {
  position: absolute;
  z-index: 2;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 90%;
  color: #8c817a;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .01em;
  text-align: center;
  pointer-events: none;
  transition: none;
}
.universe-mark:has(.universe-eye-control:hover) .ocular-hint,
.universe-mark:has(.universe-eye-control:focus-visible) .ocular-hint,
.universe-mark.is-awakened .ocular-hint { color: #cb9290; }
@keyframes ocular-orbit-flash {
  0% { box-shadow: 0 0 0 0 #d9363933; }
  35% { box-shadow: 0 0 40px 10px #d9363929, inset 0 0 35px #d9363920; }
  100% { box-shadow: 0 0 30px #d9363910, inset 0 0 30px #d9363910; }
}
@media(max-width:760px) {
  .ocular-hint { font-size: 12px; letter-spacing: .01em; }
  .universe-eye-control:focus-visible { outline-offset: 8px; }
}
@media(prefers-reduced-motion:reduce) {
  .universe-mark .ocular-rotor { transform: none; }
  .universe-mark .universe-eye-control .universe-eye { transform: none; }
  .universe-mark.is-transforming .orbit-two { animation: none; }
}

/* ============ 2. Articles and the project hubs ============ */
/* Project dossiers and the written archive. */
.project-summary { max-width: 450px; min-height: 3.8em; margin-top: 20px; color: #aaa49d; font-size: 12px; line-height: 1.9; }
.writing { border-top: 1px solid var(--line); background: #0e0d0e; }
.writing .section-heading { margin-bottom: 0; }
/* Microtype floor for the archive: mono labels and metadata are at least 12px and clear WCAG AA (4.5:1) on the dark
   surfaces. masterpiece.css pins several of these shared label selectors at 10px, so the selectors here are scoped
   under .writing to win without touching the rest of the site. */
.writing .writing-topline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; margin-top: 55px; padding: 22px 0; border-top: 1px solid var(--line); color: #bcb5ac; font-size: 12px; letter-spacing: .01em; }
.writing .writing-topline > span:last-child { color: #aaa39b; }
.writing .section-heading .eyebrow { font-size: 12px; letter-spacing: .01em; }
.article-grid { display: flex; flex-direction: column; gap: 44px; }
.article-card { min-width: 0; border: 1px solid #3a2f31; background: linear-gradient(140deg,#1b1415,#111112 70%); transition: none; }
.article-card:hover { border-color: #99504c; background: linear-gradient(140deg,#26171a,#141213 70%); }
.article-link { display: flex; flex-direction: column; height: 100%; padding: 30px; }
.article-link:focus-visible { outline-offset: 5px; }
.article-body { min-width: 0; display: flex; flex-direction: column; }
/* Every meta line has the same anatomy: label, pills, and the date on the same baseline. */
.writing .article-topline { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; padding-bottom: 22px; border-bottom: 1px solid #423235; color: #bcb0aa; font-size: 12px; line-height: 24px; letter-spacing: .01em; }
.article-topline time { white-space: nowrap; }
.article-topline-label { display: inline-flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; }
/* One pill system: NEW is filled, a topic is outlined, and both share height, padding and type. */
.writing :is(.article-new, .article-topic) { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border: 1px solid; font: 500 12px/1 var(--mono); letter-spacing: .01em; text-transform: none; white-space: nowrap; }
.writing .article-new { border-color: #ef767b; background: #f0646a; color: #19090d; }
.writing .article-topic { border-color: #8a6f75; color: #e2cfc8; }
.article-media { position: relative; min-width: 0; aspect-ratio: 5 / 2; overflow: hidden; background: #150f11; }
.article-cover { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); }
.article-plate { position: absolute; inset: 0; isolation: isolate; display: flex; align-items: flex-end; padding: 0 0 0 clamp(12px,2vw,22px); overflow: hidden; background: radial-gradient(ellipse at 88% 8%,#a8323a40,transparent 58%), repeating-linear-gradient(0deg,transparent 0 23px,#ffffff09 23px 24px), repeating-linear-gradient(90deg,transparent 0 23px,#ffffff09 23px 24px), #170f12; }
.article-plate-num { font: 800 clamp(96px,10.5vw,150px)/.78 var(--display); letter-spacing: -4px; color: transparent; -webkit-text-stroke: 1px #c8696d99; transform: translateY(8%); }
.article-plate:before, .article-plate:after { position: absolute; z-index: 1; font: 500 12px/1 var(--mono); letter-spacing: .01em; color: #b8a5a0; }
.article-plate:before { content: 'HT'; top: 14px; left: 16px; }
.article-plate:after { content: 'X / LONG FORM'; right: 16px; bottom: 14px; }
.article-card--featured { border-color: #8e454d; background: radial-gradient(ellipse at 100% 0,#82263924,transparent 65%),linear-gradient(140deg,#241519,#111112 70%); }
.article-card--featured .article-link { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: clamp(28px,4vw,52px); align-items: center; padding: 32px; }
.article-card--featured .article-body { align-self: stretch; justify-content: center; }
.article-card--featured h3 { max-width: 900px; }
.article-card--featured .article-excerpt { max-width: 720px; }
/* A cover on the featured card is the visual, not a second headline. X covers carry the title in their left half, so the
   frame is a 5:4 crop anchored to the right: the artwork stays, the baked-in headline is cropped out and the text title
   is the only one. It never gets wider than 5:4, so the crop only ever gets tighter. */
.article-card--cover .article-link { grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); }
.article-card--cover .article-media { align-self: stretch; aspect-ratio: 5 / 4; }
.article-card--cover .article-cover { position: absolute; inset: 0; object-position: 100% 50%; }
.article-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 26px; }
.writing .article-format { color: #f27375; font-size: 12px; letter-spacing: .01em; }
.article-card h3 { font: 600 clamp(31px,3vw,43px)/1.12 var(--display); letter-spacing: -.2px; margin-top: 15px; overflow-wrap: anywhere; }
.article-excerpt { font-size: 13px; line-height: 1.8; color: #b0a8a1; margin-top: 17px; }
/* The call to action is the site's red button, sitting right under the excerpt. It is a span: the card is the one link. */
.article-bottom { display: flex; margin-top: 28px; }
.article-cta { gap: 22px; }
.article-link:hover .article-cta { background: #b9292c; }
.article-link:hover .article-cta svg { transform: translate(2px,-2px); }
.article-list-label { margin: 0 0 14px; color: #bcb5ac; font-size: 12px; letter-spacing: .01em; }
.article-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #3a2f31; }
.article-list > li { margin: 0; }
.article-list .article-card { border: 0; border-bottom: 1px solid #3a2f31; background: none; }
.article-list .article-card:hover { background: linear-gradient(90deg,#26171a,#14121300 85%); transform: none; }
.article-list .article-link { display: grid; grid-template-columns: 220px minmax(0,1fr) 40px; gap: 14px 28px; align-items: center; padding: 20px 18px; }
/* Rows share one height: the body reserves a one-line title plus a two-line excerpt, so a row without an excerpt
   does not collapse, and long excerpts clamp at two lines. Titles are never cut. */
.article-list .article-body { --row-title: clamp(24px,2.1vw,30px); justify-content: center; min-height: calc(33px + var(--row-title) * 1.15 + 8px + 13px * 1.7 * 2); }
.article-list .article-topline { padding-bottom: 9px; border: 0; }
.article-list .article-card h3 { margin-top: 0; font-size: var(--row-title); line-height: 1.15; }
.article-list .article-excerpt { margin-top: 8px; font-size: 13px; line-height: 1.7; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.article-list .article-plate { padding: 0 0 0 10px; }
.article-list .article-plate-num { font-size: 58px; letter-spacing: -2px; transform: none; padding-bottom: 6px; }
.article-list .article-plate:before, .article-list .article-plate:after { display: none; }
.article-arrow { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid #4a3a3d; border-radius: 50%; color: #d3c5bb; transition: transform .3s; }
.article-link:hover .article-arrow { border-color: var(--red-text); color: var(--red-text); transform: translate(2px,-2px); }
.article-more-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 56px; padding: 0 18px; border: 0; border-bottom: 1px solid #3a2f31; background: #120e0f; color: #d3c5bb; font: 500 12px/1.4 var(--mono); letter-spacing: .01em; text-transform: none; text-align: left; transition: none; }
.article-more-toggle:hover { background: #1a1214; color: #fff; }
.article-more-icon { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.article-more-icon:before, .article-more-icon:after { content: ''; position: absolute; left: 0; top: 6px; width: 14px; height: 1.5px; background: currentColor; }
.article-more-icon:after { transform: rotate(90deg); transition: transform .3s; }
.article-more-toggle[aria-expanded="true"] .article-more-icon:after { transform: rotate(0); }
.article-list#article-more { border-top: 0; animation: fade-rise .6s var(--ease) both; }
.writing-footer { display: flex; justify-content: space-between; align-items: center; gap: 22px; margin-top: 28px; }
.writing .writing-footer > .mono { font-size: 12px; color: #aaa09a; letter-spacing: .01em; line-height: 1.7; }
.writing-footer .text-link { font-size: 12px; }
.writing-empty { grid-column: 1 / -1; padding: 35px; border: 1px solid #3a2f31; background: linear-gradient(120deg,#1a1315,#111112); }
.writing .writing-empty .eyebrow { font-size: 12px; color: var(--red-text); }
.writing-empty p { font-size: 17px; line-height: 1.7; margin-top: 20px; }
.writing-empty .text-link { font-size: 12px; margin-top: 20px; }
@media(min-width:761px) and (max-width:1050px) {
  .desktop-nav { gap: 18px; }
  .desktop-nav a { font-size: 12px; }
}
@media(min-width:761px) and (max-width:1100px) {
  /* A narrow text column wraps most titles, so the rows reserve a second title line to stay level. */
  .article-list .article-body { min-height: calc(33px + var(--row-title) * 1.15 * 2 + 8px + 13px * 1.7 * 2); }
}
@media(max-width:760px) {
  .project-summary { min-height: 0; font-size: 12px; margin-top: 17px; }
  .writing .writing-topline { margin-top: 30px; padding: 20px 0; gap: 6px 12px; letter-spacing: .01em; }
  .article-grid { gap: 32px; }
  .article-link { padding: 24px; }
  .article-card--featured .article-link, .article-card--cover .article-link { grid-template-columns: 1fr; gap: 22px; padding: 18px 18px 24px; }
  .writing .article-topline { padding-bottom: 19px; letter-spacing: .01em; }
  .article-topline-label { gap: 6px 8px; }
  .writing .article-format { letter-spacing: .01em; }
  .article-kicker { margin-top: 20px; }
  .article-card h3 { font-size: 34px; }
  .article-bottom { margin-top: 24px; }
  .article-cta { width: 100%; }
  .article-plate-num { font-size: 104px; }
  .article-list .article-link { grid-template-columns: 76px minmax(0,1fr); gap: 14px 16px; align-items: start; padding: 16px 4px; }
  .article-list .article-media { aspect-ratio: 1; }
  .article-list .article-cover { object-position: 100% 50%; }
  .article-list .article-body { min-height: 0; justify-content: flex-start; }
  .article-list .article-plate-num { font-size: 44px; }
  .article-list .article-topline { padding-bottom: 7px; }
  .article-list .article-card h3 { font-size: 23px; }
  .article-list .article-excerpt, .article-arrow { display: none; }
  .article-more-toggle { padding: 0 4px; }
  .writing-footer { flex-direction: column; align-items: flex-start; gap: 13px; }
  .writing-empty { padding: 25px; }
  .writing-empty p { font-size: 15px; }
}
@media(max-width:370px) {
  .article-link { padding: 20px; }
  .article-card h3 { font-size: 30px; }
}
@media(prefers-reduced-motion:reduce) {
  .article-link:hover .article-cta svg, .article-link:hover .article-arrow { transform: none; }
}

/* Cartoon Network hub: inside the capsule, playable now, in the workshop, and a roadmap teaser.
   Same microtype floor as the archive: mono labels are at least 12px and clear WCAG AA, and every description,
   the roadmap included, shares one size (--hub-copy). */
.hub { --hub-copy: 13px; border-top: 1px solid #33332e; }
.hub-panels { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.35fr) minmax(0,1fr); }
.hub-panel { min-width: 0; padding: 30px 30px 34px; border-left: 1px solid #33332e; }
.hub-panel:first-child { padding-left: 35px; border-left: 0; }
.hub-panel:last-child { padding-right: 35px; }
.hub .hub-title { display: flex; align-items: baseline; gap: 10px; margin: 0; color: var(--cream); font: 500 12px/1.5 var(--mono); letter-spacing: .01em; text-transform: none; }
.hub .hub-title > span { color: var(--red-text); }
.hub .hub-intro { margin-top: 12px; color: #b5b3a9; font-size: var(--hub-copy); line-height: 1.7; }
.hub-list { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid #33332e; }
/* One item anatomy for every column: name, meta line, status tags, description. Capsule items omit the middle two. */
.hub-item { position: relative; display: flex; flex-direction: column; gap: 7px; padding: 16px 0; border-bottom: 1px solid #2a2b26; }
.hub-name { color: var(--cream); font: 600 21px/1.15 var(--display); letter-spacing: .01em; overflow-wrap: anywhere; }
.hub .hub-note { color: #b9b6ac; font-size: var(--hub-copy); line-height: 1.65; }
.hub .hub-more { margin-top: 16px; color: #a9aba0; font-size: 12px; line-height: 1.75; }
/* The dot belongs to the part that follows it. The row is shifted left by the dot's slot and clipped, so a part that
   starts a line loses its dot instead of leaving one dangling at the end of the line above. */
.hub-meta { display: block; overflow: hidden; color: #b8bbac; font-size: 12px; line-height: 1.5; letter-spacing: .01em; text-transform: none; }
.hub-meta-row { display: flex; flex-wrap: wrap; gap: 2px 0; margin-left: -16px; }
.hub-meta-row > span { position: relative; padding-left: 16px; }
.hub-meta-row > span:before { content: '·'; content: '·' / ''; position: absolute; left: 0; width: 16px; text-align: center; color: #8d9282; }
/* One status-tag system, one style per meaning: live (playable) green, wip (in progress) amber, partial (reconstructed or
   incomplete) neutral. All outlined, all the same height, padding and type, and the same pill shape as the archive. */
.hub-tags { display: flex; flex-wrap: wrap; align-self: flex-start; gap: 6px 8px; max-width: 100%; }
.hub-tag { display: inline-flex; align-items: center; min-height: 24px; max-width: 100%; padding: 2px 10px; border: 1px solid; font: 500 12px/1.2 var(--mono); letter-spacing: .01em; text-transform: none; }
.hub-tag--live { border-color: #7f9f74; color: #bcd8b0; }
.hub-tag--wip { border-color: #b08a35; color: #f0c25e; }
.hub-tag--partial { border-color: #6f7066; color: #c9c6bb; }
.hub-game { transition: none; }
.hub-game:hover { background: linear-gradient(90deg,#1b211c,transparent 90%); }
.hub-game-link { display: inline-flex; align-items: center; gap: 10px; }
.hub-game-link:after { content: ''; position: absolute; inset: 0; }
.hub .hub-game-link:focus-visible { outline: 0; }
.hub-game-link:focus-visible:after { outline: 2px solid var(--red-text); outline-offset: 2px; }
.hub-game-link .icon { width: 14px; height: 14px; color: var(--sage); transition: transform .3s; }
.hub-game:hover .hub-game-link .icon { transform: translate(2px,-2px); }
.hub-roadmap { display: grid; gap: 18px; padding: 28px 35px 32px; border-top: 1px solid #4b4d3f; background: linear-gradient(90deg,#1b2012,#13160e 75%); }
.hub-roadmap-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; }
.hub .hub-title--roadmap { flex: 0 1 auto; min-width: 0; align-items: center; }
.hub-title--roadmap:before { content: ''; flex: 0 0 auto; width: 56px; height: 12px; background: repeating-linear-gradient(135deg,#d4d96c 0 6px,#16190f 6px 12px); }
.hub-roadmap-aside { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-left: auto; }
.hub-teasers { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 10px 32px; margin: 0; padding: 0; list-style: none; color: #c9c6bb; font-size: var(--hub-copy); line-height: 1.65; }
.hub-teasers li { position: relative; padding-left: 18px; }
.hub-teasers li:before { content: ''; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border: 1px solid #a9b57a; }
.hub-roadmap .text-link { font-size: 12px; color: #c9c6bb; }
.hub-asof { color: #a9aca0; font-size: 12px; letter-spacing: .01em; }
.hub--dialog { margin-top: 26px; border: 1px solid #33332e; }
.hub--dialog .hub-panels { grid-template-columns: 1fr; }
.hub--dialog .hub-panel, .hub--dialog .hub-panel:first-child, .hub--dialog .hub-panel:last-child { padding: 24px 24px 26px; border-left: 0; border-top: 1px solid #33332e; }
.hub--dialog .hub-panel:first-child { border-top: 0; }
.hub--dialog .hub-roadmap { padding: 20px 24px 22px; }
/* The cartoon card's own mono labels follow the same floor. styles.css and masterpiece.css pin them at 6-10px, so
   these selectors are scoped under the card to win. */
 .project-featured .feature-copy > .eyebrow, .project-featured .feature-context { font-size: 12px; letter-spacing: .01em; }
.project-featured .feature-topline { color: #b5b2a8; }
.project-featured .feature-actions :is(.button, .text-link) { font-size: 12px; }
.project-featured .feature-copy > p { font-size: 12px; }
.project-featured .feature-context { color: #b0b3a5; }
@media(min-width:1101px) {
  /* Three columns share rows (heading, intro, list), so the lists start together and close on one hairline. */
  .hub:not(.hub--dialog) .hub-panels { grid-template-rows: auto auto 1fr; }
  .hub:not(.hub--dialog) .hub-panel { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: subgrid; grid-row: span 3; align-content: start; }
  .hub:not(.hub--dialog) .hub-title { grid-row: 1; }
  .hub:not(.hub--dialog) .hub-intro { grid-row: 2; }
  .hub:not(.hub--dialog) .hub-body { grid-row: 3; border-bottom: 1px solid #33332e; }
  .hub:not(.hub--dialog) .hub-item:last-child { border-bottom: 0; }
}
@media(min-width:601px) and (max-width:1100px) {
  .hub-panels { grid-template-columns: 1fr; }
  .hub-panel, .hub-panel:first-child, .hub-panel:last-child { padding: 28px 35px 30px; border-left: 0; border-top: 1px solid #33332e; }
  .hub-panel:first-child { border-top: 0; }
  .hub--dialog .hub-panel, .hub--dialog .hub-panel:first-child, .hub--dialog .hub-panel:last-child { padding: 24px 24px 26px; }
  .hub--dialog .hub-panel:first-child { border-top: 0; }
}
@media(min-width:680px) and (max-width:1100px) {
  .hub:not(.hub--dialog) .hub-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 34px; }
}

@media(max-width:600px) {
  .hub-panels { grid-template-columns: 1fr; }
  .hub-panel, .hub-panel:first-child, .hub-panel:last-child { padding: 24px 20px 26px; border-left: 0; border-top: 1px solid #33332e; }
  .hub-panel:first-child { border-top: 0; }
  .hub-roadmap { padding: 24px 20px 26px; gap: 14px; }
  .hub-roadmap-aside { margin-left: 0; }
  .hub--dialog .hub-panel, .hub--dialog .hub-panel:first-child, .hub--dialog .hub-panel:last-child { padding: 20px 16px 22px; }
  .hub--dialog .hub-panel:first-child { border-top: 0; }
  .hub--dialog .hub-roadmap { padding: 18px 16px 20px; }
}
@media(prefers-reduced-motion:reduce) {
  .hub-game:hover .hub-game-link .icon { transform: none; }
}
@media(max-width:600px) {
  /* On phones the capsule pages read as chips; the full notes stay in the project dialog. */
  .hub:not(.hub--dialog) .hub-capsule .hub-list { display: flex; flex-wrap: wrap; gap: 8px; border-top: 0; }
  .hub:not(.hub--dialog) .hub-capsule .hub-item { padding: 6px 12px 7px; border: 1px solid #33332e; }
  .hub:not(.hub--dialog) .hub-capsule .hub-name { font-size: 19px; }
  .hub:not(.hub--dialog) .hub-capsule .hub-note { display: none; }
}

/* City of Heroes: a wide coming-soon card. It reuses the release card (cover button, copy, actions) and the same hub as
   the Cartoon card, with two columns instead of three. The hub is drawn in the release card's crimson instead of olive
   (.hub--soon, so the dialog copy matches the card). Same microtype floor as the other dossiers: mono labels are at
   least 12px, and the copy is 13px.
   One grid for the whole card: --soon-pad is the card's inner padding, and the hub panels use it on both sides. On wide
   screens the cover/copy columns are equal and the gap is twice the padding, so the hub's column divider falls exactly on
   the middle of the cover/copy gutter, the cover's right edge and the first hub column's right edge are the same x, and
   so are the copy's left edge and the second hub column's left edge. */
.project-soon { --soon-pad: 28px; }
.project-soon .release-topline { padding-inline: var(--soon-pad); }
.project-soon .release-layout { padding: var(--soon-pad); align-items: center; }
/* A fixed 3:2 frame (not a stretched box), so the figures are never cropped harder than the art allows. */
.project-soon .release-visual { min-height: 0; aspect-ratio: 3 / 2; }
.project-soon :is(.release-topline, .release-art-label, .release-copy > .eyebrow, .project-tokens > span) { font-size: 12px; letter-spacing: .01em; }
.project-soon .release-topline { color: #b9b0aa; }
.project-soon .release-art-label { color: #e4dcd8; }
.project-soon .release-copy > .eyebrow { line-height: 1.6; }
.project-soon .release-description { max-width: 480px; color: #b9b1ac; font-size: 13px; line-height: 1.8; }
.project-soon .project-tokens > span { border-color: #4d3b3d; color: #c4bab4; }
.project-soon .release-actions :is(.button, .text-link) { font-size: 12px; }
.hub--soon, .hub--soon .hub-panel { border-color: #443435; }
.hub--soon .hub-list { border-top-color: #443435; }
.hub--soon .hub-item { border-bottom-color: #34292b; }
.hub--soon:not(.hub--dialog) .hub-body { border-bottom-color: #443435; }
.hub--soon:not(.hub--dialog) .hub-panel { padding-inline: var(--soon-pad); }
.hub--soon:not(.hub--dialog) .hub-roadmap { padding-inline: var(--soon-pad); }
.hub--soon .hub-roadmap { border-top-color: #5a3c3b; background: linear-gradient(90deg,#26161a,#141112 75%); }
.hub--soon .hub-title--roadmap:before { background: repeating-linear-gradient(135deg,#e0585d 0 6px,#190b0e 6px 12px); }
.hub--soon .hub-teasers { color: #d0c8c2; }
.hub--soon .hub-teasers li:before { border-color: #d27478; }
@media(min-width:1101px) {
  .project-soon .release-layout { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: calc(var(--soon-pad) * 2); }
  /* The two columns share their rows: item 1 sits level with item 1 of the other column, and so on, so each row is as tall
     as the taller of the two and the hairlines run straight across the divider. Neither column can end in a dead block. */
  .hub--soon:not(.hub--dialog) .hub-panels { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: auto auto repeat(var(--hub-rows,1),auto); }
  .hub--soon:not(.hub--dialog) .hub-panel { grid-row: span var(--hub-span,3); }
  .hub--soon:not(.hub--dialog) :is(.hub-body, .hub-list) { display: contents; }
  /* The divider is drawn centred on the gutter (not as a 1px border that would push the second column 1px off the copy). */
  .hub--soon:not(.hub--dialog) .hub-panel + .hub-panel { position: relative; border-left: 0; }
  .hub--soon:not(.hub--dialog) .hub-panel + .hub-panel:before { content: ''; position: absolute; top: 0; bottom: 0; left: -.5px; width: 1px; background: #443435; }
  body.genjutsu-active .hub--soon:not(.hub--dialog) .hub-panel + .hub-panel:before { background: #54283c; }
  .hub--soon:not(.hub--dialog) .hub-item:first-child { margin-top: 18px; border-top: 1px solid #443435; }
  .hub--soon:not(.hub--dialog) .hub-item:last-child { border-bottom: 1px solid #34292b; }
}
@media(max-width:1100px) {
  .project-soon { --soon-pad: 25px; }
}
@media(max-width:760px) {
  .project-soon { --soon-pad: 20px; }
}

/* ============ 3. Mangekyo mode: the page re-themed when the eye is awakened ============ */
/* Mangekyo reality: still, dimensional color rather than a screen effect. */
body { transition: none; }

body.genjutsu-active {
  --bg: #060507;
  --surface: #130a10;
  --cream: #fff1e9;
  --muted: #b9a9ae;
  --red: #e93c49;
  --red-text: #ff8179;
  --line: #42232e;
  --sage: #d8b2bf;
  color-scheme: dark;
  background: var(--bg);
  color: var(--cream);
}

body.genjutsu-active ::selection { background: #a7233a; color: #fff8f0; }
body.genjutsu-active :is(a, button):focus-visible { outline-color: #ff9b8d; }
body.genjutsu-active .grain { opacity: .025; }
body.genjutsu-active .scroll-progress { background: #ff776e; }

body.genjutsu-active :is(.site-header, .mobile-nav) {
  background: #09060b;
  border-color: #6f2a3e;
}
body.genjutsu-active .site-header { box-shadow: 0 1px 26px #b3223514; }
body.genjutsu-active .brand svg { color: #fb5961; }
body.genjutsu-active .desktop-nav span { color: #b58a98; }
body.genjutsu-active .desktop-nav a:hover { color: #ff9b8d; }
body.genjutsu-active .sound-toggle { color: #d8bdc1; }
body.genjutsu-active .header-x:hover { color: #ff9b8d; background: #ff77750a; }

body.genjutsu-active .hero-art { filter: saturate(1.2) contrast(1.1) brightness(.82); }
body.genjutsu-active .hero-shade {
  background:
    linear-gradient(90deg, #06050775, transparent 70%),
    linear-gradient(0deg, var(--bg), transparent 31%, transparent 80%, #0c060c45);
}
body.genjutsu-active .hero-aura {
  background: radial-gradient(ellipse at 75% 34%, #bf193c25, transparent 55%);
  opacity: .85;
  mix-blend-mode: normal;
  animation: none;
}
body.genjutsu-active .hero h1 { color: #fff1e9; }
body.genjutsu-active .hero h1 .outline-text { color: transparent; -webkit-text-stroke-color: #ff716e; }

body.genjutsu-active .hero-kanji { color: #e4a0a480; }
body.genjutsu-active .current-quest { border-color: #c84c5c44; color: #d9c3c4; }
body.genjutsu-active .eye-button {
  background: #1a0912c9;
  border-color: #d95167;
  box-shadow: 0 0 0 5px #d8334710, 0 0 28px #e3314830;
}
body.genjutsu-active .eye-button svg { color: #ff5c63; }
body.genjutsu-active .activation-muted { color: #c899a6; }

body.genjutsu-active .button-red {
  background: linear-gradient(110deg, #bc2135, #a41f3d);
  color: #fff7f1;
  box-shadow: 0 5px 24px #b617342a;
}
body.genjutsu-active .button-red:hover { background: linear-gradient(110deg, #cf2a3e, #b62948); }
body.genjutsu-active .text-link:hover { color: #ff9b8d; }
body.genjutsu-active .status-dot { background: #ff8179; }

body.genjutsu-active .projects {
  background: radial-gradient(ellipse at 100% 0, #5e112722 0, transparent 44%), #060507;
}
body.genjutsu-active .section-heading h2 { color: #fff1e9; }
body.genjutsu-active :is(.project-summary, .project-info p) { color: #c8b7bd; }
body.genjutsu-active .project-info .eyebrow { color: #c896a7; }
body.genjutsu-active .project-filters button { color: #ccb8be; }
body.genjutsu-active .project-filters button.active { color: #fff1e9; }
body.genjutsu-active .project-card-link .project-image { border-color: #6b2e40; }
body.genjutsu-active .project-card-link .project-image > img { filter: saturate(1.1) contrast(1.035); }
body.genjutsu-active .project-card-link:hover .project-image > img { filter: saturate(1.18) contrast(1.035) brightness(1.04); }
body.genjutsu-active .project-card-link .project-status { background: #100710e6; border-color: #cc6a805c; color: #f2d8de; }

body.genjutsu-active .project-arrow { border-color: #7b3449; color: #ffc2b8; }
body.genjutsu-active .project-card-link:hover .project-arrow { background: #b7233b; border-color: #e74f68; color: #fff7f1; }
body.genjutsu-active .project-release {
  background: radial-gradient(ellipse at 100% 0, #61132969, transparent 58%), linear-gradient(120deg, #180910, #0b070d 64%);
  border-color: #854052;
  box-shadow: 0 18px 65px #0003, inset 0 1px #f761791c;
}
body.genjutsu-active .release-topline { border-color: #673044; color: #caaab4; }
body.genjutsu-active .release-visual { border-color: #753146; }
body.genjutsu-active .release-visual > img { filter: saturate(1.12) contrast(1.04); }
body.genjutsu-active .release-visual:hover > img { filter: saturate(1.18) contrast(1.04) brightness(1.05); }
body.genjutsu-active .release-subtitle { color: #e4acba; }
body.genjutsu-active :is(.release-description, .feature-copy > p) { color: #c9b7bd; }
body.genjutsu-active .project-tokens > span { color: #d8bdc6; border-color: #623044; background: #190c1559; }
body.genjutsu-active .release-install { border-color: #6b3045; background: #070509a8; }
body.genjutsu-active .release-install code { color: #f4d6d9; }
body.genjutsu-active :is(.release-actions .text-link, .feature-actions .text-link) { color: #dbc1c8; }
body.genjutsu-active .project-featured { background: linear-gradient(120deg, #160a12, #0a070c 70%); border-color: #673047; }
body.genjutsu-active :is(.feature-topline, .feature-context) { border-color: #54283c; color: #c0a4af; }
body.genjutsu-active .feature-visual { border-color: #614052; }
body.genjutsu-active .browser-chrome { background: #120b15; border-color: #614052; color: #ceb7c8; }

body.genjutsu-active .next-chapters { border-color: #683047; }
body.genjutsu-active .next-heading .eyebrow { color: #d2a2b2; }
body.genjutsu-active .next-card { border-color: #53283c; background: linear-gradient(140deg, #190b13, #0a070d 75%); }

body.genjutsu-active .next-card p { color: #c2aeb7; }
body.genjutsu-active .next-status { color: #e4a6b3; }

body.genjutsu-active .writing {
  background: radial-gradient(ellipse at 15% 0, #6b173133, transparent 65%), #0a060c;
  border-color: #6b2e43;
}
body.genjutsu-active .writing-topline { color: #d4b5c0; }
body.genjutsu-active .article-card {
  background: linear-gradient(140deg, #2c101d, #100810 65%);
  border-color: #824354;
  box-shadow: inset 0 1px #e6668017;
}
body.genjutsu-active .article-card:hover {
  background: linear-gradient(140deg, #391423, #160b15 65%);
  border-color: #db6b79;
}
body.genjutsu-active .article-topline { border-color: #653147; color: #d5a6b8; }
body.genjutsu-active .article-cover { filter: saturate(1.03) contrast(1.025); }
body.genjutsu-active .article-excerpt { color: #cbb4be; }
body.genjutsu-active .article-list { border-color: #653147; }
body.genjutsu-active .article-list .article-card { background: none; border-color: #653147; box-shadow: none; }
body.genjutsu-active .article-list .article-card:hover { background: linear-gradient(90deg, #391423, #160b1500 85%); }
body.genjutsu-active .article-topic { border-color: #7a3d54; color: #e3bccb; }
body.genjutsu-active .article-list-label { color: #d4b5c0; }
body.genjutsu-active .article-arrow { border-color: #7a3d54; color: #f1ced1; }
body.genjutsu-active .article-more-toggle { border-color: #653147; background: #12080f; color: #e8c7d0; }
body.genjutsu-active .article-more-toggle:hover { background: #1c0d17; color: #fff; }
body.genjutsu-active .article-plate { background: radial-gradient(ellipse at 88% 8%, #d9365a40, transparent 58%), repeating-linear-gradient(0deg, transparent 0 23px, #ffffff0a 23px 24px), repeating-linear-gradient(90deg, transparent 0 23px, #ffffff0a 23px 24px), #14080f; }
body.genjutsu-active .article-link:hover .article-cta { background: linear-gradient(110deg, #cf2a3e, #b62948); }
body.genjutsu-active .writing-footer > .mono { color: #bca1ae; }
body.genjutsu-active .writing-empty { border-color: #824354; background: linear-gradient(120deg, #2c101d, #100810); }

body.genjutsu-active .universe {
  background: radial-gradient(ellipse at 23% 50%, #661c3236, transparent 55%), linear-gradient(125deg, #0e080f, #070509 75%);
  border-color: #733448;
}
body.genjutsu-active .universe-mark { background: radial-gradient(circle, #d8283e20, #7a1c2d10 40%, transparent 67%); }
body.genjutsu-active .universe-mark :is(.orbit-one, .orbit-two) { border-color: #8e3b51; }
body.genjutsu-active .universe-mark .orbit-two { border-color: #da4d61a3; box-shadow: 0 0 35px #f4434912, inset 0 0 35px #f4434910; }
body.genjutsu-active .universe-mark:before,
body.genjutsu-active .universe-mark:after { background: #593141; }
body.genjutsu-active .orbit-one:before,
body.genjutsu-active .orbit-two:before { background: #ffada2; }
body.genjutsu-active .orbit-label { background: #140a12; color: #dfacba; }
body.genjutsu-active .universe-coordinate { color: #c893a6; }
body.genjutsu-active .universe-mark .universe-eye-control .universe-eye { color: #f84b53; }
body.genjutsu-active .universe-mark .universe-eye-control .ocular-awakened { filter: drop-shadow(0 0 24px #e6384b50); }
body.genjutsu-active .universe-eye { animation: none; }
body.genjutsu-active .ocular-hint { color: #eab0b4; }
body.genjutsu-active .universe-content h2 em { color: #ff9b8d; }
body.genjutsu-active .universe-content p { color: #cbb8c0; }
body.genjutsu-active .identity-tags { color: #dfbdc8; }
body.genjutsu-active .identity-tags > span + span { border-color: #80435a; }

body.genjutsu-active .manifesto {
  background: radial-gradient(ellipse at 100% 100%, #660f282e, transparent 64%), #070509;
}
body.genjutsu-active .manifesto > p { color: #fff1e9; }
body.genjutsu-active .crossed { color: #b28c9b; }
body.genjutsu-active .crossed:after { background: #ff5c69; box-shadow: 0 0 20px #ec405d22; }
body.genjutsu-active .contact {
  background: radial-gradient(ellipse at 85% 45%, #7b1d3652, transparent 60%), linear-gradient(110deg, #160810, #0c070e);
  border-color: #894052;
}
body.genjutsu-active .contact:after { border-color: #d6667752; box-shadow: 0 0 65px #b3263612, inset 0 0 65px #b3263612; }
body.genjutsu-active .contact .outline-text { -webkit-text-stroke-color: #f9a39e; }
body.genjutsu-active .contact-circle {
  background: linear-gradient(135deg, #c2293a, #8d173a);
  color: #fff7f1;
  box-shadow: 0 0 0 8px #d94b6010, 0 0 55px #ca28462a, inset 0 1px #ff8c6c55;
}
body.genjutsu-active .contact-circle:hover { background: linear-gradient(135deg, #d43140, #a32449); }
body.genjutsu-active .footer { background: #070509; border-color: #612c40; }
body.genjutsu-active .footer .text-link { color: #d7b5c4; }

body.genjutsu-active dialog {
  background: radial-gradient(ellipse at 100% 0, #60152c33, transparent 58%), #0a060c;
  border-color: #9f4b60;
  box-shadow: 0 20px 90px #000b;
}
body.genjutsu-active dialog::backdrop { background: #070209e8; }
body.genjutsu-active .dialog-close { background: #150a15ec; border-color: #ae596d; }
body.genjutsu-active .dialog-body p { color: #d0bbc3; }
body.genjutsu-active .dialog-stack > span { color: #e4c4cd; border-color: #744052; }
body.genjutsu-active .dialog-image { filter: saturate(1.08) contrast(1.025); }
body.genjutsu-active .toast { background: #ffe5df; color: #290d19; }

body.genjutsu-active .perception-toggle {
  position: fixed;
  right: 22px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  max-width: 150px;
  padding: 9px 13px;
  border: 1px solid #a05268;
  border-radius: 24px;
  background: #160c17f5;
  box-shadow: 0 4px 22px #0007;
  color: #ffe1de;
  font: 12px/1.5 var(--mono);
  letter-spacing: .01em;
  white-space: nowrap;
  transition: none;
}
body.genjutsu-active .perception-toggle svg { width: 22px; height: 22px; flex-shrink: 0; color: #ff8179; }
body.genjutsu-active .perception-toggle:hover { background: #301326; border-color: #f19191; }
body.genjutsu-active .perception-toggle:focus-visible { outline-offset: 4px; }

@media(max-width:760px) {
  body.genjutsu-active .hero-shade {
    background:
      linear-gradient(0deg, var(--bg) 8%, #08050ae8 29%, #10050c36 62%, transparent 85%),
      linear-gradient(90deg, #13060c55, transparent 70%);
  }
  body.genjutsu-active .hero-aura { background: radial-gradient(ellipse at 68% 18%, #b9163426, transparent 43%); }
  body.genjutsu-active .contact-circle { box-shadow: 0 0 0 5px #d94b6010, 0 0 32px #ca284627; }
  body.genjutsu-active .perception-toggle { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-width: 140px; padding: 9px 11px; }
}

@media(prefers-reduced-motion:reduce) {
  body.genjutsu-active :is(.hero-art, .hero-aura, .universe-eye) { animation: none; }
  body.genjutsu-active .universe-mark.is-transforming .orbit-two { animation: none; }
  body.genjutsu-active :is(.project-card-link:hover .project-image > img, .release-visual:hover > img) { transform: none; }
}

body.genjutsu-active :is(.hub, .hub-panel, .hub-list, .hub-roadmap, .hub--dialog) { border-color: #54283c; }
body.genjutsu-active .hub-item { border-color: #3d1d2d; }
body.genjutsu-active .hub-roadmap { background: linear-gradient(90deg, #1a0b14, transparent 70%); }
body.genjutsu-active .hub .hub-note, body.genjutsu-active .hub-teasers { color: #c9b7bd; }
body.genjutsu-active :is(.hub .hub-intro, .hub .hub-more, .hub-meta, .hub-asof) { color: #bfa4af; }
body.genjutsu-active .hub-game:hover { background: linear-gradient(90deg, #26101c, transparent 90%); }

/* ============ 4. Choreography, flagship arena card, live board, closing moment ============ */
/* ==========================================================================
   The Hidden Archive, refined: choreography, the BTC AI Arena flagship,
   readable labels, and a closing moment. Loaded after the original sheets.
   ========================================================================== */
:root {
  --ease: var(--ease-out);
  --ease-soft: var(--ease-out);
  --label: #a8a39c;
  --label-dim: #9a948d;
  --hair: #ffffff12;
}

html { scroll-padding-top: 92px; }
body { background: var(--bg); }

/* ---------- Header: sticky, quiet, out of the way while reading ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  transition: transform .6s var(--ease);
}
.site-header.is-scrolled {
  background: rgba(10, 10, 11, .96);
  border-color: #2a292899;
}
.site-header.is-hidden { transform: translateY(-101%); }
.mobile-nav { position: fixed; top: 76px; z-index: 39; max-height: calc(100svh - 76px); overflow: auto; }
.desktop-nav a { padding: 8px 0; }
.desktop-nav a:after {
  content: '';
  position: absolute;
  left: 0;
  right: 14px;
  bottom: 2px;
  height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--ease);
}
.desktop-nav a:hover:after, .desktop-nav a.is-current:after { transform: scaleX(1); transform-origin: left; }
.desktop-nav a.is-current { color: var(--cream); }
.desktop-nav span { font-size: 12px; color: var(--label-dim); }
body.genjutsu-active .site-header.is-scrolled { background: rgba(9, 6, 11, .84); }

/* ---------- Section rail ---------- */
.section-rail {
  position: fixed;
  left: 26px;
  top: 50%;
  z-index: 20;
  display: none;
  flex-direction: column;
  gap: 16px;
  padding-left: 14px;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity .6s var(--ease-out);
  pointer-events: none;
}
.past-hero .section-rail { opacity: 1; pointer-events: auto; }
.section-rail a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  font: 12px/1 var(--mono);
  letter-spacing: .01em;
  color: #77736e;
  transition: none;
}
.section-rail a:before {
  content: '';
  width: 8px;
  height: 1px;
  background: currentColor;
  transition: none;
}
.section-rail em {
  position: absolute;
  left: 46px;
  font-style: normal;
  white-space: nowrap;
  text-transform: none;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .3s var(--ease-out), transform .4s var(--ease);
  background: var(--bg);
  padding: 4px 6px;
}
.section-rail a:hover { color: var(--cream); }
.section-rail a:hover em { opacity: 1; transform: none; }
.section-rail a.is-active { color: var(--cream); }
.section-rail a.is-active:before { width: 16px; background: var(--red); }
.rail-track { position: absolute; left: 0; top: -14px; bottom: -14px; width: 1px; background: var(--hair); }
.rail-track b { display: block; width: 100%; height: 100%; background: var(--red); transform-origin: top; transform: scaleY(0); }
@media (min-width: 1240px) { .section-rail { display: flex; } }

/* ---------- Hero: depth, light, and a cinematic entrance ---------- */
.hero-content { will-change: transform, opacity; }
.hero-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 110% 85% at 64% 42%, transparent 52%, rgba(4, 4, 5, .6) 100%),
    linear-gradient(180deg, rgba(4, 4, 5, .35), transparent 16%);
}

 .hero.is-offscreen h1 > span { animation-play-state: paused; }
.hero h1 { letter-spacing: -.022em; }
.hero h1 .outline-text { -webkit-text-stroke-width: 1.2px; }
.motion-ready .hero h1 > span { animation: title-rise 1.5s var(--ease) both; }
.motion-ready .hero h1 > span + span { animation-delay: .14s; }
.motion-ready .hero h1 > span:first-child { animation: title-rise 1.5s var(--ease) both; }

.motion-ready .hero-eyebrow { animation-delay: .05s; }
.motion-ready .hero-copy { animation-delay: .35s; }
.motion-ready .hero-actions { animation-delay: .5s; }
.motion-ready .hero-dispatch { animation-delay: .65s; }

.motion-ready :is(.hero-activation, .hero-bottom) { animation-delay: .95s; }
 .hero-bottom { font-size: 12px; letter-spacing: .01em; }
.hero-eyebrow { font-size: 12px; letter-spacing: .01em; }
.hero-kanji { font-size: 12px; color: #d9cab2a8; }
.hero-activation .mono { font-size: 12px; letter-spacing: .01em; }
.activation-muted { color: #a19a94; }
.hero-copy > span { font-size: 12px; color: #b4b1aa; }
.hero-bottom > a { gap: 14px; }
.scroll-cue {
  position: relative;
  display: inline-block;
  width: 1px;
  height: 26px;
  overflow: hidden;
  background: #ffffff1c;
}
.scroll-cue:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 50%;
  background: var(--red);
  animation: scroll-cue 2.4s var(--ease) infinite;
}
.hero.is-offscreen .scroll-cue:after { animation-play-state: paused; }

.hero-dispatch {
  display: flex;
  flex-direction: column;
  width: fit-content;
  max-width: 100%;
  margin-top: 22px;
  border-top: 1px solid #68625855;
}
.hero-dispatch .current-quest {
  width: 100%;
  margin-top: 0;
  padding: 11px 0;
  border-top: 0;
  font-size: 12px;
  letter-spacing: .01em;
  color: #c4bfb6;
}
.hero-dispatch .current-quest + .current-quest { border-top: 1px dashed #ffffff14; }
/* Below 1280px the dispatch is one list: the same dot, the same dashed rules, and the arrows in one column at the right.
   From 1280px the three items share a single line with a divider between each. Both fit above the hero's bottom bar:
   the hero keeps a minimum height that holds the dispatch (measured at every size from 360 to 1920px wide). */
.hero-dispatch .current-quest > span:nth-child(2) { margin-right: 14px; }
.hero-dispatch .current-quest > .icon { margin-left: auto; }
.hero-dispatch .quest-marker { width: 7px; height: 7px; box-sizing: border-box; }
/* The dot is a state: filled for what is live or built, a hollow ring for what is still to come. */
.hero-dispatch .quest-soon .quest-marker { background: transparent; border: 1.5px solid var(--red-text); }
@media (min-width: 761px) and (max-width: 1100px) { .hero { min-height: 840px; } }
@media (min-width: 1101px) and (max-width: 1279px) { .hero { min-height: calc(601px + 19.2vw); } }
@media (min-width: 1280px) {
  .hero { min-height: calc(526px + 19.2vw); }
  .hero-dispatch { flex-direction: row; width: max-content; max-width: none; gap: 0 26px; }
  .hero-dispatch .current-quest { width: auto; }
  .hero-dispatch .current-quest > span:nth-child(2) { margin-right: 0; }
  .hero-dispatch .current-quest > .icon { margin-left: 9px; }
  .hero-dispatch .current-quest + .current-quest { border-top: 0; }
  .hero-dispatch .current-quest + .current-quest:before { content: ''; width: 1px; height: 14px; margin-right: 14px; background: #ffffff1f; }
}
@media (min-width: 1600px) { .hero { min-height: 860px; } }
@media (max-width: 760px) { .hero-content { padding-bottom: 76px; } }
.hero-dispatch .quest-label { font-size: 12px; letter-spacing: .01em; margin-right: 10px; }
.quest-flagship .quest-label { color: var(--red-text); }
.quest-flagship .quest-marker { background: var(--red); box-shadow: 0 0 0 0 #d9363980;  }
.quest-flagship:hover > .icon { transform: translateY(3px); }

/* ---------- Buttons, links, focus ---------- */
.button { position: relative; overflow: hidden; isolation: isolate; font-size: 12px; letter-spacing: .01em; }
.button-red:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%);
  transform: translateX(-110%);
  transition: transform .9s var(--ease);
}
.button-red:hover:before { transform: translateX(110%); }
.button svg { transition: transform .4s var(--ease); }
.button:hover svg { transform: translate(2px, -2px); }
.magnetic { transition: translate .45s var(--ease), transform .3s; }
.text-link { position: relative; }
.text-link:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9px;
  height: 1px;
  background: currentColor;
  opacity: .55;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .55s var(--ease);
}
.text-link:hover:after, .text-link:focus-visible:after { transform: scaleX(1); transform-origin: left; }
:is(a, button, [tabindex]):focus-visible { outline: 2px solid var(--red-text); outline-offset: 5px; }
.release-actions .text-link, .feature-actions .text-link { font-size: 12px; }

/* ---------- Section headings: masked lines and a drawn rule ---------- */
.tl { display: block; overflow: hidden; padding: .04em .06em .12em; margin: -.04em -.06em -.12em; }
.tl > span { display: block; }
.motion-ready .tl > span { transform: translateY(112%); transition: transform 1.15s var(--ease); transition-delay: calc(var(--line, 0) * .1s + .08s); }
.motion-ready .is-visible .tl > span, .motion-ready .is-visible.tl > span { transform: none; }
.section-heading h2 { font-size: clamp(38px, 4.5vw, 66px); letter-spacing: -.045em; line-height: 1.04; }
.section-heading .eyebrow, .universe-content .eyebrow, .contact-top .eyebrow { font-size: 12px; letter-spacing: .01em; }
.section-heading .eyebrow:after, .universe-content .eyebrow:after, .contact-top .eyebrow:after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 56px;
  height: 1px;
  margin: -2px 0 0 16px;
  background: var(--red);
  transform-origin: left;
}
.motion-ready :is(.section-heading, .universe-content, .contact-top) .eyebrow:after { transform: scaleX(0); transition: transform 1.3s var(--ease) .35s; }
.motion-ready .is-visible :is(.eyebrow):after, .motion-ready .is-visible.contact-top .eyebrow:after { transform: scaleX(1); }
.section-heading > p { font-size: 13px; color: #a7a39d; }

/* ---------- Small labels: legible everywhere (min 10px) ---------- */
.archive-label, .project-filters button, .project-status, .project-info .eyebrow, .project-card-link .project-status, .project-card-link .project-info .eyebrow, .archive-foot > .mono, .orbit-label, .universe-coordinate, .identity-tags,
.manifesto > .eyebrow, .manifesto-bottom > .mono, .contact-top > .mono, .footer > .mono, .footer .text-link,
.dialog-note, .feature-topline, .browser-chrome,
.feature-copy > .eyebrow, .feature-context, .release-topline, .release-art-label, .release-copy > .eyebrow,
.project-tokens > span, .next-heading .eyebrow, .next-status, .writing-topline, .article-topline,
.article-format, .writing-footer > .mono, .writing-empty .eyebrow, .ocular-hint, .dialog-body .eyebrow,
.dialog-stack > span, .article-new, .sound-toggle, .current-quest, .quest-label {
  font-size: 12px;
}

 .archive-foot > .mono, .writing-footer > .mono { color: var(--label-dim); letter-spacing: .01em; }
.project-card-link .project-info .eyebrow, .project-info .eyebrow { color: var(--label); letter-spacing: .01em; }

.feature-context { color: #a6a99c; }
.ocular-hint { color: #b0a59d; }
.contact-circle > span { font-size: 12px; letter-spacing: .01em; }
.project-filters { gap: 26px; }
.project-filters button { letter-spacing: .01em; transition: none; }
.project-filters button:hover { color: var(--cream); }
.archive-label { letter-spacing: .01em; }

/* ---------- Staggered entrances ---------- */
.motion-ready :is(.article-card, .next-card, .arena-stats > div, .manifesto-rules li) { opacity: 0; }
.motion-ready :is(.article-card, .next-card, .arena-stats > div, .manifesto-rules li).is-in {
  opacity: 1;
  animation: fade-rise 1s var(--ease) both;
  animation-delay: calc(var(--stagger, 0) * .09s);
}

/* ---------- Archive: exhibition-grade covers ---------- */
.projects { position: relative; background: radial-gradient(ellipse 70% 38% at 80% 0, #d936390b, transparent 70%), var(--bg); }
.project-grid { gap: 56px 32px; }
.project-card-link .project-image {
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .8s var(--ease);
}
.project-card-link .project-image.is-tilting { transition: transform .25s var(--ease-out); }
.project-card-link:hover .project-image { border-color: #5a3d3c; }
.project-card-link .project-image:before,
.release-visual:before,
.feature-visual:before,
.article-card:before,
.next-card:before,
.live-cell:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 234, 224, .10), transparent 62%);
  opacity: 0;
  transition: opacity .45s var(--ease-out);
}
:is(.project-card-link:hover .project-image, .release-visual:hover, .feature-visual:hover, .article-card:hover, .next-card:hover, .live-cell:hover):before { opacity: 1; }
.feature-visual, .article-card { position: relative; }
.article-card:before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(239, 85, 87, .09), transparent 62%); }
.motion-ready .reveal :is(.project-image, .release-visual, .feature-visual) { clip-path: inset(0 0 14% 0); transition: transform .8s var(--ease); }
.motion-ready .reveal.is-visible :is(.project-image, .release-visual, .feature-visual) { clip-path: inset(0 0 0 0); }
.motion-ready .reveal.is-visible .project-card-link .project-image.is-tilting { transition: transform .25s var(--ease-out); }
.project-info { position: relative; }

.project-info > div { position: relative; }
.project-summary { color: #b0aaa3; }

/* Release card: a little more presence */
.project-release { position: relative; }
.release-visual > img { transition: transform 1.2s var(--ease); }

/* ---------- BTC AI Arena: the flagship ---------- */
.project-arena {
  grid-column: 1 / -1;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid #4b2c2f;
  background:
    radial-gradient(ellipse 55% 65% at 88% 8%, rgba(217, 54, 57, .14), transparent 62%),
    radial-gradient(ellipse 45% 55% at 0% 100%, rgba(148, 167, 141, .06), transparent 62%),
    linear-gradient(160deg, #161112, #0b0a0b 62%);
  box-shadow: 0 40px 90px -50px #000;
}
.project-arena:before, .project-arena:after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  z-index: 2;
  pointer-events: none;
  border-color: var(--red);
  border-style: solid;
}
.project-arena:before { left: -1px; top: -1px; border-width: 2px 0 0 2px; }
.project-arena:after { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; }
.arena-topline {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 16px 30px;
  border-bottom: 1px solid #3b2729;
  color: #b9b1ab;
  font-size: 12px;
  letter-spacing: .01em;
}

.arena-topline .live-status { justify-self: end; display: inline-flex; align-items: center; gap: 10px; color: var(--red-text); }
.live-dot { position: relative; display: inline-block; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.live-dot:after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--red);
  animation: live-ring 1.9s var(--ease) infinite;
}
.is-offscreen .live-dot:after, .is-offscreen .skeleton-bar, .is-offscreen .skeleton-wave, .is-offscreen .skeleton-dial { animation-play-state: paused; }

.arena-layout {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.28fr);
  gap: clamp(30px, 4vw, 70px);
  align-items: center;
  padding: clamp(30px, 3.6vw, 56px);
}
.arena-copy { min-width: 0; position: relative; z-index: 3; }
.arena-copy > .eyebrow { color: var(--red-text); font-size: 12px; letter-spacing: .01em; margin-bottom: 22px; line-height: 1.6; }
.arena-title {
  display: flex;
  flex-direction: column;
  font: 800 clamp(70px, 7.6vw, 124px)/.84 var(--display);
  letter-spacing: -.012em;
  text-transform: none;
}
.arena-title .outline-text { -webkit-text-stroke: 1.3px var(--cream); }
.arena-question {
  margin-top: 18px;
  font: 700 clamp(24px, 2.2vw, 32px)/1.05 var(--display);
  text-transform: none;
  letter-spacing: .01em;
  color: #ecc9c3;
}
.arena-quote {
  margin-top: 22px;
  padding-left: 16px;
  max-width: 470px;
  border-left: 2px solid var(--red);
  font-size: 17px;
  line-height: 1.45;
  letter-spacing: -.02em;
  color: var(--cream);
}
.arena-quote em { color: var(--red-text); }
.arena-description { margin-top: 18px; max-width: 470px; color: #b0a9a2; font-size: 13px; line-height: 1.8; }
.arena-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 26px 0 0;
  max-width: 470px;
  border-top: 1px solid #3b2a2c;
}
.arena-stats > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 0 14px;
  border-bottom: 1px solid #3b2a2c;
}
.arena-stats > div:nth-child(odd) { padding-right: 18px; border-right: 1px solid #2d2223; }
.arena-stats > div:nth-child(even) { padding-left: 20px; }
.arena-stats dt { font: 12px/1.4 var(--mono); letter-spacing: .01em; text-transform: none; color: #a19a94; }
.arena-stats dd { margin: 0; font: 700 clamp(38px, 3.2vw, 50px)/.9 var(--display); letter-spacing: -.01em; color: var(--cream); font-variant-numeric: tabular-nums; }
.arena-stats small { font: 500 12px var(--mono); color: #8f8781; margin: 0 8px; letter-spacing: .01em; vertical-align: middle; text-transform: none; }
.arena-stat-verdict dd { color: var(--red-text); }
.arena-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 26px; }
.arena-actions .text-link { color: #c9c2b9; font-size: 12px; gap: 10px; }
.arena-actions .text-link:hover { color: var(--cream); }

/* The stage: three real captures in depth, reacting to scroll and cursor */
.arena-stage {
  --p: 0;
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  display: block;
  min-width: 0;
  aspect-ratio: 1.16;
  perspective: 1700px;
  perspective-origin: 40% 40%;
  isolation: isolate;
}
.arena-grid-bg {
  position: absolute;
  inset: -12% -14%;
  z-index: -1;
  background-image: linear-gradient(#ffffff09 1px, transparent 1px), linear-gradient(90deg, #ffffff09 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse at 55% 50%, #000 25%, transparent 70%);
  mask-image: radial-gradient(ellipse at 55% 50%, #000 25%, transparent 70%);
}
.arena-layer {
  position: absolute;
  display: block;
  overflow: hidden;
  background: #0d0d0e;
  box-shadow: 0 40px 70px -24px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .05);
  transition: transform 1s var(--ease), opacity .6s var(--ease-out);
  backface-visibility: hidden;
}
.arena-layer img { display: block; width: 100%; height: auto; }
.arena-layer--back {
  width: 60%;
  right: -1%;
  top: 0;
  opacity: .62;
  filter: saturate(.75) brightness(.8);
  transform: rotateX(calc(var(--rx) * .5)) rotateY(calc(-16deg + var(--ry) * .5)) translate3d(0, calc(var(--p) * -36px), -140px);
}
.arena-layer--main {
  width: 84%;
  left: 3%;
  top: 13%;
  z-index: 2;
  border: 1px solid #4c3538;
  transform: rotateX(var(--rx)) rotateY(calc(-9deg + var(--ry))) translate3d(0, calc(var(--p) * -14px), 0);
}
.arena-layer--main .browser-chrome { background: #121011; border-color: #2e2526; color: #b6aea8; height: 32px; }

.arena-layer--front {
  width: 44%;
  right: -2%;
  bottom: 3%;
  z-index: 3;
  aspect-ratio: 860 / 480;
  border: 1px solid #5c3a3e;
  transform: rotateX(calc(var(--rx) * 1.3)) rotateY(calc(-5deg + var(--ry) * 1.3)) translate3d(0, calc(var(--p) * 30px), 70px);
}
.arena-layer--front img { position: absolute; width: 186%; max-width: none; left: -13.95%; top: -33.3%; }
.arena-stage.is-tilting .arena-layer { transition-duration: .4s; }
.arena-stage:hover .arena-layer--back { opacity: .7; filter: saturate(.85) brightness(.85); }

.arena-glare {
  position: absolute;
  inset: -4%;
  z-index: 6;
  pointer-events: none;
  background: radial-gradient(460px circle at var(--mx, 65%) var(--my, 35%), rgba(255, 238, 228, .09), transparent 60%);
  opacity: 0;
  transition: opacity .5s var(--ease-out);
}
.arena-stage:hover .arena-glare { opacity: 1; }
.arena-stage:focus-visible { outline-offset: 8px; }

/* Live telemetry */
.arena-live { position: relative; border-top: 1px solid #3b2729; background: linear-gradient(180deg, rgba(5, 5, 6, .55), rgba(5, 5, 6, .9)); }
.arena-live-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px 18px;
  flex-wrap: wrap;
  padding: 14px 30px;
  border-bottom: 1px solid #2a2122;
  color: #aaa29c;
  font-size: 12px;
  letter-spacing: .01em;
}
.arena-live-status { display: inline-flex; align-items: center; gap: 11px; color: var(--cream); }
.arena-live[data-state="loading"] .arena-live-status .live-dot,
.arena-live[data-state="cached"] .arena-live-status .live-dot { background: #8f8781; }
.arena-live[data-state="loading"] .arena-live-status .live-dot:after,
.arena-live[data-state="cached"] .arena-live-status .live-dot:after { border-color: #8f8781; }
.arena-live[data-state="stale"] .arena-live-status .live-dot { background: #d6a24a; }
.arena-live[data-state="stale"] .arena-live-status .live-dot:after { border-color: #d6a24a; }
.arena-live[data-state="offline"] .arena-live-status .live-dot { background: #6f6865; }
.arena-live[data-state="offline"] .arena-live-status .live-dot:after { display: none; }
.arena-live-grid { display: flex; }
.live-cell { position: relative; min-width: 0; padding: 24px 30px 26px; border-right: 1px solid #2a2122; }
.live-cell:last-child { border-right: 0; }
.live-price { flex: 1 1 0; }
.live-spark { flex: 1.55 1 0; }
.live-gauge { flex: 1.15 1 0; }
.live-ledger { flex: 1.3 1 0; background: linear-gradient(160deg, rgba(217, 54, 57, .07), transparent 70%); }
.live-offline { display: none; flex: 3.7 1 0; }
.arena-live[data-state="offline"] :is(.live-price, .live-spark, .live-gauge) { display: none; }
.arena-live[data-state="offline"] .live-offline { display: block; }
.live-label { display: block; margin-bottom: 16px; color: #9f9791; font-size: 12px; letter-spacing: .01em; }
.live-figure { display: block; min-height: 52px; font: 700 clamp(42px, 3.7vw, 58px)/1 var(--display); letter-spacing: -.005em; font-variant-numeric: tabular-nums; color: var(--cream); }
.live-sub { display: block; margin-top: 12px; color: #a8a09a; font-size: 12px; line-height: 1.6; letter-spacing: .01em; }
.live-sub.is-up { color: var(--sage); }
.live-sub.is-down { color: var(--red-text); }
.spark-wrap { position: relative; min-height: 96px; }
.spark { display: block; width: 100%; height: 84px; overflow: visible; }
.spark-mid { stroke: #ffffff12; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; }
.spark-area { stroke: none; }
.spark-line { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.spark-end {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent);
}
.spark-end:after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid currentColor; animation: live-ring 2.2s var(--ease) infinite; }
.spark-plot { position: relative; color: var(--sage); }
.spark-plot.is-down { color: var(--red-text); }
.spark-range { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; color: #938b85; font-size: 12px; letter-spacing: .01em; }
.is-drawing .spark-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw-line 1.9s var(--ease) .1s forwards; }
.is-drawing .spark-area { opacity: 0; animation: fade-in 1s var(--ease-out) 1.1s forwards; }
.is-drawing .spark-end { opacity: 0; animation: fade-in .4s var(--ease-out) 1.7s forwards; }
.gauge-wrap { display: flex; align-items: flex-end; gap: 16px; min-height: 66px; }
.gauge { width: 118px; height: 66px; flex-shrink: 0; overflow: visible; }
.gauge-track { fill: none; stroke: #2a2324; stroke-width: 7; }
.gauge-down, .gauge-up { fill: none; stroke-width: 2; }
.gauge-down { stroke: var(--red); opacity: .8; }
.gauge-up { stroke: var(--sage); opacity: .8; }
.gauge-ticks line { stroke: #6a6260; stroke-width: 1; }
.gauge-needle { transform-box: view-box; transform-origin: 70px 66px; transform: rotate(var(--angle, 0deg)); transition: transform 1.4s var(--ease-out); }
.gauge-needle line { stroke: var(--cream); stroke-width: 1.8; stroke-linecap: round; }
.gauge-needle circle { fill: var(--cream); }
.gauge.is-up .gauge-needle line { stroke: #d6e2d1; }
.gauge.is-down .gauge-needle line { stroke: #ffb1aa; }
.is-drawing .gauge-needle { animation: needle-in 1.8s var(--ease-out) .3s both; }
.gauge-readout strong { display: block; font: 700 46px/.9 var(--display); color: var(--cream); font-variant-numeric: tabular-nums; }
.gauge-readout .mono { display: block; margin-top: 8px; color: #9a928c; font-size: 12px; letter-spacing: .01em; line-height: 1.5; white-space: nowrap; }
.live-gauge .live-sub { margin-top: 14px; }
.live-ledger ul { margin: 0; padding: 0; list-style: none; }
.live-ledger li { padding: 8px 0; border-top: 1px solid #ffffff0d; color: #b9b1ab; font-size: 12px; line-height: 1.5; }
.live-ledger li:first-child { border-top: 0; padding-top: 0; }
.live-ledger b { color: var(--cream); font-weight: 700; }
.live-ledger li:first-child b { color: var(--red-text); }
.live-offline p { max-width: 560px; color: #c2bbb4; font-size: 15px; line-height: 1.6; }
.live-offline .text-link { margin-top: 10px; font-size: 12px; color: var(--cream); gap: 10px; }
.skeleton-bar, .skeleton-wave, .skeleton-dial {
  display: block;
  background: #2a2223;
  animation: skeleton 1.4s var(--ease-io) infinite alternate;
}
.skeleton-bar { width: 78%; height: 44px; }
.skeleton-bar--thin { width: 58%; height: 10px; }
.skeleton-wave { height: 84px; clip-path: polygon(0 70%, 12% 52%, 24% 62%, 36% 34%, 48% 46%, 60% 22%, 72% 40%, 84% 28%, 100% 44%, 100% 100%, 0 100%); opacity: .8; }
.skeleton-dial { width: 118px; height: 59px; border-radius: 118px 118px 0 0; -webkit-mask: radial-gradient(circle at 50% 100%, transparent 44px, #000 45px); mask: radial-gradient(circle at 50% 100%, transparent 44px, #000 45px); }

/* ---------- The next wave ---------- */
.next-chapters {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 2fr);
  gap: 32px 48px;
  align-items: stretch;
  margin-top: 80px;
  padding-top: 44px;
}
.next-heading { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 18px; }
.next-heading .eyebrow { color: #b39b93; font-size: 12px; letter-spacing: .01em; }
.next-heading h3 { font: 800 clamp(52px, 5vw, 80px)/.86 var(--display); letter-spacing: -.01em; text-transform: none; }
.next-heading > p { font-size: 13px; color: #a7a19a; max-width: 260px; }
.next-grid { margin-top: 0; gap: 20px; }
.next-card {
  position: relative;
  overflow: hidden;
  grid-template-rows: 1fr auto;
  min-height: 230px;
  padding: 30px;
  background: linear-gradient(150deg, #151213, #0e0d0e 70%);
  border-color: #332b2b;
  transition: transform .6s var(--ease);
}
.next-card:hover { border-color: #5a3c3b; transform: translateY(-4px); }
.next-card:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 40%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  animation: scan 5.5s var(--ease-out) infinite;
}
.next-card:nth-child(2):after { animation-delay: -2.7s; }
.next-chapters.is-offscreen .next-card:after, .next-chapters.is-offscreen .next-pulse { animation-play-state: paused; }

.next-card h4 { font: 700 clamp(26px, 2.2vw, 34px)/1 var(--display); letter-spacing: 0; text-transform: none; margin-bottom: 14px; }
.next-card p { font-size: 13px; color: #aaa39c; max-width: 420px; }
.next-status { display: inline-flex; align-items: center; gap: 9px; align-self: end; color: #d2b3ab; letter-spacing: .01em; }
.next-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--sage); animation: blink 2.4s var(--ease-io) infinite; }
.archive-foot { margin-top: 44px; }

/* ---------- Writing ---------- */
.article-card { transition: transform .6s var(--ease); }
.article-card:hover { transform: translateY(-3px); }
.article-link { position: relative; z-index: 2; }
.article-topline { color: #b09c97; letter-spacing: .01em; }

/* ---------- Universe ---------- */
.universe-mark .orbit-two { transform: rotate(var(--spin, 130deg)); transition: transform .8s var(--ease); }
.universe-content h2 { font-size: clamp(38px, 4vw, 60px); letter-spacing: -.04em; line-height: 1.06; }
.universe-content p { font-size: 13px; color: #b2aea7; }
.identity-tags { color: #c0b8b0; letter-spacing: .01em; }

/* ---------- Manifesto: statement + principles, no dead air ---------- */
.manifesto { position: relative; overflow: hidden; isolation: isolate; padding-top: 120px; padding-bottom: 96px; }
.manifesto-eye {
  position: absolute;
  z-index: -1;
  right: -9%;
  top: 50%;
  width: min(62vw, 820px);
  height: min(62vw, 820px);
  margin-top: calc(min(62vw, 820px) / -2);
  color: var(--red);
  opacity: .055;
  pointer-events: none;
}
.manifesto > .eyebrow { font-size: 12px; letter-spacing: .01em; color: #a49f98; }
.manifesto-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(250px, .8fr); gap: 40px 64px; align-items: end; margin-top: 38px; }
.manifesto-statement { font-size: clamp(58px, 7.8vw, 128px); line-height: .98; letter-spacing: -.05em; font-weight: 500; }
.crossed:after { transform-origin: left center; transform: rotate(-8deg); }
.motion-ready .crossed:after { transform: rotate(-8deg) scaleX(0); transition: transform .9s var(--ease) .75s; }
.motion-ready .is-visible .crossed:after { transform: rotate(-8deg) scaleX(1); }
.manifesto-rules { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.manifesto-rules li {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  color: #ddd8cf;
  font: 700 clamp(24px, 2.2vw, 32px)/1.05 var(--display);
  text-transform: none;
}
.manifesto-rules li .mono { font-size: 12px; color: var(--red-text); letter-spacing: .01em; }
.manifesto-bottom { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); }
.manifesto-bottom > .mono { font-size: 12px; color: #a49f98; letter-spacing: .01em; }

/* ---------- Contact: the closing moment ---------- */
.contact { padding-top: 90px; padding-bottom: 84px; }
.contact:before {
  content: '';
  position: absolute;
  right: 4%;
  top: 30%;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 54, 57, .16), transparent 65%);
  pointer-events: none;
}
.contact-top > .mono { font-size: 12px; color: #a8a29b; letter-spacing: .01em; }
.contact-main { margin-top: 56px; position: relative; z-index: 1; }
.contact-main h2 { font-size: clamp(76px, 10.4vw, 172px); line-height: .84; letter-spacing: -.012em; }
.contact-main h2 .outline-text { -webkit-text-stroke-width: 1.3px; }
.contact-circle { position: relative; width: 186px; height: 186px; margin-right: 70px; }
.contact-circle .contact-orbit {
  position: absolute;
  left: -40px;
  top: -40px;
  width: calc(100% + 80px);
  height: calc(100% + 80px);
  color: #c9b6b0;
  pointer-events: none;
  animation: orbit 30s linear infinite;
}
.contact-orbit text { font: 500 12px var(--mono); letter-spacing: .01em; fill: currentColor; }
.contact.is-offscreen .contact-orbit { animation-play-state: paused; }
.contact-bottom { margin-top: 56px; position: relative; z-index: 1; }
.contact-bottom p { font-size: 13px; color: #aaa49d; }

/* ---------- Footer wordmark ---------- */
.footer { position: relative; flex-wrap: wrap; overflow: hidden; padding-top: 0; }
.footer-mark {
  position: relative;
  width: 100%;
  margin: 46px 0 30px;
  font: 800 clamp(58px, 15.6vw, 290px)/.8 var(--display);
  letter-spacing: -.012em;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}
.footer-mark-outline { display: block; color: transparent; -webkit-text-stroke: 1px #3d3634; }
.footer-mark-fill {
  position: absolute;
  inset: 0;
  color: #b3282c;
  clip-path: inset(0 calc(100% - var(--fill, 0) * 100%) 0 0);
}
.footer > .mono { color: #a29c95; letter-spacing: .01em; }
.footer .text-link { color: #c2bcb4; }

/* ---------- Cursor ring (desktop only) ---------- */
.cursor-ring {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 95;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgba(234, 231, 223, .38);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s var(--ease-out);
}
.cursor-ring.is-visible { opacity: 1; }
.cursor-ring.is-active { width: 58px; height: 58px; margin: -29px 0 0 -29px; border-color: var(--red); background: rgba(217, 54, 57, .07); }
.cursor-ring.is-pressed { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
.cursor-ring.is-live:after {
  content: 'OPEN';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font: 500 12px var(--mono);
  letter-spacing: .01em;
  color: var(--cream);
}

/* ---------- Dialog facts ---------- */
.dialog-image { object-position: top center; }
.dialog-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 26px 0 0; border-top: 1px solid var(--line); }
.dialog-facts > div { padding: 13px 18px 13px 0; border-bottom: 1px solid var(--line); }
.dialog-facts > div:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--line); }
.dialog-facts dt { font: 12px/1.4 var(--mono); letter-spacing: .01em; text-transform: none; color: #a29c95; }
.dialog-facts dd { margin: 5px 0 0; font-size: 14px; line-height: 1.45; color: var(--cream); }
.dialog-body p { color: #b4aea7; }

/* ---------- Mangekyo reality for the new pieces ---------- */
body.genjutsu-active .project-arena {
  background: radial-gradient(ellipse 55% 65% at 88% 8%, rgba(233, 60, 73, .2), transparent 62%), linear-gradient(160deg, #1a0910, #08060a 62%);
  border-color: #7d3448;
  box-shadow: 0 40px 90px -50px #000;
}
body.genjutsu-active :is(.arena-topline, .arena-live, .arena-live-head, .live-cell, .arena-stats, .arena-stats > div) { border-color: #4e2232; }
body.genjutsu-active .arena-question { color: #ffb8b8; }
body.genjutsu-active :is(.arena-description, .live-ledger li, .live-offline p) { color: #d2bcc4; }
body.genjutsu-active .arena-live { background: linear-gradient(180deg, rgba(10, 4, 8, .6), rgba(8, 4, 8, .92)); }

body.genjutsu-active .next-card { background: linear-gradient(140deg, #190b13, #0a070d 75%); }
body.genjutsu-active .manifesto-rules li { color: #fbe2dc; }
body.genjutsu-active .footer-mark-outline { -webkit-text-stroke-color: #5b2b3a; }
body.genjutsu-active .footer-mark-fill { color: #e24d60; }
body.genjutsu-active .section-rail a.is-active:before, body.genjutsu-active .rail-track b { background: #ff716e; }
body.genjutsu-active .contact-orbit { color: #f0b4b4; }
body.genjutsu-active .cursor-ring.is-active { border-color: #ff716e; }

/* ---------- Keyframes ---------- */
@keyframes title-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

@keyframes fade-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { to { opacity: 1; } }

@keyframes scroll-cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(220%); } }

@keyframes live-ring { 0% { transform: scale(.35); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes draw-line { to { stroke-dashoffset: 0; } }
@keyframes needle-in { from { transform: rotate(-90deg); } to { transform: rotate(var(--angle, 0deg)); } }

@keyframes scan { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(260%); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes orbit { to { transform: rotate(360deg); } }

/* ---------- Large screens ---------- */
@media (min-width: 1600px) {
  .arena-layout { padding: 60px; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .arena-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .arena-title { font-size: clamp(60px, 8vw, 90px); }
  .arena-live-grid { flex-wrap: wrap; }
  .live-price, .live-spark, .live-gauge { flex: 1 1 30%; }
  .live-ledger, .live-offline { flex: 1 1 100%; border-top: 1px solid #2a2122; border-right: 0; }
  .live-gauge { border-right: 0; }
  .arena-live[data-state="offline"] .live-offline { border-top: 0; }
  .next-chapters { grid-template-columns: 1fr; }
  .next-heading { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; }
  .next-heading .eyebrow { width: 100%; }
  .manifesto-grid { grid-template-columns: 1fr; }
  .manifesto-rules { max-width: 560px; }
  .contact-circle { margin-right: 40px; width: 160px; height: 160px; }
}
@media (max-width: 960px) {
  .arena-layout { grid-template-columns: 1fr; }
  .arena-stage { order: -1; max-width: 720px; width: 100%; justify-self: center; }
  .arena-topline { grid-template-columns: 1fr auto; }
  
}

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  html { scroll-padding-top: 84px; }
  .hero { min-height: 960px; }
   .hero-bottom { font-size: 12px; letter-spacing: .01em; }
  .hero-eyebrow { font-size: 12px; letter-spacing: .01em; }
  .hero-kanji { font-size: 12px; letter-spacing: .01em; }
  .hero-activation .mono { font-size: 12px; letter-spacing: .01em; }
  .hero-dispatch { width: 100%; }
  .hero-dispatch .current-quest { font-size: 12px; letter-spacing: .01em; gap: 9px; }
  .hero-dispatch .quest-label { font-size: 12px; letter-spacing: .01em; margin-right: 6px; }
  .quest-flagship > span:nth-child(2) { white-space: normal; }
  .section-heading h2 { font-size: clamp(38px, 11vw, 48px); }
  .project-grid { gap: 44px; }
  
  .archive-label, .project-filters button, .project-status, .project-info .eyebrow, .project-card-link .project-status, .project-card-link .project-info .eyebrow, .archive-foot > .mono, .orbit-label, .universe-coordinate, .identity-tags,
  .manifesto > .eyebrow, .manifesto-bottom > .mono, .contact-top > .mono, .footer > .mono, .footer .text-link, .feature-topline, .browser-chrome, .feature-copy > .eyebrow, .feature-context,
  .release-topline, .release-art-label, .release-copy > .eyebrow, .project-tokens > span, .next-heading .eyebrow,
  .next-status, .writing-topline, .article-topline, .article-format, .writing-footer > .mono, .ocular-hint,
  .dialog-body .eyebrow, .contact-circle > span, .current-quest, .quest-label, .section-heading .eyebrow,
  .universe-content .eyebrow, .contact-top .eyebrow {
    font-size: 12px;
    letter-spacing: .01em;
  }
  
  .release-topline, .feature-topline { flex-wrap: wrap; gap: 6px 12px; }
  
  
  .project-tokens > span { padding: 6px 8px; }
  .ocular-hint { bottom: 9%; }
  .project-filters { gap: 4px 22px; }

  .arena-topline { padding: 13px 18px; letter-spacing: .01em; gap: 12px; }
  .arena-layout { padding: 22px 18px 30px; gap: 30px; }
  .arena-stage { aspect-ratio: 1.02; perspective: 1100px; }
  .arena-layer--back { width: 74%; right: -6%; top: 0; }
  .arena-layer--main { width: 96%; left: -1%; top: 13%; }
  .arena-layer--front { width: 62%; right: -4%; bottom: 3%; }
  
  
  .arena-title { font-size: clamp(64px, 20vw, 88px); }
  .arena-question { font-size: 24px; }
  .arena-quote { font-size: 16px; }
  .arena-description { font-size: 13px; }
  .arena-stats dt { letter-spacing: .01em; }
  .arena-stats dd { font-size: 40px; }
  .arena-stats > div:nth-child(even) { padding-left: 14px; }
  .arena-stats > div:nth-child(odd) { padding-right: 12px; }
  .arena-actions { gap: 4px 20px; }
  .arena-actions .button { width: 100%; }
  .arena-live-head { padding: 13px 18px; letter-spacing: .01em; }
  .live-cell { padding: 20px 18px 22px; }
  .live-price { flex: 1 1 50%; order: 1; border-right: 1px solid #2a2122; }
  .live-gauge { flex: 1 1 50%; order: 2; }
  .live-spark { flex: 1 1 100%; order: 3; border-top: 1px solid #2a2122; border-right: 0; }
  .live-ledger, .live-offline { order: 4; }
  .live-label { letter-spacing: .01em; margin-bottom: 12px; }
  .live-figure { font-size: 40px; min-height: 40px; }
  .skeleton-bar { height: 36px; }
  .gauge-wrap { flex-direction: column; align-items: flex-start; gap: 10px; }
  .gauge { width: 104px; height: 58px; }
  .gauge-readout strong { font-size: 38px; }
  .skeleton-dial { width: 104px; height: 52px; }

  .next-chapters { margin-top: 56px; padding-top: 32px; gap: 24px; }
  .next-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
  .next-heading h3 { font-size: 56px; }
  .next-card { min-height: 0; padding: 24px 20px; }
  .next-card h4 { font-size: 27px; }
  .next-card p { font-size: 12px; }

  .manifesto { padding-top: 80px; padding-bottom: 70px; }
  .manifesto-eye { right: -40%; width: 110vw; height: 110vw; margin-top: -55vw; }
  .manifesto-statement { font-size: clamp(50px, 13.2vw, 80px); letter-spacing: -.045em; }
  .manifesto-rules li { font-size: 24px; padding: 16px 0; }
  .manifesto-bottom { flex-wrap: wrap; gap: 10px; }

  .contact { padding-top: 64px; padding-bottom: 60px; }
  .contact:before { width: 320px; height: 320px; right: -30%; top: 35%; }
  .contact-main { margin-top: 40px; }
  .contact-main h2 { font-size: clamp(60px, 17vw, 96px); }
  .contact-circle { width: 104px; height: 104px; margin-right: 18px; margin-bottom: 18px; gap: 6px; }
  .contact-circle .contact-orbit { left: -24px; top: -24px; width: calc(100% + 48px); height: calc(100% + 48px); }
  .contact-orbit text { font-size: 15px; }
  .contact-bottom { margin-top: 40px; }

  .footer-mark { margin: 34px 0 18px; }
  .footer > .mono { font-size: 12px; letter-spacing: .01em; }
  .dialog-facts { grid-template-columns: 1fr; }
  .dialog-facts > div:nth-child(even) { padding-left: 0; border-left: 0; }
}
@media (max-width: 370px) {
  .hero { min-height: 940px; }
  .hero-bottom { font-size: 12px; letter-spacing: 0; }
  .hero-bottom > span:first-child { max-width: 52%; }
  .arena-title { font-size: 60px; }
  .arena-stats dd { font-size: 34px; }
  .live-figure { font-size: 34px; }
  .contact-circle { width: 92px; height: 92px; margin-right: 22px; }
}

/* ---------- Reduced motion: a complete, still composition ---------- */
@media (prefers-reduced-motion: reduce) {
  .site-header.is-hidden { transform: none; }
  .tl > span, .hero h1 > span { transform: none; clip-path: none; }
  
  .arena-layer--back { transform: rotateY(-16deg) translate3d(0, 0, -140px); }
  .arena-layer--main { transform: rotateY(-9deg); }
  .arena-layer--front { transform: rotateY(-5deg) translate3d(0, 0, 70px); }
  .project-card-link .project-image { transform: none; }
  .cursor-ring { display: none; }
  .contact-orbit { animation: none; }
}
.live-range { display: block; color: #8f8781; }

/* Mobile refinements after review */
@media (max-width: 760px) {
  .manifesto-statement { font-size: clamp(38px, 10.6vw, 76px); }
  .contact-circle .contact-orbit { display: none; }
  .hero-bottom > span:first-child { letter-spacing: 0; }
  .hero-bottom > a { white-space: nowrap; letter-spacing: .01em; }
  .arena-layer--front { width: 54%; right: -3%; bottom: 2%; }
  
  
  .live-sub { letter-spacing: .01em; }
  .live-gauge .live-label { min-height: 2.8em; }
  .live-price .live-label { min-height: 2.8em; }
}
@media (max-width: 420px) {
  .hero-bottom > span:first-child { display: none; }
}
.live-offline-title { display: block; max-width: 640px; margin-bottom: 12px; font: 700 clamp(30px, 2.8vw, 42px)/.95 var(--display); text-transform: none; color: var(--cream); }
.live-offline p { font-size: 13px; color: #aaa39c; }
@media (max-width: 760px) {
  .arena-layer--front { width: 50%; right: -3%; bottom: -1%; }
  
}
@media (prefers-reduced-motion: reduce) {
  .live-dot:after, .spark-end:after { display: none; }
}
@media (min-width: 761px) {
  .projects { padding-bottom: 84px; }
  .writing { padding-top: 96px; }
}

/* ============ 5. X-ray lens ============ */
/* The Mangekyo lens (lens.js): an x-ray of the page inside a circle that follows the pointer,
   plus margin notes that only exist inside it. Everything here is inert to clicks. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.lens, .lens-notes, .lens-marks, .lens-reticle { position: fixed; pointer-events: none; display: none; }
.lens-on .lens, .lens-on .lens-notes, .lens-on .lens-marks, .lens-on .lens-reticle { display: block; }
.lens-on .cursor-ring { opacity: 0; }

/* The x-ray: the page underneath, inverted to a bone-white negative and washed in crimson. */
.lens {
  left: 0;
  top: 0;
  z-index: 34;
  border-radius: 50%;
  overflow: hidden;
  -webkit-backdrop-filter: invert(1) grayscale(1) contrast(1.35) brightness(.92);
  backdrop-filter: invert(1) grayscale(1) contrast(1.35) brightness(.92);
  background: radial-gradient(circle closest-side, rgba(150, 18, 24, .34), rgba(110, 8, 14, .62) 92%, rgba(217, 54, 57, .9));
}
/* Construction lines: the layout grid the page is built on, visible only through the lens. */
.lens-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(10, 10, 11, .22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 11, .22) 1px, transparent 1px),
    linear-gradient(rgba(10, 10, 11, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 11, .1) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
  background-attachment: fixed;
}

/* Notes: above the x-ray; each one fades in whole when the lens finds its pin. */
.lens-notes { inset: 0; z-index: 38; }
.xn { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; transition: opacity .25s var(--ease-out); }
.xn.is-found { opacity: 1; }
.xn .xn-card { transform: translateY(4px); transition: transform .35s var(--ease-out); }
.xn.is-found .xn-card { transform: none; }
.xn-dot {
  position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid #0a0a0b; background: var(--red, #d93639); box-shadow: 0 0 0 4px rgba(217, 54, 57, .25);
}
.xn-line { position: absolute; left: 5px; top: 0; width: 30px; height: 1px; background: #0a0a0b; }
.xn-card {
  position: absolute; left: 35px; top: -14px; width: min(250px, 62vw); margin: 0;
  padding: 10px 12px 11px; background: #0a0a0b; color: #eae7df; border: 1px solid #3a3433;
  font: 500 12px/1.5 var(--sans, "Manrope", sans-serif); letter-spacing: 0; box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.xn-id { display: block; margin-bottom: 4px; font: 12px var(--mono, "IBM Plex Mono", monospace); letter-spacing: .01em; color: #ef5557; }
.xn.is-left .xn-line { left: auto; right: 5px; }
.xn.is-left .xn-card { left: auto; right: 35px; }
.xn.is-up .xn-card { top: auto; bottom: -14px; }

/* Where the notes are: faint crosshairs outside the lens, so there is a reason to look. */
.lens-marks { inset: 0; z-index: 35; }
.xn-mark { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.xn-mark::before, .xn-mark::after { content: ""; position: absolute; background: rgba(239, 85, 87, .75); transition: opacity .2s; }
.xn-mark.is-found::before, .xn-mark.is-found::after { opacity: 0; }
.xn-mark::before { left: -6px; top: -.5px; width: 12px; height: 1px; }
.xn-mark::after { left: -.5px; top: -6px; width: 1px; height: 12px; }

/* The reticle around the lens. */
.lens-reticle { left: 0; top: 0; z-index: 37; width: 0; height: 0; }
.lens-reticle svg { width: 100%; height: 100%; overflow: visible; display: block; }
.lens-reticle circle, .lens-reticle line { fill: none; vector-effect: non-scaling-stroke; }
.r-edge { stroke: rgba(239, 85, 87, .95); stroke-width: 1.5; }
.r-ticks line { stroke: rgba(239, 85, 87, .8); stroke-width: 1; }
/* The dashed orbit turns as an HTML layer: rotating the SVG circle itself forces a layout every frame. */
.r-spin { position: absolute; inset: 0; animation: lens-orbit 24s linear infinite; will-change: transform; }
.r-orbit { stroke: rgba(234, 231, 223, .35); stroke-width: 1; stroke-dasharray: 2 7; }
.r-label { position: absolute; left: 50%; top: calc(100% + 12px); transform: translateX(-50%); white-space: nowrap; font-size: 12px; letter-spacing: .01em; color: #ef5557; }
@keyframes lens-orbit { to { transform: rotate(360deg); } }

/* Keep the close control above the lens. */
body.genjutsu-active .perception-toggle { z-index: 41; }

@media (max-width: 760px) {
  .xn-card { width: min(210px, 58vw); font-size: 12px; }
  .r-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .r-spin { animation: none; }
  .xn, .xn .xn-card { transition: none; }
}

/* ============ 6. Studio layer: tokens, type scale, layout rhythm, motion, small screens ============ */
/* ==========================================================================
   studio.css: the last word. One token set, one type scale, one motion
   language. Loaded after the older sheets; it owns layout rhythm, labels,
   focus, the motion states and the small-screen rules.
   Motion rule: only transform and opacity animate. Everything else is instant.
   ========================================================================== */
:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);   /* arrivals: fast start, long settle */
  --ease-io: cubic-bezier(.65, 0, .35, 1);   /* things that travel across the screen */
  --ease: var(--ease-out);
  --dur-1: 160ms;   /* press, hover */
  --dur-2: 320ms;   /* state changes */
  --dur-3: 640ms;   /* reveals */
  --dur-4: 1000ms;  /* hero, big headlines */
  --ink: #eae7df;
  --body: #c3beb5;
  --label: #a7a29a;
  --muted: #9b9892;
  --hair: #ffffff14;
  --red-btn: #c52f32;   /* crimson with white text at 5.6:1 */
  --measure: 64ch;
  --pad: clamp(20px, 6vw, 8%);
}

/* ---------- Base: readable type, visible focus, quiet selection ---------- */
body { font-size: 16px; line-height: 1.6; }
p { max-width: var(--measure); }
:focus-visible { outline: 2px solid var(--red-text); outline-offset: 4px; border-radius: 2px; }
.button:focus-visible { outline-offset: 3px; }
.eyebrow, .mono {
  font: 600 13px/1.35 var(--sans);
  letter-spacing: .02em;
  color: var(--label);
}
.eyebrow { display: block; }
.status-dot, .live-dot { box-shadow: none; }

/* ---------- Buttons and links: they answer the pointer, with transform and opacity only ---------- */
.button { position: relative; overflow: hidden; isolation: isolate; font-size: 15px; font-weight: 700; letter-spacing: 0; min-height: 52px; padding: 14px 20px; transition: transform var(--dur-2) var(--ease-out); }
.button-red { background: var(--red-btn); color: #fff; }
.button-red:hover { background: var(--red-btn); }
.button::after { content: ''; position: absolute; inset: 0; z-index: -1; background: #fff; opacity: 0; transition: opacity var(--dur-2) var(--ease-out); }
.button:hover { transform: translateY(-2px); }
.button:hover::after { opacity: .12; }
.button:active { transform: translateY(0) scale(.985); transition-duration: var(--dur-1); }
.button svg { transition: transform var(--dur-2) var(--ease-out); }
.button:hover svg { transform: translate(3px, -3px); }
.text-link { position: relative; font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--ink); min-height: 44px; }
.text-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--dur-3) var(--ease-out); }
.text-link:hover::after, .text-link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.text-link svg { transition: transform var(--dur-2) var(--ease-out); }
.text-link:hover svg:not(.icon--x) { transform: translate(3px, -3px); }

/* ---------- Header and wayfinding ---------- */
.site-header { border-bottom-color: var(--hair); }
.brand { font-size: 16px; }
.desktop-nav { gap: 40px; margin-left: 0; }
.desktop-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; font-size: 14px; font-weight: 600; color: var(--body); }
.desktop-nav a:hover, .desktop-nav a.is-current { color: var(--ink); }
.desktop-nav a::after { right: 0; bottom: 8px; }
.sound-toggle { font-size: 13px; color: var(--body); }
.sound-toggle:hover { color: var(--ink); }
.sound-bars i { transition: none; }
.mobile-nav a { font-size: 30px; padding: 14px 0; min-height: 56px; border-bottom: 1px solid var(--hair); }
.menu-toggle span { transition: transform var(--dur-2) var(--ease-out); }
.section-rail { left: 22px; }
.section-rail a { font: 600 12px/1 var(--sans); letter-spacing: .02em; color: #86827b; min-height: 20px; }
.section-rail em { left: 34px; padding: 3px 6px; text-transform: none; font-size: 12px; }
.section-rail a.is-active em { opacity: 1; transform: none; color: var(--ink); }
.scroll-progress { width: 100%; transform-origin: left; transform: scaleX(0); }

/* ---------- Hero ---------- */
.hero-content { width: min(660px, 88vw); }
.hero-eyebrow { font: 600 14px/1.3 var(--sans); letter-spacing: .02em; color: #d2ccc2; margin: 0 0 22px; }
.hero h1 { letter-spacing: -.02em; }
.hero-copy { margin-top: 32px; gap: 14px; }
.hero-copy p { font-size: clamp(24px, 2.1vw, 30px); line-height: 1.22; font-weight: 600; letter-spacing: -.025em; }
.hero-copy p em { color: inherit; }
.hero-copy > span { font-size: 16px; line-height: 1.65; color: #beb9af; max-width: 40ch; }
.hero-actions { gap: 28px; margin-top: 30px; }
.hero-dispatch { display: flex; flex-wrap: wrap; gap: 0 30px; margin-top: 38px; border-top: 1px solid var(--hair); }
.current-quest { margin: 0; padding: 0; border: 0; min-height: 48px; font: 500 14px/1.3 var(--sans); color: var(--body); gap: 10px; transition: transform var(--dur-2) var(--ease-out); }
.current-quest:hover { color: var(--ink); transform: translateX(2px); }
.quest-label { font-weight: 700; font-size: 13px; color: var(--red-text); margin-right: 4px; }
.quest-soon .quest-label { color: var(--sage); }
.hero-kanji { color: #d9cab2a6; }
.hero-activation > span { font-size: 13px; line-height: 1.5; font-weight: 600; color: var(--ink); }
.activation-muted { color: #aaa49b; font-weight: 500; }
.eye-button { transition: transform var(--dur-2) var(--ease-out); }
.hero-bottom { font: 600 13px/1 var(--sans); color: #b8b3a9; letter-spacing: .02em; bottom: 26px; }
.hero-bottom > a, .hero-location { color: #b8b3a9; min-height: 44px; display: inline-flex; align-items: center; }
.hero-location > span { color: var(--ink); font-variant-numeric: tabular-nums; margin-left: 8px; }

/* ---------- Sections: one heading system ---------- */
.section-pad { padding-top: clamp(88px, 11vw, 144px); padding-bottom: clamp(72px, 9vw, 120px); }
.section-heading { align-items: flex-end; gap: clamp(28px, 6vw, 96px); }
.section-heading .eyebrow { margin-bottom: 22px; font-size: 14px; color: var(--label); }
.section-heading h2 { font-size: clamp(40px, 5.2vw, 80px); line-height: 1.02; letter-spacing: -.045em; font-weight: 500; }
.section-heading > p { font-size: 17px; line-height: 1.6; color: var(--body); max-width: 30ch; margin: 0 0 6px; }
.project-toolbar { margin-top: clamp(40px, 5vw, 64px); border-top-color: var(--hair); padding: 14px 0; }
.archive-label { font: 600 14px var(--sans); color: var(--label); letter-spacing: .01em; min-height: 20px; }
.project-filters { gap: 6px; }
.project-filters button { min-height: 44px; padding: 0 14px; font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--label); }
.project-filters button:after { left: 14px; right: 14px; bottom: 6px; transition: transform var(--dur-2) var(--ease-out); }
.project-filters button:hover { color: var(--ink); }
.project-filters button.active { color: var(--ink); }

/* ---------- Project cards: rules and whitespace, not boxes ---------- */
.project-grid { gap: clamp(72px, 9vw, 132px) clamp(24px, 3vw, 40px); margin-top: clamp(36px, 5vw, 64px); }
.project-arena, .project-release, .project-featured { grid-column: 1 / -1; }
.project-release, .project-featured { border: 0; background: none; box-shadow: none; padding: clamp(28px, 3vw, 40px) 0 0; border-top: 1px solid var(--hair); }
.release-topline, .feature-topline { display: flex; padding: 0 0 clamp(20px, 2.4vw, 32px); margin: 0; border: 0; background: none; font: 600 13px/1.3 var(--sans); letter-spacing: .02em; color: var(--label); }
.release-topline span, .feature-topline span { color: var(--label); }
.project-soon .release-topline, .project-soon .release-topline span { color: var(--red-text); }
.release-layout, .feature-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 88px); align-items: center; padding: 0; border: 0; }
.release-visual, .feature-visual { display: block; position: relative; overflow: hidden; border: 0; width: 100%; background: var(--surface); aspect-ratio: 16 / 10; padding: 0; }
.release-visual > img { width: 100%; height: 100%; object-fit: cover; }
.release-visual:before, .feature-visual:before, .project-card-link .project-image:before { display: none; }
.release-art-label { position: absolute; left: 16px; bottom: 14px; font: 600 13px var(--sans); color: #fff; letter-spacing: .01em; background: rgba(10, 10, 11, .72); padding: 6px 10px; }
.release-copy, .feature-copy { max-width: 560px; }
.release-copy > .eyebrow, .feature-copy > .eyebrow { color: var(--red-text); margin-bottom: 14px; font-size: 13px; }
.release-copy h3, .feature-copy h3 { font: 700 clamp(48px, 5.4vw, 84px)/.92 var(--display); letter-spacing: -.01em; margin: 0; }
.release-subtitle, .feature-subtitle { display: block; font: 600 clamp(20px, 1.8vw, 26px)/1.25 var(--sans); letter-spacing: -.02em; color: var(--ink); margin: 18px 0 0; }
.release-description, .feature-copy > p { font-size: 16px; line-height: 1.7; color: var(--body); margin-top: 20px; }
.feature-context { display: block; margin-top: 22px; padding: 0; border: 0; font: 600 13px/1.4 var(--sans); color: var(--label); letter-spacing: .01em; }
.release-actions, .feature-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 28px; }
.project-tokens { gap: 8px; margin-top: 22px; }
.project-tokens > span, .project-soon .project-tokens > span { font: 600 13px/1.3 var(--sans); letter-spacing: 0; color: var(--body); border: 1px solid var(--hair); padding: 6px 11px; }
.release-install { margin-top: 22px; padding: 14px 16px; border: 1px solid var(--hair); background: #0d0d0e; }
.release-install code { font: 500 14px/1.5 var(--mono); color: var(--ink); letter-spacing: 0; }
/* alternate the sides so the column does not read as one repeated row */
.project-release:not(.project-soon):nth-child(odd) .release-layout, .project-featured .feature-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.project-release:not(.project-soon):nth-child(odd) .release-visual, .project-featured .feature-visual { order: 2; }
.project-release:not(.project-soon):nth-child(odd) .release-copy, .project-featured .feature-copy { justify-self: end; }
/* City of Heroes keeps the README's grid contract: one padding token (--soon-pad), equal columns from
   1101px, hub columns on the same tracks. It is a panel, like the flagship, so the column has two kinds of card. */
.release-head, .release-body { display: contents; }
.project-soon { --soon-pad: clamp(24px, 3vw, 40px); border: 1px solid var(--hair); background: #0e0d0e; padding: 0; }
.project-soon .release-topline { padding: var(--soon-pad) var(--soon-pad) 0; }
.project-soon .release-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--soon-pad) * 2); padding: var(--soon-pad); align-items: center; }
.project-soon .release-visual { aspect-ratio: 3 / 2; order: 0; }
.project-soon .release-copy { max-width: none; justify-self: stretch; }
/* the retro visual: a link frame, no window chrome */
.feature-visual { aspect-ratio: auto; background: #151a14; padding: 0; }
.browser-chrome { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; font: 500 13px var(--sans); letter-spacing: 0; color: var(--label); border-bottom: 1px solid var(--hair); background: rgba(10, 10, 11, .5); }
.retro-display { padding: 8px; }
.retro-sticker { font-family: var(--display); }

/* the two smaller covers */
.project-card-link .project-image { border: 0; aspect-ratio: 16 / 10; transform: none; transition: none; background: var(--surface); }
.project-card-link .project-image.is-tilting { transform: none; transition: none; }
.project-card-link .project-image > img { filter: none; transition: transform var(--dur-3) var(--ease-out), translate var(--dur-3) var(--ease-out); }
.project-card-link:hover .project-image > img { transform: scale(1.03); filter: none; }
.project-image:after { display: none; }
.project-status { left: 16px; right: auto; top: 16px; font: 600 13px/1 var(--sans); letter-spacing: 0; color: #f1ede6; background: rgba(10, 10, 11, .78); border: 0; padding: 8px 11px; }
.project-info { padding-top: 22px; gap: 16px; }
.project-info .eyebrow { color: var(--label); font-size: 13px; margin-bottom: 8px; }
.project-info h3 { font: 700 clamp(34px, 3.4vw, 48px)/1 var(--display); letter-spacing: 0; }
.project-info p { font-size: 16px; color: var(--ink); margin-top: 8px; }
.project-summary { font-size: 16px; line-height: 1.7; color: var(--body); margin-top: 16px; max-width: 52ch; }
.project-arrow { width: 44px; height: 44px; margin-top: 4px; transition: transform var(--dur-2) var(--ease-out); }
.project-card-link:hover .project-arrow { transform: translate(2px, -2px); }
.project-details-trigger { inset: 0; }

/* ---------- Flagship: BTC AI Arena ---------- */
.project-arena { background: #0e0d0e; border: 1px solid var(--hair); box-shadow: none; }
.project-arena:before, .project-arena:after { display: none; }
.arena-topline { display: flex; padding: 22px clamp(24px, 4vw, 56px) 0; border: 0; background: none; font: 600 13px var(--sans); letter-spacing: .02em; }
.live-status { display: inline-flex; align-items: center; gap: 9px; color: var(--red-text); }
.arena-layout { padding: 28px clamp(24px, 4vw, 56px) clamp(36px, 4vw, 56px); gap: clamp(32px, 5vw, 72px); align-items: center; }
.arena-copy { max-width: 560px; }
.arena-copy > .eyebrow { color: var(--label); margin-bottom: 14px; }
.arena-title { font: 700 clamp(64px, 7vw, 112px)/.86 var(--display); letter-spacing: -.01em; color: var(--ink); margin: 0; -webkit-text-stroke: 0; }
.arena-question { font: 700 clamp(24px, 2.2vw, 32px)/1.1 var(--display); letter-spacing: .01em; color: var(--ink); margin-top: 20px; }
.arena-quote { font-size: 17px; line-height: 1.5; color: var(--ink); border-left: 0; padding: 0; margin-top: 18px; }
.arena-quote em { color: var(--red-text); }
.arena-description { font-size: 16px; line-height: 1.7; color: var(--body); margin-top: 16px; }
.arena-stats dt { font: 600 13px/1.3 var(--sans); letter-spacing: 0; color: var(--label); }
.arena-stats dd small { font: 600 13px var(--sans); }
.arena-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 28px; }
.arena-stage { box-shadow: none; }
.arena-live { border-top: 1px solid var(--hair); }
.arena-live-head { font: 600 13px var(--sans); letter-spacing: .01em; color: var(--label); }
.live-label { font: 600 13px/1.3 var(--sans); letter-spacing: .01em; color: var(--label); }
.live-sub, .spark-range, .gauge-note, .gauge-readout .mono { font: 500 13px/1.5 var(--sans); letter-spacing: 0; color: var(--label); }
.gauge-note { display: block; margin-top: 8px; white-space: nowrap; }
.live-cell:before { display: none; }
.live-figure { font-variant-numeric: tabular-nums; }

/* ---------- Hub: lists inside the retro and coming-soon cards ---------- */
.hub .hub-title { font: 700 14px/1.3 var(--sans); letter-spacing: .01em; color: var(--ink); }
.hub .hub-title > span { display: none; }
.hub .hub-intro, .hub .hub-note, .hub .hub-more, .hub-teasers li { font-size: 15px; line-height: 1.6; color: var(--body); }
.hub-meta, .hub-meta-row, .hub-meta-row > span, .hub-asof { font: 500 13px/1.5 var(--sans); letter-spacing: 0; color: var(--label); }
.hub-tag { font: 600 13px/1.3 var(--sans); letter-spacing: 0; padding: 4px 10px; }
.hub-name { font-size: 22px; }
.hub-game-link { min-height: 32px; }

/* ---------- Next wave: a list, not tiles ---------- */
.next-chapters { margin-top: clamp(80px, 10vw, 140px); padding: clamp(28px, 3vw, 44px) 0 0; border: 0; border-top: 1px solid var(--hair); background: none; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.next-heading h3 { font: 700 clamp(48px, 5vw, 76px)/.92 var(--display); letter-spacing: 0; }
.next-heading p { margin-top: 18px; color: var(--body); font-size: 16px; }
.next-grid { display: grid; gap: 0; grid-template-columns: 1fr; }
.next-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: start; padding: 24px 0; border: 0; border-top: 1px solid var(--hair); background: none; min-height: 0; }
.next-card:first-child { border-top: 0; padding-top: 0; }
.next-card:before { display: none; }
.next-card h4 { font: 700 26px/1.15 var(--display); letter-spacing: 0; }
.next-card p { font-size: 15px; line-height: 1.6; color: var(--body); margin-top: 8px; }
.next-status { display: inline-flex; align-items: center; gap: 8px; font: 600 13px var(--sans); letter-spacing: 0; color: var(--sage); white-space: nowrap; padding-top: 6px; }
.archive-foot { border-bottom: 0; margin-top: 28px; padding: 0; justify-content: flex-start; }

/* ---------- Writing ---------- */
.writing-topline { display: block; margin-top: clamp(32px, 4vw, 56px); padding: 14px 0; border-top: 1px solid var(--hair); font: 600 14px var(--sans); color: var(--label); letter-spacing: .01em; }
.article-topline, .article-topline time, .article-topic, .article-new, .article-format, .article-list-label { font: 600 13px/1.3 var(--sans); letter-spacing: .01em; color: var(--label); }
.article-new { color: var(--red-text); }
.article-card:before { display: none; }
.article-card h3 { letter-spacing: -.01em; }
.article-excerpt { font-size: 15px; line-height: 1.6; color: var(--body); }
.writing-footer { border-bottom: 0; justify-content: flex-start; }

/* ---------- Universe, manifesto, contact, footer ---------- */
.orbit-label { font: 600 13px var(--sans); color: var(--label); letter-spacing: .01em; padding: 5px 8px; }
.ocular-hint { font: 600 13px var(--sans); letter-spacing: .01em; color: #b9b3aa; }
.universe-content h2 { font-size: clamp(40px, 4.4vw, 68px); line-height: 1.04; letter-spacing: -.04em; }
.universe-content p { font-size: 17px; line-height: 1.7; color: var(--body); max-width: 46ch; }
.identity-tags { display: flex; flex-wrap: wrap; gap: 8px 0; list-style: none; margin: 32px 0 0; padding: 20px 0 0; border-top: 1px solid var(--hair); font: 600 14px var(--sans); color: var(--label); letter-spacing: .01em; }
.identity-tags li { padding: 0 22px 0 0; margin: 0 22px 0 0; border-right: 1px solid var(--hair); }
.identity-tags li:last-child { border: 0; margin: 0; padding: 0; }
.manifesto-rules { list-style: none; margin: 0; padding: 0; }
.manifesto-rules li { font: 700 clamp(26px, 2.6vw, 38px)/1.1 var(--display); text-transform: uppercase; padding: 18px 0; border-top: 1px solid var(--hair); }
.manifesto-rules li:last-child { border-bottom: 1px solid var(--hair); }
.contact-top .eyebrow { font-size: 14px; }
.contact-main h2 { letter-spacing: 0; }
.contact-circle { transition: transform var(--dur-3) var(--ease-out); }
.contact-circle > span { font: 700 15px/1.25 var(--sans); letter-spacing: 0; text-align: center; }
.contact-orbit text { font: 600 12px var(--sans); letter-spacing: .08em; }
.contact-bottom p { font-size: 17px; line-height: 1.65; color: var(--body); }
.footer-note { font: 500 13px var(--sans); color: var(--label); letter-spacing: 0; }
.footer .text-link { color: var(--body); font-size: 14px; }
.to-top { transition: transform var(--dur-2) var(--ease-out); }
.to-top:hover { transform: translateY(-3px); }

/* ---------- Dialog and toast ---------- */
dialog::backdrop { background: rgba(0, 0, 0, .86); }
.dialog-body .eyebrow { color: var(--red-text); font-size: 13px; }
.dialog-body p { font-size: 16px; line-height: 1.7; color: var(--body); }
.dialog-stack > span, .dialog-note { font: 600 13px/1.3 var(--sans); letter-spacing: 0; color: var(--label); }
.dialog-close { transition: transform var(--dur-2) var(--ease-out); }
.dialog-close:hover { transform: rotate(90deg); }
.toast { font: 600 14px var(--sans); letter-spacing: 0; transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility var(--dur-2); }
.perception-toggle { font: 600 13px var(--sans); letter-spacing: 0; }

/* ==========================================================================
   Motion: one vocabulary. Arrive from 16px below, settle with --ease-out.
   ========================================================================== */
.js-ready .reveal { transform: translateY(16px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.js-ready .reveal.is-visible { transform: none; }
/* images settle inside their frame instead of being clipped open */
.motion-ready .reveal :is(.project-image, .release-visual, .feature-visual) { clip-path: none; transition: none; }
.motion-ready .reveal :is(.project-image, .release-visual, .feature-visual) > img, .motion-ready .reveal .retro-display { opacity: 0; transform: scale(1.04); transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out), translate var(--dur-3) var(--ease-out); }
.motion-ready .reveal.is-visible :is(.project-image, .release-visual, .feature-visual) > img, .motion-ready .reveal.is-visible .retro-display { opacity: 1; transform: none; }
.motion-ready .reveal.is-visible .project-card-link:hover .project-image > img, .motion-ready .reveal.is-visible .release-visual:hover > img { transform: scale(1.03); transition-duration: var(--dur-3); }
/* pointer parallax on cover art: the picture drifts inside a still frame */
.project-image > img, .release-visual > img, .retro-preview img { --px: 0; --py: 0; }
@media (hover: hover) and (pointer: fine) {
  .motion-ready .project-image.has-pointer > img, .motion-ready .release-visual.has-pointer > img { translate: calc(var(--px) * -10px) calc(var(--py) * -8px); }
}
/* headline lines rise faster and with a tighter stagger */
.motion-ready .tl > span { transition: transform 900ms var(--ease-out); transition-delay: calc(var(--line, 0) * 70ms + 60ms); }
.motion-ready :is(.section-heading, .universe-content, .contact-top) .eyebrow:after { transition: transform var(--dur-4) var(--ease-out) .3s; }
.motion-ready :is(.article-card, .next-card, .arena-stats > div, .manifesto-rules li).is-in { animation-duration: 700ms; animation-delay: calc(var(--stagger, 0) * 60ms); }
/* the live dot breathes: opacity only */
@keyframes breathe { 50% { opacity: .35; } }
@keyframes skeleton { from { opacity: .45; } to { opacity: 1; } }
/* only once the block is on screen, so nothing starts at load */
.is-visible .live-dot, .is-visible .next-pulse, .is-in .live-dot { animation: breathe 2.4s var(--ease-io) infinite; }
.is-offscreen .live-dot, .is-offscreen .next-pulse { animation-play-state: paused; }

/* ==========================================================================
   Small screens: one column, 44px targets, no sub-13px text
   ========================================================================== */
@media (max-width: 1100px) {
  .release-layout, .feature-layout, .project-release:not(.project-soon):nth-child(odd) .release-layout, .project-featured .feature-layout { grid-template-columns: minmax(0, 1fr); }
  .project-release:not(.project-soon):nth-child(odd) .release-visual, .project-featured .feature-visual { order: 0; }
  .project-release:not(.project-soon):nth-child(odd) .release-copy, .project-featured .feature-copy { justify-self: start; }
  .release-copy, .feature-copy { max-width: 640px; }
  .project-soon .release-layout { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .next-chapters { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .section-heading h2 { font-size: clamp(36px, 10.5vw, 50px); }
  .section-heading > p { margin-top: 20px; font-size: 16px; }
  .hero-copy p { font-size: 24px; }
  .hero-copy > span { font-size: 15px; }
  .hero-dispatch { flex-direction: column; margin-top: 28px; gap: 0; }
  .current-quest { min-height: 48px; border-bottom: 1px solid var(--hair); width: 100%; justify-content: flex-start; }
  .current-quest > .icon { margin-left: auto; }
  .hero-bottom { font-size: 13px; }
  .hero-location { display: inline-flex; }
  .project-filters { margin: 0 -14px; flex-wrap: wrap; }
  .project-toolbar { align-items: stretch; }
  .project-soon .release-visual { aspect-ratio: 16 / 10; }
  .next-card { grid-template-columns: 1fr; }
  .next-card:first-child { padding-top: 0; }
  .identity-tags li { padding-right: 16px; margin-right: 16px; }
  .footer .text-link, .to-top { min-height: 44px; min-width: 44px; }
  .footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; row-gap: 8px; }
  .footer .brand { order: 1; }
  .footer .to-top { order: 2; }
  .footer > .text-link { order: 3; margin-left: 0; }
  .footer-note { order: 4; width: 100%; }
  .release-actions .button, .feature-actions .button, .arena-actions .button { width: 100%; }
  .toast { font-size: 14px; }
}

/* ==========================================================================
   Reduced motion: stillness, with everything visible
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js-ready .reveal, .motion-ready .reveal :is(.project-image, .release-visual, .feature-visual) > img, .motion-ready .reveal .retro-display,
  .motion-ready .tl > span, .motion-ready :is(.article-card, .next-card, .arena-stats > div, .manifesto-rules li) { opacity: 1 !important; transform: none !important; translate: none !important; }
  .motion-ready :is(.hero-eyebrow, .hero-copy, .hero-actions, .hero-dispatch, .hero-activation, .hero-bottom, .hero-kanji, .hero h1 > span) { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* ==========================================================================
   Refinements after the first render
   ========================================================================== */
.hero-content { padding-top: 64px; }
.hero-copy > span { max-width: none; }
.release-copy, .feature-copy { padding: 0; }
.release-topline, .feature-topline, .release-topline span, .feature-topline span { color: var(--label); }
.project-soon .release-topline, .project-soon .release-topline span { color: var(--red-text); }
.project-featured .feature-copy > p, .project-featured .feature-copy .feature-actions .text-link, .project-featured .feature-actions :is(.button, .text-link) { font-size: 16px; }
.project-featured .feature-copy > p { line-height: 1.7; color: var(--body); }
.project-featured .feature-actions .button { font-size: 15px; }
.project-featured .hub { margin-top: clamp(48px, 6vw, 88px); }
@media (min-width: 1101px) { .arena-layout { grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); } }
.arena-actions { gap: 4px 20px; }
.writing :is(.article-new, .article-topic, .article-format), .article-list .article-topic { font: 600 13px/1.3 var(--sans); letter-spacing: .01em; }
.article-card--featured { border: 0; border-top: 1px solid var(--hair); background: none; box-shadow: none; }
.article-card--featured:before, .article-card--featured:after { display: none; }
.article-card--featured h3, .article-list .article-card h3 { font-weight: 700; }
.article-plate { border-color: var(--hair); }
.hero-dispatch { margin-top: 32px; }
@media (max-width: 760px) { .hero-content { padding-top: 262px; padding-bottom: 96px; } }
/* Contrast and tap size, from the automated audit */
.contact-circle { background: var(--red-btn); }
.brand { min-height: 44px; }
.hub-game-link { display: inline-flex; align-items: center; min-height: 44px; }
.contact-circle, .contact-circle > span, .contact-circle .icon--x { color: #fff; }
body.genjutsu-active .perception-toggle { max-width: none; font: 600 13px/1.4 var(--sans); letter-spacing: 0; padding: 9px 16px 9px 12px; }

.project-soon .release-description { max-width: 52ch; font-size: 16px; line-height: 1.7; color: var(--body); }
.project-soon .release-actions :is(.button, .text-link) { font-size: 15px; }
.project-soon .release-copy > .eyebrow, .project-soon .release-art-label, .project-soon .project-tokens > span { font-size: 13px; }

/* The hero is sized from its content (measured at 21 widths, 360 to 1920px): the dispatch row always clears the bottom bar. */
@media (min-width: 761px) and (max-width: 1100px) { .hero { min-height: 860px; } }
@media (min-width: 1101px) and (max-width: 1279px) { .hero { min-height: calc(586px + 23vw); } }
@media (min-width: 1280px) and (max-width: 1599px) { .hero { min-height: calc(481px + 23.7vw); } }
@media (min-width: 1600px) { .hero { min-height: 850px; } }
@media (max-width: 1100px) { .arena-layout { row-gap: 44px; } }

/* Below-the-fold work is skipped until it is near the screen. `auto` in contain-intrinsic-size remembers the real height once seen,
   so the scrollbar settles and nothing jumps. The hero, the flagship and in-page anchors are never skipped. */
.writing, .universe, .manifesto, .contact, .footer, .next-chapters { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.project-card:not(.project-arena) { content-visibility: auto; contain-intrinsic-size: auto 760px; }

/* Phone review fixes. The "15m to 24h" stat overflowed its cell below ~430px;
   8.2vw keeps it inside down to 360px. */
@media (max-width: 520px) { .arena-stats dd { font-size: min(40px, 8.2vw); } }
/* The awaken control sat 7px over the eyebrow line on phones; lift it clear. */
@media (max-width: 760px) { .hero-activation { top: 188px; } }
/* Decorative name label and the outlined word read too faint on the art. */
.hero-kanji { color: #d9cab2d9; }
.outline-text { -webkit-text-stroke-width: 1.5px; }