/* AISA / RINNE system — design-polish revision 2026-10-17.
   Type: AISA Display (Tektur, OFL) · AISA Head (NanumSquare Neo, OFL) · AISA Mono (JetBrains Mono, OFL) · AISA Sans (Pretendard, OFL).
   Korean faces are split: a core file with the glyphs this page uses, plus the rest of KS X 1001,
   which the browser only downloads if new copy needs it. */

/* ─── Fonts ─────────────────────────────────────────────── */
@font-face{font-family:AisaSans;src:url('fonts/AisaSans-ext.woff2') format('woff2');font-weight:300 800;font-display:swap;unicode-range:U+AC00-D7A3}
@font-face{font-family:AisaSans;src:url('fonts/AisaSans.woff2') format('woff2');font-weight:300 800;font-display:swap}
@font-face{font-family:AisaDisplay;src:url('fonts/AisaDisplay.woff2') format('woff2');font-weight:400 900;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:AisaHead;src:url('fonts/AisaHead-800-ext.woff2') format('woff2');font-weight:800;font-display:swap;unicode-range:U+AC00-D7A3}
@font-face{font-family:AisaHead;src:url('fonts/AisaHead-800.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:AisaHead;src:url('fonts/AisaHead-900-ext.woff2') format('woff2');font-weight:900;font-display:swap;unicode-range:U+AC00-D7A3}
@font-face{font-family:AisaHead;src:url('fonts/AisaHead-900.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:AisaMono;src:url('fonts/AisaMono.woff2') format('woff2');font-weight:400 700;font-display:swap}

/* ─── Tokens ────────────────────────────────────────────── */
:root{
  --ink-950:#06121b;
  --ink-900:#0a1722;
  --ink-800:#0f2230;
  --ink-700:#16303f;
  --line:#2a4758;
  --line-strong:#4f7385;
  --text:#e6eef2;
  --muted:#93a9b7;
  --dim:#7d98a8;
  --cyan-400:#56dbe8;
  --cyan-200:#a6f3f7;
  --cyan-700:#0f6577;
  --coral:#ff8a7a;
  --paper:#e4ecef;
  --paper-line:#a9bbc5;
  --paper-ink:#11293a;
  --paper-muted:#4a6272;
  --wire:#5f7f90;

  --font-sans:AisaSans,system-ui,sans-serif;
  --font-display:AisaDisplay,AisaHead,AisaSans,sans-serif;
  --font-head:AisaHead,AisaSans,sans-serif;
  --font-mono:AisaMono,AisaSans,ui-monospace,monospace;
  --display-stretch:100%;

  --fs-micro:11px;
  --fs-caption:12px;
  --fs-small:14px;
  --fs-body:16px;
  --fs-lead:20px;
  --fs-h4:26px;
  --fs-h3:36px;
  --fs-h2:clamp(40px,5vw,76px);
  --fs-display:clamp(96px,13vw,236px);

  --track-ko:-.02em;
  --track-micro:.08em;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-inout:cubic-bezier(.65,0,.2,1);
  --gutter:8%;
}

/* ─── Base ──────────────────────────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--ink-950);color:var(--text);font-family:var(--font-sans);font-size:var(--fs-body);line-height:1.65;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
h1,h2,h3{text-wrap:balance}
p,dd{text-wrap:pretty}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,summary:focus-visible,video:focus-visible{outline:2px solid var(--cyan-400);outline-offset:4px}
::selection{background:var(--cyan-400);color:var(--ink-950)}
em{font-style:normal;color:var(--cyan-400)}
.skip{position:fixed;top:-100px;left:20px;padding:15px;background:var(--cyan-400);color:var(--ink-950);z-index:100}
.skip:focus{top:10px}
.micro,.eyebrow,.archive-spec{font-family:var(--font-mono);font-size:var(--fs-micro);line-height:1.5;letter-spacing:var(--track-micro);font-weight:500}
.eyebrow{color:var(--cyan-400);font-weight:600;letter-spacing:.12em;margin:0 0 24px}
.fine{font-size:var(--fs-caption);letter-spacing:0;color:var(--dim)}

/* ─── Header ────────────────────────────────────────────── */
header{position:fixed;inset:0 0 auto;z-index:5;height:89px;padding:0 4%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #68808c55;background:#06121be8;backdrop-filter:blur(18px)}
.brand{font-family:var(--font-display);font-stretch:var(--display-stretch);font-size:30px;line-height:.9;letter-spacing:0;font-weight:800;display:flex;align-items:center;gap:22px}
.brand span{font-family:var(--font-mono);font-stretch:100%;font-size:var(--fs-micro);letter-spacing:.06em;line-height:1.35;font-weight:500;color:var(--muted)}
nav{display:flex;gap:35px;font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:var(--track-micro)}
nav a{position:relative;padding:18px 0}
nav a:hover{color:var(--cyan-400)}
nav a:after{content:'';position:absolute;left:0;right:0;bottom:10px;height:1px;background:var(--cyan-400);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out)}
nav a:hover:after,nav a:focus-visible:after{transform:scaleX(1)}
.header-tools{display:flex;gap:20px;align-items:center;font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:var(--track-micro)}
.replay{background:none;padding:12px 0;letter-spacing:inherit}

/* ─── Hero ──────────────────────────────────────────────── */
.hero{height:920px;min-height:800px;max-height:1250px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 75% 40%,#174451 0,#0f2634 30%,var(--ink-950) 65%)}
.hero-grid{position:absolute;inset:89px 0 0;background-image:linear-gradient(#8ba7b80c 1px,transparent 1px),linear-gradient(90deg,#8ba7b80c 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(90deg,transparent,#000)}
.hero-meta{position:absolute;top:125px;left:4%;right:4%;display:flex;justify-content:space-between;color:var(--dim)}
.hero-type{position:relative;z-index:2;width:100%;padding:200px 0 0 var(--gutter);pointer-events:none}
.hero-title-reveal{position:relative;overflow:visible}
.hero-type h1{font-family:var(--font-display);font-stretch:var(--display-stretch);font-size:var(--fs-display);line-height:.82;letter-spacing:-.01em;font-weight:800;margin:0;color:var(--text);width:75%;position:relative;z-index:0;transform-origin:10% 50%}
.hero-type h1 span{display:block;font-size:.3em;letter-spacing:.42em;font-weight:500;margin:24px 0 0 4px;color:var(--cyan-400)}
.hero-description{max-width:420px;margin-top:52px;pointer-events:auto}
.hero-description h2{font-family:var(--font-head);font-size:var(--fs-h4);line-height:1.45;letter-spacing:-.01em;font-weight:800;margin:0 0 18px}
.hero-description p{font-size:15px;color:var(--muted);line-height:1.85;margin:0 0 28px;max-width:370px}
.action{display:flex;align-items:center;justify-content:space-between;max-width:245px;padding:14px 18px;background:var(--cyan-400);color:var(--ink-950);font-size:var(--fs-small);font-weight:700;clip-path:polygon(0 0,100% 0,100% 75%,94% 100%,0 100%);transition:background .2s,box-shadow .2s}
.action span{font-size:22px;line-height:1}
.action:hover,.action:focus-visible{background:var(--cyan-200);box-shadow:0 0 35px #49dbe82a}
.character-stage{position:absolute;right:0;top:150px;bottom:48px;width:63%;z-index:1;pointer-events:none;transform-origin:60% 60%}
.orbit{position:absolute;width:68%;aspect-ratio:1;left:16%;top:8%;border:1px solid #7bccdd55;border-radius:50%;box-shadow:0 0 0 40px #83b4ca05,0 0 0 80px #83b4ca05}
.orbit:after{content:'';position:absolute;inset:10%;border:1px dashed #6acada33;border-radius:50%;animation:spin 140s linear infinite}
.orbit:before{content:'';position:absolute;inset:-4px;border-radius:50%;background:radial-gradient(circle at 50% 0,var(--cyan-400) 0 3px,#56dbe833 4px 8px,transparent 9px);animation:spin 46s linear infinite}
.character-cross{position:absolute;font-family:var(--font-mono);font-size:26px;line-height:1;color:var(--cyan-400)}
.cross-one{left:22%;top:4%}
.cross-two{right:12%;bottom:12%}
.character-label{position:absolute;bottom:1%;right:6%;display:grid;border-left:2px solid var(--cyan-400);padding-left:14px;color:var(--muted)}
.hero-side{position:absolute;right:25px;top:50%;writing-mode:vertical-rl;color:var(--dim)}
.hero-bottom{position:absolute;bottom:0;left:0;right:0;z-index:3;height:58px;padding:0 4%;display:flex;align-items:center;justify-content:space-between;font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.04em;color:var(--muted);background:var(--ink-950)}
.hero-bottom:before{content:'';position:absolute;top:0;left:4%;right:4%;height:1px;background:#68808c66}
.hero-bottom>span:first-child{font-family:var(--font-sans);font-size:var(--fs-caption);letter-spacing:0;display:flex;align-items:center}
.hero-bottom i{display:inline-block;height:6px;width:6px;border-radius:50%;background:var(--coral);margin-right:10px;box-shadow:0 0 0 0 #ff8a7a66;animation:status 2.4s ease-out infinite}
.hero-bottom a:hover{color:var(--cyan-400)}

/* Model viewport — the supplied front render (black background removed) stands in a lit inspection chamber. */
.model-crop{position:absolute;left:27%;bottom:5%;width:50%;aspect-ratio:5/7;overflow:hidden;border:1px solid #509ab0;background:radial-gradient(ellipse 70% 55% at 50% 40%,#1d5869 0,#11364600 70%),linear-gradient(#0d2a38,#071822 85%);box-shadow:inset 0 0 0 8px #214353,0 0 100px #35bdcf15;clip-path:polygon(0 0,94% 0,100% 6%,100% 100%,6% 100%,0 94%)}
.model-crop .hero-character{position:absolute;left:0;top:5%;width:100%;height:91%;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 0 28px #56dbe81f);transform-origin:50% 100%;animation:breathe 6.5s ease-in-out infinite}
.model-crop:before{content:'';position:absolute;left:12%;right:12%;bottom:2.5%;height:7%;z-index:0;pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,#56dbe84d,#56dbe814 60%,transparent);box-shadow:0 0 0 1px #56dbe81a}
.model-crop:after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,#164a5740,transparent 45%,#164a5740),repeating-linear-gradient(0deg,transparent 0 4px,#59c6df10 4px 5px);box-shadow:inset 0 0 0 8px #214353,inset 0 0 60px #08293999}
.scan-annotation{position:absolute;z-index:3;font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.06em;background:#0a2634e0;color:#9cf0f4;padding:6px 9px;border-left:2px solid var(--cyan-400)}
.scan-a{top:14px;left:14px}
.scan-b{bottom:14px;right:14px}
.model-scan{position:absolute;z-index:3;left:0;right:0;top:0;height:1px;background:#7ff0f5;box-shadow:0 0 18px 5px #5be5ef40;opacity:0;pointer-events:none}

/* ─── 01 Observation ────────────────────────────────────── */
.observation{position:relative;display:grid;grid-template-columns:1fr 1.45fr;gap:6%;align-items:center;min-height:850px;padding:150px var(--gutter) 120px;background:linear-gradient(#06121bd9,#06121bf5),url('img/rinne-room.jpg') center/cover;overflow-x:clip}
.observation-stage{display:contents}
.observation-intro h2,.section-heading h2,.company h2,.team h2,.archive-title h2{font-family:var(--font-head);font-size:var(--fs-h2);letter-spacing:var(--track-ko);line-height:1.22;margin:0 0 35px;font-weight:900}
.observation-intro>p:last-child{max-width:360px;font-size:15px;color:var(--muted)}
.monitor-wrap{border:1px solid var(--line-strong);background:var(--ink-800);box-shadow:20px 25px 0 #010a1280,0 0 90px #0d59654d;transform:perspective(1400px) rotateY(-5deg);transform-origin:50% 50%}
.monitor-heading,.monitor-foot{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;background:var(--ink-700);font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.06em;color:var(--muted)}
.monitor-foot{background:#102837}
.monitor-foot>span:first-child{font-family:var(--font-sans);font-size:var(--fs-caption);letter-spacing:0}
.monitor{padding:12px}
.recording{display:block;width:100%;height:auto;max-height:700px;background:#01070b}
#rinne-intro{aspect-ratio:16/9}
#rinne-reply{aspect-ratio:9/16}
.monitor .recording{box-shadow:0 0 0 1px #56dbe826,0 0 48px #56dbe814}
.monitor details,.archive-media details{font-size:13px;padding:14px;color:#b0c0ca}
.monitor details p,.archive-media details p{margin:10px 0}
summary{cursor:pointer;font-family:var(--font-sans)}

/* ─── 02 System ─────────────────────────────────────────── */
.system{position:relative;isolation:isolate;overflow:hidden;padding:110px var(--gutter) 120px;background:var(--paper);color:var(--paper-ink);background-image:linear-gradient(#2d6e8e0b 1px,transparent 1px),linear-gradient(90deg,#2d6e8e0b 1px,transparent 1px);background-size:30px 30px}
.system .eyebrow,.system em{color:var(--cyan-700)}
.system:before{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;background:var(--ink-900);clip-path:polygon(calc(var(--panel-open,1)*120%) 0,100% 0,100% 100%,calc(var(--panel-open,1)*120% - 15%) 100%)}
.system-wipe{position:absolute;inset:0;z-index:3;pointer-events:none;background:var(--cyan-400);clip-path:polygon(calc(var(--panel-open,1)*120% - 10px) 0,100% 0,100% 100%,calc(var(--panel-open,1)*120% - 15% - 10px) 100%)}
.system:after{content:'SYSTEM / R–001';position:absolute;right:var(--gutter);top:35px;z-index:0;font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.12em;color:var(--paper-muted)}
.section-heading{display:flex;justify-content:space-between;gap:70px;align-items:flex-end;margin-bottom:65px}
.section-heading h2{margin-bottom:0}
.section-heading>p{max-width:390px;font-size:15px}
.section-heading small{display:block;margin-top:18px;color:var(--paper-muted);font-size:var(--fs-caption);line-height:1.7}
.architecture{display:grid;grid-template-columns:1.5fr 1fr;gap:45px;align-items:start}
.system-flow{position:relative;display:block;height:635px;padding:0}
.map-caption,.map-footer{position:absolute;left:0;width:100%;font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.06em;color:var(--paper-muted)}
.map-caption{top:0;border-bottom:1px solid var(--paper-line);padding-bottom:15px}
.map-footer{bottom:0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;border-top:1px solid var(--paper-line);padding-top:15px}
.map-footer span{font-size:inherit}
.module{position:absolute;z-index:2;width:44%;min-height:118px;padding:18px;text-align:left;background:#e4ecef;border:1px solid var(--paper-line);transition:background .22s,color .22s,border-color .22s,box-shadow .22s}
.module>span{display:block;font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.06em;font-weight:600}
.module strong{display:block;margin-top:6px;font-family:var(--font-head);font-size:var(--fs-lead);line-height:1.35;letter-spacing:-.01em;font-weight:800}
.module small{display:block;max-width:88%;margin-top:12px;font-family:var(--font-mono);font-size:var(--fs-micro);line-height:1.4;letter-spacing:.02em;color:var(--paper-muted)}
.module i{position:absolute;right:16px;bottom:16px;width:10px;height:10px;border:1px solid currentColor;opacity:.55;transition:background .22s,opacity .22s}
.node-0{left:0;top:65px}
.node-1{right:0;top:65px;border-style:dashed}
.node-2{left:0;top:265px}
.node-3{right:0;top:265px;border-style:dashed}
.node-4{left:0;top:470px}
.node-5{right:0;top:470px}
.module:hover,.module:focus-visible{border-color:var(--cyan-700);box-shadow:inset 4px 0 var(--cyan-700),8px 8px 0 #153d5014}
.module.active{background:#102f41;color:#e2f7fb;border-color:#102f41;border-style:solid;box-shadow:inset 5px 0 var(--cyan-400),10px 10px 0 #153d5014}
.module.active small{color:#9fc6d2}
.module.active i{background:var(--cyan-400);border-color:var(--cyan-400);opacity:1}
.module-detail{position:sticky;top:100px;min-height:610px;overflow:hidden;border-top:2px solid #173c50;padding-top:15px}
.detail-top{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.06em}
.detail-symbol{height:150px;display:flex;align-items:center;color:var(--cyan-700)}
.detail-symbol svg{width:96px;height:96px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.module-detail h3{font-family:var(--font-head);font-size:var(--fs-h4);letter-spacing:-.01em;line-height:1.42;margin:0 0 28px;max-width:390px;font-weight:800}
dl{display:grid;grid-template-columns:90px 1fr;margin:0;border-top:1px solid var(--paper-line)}
dt,dd{margin:0;padding:15px 0;border-bottom:1px solid var(--paper-line)}
dt{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.06em;font-weight:600;padding-top:17px}
dd{font-size:var(--fs-small)}
.detail-example{display:block;padding:20px 0;border-bottom:1px solid var(--paper-line);font-size:var(--fs-small);color:var(--cyan-700);transition:color .2s,padding-left .3s var(--ease-out)}
.detail-example:hover,.detail-example:focus-visible{color:#064a59;padding-left:12px}
.architecture-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.wire-route{fill:none;stroke:var(--wire);stroke-width:1.3;vector-effect:non-scaling-stroke;transition:stroke .3s,stroke-width .3s}
.optional-wire{stroke-dasharray:6 5}
.js .wire-route{stroke-dasharray:var(--len,100);stroke-dashoffset:calc((1 - var(--draw,1))*var(--len,100))}
.js .optional-wire.wire-complete{stroke-dasharray:6 5;stroke-dashoffset:0}
.wire-route.is-hot{stroke:var(--cyan-700);stroke-width:1.8}
.wire-signal{fill:none;stroke:var(--cyan-400);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:6 94;opacity:0;transition:opacity .3s;animation:signal 1.9s linear infinite}
.wire-signal.is-hot{opacity:1}
.wires-mobile{display:none}

/* ─── 03 Archive ────────────────────────────────────────── */
.archive{position:relative;overflow:hidden;display:grid;grid-template-columns:1.1fr .75fr;gap:13%;padding:125px 14% 120px var(--gutter);background:var(--ink-800)}
.archive:before{content:'R–001';position:absolute;bottom:-30px;left:5%;font-family:var(--font-display);font-stretch:var(--display-stretch);font-size:230px;font-weight:900;letter-spacing:0;color:#c4e1e507;pointer-events:none}
.archive-title{padding-top:30px}
.archive-title h2{font-size:clamp(46px,5.6vw,84px)}
.archive-title>p:not(.eyebrow):not(.fine){max-width:370px;color:var(--muted);font-size:15px}
.archive-spec{display:grid;margin:50px 0 25px;border-top:1px solid #325064;max-width:380px}
.archive-spec span{padding:10px 0;border-bottom:1px solid #325064;color:var(--muted)}
.archive-title .fine{max-width:360px;line-height:1.8}
.archive-media{position:relative;width:100%;max-width:388px;justify-self:end;align-self:start;background:#07131c;border:1px solid var(--line-strong);padding:10px}
.archive-media .recording{max-height:650px;object-fit:contain}
.tape-label{display:flex;justify-content:space-between;padding:6px 0 14px;color:var(--muted)}
.tape-label span{color:var(--cyan-400)}

/* ─── 04 Company ────────────────────────────────────────── */
.company{padding:120px var(--gutter);background:var(--ink-900)}
.company-head{max-width:1000px}
.company-head>p:last-child{max-width:600px;font-size:var(--fs-body);color:var(--muted);margin-bottom:60px}
.application-list{border-top:1px solid #537081}
.application-list>div{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,1.1fr);gap:35px;align-items:center;padding:28px 0;border-bottom:1px solid #3a5263;transition:background .25s,padding .3s var(--ease-out)}
.application-list>div:hover{background:#8bcede06;padding-left:15px}
.application-list span{font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:.06em;color:var(--cyan-400)}
.application-list h3{font-family:var(--font-head);font-size:24px;font-weight:800;margin:0;letter-spacing:-.01em}
.application-list p{font-size:var(--fs-small);color:var(--muted);margin:0}
.company .fine{margin-top:14px}
.roadmap{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;margin-top:90px}
.roadmap>div{position:relative;padding-top:22px}
.roadmap>div:before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:#486473;transform-origin:left}
.roadmap>div:first-child:before{background:var(--cyan-400)}
.roadmap .micro{color:var(--muted)}
.roadmap>div:first-child .micro:before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--coral);margin-right:8px;vertical-align:1px}
.roadmap h3{font-family:var(--font-head);font-size:22px;font-weight:800;letter-spacing:-.01em;margin:14px 0 10px}
.roadmap p{font-size:var(--fs-small);color:var(--muted);margin:0}

/* ─── 05 Team ───────────────────────────────────────────── */
.team{display:grid;grid-template-columns:1fr 1fr;gap:12%;padding:110px var(--gutter);background:var(--paper);color:var(--paper-ink);clip-path:polygon(0 0,96% 0,100% 45px,100% 100%,0 100%)}
.team .eyebrow,.team em{color:var(--cyan-700)}
.team h2{font-size:clamp(40px,4.5vw,68px)}
.team-info{padding-top:35px}
.person{display:grid;grid-template-columns:1fr auto;border-top:1px solid var(--paper-line);padding:22px 0}
.person strong{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:700;letter-spacing:0;line-height:1.2}
.person span{font-family:var(--font-mono);font-size:var(--fs-caption);letter-spacing:.08em;padding-top:12px}
.person p{grid-column:1/-1;margin:6px 0 0;font-size:var(--fs-small);color:var(--paper-muted)}
.contact{border-top:1px solid var(--paper-line);padding-top:32px;margin-top:30px}
.contact .micro{color:var(--paper-muted)}
.contact p{font-family:var(--font-head);font-size:24px;line-height:1.5;letter-spacing:-.01em;font-weight:800;margin:14px 0}
.contact>span:last-child{font-size:var(--fs-small);color:var(--paper-muted);display:inline-flex;align-items:center}
.contact>span:last-child:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--coral);margin-right:9px}
.contact a{font-family:var(--font-mono);font-size:var(--fs-body);letter-spacing:.02em;color:var(--paper-ink);border-bottom:1px solid var(--cyan-700);padding-bottom:2px;transition:color .2s,border-color .2s}
.contact a:hover,.contact a:focus-visible{color:var(--cyan-700);border-color:var(--paper-ink)}

/* ─── Footer ────────────────────────────────────────────── */
footer{padding:45px 4%;display:flex;align-items:center;justify-content:space-between;gap:25px}
footer .brand{font-size:26px}
footer>span,footer>a:last-child{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:var(--track-micro)}
footer>span{color:var(--dim)}
footer>a:last-child:hover{color:var(--cyan-400)}

/* ─── Boot ──────────────────────────────────────────────── */
.boot[hidden]{display:none}
.boot{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;padding:35px 5%;background:#06121bf5;backdrop-filter:blur(15px)}
.boot:focus{outline:none}
.boot-out{pointer-events:none}
.boot-id{display:flex;justify-content:space-between;padding-bottom:20px;border-bottom:1px solid #3b6276;font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.14em}
.boot-id span{color:var(--cyan-400)}
.boot-body{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center;flex:1;width:100%;max-width:1100px;margin:auto}
.boot-model{position:relative;overflow:hidden;aspect-ratio:5/7;min-height:280px;max-height:65vh;border:1px solid #305264;background:repeating-linear-gradient(0deg,transparent 0 3px,#2c759d0d 3px 4px);transform-origin:0 0}
.boot-model img{position:absolute;left:0;top:5%;width:100%;height:91%;object-fit:contain;object-position:50% 100%;filter:grayscale(.7) contrast(1.08);opacity:.75}
.boot-model:before,.boot-model:after{content:'+';position:absolute;z-index:2;font-family:var(--font-mono);font-size:30px;line-height:1;color:var(--cyan-400);padding:6px}
.boot-model:after{right:0;bottom:0}
.boot-model i{position:absolute;left:0;top:0;width:100%;height:2px;background:#62f5ff;box-shadow:0 0 30px 8px #40e7ef55;animation:scan 2.7s ease-in-out both}
.boot-text>.micro{display:block;color:#65c9d8}
.boot-text strong{display:block;margin:25px 0;font-family:var(--font-display);font-size:clamp(52px,7vw,112px);font-weight:800;line-height:.95;letter-spacing:-.01em}
.boot-text strong span{color:var(--coral);animation:blink 1s steps(1) infinite}
.boot-text p{font-size:var(--fs-small);color:var(--muted)}
.boot-stages{display:grid;gap:6px;margin-top:25px;font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.06em;color:#6b8899}
.boot-stages span{transition:color .3s}
.boot-stages span:before{content:'· '}
.boot-stages span.active{color:var(--cyan-400)}
.boot-stages span.active:before{content:'+ '}
.boot-progress{position:relative;height:2px;margin:35px 0 12px;background:#284859}
.boot-progress:before,.boot-progress:after{content:'';position:absolute;top:-3px;width:1px;height:8px;background:#4f7385}
.boot-progress:before{left:30%}
.boot-progress:after{left:64%}
.boot-progress i{display:block;height:2px;background:var(--cyan-400);animation:progress 3.2s linear both}
.boot-skip{position:absolute;right:5%;bottom:35px;padding:12px 24px;background:var(--ink-700);font-size:var(--fs-caption);transition:background .2s}
.boot-skip:hover{background:#1f4256}

/* ─── Motion primitives ─────────────────────────────────── */
@keyframes scan{0%{top:0}100%{top:100%}}
@keyframes progress{from{width:0}to{width:100%}}
@keyframes spin{to{rotate:360deg}}
@keyframes breathe{0%,100%{translate:0 0;scale:1}50%{translate:0 -.35%;scale:1.006}}
@keyframes status{0%{box-shadow:0 0 0 0 #ff8a7a66}70%,100%{box-shadow:0 0 0 9px #ff8a7a00}}
@keyframes blink{50%{opacity:0}}
@keyframes signal{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes tape-scan{0%{top:0;opacity:1}85%{opacity:1}100%{top:100%;opacity:0}}

/* One-shot entrances (classes added by script, so script-free pages stay fully visible). */
.js .reveal{opacity:0;translate:0 28px;transition:opacity .9s var(--ease-out),translate .9s var(--ease-out),background .25s,padding .3s var(--ease-out);transition-delay:calc(var(--i,0)*90ms),calc(var(--i,0)*90ms),0s,0s}
.js .reveal.is-in{opacity:1;translate:0 0}
.js .roadmap>div.reveal:before{transform:scaleX(0);transition:transform 1.1s var(--ease-out) calc(var(--i,0)*120ms + 150ms)}
.js .roadmap>div.reveal.is-in:before{transform:scaleX(1)}
.js .archive-media.reveal{translate:none;opacity:1;clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ease-inout)}
.js .archive-media.reveal.is-in{clip-path:inset(0 0 0 0)}
.archive-media:after{content:'';position:absolute;left:-1px;right:-1px;top:0;height:2px;margin-top:-3px;background:var(--cyan-400);box-shadow:0 0 18px 4px #56dbe855;opacity:0;pointer-events:none}
.js .archive-media.reveal.is-in:after{animation:tape-scan 1.1s var(--ease-inout) both}

/* Scroll-director layers. */
.hero-title-reveal h1,.character-stage,.hero-grid,.orbit,.monitor-wrap,.observation-intro{will-change:transform}
.model-crop{will-change:clip-path,filter}
.boot-model{will-change:translate,scale}
.js .system-flow .module{opacity:calc(.15 + var(--node-open,1)*.85);transform:translate3d(0,calc((1 - var(--node-open,1))*36px),0);clip-path:inset(0 calc((1 - var(--node-open,1))*100%) 0 0)}

/* Desktop recording scene: sticky monitor approach. */
@media(min-width:901px) and (prefers-reduced-motion:no-preference){
  .observation{display:block;min-height:175vh;padding:0 var(--gutter)}
  .observation-stage{display:block;position:sticky;top:0;height:100vh;min-height:600px;overflow:visible}
  .observation-intro{position:absolute;left:0;top:29%;width:32%;z-index:2}
  .observation-intro h2{font-size:clamp(44px,4.3vw,72px)}
  .monitor-wrap{position:absolute;left:50%;top:16%;width:84%;max-width:calc(60vh * 16 / 9 + 48px);transition:none}
  .monitor .recording{max-height:none;height:auto}
  .monitor details{max-height:100px;overflow:auto}
  .observation .monitor-wrap:before{content:'';position:absolute;inset:-12px;border:1px solid #6eafc22b;pointer-events:none}
  .observation .monitor-wrap:after{content:'RECORDED / R–001';position:absolute;right:0;bottom:-32px;font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.14em;color:var(--dim)}
}
/* Script-free desktop keeps the native recording in normal flow. */
@media(min-width:901px){
  html:not(.js) .observation{display:grid;grid-template-columns:1fr 1.45fr;gap:6%;min-height:0;padding:110px var(--gutter);overflow:visible}
  html:not(.js) .observation-stage{display:contents}
  html:not(.js) .observation-intro{position:static;width:auto;opacity:1;transform:none}
  html:not(.js) .monitor-wrap{position:static;width:auto;max-width:none;transform:none;left:auto;top:auto}
  html:not(.js) .monitor details{max-height:none;overflow:visible}
}

/* ─── Breakpoints ───────────────────────────────────────── */
@media(min-width:1800px){
  :root{--gutter:max(8%,calc((100vw - 2100px)/2))}
  .hero{height:1080px}
  .hero-type{padding-top:250px}
  .hero-description{max-width:480px;margin-top:72px}
  .hero-description h2{font-size:31px}
  .hero-description p{font-size:17px;max-width:430px}
  .model-crop{max-width:550px;left:29%;bottom:7%}
  .archive{padding-right:var(--gutter)}
}
@media(max-width:1050px){
  :root{--gutter:6%}
  .brand span{display:none}
  .hero{height:850px;min-height:0}
  .hero-type{padding-left:5%;padding-top:210px}
  .hero-type h1{font-size:13.5vw}
  .hero-description{max-width:330px}
  .hero-description h2{font-size:23px}
  .hero-description p{max-width:300px}
  .character-stage{width:65%;right:-7%;top:230px;bottom:70px}
  .model-crop{left:29%;width:58%;bottom:5%}
  .character-label{right:13%}
  .hero-side{display:none}
  .observation{padding:100px var(--gutter);grid-template-columns:1fr 1.3fr;min-height:0}
  .observation-intro h2{font-size:43px}
  .system,.company,.team{padding:90px var(--gutter)}
  .section-heading{gap:40px}
  .section-heading h2{font-size:56px}
  .section-heading>p{max-width:300px}
  .architecture{gap:30px;grid-template-columns:1.35fr 1fr}
  .module{padding:14px;min-height:125px}
  .module strong{font-size:17px}
  .module-detail h3{font-size:22px}
  .archive{padding:90px var(--gutter);gap:8%;grid-template-columns:1fr .8fr}
  .archive-title h2{font-size:54px}
  .team{gap:7%}
  .team h2{font-size:48px}
  .roadmap{gap:25px}
}
@media(max-width:1050px) and (min-width:701px){
  .system-flow{height:650px}
}
@media(max-width:900px){
  .observation-stage{display:contents}
  .system:before{clip-path:inset(calc(var(--panel-open,1)*102%) 0 0 0)}
  .system-wipe{clip-path:inset(calc(var(--panel-open,1)*102% - 4px) 0 0 0)}
  .system:after{right:6%;top:22px}
  .hero-title-reveal h1{width:100%}
}
@media(max-width:700px){
  html{scroll-padding-top:80px}
  header{height:73px;padding:0 6%;backdrop-filter:blur(12px)}
  .brand{font-size:26px}
  nav{gap:14px;letter-spacing:.02em}
  .header-tools{gap:14px}
  .replay{font-size:20px;letter-spacing:0}
  .replay span{display:none}
  .hero{height:1060px}
  .hero-grid{top:73px}
  .hero-meta{top:100px;left:6%;right:6%}
  .hero-type{padding:145px 6% 0}
  .hero-type>.eyebrow{margin-bottom:22px}
  .hero-type h1{font-size:24vw;width:100%}
  .hero-type h1 span{margin-top:14px}
  .hero-description{position:relative;z-index:4;max-width:100%;margin-top:455px}
  .hero-description h2{font-size:24px;margin-bottom:14px}
  .hero-description p{max-width:390px;font-size:var(--fs-small);line-height:1.8}
  .action{max-width:230px;padding:12px 16px}
  .character-stage{width:108%;right:-12%;top:290px;height:450px;bottom:auto}
  .orbit{width:65%;left:17%;top:8%}
  .cross-one{left:18%;top:6%}
  .cross-two{right:19%;bottom:10%}
  .model-crop{width:66%;left:14%;bottom:0;max-height:450px}
  .character-label{right:20%;bottom:0;padding:4px 9px;background:#06121bcc}
  .scan-a{left:8px;top:8px}
  .scan-b{right:8px;bottom:8px}
  .scan-annotation{padding:4px 7px;letter-spacing:.02em}
  .scan-b{display:none}
  .hero-bottom{height:48px;padding:0 6%}
  .hero-bottom:before{left:6%;right:6%}
  .hero-bottom>.micro{display:none}
  .observation{display:block;padding:75px var(--gutter)}
  .observation-intro h2{font-size:42px}
  .observation-intro>p:last-child{max-width:none;margin-bottom:35px;font-size:var(--fs-small)}
  .monitor-wrap{transform:none;box-shadow:9px 12px 0 #010a1280}
  .monitor{padding:6px}
  .monitor-heading,.monitor-foot{padding:10px;flex-wrap:wrap;gap:4px 10px}
  .system,.company,.team{padding:75px var(--gutter)}
  .section-heading{display:block;margin-bottom:35px}
  .section-heading h2{font-size:48px}
  .section-heading>p{max-width:none;font-size:var(--fs-small);margin-top:25px}
  .architecture{display:block}
  .system-flow{height:660px}
  .module{min-height:140px;padding:13px}
  .module>span{letter-spacing:.02em;line-height:1.4}
  .module strong{font-size:17px}
  .module small{margin-top:9px;max-width:100%;letter-spacing:0}
  .module i{display:none}
  .node-0,.node-1{top:45px}
  .node-2,.node-3{top:250px}
  .node-4,.node-5{top:455px}
  .map-footer{letter-spacing:0}
  .wires-desktop{display:none}
  .wires-mobile{display:block}
  .module-detail{position:relative;top:auto;min-height:0;margin-top:40px}
  .detail-symbol{height:120px}
  .detail-symbol svg{width:76px;height:76px}
  .module-detail h3{font-size:24px}
  .archive{display:block;padding:75px var(--gutter)}
  .archive-title{padding:0}
  .archive-title h2{font-size:46px}
  .archive-spec{margin-top:30px;max-width:none}
  .archive-title>p:not(.eyebrow):not(.fine),.archive-title .fine{max-width:none}
  .archive-media{max-width:380px;margin:35px auto 0}
  .archive-media .recording{max-height:610px}
  .company h2{font-size:40px}
  .company-head>p:last-child{font-size:var(--fs-small);margin-bottom:35px}
  .application-list>div{grid-template-columns:32px 1fr;gap:6px 10px;padding:20px 0}
  .application-list h3{font-size:20px}
  .application-list p{grid-column:2;font-size:13px}
  .roadmap{grid-template-columns:1fr;gap:30px;margin-top:50px}
  .team{display:block;clip-path:polygon(0 0,90% 0,100% 30px,100% 100%,0 100%)}
  .team h2{font-size:42px}
  .team-info{padding-top:20px}
  .person strong{font-size:30px}
  .contact p{font-size:21px}
  footer{padding:35px 6%;flex-wrap:wrap}
  footer>span{order:3;width:100%}
  .boot{padding:25px 6%}
  .boot-id{letter-spacing:.04em}
  .boot-body{grid-template-columns:1.15fr 1fr;gap:20px}
  .boot-model{min-height:0;max-height:none}
  .boot-text strong{font-size:31px;margin:18px 0}
  .boot-text>.micro{letter-spacing:.02em}
  .boot-text p{font-size:var(--fs-caption)}
  .boot-stages{letter-spacing:0;gap:7px}
  .boot-progress{margin-top:25px}
  .boot-skip{right:6%;bottom:25px}
}
@media(max-width:360px){
  nav{gap:10px;letter-spacing:0}
  .replay{display:none}
  .hero-description h2{font-size:21px}
  .module{padding:11px}
  .module strong{font-size:15px}
  .company h2{font-size:36px}
  .boot-text strong{font-size:28px}
  .model-crop{width:65%;left:13%}
}

/* ─── Reduced motion: every scene resolves to its readable final state. ─── */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
  .boot{display:none!important}
  .system:before,.system-wipe,.model-scan,.wire-signal{display:none}
  .hero-title-reveal,.hero-title-reveal h1,.hero-grid,.character-stage,.orbit,.model-crop,.monitor-wrap,.observation-intro,.hero-description,.hero-bottom,.character-label{transform:none!important;translate:none!important;clip-path:none!important;filter:none!important;opacity:1!important}
  .model-crop{clip-path:polygon(0 0,94% 0,100% 6%,100% 100%,6% 100%,0 94%)!important}
  .js .system-flow .module{opacity:1!important;transform:none!important;clip-path:none!important}
  .wire-route{stroke-dashoffset:0!important}
  .optional-wire,.js .optional-wire{stroke-dasharray:6 5}
  .js .reveal,.js .archive-media.reveal{opacity:1!important;translate:none!important;clip-path:none!important}
  .js .roadmap>div.reveal:before{transform:none!important}
}
.system-flow:not(.wires-ready) .wire-signal{opacity:0}