/* BUNDLE SOURCE: surface-base-v24.css */
:root{
  --paper:#F3EFE4;
  --chalk:#FBF8F1;
  --ink:#181815;
  --graphite:#555148;
  --oxide:#A74D2C;
  --oxide-text:#934427;
  --olive:#4D5842;
  --gold:#B58E4F;
  --rule:rgba(24,24,21,.15);
  --rule-soft:rgba(24,24,21,.075);
  --light-rule:rgba(251,248,241,.17);
  --sans:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --serif:Georgia,Cambria,"Iowan Old Style","Times New Roman",serif;
  --mono:ui-monospace,"Cascadia Mono","Segoe UI Mono","SF Mono",Menlo,Consolas,monospace;
  --gutter:clamp(21px,4.2vw,68px);
  --frame:84rem;
  --reading:72rem;
  --dock-h:52px;
  --px:0;
  --py:0;
  --scroll:0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;max-width:100%;background:var(--paper)}
body{margin:0;max-width:100%;overflow-x:clip;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;padding-bottom:calc(var(--dock-h) + 22px)}
h1,h2,h3,p,figure,blockquote,dl,dd,ol,ul{margin:0}
ol,ul{padding:0}
button,select{font:inherit;color:inherit}
a{color:inherit}
img,svg{max-width:100%}
button,a,select,summary,[role="link"],[role="tabpanel"][tabindex]{-webkit-tap-highlight-color:transparent}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--oxide);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:120;background:var(--ink);color:var(--chalk);padding:13px 21px;font:600 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.skip:focus{left:0}
.frame{width:min(100%,var(--frame));margin-inline:auto;padding-inline:var(--gutter);position:relative;min-width:0}
.frame--read{max-width:var(--reading)}
.meta,.kicker{font:600 12px/1.35 var(--mono);letter-spacing:.17em;text-transform:uppercase;color:var(--graphite)}
.meta--light,.kicker--light{color:rgba(251,248,241,.62)}
.lead{font:400 clamp(22px,2.1vw,30px)/1.28 var(--serif);letter-spacing:-.017em;max-width:29em}
.lead--light{color:rgba(251,248,241,.88)}
.body-copy{font:400 17px/1.66 var(--serif);color:var(--graphite);max-width:39em}
.statement{font-size:clamp(38px,4.6vw,66px);line-height:.98;letter-spacing:-.045em;font-weight:600;max-width:14em;overflow-wrap:break-word;hyphens:none}
.statement em{font-family:var(--serif);font-weight:400}
.big-serif{font:400 clamp(25px,2.55vw,38px)/1.2 var(--serif);letter-spacing:-.02em}
.quiet-link{font:600 11px/1.25 var(--mono);letter-spacing:.11em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:4px;color:var(--graphite)}
.world{position:fixed;inset:0;z-index:-3;pointer-events:none;overflow:hidden;contain:strict;background:var(--paper)}
.world__haze,.world__grid,.world__orbits,.world__dust{position:absolute;inset:-14%;transition:opacity .7s ease,filter .7s ease}
.world__haze{background:radial-gradient(circle at 48% 39%,rgba(251,248,241,.56),transparent 42%),radial-gradient(circle at 16% 70%,rgba(77,88,66,.05),transparent 34%),radial-gradient(circle at 86% 18%,rgba(181,142,79,.055),transparent 30%);transform:translate3d(calc(var(--px)*-2px),calc(var(--py)*-2px),0);opacity:.72}
.world__grid{inset:auto -18vw -45vh -18vw;height:102vh;background-image:linear-gradient(rgba(24,24,21,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(24,24,21,.036) 1px,transparent 1px);background-size:55px 55px;transform:perspective(920px) rotateX(69deg) translate3d(calc(var(--px)*2px),calc(var(--scroll)*-8px),0) scale(1.32);transform-origin:center top;opacity:.19;-webkit-mask-image:linear-gradient(to bottom,transparent 2%,#000 38%,transparent 93%);mask-image:linear-gradient(to bottom,transparent 2%,#000 38%,transparent 93%)}
.world__orbits{background:radial-gradient(ellipse at 72% 34%,transparent 0 30%,rgba(181,142,79,.05) 30.1% 30.3%,transparent 30.45% 47%,rgba(77,88,66,.04) 47.1% 47.3%,transparent 47.45%),radial-gradient(ellipse at 22% 72%,transparent 0 24%,rgba(147,68,39,.035) 24.1% 24.3%,transparent 24.45% 42%,rgba(24,24,21,.035) 42.1% 42.3%,transparent 42.45%);transform:translate3d(calc(var(--px)*6px),calc(var(--py)*5px + var(--scroll)*-2px),0) scale(1.06);opacity:.66;animation:worldOrbit 311s ease-in-out infinite alternate}
.world__dust{background-image:radial-gradient(circle at 11% 23%,rgba(181,142,79,.17) 0 1px,transparent 1.7px),radial-gradient(circle at 71% 31%,rgba(77,88,66,.14) 0 1px,transparent 1.55px),radial-gradient(circle at 38% 76%,rgba(24,24,21,.105) 0 .8px,transparent 1.45px),radial-gradient(circle at 87% 68%,rgba(147,68,39,.1) 0 1px,transparent 1.7px);background-size:311px 277px,401px 353px,229px 263px,487px 421px;transform:translate3d(calc(var(--px)*-4px),calc(var(--py)*-3px + var(--scroll)*2px),0);opacity:.4;animation:worldDust 251s linear infinite}
body[data-motion="still"] .world>*{animation:none!important;transform:none!important}
@keyframes worldDust{to{background-position:311px -277px,-401px 353px,229px 263px,-487px -421px}}
@keyframes worldOrbit{to{transform:translate3d(calc(var(--px)*-6px),calc(var(--py)*-5px + var(--scroll)*2px),0) scale(1.1) rotate(.55deg)}}
.topbar{padding:21px 0;position:relative;z-index:10}
.topbar__inner{display:flex;align-items:center;gap:18px;min-width:0;font:600 11px/1.2 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--graphite)}
.topbar__brand{font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap}
.topbar__state{margin-inline-end:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar__link{text-decoration:none;border-bottom:1px solid transparent;padding-bottom:3px;white-space:nowrap}
.hero{min-height:clamp(650px,86svh,900px);display:flex;align-items:center;padding:clamp(55px,7vw,110px) 0;position:relative;overflow:clip;isolation:isolate}
.hero::after{content:"";position:absolute;inset-inline-end:clamp(-240px,-11vw,-90px);top:clamp(48px,8vh,110px);width:clamp(480px,46vw,820px);aspect-ratio:1;border:1px solid rgba(181,142,79,.075);border-radius:50%;box-shadow:0 0 0 89px rgba(77,88,66,.013),0 0 0 233px rgba(24,24,21,.01);z-index:-1;pointer-events:none;animation:halo 211s ease-in-out infinite alternate}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(24rem,.95fr);gap:clamp(34px,5vw,89px);align-items:center}
.hero__grid>*{min-width:0}
.hero__title{font-size:clamp(54px,7vw,104px);line-height:.9;letter-spacing:-.06em;font-weight:600;margin-top:16px;overflow-wrap:break-word;hyphens:none}
.hero__title em{font-family:var(--serif);font-weight:400}
.hero__claim{font-size:clamp(44px,5.6vw,82px);line-height:1.025;letter-spacing:-.05em;font-weight:600;max-width:17.5em;margin-top:16px}
.hero__claim span{display:block}
.hero__claim span:first-child{color:var(--graphite)}
.hero__claim span:last-child{margin-inline-start:.55em}
.hero__lead{margin-top:28px}
.hero__body{margin-top:18px}
.hero__routes{display:flex;flex-wrap:wrap;gap:13px 21px;margin-top:28px}
.hero__routes a{font:600 11px/1.2 var(--mono);letter-spacing:.11em;text-transform:uppercase;text-decoration:none;color:var(--graphite);border-bottom:1px solid var(--rule);padding-bottom:4px}
.hero__visual{width:min(100%,42rem);justify-self:end;filter:drop-shadow(0 28px 48px rgba(24,24,21,.065));min-width:0}
.hero__visual svg{display:block;width:100%;height:auto;overflow:visible}
.hero__visual text{font:600 11px var(--mono);letter-spacing:.1em;fill:var(--graphite)}
@keyframes halo{to{transform:translate(-21px,13px);opacity:.64}}
.room{border-top:1px solid var(--rule);padding:clamp(78px,8vw,132px) 0;position:relative;overflow:clip;isolation:isolate;background:rgba(243,239,228,.9)}
.room--dark{background:rgba(24,24,21,.982);color:var(--chalk);border-color:transparent;box-shadow:0 -28px 96px rgba(24,24,21,.05),0 28px 96px rgba(24,24,21,.065)}
.room--quiet{background:linear-gradient(180deg,rgba(243,239,228,.96),rgba(238,233,221,.96))}
.room__head{display:flex;justify-content:space-between;align-items:flex-start;gap:34px;margin-bottom:clamp(42px,6vw,78px)}
.room__head>div{min-width:0}
.room__aside{font:600 11px/1.3 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--graphite);white-space:nowrap;padding-top:7px}
.room--dark .room__aside{color:rgba(251,248,241,.58)}
.line{fill:none;stroke:var(--graphite);stroke-width:1.1;opacity:.42}
.line--olive{stroke:var(--olive);opacity:.58}
.line--gold{stroke:var(--gold);opacity:.68;stroke-dasharray:3 7}
.pulse{fill:none;stroke:var(--oxide);stroke-width:2.1;stroke-linecap:round;stroke-dasharray:4 96;animation:flow 29s linear infinite}
.pulse--olive{stroke:var(--olive);animation-duration:41s}
.pulse--gold{stroke:var(--gold);animation-duration:47s}
.orbit{fill:none;stroke:var(--rule-soft);stroke-dasharray:3 9;transform-origin:center}
.orbit--a{animation:spin 97s linear infinite}
.orbit--b{animation:spinReverse 71s linear infinite}
.orbit--c{animation:spin 131s linear infinite}
.node rect,.node circle{fill:var(--paper);stroke:var(--ink);stroke-width:1.3}
.node text{text-transform:uppercase}
.core{fill:var(--ink);stroke:var(--gold);stroke-width:1.5}
@keyframes flow{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinReverse{to{transform:rotate(-360deg)}}
.home-map{display:grid;grid-template-columns:minmax(0,1fr) minmax(17rem,.31fr);gap:clamp(28px,4vw,55px);align-items:start}
.home-map>*{min-width:0}
.home-map__visual{overflow:hidden;padding:18px 0}
.home-map__visual svg{width:100%;height:auto;display:block}
.home-map__mobile{display:none}
.home-map__inspector{border-top:1px solid var(--ink);min-width:0}
.segmented{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--rule)}
.segmented button{appearance:none;border:0;border-inline-end:1px solid var(--rule);background:transparent;padding:11px 7px;font:600 10px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;min-width:0}
.segmented button:last-child{border-inline-end:0}
.segmented button[aria-pressed="true"],.segmented button[aria-selected="true"]{background:var(--ink);color:var(--chalk)}
.node-list{display:grid;margin-top:18px}
.node-list button{appearance:none;border:0;border-bottom:1px solid var(--rule-soft);background:transparent;padding:10px 0;display:flex;justify-content:space-between;gap:12px;text-align:start;font:600 11px/1.25 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--graphite);cursor:pointer;min-width:0}
.node-list button span{opacity:.5;flex:0 0 auto}.node-list button.is-active{color:var(--oxide-text);padding-inline-start:7px}
.readout{margin-top:21px;padding-top:18px;border-top:1px solid var(--rule);min-width:0}
.readout__meta{font:600 10px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--oxide-text)}
.readout h3{font-size:clamp(28px,2.7vw,40px);line-height:1.05;margin-top:8px;overflow-wrap:break-word}
.readout p{font:400 16px/1.55 var(--serif);margin-top:12px;color:var(--graphite)}
.readout small{display:block;margin-top:12px;font:500 11px/1.5 var(--mono);color:var(--graphite)}
.home-map[data-lens="tech"] .human-route,.home-map[data-lens="tech"] .human-node{opacity:.1}
.home-map[data-lens="human"] .tech-route,.home-map[data-lens="human"] .tech-node{opacity:.1}
.tech-route,.human-route,.tech-node,.human-node{transition:opacity .45s ease}
.laws{border-top:1px solid var(--ink)}
.law{border-bottom:1px solid var(--rule)}
.law summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:40px minmax(0,1fr) 18px;gap:13px;align-items:center;padding:18px 0}
.law summary::-webkit-details-marker{display:none}
.law summary span{font:600 10px var(--mono);letter-spacing:.12em;color:var(--oxide-text)}
.law summary strong{font-size:clamp(20px,2vw,28px);line-height:1.12;font-weight:600;min-width:0}
.law summary i{position:relative;width:16px;height:16px}
.law summary i::before,.law summary i::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;background:var(--ink);transition:transform .25s ease}
.law summary i::after{transform:rotate(90deg)}
.law[open] summary i::after{transform:none}
.law__body{display:grid;grid-template-columns:40px minmax(0,1fr) minmax(12rem,.45fr);gap:13px;padding:0 0 20px}
.law__body p{grid-column:2;font:400 17px/1.55 var(--serif)}
.law__body em{grid-column:3;font:500 11px/1.45 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--oxide-text);align-self:end}
.room--dark .tabbar button{color:rgba(251,248,241,.6);border-color:var(--light-rule)}
.room--dark .tabbar button[aria-selected="true"]{color:var(--chalk);border-color:var(--gold)}
.thought-panel.is-active{display:block}
.mechanism-panel.is-active{display:block}
.system-orbit [data-station].is-active circle{fill:var(--ink);stroke:var(--gold);filter:drop-shadow(0 0 6px rgba(181,142,79,.75))}
.quiet-button{appearance:none;border:1px solid var(--ink);background:transparent;padding:11px 13px;font:600 11px/1.2 var(--mono);letter-spacing:.09em;text-transform:uppercase;cursor:pointer}
.cabinet-grid{display:grid;grid-template-columns:minmax(0,.36fr) minmax(0,.64fr);gap:clamp(42px,6vw,78px);align-items:center}
.cabinet-grid>*{min-width:0}
.gate-specimen{background:var(--ink);color:var(--chalk);padding:clamp(34px,4vw,55px);min-height:clamp(500px,49vw,620px);box-shadow:0 30px 76px rgba(24,24,21,.11);position:relative;overflow:hidden}
.gate-specimen__line{display:flex;justify-content:space-between;gap:18px;font:600 12px var(--mono);letter-spacing:.12em}
.gate-specimen__line b{color:var(--gold)}
.gate-symbol{width:clamp(150px,16vw,200px);height:clamp(150px,16vw,200px);margin:clamp(34px,4vw,55px) auto;position:relative}
.gate-symbol i{position:absolute;background:var(--chalk);left:50%;top:50%}
.gate-symbol i:nth-child(1){width:100%;height:1px;transform:translate(-50%,-50%)}
.gate-symbol i:nth-child(2){width:1px;height:100%;transform:translate(-50%,-50%)}
.gate-symbol i:nth-child(3){width:55%;height:55%;background:transparent;border:1px solid rgba(251,248,241,.28);transform:translate(-50%,-50%) rotate(45deg)}
.gate-symbol strong{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:34px;color:var(--gold);font-weight:400}
.verdict-copy{font:400 clamp(28px,2.8vw,40px)/1.2 var(--serif);text-align:center}
.gate-specimen dl{margin-top:34px;border-top:1px solid var(--light-rule)}
.gate-specimen dl div{display:grid;grid-template-columns:1fr 1.2fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--light-rule);font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.gate-specimen dt{color:rgba(251,248,241,.56)}
.gate-specimen dd{text-align:end}
.gate-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--light-rule);margin-top:34px}
.gate-controls button{appearance:none;border:0;border-inline-end:1px solid var(--light-rule);background:transparent;color:var(--chalk);padding:13px 8px;font:600 10px/1.35 var(--mono);letter-spacing:.07em;text-transform:uppercase;cursor:pointer;min-width:0}
.gate-controls button:last-child{border-inline-end:0}
.gate-controls button b{display:block;color:var(--gold);margin-top:5px;overflow-wrap:break-word}
.gate-specimen[data-verdict="pass"] .verdict,.gate-specimen[data-verdict="pass"] .gate-symbol strong{color:#C8D1B2}
.gate-specimen[data-verdict="fail"] .verdict,.gate-specimen[data-verdict="fail"] .gate-symbol strong{color:#D78668}
.sendable-grid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,.38fr);gap:clamp(42px,6vw,78px);align-items:stretch}
.sendable-grid>*{min-width:0}
.message-sheet{background:var(--chalk);border:1px solid var(--rule);padding:clamp(34px,4vw,55px);min-height:500px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.message-sheet::after{content:"";position:absolute;inset-inline-start:34px;top:0;height:100%;width:1px;background:rgba(167,77,44,.17)}
.message-sheet span{font:600 10px var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--oxide-text)}
.message-sheet p{font:400 clamp(26px,3.1vw,44px)/1.22 var(--serif);margin-top:28px;overflow-wrap:break-word}
.message-sheet small{font:500 11px/1.55 var(--mono);color:var(--graphite);margin-top:28px}
.judgment{border-top:1px solid var(--ink);display:flex;flex-direction:column;min-height:500px;min-width:0}
.judgment__tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--rule)}
.judgment__tabs button{appearance:none;border:0;border-inline-end:1px solid var(--rule);background:transparent;padding:12px 6px;font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;min-width:0}
.judgment__tabs button:last-child{border-inline-end:0}
.judgment__tabs button[aria-selected="true"]{background:var(--ink);color:var(--chalk)}
.judgment__seal{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:34px 24px}
.judgment__seal>span{font:600 10px var(--mono);letter-spacing:.13em;color:var(--graphite)}
.judgment__seal strong{font-size:clamp(42px,5vw,68px);line-height:1;font-weight:600;letter-spacing:-.05em;margin:18px 0;color:var(--oxide-text);overflow-wrap:break-word}
.judgment__seal p{font:400 18px/1.5 var(--serif);max-width:25rem}
.judgment__seal small{font:600 10px/1.45 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);margin-top:20px}
.receipt-grid{display:grid;grid-template-columns:minmax(0,.64fr) minmax(0,.36fr);gap:clamp(55px,7vw,96px);align-items:center}
.receipt-grid>*{min-width:0}
.receipt-copy{padding-bottom:34px}
.receipt-copy>p:not(.big-serif){font:400 17px/1.62 var(--serif);color:rgba(251,248,241,.76);margin-top:21px}
.receipt-copy details{margin-top:28px;border-block:1px solid var(--light-rule);padding:14px 0}
.receipt-copy summary{cursor:pointer;font:600 10px var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--gold)}
.receipt-copy details p{font:400 16px/1.55 var(--serif);color:rgba(251,248,241,.72);margin-top:13px}
.continuity-grid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,.38fr);gap:clamp(42px,6vw,78px);align-items:center}
.continuity-grid>*{min-width:0}
.continuity-orbit{width:min(100%,46rem);margin-inline:auto}
.continuity-orbit svg{display:block;width:100%;height:auto}
.continuity-orbit text{font:600 11px var(--mono);letter-spacing:.07em;fill:var(--graphite)}
.continuity-orbit [data-loop-station] circle{fill:var(--paper);stroke:var(--ink);stroke-width:1.3;transition:fill .25s ease,stroke .25s ease,filter .25s ease}
.continuity-orbit [data-loop-station].is-active circle{fill:var(--ink);stroke:var(--gold);filter:drop-shadow(0 0 6px rgba(181,142,79,.75))}
.loop-readout{margin-top:34px;border-top:1px solid var(--ink);padding-top:18px}
.loop-readout span{font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--oxide-text)}
.loop-readout strong{display:block;font-size:20px;margin-top:7px}
.loop-readout p{font:400 16px/1.5 var(--serif);color:var(--graphite);margin-top:8px}
.hyp-grid{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);gap:clamp(42px,6vw,78px);align-items:center}
.hyp-grid>*{min-width:0}
.hyp-controls{display:grid;margin-top:28px;border-top:1px solid var(--ink)}
.hyp-controls button{appearance:none;border:0;border-bottom:1px solid var(--rule);background:transparent;padding:12px 0;text-align:start;font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);cursor:pointer}
.hyp-stage{min-height:520px;padding:clamp(28px,4vw,55px);position:relative}
.observation{border:1px solid var(--ink);padding:16px 18px;width:min(72%,34rem);margin-inline:auto;text-align:center}
.observation span{font:600 10px var(--mono);letter-spacing:.1em;color:var(--oxide-text)}
.observation strong{display:block;font:400 clamp(22px,2.5vw,34px)/1.25 var(--serif);margin-top:7px}
.fan-lines{height:74px;position:relative}
.fan-lines i{position:absolute;left:50%;top:0;width:1px;height:100%;background:var(--rule);transform-origin:top}
.fan-lines i:nth-child(1){transform:rotate(62deg)}
.fan-lines i:nth-child(2){transform:none}
.fan-lines i:nth-child(3){transform:rotate(-62deg)}
.hypotheses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(13px,2vw,28px)}
.hypotheses article{border-top:2px solid var(--ink);min-height:220px;padding:24px 16px;transition:opacity .4s ease,filter .4s ease}
.hypotheses article:nth-child(2){border-color:var(--olive)}
.hypotheses article:nth-child(3){border-color:var(--oxide)}
.hypotheses article span{font:600 10px var(--mono);color:var(--graphite)}
.hypotheses article strong{display:block;font:600 18px var(--mono);text-transform:uppercase;margin-top:10px;overflow-wrap:break-word}
.hypotheses article p{font:400 15px/1.5 var(--serif);margin-top:12px}
.hypotheses article small{display:block;font:500 10px/1.45 var(--mono);color:var(--graphite);margin-top:14px}
.hypotheses article.is-eliminated{opacity:.18;filter:grayscale(1)}
.hypotheses article.is-survivor{border-width:3px}
.aperture{display:grid;grid-template-columns:minmax(0,1fr) 68px minmax(0,1fr);border:1px solid var(--light-rule);min-height:500px}
.aperture>*{min-width:0}
.aperture>div,.aperture details{padding:clamp(28px,4vw,55px)}
.aperture>i{position:relative;border-inline:1px solid var(--light-rule);background:linear-gradient(180deg,transparent,rgba(181,142,79,.08),transparent)}
.aperture>i::before{content:"";position:absolute;left:50%;top:50%;width:26px;height:26px;background:var(--gold);transform:translate(-50%,-50%) rotate(45deg)}
.aperture span,.aperture summary{font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.aperture p{font:400 17px/1.75 var(--serif);color:rgba(251,248,241,.74);margin-top:24px}
.systasys-constellation .hero-node{cursor:pointer;transition:opacity .35s ease,filter .35s ease}
.systasys-constellation .hero-node rect{transform-box:fill-box;transform-origin:center;transition:transform .3s ease,fill .3s ease}.systasys-constellation .hero-node:focus-visible rect{transform:scale(1.38);fill:var(--chalk)}
body[data-hero-focus] .systasys-constellation .hero-node{opacity:.28}
body[data-hero-focus] .systasys-constellation .hero-node.is-focus{opacity:1;filter:drop-shadow(0 0 16px rgba(181,142,79,.25))}
.constellation-grid,.spectra-grid,.agent-grid,.manifest-grid{display:grid;grid-template-columns:minmax(16rem,.34fr) minmax(0,.66fr);gap:clamp(42px,6vw,78px);align-items:start}
.constellation-grid>*,.spectra-grid>*,.agent-grid>*,.manifest-grid>*{min-width:0}
.region-list,.agent-tabs{border-top:1px solid var(--ink);display:grid}
.region-list button,.agent-tabs button{appearance:none;border:0;border-bottom:1px solid var(--rule);background:transparent;padding:16px 0;text-align:start;color:var(--graphite);cursor:pointer;display:grid;grid-template-columns:34px minmax(0,1fr);gap:6px 12px;min-width:0}
.region-list button span{grid-row:1/3;font:600 10px var(--mono);color:var(--oxide-text)}
.region-list button strong,.agent-tabs button{font:600 12px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.region-list button small{font:400 12px/1.4 var(--serif);overflow-wrap:break-word}
.region-list button.is-active,.agent-tabs button[aria-selected="true"]{color:var(--ink);padding-inline-start:10px}
.region-readout,.agent-card{min-height:480px;border-inline-start:1px solid var(--ink);padding-inline-start:clamp(42px,6vw,78px);display:flex;flex-direction:column;justify-content:center;min-width:0}
.region-readout h3,.agent-card h3{font-size:clamp(38px,4.25vw,60px);line-height:1.04;letter-spacing:-.04em;max-width:11em;overflow-wrap:break-word;margin-top:15px}
.region-readout>p:not(.meta){font:400 17px/1.62 var(--serif);color:var(--graphite);max-width:38em;margin-top:18px}
.region-laws{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:28px;font:600 10px var(--mono);letter-spacing:.08em;color:var(--oxide-text)}
.region-laws i{font-style:normal;color:var(--gold)}
.region-readout>small{font:600 10px/1.45 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);margin-top:28px}
.spectra-copy>p:not(.lead){font:400 17px/1.65 var(--serif);color:rgba(251,248,241,.74);margin-top:18px}
.spectra-loop{list-style:none;border-top:1px solid rgba(251,248,241,.28)}
.spectra-loop li{display:grid;grid-template-columns:48px minmax(10rem,.55fr) minmax(0,.45fr);gap:12px;align-items:baseline;padding:17px 12px;border-bottom:1px solid rgba(251,248,241,.15);cursor:pointer;min-width:0}.spectra-loop li.is-active{background:rgba(251,248,241,.045);box-shadow:inset 2px 0 var(--gold)}
.spectra-loop span{font:600 10px var(--mono);color:var(--gold)}
.spectra-loop b{font:600 14px var(--mono);letter-spacing:.07em;text-transform:uppercase;overflow-wrap:break-word}
.spectra-loop small{font:500 11px/1.4 var(--mono);color:rgba(251,248,241,.58);overflow-wrap:break-word}
.spectra-readout{margin-top:28px;border-top:1px solid rgba(181,142,79,.48);padding:18px 0 0;padding-inline-start:48px;display:grid;grid-template-columns:7rem minmax(0,1fr);gap:8px 18px}
.spectra-readout span,.spectra-readout small{font:600 10px/1.45 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(251,248,241,.56)}
.spectra-readout strong{font-size:23px;color:var(--chalk);overflow-wrap:break-word}
.spectra-readout p{grid-column:2;font:400 16px/1.6 var(--serif);color:rgba(251,248,241,.78)}
.spectra-readout small{grid-column:2;color:#E2B47A}
.agent-tabs button{display:block}
.agent-card dl{margin-top:28px}
.agent-card dl div{display:grid;grid-template-columns:8rem minmax(0,1fr);gap:18px;padding:17px 0;border-top:1px solid var(--rule)}
.agent-card dt{font:600 10px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--oxide-text)}
.agent-card dd{font:400 16px/1.55 var(--serif);overflow-wrap:break-word}
.manifest-list{border-top:1px solid var(--light-rule)}
.manifest-list div{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:17px 0;border-bottom:1px solid var(--light-rule)}
.manifest-list span{font:600 13px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;min-width:0;overflow-wrap:break-word}
.manifest-list b{font:600 10px/1.3 var(--mono);letter-spacing:.07em;border:1px solid var(--light-rule);padding:6px 8px;white-space:nowrap}
.manifest-list b[data-state="proven"]{color:#C8D1B2}
.manifest-list b[data-state="proof"]{color:#E2B47A}
.manifest-list b[data-state="future"]{color:#D78668}
.manifest-list b[data-state="private"]{color:rgba(251,248,241,.48)}
.manifest-quote{font:400 clamp(36px,4.5vw,60px)/1.12 var(--serif);margin-top:clamp(78px,8vw,120px);max-width:18em}
.manifest-quote strong{font-family:var(--sans);color:var(--gold)}
.corpus-tabs{display:flex;flex-wrap:wrap;gap:8px 20px;border-bottom:1px solid var(--ink);padding-bottom:12px}
.corpus-tabs button{appearance:none;border:0;background:transparent;padding:7px 0;font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);cursor:pointer}
.corpus-tabs button[aria-selected="true"]{color:var(--oxide-text)}
.corpus-panels{margin-top:28px}
.corpus-panel{display:none}
.corpus-panel.is-active{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,44px)}
.corpus-panel article{border-top:2px solid var(--ink);padding-top:26px;min-height:250px;display:flex;flex-direction:column;min-width:0}
.corpus-panel article:nth-child(2){border-color:var(--olive)}
.corpus-panel article:nth-child(3){border-color:var(--oxide)}
.corpus-panel span,.corpus-panel small{font:600 10px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
.corpus-panel h3{font-size:clamp(23px,2.35vw,32px);line-height:1.08;margin-top:10px;overflow-wrap:break-word}
.corpus-panel p{font:400 16px/1.55 var(--serif);margin-top:12px;color:var(--graphite)}
.corpus-panel small{margin-top:auto;padding-top:24px}
.surface-dock{position:fixed;right:13px;bottom:13px;z-index:100;display:grid;grid-template-columns:auto auto auto auto auto auto;width:max-content;max-width:calc(100vw - 26px);min-height:var(--dock-h);background:rgba(243,239,228,.95);border:1px solid rgba(24,24,21,.2);box-shadow:0 13px 55px rgba(24,24,21,.085);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font:600 11px/1.15 var(--mono);letter-spacing:.065em;text-transform:uppercase;color:var(--graphite)}
.surface-dock>a,.surface-dock>button,.surface-dock>label{min-width:0;min-height:50px;display:flex;align-items:center;justify-content:center;border:0;border-inline-end:1px solid rgba(24,24,21,.13);background:transparent;color:inherit;text-decoration:none}
.surface-dock>a,.surface-dock>button{padding:11px 13px;cursor:pointer;white-space:nowrap}
.surface-dock>label{padding:0}
.surface-dock select{appearance:none;width:100%;min-width:78px;max-width:118px;height:100%;border:0;border-radius:0;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;padding:11px 30px 11px 12px;cursor:pointer}
.surface-dock>button:last-child{border-inline-end:0}.surface-dock>a[aria-current="page"]{background:rgba(24,24,21,.045);color:var(--ink)}
.surface-dock>a[aria-current="page"]{box-shadow:inset 0 -2px var(--gold)}
.surface-dock b{color:var(--ink);margin-inline-start:.35em}
.surface-dock__home{font-size:16px;min-width:48px}
html[dir="rtl"] .surface-dock{right:auto;left:13px}
.footer{border-top:1px solid var(--rule)}
.footer__inner{display:flex;justify-content:space-between;gap:21px;padding:34px var(--gutter) 55px;font:600 10px/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--graphite);max-width:var(--reading);margin:auto}
.reveal{opacity:1;transform:none}
html.reveal-armed .reveal{opacity:0;transform:translateY(12px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.75,.2,1)}
html.reveal-armed .reveal.is-visible{opacity:1;transform:none}
@media(max-width:1180px){.hero{min-height:auto}
.hero__grid,.cabinet-grid,.sendable-grid,.receipt-grid,.continuity-grid,.hyp-grid,.constellation-grid,.spectra-grid,.agent-grid,.manifest-grid{grid-template-columns:1fr}
.hero__visual{width:min(78vw,40rem);justify-self:center}
.hero::after{width:min(76vw,720px);inset-inline-end:-36vw}
.region-readout,.agent-card{min-height:auto;padding-inline-start:0;padding-top:42px;border-inline-start:0;border-top:1px solid var(--ink)}
.receipt-grid{gap:72px}
.home-map{grid-template-columns:1fr}
.home-map__inspector{display:grid;grid-template-columns:minmax(12rem,.34fr) minmax(0,.66fr);gap:24px}
.home-map__inspector .segmented{grid-column:1/-1}
.home-map__inspector .readout{margin-top:18px}}
@media(max-width:760px){:root{--gutter:21px;--dock-h:100px}
body{padding-bottom:calc(var(--dock-h) + env(safe-area-inset-bottom) + 18px)}
.world__grid{inset:auto -28vw -40vh -28vw;height:88vh;background-size:48px 48px}
.topbar__state{display:none}
.topbar__inner{justify-content:space-between}
.topbar__link{margin-left:auto}
.hero{padding:48px 0 42px}
.hero__grid{gap:24px}
.hero__claim{font-size:clamp(36px,11.2vw,52px);line-height:1.04}
.hero__claim span:last-child{margin-inline-start:0}
.hero__title{font-size:clamp(48px,16vw,74px)}
.hero__visual{width:min(calc(100% + 28px),calc(100vw - 16px));margin-inline:auto;filter:drop-shadow(0 18px 34px rgba(24,24,21,.055))}
.hero::after{width:110vw;inset-inline-end:-60vw;top:20%;opacity:.55}
.room{padding:72px 0;background:var(--paper)}
.room--dark{background:var(--ink)}
.room--quiet{background:linear-gradient(180deg,var(--paper),#EEE9DD)}
.room__head{display:block;margin-bottom:36px}
.room__aside{margin-top:10px;white-space:normal}
.statement{font-size:clamp(34px,10.7vw,50px)}
.home-map__visual{overflow:visible}
.home-map__wide{display:none}
.home-map__mobile{display:block;width:min(100%,20rem);margin:auto}
.home-map__inspector{display:block}
.home-map__inspector .readout{margin-top:18px}
.law summary{grid-template-columns:30px minmax(0,1fr) 18px}
.law__body{grid-template-columns:30px minmax(0,1fr)}
.law__body p,.law__body em{grid-column:2}
.gate-controls{grid-template-columns:1fr}
.gate-controls button{border-inline-end:0;border-bottom:1px solid var(--light-rule)}
.gate-controls button:last-child{border-bottom:0}
.message-sheet,.judgment{min-height:auto}
.message-sheet{padding:34px 24px}
.message-sheet p{font-size:clamp(25px,8vw,38px)}
.judgment__tabs{grid-template-columns:1fr}
.judgment__tabs button{border-inline-end:0;border-bottom:1px solid var(--rule)}
.hyp-stage{min-height:auto;padding:28px 0}
.observation{width:100%}
.fan-lines{display:none}
.hypotheses{grid-template-columns:1fr;margin-top:24px}
.hypotheses article{min-height:0}
.aperture{grid-template-columns:1fr;min-height:auto}
.aperture>i{height:60px;border:0;border-block:1px solid var(--light-rule)}
.region-readout h3,.agent-card h3{font-size:clamp(34px,10vw,48px)}
.spectra-loop li{grid-template-columns:34px minmax(0,1fr);padding:16px 0}
.spectra-loop small{grid-column:2}
.spectra-readout{grid-template-columns:1fr;padding-inline-start:0}
.spectra-readout p,.spectra-readout small{grid-column:1}
.agent-card dl div{grid-template-columns:1fr;gap:7px}
.manifest-list div{align-items:flex-start}
.corpus-panel.is-active{grid-template-columns:1fr}
.corpus-panel article{min-height:0}
.surface-dock{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));width:auto;max-width:none;min-height:0;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:46px 46px;font-size:10px;letter-spacing:.045em;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
html[dir="rtl"] .surface-dock{left:8px;right:8px}
.surface-dock>a,.surface-dock>button,.surface-dock>label{min-height:46px;width:auto;border-inline-end:1px solid rgba(24,24,21,.13);border-bottom:1px solid rgba(24,24,21,.13);padding:8px 5px;overflow:hidden}
.surface-dock>a:nth-child(3),.surface-dock>button:last-child{border-inline-end:0}
.surface-dock>label,.surface-dock>button:nth-of-type(1),.surface-dock>button:nth-of-type(2){border-bottom:0}
.surface-dock select{min-width:0;max-width:none;font-size:10px;padding:8px 22px 8px 8px;text-align:center;text-align-last:center}
.surface-dock__home{min-width:0;font-size:16px}
.surface-dock button span{display:none}
.surface-dock b{margin-inline-start:0}
.footer__inner{display:block;padding-bottom:128px}
.footer__inner span{display:block;margin-top:7px}}
@media(max-width:420px){.hero__claim{font-size:clamp(34px,10.8vw,46px)}
.hero__title{font-size:clamp(44px,15.5vw,64px)}
.hero__visual{width:min(calc(100% + 18px),calc(100vw - 12px))}
.manifest-list div{display:grid;grid-template-columns:1fr;gap:8px}
.manifest-list b{justify-self:start;white-space:normal}
.corpus-tabs{display:grid;grid-template-columns:1fr 1fr}
.surface-dock>a,.surface-dock>button,.surface-dock>label{padding-inline:4px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
.world>*,.pulse,.orbit,.hero::after{animation:none!important;transform:none!important}
html.reveal-armed .reveal{opacity:1;transform:none;transition:none}
.systasys-constellation .hero-node rect{transition:none}}
.now-mark{color:var(--ink);border-bottom:2px solid var(--gold);padding-bottom:3px}
.spaced{margin-top:21px}
.skip{left:0;top:0;transform:translateY(-125%);transition:transform .18s ease}
.skip:focus{left:0;transform:none}
.visually-hidden{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;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}

/* ── V2.6.5 · HOVER IS A CAPABILITY, NOT AN ASSUMPTION ─────────────────────
   25 :hover rules existed and not one capability query. On a touch device the
   last-tapped control kept its hover skin permanently — measured still matching
   :hover after scrolling 400px away. These are the hover arms only: every
   :focus-visible and every selected-state arm stayed where it was, because they
   shared selector lists with these and moving them would have taken keyboard
   focus and the active states with them. */
@media (hover: hover) and (pointer: fine){
  .quiet-link:hover{color:var(--oxide-text);border-color:var(--oxide)}
  .topbar__link:hover{color:var(--oxide-text);border-color:var(--oxide)}
  .hero__routes a:hover{color:var(--oxide-text);border-color:var(--oxide)}
  .node-list button:hover{color:var(--oxide-text);padding-inline-start:7px}
  .quiet-button:hover{background:var(--ink);color:var(--chalk)}
  .gate-controls button:hover{background:rgba(251,248,241,.06)}
  .systasys-constellation .hero-node:hover rect{transform:scale(1.38);fill:var(--chalk)}
  .spectra-loop li:hover{background:rgba(251,248,241,.045);box-shadow:inset 2px 0 var(--gold)}
  .surface-dock>a:hover,.surface-dock>button:hover,.surface-dock>label:hover{background:rgba(24,24,21,.045);color:var(--ink)}
}

/* main carries tabindex="-1" so the skip link can hand it focus. It is a
   programmatic target, never a tab stop, so it shows the keyboard ring only. */
main[tabindex="-1"]:focus{outline:none}
main[tabindex="-1"]:focus-visible{outline:2px solid var(--oxide);outline-offset:4px}

/* BUNDLE SOURCE: geometry-v25.css */
/* HICHEM PUBLIC V2.6 — deterministic responsive geometry
   Carried forward from V2.5 and retuned for the V2.6 component set.

   Principles preserved verbatim from V2.5:
   - every grid track is minmax(0, …) so no track can be pushed by its content;
   - objects are bounded, never allowed to grow indefinitely on wide desktop;
   - stacking happens early, before two tracks can collide;
   - the Working Map has a dedicated mobile drawing;
   - every interactive target reaches 44px on touch widths;
   - Samsung-class 360 / 384 / 412 CSS px are first-class widths;
   - the composition must survive a desktop browser at 80% zoom.

   This file is geometry only: widths, tracks, spacing, stacking, touch targets,
   safe-area behavior. It invents no visual language — that lives in surface-v26.css. */

:root{
  --geo-frame:82rem;
  --geo-reading:70rem;
  --geo-gutter:clamp(20px,3.8vw,64px);
  --geo-gap:clamp(32px,4.2vw,64px);
  --geo-room-y:clamp(72px,7vw,120px);
}
html,body{max-width:100%;overflow-x:clip}
body{padding-bottom:calc(var(--dock-h) + 24px)}

:where(.frame,.hero__grid,.hall__grid,.home-map,.home-map__visual,.home-map__inspector,
.doors,.door,.aperture,.legend,.cabinet-grid,.sendable-grid,.receipt-grid,.continuity-grid,
.hyp-grid,.study-grid,.receipt-pair,.plate,.plate__frame,.constellation-grid,.spectra-grid,
.agent-grid,.manifest-grid,.anatomy,.corpus-panel,.region-readout,.agent-card,.room__head,
.lineage,.cite,.surface-dock,.footer__inner,.prefs){min-width:0}

/* No global mid-word breaking. Premium typography breaks only where a component asks for it;
   surface-v26.css names the three places that genuinely need it (hashes, URLs, code). */
:where(h1,h2,h3,p,blockquote,dd,dt,summary,strong){overflow-wrap:break-word;hyphens:none}
:where(img,svg){max-width:100%;height:auto}

.frame{max-width:var(--geo-frame);padding-inline:var(--geo-gutter)}
.frame--read{max-width:var(--geo-reading)}
.hero,.room{overflow:clip}
.room{padding-block:var(--geo-room-y)}
.room__head{gap:var(--geo-gap)}

/* Spatial species set the vertical cadence. Not every room breathes the same way. */
.room[data-species="monument"]{--geo-room-y:clamp(88px,9vw,150px)}
.room[data-species="chamber"] {--geo-room-y:clamp(72px,7vw,118px)}
.room[data-species="study"]   {--geo-room-y:clamp(55px,5.2vw,89px)}
.room[data-species="plate"]   {--geo-room-y:clamp(55px,5.5vw,96px)}
.room[data-species="aperture"]{--geo-room-y:clamp(89px,8.5vw,144px)}
.room[data-species="silence"] {--geo-room-y:clamp(96px,11vw,190px)}

/* ── HALL ───────────────────────────────────────────────────── */
.hero{min-height:clamp(620px,78svh,820px);padding-block:clamp(54px,6vh,88px)}
.hero__grid{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:var(--geo-gap)}
.hero__grid>*{min-width:0}
.hero__claim{font-size:clamp(46px,4.65vw,76px);line-height:1.035;max-width:16.5em}
.hero__claim span:last-child{margin-inline-start:.48em}
.hero__title{font-size:clamp(62px,6.8vw,104px);line-height:.88}
.hero__visual{width:min(100%,36rem);max-width:36rem;justify-self:end;transform:none}
.hero__visual svg{display:block;width:100%;overflow:visible}
.hero::after{width:clamp(460px,42vw,760px);inset-inline-end:clamp(-210px,-9vw,-84px)}

/* ── HOME ───────────────────────────────────────────────────── */
.home-map{grid-template-columns:minmax(0,1fr) minmax(250px,290px);gap:var(--geo-gap)}
.home-map__visual{overflow:hidden;padding-block:14px}
.home-map__visual svg.home-map__wide{display:block;width:100%}
.home-map__visual svg.home-map__mobile{display:none}
.node-list button,.readout{min-width:0}
.doors{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.4vw,55px)}
.door{min-width:0}
.law-moment{max-width:34em}
.aperture{grid-template-columns:minmax(0,1fr) 68px minmax(0,1fr);gap:0}
.legend{grid-template-columns:minmax(0,1fr);gap:13px}
.legend>div{grid-template-columns:minmax(120px,10rem) minmax(0,1fr);gap:clamp(13px,2vw,34px)}

/* ── CABINET ────────────────────────────────────────────────── */
.cabinet-grid{grid-template-columns:minmax(0,.38fr) minmax(0,.62fr);gap:var(--geo-gap)}
.gate-specimen{min-width:0;min-height:520px;padding:clamp(30px,3.5vw,48px)}
.gate-symbol{width:min(190px,42%);height:auto;aspect-ratio:1;margin:42px auto 24px}
.sendable-grid{grid-template-columns:minmax(0,.60fr) minmax(280px,.40fr);gap:var(--geo-gap)}
.message-sheet,.judgment{min-width:0;min-height:460px}
.receipt-grid{grid-template-columns:minmax(0,.62fr) minmax(260px,.38fr);gap:var(--geo-gap)}
.study-grid{grid-template-columns:minmax(0,.36fr) minmax(0,.64fr);gap:var(--geo-gap)}
.receipt-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,42px)}
.continuity-grid{grid-template-columns:minmax(0,.62fr) minmax(260px,.38fr);gap:var(--geo-gap)}
.continuity-orbit{width:min(100%,42rem);justify-self:center;transform:none}
.hyp-grid{grid-template-columns:minmax(240px,.30fr) minmax(0,.70fr);gap:var(--geo-gap)}
.hyp-stage{min-width:0;min-height:460px}
.recovery-run{grid-template-columns:minmax(0,1fr)}

/* Archival plates are optical anchors: they may be wide, never unbounded. */
.plate{width:100%;margin-inline:auto}
.plate--terminal{max-width:64rem}
.plate--document .plate__frame{padding:clamp(26px,3vw,44px)}
.plate__frame{padding:clamp(26px,3.2vw,48px)}
.plate--compact .plate__frame{padding:clamp(20px,2.4vw,32px)}
.plate__fields{grid-template-columns:minmax(120px,11rem) minmax(0,1fr)}

/* ── SYSTASYS ───────────────────────────────────────────────── */
.constellation-grid,.spectra-grid,.agent-grid,.manifest-grid{grid-template-columns:minmax(240px,.30fr) minmax(0,.70fr);gap:var(--geo-gap)}
.region-readout,.agent-card{min-width:0;min-height:420px;padding-inline-start:clamp(38px,4vw,64px)}
.systasys-constellation{width:min(100%,39rem);max-width:39rem;justify-self:end;transform:none}
.systasys-constellation svg{display:block;width:100%;overflow:visible}
.spectra-loop li>button{grid-template-columns:48px minmax(9rem,.52fr) minmax(0,.48fr)}
.spectra-readout{max-width:100%;padding-inline-start:44px}
.anatomy__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(21px,3vw,42px)}
.corpus-panel.is-active{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,40px)}
.lineage{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,3vw,55px)}
.lineage li{grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:13px}

/* ── CHROME ─────────────────────────────────────────────────── */
/* The dock is room navigation. Its geometry follows however many room links are present. */
.surface-dock{right:12px;bottom:12px;width:max-content;max-width:calc(100vw - 24px);grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:auto}
.surface-dock>a{min-width:0;white-space:nowrap}
html[dir="rtl"] .surface-dock{right:auto;left:12px}
.footer__inner{grid-template-columns:minmax(0,1fr) auto;gap:clamp(21px,3vw,55px)}
.prefs{grid-auto-flow:column;gap:clamp(18px,2.4vw,34px)}

/* ══ Stack before any track can collide. Intentionally earlier than a classic tablet breakpoint. ══ */
@media (max-width:1260px){
  .hero{min-height:auto}
  .hero__grid,.cabinet-grid,.sendable-grid,.receipt-grid,.continuity-grid,.hyp-grid,
  .study-grid,.constellation-grid,.spectra-grid,.agent-grid,.manifest-grid{grid-template-columns:1fr}
  .hero__visual,.systasys-constellation{justify-self:center;width:min(100%,36rem);max-width:36rem}
  .hero__claim{max-width:18em}
  .home-map{grid-template-columns:1fr}
  .home-map__inspector{display:grid;grid-template-columns:minmax(180px,.30fr) minmax(0,.70fr);gap:24px}
  .home-map__inspector .segmented{grid-column:1/-1}
  .home-map__inspector .readout{margin-top:18px}
  .doors{grid-template-columns:1fr;gap:0}
  .receipt-pair{grid-template-columns:1fr}
  .continuity-orbit{justify-self:center}
  .gate-specimen,.message-sheet,.judgment,.hyp-stage{min-height:auto}
  .region-readout,.agent-card{min-height:auto;border-left:0;border-top:1px solid var(--ink);padding-left:0;padding-top:38px}
  .room--dark .region-readout,.room--dark .agent-card{border-top-color:var(--light-rule)}
  .spectra-readout{padding-inline-start:0}
  .corpus-panel.is-active{grid-template-columns:1fr}
  .lineage{grid-template-columns:1fr}
  html[dir="rtl"] .region-readout,html[dir="rtl"] .agent-card{padding-right:0;border-right:0;border-top:1px solid var(--ink)}
}

/* ══ Tablet and large phones. ══ */
@media (max-width:760px){
  :root{--geo-gutter:clamp(18px,5vw,24px);--geo-room-y:68px;--dock-h:50px}
  body{padding-bottom:calc(var(--dock-h) + env(safe-area-inset-bottom,0px) + 16px)}
  .room[data-species="monument"]{--geo-room-y:80px}
  .room[data-species="chamber"] {--geo-room-y:72px}
  .room[data-species="study"]   {--geo-room-y:55px}
  .room[data-species="plate"]   {--geo-room-y:55px}
  .room[data-species="aperture"]{--geo-room-y:80px}
  .room[data-species="silence"] {--geo-room-y:89px}
  .topbar__state{display:none}.topbar__inner{justify-content:space-between;gap:10px}.topbar__link{margin-left:auto}
  .hero{padding-block:46px 56px}.hero__grid{gap:24px}
  .hero__claim{font-size:clamp(36px,10.8vw,50px);line-height:1.04;letter-spacing:-.04em}.hero__claim span:last-child{margin-inline-start:0}
  .hero__title{font-size:clamp(48px,15vw,72px)}
  .hero__visual,.systasys-constellation{width:min(100%,31rem);margin:12px auto 0;filter:drop-shadow(0 16px 30px rgba(24,24,21,.05))}
  .hero::after{width:108vw;inset-inline-end:-62vw;top:20%;opacity:.48}
  .room__head{display:block;margin-bottom:34px}.room__aside{margin-top:10px;white-space:normal}
  .statement{font-size:clamp(33px,10vw,48px)}
  .home-map__visual svg.home-map__wide{display:none}.home-map__visual svg.home-map__mobile{display:block;width:min(100%,20rem);margin-inline:auto}.home-map__visual{overflow:visible}
  .home-map__inspector{display:block}.home-map__inspector .readout{margin-top:18px}
  .aperture{grid-template-columns:1fr;gap:0}
  .legend>div{grid-template-columns:1fr;gap:6px}
  .law summary{grid-template-columns:30px minmax(0,1fr) 18px}.law__body{grid-template-columns:30px minmax(0,1fr)}.law__body p,.law__body em{grid-column:2}
  .gate-controls{grid-template-columns:1fr}.gate-controls button{border-inline-end:0;border-bottom:1px solid var(--light-rule)}.gate-controls button:last-child{border-bottom:0}
  .message-sheet{padding:30px 22px}.message-sheet p{font-size:clamp(24px,7.5vw,36px)}
  .judgment__tabs{grid-template-columns:1fr}.judgment__tabs button{border-inline-end:0;border-bottom:1px solid var(--rule)}
  .plate__frame{padding:24px 18px}
  .plate__fields{grid-template-columns:minmax(0,auto) minmax(0,1fr)}
  .hypotheses{grid-template-columns:1fr}.fan-lines{display:none}.observation{width:100%}
  .spectra-loop li>button{grid-template-columns:34px minmax(0,1fr);padding:16px 0}.spectra-loop small{grid-column:2}
  .spectra-readout{grid-template-columns:1fr;padding:18px 0 0}.spectra-readout p,.spectra-readout small{grid-column:1}
  .anatomy__list{grid-template-columns:1fr}
  .agent-card dl div{grid-template-columns:1fr;gap:7px}
  .manifest-list div{align-items:flex-start}
  .lineage li{grid-template-columns:1fr;gap:2px}
  /* The dock is one adaptive row. It may carry the three legacy room links in a
     no-script document or the four-room public set once Traces is present; the
     body reservation and touch geometry stay identical either way. */
  .surface-dock{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));width:auto;max-width:none;grid-template-columns:none;grid-template-rows:auto;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);overflow:hidden}
  html[dir="rtl"] .surface-dock{left:8px;right:8px}
  .surface-dock>a{min-height:48px;width:auto;min-width:0;border-inline-end:1px solid rgba(24,24,21,.13);padding:8px 6px;overflow:hidden}
  .surface-dock>a:last-child{border-inline-end:0}
  .footer__inner{grid-template-columns:1fr;gap:24px}
  .prefs{grid-auto-flow:column;justify-content:start;gap:28px}
}

/* ══ Samsung-class phones: Galaxy width family 360 / 384 / 412 CSS px. ══ */
@media (max-width:430px){
  :root{--geo-gutter:18px;--geo-room-y:60px}
  .hero{padding-top:38px}
  .hero__claim{font-size:clamp(34px,10.6vw,44px);line-height:1.055}.hero__title{font-size:clamp(44px,14.8vw,62px)}
  .hero__visual,.systasys-constellation{width:calc(100% - 4px);max-width:26rem}
  .statement{font-size:clamp(31px,9.7vw,42px)}
  .room__head{margin-bottom:30px}
  .segmented button,.node-list button{min-height:44px}
  .segmented button{padding-inline:6px}
  .law summary{gap:9px}
  .quiet-button,.agent-tabs button,.corpus-tabs button,.hyp-controls button,.judgment__tabs button,
  .gate-controls button,.spectra-loop li>button,.region-list button,.lang__select,.prefs__toggle{min-height:44px}
  .gate-specimen,.message-sheet,.hyp-stage{padding-left:18px;padding-right:18px}
  .region-readout h3,.agent-card h3{font-size:clamp(32px,9.8vw,43px)}
  .manifest-list div{display:grid;grid-template-columns:1fr;gap:8px}.manifest-list b{justify-self:start;white-space:normal}
  .plate__frame{padding:20px 15px}
  .surface-dock>a{padding-inline:4px}
  .prefs{gap:20px}
}

@media (max-width:379px){
  :root{--geo-gutter:17px}
  .hero__claim{font-size:clamp(33px,10.4vw,40px)}
  .surface-dock{left:6px;right:6px}.surface-dock>a{padding-inline:3px}
  .prefs{gap:16px}
}

@media (hover:none){
  .hero__visual,.systasys-constellation,.continuity-orbit{filter:none}
  /* Sacrifice order, step 1: backdrop blur is the first thing to go on mobile GPUs. */
  .surface-dock{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--paper)}
}
@media (prefers-reduced-motion:reduce){.hero__visual,.systasys-constellation,.continuity-orbit{transform:none}}

/* Bring the continuity orbit under the same mobile envelope as the other figures,
   so vector label sizing has one predictable scale instead of three. */
@media (max-width:760px){
  .continuity-orbit{width:min(100%,31rem);margin-inline:auto}
}

/* BUNDLE SOURCE: surface-v26.css */
/* HICHEM PUBLIC V2.6 — materiality, hierarchy and the spatial species.
   Loaded after surface-base-v24.css and geometry-v25.css.

   Three jobs, in order:
   1. impose one type and spacing scale over the V2.4 micro-variation;
   2. give each room a species so the page stops repeating one section template;
   3. give the real public artifacts the weight of archival plates. */

:root{
  /* Type scale — 12 / 14 / 16 / 20 / 26 / 42 / 68 / 110. Nothing below 12px exists. */
  --t-micro:12px;
  --t-meta:14px;
  --t-body:16px;
  --t-lede:20px;
  --t-lead:26px;
  --t-object:clamp(30px,3.1vw,42px);
  --t-section:clamp(38px,4.6vw,66px);

  /* Spacing — 8 / 13 / 21 / 34 / 55 / 89 / 144. */
  --s1:8px; --s2:13px; --s3:21px; --s4:34px; --s5:55px; --s6:89px; --s7:144px;

  /* Semantic tints. Named, never re-derived at the point of use. */
  --pass:#4D5842;
  --fail:#A74D2C;
  --plate-mat:rgba(24,24,21,.055);
  --dark-body:rgba(251,248,241,.78);
  --dark-muted:rgba(251,248,241,.60);
}

/* ══════════════════════════════════════════════════════════════
   1. MICRO TYPOGRAPHY — one floor, no drift below it.
   ══════════════════════════════════════════════════════════════ */
.meta,.kicker,.room__aside,.quiet-link,.topbar__inner,.hero__routes a,
.surface-dock,.footer__inner,.tag,.plate__origin{font-size:var(--t-micro)}
.body-copy{font-size:var(--t-body);line-height:1.68}
.lead{font-size:clamp(var(--t-lede),2.1vw,var(--t-lead))}

/* Dark rooms: readable secondary text, and a hover state that gets lighter, never darker. */
.room--dark{color:var(--chalk)}
.room--dark p,.room--dark dd,.room--dark li{color:var(--dark-body)}
.room__aside--light{color:var(--dark-muted)}
.quiet-link--light{color:var(--dark-muted);border-bottom-color:var(--light-rule)}.quiet-link--light:focus-visible{color:var(--gold);border-bottom-color:var(--gold)}
.room--dark .quiet-link{color:var(--dark-muted);border-bottom-color:var(--light-rule)}
.room--dark a{color:inherit}

/* ══════════════════════════════════════════════════════════════
   2. SPATIAL SPECIES — the page stops using one grammar for everything.
   ══════════════════════════════════════════════════════════════ */

/* MONUMENT — occupies the viewport, carries a strong optical centre, says little. */
.room[data-species="monument"] .statement{max-width:12em}

/* CHAMBER — intimate and constrained. */
.room[data-species="chamber"] .statement{font-size:clamp(34px,3.9vw,54px);max-width:13em}

/* STUDY — denser and quieter. Nothing here gets a monument headline. */
.statement--study,.room[data-species="study"] .statement{font-size:clamp(26px,2.6vw,38px);line-height:1.06;letter-spacing:-.028em;max-width:18em}
.room[data-species="study"] .kicker{color:var(--graphite)}
.study-lead{margin-bottom:var(--s5);max-width:44em}
.study-grid{display:grid;align-items:start}
.study-copy{min-width:0}

/* PLATE — the artifact is the section. No headline competes with it. */
.room[data-species="plate"]{border-top:0;background:linear-gradient(180deg,rgba(243,239,228,.6),rgba(238,233,221,.92))}

/* APERTURE — a tonal break, not a dark theme. */
.room[data-species="aperture"] .statement{max-width:14em}

/* SILENCE — generous emptiness. One line has to carry the room. */
.room[data-species="silence"]{border-top:0;background:transparent}
.law-moment{padding-left:clamp(0px,4vw,var(--s6))}
.law-moment .kicker{margin-bottom:var(--s5)}
.law-moment__line{font:400 clamp(30px,4.2vw,58px)/1.14 var(--serif);letter-spacing:-.022em;max-width:16em}
.law-moment__gloss{font:400 var(--t-lede)/1.55 var(--serif);color:var(--graphite);margin-top:var(--s4);max-width:32em}
.law-moment .quiet-link{display:inline-block;margin-top:var(--s5)}

/* ══════════════════════════════════════════════════════════════
   3. THE HALL
   ══════════════════════════════════════════════════════════════ */
.hall__claim-block{min-width:0}
.hall__now{font:400 var(--t-lede)/1.5 var(--serif);color:var(--graphite);margin-top:var(--s4)}
.hall__lead{margin-top:var(--s4)}
.hall__body{margin-top:var(--s3);max-width:36em}
.hall__routes{gap:var(--s2) var(--s4);margin-top:var(--s5);align-items:baseline}
.hall__routes a{display:inline-flex;align-items:baseline;gap:var(--s1);border-bottom:1px solid var(--rule);padding-bottom:5px}
.hall__routes a span{color:var(--gold);font-weight:600}
.hall__routes a b{font-weight:600;color:var(--graphite)}.hall__routes a:focus-visible b{color:var(--ink)}.hall__routes a:focus-visible{border-bottom-color:var(--oxide)}

/* ══════════════════════════════════════════════════════════════
   4. THE THREE DOORS
   ══════════════════════════════════════════════════════════════ */
.doors{display:grid;border-top:1px solid var(--ink)}
.door{display:flex;flex-direction:column;padding-top:var(--s4);padding-bottom:var(--s2)}
.door__kind{font:600 var(--t-micro)/1.35 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--graphite)}
.door__name{font-size:clamp(27px,2.5vw,36px);font-weight:600;letter-spacing:-.03em;line-height:1.05;margin-top:var(--s3)}
.door__line{font:400 var(--t-body)/1.6 var(--serif);color:var(--graphite);margin-top:var(--s2);max-width:26em}
.door__proof{margin-top:var(--s3)}
.door__exits{display:flex;flex-direction:column;gap:var(--s1);margin-top:auto;padding-top:var(--s4)}
.door__exit{font:600 var(--t-micro)/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--graphite);align-self:flex-start;border-bottom:1px solid transparent;padding-bottom:3px}
.door__exit--primary{color:var(--ink);border-bottom-color:var(--rule)}.door__exit:focus-visible{color:var(--oxide-text);border-bottom-color:var(--oxide)}
@media (min-width:1261px){
  .door+.door{padding-inline-start:clamp(28px,3.4vw,55px);border-inline-start:1px solid var(--rule)}
  /* the gutter was carried entirely as leading padding, so card 1 ran 14% wider
     than its two peers and its dividing rule had no clearance */
  .door:first-child{padding-inline-end:clamp(28px,3.4vw,55px)}
  .doors{column-gap:0}
}
@media (max-width:1260px){.door+.door{border-top:1px solid var(--rule)}}

/* ══════════════════════════════════════════════════════════════
   5. LABEL VOCABULARY — five words, used the same way everywhere.
   ══════════════════════════════════════════════════════════════ */
.tag{display:inline-block;font:600 var(--t-micro)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:7px 11px;border:1px solid currentColor;color:var(--graphite)}
.tag--artifact{color:var(--oxide-text)}
.tag--specimen{color:var(--graphite)}
.tag--reconstruction{color:var(--olive)}
.tag--law{color:var(--ink)}
.tag--private{color:var(--oxide-text)}
.tag--open{color:var(--graphite)}
.room--dark .tag{color:var(--dark-muted)}
.room--dark .tag--artifact{color:var(--gold)}

/* ══════════════════════════════════════════════════════════════
   6. THE APERTURE — disclosure stated once, in one place.
   ══════════════════════════════════════════════════════════════ */
.aperture{display:grid;align-items:start;min-height:0;margin-top:var(--s2)}
.aperture__side{min-width:0}
.aperture__label{font:600 var(--t-micro)/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.aperture__side--closed .aperture__label{color:var(--dark-muted)}
.aperture__side{padding:clamp(28px,4vw,55px)}
.aperture__list{list-style:none;margin-top:var(--s3)}
.aperture__list li{font:400 var(--t-body)/1.5 var(--serif);color:var(--dark-body);padding:var(--s2) 0;border-bottom:1px solid var(--light-rule)}
.aperture__side--closed .aperture__list li{color:var(--dark-muted)}
.aperture__legend{margin-top:var(--s6);border-top:1px solid var(--light-rule);padding-top:var(--s4)}
.aperture__legend-lead{font:400 var(--t-body)/1.6 var(--serif);color:var(--dark-body);max-width:40em;margin-bottom:var(--s4)}
.legend{display:grid}
.legend>div{display:grid;align-items:baseline;padding:var(--s2) 0;border-bottom:1px solid var(--light-rule)}
.legend dt{min-width:0}
.legend dd{font:400 var(--t-body)/1.5 var(--serif);color:var(--dark-muted)}

/* ══════════════════════════════════════════════════════════════
   7. ARCHIVAL PLATES — the real material, framed and mounted.
   ══════════════════════════════════════════════════════════════ */
.plate{display:block}
.plate__frame{position:relative;background:var(--chalk);border:1px solid var(--ink);box-shadow:0 var(--s3) var(--s6) rgba(24,24,21,.055)}
.plate__frame::after{content:"";position:absolute;inset:var(--s2);border:1px solid var(--plate-mat);pointer-events:none}
.plate__mast{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2) var(--s3);padding-bottom:var(--s3);border-bottom:1px solid var(--rule);margin-bottom:var(--s4)}
.plate__origin{font:500 var(--t-micro)/1.4 var(--mono);letter-spacing:.05em;color:var(--graphite);overflow-wrap:anywhere}
.plate__body{min-width:0}
.plate__title{font:600 var(--t-micro)/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--graphite)}
.plate__ascii{font:400 clamp(13px,1.15vw,16px)/1.28 var(--mono);color:var(--ink);margin:var(--s4) 0 var(--s3);white-space:pre;overflow-x:auto}
.plate__verdict{font:400 clamp(26px,3.2vw,42px)/1.12 var(--serif);letter-spacing:-.02em;color:var(--ink);margin-bottom:var(--s4);max-width:16em}
.plate__fields{display:grid;border-top:1px solid var(--rule)}
.plate__fields>div{display:contents}
.plate__fields dt,.plate__fields dd{padding:var(--s2) 0;border-bottom:1px solid var(--rule-soft);font:500 var(--t-meta)/1.4 var(--mono)}
.plate__fields dt{letter-spacing:.1em;text-transform:uppercase;color:var(--graphite)}
.plate__fields dd{color:var(--ink);word-break:break-word}
.plate__cmd{margin-top:var(--s4);font:500 var(--t-meta)/1.5 var(--mono);color:var(--graphite)}
.plate__cmd span{letter-spacing:.14em;text-transform:uppercase;font-size:var(--t-micro);margin-right:var(--s2)}
.plate__cmd code{color:var(--ink);background:rgba(24,24,21,.045);padding:4px 8px;overflow-wrap:anywhere}
.plate__section-label{margin-top:var(--s5);font:600 var(--t-micro)/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--oxide-text)}
.plate__list{list-style:none;margin-top:var(--s3)}
/* The list marker is house punctuation, not artifact content: a quiet point,
   and logical geometry so it sits on the correct side in Arabic. It used to be
   an em dash corrected by a later override layer; the correction now lives here,
   where the marker is actually declared. */
.plate__list li{font:400 var(--t-meta)/1.6 var(--mono);color:var(--graphite);padding:var(--s1) 0;padding-inline-start:var(--s3);position:relative;overflow-wrap:anywhere}
.plate__list li::before{content:"·";position:absolute;left:auto;inset-inline-start:0;color:var(--oxide)}
.plate__seal{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--gold);font:600 var(--t-meta)/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.plate__caption{margin-top:var(--s3);font:400 var(--t-body)/1.6 var(--serif);color:var(--graphite);max-width:46em}
.plate__caption code{font:500 var(--t-meta) var(--mono);color:var(--ink)}
.plate__caption--wide{max-width:52em;margin-top:var(--s4)}
.plate__caption--light{color:var(--dark-muted)}
.plate__caption--light code{color:var(--gold)}

/* Machine-readable plates. Hashes and URLs are the one place a hard break is correct. */
.plate__code{font:400 clamp(12px,.95vw,14px)/1.72 var(--mono);color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
.j-k{color:var(--graphite)}
.j-s{color:var(--ink)}
.j-n{color:var(--oxide-text)}
.j-hash{word-break:break-all;border-bottom:1px solid rgba(181,142,79,.55)}
.j-ok{color:var(--pass)}
.j-no{color:var(--fail)}

.plate--dark .plate__frame{background:rgba(251,248,241,.05);border-color:var(--light-rule);box-shadow:none}
.plate--dark .plate__frame::after{border-color:rgba(251,248,241,.07)}
.plate--dark .plate__mast{border-bottom-color:var(--light-rule)}
.plate--dark .plate__origin{color:var(--dark-muted)}
.plate--dark .plate__code{color:var(--dark-body)}
.plate--dark .j-k{color:var(--dark-muted)}
.plate--dark .j-s{color:var(--chalk)}
.plate--dark .j-n{color:var(--gold)}
.plate--dark .j-hash{border-bottom-color:rgba(181,142,79,.6)}

.plate--refused .plate__frame{border-color:var(--oxide)}
.receipt-pair{display:grid;align-items:start;margin-top:var(--s3)}

/* Operational documents keep their blanks. The blanks are the argument. */
.plate__doc{min-width:0}
.plate__doc-note{font:400 var(--t-body)/1.6 var(--serif);color:var(--graphite);padding-bottom:var(--s3);border-bottom:1px solid var(--rule);max-width:40em}
.plate__doc-head{margin-top:var(--s4);font:600 var(--t-micro)/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.plate__doc-list{list-style:none;margin-top:var(--s3)}
.plate__doc-list li{font:400 var(--t-meta)/1.5 var(--mono);color:var(--graphite);padding:var(--s1) 0;border-bottom:1px dotted var(--rule)}
.plate__doc-stop{margin-top:var(--s3);font:500 var(--t-meta)/1.5 var(--mono);color:var(--oxide-text)}
.plate__doc-choice{margin-top:var(--s3);font:600 var(--t-meta)/1.5 var(--mono);letter-spacing:.1em;color:var(--ink)}

/* ══════════════════════════════════════════════════════════════
   8. SMALLER OBJECTS
   ══════════════════════════════════════════════════════════════ */
.recovery-run{display:grid;list-style:none;margin-top:var(--s5);border-top:1px solid var(--ink)}
.recovery-run li{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:baseline;gap:var(--s2);padding:var(--s2) 0;border-bottom:1px solid var(--rule-soft)}
.recovery-run span{font:600 var(--t-micro)/1.4 var(--mono);letter-spacing:.14em;color:var(--gold)}
.recovery-run b{font:600 var(--t-meta)/1.4 var(--sans);letter-spacing:-.01em}

.anatomy{min-width:0}
.anatomy__label{font:600 var(--t-micro)/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--graphite)}
.anatomy__list{display:grid;list-style:none;margin-top:var(--s3);border-top:1px solid var(--ink)}
.anatomy__list li{font:400 var(--t-meta)/1.5 var(--mono);color:var(--ink);padding:var(--s2) 0;border-bottom:1px solid var(--rule-soft)}
.anatomy__test{margin-top:var(--s4)}
.anatomy__test span{display:block;font:600 var(--t-micro)/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--oxide-text)}
.anatomy__test b{display:block;margin-top:var(--s1);font:400 var(--t-lede)/1.35 var(--serif);letter-spacing:-.015em}

/* Intellectual lineage is cited where it did the work, not displayed as a wall. */
.cite{margin-top:var(--s4);padding-inline-start:var(--s3);border-inline-start:2px solid var(--gold);max-width:38em}
.cite--wide{max-width:52em;margin-top:var(--s6)}
.cite__q{font:400 var(--t-lede)/1.4 var(--serif);letter-spacing:-.015em;color:var(--ink)}
.cite__who{margin-top:var(--s1);font:500 var(--t-meta)/1.5 var(--mono);color:var(--graphite)}
.cite__who a{color:var(--oxide-text);text-decoration:none;border-bottom:1px solid var(--rule)}.cite__who a:focus-visible{border-bottom-color:var(--oxide)}
.cite--light .cite__q{color:var(--chalk)}
.cite--light .cite__who{color:var(--dark-muted)}
.cite--light .cite__who a{color:var(--gold);border-bottom-color:var(--light-rule)}

.lineage{display:grid;list-style:none;margin-top:var(--s4);border-top:1px solid var(--ink)}
.lineage li{display:grid;align-items:baseline;padding:var(--s2) 0;border-bottom:1px solid var(--rule-soft)}
.lineage a{font:600 var(--t-meta)/1.4 var(--sans);color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}.lineage a:focus-visible{color:var(--oxide-text);border-bottom-color:var(--oxide)}
.lineage span{font:400 var(--t-meta)/1.4 var(--serif);color:var(--graphite)}

.laws__exit{margin-top:var(--s4)}

/* Corpus status words reuse the same five-label vocabulary. */
.corpus-panel small.tag{margin-top:auto;align-self:flex-start}

/* SPECTRA phases are real buttons now, not focusable list items.
   The base sheet makes the <li> the grid; the control has to be the grid instead,
   or the button is trapped inside a 48px track and its copy wraps one letter per line. */
.spectra-loop{list-style:none}
.spectra-loop li{display:block;padding:0;border-bottom:1px solid var(--light-rule);background:none;box-shadow:none;cursor:auto}.spectra-loop li.is-active{background:none;box-shadow:none}
.spectra-loop li>button{display:grid;width:100%;text-align:start;align-items:baseline;gap:var(--s2);background:transparent;border:0;padding:var(--s3) var(--s2);cursor:pointer;color:inherit}.spectra-loop li>button[aria-checked="true"]{background:rgba(251,248,241,.045);box-shadow:inset 2px 0 var(--gold)}
.spectra-loop li>button span{font:600 var(--t-micro)/1 var(--mono);letter-spacing:.14em;color:var(--dark-muted)}
.spectra-loop li>button b{font:600 var(--t-meta)/1.3 var(--sans);color:var(--chalk)}
.spectra-loop li>button small{font:400 var(--t-micro)/1.4 var(--mono);color:var(--dark-muted)}.spectra-loop li>button[aria-checked="true"] b{color:var(--gold)}
.spectra-loop li>button[aria-checked="true"] span{color:var(--gold)}

/* ══════════════════════════════════════════════════════════════
   9. CHROME — navigation is architecture, preferences are furniture.
   ══════════════════════════════════════════════════════════════ */
.surface-dock{display:grid;background:rgba(243,239,228,.94);border:1px solid rgba(24,24,21,.2);box-shadow:0 var(--s2) var(--s5) rgba(24,24,21,.075);font:600 var(--t-micro)/1.15 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--graphite);min-height:0}
.surface-dock>a{display:flex;align-items:center;justify-content:center;min-height:46px;padding:12px 16px;text-decoration:none;color:inherit;border-inline-end:1px solid rgba(24,24,21,.13)}
.surface-dock>a:last-child{border-inline-end:0}.surface-dock>a:focus-visible{background:rgba(24,24,21,.045);color:var(--ink)}
.surface-dock>a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px var(--gold)}
.surface-dock__home{font-size:16px;letter-spacing:0}

.footer__inner{display:grid;align-items:end;padding-block:var(--s4) var(--s5);max-width:var(--geo-reading);margin-inline:auto;font:600 var(--t-micro)/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--graphite)}
.footer__identity{display:flex;flex-direction:column;gap:var(--s1);min-width:0}
.footer__identity span:first-child{color:var(--ink)}
.prefs{display:grid;align-items:end}
.prefs__group{display:flex;flex-direction:column;gap:6px;margin:0}
.prefs__label{font-size:var(--t-micro);letter-spacing:.16em;color:var(--graphite)}
.prefs__toggle{background:transparent;border:1px solid var(--rule);padding:8px 12px;min-height:34px;font:inherit;line-height:1;font-size:var(--t-micro);letter-spacing:.1em;color:var(--graphite);cursor:pointer}
.prefs__toggle b{color:var(--ink);font-weight:600}

/* ══════════════════════════════════════════════════════════════
   10. MOTION — long, unsynchronised, and never required to read.
   ══════════════════════════════════════════════════════════════ */
body[data-motion="still"] .world>*,
body[data-motion="still"] .pulse,
body[data-motion="still"] .orbit,
body[data-motion="still"] .hero::after{animation:none!important}
body[data-motion="still"] .reveal{opacity:1!important;transform:none!important}

@media (prefers-reduced-motion:reduce){
  .plate__frame{box-shadow:none}
}

/* ══════════════════════════════════════════════════════════════
   11. THE 12px FLOOR — including inside the drawings.

   Vector labels live in viewBox units, so their *rendered* size is
   fs × (renderedWidth / viewBoxWidth). Measured on this build the labels
   were rendering at 4.2–11px. The values below are chosen per figure and
   per width band to land every label between roughly 11px and 14px.
   ══════════════════════════════════════════════════════════════ */
.segmented button{font-size:var(--t-micro);padding:12px 8px}
.node-list button{font-size:var(--t-micro)}
.node-list button span{opacity:1;font-weight:400;color:var(--graphite)}
.readout__meta{font-size:var(--t-micro)}
.gate-specimen dl dt,.gate-specimen dl dd{font-size:var(--t-micro)}
.gate-controls button{font-size:var(--t-micro)}
.gate-controls button b{font-size:var(--t-micro)}
.spectra-readout>span,.spectra-readout>small{font-size:var(--t-micro)}
.agent-card dt{font-size:var(--t-micro)}
.region-list button small,.corpus-panel small,.manifest-list b,.loop-readout>span{font-size:var(--t-micro)}
.hypotheses article small,.observation>span,.judgment__seal>span,.judgment__seal small,
.message-sheet>span,.message-sheet small,.gate-specimen__line span{font-size:var(--t-micro)}

/* vb 620 — home and cabinet hall figures */
.hero__visual text{font-size:14px}
/* vb 760 — SYSTASYS constellation */
.systasys-constellation text{font-size:17px}
/* vb 760 — continuity orbit */
.continuity-orbit text{font-size:14px}
/* vb 1240 — the wide working map */
.home-map__wide text{font-size:18px}
/* vb 340 — the dedicated mobile working map */
.home-map__mobile text{font-size:13px}

@media (max-width:760px){
  .hero__visual text{font-size:16px}
  .systasys-constellation text{font-size:20px}
  .continuity-orbit text{font-size:20px}
}
@media (max-width:543px){
  .hero__visual text{font-size:18px}
  .systasys-constellation text{font-size:22px}
  .continuity-orbit text{font-size:22px}
}
@media (max-width:430px){
  .hero__visual text{font-size:21px}
  .systasys-constellation text{font-size:26px}
  .continuity-orbit text{font-size:26px}
}
/* The check now fails below 12px rather than below 11.5px, and this band was
   landing at 11.7–11.9px between 341 and 400. Boundary moved from 379 to 400 so
   360 and 384 are covered by one step, and the step raised to clear 12px. */
@media (max-width:400px){
  .hero__visual text{font-size:24px}
  .systasys-constellation text{font-size:29px}
  .continuity-orbit text{font-size:30px}
}

/* ══════════════════════════════════════════════════════════════
   12. TOUCH TARGETS — standalone affordances reach 44px on touch widths.
   Links inside running prose are deliberately excluded; WCAG exempts them
   and padding them would break the paragraph rhythm.
   ══════════════════════════════════════════════════════════════ */
.receipt-copy details{margin-top:var(--s4);border-top:1px solid var(--light-rule);padding-top:var(--s3)}
.receipt-copy summary{font:600 var(--t-micro)/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dark-muted);cursor:pointer;padding:var(--s1) 0;list-style:none}
.receipt-copy summary::-webkit-details-marker{display:none}
.receipt-copy summary::before{content:"+ ";color:var(--gold)}
.receipt-copy details[open] summary::before{content:"– "}
.receipt-copy details p{margin-top:var(--s2);font:400 var(--t-body)/1.6 var(--serif)}

@media (max-width:760px){
  .skip{padding:15px 21px}
  .door__exit,.quiet-link,.laws__exit a,.law-moment .quiet-link{display:inline-flex;align-items:center;min-height:44px}
  .receipt-copy summary{min-height:44px;display:flex;align-items:center}
  .prefs__toggle{min-height:44px;padding-inline:16px}
  .segmented button,.node-list button{min-height:44px}
}

/* Remaining floor violations found by measuring the rendered page, not the source. */
.judgment__tabs button,.hyp-controls button,.hypotheses article span,.quiet-button,
.corpus-tabs button,.corpus-panel article>span,.readout small,.readout p,
.region-list button strong,.recovery-run span,.loop-readout>strong,.agent-card .meta,
.region-readout .meta,.manifest-list span,.spectra-loop li>button small{font-size:var(--t-micro)}
.readout p{font-size:var(--t-body)}
.skip{padding:16px 21px}
.law summary>span,.law__body em,.spectra-loop li>button>span,.region-laws span,.region-laws i,
.door__exits a,.plate__list li,.plate__doc-list li{font-size:var(--t-micro)}
.law__body em{font-size:var(--t-meta)}
.plate__list li,.plate__doc-list li{font-size:var(--t-meta)}
.region-list button>span,.corpus-panel article>span,.agent-card dd{font-size:var(--t-micro)}
.agent-card dd{font-size:var(--t-body)}

.meta--note,.spectra-copy .meta{text-transform:none;letter-spacing:.02em;line-height:1.6;max-width:34em}
.corpus-tabs{margin-top:var(--s6)}
@media (max-width:760px){
  .plate__fields dt{padding-right:var(--s3)}
  .plate__fields dd{word-break:break-word}
}

/* ══════════════════════════════════════════════════════════════
   13. SELECTED STATE — the controls became radiogroups, so the
   visual state has to follow aria-checked, not aria-selected.
   ══════════════════════════════════════════════════════════════ */
.segmented button[aria-checked="true"]{background:var(--ink);color:var(--chalk)}
.judgment__tabs button[aria-checked="true"]{background:var(--ink);color:var(--chalk)}
.agent-tabs button[aria-checked="true"]{color:var(--ink);padding-inline-start:10px;box-shadow:inset 2px 0 var(--gold)}
.node-list button[aria-checked="true"],.node-list button.is-active{color:var(--oxide-text);padding-inline-start:10px;padding-inline-end:0;box-shadow:inset 2px 0 var(--oxide)}
[dir="rtl"] .node-list button[aria-checked="true"],[dir="rtl"] .node-list button.is-active{box-shadow:inset -2px 0 var(--oxide)}
.region-list button[aria-checked="true"]{color:var(--ink);padding-inline-start:10px;box-shadow:inset 2px 0 var(--gold)}
.corpus-tabs button[aria-selected="true"]{color:var(--oxide-text);box-shadow:inset 0 -2px var(--oxide)}

/* ══════════════════════════════════════════════════════════════
   14. CONTRAST — measured on the rendered page, not on the palette.

   Gold is an illumination colour. At 2.63:1 on paper it is a mark, a rule or a
   line, never a character a visitor has to read. Everything below either moves
   off gold or moves onto a ground gold can survive.
   ══════════════════════════════════════════════════════════════ */
.hall__routes a span{color:var(--oxide-text)}
.region-laws i{color:var(--graphite)}

/* The capability manifest moved from a dark room to a quiet light one; its status
   tints were chosen for ink and washed out on paper. Re-toned for the new ground. */
.manifest-list{border-top-color:var(--rule)}
.manifest-list div{border-bottom-color:var(--rule)}
.manifest-list b{border-color:var(--rule);color:var(--graphite);font-size:var(--t-micro)}
.manifest-list b[data-state="visible"]{color:var(--graphite)}
.manifest-list b[data-state="proven"]{color:var(--olive);border-color:var(--olive)}
.manifest-list b[data-state="proof"]{color:var(--oxide-text);border-color:var(--oxide)}
.manifest-list b[data-state="future"]{color:#6B5526;border-color:#6B5526}
.manifest-list b[data-state="private"]{color:var(--chalk);background:var(--ink);border-color:var(--ink)}
.manifest-list span{color:var(--ink)}

/* The closing law reads in ink; the gold becomes the rule beside it. */
.manifest-quote{padding-inline-start:var(--s3);border-inline-start:2px solid var(--gold)}
.manifest-quote strong{color:var(--ink);font-weight:600}
.recovery-run span{color:var(--oxide-text)}

/* ══════════════════════════════════════════════════════════════
   15. THE DISTANT WORLD — measured, then rationed.

   Profiled at 412x915 with a 2x device pixel ratio: with the fixed background
   the scroll frame budget was p50 133ms; with it removed, p50 16.7ms. The cost
   is paint, not composite — `worldDust` animates background-position across a
   full-viewport layer and `worldOrbit` transforms a layer full of large radial
   gradients. Both cycles are measured in minutes, so on a touch device nobody
   can perceive what they cost.

   The brief's sacrifice order is followed exactly:
     1. backdrop blur   — dropped for coarse pointers (see geometry-v25.css)
     2. dust motion     — stopped here; the points remain, they stop drifting
     3. orbit motion    — stopped here; the rings remain
     4. grid intensity  — reduced here
   Nothing about content clarity is touched, and the desktop field is untouched.
   ══════════════════════════════════════════════════════════════ */
@media (pointer:coarse),(hover:none){
  .world__dust{animation:none}
  .world__orbits{animation:none}
  .world__grid{opacity:.14}
  .world__haze{opacity:.62}
}
/* The one animation that survives everywhere is composited, so hint it. */
.world__orbits{will-change:transform}

/* ── The dust layer, rebuilt to composite ──────────────────────
   Per-layer isolation at 1440x900 while scrolling:
     all four layers ........ p50 433ms
     minus grid ............. p50 433ms   (the grid is free)
     minus orbits ........... p50 417ms
     minus haze ............. p50 417ms
     minus dust ............. p50  83ms   ← the whole cost is here
     grid alone ............. p50  17ms

   The cause is not the number of points. It is `worldDust` animating
   background-position, which repaints four tiled radial gradients across the
   whole viewport on every frame. Moving the drift onto a child that animates
   `transform` lets the points rasterize once and then be moved by the
   compositor. The parallax keeps the parent transform, so the two never fight.

   The cycle alternates rather than loops, so it never has a seam to hide, and
   at 251s each way the movement is only perceptible as presence. */
.world__dust{background-image:none;animation:none;overflow:hidden}
.world__dust::before{
  content:"";position:absolute;inset:-14%;
  background-image:
    radial-gradient(circle at 11% 23%,rgba(181,142,79,.17) 0 1px,transparent 1.7px),
    radial-gradient(circle at 71% 31%,rgba(77,88,66,.14) 0 1px,transparent 1.55px),
    radial-gradient(circle at 38% 76%,rgba(24,24,21,.105) 0 .8px,transparent 1.45px),
    radial-gradient(circle at 87% 68%,rgba(147,68,39,.1) 0 1px,transparent 1.7px);
  background-size:311px 277px,401px 353px,229px 263px,487px 421px;
  animation:worldDrift 251s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes worldDrift{to{transform:translate3d(-46px,38px,0)}}
body[data-motion="still"] .world__dust::before{animation:none}
@media (prefers-reduced-motion:reduce){.world__dust::before{animation:none}}
@media (pointer:coarse),(hover:none){.world__dust::before{animation:none}}
.loop-readout+.quiet-link{display:inline-block;margin-top:var(--s4)}

/* ── V2.6.1 · plate provenance ─────────────────────────────────
   A plate labelled PUBLIC ARTIFACT has to say whether it is the whole file or
   an extract, otherwise the label promises more than the plate delivers. The
   scope line sits under the origin so the mast keeps its two-part balance. */
/* The mast was a two-part balance: label left, origin right. A flex row with a
   taller right-hand block wraps the label onto its own line and the whole thing
   reads as an accident, so the mast becomes an explicit two-column grid. The
   label now holds its place and the scope line stacks under the origin. */
.plate__mast{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;column-gap:var(--s4)}
.plate__provenance{display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:0;justify-self:end}
.plate__scope{font:400 var(--t-micro)/1.4 var(--mono);letter-spacing:.04em;color:var(--graphite);text-align:right}
.plate--dark .plate__scope{color:var(--dark-muted)}
@media (max-width:760px){
  .plate__mast{grid-template-columns:minmax(0,1fr);gap:var(--s2)}
  .plate__provenance{align-items:flex-start;justify-self:start}
  .plate__scope{text-align:start}
}

/* ── V2.6.1 · the reflow width ─────────────────────────────────
   WCAG 1.4.10 asks content to reflow at 320 CSS px — 1280 at 400% browser zoom.
   Measured there, the vector labels fell to 10.4–10.9px, under this surface's own
   12px floor. This band exists only below 341px, so nothing at any tested device
   width moves. */
@media (max-width:340px){
  .hero__visual text{font-size:27px}
  .systasys-constellation text{font-size:33px}
  .continuity-orbit text{font-size:32px}
  .home-map__mobile text{font-size:15px}
}


/* ══════════════════════════════════════════════════════════════
   16. V2.6.2 · TOUCH TARGETS — the blind spot.

   The audit had been exempting the topbar and the hall/hero route links as
   though they were prose. They are standalone navigation and the declared
   contract is 44px, so they now meet it. Each block is re-proportioned so the
   larger target does not push the composition down:

     topbar     link 18px -> 44px, band padding 21px -> 8px   (bar height held)
     routes     link 20px -> 44px, row gap 13px -> 0          (rule does the separating)
     lineage    link 21px -> 44px, row padding 13px -> 0      (row height held)
   ══════════════════════════════════════════════════════════════ */
@media (max-width:430px){
  .topbar{padding-block:8px}
  .topbar__brand,.topbar__link{display:inline-flex;align-items:center;min-height:44px}

  .hall__routes{row-gap:0}
  .hall__routes a{min-height:44px;align-items:center;padding-bottom:0}

  .lineage li{padding-block:0}
  .lineage a{display:inline-flex;align-items:center;min-height:44px}
}
.plate__doc-note--tight{margin-top:var(--s3);padding-bottom:0;border-bottom:0;font:500 var(--t-meta)/1.5 var(--mono);color:var(--graphite)}
.plate__doc-list--choice li{color:var(--ink);font-weight:500;letter-spacing:.06em}

/* ══════════════════════════════════════════════════════════════
   17. V2.6.2 · the dock must not sit on the opening composition.

   Measured at rest on Samsung widths, the dock band crossed the hero drawing on
   all three routes — 12 of 12 page/width combinations, including the PROBLEM,
   PROOF and PATTERNS labels.

   Two causes, and only the first is a bug:

   1. The dock declared 50px and occupied 94px, because a `grid-template-rows:
      46px 46px` from the six-control era left a dead 48px strip below the three
      links. Fixed in geometry-v25.css. That alone removed half the intrusion.

   2. The rest is inherent: a fixed panel pinned to the fold will cross any hero
      taller than the viewport. Shrinking each drawing to dodge it was tried and
      rejected — it fought each page's geometry, still left 7 of 12 colliding,
      and pushed the vector labels toward the 12px floor.

   So the dock steps aside while the opening composition is on screen and returns
   once the reader is past it. Same three targets, same 44px, same semantics; it
   simply stops lying on the drawing. Without JS the dock stays put, which is the
   behaviour that shipped, so nothing regresses.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:760px){
  .surface-dock{transition:transform .32s cubic-bezier(.2,.75,.2,1),opacity .28s ease}
  body[data-dock="stood-down"] .surface-dock{
    transform:translateY(calc(100% + 24px));
    opacity:0;
    pointer-events:none;
  }
}
@media (prefers-reduced-motion:reduce){
  .surface-dock{transition:none}
}

/* ══════════════════════════════════════════════════════════════
   18. V2.6.2 · linework must not bite a label.

   ASSO found two real intersections the earlier tangency check could not see,
   because that check compared HTML text against whole SVG boxes and never looked
   inside a drawing. On the Cabinet hero six strokes crossed CONSTRAINT; on the
   SYSTASYS constellation five crossed CONTINUITY.

   Offsetting the labels was rejected: both sit on their diagram's vertical axis,
   and the axis itself is one of the crossing strokes, so no position on centre is
   clean and moving off centre breaks the symmetry. Interrupting six paths per
   drawing would edit the artwork.

   So the label carries a halo, which is the standard cartographic remedy and the
   smallest one here. The ground behind both labels was sampled from the render
   before choosing the colour: 93% and 79% of it is a single flat tone one unit
   from --paper, so the halo is invisible and only the strokes are interrupted.
   Applied to these two labels only — everywhere else the drawings are already
   clean, and a site-wide halo would be a new visual language rather than a repair.
   ══════════════════════════════════════════════════════════════ */
.svg-label-shield{
  paint-order:stroke fill;
  stroke:var(--paper);
  stroke-width:5px;
  stroke-linejoin:round;
  stroke-linecap:round;
}

/* ══════════════════════════════════════════════════════════════
   19. V2.7 · THE MARK — the approved SYSTASYS identity, stated once,
       standing on the house's own material.

   The owner decision of 2026-08-20 authorises the existing figurative master
   and the exact Arabic signature for public use as an unregistered identity,
   and authorises no redraw. So both masters are served as files and placed,
   never re-pathed, re-spaced or reconstructed in markup, and the signature is
   real Arabic text so the glyphs join and shape as Arabic rather than as an
   image of Arabic.

   The masters are ivory and matte gold on carbon. Recolouring them for
   parchment was rejected: the gold opening carries meaning and a monochrome
   pass would flatten it.

   WHAT CHANGED IN V2.7, AND WHY.

   V2.6.3 gave the identity its own carbon plinth: a hard-edged black rectangle,
   bordered on four sides, inset inside the reading column, floating on cream,
   with the room's kicker orphaned above it. Every one of those is the signature
   of a pasted card, and the owner read the result as a collage — an image
   mounted onto an editorial page rather than a moment the page arrives at.

   The defect was never the identity. It was that the identity was MOUNTED.

   So the page stops mounting it and changes material instead. The whole closing
   room becomes carbon, edge to edge, and the black is a COURSE in the page's
   masonry rather than a block sitting on it. The change of material happens
   exactly where this site always changes state — on a room boundary — and the
   joint is made with the house's own instruments: a gold hairline at the weight
   the mark already uses above its Arabic signature, and the page's own reading
   column continued as two ivory hairlines straight through the stone. The
   kicker sits ON the material, on the left column line, exactly where every
   kicker on this page sits. The figure keeps its masters and loses only its
   box: no background of its own, no border, no padding. The ground is the room.

   The carbon is the house's own `rgba(24,24,21,.982)` — the same ground as
   `#observes` at the top of this page — not the plinth's private #0B0B0B, so
   the page closes on the stone it opened with. Measured on the result: ivory on
   that ground is ~16:1 and the gold descriptor ~7.5:1.

   Two things were tried and rejected on the renders. A cream-to-carbon dissolve
   read as a photographic fade — it interpolates through a cold neutral grey
   that is off-palette here, and it is a tonal traverse the house has no
   precedent for. A raked perspective floor and scattered points inside the dark
   read as a starfield over a receding plane, which is a product-launch poster,
   and at 412 the plane was hard-cut by the footer into exactly the pasted
   rectangle this pass exists to remove. A tint between the two column lines was
   also rejected: it was above threshold, so the mark visibly sat inside a
   lighter rectangle, which is the card returning by the back door.

   One course, on the one page whose subject is the system, at the point where
   the room closes. Home and Cabinet are untouched: SYSTASYS stays a word there.
   The two masters keep their approved size relationship (wordmark 770 : emblem
   580 in the canonical cover, so emblem = 0.753 x wordmark) and their approved
   size — the field supplies the scale, so the mark does not need to grow.
   ══════════════════════════════════════════════════════════════ */

/* FIELD — the page changes material. The artifact is not ON the section;
   the section is the ground the artifact stands on. */
.room[data-species="field"]{
  /* the house's own carbon, as used by every .room--dark */
  --course-carbon:rgba(24,24,21,.982);
  /* the joint: --gold at the hairline weight the mark already uses for the
     rule above its Arabic signature — one instrument, two scales */
  --course-joint:rgba(181,142,79,.72);
  /* --light-rule: the hairline the house draws inside dark rooms */
  --course-column:rgba(251,248,241,.17);
  /* the page's own reading-column edge, resolved against the full-bleed room */
  --course-bay:calc(max(0px,(100% - var(--geo-reading))/2) + var(--geo-gutter));

  background-color:var(--course-carbon);
  /* the reading column, continued through the course as two hairlines. They are
     open top and bottom and the joints run past them to the page edges, so
     nothing in this section is enclosed on four sides. */
  background-image:
    linear-gradient(var(--course-column),var(--course-column)),
    linear-gradient(var(--course-column),var(--course-column));
  background-size:1px 100%,1px 100%;
  background-position:left var(--course-bay) top 0,right var(--course-bay) top 0;
  background-repeat:no-repeat;
  /* the joints must be a line BETWEEN the two materials, so the carbon is not
     allowed to paint under them */
  background-clip:padding-box;

  /* the two joints run to the page edges, so nothing is outlined */
  border-top:1px solid var(--course-joint);
  border-bottom:1px solid var(--course-joint);
  /* the house's own paper-to-carbon bleed, as on every .room--dark */
  box-shadow:0 -28px 96px rgba(24,24,21,.05),0 28px 96px rgba(24,24,21,.065);

  color:var(--chalk);
  /* a course, not a room: the plate cadence, not the chamber cadence */
  padding-block:clamp(55px,5.5vw,96px);
}

/* The column lines are only true where the reading column is actually a centred
   column. Nearer the page edges they would stop being structure and start being
   a frame, so below that width the course is plain stone. */
@media(max-width:77.99rem){
  .room[data-species="field"]{background-image:none}
}

/* the room's own rhythm, standing on the material */
.room[data-species="field"] .kicker{color:rgba(251,248,241,.62)}

/* The course carries the closing joint, so the footer must not draw a second
   rule one pixel below it. Where :has() is unsupported the only consequence is
   that faint second hairline. */
body:has([data-species="field"]) .footer{border-top-color:transparent}

.seal{
  --seal-ivory:#F2EFE6;
  --seal-gold:#C8A96A;
  --seal-w:clamp(216px,24vw,318px);
  display:grid;
  justify-items:center;
  /* no ground, no border, no padding: the room is the plinth now */
  background:none;
  border:0;
  padding:0;
  color:var(--seal-ivory);
  margin-top:clamp(var(--s4),5vw,var(--s6));
}
.seal__emblem{width:calc(var(--seal-w) * .753);height:auto}
.seal__wordmark{width:var(--seal-w);height:auto;margin-top:var(--s5)}
.seal__caption{display:block;text-align:center;margin-top:var(--s3)}
.seal__descriptor{
  display:block;
  font:500 var(--t-micro)/1.2 var(--mono);
  letter-spacing:.34em;
  text-indent:.34em;
  color:var(--seal-gold);
}
.seal__signature{
  display:block;
  width:calc(var(--seal-w) * .727);
  max-width:100%;
  margin:var(--s3) auto 0;
  padding-top:var(--s4);
  border-top:1px solid rgba(200,169,106,.5);
  font-family:"Noto Sans Arabic","Segoe UI","Tahoma","Arial Unicode MS",sans-serif;
  font-size:clamp(21px,2.2vw,27px);
  line-height:1.85;
  color:var(--seal-ivory);
}

@media(max-width:760px){
  .seal__wordmark{margin-top:var(--s4)}
}


/* ══════════════════════════════════════════════════════════════
   20. V2.6.5 · THE LANGUAGE CONTROL — reachable, native, answering.

   Hichem tested the frozen HEAD on a Samsung and reported the language
   toggle as not clickable. Reproduced, it was three faults wearing one coat.

   It was only in the footer: seven screens down on Home, seventeen on the
   Cabinet at 360px. A control you must fall the length of the page to reach
   is not a control. It now also sits in the topbar, on every route, above
   the fold.

   It gave no acknowledgement: tap highlight suppressed globally, and no
   :active or :focus-visible rule of its own. A tap that worked and a tap
   that did nothing looked the same. Both now answer.

   And it was a pair of buttons, which does not scale past two editions.

   V2.8: it is a native <details> disclosure over seven real routes. A <select>
   could only ever be a JS state toggle — the choice never reached the URL, so a
   browser that refuses localStorage lost it on the next navigation. Seven links
   put the choice in the address bar, where nothing can revoke it, and the
   platform's own disclosure keeps the control to one line and one tap without
   asking JavaScript for permission.
   ══════════════════════════════════════════════════════════════ */
.lang{position:relative;display:inline-flex;align-items:center;min-width:0}
.lang__select{
  display:inline-flex;align-items:center;white-space:nowrap;
  list-style:none;
  background-color:transparent;
  border:1px solid var(--rule);
  border-radius:0;
  color:var(--graphite);
  font:inherit;
  font-size:var(--t-micro);
  letter-spacing:.1em;
  line-height:1;
  padding:7px 26px 7px 10px;
  min-height:34px;
  cursor:pointer;
  touch-action:manipulation;
  /* A hairline chevron, inline, to match the rules the rest of the page draws.
     Filled triangles read heavier than anything else in the chrome. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M1 1.2 4.5 4.6 8 1.2' fill='none' stroke='%23555148' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position:calc(100% - 10px) 50%;
  background-size:9px 6px;
  background-repeat:no-repeat;
  transition:color .18s ease,border-color .18s ease,background-color .18s ease;
}
/* A summary draws a disclosure triangle on every engine. Three arms, because
   no single one of them covers Blink, WebKit and Gecko together. */
.lang__select::-webkit-details-marker{display:none}
.lang__select::marker{content:""}
.lang__select:focus-visible{outline:2px solid var(--oxide);outline-offset:2px;color:var(--ink)}
.lang__select:active{background-color:rgba(24,24,21,.07);color:var(--ink)}

/* Open is a state the reader has to be able to see on a borderless control. */
.lang[open]>.lang__select{
  border-color:var(--rule);color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M1 4.8 4.5 1.4 8 4.8' fill='none' stroke='%23555148' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* The seven editions. A column, not a row: seven endonyms across five scripts
   have no common width, and a row of them is a debug toolbar, not a control.

   The inset is PHYSICAL, and that is not an oversight. The masthead carries
   flex-direction:row-reverse in Arabic, so the control hugs the physical right
   edge in both directions — while inset-inline-end resolves to the LEFT in RTL
   and hung the menu 17px off the right of the screen at 390 and 412. A logical
   property cannot express "the edge nearer the viewport border" when the row it
   sits in has already reversed itself. Measured in both directions at 1440,
   412, 390 and 360. */
.lang__menu{
  position:absolute;top:calc(100% + 6px);right:0;z-index:60;
  max-width:calc(100vw - 24px);
  display:flex;flex-direction:column;min-width:max-content;
  padding-block:4px;
  background:var(--paper);
  border:1px solid var(--rule);
  box-shadow:0 12px 32px -20px rgba(24,24,21,.55);
}
.lang__menu a{
  display:flex;align-items:center;
  min-height:38px;padding-inline:18px;
  font-size:var(--t-micro);letter-spacing:.04em;line-height:1;
  text-transform:none;text-decoration:none;
  color:var(--graphite);
  transition:color .18s ease,background-color .18s ease;
}
/* The edition being read is marked, not removed: a control that hides where you
   already are cannot tell you where you are. */
.lang__menu a[aria-current]{color:var(--ink);box-shadow:inset 2px 0 var(--gold)}
.lang__menu a:focus-visible{outline:2px solid var(--oxide);outline-offset:-2px;color:var(--ink)}
.lang__menu a:active{background-color:rgba(24,24,21,.07);color:var(--ink)}

/* The edition load-failure note and its live region are gone, with the runtime
   switcher that was their only producer. A pre-rendered edition cannot fail
   halfway: either the URL served it, or the navigation did not happen. */

/* The topbar copy is uppercase mono; the code reads as a sibling of SYSTASYS. */
/* Endonyms, not codes: an option reading "AR" but tagged lang="ar" is announced
   as Arabic letters by a screen reader, which is a lie about its own content.
   The names are therefore written in their own script — and uppercase is dropped,
   because it would render "Français" as "FRANÇAIS" and is inert on the other four. */
.lang--top .lang__select{border-color:transparent;padding-inline:6px 26px;letter-spacing:.04em;text-transform:none}.lang--top .lang__select:focus-visible{border-color:var(--rule)}

/* Every other control the finger meets now answers it too. */
.prefs__toggle:active,.surface-dock a:active,.topbar__link:active,.quiet-button:active{background-color:rgba(24,24,21,.07)}
.room--dark .quiet-button:active{background-color:rgba(251,248,241,.09)}

/* Section 20 is appended after the earlier breakpoint blocks and a media query
   carries no extra specificity, so the finger-sized target has to be stated
   here, last, or source order quietly takes it back to 34px. */
@media (max-width:760px){
  .lang__select{min-height:44px;padding-block:0}
  .lang--top .lang__select{padding-inline:10px 26px}
  .lang__menu a{min-height:44px}
}

/* ══════════════════════════════════════════════════════════════
   21. V2.6.5 · THE ARABIC EDITION READS RIGHT TO LEFT.

   Direction is set on the document, so the layout mirrors by itself: the grid,
   the rules, the alignment. Measured at 1440 and 412, nothing overflows. Two
   kinds of content must refuse to mirror, for two different reasons.

   The archival plates reproduce public artifacts unchanged. That is the whole
   claim they make. A JSON receipt or a checklist re-flowed right to left is no
   longer the file it says it is, so the reproduced body keeps its own direction
   whatever the reader's language. The labels this site wraps around it are
   translated, so they are handed back to the page direction.

   Proper nouns are the second. In a right-to-left paragraph a neutral character
   at the edge of a Latin run takes the paragraph's direction, which is why
   "Sendable?" was drawn "?Sendable" — the question mark is part of the name.
   These get their own base direction while staying at the start of the line,
   which is the right edge.
   ══════════════════════════════════════════════════════════════ */
[dir="rtl"] .plate__body,
[dir="rtl"] .plate__doc,
[dir="rtl"] .plate__code,
[dir="rtl"] .plate__ascii,
[dir="rtl"] pre,
[dir="rtl"] code,
[dir="rtl"] .plate__origin{direction:ltr;text-align:left}

/* The labels this site wraps around a reproduced artifact are translated, so
   they read right to left — but they stay aligned with the block they introduce
   rather than drifting to the far edge away from it. */
[dir="rtl"] .plate__body [data-t],
[dir="rtl"] .plate__doc [data-t]{direction:rtl;text-align:left}

/* A Latin brand string inside Arabic prose is a foreign run, and the trailing
   "?" of "Sendable?" is bidi-NEUTRAL: without an isolate it takes the direction
   of the paragraph and is drawn on the left, so the mark reads "?Sendable".
   Measured with a DOM Range over the text node on /ar: 'S' at x=1126, '?' at
   x=1115. .now-mark was the one standalone placement missing from this list.

   This only reaches brand strings that are their own element. The ones embedded
   inside a translated sentence cannot be selected by CSS at all; those are
   isolated at build time with U+2066/U+2069 by tools/build-static-editions.mjs. */
[dir="rtl"] .door__name,
[dir="rtl"] .now-mark,
[dir="rtl"] .topbar__brand,
[dir="rtl"] .topbar__link,
[dir="rtl"] .lineage a,
[dir="rtl"] .cite a{direction:ltr;unicode-bidi:isolate}

/* This rule exists to protect the two pure-Latin URL exits, and it was catching
   the translated ones too — forcing an Arabic call to action to lay out
   left-to-right, which put its arrow on the far side of the phrase. Match only
   the exits that neither carry nor contain a translation key: those are the URLs. */
[dir="rtl"] .door__exit:not([data-t]):not(:has([data-t])){direction:ltr;unicode-bidi:isolate}
[dir="rtl"] .door__name{text-align:right}

/* Arabic sits on a taller body than Latin at the same size, and its ascenders
   and descenders need the room. This is leading, not a redesign. */
[dir="rtl"] body{line-height:1.72}
[dir="rtl"] .body-copy,[dir="rtl"] .lead,[dir="rtl"] .door__line{line-height:1.85}
[dir="rtl"] .statement,[dir="rtl"] .hero__claim,[dir="rtl"] .hero__title{line-height:1.24;letter-spacing:0}
[dir="rtl"] .kicker,[dir="rtl"] .meta,[dir="rtl"] .tag{letter-spacing:.06em}

/* ══════════════════════════════════════════════════════════════
   22. V2.6.5 · COMPOSITION FIXES THAT BELONG TO EVERY EDITION.

   Found while calibrating the seven editions, but none of these is a language
   matter — they are defects in the Latin baseline that the comparison exposed.

   The arrow that lost its space: .door__exit becomes inline-flex at the 44px
   touch breakpoint, and flex discards whitespace-only text nodes. The markup is
   <span data-t>Open the gate</span> → with an ordinary space between, so every
   primary call to action rendered "OPEN THE GATE→" on mobile. Proven by the
   control case in the same capture: arrows that live INSIDE the translated
   string kept their space. .7em restores the Cascadia Mono word space plus the
   .1em tracking that was riding on it.

   The underline that detached: the same 44px conversion centres the label in a
   44px box while border-bottom keeps painting at the bottom of that box, so the
   rule sat some 17-21px under the glyphs and read as a stray line. Moving it to
   text-decoration reattaches it to the text and keeps the target size.

   Widows: three of four section headings ended on a single word. These are
   two-clause headlines whose whole device is the parallel between the clauses.
   .hero__claim is deliberately NOT balanced — its three descending lines and
   .48em indent are an authored staircase, and balancing would flatten it.
   ══════════════════════════════════════════════════════════════ */
.door__exit{column-gap:.7em}

.statement,.statement--study,.door__name,.law-moment__line{text-wrap:balance}
.body-copy,.door__line,.plate__caption,.legend dd,.aperture__list li,
.aperture__legend-lead,.cite__q,.agent-card dd{text-wrap:pretty}

/* the only running text on the site with no measure, at 111 characters —
   40em is the value its own sibling .aperture__legend-lead already carries */
.legend dd{max-width:40em}

/* a proper-noun link label is one unit; it was breaking before its arrow */
.cite__who a,.cite a{white-space:nowrap}

@media (max-width:760px){
  .door__exit--primary,.quiet-link,.laws__exit a,.law-moment .quiet-link{
    border-bottom-color:transparent;
    text-decoration:underline;
    text-decoration-color:var(--rule);
    text-decoration-thickness:1px;
    text-underline-offset:4px;
  }
  /* the desktop hero separates its two sentences with a tonal step AND a .48em
     indent; the indent is dropped here, so the step needs air to survive */
  .hero__claim span:last-child{margin-top:.28em;display:inline-block}
}
@media (max-width:430px){
  .hall__routes a,.topbar__brand,.topbar__link,.lineage a{
    border-bottom-color:transparent;
    text-decoration:underline;
    text-decoration-color:var(--rule);
    text-decoration-thickness:1px;
    text-underline-offset:4px;
  }
}


/* ── V2.6.5 · RTL COMPOSITION, THE PARTS CSS CANNOT MIRROR BY ITSELF ────────
   Direction mirrors the box model. It does not mirror a background image, and
   it does not know that a piece of Latin is a brand rather than a sentence. */

/* The chevron is painted with a physical background-position, so it stayed at
   the physical right edge — which is the inline START in Arabic — while the
   padding reserved its clearance at the other end. It was drawn straight
   through the label. */
[dir="rtl"] .lang__select{
  background-position:10px 50%;
  padding-inline:22px 6px;
}
[dir="rtl"] .lang__menu a[aria-current]{box-shadow:inset -2px 0 var(--gold)}

/* The approved descriptor is a Latin brand string inside the identity plate, not
   prose. text-indent runs toward the inline start, so in Arabic the compensation
   for the trailing letter-space pushed the wrong way and the centred line sat
   off-centre by twice the tracking. It is an invariant object: give it its own
   direction and the indent lands where it was designed to. */
[dir="rtl"] .seal__descriptor{direction:ltr}


/* ── V2.6.5 · THE TOPBAR AT 400% ZOOM ──────────────────────────────────────
   Removing the endonym truncation cap fixed the labels and broke reflow: at
   1280 @ 400% — 320 CSS px, the WCAG 1.4.10 reflow target — brand + route link
   + a full-width select no longer fit on one row, and the select ran to 335px
   in a 320px viewport.

   Truncating again is not available: a language control that says "Engl…" is
   worse than one that wraps. Hiding the route link is not available either,
   even though the dock repeats it — the topbar is the only reachable route out
   on a page that may be fourteen thousand pixels long.

   So the row wraps. Nothing is hidden, nothing is abbreviated, and the control
   keeps its 44px target. Only below 380px, where the alternative is a scrollbar. */
@media (max-width:380px){
  .topbar__inner{flex-wrap:wrap;row-gap:6px}
  .lang--top{margin-inline-start:auto}
}

/* ── V2.6.5 · HOVER IS A CAPABILITY, NOT AN ASSUMPTION ─────────────────────
   25 :hover rules existed and not one capability query. On a touch device the
   last-tapped control kept its hover skin permanently — measured still matching
   :hover after scrolling 400px away. These are the hover arms only: every
   :focus-visible and every selected-state arm stayed where it was, because they
   shared selector lists with these and moving them would have taken keyboard
   focus and the active states with them. */
@media (hover: hover) and (pointer: fine){
  .quiet-link--light:hover{color:var(--gold);border-bottom-color:var(--gold)}
  .room--dark .quiet-link:hover{color:var(--gold);border-bottom-color:var(--gold)}
  .hall__routes a:hover b{color:var(--ink)}
  .hall__routes a:hover{border-bottom-color:var(--oxide)}
  .door__exit:hover{color:var(--oxide-text);border-bottom-color:var(--oxide)}
  .cite__who a:hover{border-bottom-color:var(--oxide)}
  .lineage a:hover{color:var(--oxide-text);border-bottom-color:var(--oxide)}
  .spectra-loop li:hover{background:none;box-shadow:none}
  .spectra-loop li>button:hover{background:rgba(251,248,241,.045);box-shadow:inset 2px 0 var(--gold)}
  [dir="rtl"] .spectra-loop li>button:hover{box-shadow:inset -2px 0 var(--gold)}
  .spectra-loop li>button:hover b{color:var(--gold)}
  .surface-dock>a:hover{background:rgba(24,24,21,.045);color:var(--ink)}
  .prefs__toggle:hover{color:var(--ink)}
  .lang__select:hover{color:var(--ink);border-color:rgba(24,24,21,.28)}
  .lang--top .lang__select:hover{border-color:var(--rule)}
  .lang__menu a:hover{color:var(--ink);background-color:rgba(24,24,21,.05)}
}

/* ── V2.6.5 · THE CONSTELLATION NODES ───────────────────────────────────────
   They are an SVG <g role="link" tabindex="0">, so Chromium's own ring reaches
   them through :focus and stayed painted after a mouse click and after a touch
   tap. The keyboard ring is kept and made the house's own; the pointer ring is
   the one that goes. Not a blanket outline:none. */
.systasys-constellation .hero-node:focus{outline:none}
.systasys-constellation .hero-node:focus-visible{outline:2px solid var(--oxide);outline-offset:6px}

/* The visible mark is 14-16px because that is the drawing. The target is not
   the drawing: a transparent 76x76 rect in the same SVG user space clears 44px
   at every rendered width without changing a single visible pixel. */
.systasys-constellation .hero-node rect.hero-node__hit{fill:none;stroke:none;transform:none;pointer-events:all}

/* 23. STATE HYGIENE — a control that cannot act must not look actionable.
   The motion toggle is force-disabled under prefers-reduced-motion, but kept
   the pointer cursor, so it still invited a press that could do nothing. */
button[disabled],
select[disabled]{cursor:default}
/* off must also LOOK off: the toggle read as live while it could not act */
.prefs__toggle[disabled]{opacity:.45}

/* 24. LANGUAGE CONTROL — PHYSICAL_STABLE (ASSO ruling, 2026-08-20).
   The language selector is global chrome, not directional page content: the
   control the reader just touched must not teleport to the far side of the bar
   because the document direction changed. It was moving 281px on a 412px
   viewport.

   This pins the topbar's LAYOUT, not its text. `direction` stays rtl, so البهو
   still renders right-to-left and every endonym keeps its own script — this is
   NOT the topbar forced to LTR. Only the physical order of the chrome is held.

   The auto margin has to be repinned as well: the base rule is
   margin-inline-end:auto, which resolves to the LEFT under rtl and, in a
   reversed row, flung the state word away from the brand and against the
   wayfinding pair. */
[dir="rtl"] .topbar__inner{flex-direction:row-reverse}
[dir="rtl"] .topbar__state{margin-inline:auto 0}

/* The footer carries the same meta-control and mirrored the same way: measured
   264px of travel at 412px and 664px at 1440px.

   The topbar's row-reverse does NOT work here — .footer__inner is a grid, and
   flex-direction is inert on a grid (measured: 264px of travel remained). An
   `order` swap only reaches 244px/101px because the two grid tracks are sized
   independently. Pinning the two CELLS is the only technique that holds, so
   `direction` is held on the container and immediately restored on every
   text-bearing child: the Arabic label and every endonym still compute
   direction:rtl. The row's placement is pinned; its text is not. */
[dir="rtl"] .footer__inner{direction:ltr}
[dir="rtl"] .footer__identity,
[dir="rtl"] .prefs__group{direction:rtl}

/* 25. RTL ARMS THAT NO LOGICAL PROPERTY CAN EXPRESS.
   box-shadow offsets are physical by specification — there is no logical form —
   so the gold selection bar needs an explicit mirror. Without it the marker sits
   on the far side from where the Arabic eye enters the control. */
[dir="rtl"] .region-list button[aria-checked="true"],
[dir="rtl"] .agent-tabs button[aria-checked="true"],
[dir="rtl"] .spectra-loop li>button[aria-checked="true"]{box-shadow:inset -2px 0 var(--gold)}

/* These arrows are DIRECTIONAL: they mean "proceeds to", so they follow the
   reading direction. Each sits alone in its own <i>, so nothing else flips.
   The exit links keep their glyph — those are Latin URL, brand and citation
   runs, which are not directional and must not mirror. */
[dir="rtl"] .region-laws i{transform:scaleX(-1)}

/* 26. BASELINE REGISTRATION — the reference edition.
   These are 2-6px misregistrations in the English baseline. They matter more
   than their size: every other edition is calibrated against this one, so a
   drift here is inherited seven times over. All are block-direction geometry,
   identical in every edition and in both directions. */

/* SYSTASYS arrow-link sat 2px above the wordmark and the language control — a
   quarter of the 8px cap height, in a row of three items on one baseline. */
.topbar__link{padding-top:4px}

/* .room__aside kept a padding-top:7px calibrated for an 11px aside after the
   aside was raised to 12px, leaving the two ends of the same rule-less row 6px
   out of register on every room head on all three pages. Guarded: below 761px
   the row stacks and the compensation would collide. */
@media (min-width:761px){
  .room__aside{padding-top:0;line-height:1.35}
  .room__aside > .tag{margin-top:-6px}
}

/* Two parallel hairlines 21px apart with dead space between them, the lower one
   twice as dark: the node list drew a closing rule and .readout drew its own. */
.home-map__inspector .node-list button:last-child{border-bottom:0}

/* 27. STATE LIFECYCLE — the states that were never drawn.

   PRESS: on a touch screen there is no hover to acknowledge a finger, so the
   press moment was invisible on every species. Coarse-pointer only. Selected
   chips are excluded — they carry an ink ground already, and washing it drops
   their own label to 1.24:1. */
@media (pointer:coarse){
  .segmented [role="radio"]:not([aria-checked="true"]):active,
  .judgment__tabs [role="radio"]:not([aria-checked="true"]):active,
  .node-list [role="radio"]:active,.agent-tabs [role="radio"]:active,
  .region-list [role="radio"]:active,.corpus-tabs [role="tab"]:active,
  summary:active,.door__exit:active,.quiet-link:active,
  .topbar__brand:active,.hero__routes a:active{background-color:rgba(24,24,21,.07)}
  .room--dark summary:active,.gate-controls button:active,
  .spectra-loop li>button:active{background-color:rgba(251,248,241,.09)}
}


/* ══════════════════════════════════════════════════════════════
   23. V2.7 · THE THRESHOLD — connective tissue at the page openings.

   The house was beautiful and the openings had no joint. The topbar already
   STATED the relationship in words — Hichem Benali · the room you are in ·
   SYSTASYS ↗ — but stated it in a mute material that belonged to nothing else
   on the page, and the page itself was the one box on the site with no entry
   edge, while every .room has one.

   Two motifs. That is the whole system. Both are geometry, both are drawn from
   vocabulary the house already owns, and neither adds a word, an element or a
   translation key.

   M1 · THE THRESHOLD RUN
        One 1px hairline at the foot of the chrome band, inset to the FRAME
        datum — the same left and right edges as the kicker, the claim and the
        hero drawing below it. It is the rhyme of
            .room{border-top:1px solid var(--rule)}
        the house's own "you are crossing into a room" edge, finally applied to
        the page itself. Identical on all three routes, so every route is
        entered across the same line, and for the first time the chrome and the
        content share a datum.

   M2 · THE TWO ANCHORS
        The diagrams' own notation, at micro scale, on the labels that already
        carry the relationship:
            .core   fill var(--ink), stroke var(--gold)   -> the person, the origin
            .node   fill var(--paper), stroke var(--ink)  -> the way out
        Two marks standing on the threshold, at the start of the words they
        belong to, with the room you are in named between them on the same axis.
        `.core` is already on all three routes inside the hero drawings, so this
        is a quotation, not an invention, and the gold is the one micro-accent
        at an opening — on the identity, where the house already puts it.

   Rejected on the renders, and named so they are not tried again: an inline
   open square before SYSTASYS read as an unchecked checkbox in a chrome bar,
   and an inline filled square placed BETWEEN the brand and the room name made
   the one device charged with joining them visually separate them. Re-weighting
   .room{border-top} across every seam of every page was a substrate restyle,
   not a joint at an opening. Register ticks descending from every seam put
   twenty corner marks down a single page, which is ornament.

   Anchoring. .topbar__inner is the topbar's only in-flow child and is a flex
   row with align-items:center, so the topbar's own 50% resolves to the same
   absolute y as every item's cross-axis centre at every width — measured
   identical at 1440, 900, 760, 560, 480, 430, 412 and 360, and the row never
   wraps. That is why one constant offset puts the run and both marks on the
   same line without a magic number per breakpoint, and why the marks stay on
   the line when the labels grow to a 44px touch target on mobile.
   ══════════════════════════════════════════════════════════════ */
.topbar{--thr-drop:22px}

/* M1 · the threshold run */
.topbar::after{
  content:"";
  position:absolute;
  inset-inline:max(
    var(--geo-gutter),
    calc((100% - var(--geo-frame)) / 2 + var(--geo-gutter))
  );
  top:50%;
  margin-top:var(--thr-drop);
  height:1px;
  background:var(--rule);
  pointer-events:none;
}

/* M2 · the two anchors */
.topbar__brand,
.topbar__link{position:relative}

.topbar__brand::after,
.topbar__link::after{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:50%;
  margin-top:calc(var(--thr-drop) - 3px);
  width:7px;
  height:7px;
  box-sizing:border-box;
  border:1px solid var(--ink);
  background:var(--paper);
  pointer-events:none;
}
/* the origin is the core: ink fill, gold stroke — .core, at 7px */
.topbar__brand::after{background:var(--ink);border-color:var(--gold)}

/* BUNDLE SOURCE: type-editions.css */
/* HICHEM PUBLIC — LANGUAGE EDITION PROFILES
   ═══════════════════════════════════════════════════════════════════════════

   A language edition is not the English site with the strings swapped. Each
   writing system arrives with its own density, glyph proportions, rhythm, line
   length, punctuation and breaking rules, and a metric that flatters one script
   can quietly damage another.

   The target here is OPTICAL PARITY, not arithmetic equality: the same
   authority, calm, hierarchy and density in every edition. Where a value is
   right for all seven it is not repeated — silence in this file means "same as
   base", and that is the commonest and most respectable answer.

   Every declaration below exists because something was measured. The reasons
   are kept next to the values, because a number without its reason is the thing
   that gets "tidied up" a year from now.

   What made this file necessary: before it, there was not a single :lang() or
   [lang] selector anywhere in the stylesheets. The Latin display metrics — the
   -0.05em tracking, the sub-1.0 leading, the 12px label floor, the 14em measure
   — were being applied to Han, Kana, Hangul and Arabic without anyone having
   decided that they should be.

   Loaded last, so it wins on source order without needing !important.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── ARABIC ─────────────────────────────────────────────────────────────────
   Direction, shaping and bidi live in section 21 of surface-v26.css. This is
   the type calibration only.

   The serif role was landing on Times New Roman by accident: Georgia and
   Cambria carry no Arabic at all, so every Arabic paragraph fell through the
   stack to the first face that did — and mixed two fonts inside one paragraph
   (measured: Times New Roman x58 runs + Georgia x16 in the same body copy).
   Times New Roman's Arabic is a Latin-metric face: it set the sample line in
   440px with 1087 ink units against Dubai's 491px and 1577, i.e. it was
   carrying about 46% less ink than the English Georgia at the same size, which
   is exactly the loss of authority the parity target forbids.

   The label role was worse, and it was ours: Cascadia Mono contains Arabic and
   monospaces it. Every letter forced into one advance sets the label 49% wider
   and stretches each cursive join into a long flat kashida — the joining looks
   broken because we asked a monospace to set a cursive script. The @font-face
   below is not a download: src:local() names the installed face and the
   unicode-range confines it to Latin, punctuation and symbols, so the Latin
   keeps Cascadia and the Arabic falls through to a proportional face. */
@font-face{
  font-family:"Cascadia Mono Latin";
  src:local("Cascadia Mono"), local("Cascadia Mono Regular");
  unicode-range:U+0000-024F,U+0370-04FF,U+2000-206F,U+2100-21FF,U+2500-25FF,U+2600-27BF;
  font-display:swap;
}
html[lang="ar"]{
  --serif:Georgia,Cambria,"Dubai","Segoe UI","Times New Roman",serif;
  /* Every other edition ends its mono stack with a family that can actually
     draw its script — YaHei for Chinese, Yu Gothic for Japanese, Malgun for
     Korean. Arabic ended with "Segoe UI", which has no weight-900 face, so the
     ACE gate verdict fell past monospace to the browser default and was painted
     in TIMES NEW ROMAN: a Latin serif, inside a component whose entire design
     language is monospace. Measured with CDP CSS.getPlatformFontsForNode on
     /ar/cabinet — 5 glyphs, Times New Roman, at 900; the same element at a
     lighter weight resolved correctly to Segoe UI Semibold, which is why it
     never looked like a font bug.

     Three named Arabic faces with real bold coverage, one per platform, in the
     same shape as the other four editions. */
  --mono:"Cascadia Mono Latin",ui-monospace,"Segoe UI Mono",Consolas,"Segoe UI",Tahoma,"Geeza Pro","Noto Sans Arabic",monospace;
  /* --sans is unchanged: at weight 600 it already resolves to Segoe UI
     Semibold for Arabic, which holds the hero well. */
}
/* Light-on-dark optically thins a stroke, and Arabic strokes are thinner to
   begin with. Measured on carbon at 17px: regular 2392 ink units, medium 2716.
   Applied only to the dark rooms, and only now that the face is a real one. */
html[lang="ar"] .room--dark p,
html[lang="ar"] .room--dark dd,
html[lang="ar"] .room--dark li,
html[lang="ar"] .aperture__list li,
html[lang="ar"] .legend dd,
html[lang="ar"] .plate--dark .plate__caption,
html[lang="ar"] .receipt-copy p{font-weight:500}

/* Arabic has no italic. <em> was being synthetically sheared by the rasterizer,
   which reads as a rendering fault rather than as emphasis. */
html[lang="ar"] .statement em,
html[lang="ar"] .hero__title em,
html[lang="ar"] em{font-style:normal}

/* The version stamp was being reordered in Arabic: "معاينة 2.6.3 · 2026-08-20"
   drawn as "20-08-2026 · 2.6.3 معاينة". The version survived; the date did not.

   direction:ltr on the whole element did NOT fix it, and that is recorded here
   because it looks as though it should. The Arabic word is INSIDE the isolate,
   so UAX#9 rule W2 still reclassifies the digits that follow it as Arabic-Number,
   the hyphens stop binding them into one number, and the three segments reorder.

   The fix is architectural and lives in the markup: a version stamp is an
   invariant artifact, not prose, so it is no longer inside a translated string.
   It sits in its own <bdi>, isolated from whatever precedes it in any edition,
   which is why no language-specific rule is needed here at all. */


/* ── SIMPLIFIED CHINESE ─────────────────────────────────────────────────────
   Nothing was declared, so every Han glyph was placed by whatever the reader's
   browser had set as its Chinese default — the typography of this edition was
   not authored, it was delegated. Naming the faces also closes the Japanese
   fallback risk structurally rather than trusting the lang attribute alone.

   Measured typographic darkness before calibration: hero claim 35.32% ink
   against English 18.35% — 1.92x. Section headings 41.88% against 19.53% in a
   box 38% narrower. That is the density the calibration has to answer. */
html[lang="zh-CN"]{
  --sans:"Segoe UI Variable Display","Segoe UI","YaHei Han","Microsoft YaHei UI","Microsoft YaHei","PingFang SC","Hiragino Sans GB",system-ui,-apple-system,sans-serif;
  --serif:Georgia,Cambria,"Iowan Old Style","Source Han Serif SC","Noto Serif CJK SC","Songti SC","SimSun","NSimSun","Microsoft YaHei UI","Microsoft YaHei",serif;
  --mono:"Cascadia Mono",ui-monospace,"Segoe UI Mono","SF Mono",Menlo,Consolas,"YaHei Han","Microsoft YaHei UI","Microsoft YaHei",monospace;
  /* A Latin cap at 12px is ~8px tall carrying two or three strokes; a Han glyph
     at 12px carries up to twenty inside the same box. The 12px floor was
     measured on Latin and does not transfer. */
  --t-micro:13px;
}
/* Negative tracking is a Latin device: it closes sidebearings between letters
   drawn to sit close. Han glyphs carry almost none to give back — at 66.96px
   the -0.05em removes 3.348px from a gap of roughly 4.7px, leaving measured
   clear gaps of 1-3px and, on the boundary headline, 13 of 14 boundaries at
   zero clear pixels. The glyphs collide. */
html[lang="zh-CN"] .hero__title,
html[lang="zh-CN"] .hero__claim,
html[lang="zh-CN"] .statement,
html[lang="zh-CN"] .statement--study,
html[lang="zh-CN"] .lead,
html[lang="zh-CN"] .big-serif,
html[lang="zh-CN"] .readout h3,
html[lang="zh-CN"] .region-readout h3,
html[lang="zh-CN"] .agent-card h3,
html[lang="zh-CN"] .corpus-panel h3,
html[lang="zh-CN"] .judgment__seal strong,
html[lang="zh-CN"] .message-sheet p,
html[lang="zh-CN"] .law-moment__line{letter-spacing:normal}

/* Microsoft YaHei ships Light 300 / Regular 400 / Bold 700 and no semibold, so
   CSS 600 matched UP to Bold — a full step past what 600 means on Segoe UI
   Variable Display. 500 lands on Regular and restores the intended weight. */
html[lang="zh-CN"] .hero__title,
html[lang="zh-CN"] .hero__claim,
html[lang="zh-CN"] .statement,
html[lang="zh-CN"] .statement--study,
html[lang="zh-CN"] .readout h3,
html[lang="zh-CN"] .region-readout h3,
html[lang="zh-CN"] .agent-card h3,
html[lang="zh-CN"] .judgment__seal strong{font-weight:500}

/* The same synthesis, one tier down and far more damaging: every micro-label on
   the site is 600 mono, and the mono fallback has no bold face at all, so
   DirectWrite smears one. At 12-13px on a glyph carrying fifteen strokes the
   counters fill in and the label stops being legible. */
html[lang="zh-CN"] .kicker,
html[lang="zh-CN"] .meta,
html[lang="zh-CN"] .tag,
html[lang="zh-CN"] .door__kind,
html[lang="zh-CN"] .door__exit,
html[lang="zh-CN"] .plate__title,
html[lang="zh-CN"] .plate__section-label,
html[lang="zh-CN"] .aperture__label,
html[lang="zh-CN"] .quiet-link,
html[lang="zh-CN"] .hero__routes a,
html[lang="zh-CN"] .room__aside,
html[lang="zh-CN"] .topbar__inner,
html[lang="zh-CN"] .surface-dock,
html[lang="zh-CN"] .footer__inner,
html[lang="zh-CN"] .agent-card dt,
html[lang="zh-CN"] .segmented button,
html[lang="zh-CN"] .node-list button,
html[lang="zh-CN"] .region-list button strong,
html[lang="zh-CN"] .prefs__toggle{font-weight:500}
html[lang="zh-CN"] .prefs__toggle b{font-weight:500}
html[lang="zh-CN"] .prefs__toggle{min-width:4.75em}

/* Latin display leading below 1.0 works because caps and x-height sit well
   inside the em. Han fills it: at 66.96px on 69.30px the hero had 2.3px of
   interline space and the lines touched. */
html[lang="zh-CN"] .hero__title{line-height:1.12}
html[lang="zh-CN"] .hero__claim{line-height:1.18}
html[lang="zh-CN"] .statement,
html[lang="zh-CN"] .statement--study{line-height:1.15}
html[lang="zh-CN"] .lead{line-height:1.5}
/* Georgia at 16px puts an 11px ink band into a 25.6px slot; Han fills the full
   16px em, so the same ratio leaves about 40% less interline air. */
html[lang="zh-CN"] body{line-height:1.8}
html[lang="zh-CN"] .body-copy,
html[lang="zh-CN"] .door__line,
html[lang="zh-CN"] .plate__caption,
html[lang="zh-CN"] .aperture__legend-lead{line-height:1.85}
html[lang="zh-CN"] .aperture__list li,
html[lang="zh-CN"] .legend dd,
html[lang="zh-CN"] .agent-card dd{line-height:1.8}

/* Short-label tracking is a real Chinese convention and is kept — but Han has
   no word space to absorb it, and the site is full of two-character labels
   where .17em reads as a gap between two separate words. */
html[lang="zh-CN"] .aperture__label,
html[lang="zh-CN"] .plate__title,
html[lang="zh-CN"] .plate__section-label{letter-spacing:.14em}
html[lang="zh-CN"] .kicker,
html[lang="zh-CN"] .meta,
html[lang="zh-CN"] .topbar__inner,
html[lang="zh-CN"] .surface-dock{letter-spacing:.12em}

/* In CJK 1em is exactly one character, so 14em is fourteen characters per line,
   not the ~30 the same value buys in Latin. */
html[lang="zh-CN"] .statement,
html[lang="zh-CN"] .statement--study{max-width:20em}
html[lang="zh-CN"] .hero__claim{max-width:20em}
html[lang="zh-CN"] .region-readout h3,
html[lang="zh-CN"] .agent-card h3{max-width:16em}

/* Chinese has no italic; <em> was being sheared synthetically. */
html[lang="zh-CN"] em,
html[lang="zh-CN"] .statement em,
html[lang="zh-CN"] .hero__title em{font-style:normal}


/* ── JAPANESE ───────────────────────────────────────────────────────────────
   The house hierarchy is serif body / sans display / mono label. In Japanese
   all three were resolving to one gothic, so the page carried ONE voice where
   English carries three. Georgia leads each stack so Latin runs inside Japanese
   paragraphs keep the house face; the Japanese glyphs then look for a mincho for
   the body and a gothic for display, which is the same distinction in Japanese
   terms rather than a translation of it.

   HONEST LIMIT, verified on this machine: no mincho is installed. C:/Windows/
   Fonts carries YuGoth{B,L,M,R}, msgothic and msyh — and no Yu Mincho, no MS
   PMincho. So on a stock non-Japanese Windows the serif role still falls back to
   a gothic and the Japanese edition carries two voices where English carries
   three. The mincho names are kept because they are correct wherever the face
   exists (Japanese-locale Windows, macOS with Hiragino), and they cost nothing
   where it does not. Closing the gap everywhere would mean shipping a webfont,
   and this site deliberately loads none — that is an owner decision, not a
   thing to smuggle in through a stylesheet. */
html[lang="ja"]{
  --sans:"Segoe UI Variable Display","Segoe UI","Yu Gothic UI","Yu Gothic","Hiragino Sans","Noto Sans JP",system-ui,-apple-system,sans-serif;
  --serif:Georgia,Cambria,"Yu Mincho","YuMincho","Hiragino Mincho ProN","BIZ UDMincho","Noto Serif JP","MS PMincho","Times New Roman",serif;
  --mono:"MonoArrowJA","Cascadia Mono",ui-monospace,"Segoe UI Mono","SF Mono",Menlo,Consolas,"BIZ UDGothic","Yu Gothic UI","Yu Gothic",monospace;
}
/* Equal px is not equal optical size: Segoe UI Variable's cap-height is about
   0.70em, a kanji occupies about 0.88em of its em box, so at identical px the
   Japanese headline reads about a quarter larger and louder. */
html[lang="ja"] .hero__claim{font-size:clamp(40px,4.09vw,67px);line-height:1.28}
html[lang="ja"] .hero__title{font-size:clamp(48px,6.2vw,92px);line-height:1.18}
html[lang="ja"] .statement,
html[lang="ja"] .statement--study{font-size:clamp(34px,4.05vw,58px);line-height:1.26}
html[lang="ja"] .readout h3,
html[lang="ja"] .region-readout h3,
html[lang="ja"] .agent-card h3,
html[lang="ja"] .corpus-panel h3{line-height:1.30}
html[lang="ja"] .judgment__seal strong{line-height:1.25}
/* the large serif lines become mincho, which conventionally takes more 行間 */
html[lang="ja"] .law-moment__line,
html[lang="ja"] .plate__verdict,
html[lang="ja"] .message-sheet p,
html[lang="ja"] .anatomy__test b,
html[lang="ja"] .big-serif{line-height:1.50}
html[lang="ja"] .cite__q{line-height:1.60}
html[lang="ja"] body{line-height:1.8}
html[lang="ja"] .body-copy,
html[lang="ja"] .door__line,
html[lang="ja"] .aperture__legend-lead,
html[lang="ja"] .plate__caption{line-height:1.85}

/* A Japanese glyph is drawn inside a full em box with a built-in inset, so
   negative tracking cuts into the glyph's own breathing room rather than into
   sidebearing. palt is the typographically correct instrument: it applies the
   font's own proportional metrics instead of a blanket subtraction. */
html[lang="ja"] .hero__claim,
html[lang="ja"] .hero__title,
html[lang="ja"] .statement,
html[lang="ja"] .statement--study,
html[lang="ja"] .region-readout h3,
html[lang="ja"] .agent-card h3,
html[lang="ja"] .judgment__seal strong,
html[lang="ja"] .lead,
html[lang="ja"] .big-serif,
html[lang="ja"] .law-moment__line,
html[lang="ja"] .plate__verdict,
html[lang="ja"] .cite__q,
html[lang="ja"] .anatomy__test b{letter-spacing:normal;font-feature-settings:"palt" 1}

/* Yu Gothic's installed ramp is 300/400/500/700, so 600 resolved UP to Bold
   while English got a true 600. Yu Gothic UI leads the stack for this reason;
   500 keeps the display tier off the synthesised step. */
html[lang="ja"] .hero__claim,
html[lang="ja"] .hero__title,
html[lang="ja"] .statement,
html[lang="ja"] .statement--study{font-weight:500}

/* line-break:auto resolves to `normal` for Japanese, the LOOSEST prohibition
   set, which explicitly permits a break before the prolonged sound mark ー,
   small kana and 〜. strict resolves those to non-starters. This is kinsoku. */
html[lang="ja"]{line-break:strict}

/* Japanese has no italic; a sheared kanji reads as a rendering fault. The
   second voice comes from the mincho/gothic switch instead. */
html[lang="ja"] em,
html[lang="ja"] .statement em,
html[lang="ja"] .hero__title em{font-style:normal}

/* Japanese has no spaces, so the breaker deposits one- and two-glyph last
   lines at any permitted boundary. */
html[lang="ja"] .statement,
html[lang="ja"] .statement--study,
html[lang="ja"] .aperture__legend-lead,
html[lang="ja"] .plate__verdict,
html[lang="ja"] .anatomy__test b,
html[lang="ja"] .cite__q,
html[lang="ja"] .law-moment__line{text-wrap:balance}
html[lang="ja"] .body-copy,
html[lang="ja"] .door__line,
html[lang="ja"] .plate__caption,
html[lang="ja"] .legend dd,
html[lang="ja"] .aperture__list li{text-wrap:pretty}

/* The five legend labels are 7/2/3/3/4 glyphs in Japanese against 15/8/14/11/7
   characters in English, so the chips came out at wildly different widths and
   the legend lost its column. */
html[lang="ja"] .legend dt .tag{min-width:10.5em;text-align:center}


/* ── KOREAN ─────────────────────────────────────────────────────────────────
   No Korean family was named anywhere, so every Hangul glyph was placed by
   last-resort fallback — and Georgia was still winning the Latin runs inside
   the same paragraph, so body copy was being set in two faces at once
   (measured: Malgun Gothic x30 runs + Georgia x13). */
html[lang="ko"]{
  --sans:"Segoe UI Variable Display","Segoe UI","Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --serif:Georgia,Cambria,"Iowan Old Style","Batang","Gungsuh","Nanum Myeongjo","Noto Serif KR","Malgun Gothic","Apple SD Gothic Neo","Times New Roman",serif;
  --mono:"Cascadia Mono",ui-monospace,"Segoe UI Mono","SF Mono",Menlo,Consolas,"Malgun Gothic","Apple SD Gothic Neo",monospace;
}
/* The single most damaging defect in this edition, and it is Korean-specific.
   Korean is a spaced script: the eojeol — word plus its particle — is the
   reading unit. UAX#14 treats Hangul syllables as ID and allows a break between
   any two of them, so words were being torn mid-eojeol in every one of the
   seven captured locations. keep-all restores the space as the break point. */
html[lang="ko"] body{word-break:keep-all;overflow-wrap:break-word}
/* The plates reproduce Latin artifacts, and their repo paths and URLs must keep
   exactly the breaking they have in every other edition. */
html[lang="ko"] .plate__body,
html[lang="ko"] .plate__doc,
html[lang="ko"] .plate__code,
html[lang="ko"] .plate__ascii,
html[lang="ko"] .plate__origin,
html[lang="ko"] pre,
html[lang="ko"] code,
html[lang="ko"] .lineage a{word-break:normal;overflow-wrap:anywhere}

/* A Hangul syllable block occupies ~0.95em of the em box against Latin display
   text's ~0.75em, so at an identical line-height the Korean lines lost almost
   all their interline white: measured 1px of white on a 64px pitch against
   English's 15px. */
html[lang="ko"] .hero__claim,
html[lang="ko"] .hero__title,
html[lang="ko"] .statement,
html[lang="ko"] .statement--study{line-height:1.22}
html[lang="ko"] .readout h3,
html[lang="ko"] .region-readout h3,
html[lang="ko"] .agent-card h3,
html[lang="ko"] .corpus-panel h3,
html[lang="ko"] .law-moment__line,
html[lang="ko"] .judgment__seal strong{line-height:1.3}
html[lang="ko"] body{line-height:1.75}
html[lang="ko"] .body-copy,
html[lang="ko"] .door__line,
html[lang="ko"] .aperture__legend-lead,
html[lang="ko"] .plate__caption{line-height:1.8}

/* 0.9 on the display tier only. Malgun Gothic ships Regular and Bold with no
   semibold, so 600 synthesises toward Bold and the Korean display tier ran
   both larger in apparent size and heavier than the English it sits beside. */
html[lang="ko"] .hero__claim{font-size:clamp(41px,4.2vw,68px)}
html[lang="ko"] .hero__title{font-size:clamp(49px,6.3vw,94px)}
html[lang="ko"] .statement,
html[lang="ko"] .statement--study{font-size:clamp(34px,4.15vw,59px)}
/* NOT font-weight:500. Malgun Gothic's installed ramp is 300/400/700 — there is
   no 500 and no 600 — so 500 matches DOWN to Regular while English gets a true
   variable 600, and the edition came out measurably lighter than the house:
   hero stem 5.0px against 9.0px, ink 13.15% against 19.31% on the carbon
   Boundary headline. The size correction above is right and stays; the weight
   correction was wrong and the base 600 is restored. */
html[lang="ko"] .hero__claim,
html[lang="ko"] .hero__title,
html[lang="ko"] .statement,
html[lang="ko"] .statement--study{font-weight:600}

/* In Hangul the syllable block IS the reading unit and the gap between blocks
   carries the word boundary. Negative tracking closes the wrong gap. */
html[lang="ko"] .hero__claim,
html[lang="ko"] .hero__title,
html[lang="ko"] .statement,
html[lang="ko"] .statement--study,
html[lang="ko"] .region-readout h3,
html[lang="ko"] .agent-card h3,
html[lang="ko"] .lead,
html[lang="ko"] .law-moment__line{letter-spacing:normal}

/* text-transform:uppercase is inert on Hangul, so tracking was the only thing
   left carrying the label register — but .24em between complete syllable
   blocks reads as a word space: 공개 became 공 개. */
html[lang="ko"] .aperture__label{letter-spacing:.08em}
html[lang="ko"] .meta,
html[lang="ko"] .kicker,
html[lang="ko"] .room__aside,
html[lang="ko"] .quiet-link,
html[lang="ko"] .hero__routes a,
html[lang="ko"] .footer__inner,
html[lang="ko"] .surface-dock,
html[lang="ko"] .anatomy__label,
html[lang="ko"] .anatomy__test,
html[lang="ko"] .plate__section-label,
html[lang="ko"] .prefs__label,
html[lang="ko"] .door__kind,
html[lang="ko"] .topbar__state,
html[lang="ko"] .readout__meta,
html[lang="ko"] .plate__scope,
html[lang="ko"] .plate__title,
html[lang="ko"] .corpus-tabs button,
html[lang="ko"] .agent-tabs button,
html[lang="ko"] .segmented button,
html[lang="ko"] .tag{letter-spacing:.06em}

/* '켬' is one syllable where 'Live' is four letters, so the toggle collapsed to
   a 37x32 near-square beside a 103px select and stopped reading as a labelled
   control. A minimum inline size restores the silhouette; dropping the tracking
   removes the trailing letter-space that pushes a single centred glyph off centre. */
html[lang="ko"] .prefs__toggle{min-width:4.75em;letter-spacing:normal}

/* Georgia has no Hangul and Malgun Gothic has no italic, so <em> was rendering
   as a synthetic oblique — the Korean half of seven Cabinet headings was
   slanted Hangul, which Korean typography does not use for emphasis. */
html[lang="ko"] em,
html[lang="ko"] .statement em,
html[lang="ko"] .hero__title em{font-style:normal}

html[lang="ko"] .statement,
html[lang="ko"] .statement--study,
html[lang="ko"] .law-moment__line{text-wrap:balance}


/* ── SPANISH ────────────────────────────────────────────────────────────────
   Same script, same faces, same metrics — the font stack and the type scale are
   deliberately unchanged. Spanish only runs longer than English, and every
   correction below is about that length, not about the script. */
@media (min-width:1261px){
  /* the three-door row lost its baseline: door 1 sets two lines where doors 2
     and 3 set three, hanging its tag chip 26px above the others */
  html[lang="es"] .door__line{min-height:4.8em}
  /* the third card ran a line shorter, so the fan lost its baseline */
  html[lang="es"] .hypotheses article p{min-height:4.5em}
}
@media (min-width:761px){
  /* «Artefacto público» needs 172px against a 160px cap, so the first legend
     chip broke to two lines and stood 40px tall beside four 28px chips */
  html[lang="es"] .legend>div{grid-template-columns:minmax(120px,11.5rem) minmax(0,1fr)}
}
@media (max-width:400px){
  /* «Sistemas · pensamiento · obra escogida» wrapped and stranded one word
     directly above the hero claim — the first thing on the page */
  html[lang="es"] .hero .kicker{letter-spacing:.10em}
}
/* the Spanish scope line needs 451px in a 436px column; the tracking is the
   part that is decorative here, so it is the part that goes */
html[lang="es"] .plate__scope{letter-spacing:normal}


/* ── FRENCH ─────────────────────────────────────────────────────────────────
   Font stack and metrics unchanged: French adds only Latin-1, the oe ligature,
   guillemets and the narrow no-break space to the English repertoire, and all
   three faces carry them. French runs longer than English, so it widows more at
   the same measure — which the base text-wrap rules in section 22 now handle
   for every edition. The French-specific work was in the copy: the typographic
   apostrophe and the narrow no-break space before high punctuation. */


/* ── ENGLISH ────────────────────────────────────────────────────────────────
   The source edition. Its one profile-level change is the mono role: the stack
   led with ui-monospace, which Chromium maps to Cascadia Mono on Windows 11 but
   to Consolas on Windows 10. Those two differ in x-height and stroke weight,
   and mono carries every kicker, tag, plate field and route label on this site
   — so the same page had two different typographic densities depending on the
   reader's OS build. Naming the face makes the label tier deterministic. */
:root{
  --mono:"Cascadia Mono",ui-monospace,"Segoe UI Mono","SF Mono",Menlo,Consolas,monospace;
}


/* ── THE HERO CLAIM, EVERY EDITION BUT ENGLISH ──────────────────────────────
   Section 22 of surface-v26.css deliberately withholds text-wrap:balance from
   .hero__claim to protect the English staircase — three descending lines and a
   .48em indent that are authored, not accidental. That exclusion is right for
   English and wrong for everyone else: four reviewers reported the same line as
   four different symptoms.

   Measured at 1440, last line as a share of the measure, without / with balance:
     fr    12% -> 59%   the orphan "lui." rejoins "autour de lui."
     zh-CN 23% -> 68%   孤字 "西。" rejoins "它造出东西。"
     ja    22% -> 68%   the stub "ける。" rejoins its clause
     es    46% -> 59%
     ar    84% -> 84%   no effect; already composed
     ko    76% -> 76%   no effect; already composed
     en    43% -> 68%   which is precisely the staircase being flattened

   So the fix is real for six editions and harmful for the seventh. It is scoped
   by :not([lang="en"]) rather than applied to all and then walked back, because
   the English exclusion is the deliberate one. Same house, not same coordinates. */
html:not([lang="en"]) .hero__claim{text-wrap:balance}

/* The legend label track is sized against a 155px Latin chip. Arabic tags run
   roughly half that, so 80-115px of the column stood empty between each label
   and its value. Retuned to clear the widest measured Arabic chip (80.9px) with
   23px to spare — these are legend tags, never language endonyms, so nothing
   here can truncate a language name. Mirrors the Spanish override above, which
   corrects the same track in the opposite direction. */
@media (min-width:761px){
  html[lang="ar"] .legend>div{grid-template-columns:minmax(88px,6.5rem) minmax(0,1fr)}
}

/* -- ENGLISH --
   English is otherwise the unwritten base of this file. These two are optical
   calls on where a line breaks, not script calibration, and they are scoped
   here so no other edition inherits an English rag decision. */

/* The h1 is the only display block on the site that does not carry the
   balancing the house already applies to every h2 and to the law line. Applied
   to the first sentence only: on .hero__claim itself it would flatten the
   authored descending staircase. */
html[lang="en"] .hero__claim span:first-child{text-wrap:balance}

@media (min-width:761px){
  /* the break fell inside a clause and the sentence boundary landed mid-line-2,
     in the section that argues most precisely about what is and is not shown.
     A wrapping measure, not a truncating cap. */
  html[lang="en"] .room[data-species="aperture"] .statement{max-width:11em;text-wrap:pretty}
}

/* -- JAPANESE, continued --
   The exit arrow came from a fallback face and set ~30% larger than the house
   arrow. Confining a named symbol face to the four arrow codepoints fixes the
   glyph without touching a single Japanese character. */
@font-face{font-family:"MonoArrowJA";src:local("Segoe UI Symbol"),local("Consolas");unicode-range:U+2196-2199;font-display:block}

/* balance, not pretty: pretty is measurably weak for Japanese, so the pretty
   list above is trusted to do work it does not do. */
html[lang="ja"] .hero__title,
html[lang="ja"] .lead,
html[lang="ja"] .big-serif,
html[lang="ja"] .verdict-copy,
html[lang="ja"] .readout h3,
html[lang="ja"] .region-readout h3{text-wrap:balance}

/* the door wordmark is Latin: give it back Latin tracking after the Japanese
   group above stopped claiming it */
html[lang="ja"] .door__name{letter-spacing:-.03em;font-feature-settings:normal}

/* archival reproductions must keep the English metrics exactly -- they are
   evidence, not typography we are free to recompose */
html[lang="ja"] .plate__body,
html[lang="ja"] .plate__doc{line-height:1.55}
html[lang="ja"] .plate__body .plate__verdict{line-height:1.12;letter-spacing:-.02em;font-feature-settings:normal}

/* a FLOOR at the widest natural Japanese chip, never a cap */
html[lang="ja"] .door .tag{min-width:9.5em;text-align:center}

/* -- KOREAN, continued --
   .24em between complete syllable blocks reads as a word space. The label tier
   was only half corrected; these are the rest of it. The fifth selector is
   deliberately narrowed to .verdict so the Latin ACE RECEIPT beside it keeps
   its own tracking. */
html[lang="ko"] .anatomy__test span,
html[lang="ko"] .message-sheet>span,
html[lang="ko"] .judgment__seal>span,
html[lang="ko"] .receipt-copy summary,
html[lang="ko"] .gate-specimen__line .verdict,
html[lang="ko"] .loop-readout>span{letter-spacing:.06em}

/* -- CHINESE, continued --
   Han is graphic mass: the selector's own value sat against the inline-start
   wall with 42-54px of void before the chevron. Centring the value costs no
   width, so the control stays the same size in every edition and the
   PHYSICAL_STABLE position holds. No width is set here, so nothing truncates. */
html[lang="zh-CN"] .lang__select{text-align:center;text-align-last:center}

/* one-glyph last lines throughout: Han has no spaces, so the UA breaks
   anywhere and strands single characters */
html[lang="zh-CN"] p,
html[lang="zh-CN"] li,
html[lang="zh-CN"] dd,
html[lang="zh-CN"] small,
html[lang="zh-CN"] .lead,
html[lang="zh-CN"] .big-serif{text-wrap:pretty}
html[lang="zh-CN"] .agent-card h3,
html[lang="zh-CN"] .cite__who,
html[lang="zh-CN"] .law-moment__line{text-wrap:balance}

/* the serif display group sat too tight once a real serif face was named */
html[lang="zh-CN"] .law-moment__line,
html[lang="zh-CN"] .plate__verdict,
html[lang="zh-CN"] .message-sheet p,
html[lang="zh-CN"] .big-serif{line-height:1.38}

/* -- SPANISH, continued -- */
/* "Un gabinete de" stranded "de" on its own line: the Spanish title is longer
   than the English it was sized for. Cabinet only -- the SYSTASYS wordmark is
   untouched. */
html[lang="es"] [data-room="cabinet"] .hero__title{font-size:clamp(58px,6.3vw,95px)}
@media (max-width:760px){
  html[lang="es"] [data-room="cabinet"] .hero__title{font-size:clamp(44px,14.2vw,68px)}
}
/* max-width prevents the rag regression that balance alone introduces */
html[lang="es"] .region-readout h3{max-width:12.5em;text-wrap:balance}

/* -- FRENCH, continued --
   French runs longer than English almost everywhere; these are length
   corrections, not script calibration. */
html[lang="fr"] .hero__title{line-height:.92}
html[lang="fr"] .aperture__legend-lead{text-wrap:balance}
html[lang="fr"] .verdict-copy{text-wrap:balance}

/* Han carries no weight between Regular and Bold on a stock Windows, so the
   whole heavy display tier collapsed onto one weight and the hierarchy with it.
   Splitting the family by weight range gives 600 a Regular and 700 a Bold, which
   is the contrast the design assumes. unicode-range is CJK-only and the family
   is referenced solely from the zh block, so no other edition can reach it. */
@font-face{font-family:"YaHei Han";src:local("Microsoft YaHei UI"),local("Microsoft YaHei");unicode-range:U+2E80-303F,U+3040-9FFF,U+3400-4DBF,U+F900-FAFF,U+FE30-FE4F,U+FF00-FFEF;font-weight:100 600;font-display:swap}
@font-face{font-family:"YaHei Han";src:local("Microsoft YaHei UI Bold"),local("Microsoft YaHei Bold");unicode-range:U+2E80-303F,U+3040-9FFF,U+3400-4DBF,U+F900-FAFF,U+FE30-FE4F,U+FF00-FFEF;font-weight:700 900;font-display:swap}
html[lang="zh-CN"] .corpus-panel h3{font-weight:500}

/* BUNDLE SOURCE: surface-public-polish.css */
/* HICHEM PUBLIC · final public-surface polish.
   This layer is intentionally small and loaded last. What used to live here
   was source repair applied from outside: hiding the preview/version stamp
   and correcting a list marker declared as an em dash. Both are now fixed
   where they are declared, so only script-specific corrections and bounded
   public-page additions live here. */

/* Evidence captures. The other plates reproduce an artifact as live text, which
   is the honest form when the artifact is text we control. A capture of a
   historical render, or of somebody else's public page, cannot be retyped
   without becoming a reconstruction of it, so those plates carry a raster and
   say so in the mast. The image is the artifact; it is never annotated, and it
   keeps the same frame, mast and caption as every other plate.
   Kept LTR in every edition: the pixels are a fixed record, not copy. */
.plate__capture{display:block;width:100%;height:auto;border:0}
[dir="rtl"] .plate__body--capture{direction:ltr}

/* Arabic SVG labels need Arabic geometry, not merely Arabic strings.
   The base node layout was authored LTR: a positive-x label grows to the right
   and a negative-x/end label grows to the left. Under RTL those growth
   directions reverse and the words run back through the node marker. Reversing
   the anchors restores the intended clearance while keeping every path and node
   at exactly the same coordinates. */
html[lang="ar"] svg text[data-t]{
  direction:rtl;
  unicode-bidi:plaintext;
  font-family:"Segoe UI",Tahoma,Arial,sans-serif;
  letter-spacing:0;
  text-transform:none;
}
html[lang="ar"] .hero__visual .node text[data-t]:not([text-anchor]),
html[lang="ar"] .home-map__mobile .node text[data-t]:not([text-anchor]){
  text-anchor:end;
}
html[lang="ar"] .hero__visual .node text[data-t][text-anchor="end"],
html[lang="ar"] .home-map__mobile .node text[data-t][text-anchor="end"]{
  text-anchor:start;
}

/* Invariant Latin names inside Arabic diagrams remain LTR. This is deliberately
   narrow: translated or dynamic station labels elsewhere are not captured here. */
html[lang="ar"] .home-map__visual .node text:not([data-t]),
html[lang="ar"] .systasys-constellation .hero-node text:not([data-t]){
  direction:ltr;
  unicode-bidi:isolate;
}

/* Legal and privacy surface.
   Same material language as the rest of HICHEM PUBLIC: paper, rule, graphite,
   oxide and measured space. No legal-template white box is introduced. */
body[data-room="legal"] .topbar__state{
  color:var(--oxide-text);
}
body[data-room="legal"] .surface-dock a{
  white-space:nowrap;
}

.legal-hero{
  padding-top:clamp(5rem,10vw,9rem);
  padding-bottom:clamp(4rem,8vw,7rem);
  border-bottom:1px solid var(--rule);
}
.legal-hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(18rem,.95fr);
  align-items:center;
  gap:clamp(2.5rem,7vw,7rem);
}
.legal-hero__claim{
  max-width:11ch;
  margin-top:clamp(1.1rem,2.5vw,2rem);
}
.legal-hero__claim span{
  display:block;
}
.legal-hero__lead{
  max-width:31rem;
  margin-top:clamp(1.5rem,3vw,2.25rem);
  font-family:var(--serif);
  font-size:clamp(1.08rem,1.8vw,1.35rem);
  line-height:1.55;
  color:var(--graphite);
}
.legal-mark{
  margin:0;
  min-width:0;
}
.legal-mark svg{
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
}
.legal-mark__frame,
.legal-mark__rule,
.legal-mark__trace{
  fill:none;
  vector-effect:non-scaling-stroke;
}
.legal-mark__frame{stroke:var(--rule);stroke-width:1}
.legal-mark__rule{stroke:var(--rule-soft);stroke-width:1}
.legal-mark__trace{stroke:var(--oxide);stroke-width:1.4}
.legal-mark__node{fill:var(--paper);stroke:var(--ink);stroke-width:1.4}
.legal-mark text{
  fill:var(--graphite);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.13em;
}

.legal-room{
  padding-block:clamp(4rem,8vw,7.5rem);
  border-bottom:1px solid var(--rule);
}
.legal-room__head{
  margin-bottom:clamp(2.5rem,5vw,4.5rem);
}
.legal-ledger{
  border-top:1px solid var(--ink);
}
.legal-ledger__row{
  display:grid;
  grid-template-columns:minmax(9rem,.34fr) minmax(0,1fr);
  gap:clamp(1.5rem,5vw,5rem);
  padding-block:clamp(1.35rem,2.5vw,2rem);
  border-bottom:1px solid var(--rule);
}
.legal-ledger__key,
.legal-boundaries__label,
.legal-card__index,
.legal-updated,
.legal-footer-note{
  font-family:var(--mono);
  font-size:.68rem;
  line-height:1.45;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.legal-ledger__key{color:var(--graphite)}
.legal-ledger__row strong{
  display:block;
  margin-bottom:.45rem;
  font-size:clamp(1rem,1.45vw,1.15rem);
}
.legal-ledger__row p,
.legal-host address,
.legal-card p,
.legal-card li,
.legal-boundaries p,
.legal-english p{
  color:var(--graphite);
  line-height:1.65;
}
.legal-source{
  max-width:56rem;
  margin-top:clamp(2rem,4vw,3.25rem);
  padding-top:1rem;
  border-top:1px solid var(--rule-soft);
  font-family:var(--mono);
  font-size:.73rem;
  line-height:1.65;
  color:var(--graphite);
}
.legal-source a,
.legal-references a{
  color:var(--ink);
  text-underline-offset:.24em;
  text-decoration-thickness:1px;
}

.legal-host{
  position:relative;
  padding:clamp(2rem,5vw,4rem);
  border:1px solid var(--rule);
  background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(24,24,21,.018));
}
.legal-host::before{
  content:"";
  position:absolute;
  inset:1rem auto 1rem 1rem;
  width:2px;
  background:var(--gold);
}
.legal-host__name{
  margin:0 0 1rem;
  font-size:clamp(1.4rem,3vw,2.15rem);
  font-weight:650;
}
.legal-host address{
  margin:0 0 1.5rem;
  font-style:normal;
}

.legal-room--privacy{
  background:linear-gradient(180deg,rgba(24,24,21,.018),transparent 44%);
}
.legal-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--ink);
  border-left:1px solid var(--rule);
}
.legal-card{
  position:relative;
  min-height:18rem;
  padding:clamp(1.6rem,4vw,3rem);
  border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.legal-card__index{
  display:block;
  margin-bottom:clamp(2rem,4vw,3.5rem);
  color:var(--oxide-text);
}
.legal-card h3{
  max-width:19ch;
  margin:0 0 1rem;
  font-size:clamp(1.15rem,2vw,1.55rem);
  line-height:1.25;
}
.legal-card p + p{margin-top:1rem}
.legal-card ul{
  margin:0;
  padding-left:1.15rem;
}
.legal-card li + li{margin-top:.45rem}

.legal-room--boundary{
  border-bottom-color:rgba(255,255,255,.12);
}
.legal-boundaries{
  border-top:1px solid rgba(255,255,255,.5);
}
.legal-boundaries>div{
  display:grid;
  grid-template-columns:minmax(8rem,.28fr) minmax(0,1fr);
  gap:clamp(1.5rem,5vw,5rem);
  padding-block:clamp(1.5rem,3vw,2.25rem);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.legal-boundaries__label{color:var(--gold)}
.legal-boundaries p{color:rgba(251,248,241,.78)}

.legal-room--english .statement{
  margin-top:1rem;
}
.legal-english{
  max-width:43rem;
  margin-top:clamp(2rem,4vw,3rem);
}
.legal-english p{
  font-family:var(--serif);
  font-size:clamp(1.02rem,1.45vw,1.16rem);
}
.legal-english p + p{margin-top:1.15rem}

.legal-references{
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--ink);
}
.legal-references li{
  display:grid;
  grid-template-columns:4rem minmax(0,1fr);
  gap:1rem;
  align-items:baseline;
  padding-block:1.15rem;
  border-bottom:1px solid var(--rule);
}
.legal-references li>span{
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.14em;
  color:var(--oxide-text);
}
.legal-updated{
  margin-top:2rem;
  color:var(--graphite);
}
.footer__legal-current{
  display:block;
  margin-top:.35rem;
  font-family:var(--mono);
  font-size:.65rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--graphite);
}
.legal-footer-note{
  margin:0;
  color:var(--graphite);
}

.footer__meta-links{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem 1rem;
  align-items:center;
  margin-top:.55rem;
}
.footer__meta-links a{
  font-family:var(--mono);
  font-size:.64rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--graphite);
  text-decoration:none;
  border-bottom:1px solid var(--rule);
}
.footer__meta-links a:hover,
.footer__meta-links a:focus-visible{
  color:var(--ink);
  border-bottom-color:var(--oxide);
}

@media (max-width:52rem){
  .legal-hero__grid,
  .legal-grid{
    grid-template-columns:1fr;
  }
  .legal-mark{max-width:31rem;margin-inline:auto}
  .legal-grid{border-left:0}
  .legal-card{min-height:0;border-left:1px solid var(--rule)}
}

@media (max-width:40rem){
  .legal-hero{padding-top:4.25rem}
  .legal-ledger__row,
  .legal-boundaries>div{
    grid-template-columns:1fr;
    gap:.7rem;
  }
  .legal-ledger__key,
  .legal-boundaries__label{margin-bottom:.15rem}
  .legal-references li{grid-template-columns:2.5rem minmax(0,1fr)}
  .legal-host{padding-left:2rem}
}

@media (prefers-reduced-motion:reduce){
  body[data-room="legal"] *{scroll-behavior:auto}
}

/* BUNDLE SOURCE: surface-v24.css */
/* HICHEM PUBLIC — route overrides only.
   Core stylesheets are linked directly from HTML.
   This deliberately removes the @import dependency chain. */

body[data-room="traces"]{
  padding-bottom:calc(var(--dock-h) + 24px)!important
}

@media (max-width:760px){
  body[data-room="traces"]{
    padding-bottom:calc(
      var(--dock-h) + env(safe-area-inset-bottom,0px) + 16px
    )!important
  }
}