/* ============================================================
   XZENOVERSE INDUSTRIES
   Palette sampled from the logo mark: black ground, white
   structure, #5F7CFC as signal only. Blue is never a fill.
   ============================================================ */
:root{
  --ink:#000000;
  --panel:#06080D;
  --raise:#0B0F17;
  --line:#18202F;
  --line-soft:#101724;
  --white:#FFFFFF;
  --text:#A2ABBF;
  --dim:#6E7890;
  --blue:#5F7CFC;
  --blue-mid:#3B52B8;
  --blue-deep:#1C2657;
  --blue-ghost:rgba(95,124,252,.10);

  /* animation accents. Backgrounds stay black, white and blue.
     These are for moving marks only, spread in hue and matched
     in saturation so they read as one instrument set. */
  --a1:#5F7CFC;  /* blue    signal, conserved */
  --a2:#22D3C5;  /* teal    group action */
  --a3:#A855F7;  /* violet  cohomology */
  --a4:#F5A524;  /* amber   violation */
  --a5:#F45B8B;  /* rose    obstruction */
  --a6:#4ADE80;  /* green   preserved */

  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"IBM Plex Sans","Segoe UI",Helvetica,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --f-math:"STIX Two Text","Times New Roman",Georgia,serif;

  --pad:clamp(20px,5vw,64px);
  --maxw:1240px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:var(--f-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}

h1,h2,h3{font-family:var(--f-display);color:var(--white);font-weight:700;
  line-height:1.02;letter-spacing:-.028em;text-wrap:balance;margin:0;
  hyphens:none;-webkit-hyphens:none}
p{margin:0}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

.skip{position:absolute;left:-9999px;top:0;background:var(--blue);color:#000;
  padding:10px 16px;z-index:200;font-family:var(--f-mono);font-size:13px}
.skip:focus{left:12px;top:12px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

.eyebrow{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--dim)}
.eyebrow .tick{color:var(--blue)}
.lead{font-size:clamp(16.5px,1.5vw,19px);color:var(--text);max-width:52ch}
.small{font-size:14px;line-height:1.55}

/* equations */
.eq{font-family:var(--f-math);font-size:clamp(17px,1.7vw,21px);color:var(--white);
  letter-spacing:.01em;line-height:1.4}
.eq i{font-style:italic}
.eq sub,.eq sup{font-size:.66em}
.cite{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.09em;color:var(--dim);
  margin-top:-6px}
.cite b{font-weight:400;color:var(--blue);opacity:.8}
/* Every cited work links to the work itself. The citation is already set apart
   by colour, so the link only adds the underline that says it can be followed,
   held off the baseline so the small mono type stays legible under it. */
a.rf{color:inherit;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:rgba(95,124,252,.62);
  transition:color .16s ease,text-decoration-color .16s ease}
a.rf:hover,a.rf:focus-visible{color:var(--white);text-decoration-color:var(--white)}
a.rf:focus-visible{outline:1px solid var(--blue);outline-offset:3px}

/* ═══════════════ NAV ═══════════════ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;border-bottom:1px solid transparent;
  transition:background .45s var(--ease),border-color .45s var(--ease)}
.nav.stuck{background:rgba(0,0,0,.84);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);height:64px;
  display:flex;align-items:center;gap:28px}
/* The bar carries links and nothing else now, so it is centred on the page
   rather than pushed to one end. Auto on both sides is what centres it
   inside the flex row; the media query below resets the margin and the
   toggle keeps its own auto, so the phone layout is unaffected. */
.nav-links{display:flex;gap:38px;margin-left:auto;margin-right:auto;align-items:center}
/* Seven items at 38px need about 780 of the 865 the bar has at its narrowest
   desktop width, so the gap steps down once before the menu folds away. */
@media (max-width:1080px){.nav-links{gap:28px}}
.nav-links a{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.05em;color:var(--text);
  position:relative;padding:6px 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--blue);transition:width .4s var(--ease)}
.nav-links a:hover{color:var(--white);text-decoration:none}
.nav-links a:hover::after{width:100%}
.nav-cta{border:1px solid var(--line);padding:9px 16px;color:var(--white) !important;
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.nav-cta:hover{border-color:var(--blue);background:var(--blue-ghost);text-decoration:none}
.nav-cta::after{display:none}
@media (max-width:960px){.nav-links a:not(.nav-cta){display:none}}

/* ═══════════════ HERO ═══════════════ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;padding-top:64px;overflow:hidden}
#field{position:absolute;inset:0;width:100%;height:100%;display:block}
/* The veil is symmetric about the vertical axis. It darkens top and bottom so
   the nav and the strip stay legible, and vignettes the corners, but it never
   shades one side more than the other. */
.hero-veil{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 14%,rgba(0,0,0,0) 88%,rgba(0,0,0,.30) 100%)}
.hero-in{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.hero h1{font-size:clamp(38px,6.4vw,88px);font-variation-settings:"wdth" 90;
  letter-spacing:-.042em;margin:14px 0 0;max-width:17ch}
.hero-sub{margin-top:17px;max-width:46ch;font-size:clamp(16px,1.5vw,19px);color:var(--text)}
.hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:25px;align-items:center}

.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:12.5px;
  letter-spacing:.08em;text-transform:uppercase;padding:15px 24px;border:1px solid var(--blue);
  color:#000;background:var(--blue);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.btn:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 12px 34px -14px var(--blue)}
.btn-ghost{background:transparent;color:var(--white);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--blue);box-shadow:none}
.btn .arw{transition:transform .35s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}

/* split-text units */
.split .ch{display:inline-block;will-change:transform,opacity}

.readout{position:absolute;right:var(--pad);bottom:clamp(28px,7vh,72px);z-index:3;
  font-family:var(--f-mono);font-size:12px;line-height:1.8;border-left:1px solid var(--line);
  padding:12px 0 12px 16px;min-width:270px}
.readout .cap{color:var(--dim);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}
.readout .rl{display:flex;justify-content:space-between;gap:22px}
.readout .k{color:var(--dim);display:flex;align-items:center;gap:8px}
.readout .sw{width:7px;height:7px;display:inline-block}
.readout .sw.ok{background:var(--blue)}
.readout .sw.bad{background:var(--white)}
.readout .v{font-variant-numeric:tabular-nums}
.readout .v.ok{color:var(--blue)}
.readout .v.bad{color:var(--white)}
.readout .note{color:var(--dim);font-size:10.5px;margin-top:9px;max-width:34ch;line-height:1.5}

.scroll-hint{position:absolute;left:var(--pad);bottom:34px;z-index:3;width:1px;height:52px;
  background:var(--line);overflow:hidden}
.scroll-hint span{position:absolute;top:0;left:0;width:1px;height:18px;background:var(--blue)}

@media (max-width:900px){
  .hero{min-height:auto;padding:120px 0 56px}
  #field{opacity:.55}
}

/* ═══════════════ STRIP ═══════════════ */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel)}
.strip-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);display:flex}

/* ═══════════════ SECTIONS ═══════════════ */
.sec{border-bottom:1px solid var(--line);padding:clamp(66px,9vw,124px) 0}
h2.big{font-size:clamp(30px,4.6vw,60px);font-variation-settings:"wdth" 90;margin-top:16px;max-width:17ch}
.sec-grid{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.sec-label{position:sticky;top:96px}
.sec-label h2{font-size:clamp(23px,2.4vw,30px);font-variation-settings:"wdth" 92;margin-top:14px}
.sec-label .rule{width:30px;height:2px;background:var(--blue);margin-top:18px}
@media (max-width:880px){.sec-grid{grid-template-columns:1fr}.sec-label{position:static}}

/* ═══════════════ PREMISE STRIP ═══════════════ */
.premise{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:clamp(28px,4vw,44px)}
.premise figure{margin:0;background:var(--ink);display:flex;flex-direction:column}
.pstage{position:relative;aspect-ratio:16/7.4;border-bottom:1px solid var(--line)}
.premise figcaption{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px}
@media (max-width:780px){.premise{grid-template-columns:1fr}}
.c3d{position:absolute;inset:0;width:100%;height:100%;display:block}
.fk{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.fk.hi{color:var(--blue)}
.fd{font-size:14.6px;line-height:1.55;color:var(--text);max-width:44ch}

/* ═══════════════ COMPARATOR ═══════════════ */
.cmp{margin-top:clamp(28px,4vw,44px);border:1px solid var(--line);background:var(--panel)}
.cmp-nav{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid var(--line)}
/* five rungs do not fit one row on a narrow screen, so they fold, and the
   folded row keeps a rule under it rather than running into the stage */
@media (max-width:860px){.cmp-nav{grid-template-columns:repeat(3,1fr)}
  .cmp-nav button:nth-child(-n+3){border-bottom:1px solid var(--line)}}
@media (max-width:540px){.cmp-nav{grid-template-columns:repeat(2,1fr)}}
.cmp-nav button{appearance:none;background:transparent;border:0;border-right:1px solid var(--line);
  padding:18px 18px 16px;text-align:left;cursor:pointer;color:var(--text);position:relative;
  display:flex;flex-direction:column;gap:5px;transition:background .35s var(--ease)}
.cmp-nav button:last-child{border-right:0}
.cmp-nav button::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;
  background:var(--blue);transition:width .5s var(--ease)}
.cmp-nav button:hover{background:rgba(255,255,255,.022)}
.cmp-nav button.on{background:var(--ink)}
.cmp-nav button.on::before{width:100%}
.cmp-nav .n{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.cmp-nav .t{font-family:var(--f-display);font-weight:600;font-size:15px;color:var(--text);letter-spacing:-.01em}
.cmp-nav button.on .t{color:var(--white)}
.cmp-nav .g{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;color:var(--blue);opacity:.55}
.cmp-nav .g.no{color:var(--dim)}
.cmp-nav button.on .g{opacity:1}
@media (max-width:820px){.cmp-nav{grid-template-columns:repeat(2,1fr)}
  .cmp-nav button:nth-child(2){border-right:0}
  .cmp-nav button:nth-child(-n+2){border-bottom:1px solid var(--line)}}

.cmp-stage{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);background:var(--ink)}
#scene{width:100%;height:auto;display:block;border-right:1px solid var(--line)}
.cmp-caption{padding:clamp(24px,3vw,38px);display:flex;flex-direction:column;gap:16px;justify-content:center}
.chip{align-self:flex-start;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;border:1px solid var(--line);padding:7px 12px;color:var(--dim)}
.chip.good{border-color:var(--blue-mid);color:var(--blue)}
@media (max-width:820px){.cmp-stage{grid-template-columns:1fr}#scene{border-right:0;border-bottom:1px solid var(--line)}}

/* scene primitives */
#scene .ax{stroke:var(--line);stroke-width:1;fill:none}
#scene .grid{stroke:rgba(95,124,252,.07);stroke-width:1}
#scene .axd{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4}
#scene .win{fill:rgba(95,124,252,.05);stroke:none}
#scene .lbl{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.12em;
  fill:var(--dim);text-transform:uppercase}
#scene .lbl.hi{fill:var(--blue)}
#scene .lbl.wt{fill:var(--white)}
#scene .lbl.am{fill:var(--a4)}
#scene .lbl.ro{fill:var(--a5)}
#scene .lbl.gr{fill:var(--a6)}
#scene .lbl.te{fill:var(--a2)}
#scene .lbl.vi{fill:var(--a3)}
#scene .mth{font-family:"STIX Two Text",serif;font-size:15px;fill:var(--white);font-style:italic}
#scene .true{stroke:var(--blue);stroke-width:1.6;fill:none;opacity:.75}
#scene .fit{stroke:var(--a4);stroke-width:1.6;fill:none}
#scene .gap{fill:rgba(245,165,36,.16);stroke:none}
#scene .dot{fill:var(--dim)}
#scene .node{fill:none;stroke:var(--line);stroke-width:1}
#scene .arw{stroke:var(--line);stroke-width:1.2;fill:none;marker-end:url(#ah)}
#scene .arw.live{stroke:var(--blue)}
#scene .tok{fill:var(--blue)}
#scene .glyph{stroke:var(--white);stroke-width:1.3;fill:none}
#scene .glyph.b{stroke:var(--blue)}
#scene .arc{fill:none;stroke-width:5;stroke-linecap:round}
#scene .ov{fill:none;stroke:var(--white);stroke-width:1.5;opacity:.5}
#scene .ov.hot{stroke:var(--a5);opacity:1;stroke-width:3}
#scene .sweep{fill:none;stroke:var(--blue);stroke-width:2.5;stroke-linecap:round}
#scene .base{fill:none;stroke:var(--line);stroke-width:1}
#scene .rail{stroke:var(--line);stroke-width:1;fill:none}
#scene .badge{fill:var(--a6)}
#scene .badge.off{fill:var(--a5)}
#scene .glyph.t{stroke:var(--a2)}
#scene .glyph.v{stroke:var(--a3)}
#scene .sweep.ro{stroke:var(--a5)}

/* ═══════════════ DEPLOYMENT ═══════════════ */
.port{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:clamp(34px,5vw,56px)}
.pcol{background:var(--ink);padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:18px}
.pcol.hi{background:var(--panel)}
.pk{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.pcol.hi .pk{color:var(--blue)}
.pd{font-size:14.6px;line-height:1.55;max-width:42ch}
.plist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.plist li{position:relative;padding-left:18px;font-size:14px;color:var(--text)}
.plist li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:1px;background:var(--dim)}
.pcol.hi .plist li::before{background:var(--blue)}



.why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-top:0}
@media (max-width:1000px){.why{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.why{grid-template-columns:1fr}}
.why>div{background:var(--ink);padding:22px}
.why h4{font-family:var(--f-display);font-size:15.5px;color:var(--white);margin:0 0 8px;
  font-weight:600;letter-spacing:-.01em}
.why p{font-size:13.8px;line-height:1.55}

/* the line the section ends on. It is a statement, not a caption, so it is set
   in the display face at reading size and given the width of the cards above
   it rather than the width of the page. */
.dclose{margin-top:clamp(26px,3vw,38px);font-family:var(--f-display);font-weight:400;
  font-size:clamp(16px,1.9vw,22px);line-height:1.4;letter-spacing:-.015em;color:var(--white);
  font-variation-settings:"wdth" 94;max-width:34ch}


/* ═══════════════ STANCE ═══════════════ */
.stance{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
@media (max-width:620px){.stance{grid-template-columns:1fr}}
.stance>div{background:var(--ink);padding:24px}
.stance h4{font-family:var(--f-display);font-size:16px;color:var(--white);margin:0 0 9px;
  font-weight:600;letter-spacing:-.012em;line-height:1.25}
.stance p{font-size:13.8px;line-height:1.55}

.founder{border:1px solid var(--line);background:var(--panel);padding:clamp(26px,3.4vw,42px);
  margin-top:32px;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(24px,4vw,52px);align-items:center}
.founder blockquote{margin:0;font-family:var(--f-display);font-weight:400;
  font-size:clamp(17px,2vw,24px);line-height:1.4;color:var(--white);letter-spacing:-.018em;
  max-width:42ch;font-variation-settings:"wdth" 90}
.founder .by{display:flex;flex-direction:column;gap:7px;align-items:flex-start;
  border-left:1px solid var(--line);padding-left:clamp(20px,2.5vw,30px)}
.founder .by .li{margin-top:10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;border:1px solid var(--line);padding:9px 14px;color:var(--white);
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.founder .by .li:hover{border-color:var(--blue);background:var(--blue-ghost);text-decoration:none}
@media (max-width:820px){
  .founder{grid-template-columns:1fr;gap:26px}
  .founder .by{border-left:0;padding-left:0;padding-top:20px;border-top:1px solid var(--line)}
}
.founder .by .n{font-family:var(--f-display);font-weight:700;color:var(--white);font-size:15px}
.founder .by .r{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}

/* ═══════════════ CLOSE / FOOTER ═══════════════ */
.close{padding:clamp(80px,11vw,148px) 0;position:relative;overflow:hidden}
.close h2{font-size:clamp(28px,4.4vw,56px);font-variation-settings:"wdth" 92;max-width:18ch;margin-top:18px}
.close .lead{margin-top:22px}
.close .hero-cta{margin-top:32px}
.promise{margin-top:24px;font-family:var(--f-mono);font-size:12px;color:var(--dim);letter-spacing:.04em}
/* height:auto is load bearing. The width is set here and the height was not, so
   the height fell through to the presentational height attribute on the tag and
   the mark was drawn 540 by 1060 instead of 540 by 477. It had been stretched
   15 per cent for as long as the attribute read 565, and 55 per cent once the
   larger mark raised it to 1060. */
.ring{position:absolute;right:-150px;top:50%;transform:translateY(-50%);
  width:min(50vw,540px);height:auto;
  opacity:.05;pointer-events:none;filter:grayscale(1) brightness(2.4)}

footer{border-top:1px solid var(--line);background:var(--panel);padding:clamp(46px,6vw,70px) 0 32px}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(22px,3.2vw,48px)}
.f-grid h5{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin:0 0 15px;font-weight:400}
.f-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.f-grid ul a{color:var(--text);font-size:14px}
.f-grid ul a:hover{color:var(--blue)}
.f-tag{font-family:var(--f-display);font-variation-settings:"wdth" 106;font-weight:700;font-size:13px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--white)}
.f-blurb{margin-top:13px;font-size:14px;max-width:38ch}
.f-bot{margin-top:clamp(34px,5vw,54px);padding-top:20px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;font-family:var(--f-mono);
  font-size:11px;color:var(--dim);letter-spacing:.05em}
@media (max-width:980px){.f-grid{grid-template-columns:1fr 1fr 1fr}.f-grid>div:first-child{grid-column:1/-1}}
@media (max-width:640px){.f-grid{grid-template-columns:1fr 1fr}}

/* ═══════════════ MOTION BASE ═══════════════ */
.rv,.h-el{opacity:0}
.split .ch{opacity:0}
@media (prefers-reduced-motion:reduce){
  .rv,.h-el,.split .ch{opacity:1 !important;transform:none !important}
  .btn,.btn .arw,.nav-links a::after{transition:none}
}

/* ═══════════════ TOPOLOGY / INVARIANTS ═══════════════ */
.topo{margin-top:clamp(34px,5vw,56px);border:1px solid var(--line);background:var(--panel)}
.topo-nav{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.topo-nav button{appearance:none;background:transparent;border:0;border-right:1px solid var(--line);
  padding:15px 20px;cursor:pointer;color:var(--text);font-family:var(--f-mono);font-size:12px;
  letter-spacing:.08em;position:relative;flex:1 1 auto;text-align:left;white-space:nowrap;
  transition:color .35s var(--ease),background .35s var(--ease)}
.topo-nav button:last-child{border-right:0}
.topo-nav button::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;
  transition:width .55s var(--ease);background:currentColor}
.topo-nav button:hover{background:rgba(255,255,255,.025)}
.topo-nav button.on{background:var(--ink);color:var(--white)}
.topo-nav button.on::before{width:100%}
@media (max-width:820px){.topo-nav button{flex:1 1 44%}}

.topo-stage{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);background:var(--ink)}
.surf-wrap{position:relative;aspect-ratio:16/11;border-right:1px solid var(--line)}
#surf{position:absolute;inset:0;width:100%;height:100%;display:block}
.topo-meta{padding:clamp(24px,3vw,38px);display:flex;flex-direction:column;gap:18px;justify-content:center}
.topo-meta .nm{font-family:var(--f-display);font-weight:700;font-size:clamp(21px,2.3vw,29px);
  color:var(--white);letter-spacing:-.02em;font-variation-settings:"wdth" 94}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.facts>div{background:var(--ink);padding:12px 14px}
.facts .fl{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.facts .fv{font-family:var(--f-math);font-size:19px;color:var(--white);margin-top:3px;font-variant-numeric:tabular-nums}
.facts .fv.sm{font-family:var(--f-body);font-size:14px}
.topo-meta .fd{max-width:38ch}
@media (max-width:820px){.topo-stage{grid-template-columns:1fr}.surf-wrap{border-right:0;border-bottom:1px solid var(--line)}}

/* ═══════════════ CROSS-PLATFORM HOSTS ═══════════════ */
.hosts{position:relative;aspect-ratio:16/10;width:100%}
#hosts{position:absolute;inset:0;width:100%;height:100%;display:block}
.host-nm{position:absolute;left:0;bottom:0;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}
.host-rail{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line)}
.host-rail span{flex:1 1 auto;text-align:center;padding:9px 6px;font-family:var(--f-mono);
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
  border-right:1px solid var(--line);transition:color .5s var(--ease),background .5s var(--ease)}
.host-rail span:last-child{border-right:0}
/* Five names fit across one column. Eight do not, and flex:1 1 0 would give
   each of them an ellipsis rather than a name, so the eight-stop rail lays out
   as four and four and keeps its words. */
.host-rail.r8 span{flex:1 1 25%}
.host-rail.r8 span:nth-child(4){border-right:0}
.host-rail.r8 span:nth-child(-n+4){border-bottom:1px solid var(--line)}
@media (max-width:620px){
  /* four across a phone gives "Workstation", "Single-board" and "GPU server"
     an ellipsis instead of a name, so it goes two across and four down */
  .host-rail.r8 span{flex:1 1 50%}
  .host-rail.r8 span:nth-child(4){border-right:1px solid var(--line)}
  .host-rail.r8 span:nth-child(even){border-right:0}
  .host-rail.r8 span:nth-child(-n+6){border-bottom:1px solid var(--line)}
}
.host-rail span.on{color:#000;background:var(--blue)}

.host-nm.amber{color:var(--a4)}
.host-rail.amber span.on{background:var(--a4);color:#000}
.pcol .hosts{margin-bottom:2px}

/* ═══════════════ BOOT / THE MARK FIRST ═══════════════ */
.boot{position:fixed;inset:0;z-index:300;background:var(--ink);pointer-events:none;
  animation:bootOut .01s linear 4s forwards;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:22px}
.boot-mark{width:clamp(140px,20vw,208px);height:auto;display:block;opacity:0}
.boot-name{font-family:var(--f-display);font-variation-settings:"wdth" 110;font-weight:700;
  font-size:clamp(11px,1.2vw,13px);letter-spacing:.42em;text-transform:uppercase;
  color:var(--white);opacity:0;text-indent:.42em}
.boot.done{pointer-events:none}

.hero-mark{width:clamp(78px,8.5vw,116px);height:auto;display:block;margin-bottom:22px}

/* the full company name needs a touch more room than the short one */


/* ═══════════════ ARCHITECTURES ═══════════════ */
.prods{display:flex;flex-direction:column;gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:clamp(36px,5vw,60px)}
.prod{background:var(--ink);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(24px,3.4vw,48px);padding:clamp(26px,3.6vw,48px);align-items:center;
  transition:background .5s var(--ease)}
.prod:hover{background:var(--panel)}
.prod.flip .sigc{order:2}
.prod .sigc{position:relative;width:100%;aspect-ratio:16/11;border:1px solid var(--line);
  background:#03050A;overflow:hidden}
.prod .sigc canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.pbody{display:flex;flex-direction:column}
.prod .nm{font-family:var(--f-display);font-weight:800;font-size:clamp(34px,4.6vw,62px);
  color:var(--white);letter-spacing:.015em;font-variation-settings:"wdth" 112;line-height:1}
.prod .cls{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue);margin-top:12px}
.prod .pd{margin-top:20px;font-size:15.5px;line-height:1.6;max-width:44ch}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0}
.tags li{font-family:var(--f-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  border:1px solid var(--line);padding:7px 11px;color:var(--text)}
.prod .st{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;color:var(--dim);
  display:flex;align-items:center;gap:9px}
.prod .st .dot{width:6px;height:6px;background:var(--blue)}
@media (max-width:880px){
  .prod{grid-template-columns:1fr;gap:24px}
  .prod.flip .sigc{order:0}
  .prod .sigc{aspect-ratio:16/10}
}

/* ═══════════════ STANCE GLYPHS ═══════════════ */
.stance>div{padding:0 0 24px}
.sglyph{position:relative;width:100%;aspect-ratio:5/2;border-bottom:1px solid var(--line);
  background:#03050A;overflow:hidden;margin-bottom:22px}
.sglyph canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.stance h4,.stance p{padding:0 24px}
.founder blockquote .wd{display:inline-block;opacity:0;will-change:transform,opacity,filter}

/* ═══════════════════════════════════════════════════════════
   DOMAIN PAGES
   A fixed topology behind everything, and content that sits on
   its own ground so the type stays crisp over it.
   ═══════════════════════════════════════════════════════════ */
.dpage{--acc:var(--blue)}
.dpage.acc-teal{--acc:var(--a2)}
.dpage.acc-violet{--acc:var(--a3)}
.dpage.acc-amber{--acc:var(--a4)}
.dpage.acc-blue{--acc:var(--a1)}
.dpage.acc-rose{--acc:var(--a5)}

#bg{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.dpage .dhead > .wrap{position:relative;z-index:1}
.dpage main,.dpage footer{position:relative;z-index:1}

.dhead{padding:clamp(112px,14vh,168px) 0 clamp(48px,7vw,84px)}
.crumb{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);display:flex;gap:9px;flex-wrap:wrap;margin-bottom:30px}
.crumb a{color:var(--dim)}
.crumb a:hover{color:var(--acc)}
.crumb .sep{color:var(--line)}
.crumb [aria-current]{color:var(--white)}
.dhead .eyebrow .tick{color:var(--acc)}
.dhead h1{font-size:clamp(34px,5.6vw,74px);font-variation-settings:"wdth" 90;
  letter-spacing:-.04em;margin:18px 0 0;max-width:19ch}
.dhead .lead{margin-top:24px;max-width:56ch}
.topo-note{margin-top:40px;max-width:60ch;font-size:14.5px;line-height:1.6;color:var(--text);
  border-left:2px solid var(--acc);padding-left:18px}
.topo-note .tl{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--acc);margin-bottom:8px}
.topo-note .cite{display:block;margin-top:10px}

.dsec{padding:clamp(48px,6.5vw,88px) 0;border-top:1px solid var(--line);
  background:rgba(0,0,0,.86);backdrop-filter:blur(2px)}
.dsec h2{font-size:clamp(24px,3.2vw,40px);font-variation-settings:"wdth" 92;margin-top:14px;max-width:20ch}
.dsec .body{font-size:15.5px;line-height:1.68;color:var(--text);max-width:56ch;margin-top:16px}
.dsec .body.sm{font-size:14.5px}
.dsec .eyebrow.hi{color:var(--acc)}
.dgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4.5vw,68px)}
@media (max-width:820px){.dgrid{grid-template-columns:1fr;gap:36px}}

.demo{margin-top:clamp(26px,3.5vw,42px);display:grid;
  grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line)}
.demo-stage{position:relative;background:#03050A;aspect-ratio:4/3}
#demo{position:absolute;inset:0;width:100%;height:100%;display:block}
.demo-side{background:var(--ink);padding:clamp(22px,2.8vw,32px);display:flex;
  flex-direction:column;gap:18px;justify-content:center}
.rdo{display:flex;flex-direction:column;gap:11px;font-family:var(--f-mono);font-size:12px}
.rdo .rl{display:flex;justify-content:space-between;gap:18px;align-items:baseline;
  border-bottom:1px solid var(--line-soft);padding-bottom:9px}
.rdo .k{color:var(--dim);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;max-width:22ch}
.rdo .v{color:var(--acc);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:880px){.demo{grid-template-columns:1fr}.demo-stage{aspect-ratio:16/12}}

.eqs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:24px}
.eqrow{background:var(--ink);padding:clamp(22px,2.8vw,32px);display:flex;
  flex-direction:column;gap:12px;justify-content:center}
@media (max-width:820px){.eqs{grid-template-columns:1fr}}

/* Said for anyone who cannot see the hero background, and to nobody else.
   Clipped rather than hidden, because display:none and visibility:hidden are
   both removed from the accessibility tree along with everything in them. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ═══════════════ PREVIOUS AND NEXT DOMAIN ═══════════════
   Read the way chapters are read: the same slim bar sits above the page and
   again below it, so moving on never needs a scroll back to the top. Label
   and name share one line, so the bar costs a row of type rather than the
   block of two stacked cards it replaced. The label is the first thing to go
   as the page narrows, because the arrow already says which way it points. */
.nxbar{padding-block:clamp(13px,1.7vw,19px);border-top:1px solid var(--line);
  background:rgba(0,0,0,.86);backdrop-filter:blur(2px)}
.nxbar+.dsec{border-top:0}
.nxrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.nx{background:var(--ink);padding:10px clamp(13px,1.7vw,20px);min-height:46px;
  display:flex;align-items:center;gap:clamp(8px,1vw,13px);
  text-decoration:none;transition:background .4s var(--ease)}
.nx:hover{background:var(--panel);text-decoration:none}
.nx.r{justify-content:flex-end;text-align:right}
.nx .ar{color:var(--dim);font-size:13px;line-height:1;flex:none;
  transition:color .2s ease,transform .2s var(--ease)}
.nx:hover .ar{color:var(--acc);transform:translateX(-3px)}
.nx.r:hover .ar{transform:translateX(3px)}
.nx .k{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);white-space:nowrap;flex:none}
.nx .t{font-family:var(--f-display);font-weight:600;font-size:clamp(14px,1.35vw,17px);
  color:var(--white);letter-spacing:-.015em;line-height:1.26}
.nx:hover .t{color:var(--acc)}
@media (max-width:980px){.nx .k{display:none}}
@media (max-width:430px){.nx{padding-inline:11px}.nx .t{font-size:12.5px}}

/* ── the same two links, pinned to the edges ───────────────────────────────
   On a wide screen the previous and next domain sit in the margin the page
   already leaves empty, so they stay in view at any scroll position without
   taking a line of the page. The measure is what decides whether they can be
   there at all: the text column is 1240 wide with its own gutter inside it,
   so a 1360 viewport is the first width where a rail of this size still
   clears the writing and the figures by about fifty pixels, and where the
   rail's own height leaves the fixed navigation well alone. Widening the rail
   moves that threshold with it, which is why the two numbers change together. Below that, and
   on a screen too short to hold the name upright, the rails are not there and
   the bars above and below the page do the work instead. */
.srails{position:fixed;inset:0;z-index:40;pointer-events:none;display:none}
.srail{position:absolute;top:50%;translate:0 -50%;pointer-events:auto;
  display:flex;flex-direction:column;align-items:center;gap:11px;
  padding:15px 18px;text-decoration:none;
  background:rgba(0,0,0,.72);backdrop-filter:blur(7px);
  border:1px solid var(--line);
  transition:background .3s var(--ease),border-color .3s var(--ease)}
.sr-prev{left:0;border-left:0;border-radius:0 3px 3px 0}
.sr-next{right:0;border-right:0;border-radius:3px 0 0 3px}
.srail:hover,.srail:focus-visible{background:rgba(0,0,0,.88);border-color:var(--acc);
  text-decoration:none}
.srail:focus-visible{outline:1px solid var(--acc);outline-offset:2px}
.srail .ar{color:var(--dim);font-size:13px;line-height:1;
  transition:color .2s ease,transform .25s var(--ease)}
.srail:hover .ar{color:var(--acc)}
.sr-prev:hover .ar{transform:translateX(-3px)}
.sr-next:hover .ar{transform:translateX(3px)}
/* one upright line of type. In vertical writing the inline axis runs down the
   page, so a flex row stacks the label above the name rather than beside it. */
.srail .vt{writing-mode:vertical-rl;display:flex;flex-direction:row;
  align-items:center;gap:9px;line-height:1.1}
.srail .k{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);white-space:nowrap}
.srail .t{font-family:var(--f-display);font-weight:600;font-size:13.5px;
  letter-spacing:-.01em;color:var(--white);white-space:nowrap;
  transition:color .2s ease}
.srail:hover .t{color:var(--acc)}
@media (min-width:1360px) and (min-height:640px){
  .dpage:not(.apage) .srails{display:block}
  .dpage:not(.apage) .nxbar{display:none}
  /* the hidden bar is still the sibling that cancelled the next section's
     border, so the hairline has to be given back or two sections run together */
  .dpage:not(.apage) .nxbar+.dsec{border-top:1px solid var(--line)}
}

.dcta{margin-top:0}
.dcta h2{max-width:18ch}
.dcta .lead{margin-top:18px}
.dcta .hero-cta{margin-top:28px}
.dpage .btn{border-color:var(--acc);background:var(--acc)}
.dpage .btn-ghost{background:transparent;border-color:var(--line);color:var(--white)}
.dpage .btn-ghost:hover{border-color:var(--acc)}
.dpage .nav-cta:hover{border-color:var(--acc);background:rgba(255,255,255,.05)}
.dpage .nav-links a::after{background:var(--acc)}

/* the domain strip on the landing page is now a set of links */
.strip-in a{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--text);padding:17px 0;flex:1 1 auto;white-space:nowrap;text-decoration:none;
  position:relative;transition:color .35s var(--ease)}
.strip-in a+a{border-left:1px solid var(--line);padding-left:22px}
.strip-in a:not(:last-child){padding-right:22px}
.strip-in a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;width:0;
  background:var(--blue);transition:width .4s var(--ease)}
.strip-in a:hover{color:var(--white);text-decoration:none}
.strip-in a:hover::after{width:100%}
.strip-in a .ar{opacity:0;margin-left:8px;transition:opacity .35s var(--ease),transform .35s var(--ease);
  display:inline-block;transform:translateX(-4px)}
.strip-in a:hover .ar{opacity:1;transform:translateX(0)}


/* ═══════════════════════════════════════════════════════════
   HEADINGS NEVER WRAP
   Every heading is short enough to hold one line, and the type
   scale is written so it stays on one line at any viewport. The
   Archivo width axis narrows before the size does, so small
   screens compress the letterforms rather than breaking the line.
   ═══════════════════════════════════════════════════════════ */
h1,h2,.prod .nm{white-space:nowrap}
.hero h1{font-size:max(19px,min(4.5vw,62px));font-variation-settings:"wdth" 84;max-width:none}
h2.big{font-size:max(18px,min(4.1vw,54px));font-variation-settings:"wdth" 86;max-width:none}
.sec-label h2{font-size:max(15px,min(2.3vw,29px));max-width:none}
.close h2{font-size:max(18px,min(4.0vw,52px));font-variation-settings:"wdth" 88;max-width:none}
.dhead h1{font-size:max(22px,min(5.0vw,68px));font-variation-settings:"wdth" 86;max-width:none}
.dsec h2{font-size:max(17px,min(3.3vw,40px));font-variation-settings:"wdth" 88;max-width:none}
.dcta h2{max-width:none}
@media (max-width:760px){
  .hero h1{font-size:max(17px,min(5.2vw,40px));font-variation-settings:"wdth" 70}
  h2.big{font-size:max(16px,min(4.8vw,34px));font-variation-settings:"wdth" 72}
  .close h2{font-size:max(16px,min(4.6vw,32px));font-variation-settings:"wdth" 72}
  .dhead h1{font-size:max(19px,min(5.6vw,38px));font-variation-settings:"wdth" 74}
  .dsec h2{font-size:max(15px,min(4.2vw,28px));font-variation-settings:"wdth" 76}
  .sec-label h2{font-size:max(14px,min(4.0vw,24px));font-variation-settings:"wdth" 76}
}
/* the founder line is a quotation, not a heading, so it may wrap */
.founder blockquote{white-space:normal}

/* ═══════════════ DOMAIN BAR, ONE LINE ALWAYS ═══════════════
   The bar rides down with the reader and parks under the fixed bar at the top,
   so the five domains stay one click away for the whole page. It keeps its own
   opaque ground because the page scrolls underneath it, and it stays a
   positioning context so the scroll hint at its right edge still anchors. */
.strip{position:sticky;top:64px;z-index:60;background:var(--panel);
  transition:box-shadow .35s var(--ease)}
.strip.pinned{box-shadow:0 14px 30px -18px rgba(0,0,0,.95)}
.strip-in{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.strip-in::-webkit-scrollbar{display:none}
.strip-in a{flex:0 0 auto;white-space:nowrap;
  font-size:clamp(9.5px,.92vw,11.5px);letter-spacing:.13em;
  padding-top:17px;padding-bottom:17px}
/* a hint that there is more to the right, only when there is */
.strip::after{content:"";position:absolute;right:0;top:1px;bottom:1px;width:44px;
  pointer-events:none;background:linear-gradient(90deg,transparent,var(--panel))}
@media (min-width:1180px){.strip::after{display:none}}
/* nothing hovers on a touch screen, so the arrows stay out */
@media (hover:none){.strip-in a .ar{display:none}}

/* ═══════════════ ARCHITECTURE PAGES ═══════════════ */
.apage .awordmark{font-family:var(--f-display);font-weight:800;
  font-size:max(30px,min(9vw,124px));font-variation-settings:"wdth" 116;
  letter-spacing:.02em;color:var(--white);line-height:.92;white-space:nowrap;margin-top:18px}
.apage .dhead h1{font-size:max(18px,min(3.4vw,44px));font-variation-settings:"wdth" 88;margin-top:14px}
@media (max-width:760px){
  .apage .awordmark{font-size:max(26px,min(11vw,64px))}
  .apage .dhead h1{font-size:max(15px,min(4.4vw,26px));font-variation-settings:"wdth" 76}
}

.gtrio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:26px}
.gtrio.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.gtrio>div{background:var(--ink);padding:clamp(20px,2.6vw,30px)}
.gtrio h4{font-family:var(--f-display);font-size:16px;color:var(--white);margin:0 0 10px;
  font-weight:600;letter-spacing:-.012em;line-height:1.28}
.gtrio p{font-size:14px;line-height:1.6;color:var(--text)}
@media (max-width:980px){.gtrio,.gtrio.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.gtrio,.gtrio.four{grid-template-columns:1fr}}

.dlinks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:26px}
.dlinks a{background:var(--ink);padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;
  gap:8px;text-decoration:none;transition:background .4s var(--ease)}
.dlinks a:hover{background:var(--panel);text-decoration:none}
.dlinks .k{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.dlinks .t{font-family:var(--f-display);font-weight:600;font-size:17px;color:var(--white);letter-spacing:-.015em}
.dlinks a:hover .t{color:var(--acc)}
.dlinks .d{font-size:13.4px;line-height:1.5;color:var(--text)}
@media (max-width:980px){.dlinks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.dlinks{grid-template-columns:1fr}}

/* the whole architecture card is a link into its page */
.prod{position:relative}
.prod-link{position:absolute;inset:0;z-index:3}
.prod-link:focus-visible{outline:2px solid var(--blue);outline-offset:-3px}
.prod .st .more{margin-left:auto;color:var(--blue);letter-spacing:.06em;
  opacity:0;transform:translateX(-6px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.prod:hover .st .more{opacity:1;transform:none}
@media (hover:none){.prod .st .more{opacity:1;transform:none}}

/* ═══════════════ THE FIELD RUNS BEHIND THE WHOLE PAGE ═══════════════
   Fixed, so it stays put as the page scrolls. Sharp in the hero, and
   blurred back behind everything below it, which is what keeps the type
   crisp while the animation is still visibly there. */
#field{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
main,footer{position:relative;z-index:1}
.hero{background:transparent}
.strip,.sec,.close{background:rgba(0,0,0,.84);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
footer{background:rgba(0,0,0,.90);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
/* the panels inside a section sit on their own ground, so they stay readable */
.movements .mv,.demo-side,.eqrow,.prod,.stance>div,.why>div,.gtrio>div,
.pcol,.topo-stage,.nx,.dlinks a{background:rgba(0,0,0,.55)}
.cmp-nav button.on,.topo-nav button.on{background:rgba(0,0,0,.6)}

/* ═══════════════ THE MARK LEADS, CENTRED ═══════════════
   Layout only. Nothing here touches the canvas or the field running
   behind it; the animation is exactly as it was. */
.hero-in{text-align:center}
.hero-mark{width:clamp(150px,15.6vw,266px);margin:0 auto clamp(17px,2.2vw,28px);display:block}
.hero h1{margin-left:auto;margin-right:auto}
.hero-sub{margin-left:auto;margin-right:auto;max-width:48ch}
.hero-cta{justify-content:center}
/* the readout keeps to its corner until the centred block would reach it */
@media (max-width:1140px){
  .readout{position:relative;right:auto;bottom:auto;margin:36px auto 0;
    max-width:320px;text-align:left}
  .scroll-hint{display:none}
}
@media (max-width:900px){
  .hero-mark{width:min(clamp(134px,30vw,204px),26vh)}
}

/* ═══════════════ THE WORDMARK UNDER THE MARK ═══════════════ */
/* The tagline is set around the ring, and its cap height is 5.25 per cent of
   the mark width, measured off the artwork. The 30vh cap used to bind first on
   a laptop and left that cap at 12px of hairline outline, which is present but
   is not read; on a phone the mark resolved to 146px and the cap to under 8px.
   These sizes hold it between 12 and 19px, which is where small tracked caps
   become legible. The source is 1200 wide, so the largest of them is still
   inside its own resolution on a 3x screen. */
.hero-mark{width:min(clamp(240px,24vw,360px),42vh)}
/* The name sits directly under the mark and then the page breathes before the
   headline starts, so the two read as a lockup rather than as a stack. The
   tracking eases in as the size grows: at .40em the letter-spacing carries most
   of the width and the letterforms stay small, which is the opposite of making
   the name bigger. */
.hero-word{margin:clamp(11px,1.4vw,18px) auto clamp(30px,3.8vw,52px);line-height:1}
.hero-word span{
  display:inline-block;
  font-family:var(--f-display);
  font-variation-settings:"wdth" 112;
  font-weight:700;
  font-size:clamp(16px,1.7vw,26px);
  text-transform:uppercase;
  letter-spacing:.30em;
  text-indent:.30em;              /* balances the trailing letter-space */
  color:var(--white);
  white-space:nowrap;
  /* leaning to the right, so it reads as drawn rather than typed */
  transform:skewX(-9deg);
}
@media (max-width:900px){
  .hero-mark{width:min(clamp(230px,62vw,320px),42vh)}
  .hero-word span{letter-spacing:.22em;text-indent:.22em;font-size:clamp(14px,4.8vw,20px)}
}
/* A phone on its side has the width for the mark and none of the height. The
   height cap would take it back under a readable ring, so here the width sets
   it and the hero is allowed to be taller than the screen. */
@media (max-width:900px) and (max-height:560px){
  .hero-mark{width:clamp(210px,30vw,260px)}
  /* the room for it comes out of the hero'''s own padding and the gap under the
     wordmark, not out of the mark, because the mark is the thing being read */
  .hero{padding:78px 0 34px}
  .hero-word{margin-top:6px;margin-bottom:26px}
  /* sideways, the width would let the name run far past the mark it belongs to,
     so the type is capped rather than the tracking pulled in */
  .hero-word span{font-size:clamp(14px,2.2vw,18px)}
}

/* ═══════════════════════════════════════════════════════════
   TYPE OVER A LIVE BACKGROUND
   Two things keep the words off the animation. A ground behind the
   header that darkens the top of the page and fades out downward,
   with no horizontal component at all, so neither side is favoured.
   And smaller headings, which sit more calmly over a moving field.
   ═══════════════════════════════════════════════════════════ */
.dhead{position:relative}

/* headings, one step down across every page that runs an animation behind it */
.dhead h1{font-size:max(20px,min(4.2vw,54px))}
.dsec h2{font-size:max(16px,min(2.9vw,34px))}
.apage .awordmark{font-size:max(28px,min(7.4vw,100px))}
.apage .dhead h1{font-size:max(16px,min(2.9vw,36px))}
/* The headline is set in the real italic of the variable face, which the
   landing page asks for by name; nothing here is a browser's own slant. An
   italic carries its own forward motion, so it wants less negative tracking
   than the upright did, and it reads a size smaller without losing weight. */
.hero h1{font-size:max(16px,min(2.6vw,35px));font-style:italic;
  letter-spacing:-.022em;font-synthesis-style:none}
h2.big{font-size:max(17px,min(3.6vw,46px))}
.close h2{font-size:max(17px,min(3.5vw,44px))}
.sec-label h2{font-size:max(14px,min(2.0vw,26px))}
.lead{font-size:clamp(15px,1.35vw,17.5px)}
.dhead .lead{max-width:52ch}
.topo-note{font-size:13.6px;max-width:56ch}
.hero-sub{font-size:clamp(15px,1.35vw,17.5px)}
@media (max-width:760px){
  .dhead h1{font-size:max(18px,min(5.0vw,32px))}
  .apage .awordmark{font-size:max(24px,min(9.5vw,56px))}
  .apage .dhead h1{font-size:max(14px,min(4.0vw,22px))}
  .hero h1{font-size:max(14px,min(3.7vw,25px))}
  h2.big{font-size:max(15px,min(4.4vw,30px))}
  .close h2{font-size:max(15px,min(4.2vw,28px))}
}

/* ═══════════════ LEGIBILITY WITHOUT AN OVERLAY ═══════════════
   Nothing is laid over the animation. The type carries its own contrast
   instead, so the field behind it stays fully visible. */
.hero h1,.hero-sub,.hero-word span,
.dhead h1,.dhead .lead,.dhead .eyebrow,.crumb,.topo-note,.apage .awordmark{
  text-shadow:0 1px 2px rgba(0,0,0,.9),0 2px 18px rgba(0,0,0,.75)}
.readout,.readout .v,.host-nm{text-shadow:0 1px 8px rgba(0,0,0,.9)}

/* ═══════════════ THE BAR STAYS AT THE TOP ═══════════════
   It is fixed, above the field and above the page, on every page. Nothing
   below this line is allowed to put it back into the flow. */
.nav{position:fixed;top:0;left:0;right:0;z-index:100}

/* ═══════════════ QUESTIONS ═══════════════
   Thirty two answers packed into a grid of equal boxes read as one slab, and a
   reader loses their place in it. So the page is built the other way round: the
   section stands still in its own column and says where you are, while its four
   questions run down a single measured column beside it. Each answer gets the
   width it wants and the air around it that a boxed grid cannot give, and the
   rules between them are hairlines rather than walls. */
.qsec{display:grid;grid-template-columns:minmax(0,15.5rem) minmax(0,1fr);
  gap:clamp(26px,4.4vw,72px);scroll-margin-top:126px;
  padding-block:clamp(34px,4.4vw,58px);border-top:1px solid var(--line)}
.qsec:first-of-type{border-top:0;padding-top:clamp(26px,3.4vw,40px)}
.qsec>*{min-width:0}

/* the section title rides down with its own questions and stops when they run
   out, so the reader always has the heading for whatever they are reading */
.qside{position:sticky;top:126px;align-self:start}
.qn{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.2em;color:var(--dim);
  font-variant-numeric:tabular-nums}
.qn .qsl{margin:0 .5em;opacity:.55}
.qside .qh{font-family:var(--f-display);font-size:clamp(20px,2.2vw,27px);font-weight:600;
  letter-spacing:-.022em;color:var(--white);line-height:1.16;margin-top:12px;
  text-wrap:balance}
.qsum{margin-top:12px;font-size:13.6px;line-height:1.6;color:var(--dim);max-width:30ch}

.qa{display:flex;flex-direction:column}
.qi{padding-block:clamp(22px,2.6vw,30px);border-top:1px solid var(--line-soft)}
.qi:first-child{border-top:0;padding-top:0}
.qi h3{font-family:var(--f-display);font-size:clamp(16px,1.75vw,19.5px);font-weight:600;
  letter-spacing:-.014em;color:var(--white);line-height:1.32;white-space:normal;
  max-width:44ch;text-wrap:pretty}
.qi p{margin-top:13px;font-size:15px;line-height:1.72;color:var(--text);max-width:68ch}

/* Under the two column width the section header becomes a band above its own
   questions. It stops being sticky there, because a header that parks itself on
   a narrow screen eats the reading area it was meant to serve.

   The jump bar wraps to more rows as the page narrows, so the landing offset
   for an anchor has to grow with it or a section title arrives underneath the
   bar it was clicked from. */
@media (max-width:940px){
  .qsec{grid-template-columns:1fr;gap:clamp(18px,3vw,26px);scroll-margin-top:196px}
  .qside{position:static}
  .qsum{max-width:56ch}
  .qi h3{max-width:none}
}
@media (max-width:620px){.qsec{scroll-margin-top:222px}}
.dpage.acc-green{--acc:var(--a6)}

/* ═══════════════ THE ADDRESS, IN PLAIN SIGHT ═══════════════
   A mailto only works if the reader has a mail client wired up. The address is
   shown as selectable text as well, with a copy button, so the page works for
   everyone regardless. */
.addr{margin:clamp(22px,3vw,32px) 0 clamp(18px,2.4vw,26px);border:1px solid var(--line);
  background:rgba(0,0,0,.55);padding:clamp(18px,2.4vw,26px);display:inline-flex;
  flex-direction:column;gap:10px;align-items:flex-start;max-width:100%}
.addr .al{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim)}
.addr .av{font-family:var(--f-mono);font-size:clamp(13px,1.9vw,22px);color:var(--white);
  word-break:break-all;user-select:all}
.addr .av a{color:var(--white)}
.addr .av a:hover{color:var(--acc)}
.addr .ab{appearance:none;background:transparent;border:1px solid var(--line);color:var(--text);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:8px 13px;cursor:pointer;transition:border-color .3s var(--ease),color .3s var(--ease)}
.addr .ab:hover{border-color:var(--acc);color:var(--white)}
.addr .ab[data-done]{border-color:var(--a6);color:var(--a6)}

/* ═══════════════════════════════════════════════════════════
   SMALL SCREENS AND TOUCH
   Below the desktop width the links collapse behind a button, because
   hiding them entirely left a phone with no way to reach the site.
   ═══════════════════════════════════════════════════════════ */
.nav-toggle{display:none;appearance:none;background:transparent;border:1px solid var(--line);
  width:44px;height:44px;margin-left:auto;cursor:pointer;padding:0;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  -webkit-tap-highlight-color:transparent}
.nav-toggle span{display:block;width:18px;height:1.5px;background:var(--white);
  transition:transform .35s var(--ease),opacity .25s var(--ease)}
.nav.open .nav-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav.open .nav-toggle span:nth-child(2){opacity:0}
.nav.open .nav-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.nav-toggle:hover{border-color:var(--blue)}

@media (max-width:960px){
  .nav-toggle{display:flex}
  .nav-links{position:fixed;left:0;right:0;top:64px;flex-direction:column;align-items:stretch;
    gap:0;margin:0;background:rgba(0,0,0,.96);border-bottom:1px solid var(--line);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    max-height:0;overflow:hidden;transition:max-height .42s var(--ease);
    padding-bottom:env(safe-area-inset-bottom,0)}
  .nav.open .nav-links{max-height:min(72vh,520px);overflow-y:auto}
  .nav-links a,.nav-links a:not(.nav-cta){display:block;padding:16px var(--pad);
    font-size:14px;border-bottom:1px solid var(--line-soft);min-height:52px;line-height:20px}
  .nav-links a::after{display:none}
  .nav-cta{border:0;text-align:left;background:transparent}
  .nav-cta:hover{background:transparent}
}

/* ---- platform and input handling ---- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:clip;-webkit-tap-highlight-color:rgba(95,124,252,.18);
  overscroll-behavior-x:none}
.nav-in{padding-left:max(var(--pad),env(safe-area-inset-left));
  padding-right:max(var(--pad),env(safe-area-inset-right))}
.wrap{padding-left:max(var(--pad),env(safe-area-inset-left));
  padding-right:max(var(--pad),env(safe-area-inset-right))}
/* every control a finger has to hit clears the 44px guideline */
@media (pointer:coarse){
  .btn{padding:16px 24px;min-height:48px}
  .cmp-nav button,.topo-nav button{min-height:56px}
  .addr .ab{min-height:44px;padding:12px 16px}
  .strip-in a{padding-top:19px;padding-bottom:19px}
  .f-grid ul a,.nx,.dlinks a{min-height:44px;display:flex;align-items:center}
  .dlinks a{flex-direction:column;align-items:flex-start;justify-content:center}
}
/* long single-line headings must never push the page sideways */
h1,h2,.prod .nm,.apage .awordmark,.hero-word span{max-width:100%;overflow:visible}
/* headings stay on one line at every width; the width axis does the work */
@media (max-width:420px){
  .hero-word span{letter-spacing:.16em;text-indent:.16em}
  .hero h1,h2.big,.close h2{font-variation-settings:"wdth" 64}
  .dhead h1,.dsec h2{font-variation-settings:"wdth" 68}
}

/* a failsafe: whatever happens to the script, the opening overlay leaves */
@keyframes bootOut{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.boot{display:none}}

/* ═══════════════════════════════════════════════════════════
   NOTHING MAY FORCE ITS CONTAINER WIDER THAN THE PAGE

   A grid or flex child defaults to min-width:auto, which means a wide canvas
   or a line that will not wrap can push its track wider than the container,
   and the whole section spills out. Setting min-width:0 lets the track shrink
   and the child fit, which is the actual fix. Clipping only hid it.
   ═══════════════════════════════════════════════════════════ */
.port>*,.demo>*,.premise>*,.gtrio>*,.prods>*,.prod>*,.qa>*,.eqs>*,.dlinks>*,
.f-grid>*,.stance>*,.why>*,.facts>*,.movements>*,.nxrow>*,
.topo-stage>*,.cmp-stage>*,.dgrid>*,.sec-grid>*{min-width:0}
.pcol,.hosts,.host-rail,.demo-stage,.demo-side,.sigc{min-width:0;max-width:100%}
canvas{max-width:100%}

/* the five stage names have to share one column, so they shrink to fit it
   and fall to a second row rather than pushing the column open */
.host-rail{flex-wrap:wrap}
.host-rail span{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:clamp(8px,.72vw,9.5px);letter-spacing:.06em;padding:9px 4px}
@media (max-width:1100px){
  .host-rail span{letter-spacing:.03em;padding:9px 3px}
}
@media (max-width:900px){
  /* two columns of instruments will not fit a tablet, so they stack */
  .port{grid-template-columns:1fr}
  .host-rail span{font-size:9.5px;letter-spacing:.08em;padding:11px 6px}
}

/* clip is the right tool, but it is newer; fall back where it is not known */
@supports not (overflow-x: clip){
  body{overflow-x:hidden}
}

/* the demonstration side panel: give the readout, the prose and the note
   distinct spacing so they read as three things rather than one block */
.demo-side{gap:22px}
.rdo{gap:13px}
.rdo .rl{padding-bottom:11px;gap:20px}
.rdo .k{max-width:24ch;line-height:1.45}
.dsec .body.sm{margin-top:0;max-width:46ch}
.demo-side .cite{margin-top:0;opacity:.72}
@media (max-width:900px){
  /* stacked, the panel sits under the stage and needs its own air */
  .demo-side{padding:24px 22px 26px}
}

/* The header sits directly on the background animation, so its small type
   needs more weight than the same type has against flat ink. Measured against
   the brightest pixel the field can produce: the dim grey lands at 2.65:1
   there, well under the 4.5:1 floor, and this brings it back over. */
.dhead .topo-note,.dhead .topo-note .cite,.dhead .note,.dhead .cite{color:#9AA3B7}
.dhead .topo-note .tl{color:var(--white)}
/* the coil strokes draw on top of the field and can be locally bright, so the
   smallest type in the header carries a tighter halo as well as the wide one */
.dhead .topo-note,.dhead .note,.dhead .cite{
  text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 10px rgba(0,0,0,.9),0 2px 20px rgba(0,0,0,.8)}

/* ═══════════════ A DEMONSTRATION LAID OUT AS TWO COLUMNS ═══════════════
   The deployment split, reused: one column per architecture, each with its
   own figure, its own state rail and its own live numbers, so the two are
   read against each other rather than in sequence. */
.dsplit{margin-top:clamp(30px,4vw,50px)}
.hosts canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.dsplit .hosts{aspect-ratio:4/3}
.dsplit .rdo{gap:10px;font-size:12px}
.dsplit .rdo .rl{padding-bottom:9px}
.dsplit .rdo .k{max-width:22ch}
.dsplit .pcol .rdo .v{color:var(--a4)}
.dsplit .pcol.hi .rdo .v{color:#B47CF8}
/* What the figures mean, read across rather than down: four keys, two under
   each panel, then one closing note under each. The strip carries the split's
   own border on so the whole demonstration reads as a single object. */
.dlegend{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-top:0}
.dlegend>div{background:var(--ink);padding:17px 19px 19px;display:flex;
  flex-direction:column;gap:11px;min-width:0}
.dlegend p{font-size:13.4px;line-height:1.58;margin:0}
.mk{display:block;width:34px;height:3px;border-radius:2px;flex:0 0 auto}
.mk.sol{display:flex;height:3px;border-radius:0;overflow:hidden}
.mk.sol i{flex:1 1 0;height:3px}
.mk.sol i:first-child{background:var(--a4)}
.mk.sol i:last-child{background:#A25CF6}
.mk.dsh{height:0;border-top:2px dashed rgba(255,255,255,.82);border-radius:0}
.mk.gho{height:2px;background:rgba(110,120,144,.55)}
.mk.gap{background:#F45B8B}
.mk.net{width:26px;height:11px;background:none;border:1px solid #2A3550;border-radius:2px}
.mk.cap{width:16px;height:16px;background:none;border-radius:50%;
  border:1px dashed rgba(110,120,144,.8)}
.mk.dot{display:flex;gap:7px;width:auto;height:6px;background:none;align-items:center}
.mk.dot i{width:6px;height:6px;border-radius:50%}
.mk.dot i:first-child{background:var(--a4)}
.mk.dot i:last-child{background:#A25CF6}
/* The argument the figure makes, directly under it and across its own width.
   It continues the legend strip rather than floating below it, so the figure,
   its keys and what it is for read as one object. Set in the italic of the
   face already loaded for the equations, which is why it carries without
   shouting. */
.dnotes{display:block;border:1px solid var(--line);border-top:0;
  background:var(--panel);box-shadow:inset 3px 0 0 var(--acc);
  padding:clamp(17px,2.1vw,25px) clamp(20px,2.5vw,31px)}
.dnotes p{margin:0;max-width:none;font-family:var(--f-math),Georgia,serif;
  font-style:italic;font-size:clamp(15.2px,1.22vw,17.6px);line-height:1.66;
  color:#BFC7D8}
.dnotes p+p{margin-top:.72em}
@media (max-width:900px){
  .dsplit .hosts{aspect-ratio:16/11}
  .dlegend{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dnotes{padding:16px 18px}
}
@media (max-width:560px){.dlegend{grid-template-columns:1fr}}
/* five segments, one per patch, at the places on the ramp the figure uses */
.mk.ram{display:flex;width:40px;height:7px;background:none;border-radius:2px;overflow:hidden}
.mk.ram i{flex:1 1 0;height:7px}
.dsplit .pcol .mk.ram i:nth-child(1){background:#4a2a06}
.dsplit .pcol .mk.ram i:nth-child(2){background:#96540c}
.dsplit .pcol .mk.ram i:nth-child(3){background:#de8e1a}
.dsplit .pcol .mk.ram i:nth-child(4){background:#f6be5c}
.dsplit .pcol .mk.ram i:nth-child(5){background:#fde9c2}
.mk.ram i:nth-child(1){background:#5876fa}
.mk.ram i:nth-child(2){background:#7c6cfa}
.mk.ram i:nth-child(3){background:#a25cf7}
.mk.ram i:nth-child(4){background:#ceacfc}
.mk.ram i:nth-child(5){background:#eeecff}

/* ═══════════════ ONE FIGURE, FULL WIDTH ═══════════════
   Same frame as the two column split, with a single panel: label, figure,
   state rail, then the live numbers laid out across rather than down. */
.dsolo{display:block;margin-top:clamp(30px,4vw,50px)}
.dsolo .hosts{aspect-ratio:16/9}
/* a round figure wants a squarer panel than a wide one does */
.dsolo.sq .hosts{aspect-ratio:3/2}
.dsolo .pcol{gap:16px}
.rdo.row{flex-direction:row;gap:1px;background:var(--line);border:1px solid var(--line)}
.rdo.row .rl{flex:1 1 0;min-width:0;flex-direction:column;align-items:flex-start;gap:7px;
  background:var(--ink);padding:15px 18px;border-bottom:0}
.rdo.row .k{max-width:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:100%}
.rdo.row .v{font-size:15px;color:#B47CF8}
@media (max-width:900px){
  .dsolo .hosts{aspect-ratio:4/3}
  .rdo.row{flex-direction:column}
  .rdo.row .rl{flex-direction:row;justify-content:space-between;align-items:baseline}
}

/* the cover's five patches, in the colours the figure actually draws them */
.dsolo~.dlegend .mk.ram i:nth-child(1){background:#5F7CFC}
.dsolo~.dlegend .mk.ram i:nth-child(2){background:#22D3C5}
.dsolo~.dlegend .mk.ram i:nth-child(3){background:#7BE04A}
.dsolo~.dlegend .mk.ram i:nth-child(4){background:#F5A524}
.dsolo~.dlegend .mk.ram i:nth-child(5){background:#B45CF7}

/* legend keys for the two levels, the channels between them, and the traffic */
.mk.two{display:flex;gap:8px;width:auto;height:9px;background:none;align-items:center}
.mk.two i{width:9px;height:9px;border-radius:50%}
.mk.two i:first-child{background:#5F7CFC}
.mk.two i:last-child{background:#B45CF7}
.mk.dgl{height:0;width:34px;border-top:1px dashed rgba(255,255,255,.55);border-radius:0}
.mk.pul{display:flex;gap:8px;width:auto;height:8px;background:none;align-items:center}
.mk.pul i{width:8px;height:8px;border-radius:50%}
.mk.pul i:first-child{background:#22D3C5}
.mk.pul i:last-child{background:#F5A524}

/* legend keys for the brane stack */
.mk.tri{display:flex;gap:0;width:36px;height:8px;background:none;border-radius:2px;overflow:hidden}
.mk.tri i{flex:1 1 0;height:8px}
.mk.tri i:nth-child(1){background:#5F7CFC}
.mk.tri i:nth-child(2){background:#22D3C5}
.mk.tri i:nth-child(3){background:#B45CF7}
.mk.str{height:2px;background:rgba(255,255,255,.82)}
.mk.skp{height:2px;background:#F5A524}
.mk.cut{height:0;width:34px;border-top:2px dashed #F45B8B;border-radius:0}
.mk.trc{display:flex;gap:4px;width:36px;height:3px;background:none;border-radius:0}
.mk.trc i{flex:1 1 0;height:3px;border-radius:2px}
.mk.trc i:nth-child(1){background:#22D3C5}
.mk.trc i:nth-child(2){background:#B45CF7}

/* ═══════════════ QUESTIONS, GROUPED ═══════════════
   Thirty two answers is a long page, so the runs are titled and a jump list
   sits above them. The headings are anchor targets, and they are offset from
   the top so the fixed bar does not sit over one when it is jumped to. */
/* The jump list rides down with the reader and parks under the bar at the top,
   so on a page this long the sections are always one click away. It carries its
   own opaque ground because the questions scroll underneath it. */
.qjump{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:clamp(26px,3.2vw,38px);
  position:sticky;top:64px;z-index:60;
  transition:box-shadow .35s var(--ease)}
.qjump.pinned{box-shadow:0 14px 30px -18px rgba(0,0,0,.95)}
.qjump a.on{color:var(--white);background:var(--raise);
  box-shadow:inset 0 -2px 0 var(--a6)}
.qjump a.on:hover{color:#000}
.qjump a{flex:1 1 auto;background:var(--ink);padding:12px 16px;font-family:var(--f-mono);
  font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);
  text-align:center;white-space:nowrap;transition:color .3s var(--ease),background .3s var(--ease)}
.qjump a:hover{color:#000;background:var(--a6);text-decoration:none}
@media (max-width:620px){
  .qjump a{flex:1 1 44%;font-size:9.5px;letter-spacing:.06em;padding:11px 8px}
}

/* ═══════════════════════════════════════════════════════════════════════
   A FIGURE, OPENED IN ITS OWN WINDOW

   Everything here is dead on a laptop. `dview-ready` is put on the document
   by the script only below the width at which the figures are already large,
   so the desktop reading of every page is byte for byte what it was.
   ═══════════════════════════════════════════════════════════════════════ */

/* The way in. Absolutely positioned on purpose: the two column figures are
   grids, and a button in their flow would take a cell of its own and split
   the panel it was meant to sit on. Out of flow it takes no track, and while
   the window does not exist it is display:none and takes nothing at all. */
.dview-open{display:none}
.dview-ready .dview-able{position:relative}
.dview-ready .dview-open{
  display:inline-flex;align-items:center;gap:7px;
  position:absolute;right:9px;top:9px;z-index:8;
  appearance:none;cursor:pointer;
  background:rgba(0,0,0,.72);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  padding:8px 12px;min-height:38px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text);
  -webkit-tap-highlight-color:transparent}
.dview-ready .dview-open:active{background:var(--blue);color:#000;border-color:var(--blue)}
/* two corners of a frame being pulled apart */
.dview-open .dvi{position:relative;width:11px;height:11px;flex:0 0 auto}
.dview-open .dvi::before,.dview-open .dvi::after{content:"";position:absolute;
  width:6px;height:6px;border-color:var(--blue);border-style:solid}
.dview-open .dvi::before{left:0;top:0;border-width:1.5px 0 0 1.5px}
.dview-open .dvi::after{right:0;bottom:0;border-width:0 1.5px 1.5px 0}

/* the space the figure came out of, held open so the page does not shuffle */
.dview-slot{width:100%}

/* ── the window ── */
.dview{position:fixed;inset:0;z-index:300;background:var(--ink);
  display:flex;flex-direction:column;
  animation:dviewIn .26s var(--ease) both}
@keyframes dviewIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.dview{animation:none}}
html.dview-on,html.dview-on body{overflow:hidden;touch-action:none}

.dview-bar{flex:0 0 auto;display:flex;align-items:center;gap:12px;
  background:var(--panel);border-bottom:1px solid var(--line);
  padding:10px max(14px,env(safe-area-inset-right,0px)) 10px max(14px,env(safe-area-inset-left,0px));
  padding-top:calc(10px + env(safe-area-inset-top,0px))}
.dview-t{flex:1 1 auto;min-width:0;margin:0;
  font-family:var(--f-display);font-weight:600;font-size:15px;
  letter-spacing:-.015em;line-height:1.25;color:var(--white);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dview-x{flex:0 0 auto;appearance:none;cursor:pointer;position:relative;
  width:44px;height:44px;background:transparent;border:1px solid var(--line);
  -webkit-tap-highlight-color:transparent}
.dview-x span{position:absolute;left:12px;top:21px;width:19px;height:1.5px;
  background:var(--white);display:block}
.dview-x span:first-child{transform:rotate(45deg)}
.dview-x span:last-child{transform:rotate(-45deg)}
.dview-x:active{border-color:var(--blue);background:var(--blue-ghost)}

.dview-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;touch-action:pan-y;
  padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}

/* Nothing inside is offered a second way out, and nothing inside is asked to
   fit a column that is no longer there. */
.dview .dview-open{display:none}
.dview .port,.dview .premise,.dview .cmp-stage,.dview .topo-stage{grid-template-columns:1fr}
.dview .port,.dview .premise,.dview .cmp,.dview .topo,
.dview .dlegend,.dview .dnotes{margin-top:0;border-left:0;border-right:0}
.dview #scene,.dview .surf-wrap{border-right:0}
.dview .pstage{border-bottom:1px solid var(--line)}

/* The figure keeps the proportion the page gives it and takes the window's
   full width; the screen only supplies a ceiling. Forcing a height instead
   made a landscape figure SHORTER than the page already gave it, which is the
   opposite of what opening it is for. A stacked pair is capped lower, so the
   second panel is in reach rather than a screen away.

   The panel's own padding is cut back in here. On a 393 wide phone it was
   spending forty-eight pixels of the screen on margin, which is an eighth of
   the figure. */
.dview .pcol{padding:14px 12px 18px}
.dview .hosts,.dview .pstage{max-height:var(--fh2,300px)}
.dview .dsolo .hosts{max-height:var(--fh,420px)}
.dview .surf-wrap{max-height:var(--fh,420px)}
.dview #scene{max-height:var(--fh,420px)}
.dview .dlegend{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:560px){.dview .dlegend{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════════════════
   TYPE AND TARGETS UNDER A FINGER

   Measured on a 320, a 393 and a 844 by 390: the labels that carry a figure's
   keys and the citations under the equations were set between 9.5 and 11
   pixels, which holds on a laptop at arm's length and does not on a phone.
   The floor is lifted only where the pointer is coarse, so the desktop
   typography is unchanged.
   ═══════════════════════════════════════════════════════════════════════ */
@media (pointer:coarse) and (max-width:900px){
  .cite{font-size:11.5px;line-height:1.5}
  .strip-in a{font-size:11px}
  .dlinks .k,.nx .k,.cmp-nav .n{font-size:11px;letter-spacing:.14em}
  .pk,.rdo .k,.topo-meta .fl{font-size:11.5px}
  .qjump a,.vt .k,.tags li,.cmp-nav .g{font-size:11px;letter-spacing:.1em}
  .topo-note .tl,.fk,.addr .ab,.f-grid h5{font-size:11.5px}
  .f-grid p,.f-grid li,.f-bot span,.f-bot p{font-size:12.5px}
  .eyebrow{font-size:11.5px;letter-spacing:.18em}
  /* The rail is the one label left small on purpose. Four or five segments
     share the width of the figure, so a larger face does not make "At machine
     precision" easier to read, it makes it a truncated version of itself. */
  .host-rail span{font-size:10.5px}
  /* a breadcrumb, an address and a profile link are controls a finger has to
     hit, not lines of type */
  .crumb a,.crumb span{padding-top:8px;padding-bottom:8px;display:inline-block}
  .promise a,.av a,.lead a{display:inline-block;padding-top:7px;padding-bottom:7px}
}

/* ═══════════════════════════════════════════════════════════════════════
   THE ENQUIRY FORM
   The page is dark and hairline ruled, so the form is built out of the
   same two materials: one pixel of --line, and a panel a shade off the
   ground. Nothing here is rounded and nothing is filled, except the one
   control that sends, which is the site's existing button.

   The honeypot is a real field that a person never sees and never tabs
   to. It cannot be display:none, because some bots read that and skip
   it, so it is taken out of the flow and clipped instead.
   ═══════════════════════════════════════════════════════════════════════ */
.frm{margin-top:clamp(28px,3.4vw,44px)}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap}

.frm fieldset{margin:0 0 1px;padding:clamp(22px,2.8vw,34px);border:1px solid var(--line);
  background:var(--panel)}
.frm fieldset+fieldset{border-top:0}
.frm legend{float:left;width:100%;margin:0 0 clamp(18px,2.2vw,26px);padding:0;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--white)}
.frm legend .fn{color:var(--acc);margin-right:12px}
.frm legend+*{clear:both}

.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.2vw,26px) clamp(18px,2.4vw,30px)}
.fld.wide{grid-column:1/-1}
.fld{display:flex;flex-direction:column;min-width:0}
.fld label{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text);margin-bottom:9px}
.fld .rq{color:var(--dim);letter-spacing:.12em;margin-left:9px;font-size:10px}
.fld .fh{font-size:13px;line-height:1.55;color:var(--dim);margin:-3px 0 10px;max-width:52ch}
/* Two fields in a row rarely carry the same amount of label. Pushing the
   control to the bottom of its cell puts the boxes on one line across the
   row, and lets the label and its hint take whatever height they need
   above. Without this a hint on one side drops that side's box alone. */
.fld>input,.fld>select,.fld>textarea{margin-top:auto}

.frm input,.frm select,.frm textarea{
  width:100%;font-family:var(--f-body);font-size:15px;line-height:1.5;color:var(--white);
  background:var(--raise);border:1px solid var(--line);border-radius:0;
  padding:13px 14px;transition:border-color .25s var(--ease),background .25s var(--ease)}
.frm textarea{resize:vertical;min-height:96px}
.frm input::placeholder,.frm textarea::placeholder{color:var(--dim)}
.frm input:hover,.frm select:hover,.frm textarea:hover{border-color:var(--line-soft)}
.frm input:focus,.frm select:focus,.frm textarea:focus{
  outline:none;border-color:var(--acc);background:var(--panel)}
.frm input:focus-visible,.frm select:focus-visible,.frm textarea:focus-visible{
  outline:2px solid var(--acc);outline-offset:2px}

/* the native arrow is the one part of a select a page cannot style, so the
   control is stripped and the mark is drawn as a background instead */
.frm select{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),
                   linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 1px),calc(100% - 15px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.frm select:focus{background-image:linear-gradient(45deg,transparent 50%,var(--acc) 50%),
                                   linear-gradient(135deg,var(--acc) 50%,transparent 50%)}
.frm option{background:var(--raise);color:var(--white)}

/* A field only reports itself invalid once the writer has actually touched
   it. :user-invalid is the whole reason this rule can exist; :invalid alone
   would paint every required field red the moment the page loads, and a
   browser without it simply shows nothing until submit, which is the old
   behaviour rather than a broken one. */
.frm input:user-invalid,
.frm select:user-invalid,
.frm textarea:user-invalid{border-color:var(--a5)}

.fsend{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2.4vw,30px);
  margin-top:clamp(22px,2.6vw,30px)}
.fsend .btn{border:1px solid var(--acc);background:var(--acc)}
.fsend .btn:hover{box-shadow:0 12px 34px -14px var(--acc)}
.fsend .promise{margin-top:0;max-width:40ch}

@media (max-width:720px){
  .fgrid{grid-template-columns:1fr}
}
@media (pointer:coarse) and (max-width:900px){
  /* a finger needs the whole control, and iOS zooms a field set under 16px */
  .frm input,.frm select,.frm textarea{font-size:16px;padding:14px 14px;min-height:48px}
  .frm textarea{min-height:112px}
  .fld label{font-size:11.5px}
  .fld .fh{font-size:13px}
  .fsend .btn{width:100%;justify-content:center;min-height:52px}
}