@layer reset, tokens, base, layout, components, experience, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { min-width: 320px; overflow-x: clip; scroll-behavior: auto; scroll-padding-top: 4.5rem; }
  body { overflow-x: clip; }
  body, h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
  ol, ul { padding: 0; list-style: none; }
  img { display: block; max-width: 100%; }
  button, input { font: inherit; }
  [hidden] { display: none !important; }
}

@layer components {
  .sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
  body[data-page="home"], body[data-page="systems"] { color:var(--dark-ink); background:var(--dark); }
  body[data-page="home"] { height:100dvh; overflow:hidden; }
  body[data-page="systems"] { height:100dvh; overflow:hidden; }
  body[data-page="home"] .site-footer, body[data-page="systems"] .site-footer { display:none; }
  body[data-page="home"] main { height:calc(100dvh - 6.5rem); }
  body[data-page="systems"] main { height:calc(100dvh - 6.5rem); }
  .brand-surface { --surface-x:68%; --surface-y:38%; --surface-open:0; position:relative; height:100%; overflow:hidden; isolation:isolate; background:#ddd8cc; color:#171615; }
  .surface-hit { position:absolute; inset:0; z-index:4; width:100%; height:100%; border:0; background:transparent; cursor:pointer; }
  .surface-hit:focus-visible { outline:2px solid var(--signal); outline-offset:-.5rem; }
  .material-field { position:absolute; inset:0; z-index:-1; overflow:hidden; opacity:calc(1 - var(--surface-open) * .87); background:radial-gradient(circle at var(--surface-x) var(--surface-y),rgba(255,255,255,.78) 0,rgba(255,255,255,.19) 16%,transparent 42%),linear-gradient(118deg,#b9b3a6 0%,#eee9de 35%,#d4cec0 69%,#aaa397 100%); transition:opacity var(--motion-depth),background-position var(--motion-resolve); }
  .material-grain { position:absolute; inset:-30%; opacity:.34; 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='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); mix-blend-mode:multiply; transform:rotate(4deg); }
  .material-pressure { position:absolute; width:60vmax; aspect-ratio:1; left:var(--surface-x); top:var(--surface-y); border-radius:50%; background:radial-gradient(circle,rgba(72,63,52,.21),rgba(255,255,255,.13) 32%,transparent 68%); filter:blur(1.5rem); transform:translate(-50%,-50%); transition:left var(--motion-resolve),top var(--motion-resolve),opacity var(--motion-depth); }
  .material-seam { position:absolute; left:50%; top:-8%; width:1px; height:116%; background:linear-gradient(transparent,rgba(40,36,31,.24) 20%,rgba(255,255,255,.6) 50%,rgba(40,36,31,.2) 80%,transparent); box-shadow:calc(var(--surface-open) * -28vw) 0 14vw rgba(0,0,0,.82),calc(var(--surface-open) * 28vw) 0 14vw rgba(0,0,0,.82); transform:scaleY(calc(.06 + var(--surface-open) * .94)); transform-origin:center; transition:transform var(--motion-depth),box-shadow var(--motion-depth); }
  .surface-monogram { position:absolute; left:50%; top:50%; z-index:0; width:min(51vw,43rem); aspect-ratio:1; opacity:calc(.3 - var(--surface-open) * .22); filter:grayscale(1) contrast(.55) drop-shadow(-2px -2px 1px rgba(255,255,255,.72)) drop-shadow(3px 4px 3px rgba(52,45,37,.24)); transform:translate(-50%,-50%) scale(calc(.94 + var(--surface-open) * .14)); transition:opacity var(--motion-depth),transform var(--motion-depth); }
  .surface-monogram .brand-symbol { width:100%; }
  .surface-monogram .brand-art-reverse { display:none!important; }
  .surface-copy { position:absolute; left:var(--gutter); bottom:clamp(6.5rem,13vh,9.5rem); z-index:2; width:min(76rem,84vw); opacity:clamp(.12,calc(1 - var(--surface-open) * 1.22),1); transform:translateY(calc(var(--surface-open) * -2.5rem)); transition:opacity var(--motion-depth),transform var(--motion-depth); }
  .surface-copy .meta { color:#59544d; }
  .surface-copy h1 { max-width:9ch; margin-top:1.25rem; font:400 clamp(4.6rem,10.8vw,11.5rem)/.8 var(--serif); letter-spacing:-.075em; text-wrap:balance; }
  .surface-reveal { position:absolute; inset:0; z-index:-2; color:#d9d4c9; background:#0b0b0c; clip-path:inset(calc((1 - var(--surface-open)) * 49.75%) 0); transition:clip-path var(--motion-depth); }
  .surface-reveal::before { content:""; position:absolute; inset:0; opacity:.2; background:linear-gradient(90deg,transparent 49.9%,var(--signal) 50%,transparent 50.1%),repeating-linear-gradient(90deg,transparent 0 8.2vw,rgba(255,255,255,.08) 8.2vw calc(8.2vw + 1px)); }
  .surface-reveal ol { position:absolute; inset:16% 8%; }
  .surface-reveal li { position:absolute; top:36%; display:grid; width:clamp(3.5rem,6vw,6rem); height:2.25rem; place-items:center; border-top:1px solid #817b70; border-bottom:1px solid #3c3934; font:500 .6rem/1 var(--mono); opacity:clamp(0,calc((var(--surface-open) - .34) * 3),1); transform:translateY(calc((1 - var(--surface-open)) * 2rem)); }
  .surface-reveal li:nth-child(1) { left:8%; }
  .surface-reveal li:nth-child(2) { left:21.5%; }
  .surface-reveal li:nth-child(3) { left:35%; }
  .surface-reveal li:nth-child(4) { left:48.5%; }
  .surface-reveal li:nth-child(5) { left:62%; }
  .surface-reveal li:nth-child(6) { left:75.5%; }
  .surface-reveal li:nth-child(7) { left:89%; }
  .surface-reveal li:nth-child(even) { top:58%; }
  .surface-reveal li i { position:absolute; left:100%; width:10vw; height:1px; background:#494640; }
  .surface-operation { position:absolute; left:8%; right:8%; bottom:10%; display:grid; grid-template-columns:auto 1fr auto 1fr auto; gap:1rem; align-items:center; color:#817d74; font:500 .58rem/1 var(--mono); letter-spacing:.07em; text-transform:uppercase; }
  .surface-operation > * { opacity:clamp(0,calc((var(--surface-open) - .55) * 3.5),1); transform:translateY(calc((1 - var(--surface-open)) * .6rem)); }
  .surface-operation > :nth-child(3),.surface-operation > :nth-child(4) { opacity:clamp(0,calc((var(--surface-open) - .65) * 4),1); }
  .surface-operation > :nth-child(5) { opacity:clamp(0,calc((var(--surface-open) - .75) * 5),1); }
  .surface-operation i { height:1px; background:linear-gradient(90deg,#504c45,var(--signal)); }
  .surface-threshold { position:absolute; left:var(--gutter); right:var(--gutter); bottom:1.25rem; z-index:5; display:flex; align-items:center; justify-content:space-between; border-top:1px solid rgba(38,35,31,.48); pointer-events:none; }
  .surface-threshold .surface-scroll,.surface-threshold a { display:flex; min-height:4.5rem; align-items:center; gap:1.25rem; color:inherit; font:500 .7rem/1 var(--mono); letter-spacing:.065em; text-transform:uppercase; }
  .surface-scroll { opacity:clamp(0,calc(1 - var(--surface-open) * 3),1); }
  .surface-scroll i { position:relative; width:2.5rem; height:1px; background:currentColor; }
  .brand-surface:not([data-surface-open="true"]) .surface-scroll i { transform-origin:left; animation:surface-cue 1.8s cubic-bezier(.16,1,.3,1) infinite; }
  .surface-scroll i::after { content:""; position:absolute; right:0; top:-.22rem; width:.45rem; height:.45rem; border-right:1px solid; border-bottom:1px solid; transform:rotate(45deg); }
  .surface-threshold a { opacity:clamp(0,calc((var(--surface-open) - .72) * 4),1); transform:translateX(calc((1 - var(--surface-open)) * 1.5rem)); pointer-events:none; }
  .brand-surface[data-surface-open="true"] { color:var(--dark-ink); }
  .brand-surface[data-surface-open="true"] .surface-scroll { opacity:1; color:var(--dark-muted); }
  .brand-surface[data-surface-open="true"] .surface-scroll i { background:var(--signal); }
  @keyframes surface-cue { 0%,100% { opacity:.4; transform:scaleX(.55); } 48% { opacity:1; transform:scaleX(1); } }
  .brand-surface[data-surface-open="true"] .surface-threshold a { pointer-events:auto; }
  .operating-environment { --selected-x:17%; --selected-y:25%; position:relative; display:grid; grid-template-rows:auto minmax(0,1fr) auto auto; gap:clamp(.75rem,1.4vh,1.35rem); height:100%; padding:clamp(1.1rem,2.2vh,2rem) var(--gutter) clamp(.8rem,1.8vh,1.5rem); overflow:hidden; color:var(--dark-ink); background:radial-gradient(circle at var(--selected-x) var(--selected-y),rgba(167,71,45,.13),transparent 26%),var(--dark); isolation:isolate; }
  .operating-environment::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.16; background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px); background-size:clamp(3rem,5vw,6rem) clamp(3rem,5vw,6rem); mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 78%,transparent); }
  .environment-intro { display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:end; }
  .environment-intro .meta { color:var(--dark-muted); }
  .environment-intro h1 { margin-top:.45rem; font:400 clamp(2.25rem,4.2vw,5.25rem)/.88 var(--serif); letter-spacing:-.055em; }
  .environment-intro > p { padding-bottom:.3rem; color:var(--dark-muted); font:500 .7rem/1.4 var(--mono); letter-spacing:.07em; text-transform:uppercase; }
  .environment-shell { display:grid; grid-template-columns:minmax(0,1fr) clamp(18rem,23vw,25rem); gap:clamp(1.25rem,2.5vw,3rem); min-height:0; }
  .topology { position:relative; min-height:0; overflow:hidden; border:1px solid #343331; background:linear-gradient(135deg,rgba(255,255,255,.022),transparent 45%); }
  .topology::before,.topology::after { content:""; position:absolute; z-index:0; pointer-events:none; }
  .topology::before { left:var(--selected-x); top:0; width:1px; height:100%; background:linear-gradient(transparent,rgba(167,71,45,.5),transparent); transition:left var(--motion-resolve); }
  .topology::after { left:0; top:var(--selected-y); width:100%; height:1px; background:linear-gradient(90deg,transparent,rgba(167,71,45,.5),transparent); transition:top var(--motion-resolve); }
  .topology-lines { position:absolute; inset:0; z-index:1; width:100%; height:100%; overflow:visible; }
  .topology-lines line { stroke:#4e4c48; stroke-width:.14; vector-effect:non-scaling-stroke; opacity:.42; transition:stroke var(--motion-snap),opacity var(--motion-snap),stroke-width var(--motion-snap); }
  .topology-lines line[data-active] { stroke:var(--signal); stroke-width:.24; opacity:.94; }
  .topology-lines line[data-traced] { stroke-dasharray:1.4 1.1; opacity:.72; }
  .topology-nodes { position:absolute; inset:0; z-index:3; }
  .topology-nodes li { position:absolute; left:var(--node-x); top:var(--node-y); transform:translate(-50%,-50%); }
  .topology-nodes li:nth-child(1) { --node-x:17%; --node-y:25%; }
  .topology-nodes li:nth-child(2) { --node-x:39%; --node-y:17%; }
  .topology-nodes li:nth-child(3) { --node-x:68%; --node-y:24%; }
  .topology-nodes li:nth-child(4) { --node-x:50%; --node-y:49%; }
  .topology-nodes li:nth-child(5) { --node-x:20%; --node-y:72%; }
  .topology-nodes li:nth-child(6) { --node-x:73%; --node-y:69%; }
  .topology-nodes li:nth-child(7) { --node-x:48%; --node-y:84%; }
  .topology-nodes button { position:relative; display:grid; min-width:7.8rem; min-height:3.6rem; place-items:center; padding:.55rem .75rem; border:1px solid #5a5853; border-radius:0; color:var(--dark-muted); background:rgba(10,10,11,.86); cursor:pointer; touch-action:manipulation; transition:color var(--motion-snap),border-color var(--motion-snap),background var(--motion-snap),transform var(--motion-resolve); }
  .topology-nodes button::before { content:""; position:absolute; left:-.28rem; top:50%; width:.5rem; height:.5rem; border:1px solid currentColor; border-radius:50%; background:var(--dark); transform:translateY(-50%); }
  .topology-nodes button span { position:absolute; left:.5rem; top:.35rem; font:500 .55rem/1 var(--mono); }
  .topology-nodes button strong { font:500 clamp(.72rem,.9vw,.92rem)/1 var(--mono); letter-spacing:.05em; }
  .topology-nodes button i { display:none; }
  .topology-nodes li[data-related] button { color:#dfdbd2; border-color:#77736c; }
  .topology-nodes li[data-selected] button { color:var(--dark-ink); border-color:var(--signal); background:color-mix(in srgb,var(--signal) 18%,var(--dark)); transform:scale(1.12); }
  .topology-nodes li[data-selected] button::before { border-color:var(--signal); background:var(--signal); box-shadow:0 0 0 .35rem rgba(167,71,45,.16); }
  .topology-core { position:absolute; left:50%; top:50%; z-index:2; display:grid; width:clamp(4.5rem,6vw,6.5rem); aspect-ratio:1; place-items:center; border-block:1px solid #4a4946; transform:translate(-50%,-50%); }
  .topology-core .brand-symbol { width:58%; opacity:.48; }
  .topology-core .brand-art-ink { display:none; }
  .topology-core .brand-art-reverse { display:block; }
  .topology-core i { position:absolute; left:-45%; right:-45%; top:50%; height:1px; background:#363532; }
  .topology-coordinate { position:absolute; right:.75rem; bottom:.6rem; z-index:3; display:flex; gap:1.25rem; color:#77736c; font:500 .58rem/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
  .topology-coordinate b { color:var(--signal); font:inherit; }
  .system-inspector { display:grid; grid-template-rows:auto auto 1fr auto; min-height:0; padding:clamp(1rem,2vw,1.8rem); border:1px solid #343331; background:rgba(10,10,11,.78); }
  .inspector-heading .meta { color:var(--dark-muted); }
  .inspector-heading .meta b { color:var(--signal); font:inherit; }
  .inspector-heading h2 { margin:.8rem 0 .7rem; font-size:clamp(2.4rem,4vw,4.8rem); overflow-wrap:anywhere; }
  .inspector-heading p { color:var(--dark-muted); font-size:.88rem; line-height:1.5; }
  .inspector-state { margin-top:clamp(1rem,2vh,1.7rem); border-top:1px solid #403f3b; }
  .inspector-state div { display:grid; grid-template-columns:5rem 1fr; gap:1rem; padding:.55rem 0; border-bottom:1px solid #343331; }
  .inspector-state dt { color:#8f8b83; font-size:.62rem; }
  .inspector-state dd { font:500 .65rem/1.4 var(--mono); text-transform:uppercase; }
  .inspector-role { align-self:end; margin-top:1rem; padding:1rem; border-left:2px solid var(--signal); background:rgba(255,255,255,.025); }
  .inspector-role .meta { color:var(--signal); }
  .inspector-role p { margin-top:.45rem; color:var(--dark-muted); font-size:.78rem; line-height:1.45; }
  .inspector-open { display:flex; min-height:44px; align-items:center; justify-content:space-between; margin-top:.75rem; border-top:1px solid #4a4946; font:500 .7rem/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; }
  .environment-console { display:grid; grid-template-columns:auto auto 1fr auto; gap:clamp(1rem,2vw,2rem); align-items:center; }
  .journey-modes,.journey-step { display:flex; align-items:center; border:1px solid #4b4945; }
  .journey-modes button,.journey-step button,.journey-trace button,.operating-roles button { min-height:44px; border:0; color:var(--dark-muted); background:transparent; cursor:pointer; font:500 .62rem/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; }
  .journey-modes button { padding:0 .9rem; }
  .journey-modes button[aria-pressed="true"] { color:var(--dark-ink); background:#2e2d2a; }
  .journey-step button { width:44px; font-size:1rem; }
  .journey-step span { min-width:4.5rem; text-align:center; color:#817e77; font:500 .62rem/1 var(--mono); }
  .journey-step span b { color:var(--dark-ink); font:inherit; }
  .journey-trace { display:flex; justify-content:center; gap:.35rem; }
  .journey-trace li { position:relative; }
  .journey-trace li::after { content:""; position:absolute; left:100%; top:50%; width:.35rem; height:1px; background:#45433f; }
  .journey-trace li:last-child::after { display:none; }
  .journey-trace button { width:44px; min-width:44px; border-block:1px solid #3d3c39; }
  .journey-trace li[data-visited] button { color:var(--dark-ink); border-color:#817c73; }
  .journey-trace li[data-current] button { color:#fff; border-color:var(--signal); background:var(--signal); }
  .surface-return { display:flex; min-height:44px; align-items:center; gap:1rem; font:500 .65rem/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; }
  .operating-roles { position:absolute; left:var(--gutter); top:50%; z-index:5; display:grid; gap:.35rem; transform:translateY(-50%); }
  .operating-roles button { display:grid; grid-template-columns:2.8rem 1fr; grid-template-rows:auto auto; min-width:8.5rem; padding:.55rem .7rem; text-align:left; border-left:1px solid #474540; background:rgba(10,10,11,.76); }
  .operating-roles button span { grid-row:1/-1; align-self:center; color:#77736c; font-size:.5rem; }
  .operating-roles button strong { color:inherit; font:inherit; }
  .operating-roles button i { margin-top:.2rem; color:#706d66; font:400 .5rem/1.2 var(--mono); font-style:normal; }
  .operating-roles button[aria-pressed="true"] { color:var(--dark-ink); border-left-color:var(--signal); background:rgba(167,71,45,.13); }
  .environment-end { display:none; }
  .environment-end i { height:1px; background:#343331; }
  .environment-end strong { color:var(--status); font:inherit; }
  .material-identity { position:absolute; right:clamp(1.25rem,4vw,4.75rem); top:50%; width:min(29vw,25rem); opacity:.035; filter:grayscale(1); transform:translateY(-50%); }
  .material-identity .brand-symbol { width:100%; }
  .material-identity .brand-art-reverse { display:none; }
  :root[data-theme="dark"] .material-identity .brand-art-ink { display:none; }
  :root[data-theme="dark"] .material-identity .brand-art-reverse { display:block; }
  body[data-page="systems"] .material-identity { display:none; }
  body[data-page="system"] .material-identity { width:min(34vw,30rem); opacity:.048; }
  body[data-page="access"] .material-identity { right:-4vw; width:min(48vw,40rem); opacity:.085; }
  body:is([data-page="legal"],[data-page="privacy"]) .material-identity { top:35%; opacity:.05; }
  body[data-page="404"] .material-identity { opacity:.09; }
  body[data-page="404"] .material-identity .brand-art-ink { display:none; }
  body[data-page="404"] .material-identity .brand-art-reverse { display:block; }
  body[data-page="home"] .experience-hud, body[data-page="systems"] .experience-hud { display:none; }
}

@layer responsive {
  @media (max-width: 980px) {
    body[data-page="systems"] { height:auto; min-height:100dvh; overflow:auto; }
    body[data-page="systems"] main { height:auto; }
    .operating-environment { min-height:calc(100svh - 6.5rem); height:auto; overflow:visible; }
    .environment-shell { grid-template-columns:minmax(0,1fr) 18rem; }
    .operating-roles { display:none; }
  }
  @media (min-width: 721px) and (max-width: 1100px) {
    body[data-page="systems"] { height:auto; min-height:100dvh; overflow:auto; }
    body[data-page="systems"] main { height:auto; }
    body[data-page="systems"] .operating-environment {
      min-height:0;
      height:calc(100dvh - 6.5rem);
      overflow:hidden;
      grid-template-rows:auto minmax(22rem,1fr) auto auto;
      gap:.85rem;
      padding-bottom:1rem;
    }
    body[data-page="systems"] .environment-shell { grid-template-columns:minmax(0,1fr) minmax(16rem,19rem); gap:clamp(1.25rem,2vw,2rem); }
    body[data-page="systems"] .environment-intro h1 { font-size:clamp(3.6rem,7vw,5.4rem); }
    body[data-page="systems"] .topology-nodes button { min-width:7.4rem; }
    body[data-page="systems"] .system-inspector { padding:1.25rem 0 1.25rem 1.4rem; }
    body[data-page="systems"] .inspector-heading h2 { font-size:clamp(3rem,5vw,4.6rem); }
    body[data-page="systems"] .environment-console { gap:.75rem; }
    body[data-page="systems"] .journey-trace button { width:36px; min-width:36px; }
    body[data-page="systems"] .operating-roles { display:none; }
  }
  @media (max-width: 720px) {
    body[data-page="home"] main { height:calc(100svh - 7.5rem); }
    .surface-copy { bottom:8rem; width:calc(100% - 2.3rem); }
    .surface-copy h1 { font-size:clamp(4rem,18vw,6.3rem); }
    .surface-monogram { width:78vw; top:41%; }
    .surface-threshold { bottom:.5rem; }
    .surface-threshold .surface-scroll,.surface-threshold a { min-height:4rem; font-size:.6rem; }
    .surface-operation { grid-template-columns:1fr; gap:.55rem; }
    .surface-operation i { display:none; }
    .surface-reveal li { top:34%; width:3.2rem; }
    .surface-reveal li:nth-child(1) { left:4%; }
    .surface-reveal li:nth-child(2) { left:18%; }
    .surface-reveal li:nth-child(3) { left:32%; }
    .surface-reveal li:nth-child(4) { left:46%; }
    .surface-reveal li:nth-child(5) { left:60%; }
    .surface-reveal li:nth-child(6) { left:74%; }
    .surface-reveal li:nth-child(7) { left:88%; }
    .surface-reveal li:nth-child(even) { top:55%; }
    .passage-link { grid-template-columns:1fr auto; min-height:20rem; }
    .passage-link .meta { grid-column:1/-1; }
    .passage-link strong { font-size:clamp(3.5rem,17vw,6rem); overflow-wrap:anywhere; }
    .operating-environment { display:block; min-height:calc(100svh - 7.5rem); padding-top:1.4rem; }
    .environment-intro { grid-template-columns:1fr; gap:.65rem; }
    .environment-intro h1 { max-width:8ch; font-size:clamp(3.2rem,15vw,5.4rem); }
    .environment-intro > p { padding-bottom:0; }
    .environment-shell { display:block; margin-top:1.5rem; }
    .topology { height:min(68svh,38rem); min-height:31rem; }
    .topology-nodes button { min-width:5.6rem; min-height:3.15rem; padding:.4rem; }
    .topology-nodes button strong { font-size:.62rem; }
    .topology-nodes button span { font-size:.48rem; }
    .system-inspector { min-height:30rem; margin-top:1rem; }
    .environment-console { position:sticky; bottom:0; z-index:8; grid-template-columns:1fr auto; margin:1rem calc(var(--gutter) * -1) 0; padding:.65rem var(--gutter) calc(.65rem + env(safe-area-inset-bottom)); border-top:1px solid #484641; background:rgba(10,10,11,.96); backdrop-filter:blur(12px); }
    .journey-modes { grid-column:1; }
    .journey-step { grid-column:2; }
    .journey-trace { grid-column:1/-1; justify-content:space-between; }
    .journey-trace li { flex:1; }
    .journey-trace button { width:100%; min-width:44px; border-radius:0; }
    .surface-return { grid-column:1/-1; justify-content:space-between; }
    .passage-mark { width:38vw; }
  }
  @media (prefers-reduced-motion: reduce) {
    .topology::before,.topology::after,.topology-lines line,.topology-nodes button { transition:none!important; }
  }
}

@layer tokens {
  :root {
    --paper: #f4f1e9;
    --surface: #e9e6de;
    --ink: #101011;
    --muted: #65635e;
    --line: #b8b4aa;
    --strong-line: #292929;
    --signal: #a7472d;
    --status: #276b38;
    --dark: #0a0a0b;
    --dark-ink: #f4f1e9;
    --dark-muted: #aaa69d;
    --gutter: clamp(1.25rem, 3.4vw, 4.75rem);
    --max: 112rem;
    --sans: "Instrument Sans", Arial, sans-serif;
    --serif: "Cormorant Garamond", Georgia, serif;
    --mono: "IBM Plex Mono", Consolas, monospace;
    --motion-snap: 180ms cubic-bezier(.2,.8,.2,1);
    --motion-resolve: 720ms cubic-bezier(.16,1,.3,1);
    --motion-depth: 1100ms cubic-bezier(.76,0,.24,1);
    --layer-content: 4;
    --layer-world: 3;
  }
  :root[data-theme="dark"] {
    --paper: #141414;
    --surface: #1c1c1b;
    --ink: #f1eee7;
    --muted: #aaa79f;
    --line: #42413d;
    --strong-line: #d7d3ca;
    --status: #82ce91;
  }
}

@layer base {
  body { min-height: 100vh; color: var(--ink); background-color:var(--paper); background-image:linear-gradient(112deg,rgba(255,255,255,.18),transparent 36%,rgba(16,16,17,.035)),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='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E"); font: 400 1rem/1.62 var(--sans); text-rendering: optimizeLegibility; font-kerning: normal; }
  a { color: inherit; text-decoration: none; }
  a:hover { text-decoration: underline; text-underline-offset: .28em; }
  :focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
  h1, h2, h3, strong { font-weight: 400; }
  h1, h2, h3 { line-height: .9; letter-spacing: -.06em; text-wrap: balance; }
  p { max-width: 43rem; }
  .meta, dt, .system-number, .system-access { font: 500 .75rem/1.45 var(--mono); letter-spacing: .075em; text-transform: uppercase; }
  .skip-link { position: fixed; left: 1rem; top: 1rem; z-index: 100; padding: .75rem 1rem; color: #fff; background: #000; transform: translateY(-180%); }
  .skip-link:focus { transform: none; }
  .page-frame { width: min(100%, var(--max)); margin-inline: auto; padding-inline: var(--gutter); }
  .text-action { display: inline-flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 2rem; padding-block: .8rem; border-bottom: 1px solid currentColor; font: 500 .875rem/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
  .passage-link { display:grid; grid-template-columns:minmax(12rem,1fr) minmax(0,2fr) auto; gap:clamp(1.5rem,5vw,6rem); align-items:end; min-height:clamp(18rem,42vw,34rem); margin-top:clamp(5rem,10vw,10rem); padding-top:clamp(3rem,7vw,7rem); padding-bottom:clamp(3rem,7vw,7rem); border-top:1px solid var(--strong-line); }
  .passage-link strong { font:400 clamp(4rem,10vw,11rem)/.8 var(--serif); letter-spacing:-.07em; }
  .passage-link i { align-self:center; font:400 clamp(2rem,5vw,5rem)/1 var(--sans); font-style:normal; transition:transform var(--motion-resolve); }
  .passage-link:hover { text-decoration:none; }
  .passage-link:hover i { transform:translateX(1rem); }
  .back-link { display: inline-flex; min-height: 44px; align-items: center; font: 500 .875rem/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
}

@layer layout {
  .site-header { position: relative; z-index: 5; display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 4rem); width: min(100%, var(--max)); min-height: 6.5rem; margin-inline: auto; padding: 1.5rem var(--gutter); border-bottom: 1px solid var(--line); }
  .site-header::after { content:""; position:absolute; left:var(--gutter); bottom:-1px; width:clamp(2.5rem,5vw,5.5rem); height:2px; background:var(--signal); }
  .brand { display:flex; min-height:44px; flex: 0 0 auto; align-items:center; }
  .brand-window { position: relative; display: block; width: 10.5rem; height: 2.4rem; }
  .brand-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: left center; }
  .brand-art-reverse { display: none; }
  :root[data-theme="dark"] .brand-art-ink { display: none; }
  :root[data-theme="dark"] .brand-art-reverse { display: block; }
  .brand-symbol { position: relative; display:block; aspect-ratio:1; }
  .brand-symbol .brand-art { object-position: center; }
  .header-state { display: flex; align-items: center; gap: .65rem; color: var(--muted); font: 500 .75rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
  .header-state i, .metadata-grid i, .state-register i { width: .45rem; height: .45rem; flex: 0 0 auto; border-radius: 50%; background: var(--status); }
  .site-header nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.75rem); margin-left: auto; }
  .site-header nav a { display: grid; min-height: 44px; align-items: center; font: 500 .875rem/1.2 var(--mono); letter-spacing: .045em; text-transform: uppercase; }
  .site-header nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 2px; text-underline-offset: .45rem; }
  .theme-toggle { display: grid; width: 2.75rem; height: 2.75rem; flex: 0 0 auto; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: transparent; cursor: pointer; }
  .experience-controls { display:flex; align-items:center; gap:.65rem; }
  .site-footer { display: grid; grid-template-columns: 1fr auto auto; gap: 3rem; align-items: end; width: min(100%, var(--max)); margin: 9rem auto 0; padding: 2.5rem var(--gutter); border-top: 1px solid var(--line); }
  .site-footer { position:relative; background:linear-gradient(90deg,color-mix(in srgb,var(--surface) 46%,transparent),transparent 58%); }
  .site-footer::before { content:""; position:absolute; left:var(--gutter); top:-1px; width:clamp(3rem,7vw,7rem); height:2px; background:var(--signal); }
  .footer-brand { display: flex; align-items: center; gap: 2rem; }
  .footer-brand a { display:flex; min-height:44px; align-items:center; }
  .footer-brand .brand-window { width: 7rem; height: 1.75rem; }
  .footer-brand p { color: var(--muted); font-size: .75rem; }
  .footer-state { display: grid; gap: .15rem; font: 500 .75rem/1.4 var(--mono); text-transform: uppercase; }
  .footer-state span { color: var(--muted); }
  .footer-state strong { color: var(--status); font-weight: 500; }
  .site-footer nav { display: flex; gap: 1.4rem; align-items: center; color: var(--muted); font: 500 .75rem/1.4 var(--mono); text-transform: uppercase; }
  .site-footer nav a { display:flex; min-height:44px; align-items:center; }
}

@layer components {
  body:is([data-page="home"],[data-page="systems"]) .site-header { width: 100%; max-width: none; color: var(--dark-ink); background: var(--dark); border-color: #353535; }
  body:is([data-page="home"],[data-page="systems"]) .site-header .brand-art-ink { display:none; }
  body:is([data-page="home"],[data-page="systems"]) .site-header .brand-art-reverse { display:block; }
  body:is([data-page="home"],[data-page="systems"]) .site-header .header-state { color: var(--dark-muted); }
  body:is([data-page="home"],[data-page="systems"]) .site-header .theme-toggle { color: var(--dark-ink); border-color: #4d4d4d; }

  .home-hero { position:relative; min-height:190svh; color: var(--dark-ink); background: var(--dark); }
  .home-hero-grid { position:sticky; top:0; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 1fr auto; gap: 2rem; width: min(100%, var(--max)); min-height: 100svh; margin-inline: auto; padding: clamp(3rem, 7vh, 7rem) var(--gutter) 2.25rem; overflow:hidden; }
  .hero-copy { grid-column: 1 / 9; align-self: center; position:relative; z-index:1; }
  .hero-copy .meta { display:flex; align-items:center; gap:.7rem; color: var(--dark-muted); }
  .hero-copy .meta::before { content:""; width:.55rem; height:.55rem; border-radius:50%; background:var(--signal); }
  .hero-copy h1 { max-width: 9ch; margin-top: 2.25rem; font-size: clamp(4.5rem, 10.2vw, 11rem); font-weight: 400; line-height: .84; letter-spacing:-.07em; }
  .hero-copy p { margin-top: 2.4rem; color: var(--dark-muted); font-size: clamp(1rem, 1.35vw, 1.35rem); }
  .hero-mark { grid-column:9 / -1; align-self:center; justify-self:end; width:min(20vw,19rem); opacity:.72; }
  .brand-symbol-hero { width:100%; }
  .home-hero .hero-mark .brand-art-ink { display:none; }
  .home-hero .hero-mark .brand-art-reverse { display:block; }
  .hero-index { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 2rem; align-items: end; padding-top: 1.2rem; border-top: 1px solid #444; color: var(--dark-muted); font: 500 .75rem/1.4 var(--mono); text-transform: uppercase; }
  .hero-index strong { color: var(--dark-ink); font: inherit; }
  .hero-axis { position:absolute; right:var(--gutter); top:50%; display:grid; grid-template-columns:clamp(7rem,14vw,15rem) auto; grid-template-rows:auto auto; gap:.45rem .85rem; align-items:center; color:var(--dark-muted); font:500 .62rem/1.3 var(--mono); letter-spacing:.07em; text-transform:uppercase; transform:translateY(-50%) rotate(90deg); transform-origin:right center; }
  .hero-axis i { grid-column:1; grid-row:1/-1; display:block; height:1px; background:linear-gradient(90deg,var(--signal) 0 var(--scene-axis-progress,0%),#454442 var(--scene-axis-progress,0%) 100%); }
  .hero-axis span,.hero-axis b { white-space:nowrap; }
  .hero-axis b { color:var(--dark-ink); font:inherit; }

  .brand-strip { display:grid; grid-template-columns:1.45fr repeat(3,1fr); width:min(100%,var(--max)); margin-inline:auto; border-bottom:1px solid var(--strong-line); }
  .brand-strip-cell { position:relative; display:flex; min-height:12rem; align-items:flex-end; justify-content:space-between; gap:1.5rem; padding:1.35rem var(--gutter) 1.35rem 1.35rem; border-right:1px solid var(--line); overflow:hidden; }
  .brand-strip-cell:first-child { padding-left:var(--gutter); }
  .brand-strip-cell:last-child { border-right:0; }
  .brand-strip-cell::before { content:""; position:absolute; top:1rem; left:1rem; width:1.15rem; height:1.15rem; border-top:1px solid var(--line); border-left:1px solid var(--line); }
  .brand-strip-cell::after { content:""; position:absolute; top:.8rem; right:.8rem; width:.38rem; height:.38rem; border-radius:50%; background:var(--signal); }
  .brand-strip-title { display:grid; align-content:end; justify-content:start; }
  .brand-strip-title strong { max-width:12ch; font:400 clamp(1.8rem,3vw,3.6rem)/.95 var(--serif); }
  .brand-symbol-small { width:clamp(3.75rem,6vw,6.5rem); opacity:.75; }
  .brand-strip-cell > span:last-child { color:var(--muted); font:500 .75rem/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase; }

  .section-intro, .page-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(16rem, .75fr); gap: clamp(2rem, 7vw, 9rem); align-items: end; }
  .home-systems { padding-top: clamp(5rem, 10vw, 10rem); }
  .section-intro { padding-bottom: 2.5rem; }
  .section-intro h2, .page-hero h1 { margin-top: 1.25rem; font-size: clamp(4rem, 9.5vw, 10.5rem); font-weight: 300; }
  .section-intro > p, .page-hero > p { color: var(--muted); }

  .section-nav { position:sticky; top:0; z-index:4; display:flex; gap:clamp(1rem,3vw,3rem); min-height:4.25rem; align-items:center; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--paper) 94%,transparent); backdrop-filter:blur(12px); }
  .section-nav a { display:flex; min-height:44px; align-items:center; font:500 .8rem/1.4 var(--mono); letter-spacing:.045em; text-transform:uppercase; }

  .system-list { border-top: 1px solid var(--strong-line); }
  .system-list li { border-bottom: 1px solid var(--line); }
  .system-list a { display: grid; grid-template-columns: 4.5rem minmax(10rem, 1fr) minmax(16rem, 1.15fr) minmax(9rem, auto) 1.5rem; gap: 1.5rem; align-items: center; min-height: 7.5rem; }
  .system-list-minimal a { grid-template-columns: 4.5rem minmax(10rem, 1fr) minmax(9rem, auto) 1.5rem; }
  .system-list h2, .system-list h3 { font-size: clamp(2.2rem, 4vw, 4.6rem); font-weight: 500; letter-spacing:-.055em; }
  .system-list p { color: var(--muted); font-size: .95rem; }
  .system-number, .system-access { color: var(--muted); }
  .row-arrow { justify-self: end; font-size: 1.3rem; }

  .current-state { display: grid; grid-template-columns: .8fr 1.4fr; gap: clamp(3rem, 8vw, 10rem); padding-top: 9rem; padding-bottom: 3rem; }
  .current-state header h2 { margin-top: 1.2rem; font:400 italic clamp(3rem, 6vw, 6.5rem)/.88 var(--serif); letter-spacing:-.045em; }
  .state-register { border-top: 1px solid var(--strong-line); }
  .state-register div { display: grid; grid-template-columns: 1fr auto; gap: 2rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
  .state-register dt { color: var(--muted); }
  .state-register dd { display: flex; align-items: center; gap: .65rem; font: 500 .85rem/1.4 var(--mono); text-transform: uppercase; }
  .state-actions { grid-column: 2; display: flex; gap: 2rem; justify-content: space-between; }
  .surface-end { grid-column:1/-1; display:grid; grid-template-columns:auto 1fr auto; gap:1.5rem; align-items:center; margin-top:clamp(5rem,12vw,12rem); color:var(--muted); font:500 .68rem/1.4 var(--mono); letter-spacing:.07em; text-transform:uppercase; }
  .surface-end i { height:1px; background:var(--line); }
  .surface-end strong { color:var(--status); font:inherit; }

  .architecture-threshold { position:relative; min-height:180svh; color:var(--dark-ink); background:var(--dark); }
  .architecture-threshold-frame { position:sticky; top:0; display:grid; grid-template-columns:.8fr 1.2fr; grid-template-rows:1fr auto; gap:3rem clamp(3rem,8vw,10rem); min-height:100svh; align-items:center; padding-top:clamp(5rem,9vh,8rem); padding-bottom:3rem; overflow:hidden; }
  .architecture-threshold header h2 { margin-top:1.2rem; font:400 italic clamp(4.5rem,9vw,10rem)/.82 var(--serif); letter-spacing:-.055em; }
  .architecture-threshold header h2 span { display:block; }
  .architecture-threshold .meta,.architecture-note { color:var(--dark-muted); }
  .architecture-note { grid-column:1; align-self:end; font-size:.92rem; }
  .architecture-diagram { position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:clamp(1rem,3vw,3rem); align-items:center; min-height:min(66vh,44rem); }
  .architecture-source { display:grid; gap:clamp(.65rem,1.5vh,1.2rem); }
  .architecture-source i { position:relative; display:grid; width:2.15rem; height:2.15rem; place-items:center; border:1px solid #5a5853; border-radius:50%; color:var(--dark-muted); font:500 .6rem/1 var(--mono); font-style:normal; transform:translateX(calc(var(--architecture-collapse,0) * 5vw)); opacity:calc(1 - var(--architecture-collapse,0) * .34); }
  .architecture-source i::after { content:""; position:absolute; left:100%; top:50%; width:clamp(4rem,14vw,14rem); height:1px; background:linear-gradient(90deg,#5a5853,rgba(90,88,83,0)); transform:scaleX(var(--architecture-line,0)); transform-origin:left; }
  .architecture-source b { font:inherit; }
  .architecture-spine { position:relative; height:72%; border-left:1px solid #5a5853; transform:scaleY(var(--architecture-line,0)); }
  .architecture-spine::before,.architecture-spine::after { content:""; position:absolute; left:0; width:100%; height:1px; background:#5a5853; }
  .architecture-spine::before { top:0; }.architecture-spine::after { bottom:0; }
  .architecture-spine i { position:absolute; left:0; width:clamp(5rem,13vw,12rem); height:1px; background:linear-gradient(90deg,#5a5853,var(--signal)); transform-origin:left; }
  .architecture-spine i:nth-child(1){top:0}.architecture-spine i:nth-child(2){top:50%}.architecture-spine i:nth-child(3){top:100%}
  .architecture-targets { display:grid; align-content:space-between; height:72%; color:var(--dark-ink); font:500 .68rem/1.4 var(--mono); letter-spacing:.07em; text-transform:uppercase; }
  .architecture-targets span { opacity:var(--architecture-line,0); transform:translateX(calc((1 - var(--architecture-line,0)) * 2rem)); }

  .platform-register { margin-top:0; padding-top:0; padding-bottom:clamp(5rem,9vw,10rem); color:var(--dark-ink); background:var(--dark); box-shadow:0 0 0 100vmax var(--dark); clip-path:inset(0 -100vmax); }
  .platform-register > header { position:sticky; top:0; z-index:2; display:grid; grid-template-columns:.45fr 1fr .55fr; gap:clamp(2rem,5vw,6rem); align-items:end; min-height:13rem; margin-bottom:0; padding:3rem 0 2rem; background:linear-gradient(180deg,var(--dark) 72%,rgba(10,10,11,0)); }
  .platform-register > header .meta,.platform-register > header p { color:var(--dark-muted); }
  .platform-register > header h2 { font:400 italic clamp(3.8rem,8vw,8.5rem)/.86 var(--serif); letter-spacing:-.05em; }
  .platform-register ol { border-top:1px solid #4a4947; }
  .platform-register li { display:grid; grid-template-columns:4rem 1.2fr 1fr; gap:clamp(1.5rem,4vw,5rem); align-items:center; min-height:78svh; padding:5rem 0; border-bottom:1px solid #4a4947; }
  .platform-index { color:var(--dark-muted); font:500 .75rem/1.45 var(--mono); }
  .platform-register li .meta { color:var(--dark-muted); }
  .platform-register li h3 { margin:.8rem 0 1.25rem; font-size:clamp(3rem,6vw,6.5rem); font-weight:500; }
  .platform-register li p { color:var(--dark-muted); }
  .platform-register li dl { border-top:1px solid #4a4947; }
  .platform-register li dl div { display:grid; grid-template-columns:6rem 1fr; gap:1rem; padding:.9rem 0; border-bottom:1px solid #4a4947; }
  .platform-register li dt { color:var(--dark-muted); }
  .platform-register li dd { font:500 .75rem/1.5 var(--mono); text-transform:uppercase; }
  .platform-register li:nth-child(2) h3 { color:#d06446; }

  .page-hero { min-height: 39rem; padding-top: 7rem; padding-bottom: 4rem; border-bottom: 1px solid var(--strong-line); }
  .page-hero.compact { min-height: 30rem; }
  .page-hero > p { padding-bottom: .7rem; font-size: 1.12rem; }
  .register-section { padding-top: 3rem; }
  .access-band { display: grid; grid-template-columns: 1.1fr .8fr auto; gap: clamp(2rem, 6vw, 8rem); align-items: end; margin-top: 10rem; padding-top: 3rem; padding-bottom: 3rem; border-top: 1px solid var(--strong-line); }
  .access-band h2 { margin-top: 1rem; font:400 italic clamp(2.6rem, 5vw, 5.5rem)/.9 var(--serif); letter-spacing:-.04em; }
  .access-band h2 span, .relationship-map h2 span { display:block; }
  .access-band > p { color: var(--muted); }

  .system-hero { position: relative; display: grid; grid-template-columns: 1.35fr .65fr; grid-template-rows: auto 1fr auto; gap: 3rem 6rem; min-height: 48rem; padding-top: 2rem; padding-bottom: 3rem; overflow: clip; border-bottom: 1px solid var(--strong-line); }
  .system-page { --chamber-shift:72%; position:relative; isolation:isolate; }
  .system-page::before { content:""; position:fixed; inset:6.5rem 0 0; z-index:-1; pointer-events:none; opacity:.55; background:linear-gradient(90deg,transparent calc(var(--chamber-shift) - 1px),color-mix(in srgb,var(--signal) 26%,transparent) var(--chamber-shift),transparent calc(var(--chamber-shift) + 1px)),linear-gradient(135deg,rgba(255,255,255,.17),transparent 32%,rgba(16,16,17,.035)); }
  .system-page[data-system="identity"] { --chamber-shift:18%; }
  .system-page[data-system="web"] { --chamber-shift:32%; }
  .system-page[data-system="core"] { --chamber-shift:45%; }
  .system-page[data-system="index"] { --chamber-shift:56%; }
  .system-page[data-system="campaign"] { --chamber-shift:69%; }
  .system-page[data-system="automation"] { --chamber-shift:81%; }
  .system-page[data-system="research"] { --chamber-shift:88%; }
  .system-hero::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.34; background:linear-gradient(118deg,rgba(255,255,255,.36),transparent 40%,rgba(16,16,17,.055)),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='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E"); }
  .system-page[data-system="index"] .system-hero { color:var(--dark-ink); background:var(--dark); box-shadow:0 0 0 100vmax var(--dark); clip-path:inset(0 -100vmax); border-color:#454442; }
  .system-page[data-system="index"] .system-title p,.system-page[data-system="index"] .back-link,.system-page[data-system="index"] .metadata-grid dt { color:var(--dark-muted); }
  .system-page[data-system="index"] .metadata-grid,.system-page[data-system="index"] .metadata-grid div { border-color:#454442; }
  .system-page[data-system="index"] .system-figure { color:#ffffff09; }
  .system-page[data-system="research"] .system-hero { background:var(--surface); box-shadow:0 0 0 100vmax var(--surface); clip-path:inset(0 -100vmax); }
  .system-page[data-system="research"] .system-hero::after { content:""; position:absolute; right:var(--gutter); top:16%; width:min(34vw,28rem); height:62%; border-top:1px solid var(--signal); border-left:1px solid var(--line); background:repeating-linear-gradient(0deg,transparent 0 2.6rem,color-mix(in srgb,var(--line) 52%,transparent) 2.6rem calc(2.6rem + 1px)); opacity:.72; transform:skewY(-5deg); }
  .system-hero .back-link { grid-column: 1 / -1; align-self: start; }
  .system-figure { position: absolute; right: var(--gutter); top: .03em; z-index: -1; color: color-mix(in srgb, var(--ink) 5%, transparent); font: 300 clamp(18rem, 38vw, 42rem)/.78 var(--sans); letter-spacing: -.12em; }
  .system-title { align-self: end; }
  .system-title h1 { margin-top: 1.15rem; font-size: clamp(5.5rem, 13vw, 13.5rem); font-weight: 300; letter-spacing:-.075em; }
  .system-title p { margin-top: 1.5rem; color: var(--muted); font-size: 1.12rem; }
  .metadata-grid { align-self: end; border-top: 1px solid var(--strong-line); }
  .metadata-grid div { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
  .metadata-grid dt { color: var(--muted); }
  .metadata-grid dd { display: flex; align-items: center; gap: .6rem; font: 500 .78rem/1.5 var(--mono); text-transform: uppercase; }
  .system-statement { display: grid; grid-template-columns: .55fr 1.45fr; gap: 4rem; padding-top: 9rem; padding-bottom: 9rem; }
  .system-statement p { max-width: 24ch; font:400 clamp(2.8rem, 5.7vw, 6.2rem)/.98 var(--serif); letter-spacing: -.04em; }

  .operating-loop, .module-register, .relationship-map, .related-systems { padding-top: 5rem; padding-bottom: 5rem; border-top: 1px solid var(--strong-line); }
  .operating-loop header, .module-register header, .relationship-map header, .related-systems header { display: grid; grid-template-columns: .55fr 1.45fr; gap: 4rem; margin-bottom: 3rem; }
  .operating-loop h2, .module-register h2, .relationship-map h2, .related-systems h2 { font-size: clamp(2.8rem, 5.5vw, 6rem); font-weight: 500; }
  .relationship-map h2 { font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.04em; }
  .operating-loop ol { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--strong-line); border-bottom: 1px solid var(--strong-line); }
  .operating-loop li { min-width: 0; padding: 1.25rem .75rem 1.5rem; border-right: 1px solid var(--line); }
  .operating-loop li:last-child { border-right: 0; }
  .operating-loop li span { display: block; margin-bottom: 3rem; color: var(--muted); font: 500 .75rem/1.4 var(--mono); }
  .operating-loop li strong { font: 500 clamp(.75rem, .8vw, .82rem)/1.35 var(--mono); overflow-wrap: anywhere; }

  .module-register ol { border-top: 1px solid var(--strong-line); }
  .module-register li { display: grid; grid-template-columns: 4rem 1fr; gap: 1.5rem; align-items: center; min-height: 5.25rem; border-bottom: 1px solid var(--line); }
  .module-register li span { color: var(--muted); font: 500 .75rem/1.4 var(--mono); }
  .module-register li p { font-size: 1.12rem; }

  .system-page[data-system="core"] .module-register ol { display:grid; grid-template-columns:repeat(4,1fr); border-left:1px solid var(--line); }
  .system-page[data-system="core"] .module-register li { grid-template-columns:2rem 1fr; min-height:10rem; padding:1.2rem; border-right:1px solid var(--line); }
  .system-page[data-system="campaign"] .module-register ol { display:grid; grid-template-columns:repeat(7,1fr); border-left:1px solid var(--line); }
  .system-page[data-system="campaign"] .module-register li { display:block; min-width:0; min-height:12rem; padding:1.2rem .9rem; border-right:1px solid var(--line); }
  .system-page[data-system="campaign"] .module-register li span { display:block; margin-bottom:3rem; }
  .system-page[data-system="campaign"] .module-register li p { font-size:.95rem; overflow-wrap:anywhere; }
  .system-page[data-system="automation"] .module-register ol { display:grid; grid-template-columns:repeat(2,1fr); border-left:1px solid var(--line); }
  .system-page[data-system="automation"] .module-register li { min-height:8rem; padding:1.2rem; border-right:1px solid var(--line); }

  .relationship-map dl { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); }
  .relationship-map dl div { min-height: 14rem; padding: 1.3rem; border-right: 1px solid var(--line); }
  .relationship-map dl div:last-child { border-right: 0; }
  .relationship-map dt { margin-bottom: 5rem; color: var(--muted); }
  .relationship-map dd { font-size: .92rem; }
  .relationship-map .is-current { color: var(--dark-ink); background: var(--dark); }
  .relationship-map .is-current dt { color: var(--dark-muted); }

  .related-systems nav { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 4rem; border-top: 1px solid var(--strong-line); }
  .related-systems nav a { display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem; align-items: end; min-height: 11rem; padding: 1.25rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .related-systems nav a:last-child { border-right: 0; }
  .related-systems nav span { color: var(--muted); font: 500 .75rem/1.4 var(--mono); }
  .related-systems nav strong { font-size: clamp(1.8rem, 3vw, 3.5rem); font-weight: 300; letter-spacing: -.04em; }
  .related-systems nav i { font-style: normal; }

  .text-record { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(3rem, 8vw, 10rem); padding-top: 8rem; padding-bottom: 8rem; }
  body:is([data-page="legal"],[data-page="privacy"]) .page-hero { position:relative; overflow:hidden; background:linear-gradient(112deg,color-mix(in srgb,var(--surface) 72%,transparent),transparent 68%); }
  body:is([data-page="legal"],[data-page="privacy"]) .page-hero::after { content:""; position:absolute; right:var(--gutter); bottom:0; width:min(34vw,30rem); height:42%; border-top:1px solid color-mix(in srgb,var(--signal) 52%,transparent); border-left:1px solid color-mix(in srgb,var(--line) 56%,transparent); pointer-events:none; }
  body:is([data-page="legal"],[data-page="privacy"]) .text-record { position:relative; }
  body:is([data-page="legal"],[data-page="privacy"]) .text-record::before { content:""; position:absolute; left:var(--gutter); top:0; width:clamp(3rem,6vw,6rem); height:2px; background:var(--signal); }
  .text-record h2 { margin-top: 1rem; font:400 italic clamp(2.8rem, 5vw, 5.5rem)/.9 var(--serif); letter-spacing:-.04em; }
  .text-record > div:last-child { display: grid; gap: 2rem; align-content: start; color: var(--muted); font-size: 1.12rem; }

  .access-page { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; gap: 4rem clamp(3rem, 9vw, 12rem); min-height: calc(100vh - 6rem); padding-top: clamp(5rem, 10vw, 10rem); padding-bottom: 5rem; }
  body[data-page="access"] main { position:relative; overflow:hidden; }
  .access-page { position:relative; }
  .access-page::before { content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:linear-gradient(transparent,var(--line) 18%,var(--line) 82%,transparent); }
  .access-page header h1 { margin-top: 1.5rem; font:400 italic clamp(5rem, 12vw, 12rem)/.82 var(--serif); letter-spacing:-.05em; }
  .access-page header p { margin-top: 2rem; color: var(--muted); font-size: 1.1rem; }
  .access-panel { align-self: end; border-top: 1px solid var(--strong-line); }
  .access-panel div { display: grid; grid-template-columns: 1fr auto; gap: 2rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); font: 500 .78rem/1.5 var(--mono); text-transform: uppercase; }
  .access-panel span { color: var(--muted); }
  .access-note { grid-column: 2; align-self:start; padding-top:1rem; border-top:1px solid var(--line); color: var(--muted); }
  .access-sequence { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--strong-line); border-bottom:1px solid var(--strong-line); }
  .access-sequence li { display:grid; gap:3rem; min-height:11rem; padding:1.2rem; border-right:1px solid var(--line); font:500 .8rem/1.5 var(--mono); text-transform:uppercase; }
  .access-sequence li:last-child { border-right:0; }
  .access-sequence span { color:var(--muted); }

  .not-found { display: grid; align-content: center; min-height: calc(100vh - 6rem); padding-top: 5rem; padding-bottom: 5rem; }
  body[data-page="404"] { color:var(--dark-ink); background:var(--dark); }
  body[data-page="404"] .site-header,body[data-page="404"] .site-footer { color:var(--dark-ink); border-color:#403e39; background:var(--dark); }
  body[data-page="404"] .site-header .brand-art-ink,body[data-page="404"] .site-footer .brand-art-ink { display:none; }
  body[data-page="404"] .site-header .brand-art-reverse,body[data-page="404"] .site-footer .brand-art-reverse { display:block; }
  body[data-page="404"] .not-found { position:relative; }
  body[data-page="404"] .not-found::before { content:""; position:absolute; left:var(--gutter); right:var(--gutter); top:50%; height:1px; background:linear-gradient(90deg,var(--signal),#47443f 28%,transparent 82%); }
  .not-found h1 { margin: 1.5rem 0 2rem; font-size: clamp(4rem, 10vw, 10rem); font-weight: 300; }
  .not-found h1 span { display:block; }
  .not-found p { margin-bottom: 2.5rem; color: var(--muted); }
}

@layer experience {
  .passage-transition { position:fixed; inset:0; z-index:120; pointer-events:none; overflow:hidden; }
  .passage-door { position:absolute; top:0; bottom:0; width:50.08%; background-color:#d8d2c5; background-image:linear-gradient(112deg,rgba(255,255,255,.28),transparent 42%,rgba(25,22,18,.08)),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='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E"); will-change:transform; }
  .passage-door-left { left:0; transform:translateX(-101%); animation:passage-left-open 1.05s cubic-bezier(.76,0,.24,1) .08s both; border-right:1px solid rgba(55,48,40,.28); }
  .passage-door-right { right:0; transform:translateX(101%); animation:passage-right-open 1.05s cubic-bezier(.76,0,.24,1) .08s both; border-left:1px solid rgba(255,255,255,.46); }
  .passage-seam { position:absolute; left:50%; top:0; width:1px; height:100%; opacity:0; background:linear-gradient(transparent,var(--signal) 20% 80%,transparent); transform:translateX(-50%); }
  .passage-mark { position:absolute; left:50%; top:50%; width:min(20vw,15rem); opacity:0; filter:grayscale(1) contrast(.7) drop-shadow(-2px -2px 1px rgba(255,255,255,.6)) drop-shadow(3px 4px 3px rgba(52,45,37,.2)); transform:translate(-50%,-50%) scale(.82); transition:opacity .24s ease .34s,transform .7s cubic-bezier(.16,1,.3,1); }
  .passage-mark .brand-symbol { width:100%; }
  .passage-mark .brand-art-reverse { display:none!important; }
  body > header,body > main,body > footer { transform-origin:var(--passage-x,50vw) var(--passage-y,50vh); animation:room-arrival .9s cubic-bezier(.16,1,.3,1) both; transition:transform .38s cubic-bezier(.16,1,.3,1),opacity .38s ease,filter .38s ease; }
  body[data-passage="approach"] > header,body[data-passage="approach"] > main,body[data-passage="approach"] > footer,
  body[data-passage="closing"] > header,body[data-passage="closing"] > main,body[data-passage="closing"] > footer { transform:scale(1.035); opacity:.56; filter:blur(1.5px); }
  body[data-passage="closing"] .passage-door { animation:none; transform:translateX(0); transition:transform .72s cubic-bezier(.76,0,.24,1); }
  body[data-passage="closing"] .passage-seam { opacity:1; transition:opacity .2s ease .5s; }
  body[data-passage="closing"] .passage-mark { opacity:.22; transform:translate(-50%,-50%) scale(1); }
  @keyframes passage-left-open { from { transform:translateX(0); } to { transform:translateX(-101%); } }
  @keyframes passage-right-open { from { transform:translateX(0); } to { transform:translateX(101%); } }
  @keyframes room-arrival { from { transform:scale(.975); opacity:.7; } to { transform:scale(1); opacity:1; } }
  .experience-layer { position:fixed; inset:0; z-index:var(--layer-world); pointer-events:none; overflow:hidden; contain:strict; }
  .no-js .experience-layer, body[data-motion-state="static"] .experience-layer,
  .no-js .entry-sequence, body[data-motion-state="static"] .entry-sequence { display:none; }
  .experience-layer canvas { position:absolute; inset:0; width:100%; height:100%; opacity:.82; transform:translateZ(0); backface-visibility:hidden; will-change:opacity; transition:opacity .4s ease; }
  body[data-runtime-health="degraded"] .experience-layer canvas { opacity:.42; }
  .depth-grid { position:absolute; inset:-15%; opacity:var(--depth-grid-opacity,.025); background-image:linear-gradient(to right,currentColor 1px,transparent 1px),linear-gradient(to bottom,currentColor 1px,transparent 1px); background-size:clamp(3rem,7vw,7rem) clamp(3rem,7vw,7rem); transform:perspective(55rem) rotateX(var(--depth-tilt,0deg)) translateY(var(--depth-shift,0rem)); transform-origin:center 35%; transition:color .3s ease; }
  :root[data-theme="dark"] .depth-grid, body[data-page="home"] .depth-grid, body[data-page="systems"] .depth-grid { color:#f4f1e9; }
  .field-reticle { --pointer-x:50vw; --pointer-y:50vh; position:absolute; left:var(--pointer-x); top:var(--pointer-y); width:var(--reticle-size,1.4rem); aspect-ratio:1; border:1px solid color-mix(in srgb,var(--signal) 65%,transparent); border-radius:50%; opacity:var(--reticle-opacity,.24); transform:translate(-50%,-50%) rotate(var(--reticle-rotation,0deg)); }
  .field-reticle::before,.field-reticle::after { content:""; position:absolute; left:50%; top:50%; background:var(--signal); transform:translate(-50%,-50%); }
  .field-reticle::before { width:140%; height:1px; }
  .field-reticle::after { width:1px; height:140%; }
  .experience-hud { display:none; }
  body:not([data-debug="true"]) .experience-hud span:last-child { display:none; }
  body[data-page="home"][data-active-scene="entry"] .experience-hud, body[data-active-scene="operating-systems"] .experience-hud { color:#aaa69d; }
  .experience-hud span:nth-child(2),.experience-hud span:last-child { text-align:right; }
  .route-progress { position:absolute; left:0; top:0; width:2px; height:100%; background:color-mix(in srgb,var(--line) 35%,transparent); }
  .route-progress i { display:block; width:100%; height:var(--route-progress-height,0%); background:var(--signal); transform-origin:top; }

  .entry-sequence { position:fixed; inset:0; z-index:50; display:grid; grid-template-columns:1fr auto; grid-template-rows:1fr auto; align-items:end; gap:2rem; padding:var(--gutter); color:#f4f1e9; background:#0a0a0b; pointer-events:none; animation:entry-dismiss 1.55s cubic-bezier(.76,0,.24,1) both; }
  .entry-sequence span,.entry-sequence strong { font:500 .72rem/1.4 var(--mono); letter-spacing:.07em; text-transform:uppercase; }
  .entry-sequence i { grid-column:1/-1; display:block; width:100%; height:1px; background:#484743; transform-origin:left; animation:entry-register 1.05s cubic-bezier(.16,1,.3,1) both; }
  @keyframes entry-register { from { transform:scaleX(0); } to { transform:scaleX(1); } }
  @keyframes entry-dismiss { 0%,62% { opacity:1; clip-path:inset(0); } 100% { opacity:0; clip-path:inset(0 0 100% 0); visibility:hidden; } }

  body[data-motion-state="full"] [data-scene] { --scene-progress:0; --scene-presence:0; }
  body[data-motion-state="full"] .hero-copy { transform:translate3d(0,var(--hero-copy-y,0),0); }
  body[data-motion-state="full"] .hero-copy h1 { clip-path:inset(var(--hero-clip-top,0%) var(--hero-clip-side,0%) var(--hero-clip-bottom,0%)); text-shadow:var(--scroll-smear,0rem) 0 0 rgba(167,71,45,.22); transform:translate3d(var(--scene-hero-drift,0),0,0) scale(var(--scene-hero-scale,1)); transform-origin:left center; }
  body[data-motion-state="full"] .hero-mark { opacity:var(--hero-mark-opacity,.72); transform:translate3d(var(--hero-mark-x,0),var(--hero-mark-y,0),0) rotate(var(--hero-mark-rotation,6deg)) scale(var(--hero-mark-scale,1)); }
  body[data-motion-state="full"] .home-hero-grid::before { content:""; position:absolute; inset:var(--hero-frame-inset,8% var(--gutter) 12%); border:1px solid rgba(255,255,255,var(--hero-frame-opacity,.08)); transform:perspective(70rem) rotateX(var(--hero-frame-tilt,0deg)) scale(var(--hero-frame-scale,1)); transform-origin:center; }
  body[data-motion-state="full"] .home-hero-grid::after { content:""; position:absolute; left:50%; top:50%; width:min(72vw,70rem); aspect-ratio:1; border:1px solid rgba(244,241,233,var(--hero-portal-opacity,0)); border-radius:50%; transform:translate(-50%,-50%) scale(var(--hero-portal-scale,.1)); box-shadow:0 0 0 1px rgba(167,71,45,calc(var(--hero-portal-opacity,0) * .5)),inset 0 0 8rem rgba(167,71,45,calc(var(--hero-portal-opacity,0) * .08)); }
  body[data-motion-state="full"] .hero-axis { --scene-axis-progress:calc(var(--scene-progress,0) * 100%); opacity:calc(1 - var(--scene-progress,0) * .7); }

  body[data-motion-state="full"] .system-list li { position:relative; isolation:isolate; transition:color .24s ease; }
  body[data-motion-state="full"] .system-list li::before { content:""; position:absolute; z-index:-1; inset:0; width:0; background:var(--ink); transition:width .45s cubic-bezier(.16,1,.3,1); }
  body[data-motion-state="full"] .system-list li[data-active] { color:var(--paper); }
  body[data-motion-state="full"] .system-list li[data-active]::before { width:100%; }
  body[data-motion-state="full"] .system-list li[data-active] p,body[data-motion-state="full"] .system-list li[data-active] .system-number,body[data-motion-state="full"] .system-list li[data-active] .system-access { color:color-mix(in srgb,var(--paper) 68%,transparent); }
  body[data-motion-state="full"] .system-list li[data-system-row="index"][data-active]::before { background:var(--signal); }

  .platform-register { position:relative; }
  .architecture-signal { position:absolute; inset:3rem var(--gutter) auto; height:1px; background:#4a4947; overflow:visible; }
  .architecture-signal i { position:absolute; top:50%; width:.55rem; height:.55rem; border:1px solid #aaa69d; border-radius:50%; background:var(--dark); transform:translate(-50%,-50%); }
  .architecture-signal i:nth-child(1){left:0}.architecture-signal i:nth-child(2){left:50%}.architecture-signal i:nth-child(3){left:100%}
  .architecture-signal b { position:absolute; left:0; top:-1px; width:var(--architecture-progress-width,0%); height:2px; background:var(--signal); transition:width .5s cubic-bezier(.16,1,.3,1); }
  body[data-motion-state="full"] .platform-register li { opacity:.46; transform:translate3d(2rem,0,0); transition:opacity .3s ease,transform .55s cubic-bezier(.16,1,.3,1); }
  body[data-motion-state="full"] .platform-register li[data-active] { opacity:1; transform:none; }
  body[data-motion-state="full"] .platform-register li[data-active] .platform-index { color:#d06446; }

  body[data-motion-state="full"] .architecture-threshold { --architecture-line:clamp(0,calc(var(--scene-progress,0) * 1.8),1); --architecture-collapse:clamp(0,calc((var(--scene-progress,0) - .28) * 1.7),1); }
  body[data-motion-state="full"] .architecture-threshold header { opacity:calc(1 - var(--scene-progress,0) * .65); transform:translateY(calc(var(--scene-progress,0) * -4rem)); }
  body[data-motion-state="full"] .architecture-diagram { transform:perspective(65rem) rotateY(calc((1 - var(--architecture-line,0)) * -9deg)) scale(calc(.9 + var(--architecture-line,0) * .1)); transform-origin:center; }
  body[data-motion-state="full"] .architecture-source i,
  body[data-motion-state="full"] .architecture-source i::after,
  body[data-motion-state="full"] .architecture-spine,
  body[data-motion-state="full"] .architecture-targets span,
  body[data-motion-state="full"] .architecture-threshold header,
  body[data-motion-state="full"] .architecture-diagram { transition:transform var(--motion-resolve),opacity var(--motion-resolve); }

  body[data-motion-state="full"] .system-figure { transform:translate3d(var(--scene-shift-up,0),var(--scene-shift-down,0),0); }
  body[data-motion-state="full"] .system-title { transform:translateY(var(--scene-shift-up,0)); }
  body[data-motion-state="full"] .system-statement p { opacity:var(--scene-opacity,1); transform:translate3d(var(--scene-shift-x,0),0,0); }
  body[data-motion-state="full"] .module-register li { transition:color .25s ease,background .25s ease,transform .35s cubic-bezier(.16,1,.3,1); }
  body[data-motion-state="full"] .module-register li[data-active] { color:var(--paper); background:var(--ink); transform:translateX(.35rem); }
  body[data-motion-state="full"] .module-register li[data-active] span { color:color-mix(in srgb,var(--paper) 66%,transparent); }

  .operating-loop { position:relative; }
  .loop-signal { height:2px; margin-top:-2px; background:color-mix(in srgb,var(--line) 50%,transparent); }
  .loop-signal i { display:block; width:var(--loop-progress-width,0%); height:100%; background:var(--signal); transition:width .45s cubic-bezier(.16,1,.3,1); }
  body[data-motion-state="full"] .operating-loop li { opacity:.42; transition:opacity .25s ease,background .25s ease,transform .35s cubic-bezier(.16,1,.3,1); }
  body[data-motion-state="full"] .operating-loop li[data-active] { opacity:1; background:color-mix(in srgb,var(--signal) 9%,transparent); transform:translateY(-.45rem); }
  body[data-motion-state="full"] .operating-loop li[data-active] strong { color:var(--signal); }

  body[data-motion-state="full"] .relationship-map dl div { opacity:var(--scene-opacity,1); transform:translateY(var(--scene-shift-x,0)); transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .35s ease; }
  body[data-motion-state="full"] .relationship-map dl div:nth-child(2){transition-delay:.05s} body[data-motion-state="full"] .relationship-map dl div:nth-child(3){transition-delay:.1s} body[data-motion-state="full"] .relationship-map dl div:nth-child(4){transition-delay:.15s}
  body[data-motion-state="full"][data-active-scene="surface-return"] .experience-layer canvas,body[data-motion-state="full"][data-active-scene="access"] .experience-layer canvas { opacity:.16; }
  body[data-motion-state="full"][data-active-scene="surface-return"] .depth-grid,body[data-motion-state="full"][data-active-scene="access"] .depth-grid { opacity:.008; }
  :root[data-feature-hero-spatial-type="off"] body[data-motion-state="full"] .hero-copy,
  :root[data-feature-hero-spatial-type="off"] body[data-motion-state="full"] .hero-mark { transform:none; }
  :root[data-feature-hero-spatial-type="off"] body[data-motion-state="full"] .hero-copy h1 { clip-path:none; text-shadow:none; }
  :root[data-feature-system-index-scanner="off"] body[data-motion-state="full"] .system-list li { color:inherit; transform:none; }
  :root[data-feature-system-index-scanner="off"] body[data-motion-state="full"] .system-list li::before { display:none; }
  :root[data-feature-system-index-scanner="off"] body[data-motion-state="full"] .system-list li p,
  :root[data-feature-system-index-scanner="off"] body[data-motion-state="full"] .system-list li .system-number,
  :root[data-feature-system-index-scanner="off"] body[data-motion-state="full"] .system-list li .system-access { color:var(--muted); }
  :root[data-feature-architecture-signals="off"] .architecture-signal { display:none; }
  :root[data-feature-velocity-distortion="off"] .field-reticle { display:none; }
  :root[data-feature-idle-world="off"] .experience-layer canvas { opacity:.82; }

  /* Passage continuity: the destination should feel approached through AXIEL's
     existing material, not revealed by a generic full-screen overlay. */
  .passage-seam { left:var(--passage-x,50vw); opacity:0; transition:left .58s cubic-bezier(.16,1,.3,1),opacity .22s ease; }
  .passage-mark { left:var(--passage-x,50vw); transition:left .58s cubic-bezier(.16,1,.3,1),opacity .28s ease,transform .7s cubic-bezier(.16,1,.3,1); }
  body > header,body > main,body > footer { transition:transform .72s cubic-bezier(.16,1,.3,1),opacity .62s ease,filter .62s ease; }
  body[data-passage="approach"] > header,body[data-passage="approach"] > main,body[data-passage="approach"] > footer {
    transform:translate3d(calc((50vw - var(--passage-x,50vw)) * .025),calc((50vh - var(--passage-y,50vh)) * .025),0) scale(1.018);
    opacity:.94; filter:none;
  }
  body[data-passage="approach"] .passage-seam { opacity:.16; }
  body[data-passage="approach"] .passage-mark { opacity:.07; transform:translate(-50%,-50%) scale(.86); }
  body[data-passage="closing"] > header,body[data-passage="closing"] > main,body[data-passage="closing"] > footer {
    transform:translate3d(calc((50vw - var(--passage-x,50vw)) * .1),calc((50vh - var(--passage-y,50vh)) * .1),0) scale(1.065);
    opacity:.24; filter:blur(2.5px);
  }
  body[data-passage="closing"] .passage-door { transform:translateX(0); transition:transform .78s cubic-bezier(.76,0,.24,1); }
  body[data-passage="closing"] .passage-seam { left:50vw; opacity:1; transition:left .58s cubic-bezier(.16,1,.3,1),opacity .18s ease .3s; }
  body[data-passage="closing"] .passage-mark { left:50vw; opacity:.2; transform:translate(-50%,-50%) scale(1.02); }

  /* Systems is an AXIEL instrument, not a dashboard: keep the topology,
     remove the chrome, and let the editorial surface carry the hierarchy. */
  body[data-page="systems"] { background:#151411; }
  body[data-page="systems"] .operating-environment {
    background:radial-gradient(circle at var(--selected-x) var(--selected-y),rgba(167,71,45,.1),transparent 24%),linear-gradient(180deg,#111110 0%,#171512 55%,#11100f 100%);
  }
  body[data-page="systems"] .operating-environment::before { opacity:.065; background-size:clamp(6rem,10vw,11rem) clamp(6rem,10vw,11rem); mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent); }
  body[data-page="systems"] .environment-intro h1 { font-size:clamp(3.6rem,6.6vw,7.6rem); }
  body[data-page="systems"] .environment-shell { gap:clamp(1.5rem,3vw,4.5rem); }
  body[data-page="systems"] .topology { border:0; border-block:1px solid #3d3a35; background:linear-gradient(135deg,rgba(255,255,255,.028),transparent 48%); }
  body[data-page="systems"] .topology::before { background:linear-gradient(transparent,rgba(167,71,45,.4),transparent); }
  body[data-page="systems"] .topology::after { background:linear-gradient(90deg,transparent,rgba(167,71,45,.4),transparent); }
  body[data-page="systems"] .topology-lines line { stroke:#736e65; opacity:.25; }
  body[data-page="systems"] .topology-lines line[data-active] { stroke:var(--signal); stroke-width:.2; opacity:.82; }
  body[data-page="systems"] .topology-nodes button { min-width:8.8rem; min-height:3rem; place-items:start; justify-items:start; padding:.7rem 0 .35rem 1.15rem; border:0; border-top:1px solid #555047; color:#aaa49a; background:transparent; }
  body[data-page="systems"] .topology-nodes button::before { left:0; top:calc(100% + .45rem); width:.8rem; height:1px; border:0; border-radius:0; background:currentColor; transform:none; }
  body[data-page="systems"] .topology-nodes button span { left:1.15rem; top:.25rem; color:#827b70; }
  body[data-page="systems"] .topology-nodes button strong { margin-top:.45rem; color:inherit; font:500 clamp(.78rem,1vw,1rem)/1 var(--mono); letter-spacing:.08em; }
  body[data-page="systems"] .topology-nodes li[data-related] button { color:#d2cbc0; border-top-color:#81786b; }
  body[data-page="systems"] .topology-nodes li[data-selected] button { color:var(--dark-ink); border-top-color:var(--signal); background:transparent; transform:translateY(-.35rem) scale(1.02); }
  body[data-page="systems"] .topology-nodes li[data-selected] button::before { background:var(--signal); box-shadow:none; }
  body[data-page="systems"] .topology-core { width:clamp(5.5rem,8vw,8rem); border-block-color:#5a554d; }
  body[data-page="systems"] .topology-core .brand-symbol { opacity:.28; }
  body[data-page="systems"] .topology-core i { background:linear-gradient(90deg,transparent,#4a463f 20% 80%,transparent); }
  body[data-page="systems"] .topology-coordinate { color:#827b70; }
  body[data-page="systems"] .system-inspector { border:0; border-left:1px solid #3d3a35; padding:clamp(1.3rem,2.4vw,2.4rem) 0 clamp(1.3rem,2.4vw,2.4rem) clamp(1.4rem,2.5vw,2.8rem); background:linear-gradient(90deg,rgba(255,255,255,.018),transparent 80%); }
  body[data-page="systems"] .inspector-heading h2 { margin:.9rem 0 .8rem; font:400 clamp(3.4rem,5vw,6.2rem)/.82 var(--serif); letter-spacing:-.07em; }
  body[data-page="systems"] .inspector-heading p { max-width:18rem; color:#b7b0a5; font-size:.92rem; }
  body[data-page="systems"] .inspector-heading > *,body[data-page="systems"] .inspector-state,body[data-page="systems"] .inspector-role,body[data-page="systems"] .inspector-open { transition:opacity var(--motion-snap),transform var(--motion-resolve); }
  body[data-page="systems"] .operating-environment[data-transitioning="true"] .inspector-heading > *,body[data-page="systems"] .operating-environment[data-transitioning="true"] .inspector-state,body[data-page="systems"] .operating-environment[data-transitioning="true"] .inspector-role,body[data-page="systems"] .operating-environment[data-transitioning="true"] .inspector-open { opacity:.22; transform:translateY(.45rem); }
  body[data-page="systems"] .inspector-state { border-top-color:#514b42; }
  body[data-page="systems"] .inspector-state div { border-bottom-color:#39352f; }
  body[data-page="systems"] .inspector-role { padding:1rem 0 1rem 1rem; border-left:1px solid var(--signal); background:transparent; }
  body[data-page="systems"] .inspector-open { border-top-color:#514b42; }
  body[data-page="systems"] .environment-console { padding-top:.2rem; border-top:1px solid #3d3a35; }
  body[data-page="systems"] .journey-modes,body[data-page="systems"] .journey-step { border:0; border-bottom:1px solid #514b42; }
  body[data-page="systems"] .journey-modes button[aria-pressed="true"] { color:var(--dark-ink); background:transparent; box-shadow:inset 0 -2px var(--signal); }
  body[data-page="systems"] .journey-trace button { border-block-color:#514b42; }
  body[data-page="systems"] .journey-trace li[data-current] button { color:var(--dark-ink); background:var(--signal); border-color:var(--signal); }
  body[data-page="systems"] .operating-roles { position:static; grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; transform:none; border-top:1px solid #3d3a35; }
  body[data-page="systems"] .operating-roles button { grid-template-columns:3.1rem 1fr; min-width:0; padding:.7rem .85rem .55rem 0; border-left:0; border-right:1px solid #3d3a35; background:transparent; }
  body[data-page="systems"] .operating-roles button:last-child { border-right:0; }
  body[data-page="systems"] .operating-roles button[aria-pressed="true"] { color:var(--dark-ink); border-left:0; background:linear-gradient(90deg,rgba(167,71,45,.1),transparent); }
  body[data-page="systems"] .operating-roles button[aria-pressed="true"] span { color:var(--signal); }

  @media (hover:hover) and (pointer:fine) {
    .field-reticle { display:block; }
  }
  @media (hover:none),(pointer:coarse) {
    .field-reticle { display:none; }
  }
}

@layer responsive {
  @media (min-width: 981px) {
    .home-systems { display:grid; grid-template-columns:minmax(20rem,.62fr) minmax(36rem,1.38fr); gap:clamp(4rem,8vw,11rem); padding-top:0; padding-bottom:clamp(8rem,14vw,15rem); }
    .home-systems .section-intro { position:sticky; top:0; display:flex; min-height:100svh; align-self:start; flex-direction:column; justify-content:center; padding:6rem 0; }
    .home-systems .section-intro h2 { max-width:5ch; font-size:clamp(5.5rem,8vw,9.5rem); }
    .home-systems .section-intro > p { margin-top:2rem; }
    .home-systems .system-list { margin-top:18vh; margin-bottom:18vh; }
    .home-systems .system-list a { grid-template-columns:3rem minmax(11rem,.78fr) minmax(17rem,1.22fr) auto 1.5rem; min-height:9.5rem; }
    .home-systems .system-list h3 { font-size:clamp(2.8rem,4.15vw,5.2rem); }
    .current-state { min-height:100svh; align-content:center; }
  }

  @media (max-width: 980px) {
    .header-state { display: none; }
    .section-intro, .page-hero, .system-hero { grid-template-columns: 1fr; }
    .section-intro > p, .page-hero > p { max-width: 36rem; }
    .system-list a { grid-template-columns: 3rem minmax(8rem, 1fr) minmax(12rem, 1fr) 1.5rem; }
    .system-access { display: none; }
    .current-state, .access-band { grid-template-columns: 1fr; }
    .state-actions { grid-column: 1; }
    .system-hero { grid-template-rows: auto 1fr auto; gap: 2rem; }
    .system-title { align-self: end; }
    .metadata-grid { max-width: 38rem; }
    .platform-register > header { grid-template-columns:1fr 1fr; }
    .platform-register > header p { grid-column:2; }
    .operating-loop ol { grid-template-columns: repeat(4, 1fr); }
    .operating-loop li:nth-child(4) { border-right: 0; }
    .operating-loop li:nth-child(-n+4) { border-bottom: 1px solid var(--line); }
    .relationship-map dl { grid-template-columns: repeat(2, 1fr); }
    .relationship-map dl div:nth-child(2) { border-right: 0; }
    .relationship-map dl div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    .system-page[data-system="core"] .module-register ol,
    .system-page[data-system="campaign"] .module-register ol { grid-template-columns:repeat(2,1fr); }
    .system-page[data-system="campaign"] .module-register li { min-height:9rem; }
  }

  @media (max-width: 720px) {
    :root { --gutter: 1.15rem; }
    .site-header { flex-wrap: wrap; gap: .9rem 1rem; min-height: auto; padding-top: 1rem; padding-bottom: .8rem; }
    .brand-window { width: 7.2rem; height: 1.75rem; }
    .experience-controls { margin-left:auto; }
    .theme-toggle { width: 2.75rem; height: 2.75rem; }
    .site-header nav { order: 3; width: 100%; gap: 0; justify-content: space-between; margin-left: 0; padding-top: .55rem; border-top: 1px solid var(--line); }
    body:is([data-page="home"],[data-page="systems"]) .site-header nav { border-color: #353535; }
    .site-header nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; min-width:0; max-width:100%; overflow:hidden; }
    .site-header nav a { justify-content:center; min-width:0; max-width:100%; padding:0 .1rem; overflow:hidden; font-size:.62rem; letter-spacing:0; text-align:center; }
    .site-footer { grid-template-columns: 1fr; gap: 2rem; margin-top: 5rem; }
    .footer-brand { justify-content: space-between; }
    .site-footer nav { flex-wrap: wrap; }
    .home-hero { min-height: calc(100svh - 7.5rem); }
    .home-hero-grid { position:relative; grid-template-columns: 1fr; min-height: calc(100svh - 7.5rem); padding-top: 2.5rem; }
    .hero-copy { grid-column: 1; align-self:center; }
    .hero-copy h1 { margin-top: 1.4rem; font-size: clamp(3.9rem, 17vw, 6.7rem); line-height: .88; }
    .hero-copy p { margin-top: 1.5rem; }
    .hero-mark { position:absolute; top:1.5rem; right:1rem; width:min(34vw,9rem); opacity:.2; }
    .hero-index { grid-column: 1; }
    .hero-axis { display:none; }
    .brand-strip { grid-template-columns:1fr 1fr; }
    .brand-strip-cell { min-height:9rem; padding:1rem; border-bottom:1px solid var(--line); }
    .brand-strip-cell:nth-child(2) { border-right:0; }
    .brand-strip-title { padding-left:var(--gutter); }
    .section-intro h2, .page-hero h1 { font-size: clamp(3.8rem, 17vw, 6.5rem); overflow-wrap: anywhere; }
    .page-hero { min-height: 32rem; padding-top: 4rem; }
    .page-hero.compact { min-height: 25rem; }
    .section-intro { grid-template-columns: 1fr; gap: 1.5rem; }
    .system-list a { grid-template-columns: 2rem 1fr 1.25rem; gap: .75rem; min-height: 7rem; padding: 1rem 0; }
    .system-list h2, .system-list h3 { font-size: clamp(2rem, 10vw, 3.2rem); }
    .system-list p { display:block; grid-column:2 / -1; color:var(--muted); font-size:.95rem; }
    .system-access { display: none; }
    .current-state { gap: 3rem; padding-top: 6rem; }
    .state-actions { display: grid; }
    .access-band { margin-top: 6rem; }
    .platform-register { margin-top:6rem; }
    .platform-register > header { grid-template-columns:1fr; gap:1.5rem; }
    .platform-register > header p { grid-column:1; }
    .platform-register li { grid-template-columns:2rem 1fr; min-height:0; }
    .platform-register li dl { grid-column:2; }
    .system-hero { min-height: 39rem; padding-top: 1rem; }
    .system-title h1 { font-size:clamp(3.2rem,14vw,5.2rem); line-height:.86; overflow-wrap:normal; }
    .system-figure { right: .05em; top: .15em; font-size: 18rem; }
    .system-statement { grid-template-columns: 1fr; gap: 2rem; padding-top: 5rem; padding-bottom: 5rem; }
    .system-statement p { font-size: clamp(2.4rem, 11vw, 4.2rem); }
    .operating-loop header, .module-register header, .relationship-map header, .related-systems header { grid-template-columns: 1fr; gap: 1.5rem; }
    .operating-loop ol { grid-template-columns: repeat(2, 1fr); }
    .operating-loop li, .operating-loop li:nth-child(4) { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .operating-loop li:nth-child(even) { border-right: 0; }
    .operating-loop li:last-child { border-bottom: 0; }
    .operating-loop li span { margin-bottom: 2rem; }
    .module-register li { grid-template-columns: 2.5rem 1fr; gap: .75rem; padding: .75rem 0; }
    .system-page[data-system="core"] .module-register ol,
    .system-page[data-system="campaign"] .module-register ol,
    .system-page[data-system="automation"] .module-register ol { grid-template-columns:1fr; border-left:0; }
    .system-page[data-system="core"] .module-register li,
    .system-page[data-system="campaign"] .module-register li,
    .system-page[data-system="automation"] .module-register li { display:grid; grid-template-columns:2.5rem 1fr; min-height:6.5rem; padding:.9rem 0; border-right:0; }
    .system-page[data-system="campaign"] .module-register li span { margin-bottom:0; }
    .relationship-map dl { grid-template-columns: 1fr; }
    .relationship-map dl div { min-height: 10rem; border-right: 0; border-bottom: 1px solid var(--line); }
    .relationship-map dl div:last-child { border-bottom: 0; }
    .relationship-map dt { margin-bottom: 2.5rem; }
    .related-systems nav { grid-template-columns: 1fr; }
    .related-systems nav a { min-height: 7.5rem; border-right: 0; }
    .text-record { grid-template-columns: 1fr; gap: 2.5rem; padding-top: 5rem; padding-bottom: 5rem; }
    .access-page { grid-template-columns:minmax(0,1fr); width:100%; max-width:100vw; gap:3rem; overflow:hidden; }
    .access-page::before { display:none; }
    .access-page header { min-width:0; }
    .access-page header h1 { max-width:100%; font-size:clamp(2.85rem,10.5vw,4rem); line-height:.9; overflow-wrap:anywhere; }
    .access-page header p { width:100%; max-width:100%; overflow-wrap:break-word; }
    .access-sequence { grid-template-columns:1fr 1fr; }
    .access-sequence li:nth-child(2) { border-right:0; }
    .access-sequence li:nth-child(-n+2) { border-bottom:1px solid var(--line); }
    .access-note { grid-column: 1; }
    .section-nav { gap:1.25rem; overflow-x:auto; padding-right:1.15rem; }
    .section-nav a { flex:0 0 auto; font-size:.75rem; }
    .experience-hud { left:1.15rem; right:1.15rem; grid-template-columns:1fr auto; }
    .experience-hud span:nth-child(2) { display:none; }
    .entry-sequence { padding:1.15rem; }
    .architecture-threshold { min-height:auto; }
    .architecture-threshold-frame { position:relative; grid-template-columns:1fr; grid-template-rows:auto auto auto; min-height:auto; padding-top:7rem; padding-bottom:7rem; }
    .architecture-diagram { min-height:28rem; }
    .architecture-note { grid-column:1; }
    .surface-end { grid-template-columns:1fr; gap:1rem; }
    .surface-end i { width:100%; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
    .experience-layer,.entry-sequence,.passage-transition { display:none !important; }
  }
  :root[data-reduced-motion="true"] .experience-layer,
  :root[data-reduced-motion="true"] .entry-sequence { display:none !important; }
  :root[data-reduced-motion="true"] .passage-transition { display:none !important; }
  @media (forced-colors: active) {
    .theme-toggle { border: 1px solid ButtonText; }
    .header-state i, .metadata-grid i, .state-register i { border: 1px solid CanvasText; }
    .brand-window img { filter: none !important; mix-blend-mode: normal !important; }
  }
}