/* AINARIT · APERTURE
   01 Tokens / 02 Base / 03 Navigation / 04 Scenes / 05 Controls / 06 Responsive
   No framework, downloaded fonts, remote assets or runtime CSS dependencies. */

:root {
  color-scheme: light;
  --paper: #f5f5f2;
  --paper-bright: #fafaf8;
  --ink: #191a1b;
  --dark: #151617;
  --red: #b62228;
  --muted: #6c6c69;
  --line: rgba(25,26,27,.16);
  --gutter: clamp(24px,5.1vw,104px);
  --header: 96px;
  --screen: 100svh;
  --font: "Helvetica Neue", "Arial", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --ease: cubic-bezier(.22,1,.36,1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-gutter:stable; margin:0; background:var(--paper); scrollbar-width:thin; scrollbar-color:#aaa9a4 var(--paper); scroll-padding-top:var(--header); }
body { margin:0; color:var(--ink); background:var(--paper); font:14px/1.65 var(--font); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { color:inherit; font:inherit; background:none; border:0; padding:0; cursor:pointer; }
button, a { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
a:focus-visible, button:focus-visible, [tabindex="0"]:focus-visible { outline:2px solid var(--red); outline-offset:6px; }
section:focus { outline:none; }
button[disabled] { opacity:.45; cursor:default; }
h1,h2,h3,p,figure { margin:0; }
h1,h2,h3 { font-weight:400; }
img,svg,canvas { display:block; }
img { max-width:100%; height:auto; }
[hidden] { display:none!important; }
::selection { color:#fff; background:var(--red); }
.svg-library { position:absolute; width:0; height:0; overflow:hidden; }
.icon { width:20px; height:20px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip-link { position:fixed; z-index:300; left:20px; top:12px; padding:12px 20px; background:var(--ink); color:var(--paper); transform:translateY(-160%); }
.skip-link:focus { transform:none; }
.micro { font:9px/1.85 var(--mono); letter-spacing:1.4px; text-transform:uppercase; }
.red { color:var(--red); }
.page-progress { position:fixed; inset:0 0 auto; height:2px; z-index:130; pointer-events:none; }
.page-progress i { display:block; width:100%; height:100%; background:var(--red); transform:scaleX(0); transform-origin:left; }

/* 03 · Navigation */
.site-header { position:fixed; left:0; right:0; top:0; z-index:100; height:var(--header); padding:0 var(--gutter); display:flex; align-items:center; gap:40px; color:var(--ink); background:rgba(245,245,242,.91); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); transition:color .5s, background .5s; }
.site-header::after { content:""; position:absolute; height:1px; bottom:0; left:var(--gutter); right:var(--gutter); background:currentColor; opacity:.13; }
.brand { display:inline-flex; align-items:center; gap:13px; flex-shrink:0; min-height:44px; }
.brand-mark { width:35px; height:39px; }
.brand>span { font-size:17px; letter-spacing:5px; line-height:1; padding-top:2px; }
.desktop-nav { display:flex; justify-content:center; align-items:center; gap:40px; margin:auto; }
.desktop-nav a { display:flex; flex-direction:column; gap:1px; justify-content:center; min-height:56px; position:relative; }
.desktop-nav a span { font-size:11px; letter-spacing:.6px; }
.desktop-nav small { font:6px/1.6 var(--mono); letter-spacing:1.1px; color:var(--muted); }
.desktop-nav a::after { content:""; position:absolute; left:0; right:0; bottom:6px; height:1px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.desktop-nav a:hover::after,.desktop-nav a[aria-current="page"]::after { transform:scaleX(1); }
.header-actions { display:flex; align-items:center; gap:26px; }
.language-trigger { display:flex; gap:8px; align-items:center; min-width:64px; min-height:44px; font-size:10px; letter-spacing:.6px; }
.language-trigger .icon { width:14px; height:14px; }
.chevron { width:4px; height:4px; border-bottom:1px solid; border-right:1px solid; transform:rotate(45deg); margin:0 0 3px 2px; }
.header-cta { display:flex; align-items:center; justify-content:space-between; gap:35px; background:var(--ink); color:var(--paper); padding:0 16px; min-height:40px; font-size:10px; letter-spacing:.2px; transition:background .3s; }
.header-cta .icon { width:15px; height:15px; }
.header-cta:hover { background:var(--red); }
.menu-trigger { width:36px; height:44px; display:none; flex-direction:column; justify-content:center; gap:6px; }
.menu-trigger span { width:25px; height:1px; background:currentColor; }
.menu-trigger span+span { width:17px; align-self:flex-end; }
.site-header[data-tone="dark"] { background:rgba(21,22,23,.9); color:var(--paper); }
.site-header[data-tone="dark"] .header-cta { background:var(--paper); color:var(--ink); }
.site-header[data-tone="dark"] .header-cta:hover { background:var(--red); color:white; }
.site-header[data-tone="dark"] .desktop-nav small { color:#999b98; }

/* 04 · Five acts in normal document flow: one act per screen, scroll is 1:1.
   Nothing is pinned and nothing cross-fades, so scrolling is never swallowed.
   The ground stays paper white from the first act to the fourth; darkness
   arrives exactly once, as the coda, and the footer carries it to the end. */
.acts { position:relative; }
.scene { position:relative; min-height:max(780px,100svh); overflow:hidden; background:var(--paper); isolation:isolate; scroll-margin-top:var(--header); }
.scene[data-tone="dark"] { background:var(--dark); color:var(--paper); }
.scene-index { position:absolute; left:var(--gutter); top:calc(var(--header) + 34px); display:flex; align-items:center; gap:17px; font:8px/1.6 var(--mono); letter-spacing:1.4px; color:var(--muted); z-index:5; }
.scene-index>span:first-child { color:currentColor; }
.scene-index i { width:32px; height:1px; background:currentColor; opacity:.4; }
.scene[data-tone="dark"] .scene-index { color:#a5a6a2; }
.scene-copy { position:absolute; z-index:3; left:var(--gutter); top:29%; width:46%; max-width:730px; }
.eyebrow { display:flex; align-items:center; gap:11px; font-size:10px; line-height:1.8; letter-spacing:1px; margin-bottom:29px; }
.eyebrow i { flex-shrink:0; width:20px; height:1px; background:var(--red); }
.headline { font-size:clamp(46px,5.25vw,92px); line-height:1.37; letter-spacing:-.035em; font-weight:400; }
.headline>span { display:block; }
.scene-description { font-size:13px; font-weight:400; line-height:2.05; color:var(--muted); white-space:pre-line; margin-top:28px; max-width:420px; }
.scene[data-tone="dark"] .scene-description { color:#aaa9a4; }
.actions { display:flex; align-items:center; flex-wrap:wrap; gap:30px; }
.button { position:relative; min-height:54px; min-width:174px; padding:15px 21px; display:inline-flex; justify-content:space-between; align-items:center; gap:44px; font-size:12px; letter-spacing:.2px; overflow:hidden; transition:background .35s,color .35s,box-shadow .35s; }
.button .icon { width:17px; height:17px; transition:transform .4s var(--ease); }
.button:hover .icon { transform:translate(2px,-2px); }
.button-solid { background:var(--ink); color:var(--paper); }
.button-paper { background:var(--paper); color:var(--ink); }
.button:hover { background:var(--red); color:#fff; }
.text-link { display:inline-flex; gap:16px; align-items:center; min-height:44px; font-size:11px; letter-spacing:.5px; }
.text-link .icon { width:17px; height:17px; transition:transform .35s var(--ease); }
.text-link:hover .icon { transform:translateX(5px); }

/* 01 / The cover */
.hero-grid { position:absolute; left:var(--gutter); right:var(--gutter); top:var(--header); bottom:72px; pointer-events:none; background:linear-gradient(90deg, transparent 39%, #16161606 39%, #16161606 calc(39% + 1px), transparent calc(39% + 1px)),linear-gradient(90deg, transparent 76%, #16161605 76%, #16161605 calc(76% + 1px), transparent calc(76% + 1px)); }
.hero-grid::before { content:"+"; position:absolute; top:26%; left:76%; font:12px var(--mono); color:#b1b1ab; transform:translate(-50%,-50%); }
.hero-world { position:absolute; left:28%; width:88%; bottom:14%; pointer-events:none; z-index:1; }
.hero-art { position:relative; transform:translate3d(var(--pointer-x,0px),var(--pointer-y,0px),0) scale(var(--hero-scale,1)); transform-origin:55.4% 91.5%; mask-image:linear-gradient(90deg,transparent 0%,#000 21%,#000 100%); -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 21%,#000 100%); }
.hero-art img { width:100%; height:auto; }
.hero-art::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:26px; background:linear-gradient(transparent,var(--paper)); }
.hero-copy { top:28.5%; width:47%; max-width:760px; }
.hero-copy .eyebrow { margin-bottom:20px; color:var(--muted); }
.hero-wordmark { font-family:"Helvetica Neue",Arial,sans-serif; font-size:clamp(70px,7.1vw,132px); line-height:1.04; font-weight:300; letter-spacing:.13em; margin-left:-.045em; }
.hero-tagline { font-size:10px; font-weight:500; letter-spacing:.49em; margin-top:20px; }
.hero-message { margin-top:38px; }
.hero-statement { white-space:pre-line; font-size:24px; line-height:1.85; letter-spacing:.08em; }
.hero-description { margin-top:14px; font-size:11px; color:var(--muted); letter-spacing:.65px; }
.hero-copy .actions { margin-top:32px; }
.hero-aside { position:absolute; right:calc(var(--gutter) + 14px); top:23%; padding-left:15px; border-left:1px solid #c8c8c0; font-size:7px; letter-spacing:1.3px; line-height:2; z-index:3; color:#73746e; }
.aside-dot { position:absolute; top:0; left:-2px; height:3px; width:3px; background:var(--red); }
.hero-coordinate { position:absolute; bottom:11.7%; right:calc(var(--gutter) + 18px); display:flex; align-items:center; gap:12px; font-size:7px; color:#797a75; }
.hero-coordinate i { height:1px; width:32px; background:#b3b3ad; }
.hero-footer-note { position:absolute; left:var(--gutter); bottom:14%; font-size:7px; letter-spacing:1.2px; color:var(--muted); }

/* 02 / The aperture: a black slab standing on paper that parts as you scroll.
   It used to be a full-screen dark room, which is what made the ground strobe. */
.boundary-copy { top:29%; }
.boundary-copy .headline { font-weight:350; }
.muted-line { color:#999b96; }
.aperture { position:absolute; inset:0; overflow:hidden; }
.aperture-halo { position:absolute; width:60%; height:90%; top:8%; right:-5%; background:radial-gradient(ellipse at center,#4b4d4418,transparent 62%); }
.gate-assembly { position:absolute; top:17%; right:12.7%; width:28%; height:68%; perspective:1000px; transform:translateY(var(--gate-lift,0px)); }
.gate-leaf { position:absolute; top:0; width:49.9%; height:100%; background:linear-gradient(102deg,#2c2e30,#111213 73%); will-change:transform; }
.gate-left { left:0; clip-path:polygon(0 22%,99% 0,100% 100%,0 87%); transform:translateX(calc(-1 * var(--gate-open,0px))) rotateY(calc(-1 * var(--gate-angle,0deg))); transform-origin:right center; }
.gate-right { right:0; background:linear-gradient(103deg,#4a4c49,#26282a 12%,#111213 47%); clip-path:polygon(0 0,100% 22%,100% 87%,0 100%); transform:translateX(var(--gate-open,0px)) rotateY(var(--gate-angle,0deg)); transform-origin:left center; }
.gate-left i { position:absolute; right:0; top:0; bottom:0; width:8%; background:linear-gradient(90deg,#2f3130,#cfcec3); }
.gate-right i { position:absolute; left:0; top:0; bottom:0; width:4%; background:#cfcec3; }
/* The way through reads as a shaded slot, never as a glowing white flash. */
.gate-backlight { position:absolute; top:1%; height:96%; left:31%; width:38%; background:linear-gradient(90deg,transparent,#21232024 24%,#10121038 50%,#21232024 76%,transparent); filter:blur(17px); opacity:calc(.55 + var(--gate-light,.25)); }
.gate-ray { position:absolute; z-index:2; left:49.6%; top:12%; width:1%; height:72%; background:linear-gradient(transparent,#d7252b 16%,#b8131d 55%,transparent); box-shadow:0 0 20px #bd272b66; transform:scaleY(var(--ray-scale,1)); }
.gate-threshold { position:absolute; width:64%; height:22%; left:18%; bottom:-9%; background:linear-gradient(180deg,#11131018,transparent); clip-path:polygon(40% 0,60% 0,100% 100%,0 100%); }
.gate-person { position:absolute; bottom:2%; left:49%; width:5px; height:21px; background:#101112; border-radius:40% 40% 10% 10%; z-index:4; }
.gate-person::before { content:""; position:absolute; left:1px; top:-4px; width:4px; height:4px; border-radius:50%; background:#121313; }
.gate-person::after { content:""; position:absolute; left:1px; top:14px; width:3px; height:14px; border-left:1px solid #101112; border-right:1px solid #101112; }
.aperture-floor { position:absolute; inset:68% 0 0 30%; background:repeating-linear-gradient(0deg,transparent 0,transparent 40px,#191a1b0f 41px,transparent 42px); transform:perspective(400px) rotateX(65deg) scale(1.5); transform-origin:center top; mask-image:linear-gradient(90deg,transparent,black,transparent); }
.aperture-label { position:absolute; right:15%; bottom:13%; font-size:7px; color:#898c84; }
.opening-readout { margin-top:43px; display:flex; align-items:center; gap:16px; color:var(--muted); }
.opening-readout .micro { font-size:8px; letter-spacing:.5px; }
.opening-track { display:block; width:70px; height:1px; background:#191a1b21; }
.opening-track i { display:block; width:100%; height:100%; background:var(--red); transform:scaleX(var(--opening,.1)); transform-origin:left; }
.boundary-note { position:absolute; bottom:16%; left:var(--gutter); padding-left:15px; border-left:1px solid #c6c7c0; font-size:10px; line-height:1.9; letter-spacing:.4px; color:var(--muted); white-space:pre-line; }
.boundary-word { position:absolute; left:43%; bottom:12%; font-size:clamp(70px,12vw,210px); line-height:1; letter-spacing:-.05em; font-weight:400; color:transparent; -webkit-text-stroke:1px #191a1b10; pointer-events:none; z-index:-1; }

/* 03 / Glass */
.clarity-scene { background:#efefeb; }
.clarity-copy { top:30%; width:43%; }
.clarity-philosophy { display:flex; align-items:center; gap:20px; margin-top:42px; color:#71746c; }
.clarity-philosophy .micro { font-size:8px; letter-spacing:1.7px; }
.clarity-philosophy i { display:block; width:33px; height:1px; background:var(--red); }
.glass-composition { position:absolute; left:55%; top:22%; width:30%; height:60%; max-width:570px; }
.glass-panel { position:absolute; inset:0 0 38px; background:#f9f9f5; overflow:hidden; border:1px solid #ffffff; box-shadow:16px 24px 44px #292b2a13,-1px -1px 1px #fff; isolation:isolate; touch-action:pan-y; }
.glass-image { position:absolute; width:100%; height:100%; object-fit:cover; object-position:center; }
.glass-baseline { position:absolute; inset:0; background:linear-gradient(130deg,#fff4,#f1f1ec99 50%,#fff1); }
#glass-canvas { position:absolute; width:100%; height:100%; inset:0; }
.glass-border { position:absolute; inset:5px; border:1px solid #fff7; pointer-events:none; }
.glass-top,.glass-bottom { position:absolute; left:21px; right:21px; display:flex; align-items:center; justify-content:space-between; z-index:2; pointer-events:none; font-size:7px; color:#585b54; }
.glass-top { top:20px; }
.glass-top>span:last-child { font-size:16px; }
.glass-bottom { bottom:19px; }
.glass-backplate { position:absolute; inset:5% -7% 1% 7%; background:linear-gradient(130deg,#d7d9d077,#c9cbc347); border:1px solid #bbbfb622; transform:rotate(5deg); }
.glass-controls { position:absolute; bottom:-7px; left:0; right:0; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.glass-instruction { font-size:9px; color:var(--muted); letter-spacing:.1px; }
.glass-controls>div { display:flex; gap:6px; flex-shrink:0; }
.clear-button { min-height:44px; font-size:9px; padding-inline:7px; text-decoration:underline; text-underline-offset:4px; }
.reset-button { width:34px; height:44px; display:grid; place-items:center; }
.reset-button .icon { width:15px; height:15px; }
.glass-cursor { position:absolute; left:0; top:0; width:66px; height:66px; margin:-33px 0 0 -33px; border:1px solid #2224; border-radius:50%; opacity:0; pointer-events:none; z-index:3; display:grid; place-items:center; }
.glass-cursor i { position:absolute; width:5px; height:1px; background:#6668; }
.glass-cursor i+i { transform:rotate(90deg); }
.glass-panel.is-hovering .glass-cursor { opacity:1; }

/* 04 / Parametric, but never ornamental UI */
.possibilities-scene { background:var(--paper-bright); }
.possibilities-copy { top:26%; width:44%; }
.possibilities-copy .headline { font-size:clamp(46px,4.9vw,87px); }
.possibilities-copy .scene-description { margin-top:22px; }
.world-tabs { display:flex; gap:32px; margin-top:29px; }
.world-tabs button { display:flex; align-items:baseline; gap:8px; min-height:44px; position:relative; border-bottom:1px solid #c5c6bf; color:#6c6e66; font-size:12px; padding:7px 3px 10px 0; }
.world-tabs small { font:8px var(--mono); color:#8b8e84; }
.world-tabs button[aria-selected="true"] { color:var(--ink); border-color:var(--red); }
.world-tabs button[aria-selected="true"] small { color:var(--red); }
.world-tabs button:hover { color:var(--red); }
.world-panel { margin-top:23px; padding-left:15px; border-left:1px solid var(--red); max-width:370px; }
.world-panel h3 { font-size:13px; line-height:1.75; }
.world-panel p { margin-top:5px; font-size:11px; line-height:1.9; color:var(--muted); white-space:pre-line; }
.sculpture-composition { position:absolute; left:48.5%; width:43%; top:23%; height:58%; max-width:880px; }
#sculpture-canvas { width:100%; height:100%; position:absolute; inset:0; }
.sculpture-fallback { position:absolute; inset:0; display:grid; place-items:center; font-size:320px; font-family:Georgia,serif; font-weight:400; transform:rotate(-25deg); color:#242629; opacity:.85; }
.canvas-ready .sculpture-fallback { display:none; }
.sculpture-guide { position:absolute; inset:6% 3% 11% 8%; border-radius:50%; border:1px solid #1b1c1d0a; }
.sculpture-guide::before { content:""; position:absolute; top:50%; left:-6%; right:-6%; height:1px; background:#1b1c1d09; }
.sculpture-guide::after { content:""; position:absolute; left:50%; top:-7%; bottom:-7%; width:1px; background:#1b1c1d09; }
.sculpture-guide i { position:absolute; width:5px; height:5px; border:1px solid #62686070; border-radius:50%; top:50%; left:-3px; margin-top:-2px; background:var(--paper-bright); }
.sculpture-guide i:nth-child(2) { left:calc(100% - 2px); }
.sculpture-guide i:nth-child(3) { top:0; left:50%; }
.sculpture-guide i:nth-child(4) { top:100%; left:50%; }
.sculpture-caption { position:absolute; left:8%; right:0; bottom:-9px; display:flex; justify-content:space-between; align-items:center; gap:20px; padding-top:14px; border-top:1px solid #1c201a25; }
.sculpture-caption>span:nth-child(2) { font-size:9px; letter-spacing:2px; }
.sculpture-caption .micro { font-size:7px; color:var(--muted); }

/* 05 / Coda */
.start-copy { top:27%; }
.start-copy .button { margin-top:36px; }
.start-symbol { position:absolute; width:39%; right:9%; top:19%; color:#d9dad8; opacity:.095; transform:rotate(0deg) scale(var(--start-scale,1)); }
.start-symbol svg { width:100%; height:auto; }
.start-symbol path { stroke:none; }
.start-axis { position:absolute; height:1px; width:64%; top:51%; left:44%; transform:rotate(-27deg); background:linear-gradient(90deg,transparent,#b6222866,#bd1d27,transparent); transform-origin:center; }
.start-motto { position:absolute; right:10%; bottom:18%; font-size:clamp(35px,4.5vw,80px); line-height:1.17; letter-spacing:.025em; font-weight:300; color:#d5d5cf; }
.start-motto>span { display:block; }
.start-note { position:absolute; right:10%; top:22%; color:#8b8d85; font-size:7px; padding-left:14px; border-left:1px solid #75796d; }

/* 05 · Global controls / real links. The rail floats above a normally
   scrolling page, so it carries the chapter position without pinning anything. */
.chapter-rail { position:fixed; right:calc(var(--gutter) - 18px); top:43%; display:flex; flex-direction:column; z-index:20; gap:0; color:var(--ink); transition:color .4s; }
.chapter-rail[data-tone="dark"] { color:var(--paper); }
.chapter-rail a { position:relative; width:44px; height:38px; display:flex; align-items:center; justify-content:center; }
.chapter-rail span { position:absolute; font:9px var(--mono); opacity:0; transition:opacity .3s; }
.chapter-rail i { display:block; width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.35; transition:opacity .3s; }
.chapter-rail a[aria-current="step"] span { opacity:1; }
.chapter-rail a[aria-current="step"] i { opacity:0; }
.chapter-rail a b { position:absolute; right:35px; white-space:nowrap; font-size:9px; font-weight:400; opacity:0; transform:translateX(5px); transition:opacity .3s,transform .3s; padding:4px 8px; background:var(--ink); color:var(--paper); border:1px solid #ffffff1f; pointer-events:none; }
.chapter-rail[data-tone="dark"] a b { background:var(--paper); color:var(--ink); border-color:var(--line); }
.chapter-rail a:hover b,.chapter-rail a:focus-visible b { opacity:1; transform:none; }

/* Footer / dialogs. The footer continues the coda's darkness to the end of
   the page, so the one deliberate curtain is never undone by a flip back. */
.site-footer { padding:55px var(--gutter) 28px; background:var(--dark); color:var(--paper); position:relative; }
.footer-main { display:flex; align-items:center; gap:50px; }
.footer-main>p { color:#a8a9a2; font-size:12px; letter-spacing:.5px; }
.footer-top { margin-left:auto; display:flex; align-items:center; gap:20px; font-size:11px; min-height:44px; }
.footer-top .icon { width:16px; height:16px; }
.footer-rule { height:1px; background:#ffffff1f; margin-block:35px 21px; }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:8px; color:#8b8d85; }
.footer-bottom>div { display:flex; gap:26px; }
.footer-bottom button { min-height:44px; font-size:9px; font-family:var(--font); }
.footer-bottom button:hover { color:#f37570; }
dialog { border:0; color:var(--ink); background:var(--paper); padding:0; overscroll-behavior:contain; }
dialog::backdrop { background:#15161766; backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); }
dialog[open] { animation:dialog-enter .28s var(--ease); }
@keyframes dialog-enter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px 18px 8px 25px; border-bottom:1px solid var(--line); }
.dialog-heading h2 { font-size:8px; color:var(--muted); }
.icon-button { width:44px; height:44px; display:grid; place-items:center; }
.icon-button .icon { width:17px; height:17px; }
.language-dialog { margin:0; top:calc(var(--header) - 10px); right:var(--gutter); left:auto; width:310px; max-width:calc(100vw - 32px); border:1px solid #24242415; box-shadow:0 20px 90px #17191820; }
.language-options { padding:10px 17px 16px; display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.language-options button { min-height:49px; padding:10px 9px; display:flex; justify-content:space-between; align-items:center; font-size:12px; border-bottom:1px solid transparent; }
.language-options small { font:7px var(--mono); color:var(--muted); }
.language-options button:hover { background:#e9e9e4; }
.language-options button[aria-pressed="true"] { border-color:var(--red); background:#edede6; }
.dialog-close { display:flex; align-items:center; gap:15px; min-height:44px; font-size:10px; }
.dialog-close .icon { width:23px; height:23px; }
.menu-dialog { width:100%; max-width:none; height:100%; max-height:none; margin:0; padding:30px var(--gutter); background:var(--dark); color:var(--paper); }
.menu-top,.menu-bottom { display:flex; align-items:center; justify-content:space-between; }
.menu-top { height:58px; border-bottom:1px solid #ffffff1f; padding-bottom:20px; }
.menu-layout { display:grid; grid-template-columns:1.3fr 1fr; gap:80px; min-height:calc(100% - 118px); align-items:center; padding-block:40px; }
.menu-links { display:flex; flex-direction:column; }
.menu-links a { display:flex; align-items:center; gap:30px; font-size:clamp(29px,4vw,64px); line-height:1.8; transition:color .3s; }
.menu-links a:hover { color:#f37570; }
.menu-links small { font:10px var(--mono); color:#85887e; }
.menu-links .icon { margin-left:auto; width:26px; height:26px; opacity:.5; }
.menu-aside { padding-left:80px; border-left:1px solid #ffffff1f; }
.menu-aside>svg { width:95px; height:105px; margin-bottom:36px; }
.menu-aside>p { white-space:pre-line; font-size:18px; line-height:1.8; color:#bebfb7; }
.menu-aside .text-link { margin-top:25px; }
.menu-bottom { border-top:1px solid #ffffff1f; min-height:60px; color:#a0a399; }
.menu-bottom button { min-height:44px; font-size:10px; }
.product-dialog { width:min(1000px,calc(100vw - 48px)); max-height:calc(100svh - 48px); margin:auto; }
.product-top { display:flex; align-items:center; justify-content:space-between; margin:15px 28px; border-bottom:1px solid var(--line); padding-bottom:10px; }
.product-top .micro { font-size:8px; }
.product-body { text-align:center; padding:32px 45px 46px; }
.product-body>.eyebrow { justify-content:center; margin-bottom:18px; color:var(--muted); font-size:9px; }
.product-body h2 { font-size:clamp(26px,3.1vw,48px); line-height:1.5; }
.product-body>p:not(.eyebrow) { white-space:pre-line; font-size:12px; color:var(--muted); margin-top:18px; line-height:1.9; }
.product-image { width:80%; max-width:750px; margin:10px auto 20px; mix-blend-mode:multiply; }
.dialog-open { overflow:hidden; }
.noscript-notice { padding:20px var(--gutter); background:var(--ink); color:var(--paper); font-size:12px; }
html:not(.js-ready) [data-open],html:not(.js-ready) [data-motion],html:not(.js-ready) .glass-controls,html:not(.js-ready) .world-tabs,html:not(.js-ready) .page-progress { display:none; }
html:not(.js-ready) .world-panel[hidden] { display:block!important; }
html:not(.js-ready) .possibilities-scene { min-height:1000px; }
html:not(.js-ready) #product:target { display:block; position:relative; width:100%; max-width:none; max-height:none; margin:0; }

/* Responsive typesetting: the artwork does not fight for the text column. */
@media (min-width:1800px) {
  .hero-copy { top:30%; }
  .hero-statement { font-size:28px; }
  .hero-tagline { font-size:13px; }
  .hero-description { font-size:13px; }
  .scene-description { font-size:15px; }
  .hero-world { bottom:12%; }
}
@media (max-width:1180px) {
  :root { --gutter:45px; --header:86px; }
  .desktop-nav { gap:24px; }
  .site-header { gap:24px; }
  .brand>span { font-size:15px; letter-spacing:4px; }
  .header-actions { gap:20px; }
  .hero-wordmark { font-size:7.6vw; letter-spacing:.095em; }
  .hero-tagline { font-size:9px; letter-spacing:.38em; }
  .hero-statement { font-size:21px; }
  .hero-world { left:27%; width:92%; bottom:17%; }
  .hero-copy { width:49%; }
  .hero-aside { right:75px; font-size:6px; }
  .hero-footer-note { bottom:15%; }
  .headline { font-size:5.7vw; }
  .glass-composition { left:56%; width:31%; top:25%; height:55%; }
  .glass-instruction { max-width:155px; }
  .glass-controls { bottom:-15px; }
  .scene-copy:not(.hero-copy) { width:47%; }
  .world-tabs { gap:25px; }
  .sculpture-composition { left:48%; top:27%; height:52%; }
  .sculpture-caption>span:nth-child(2) { font-size:8px; letter-spacing:1px; }
  .sculpture-caption { gap:8px; }
  .start-motto { font-size:4.9vw; right:9%; }
}
@media (max-width:960px) {
  :root { --gutter:35px; --header:80px; }
  .desktop-nav { display:none; }
  .header-actions { margin-left:auto; }
  .menu-trigger { display:flex; }
  .hero-copy { top:28%; width:55%; }
  .hero-wordmark { font-size:8.4vw; }
  .hero-world { width:105%; left:24%; bottom:18%; }
  .hero-message { margin-top:26px; }
  .hero-statement { font-size:20px; }
  .hero-aside { right:50px; top:20%; }
  .hero-footer-note { bottom:16%; }
  .hero-coordinate { right:60px; font-size:6px; bottom:14%; }
  .headline { font-size:6.1vw; }
  .scene-copy:not(.hero-copy) { width:50%; }
  .scene-description { font-size:12px; }
  .gate-assembly { width:34%; right:10%; }
  .boundary-note { bottom:19%; }
  .glass-composition { width:32%; left:56%; height:49%; top:27%; }
  .glass-controls { flex-wrap:wrap; bottom:-32px; }
  .glass-controls>div { margin-left:auto; }
  .possibilities-copy .headline { font-size:5.8vw; }
  .sculpture-composition { top:29%; height:43%; width:44%; }
  .sculpture-caption { left:7%; bottom:-24px; }
  .sculpture-caption>span:last-child { display:none; }
  .footer-main { gap:30px; }
  .footer-main>p { font-size:10px; }
  .menu-aside { padding-left:35px; }
  .menu-layout { gap:45px; }
}
@media (max-width:640px) {
  :root { --gutter:24px; --header:72px; }
  .site-header { gap:14px; }
  .brand { gap:9px; }
  .brand-mark { width:27px; height:31px; }
  .brand>span { font-size:12px; letter-spacing:3px; }
  .header-actions { gap:13px; }
  .language-trigger { min-width:33px; font-size:9px; gap:5px; }
  .language-trigger .icon,.header-cta { display:none; }
  .menu-trigger { width:25px; }
  .menu-trigger span { width:23px; }
  .scene { min-height:max(820px,100svh); }
  .scene-index { top:calc(var(--header) + 21px); gap:12px; font-size:7px; letter-spacing:1px; }
  .scene-index i { width:23px; }
  .scene-copy,.scene-copy:not(.hero-copy) { left:var(--gutter); width:calc(100% - var(--gutter)*2 - 15px); max-width:none; }
  .hero-copy { top:21%; }
  .hero-copy .eyebrow { margin-bottom:16px; font-size:8px; }
  .hero-wordmark { font-size:clamp(44px,12vw,75px); letter-spacing:.12em; }
  .hero-tagline { margin-top:13px; font-size:7px; letter-spacing:.37em; }
  .hero-message { margin-top:22px; }
  .hero-statement { font-size:17px; line-height:1.85; letter-spacing:.03em; }
  .hero-description { font-size:9px; margin-top:10px; letter-spacing:.3px; }
  .hero-copy .actions { margin-top:22px; gap:20px; }
  .button { min-height:46px; min-width:146px; padding:12px 17px; font-size:10px; gap:30px; }
  .button .icon { width:16px; height:16px; }
  .text-link { font-size:10px; gap:10px; }
  .hero-world { width:142%; left:-16%; bottom:10%; opacity:1; }
  .hero-art { mask-image:linear-gradient(90deg,transparent,#000 12%,#000 94%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 94%,transparent); }
  .hero-art::after { height:13px; }
  .hero-aside { display:none; }
  .hero-footer-note { display:none; }
  .hero-coordinate { font-size:5px; bottom:8.5%; right:var(--gutter); gap:10px; }
  .hero-coordinate>span:last-child,.hero-coordinate i { display:none; }
  .hero-grid { bottom:60px; }
  .hero-grid::before { top:9%; }
  .headline,.possibilities-copy .headline { font-size:clamp(34px,8.9vw,52px); line-height:1.4; letter-spacing:-.02em; }
  .eyebrow { font-size:8px; letter-spacing:.5px; margin-bottom:20px; }
  .scene-description { font-size:11px; line-height:1.9; margin-top:19px; max-width:320px; }
  .boundary-copy { top:21%; }
  .boundary-copy .headline { font-size:clamp(36px,9.5vw,54px); }
  .boundary-copy .scene-description { max-width:240px; }
  .opening-readout { margin-top:20px; gap:10px; }
  .opening-readout .micro { font-size:7px; }
  .opening-track { width:45px; }
  .gate-assembly { width:42%; height:40%; top:auto; bottom:15%; right:18%; }
  .aperture-floor { inset:73% -10% 0 0; }
  .aperture-label { right:20%; bottom:10%; font-size:6px; }
  .boundary-note { bottom:17%; left:var(--gutter); width:110px; font-size:8px; padding-left:9px; z-index:4; }
  .boundary-word { font-size:25vw; left:13%; bottom:12%; }
  .clarity-copy { top:20%; }
  .clarity-copy .headline { font-size:8.7vw; }
  .clarity-copy .scene-description { font-size:10px; max-width:300px; margin-top:15px; }
  .clarity-philosophy { display:none; }
  .glass-composition { left:29%; width:53%; top:51%; height:36%; }
  .glass-panel { inset:0 0 38px; }
  .glass-controls { bottom:-5px; flex-wrap:nowrap; left:-15%; right:-10%; }
  .glass-instruction { font-size:8px; max-width:122px; }
  .clear-button { font-size:8px; padding-inline:2px; }
  .reset-button { width:29px; }
  .glass-top,.glass-bottom { left:13px; right:13px; font-size:6px; }
  .glass-top { top:10px; }
  .glass-bottom { bottom:12px; }
  .possibilities-copy { top:19%; }
  .possibilities-copy .eyebrow { margin-bottom:17px; }
  .possibilities-copy .scene-description { margin-top:14px; font-size:10px; }
  .world-tabs { margin-top:14px; gap:26px; }
  .world-tabs button { font-size:11px; min-height:39px; padding-bottom:7px; }
  .world-panel { margin-top:15px; max-width:265px; padding-left:11px; }
  .world-panel h3 { font-size:11px; }
  .world-panel p { font-size:9px; line-height:1.8; }
  .sculpture-composition { left:23%; width:70%; height:32%; top:auto; bottom:12%; }
  .sculpture-caption { bottom:-6px; padding-top:8px; left:8%; right:12%; }
  .sculpture-caption>span:nth-child(2) { font-size:6px; letter-spacing:1.6px; }
  .sculpture-caption .micro { font-size:6px; }
  .start-copy { top:23%; }
  .start-copy .headline { font-size:10vw; }
  .start-copy .scene-description { font-size:11px; }
  .start-copy .button { margin-top:26px; }
  .start-symbol { width:58%; top:auto; bottom:10%; right:11%; }
  .start-axis { top:64%; left:5%; width:110%; }
  .start-motto { bottom:15%; right:12%; font-size:8vw; }
  .start-note { top:auto; right:auto; left:var(--gutter); bottom:20%; font-size:5px; width:90px; padding-left:8px; }
  .chapter-rail { right:6px; top:43%; }
  .chapter-rail a { width:30px; height:32px; }
  .chapter-rail span { font-size:7px; }
  .chapter-rail i { width:2px; height:2px; }
  .chapter-rail a b { display:none; }
  .site-footer { padding-top:34px; padding-bottom:16px; }
  .footer-main { flex-wrap:wrap; gap:12px 24px; }
  .footer-main>p { order:3; width:100%; font-size:10px; }
  .footer-top { gap:10px; font-size:9px; }
  .footer-rule { margin-block:25px 8px; }
  .footer-bottom { flex-wrap:wrap; gap:10px; font-size:7px; }
  .footer-tagline { display:none; }
  .footer-bottom>div { gap:16px; }
  .footer-bottom button { font-size:8px; }
  .language-dialog { top:80px; right:16px; }
  .menu-dialog { padding:18px var(--gutter); }
  .menu-top { height:52px; padding-bottom:15px; }
  .menu-layout { display:block; padding-top:40px; min-height:calc(100% - 108px); }
  .menu-links a { font-size:27px; line-height:2.5; gap:20px; }
  .menu-links .icon { width:20px; height:20px; }
  .menu-aside { border:none; padding:35px 0 12px 35px; display:none; }
  .menu-bottom { min-height:56px; font-size:7px; }
  .product-dialog { width:calc(100vw - 24px); max-height:calc(100svh - 24px); }
  .product-top { margin:10px 18px; }
  .product-body { padding:28px 20px 38px; }
  .product-body h2 { font-size:28px; }
  .product-body>.eyebrow { font-size:7px; }
  .product-body>p:not(.eyebrow) { font-size:10px; }
  .product-image { width:100%; margin-block:25px; }
}
/* Short viewports use a proportionally smaller composition, not clipped text. */
@media (min-width:641px) and (max-height:760px) {
  :root { --header:74px; }
  .scene-index { top:calc(var(--header) + 22px); }
  .scene-copy,.hero-copy { top:27%; }
  .hero-copy .eyebrow { margin-bottom:13px; }
  .hero-wordmark { font-size:min(7.1vw,78px); }
  .hero-tagline { margin-top:13px; }
  .hero-message { margin-top:20px; }
  .hero-statement { font-size:20px; line-height:1.65; }
  .hero-description { margin-top:10px; }
  .hero-copy .actions { margin-top:22px; }
  .hero-world { width:78%; left:32%; bottom:14%; }
  .hero-footer-note { bottom:15%; font-size:6px; }
  .headline { font-size:min(5.3vw,66px); line-height:1.3; }
  .eyebrow { margin-bottom:17px; }
  .scene-description { margin-top:19px; font-size:11px; }
  .opening-readout { margin-top:25px; }
  .boundary-note { bottom:16%; }
  .world-tabs { margin-top:16px; }
  .world-panel { margin-top:15px; }
  .possibilities-copy { top:25%; }
  .possibilities-copy .headline { font-size:4.4vw; }
  .possibilities-copy .scene-description { margin-top:15px; }
  .glass-composition { top:24%; height:60%; }
  .start-copy .button { margin-top:24px; }
}
@media (max-width:640px) and (max-height:740px) {
  :root { --header:64px; }
  .scene-index { top:83px; }
  .hero-copy { top:20%; }
  .hero-copy .eyebrow { margin-bottom:10px; }
  .hero-wordmark { font-size:11.4vw; }
  .hero-tagline { margin-top:10px; }
  .hero-message { margin-top:16px; }
  .hero-statement { font-size:15px; line-height:1.7; }
  .hero-description { font-size:8px; margin-top:8px; }
  .hero-copy .actions { margin-top:16px; }
  .hero-world { width:118%; left:-1%; bottom:10%; }
  .hero-coordinate { display:none; }
  .headline,.possibilities-copy .headline { font-size:8vw; }
  .eyebrow { margin-bottom:12px; }
  .scene-description { margin-top:14px; font-size:10px; }
  .gate-assembly { height:34%; bottom:14%; right:16%; }
  .boundary-note { bottom:18%; }
  .clarity-copy { top:20%; }
  .glass-composition { top:51%; height:34%; }
  .possibilities-copy { top:19%; }
  .world-tabs { margin-top:9px; }
  .world-panel { margin-top:10px; }
  .world-panel h3 { font-size:10px; }
  .world-panel p { font-size:8px; }
  .sculpture-composition { height:27%; bottom:12%; left:29%; width:61%; }
  .start-copy .button { margin-top:22px; }
  .start-motto { font-size:7vw; }
  .start-note { display:none; }
}
/* Long Latin translations get their own line length, not a clipped one-line title. */
.lang-latin .headline { font-size:clamp(38px,4.65vw,82px); letter-spacing:-.04em; line-height:1.23; }
.lang-latin .hero-statement { font-size:21px; letter-spacing:-.015em; max-width:520px; }
.lang-latin .hero-description { max-width:390px; }
.lang-latin .eyebrow { letter-spacing:.2px; max-width:95%; }
.lang-latin .scene-description { max-width:370px; }
@media (max-width:960px) { .lang-latin .headline { font-size:5.3vw; } .lang-latin .hero-statement { font-size:18px; } }
@media (max-width:640px) {
  .lang-latin .headline { font-size:8.3vw; max-width:90%; }
  .lang-latin .hero-statement { font-size:16px; max-width:80%; line-height:1.6; }
  .lang-latin .hero-description { max-width:85%; font-size:9px; }
  .lang-latin .scene-description { max-width:92%; font-size:10px; }
  .lang-latin .world-panel { max-width:95%; }
  .lang-latin .world-panel p { font-size:9px; }
  .lang-latin .world-tabs { margin-top:12px; }
  .lang-latin .clarity-copy .headline { font-size:8.6vw; }
  .lang-latin .glass-composition { top:55%; height:31%; }
}
/* Motion-off is a complete reading layout: static canvases, open aperture,
   and no scroll-linked state that would leave the page looking frozen. */
.reduced-motion .hero-art { transform:none!important; }
.reduced-motion .gate-left { transform:translateX(-16px) rotateY(-14deg); }
.reduced-motion .gate-right { transform:translateX(16px) rotateY(14deg); }
.reduced-motion .gate-backlight { opacity:.85; }
.reduced-motion #glass-canvas,.reduced-motion .glass-controls { display:none; }
.reduced-motion .glass-baseline { opacity:.2; }
.reduced-motion .opening-readout { display:none; }
.reduced-motion *, .reduced-motion *::before, .reduced-motion *::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }
@media (prefers-contrast:more) { :root { --muted:#484944; --line:#777; } .scene-index { color:currentColor; } .hero-aside,.hero-footer-note,.sculpture-caption .micro { color:currentColor; } }
@media print {
  .site-header,.chapter-rail,.page-progress,.site-footer,dialog { display:none!important; }
  .scene { min-height:850px; break-after:page; }
}

/* A short portrait phone keeps its sculpture below the text. Landscape screens
   below 520px are switched to full native reading flow by app.js. */
@media (max-width:360px) and (max-height:640px) {
  .sculpture-composition { width:56%; left:36%; height:20%; bottom:13%; }
  .sculpture-caption { bottom:-5px; }
}

html:not(.js-ready) [data-close] { display:none; }
.no-js-return { display:none; }
html:not(.js-ready) .no-js-return { display:inline-flex; padding:15px; text-decoration:underline; text-underline-offset:5px; }