/* ════════════════════════════════════════════════════════════════════════════
   FUSION AI — THE FRONTIER KIT  ·  generation 2
   Import after tokens.css. Everything is scoped under .fr so this sheet and
   the gen-1 site.css can never collide if a page ever loads both.

   WHAT THIS IS
   The house design language, promoted out of Personal/himanshu — which had the
   best-developed system in the estate and kept it to itself. Fusion AI and the
   founder's site both build on this, which is what makes them read as one hand.

   THE THREE RULES THIS SHEET ENFORCES
   1. The card is abolished. Information sits on hairlines and an index column,
      not in boxes. There is exactly ONE raised surface (.plate) and it is
      reserved for the single most important block on a page.
   2. The accent is rationed. One hue, four steps. If everything is violet,
      nothing is.
   3. Weight 600 is the ceiling. Never 800. Scale and spacing do the shouting.

   THE TWO SIGNATURE DEVICES — pick one per site, never both
   · .fr--rail      a vertical hairline down the page, hot where each section
                    begins. Reads as a journey. Use for narrative, first-person,
                    "I followed the problem down the stack."
   · .fr--frontier  a horizontal hairline between sections, violet at the rail
                    and cooling toward --beyond as it runs right. Reads as a
                    boundary crossed. Use for the institution.
   Same grid, same --rail-x registration, same components. Different instrument.

   TWO BUG CLASSES ARE FIXED HERE RATHER THAN PER-SITE, because this estate has
   regressed on both before:
   · the nav below 720px (links get their own scrolling row, never a cut-off one)
   · horizontal overflow below 412px (ledger stacks, figures scroll inside their
     own container, long tokens break)
   Build on the kit and a site cannot reintroduce either.
   ════════════════════════════════════════════════════════════════════════════ */

/* ═══ FONTS ═══════════════════════════════════════════════════════════════════
   Declared in tokens.css since 2026-09-10, next to the variables that ask for
   them, so every sheet that loads the tokens gets Inter and JetBrains Mono -
   this kit and the gen-1 site.css alike. Nothing to declare here.            */

/* ═══ BASE ════════════════════════════════════════════════════════════════════ */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:92px}
.fr,.fr *{box-sizing:border-box;margin:0;padding:0}
.fr{
  /* The one gen-1 token this kit has to disagree with. --ink in tokens.css is
     #e8eef6, a COOL blue-white, and gen-1 sites still read it — so it cannot be
     changed there. Gen 2's whole premise is that the ground is blue-biased and
     the ink is warm and the two never cross; cool ink on a cold ground throws
     that away. Overriding it on .fr keeps the change to sheets that load this
     kit, and it inherits to everything inside. */
  --ink: #EDEAE3;

  background:var(--void); color:var(--ink);
  font:400 var(--fs-body)/1.68 var(--sans);
  letter-spacing:.004em;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
}
/* A long unbreakable token — an address, a URL — otherwise sets the minimum
   width of its container and pushes the whole page sideways. */
.fr :is(p,li,td,th,h1,h2,h3,h4,summary,figcaption,dd,dt){overflow-wrap:break-word}
.fr :is(.btn,code,a[href^="mailto:"]){overflow-wrap:anywhere}
.fr a{color:inherit;text-decoration:none}
.fr em{font-style:normal}            /* <em> is emphasis, not italics, here */
.fr ::selection{background:var(--flux);color:var(--void)}
.fr :where(a,button,summary,[tabindex]):focus-visible{
  outline:none;border-radius:var(--r-1);
  box-shadow:0 0 0 2px var(--void),0 0 0 4px var(--flux-300),
             0 0 0 9px hsl(var(--flux-h) 100% 74% / .16);
}
.fr :is(section,header)[id]{scroll-margin-top:92px}

/* Grain. FIXED, not scrolling — grain that scrolls reads as texture applied to
   the content; grain pinned to the viewport reads as the display itself. */
.fr-grain{
  position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size:160px 160px;
}

/* ═══ TYPE ════════════════════════════════════════════════════════════════════ */
.fr :is(h1,h2,h3,h4){font-weight:600;text-wrap:balance}   /* 600 is the ceiling */
.fr h1{font-size:var(--fs-d1);line-height:.96;letter-spacing:-.032em;max-width:15ch}
.fr h2{font-size:var(--fs-d2);line-height:1.04;letter-spacing:-.026em;max-width:20ch}
.fr h3{font-size:var(--fs-title);line-height:1.22;letter-spacing:-.014em;max-width:34ch}
.fr h4{font-size:var(--fs-base);line-height:1.4;letter-spacing:-.004em}
.fr p{text-wrap:pretty;max-width:var(--measure)}
.fr .lede{font-size:var(--fs-lede);line-height:1.52;letter-spacing:-.008em;
  color:var(--ink-2);max-width:var(--measure-lede)}
.fr .sub{color:var(--ink-3);font-size:var(--fs-base);line-height:1.66;letter-spacing:.005em}
.fr :is(.eyebrow,.kicker,.mono){font-family:var(--mono);font-size:var(--fs-mono);
  font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.fr :is(.eyebrow,.kicker){color:var(--ink-4)}
.fr .hot{color:var(--ink)}           /* lift one phrase out of a grey paragraph */
.fr .lit{color:var(--flux)}          /* and the rationed accent, for one word   */
.fr code{font:400 .92em/1 var(--mono);letter-spacing:-.01em;background:var(--plate-hi);
  border-radius:var(--r-1);padding:.14em .38em;color:var(--ink)}
.fr .prose a{text-decoration:underline;text-decoration-color:var(--edge-ui);
  text-decoration-thickness:1px;text-underline-offset:.22em;
  transition:color .14s,text-decoration-color .14s}
.fr .prose a:hover{color:var(--flux-300);text-decoration-color:var(--flux)}

/* ═══ SHELL ═══════════════════════════════════════════════════════════════════
   --rail-x is the single number that registers the signature device, the section
   markers and the text column to each other. Move it and all three follow.     */
.fr .shell{position:relative}
.fr .wrap{width:min(var(--page-max),calc(100% - (var(--gutter)*2)));
  margin-inline:auto;padding-left:calc(var(--rail-x) - var(--gutter) + 34px)}
.fr .section{position:relative;padding-block:clamp(4.25rem,2.4rem + 7.2vw,7.5rem)}

/* ── DEVICE A: the confinement rail (vertical) ─────────────────────────────────
   One hairline down the whole page. Cold along its length, hot for 220px
   wherever a section begins. It IS the grid made visible.                      */
.fr--rail .shell::before{
  content:"";position:absolute;left:var(--rail-x);top:0;bottom:0;width:1px;pointer-events:none;
  background:linear-gradient(180deg,transparent 0,var(--edge) 64px,
    var(--edge) calc(100% - 140px),transparent 100%);
}
.fr--rail .section::before{
  content:"";position:absolute;left:var(--rail-x);top:var(--tick-y,0px);
  width:1px;height:220px;pointer-events:none;
  background:linear-gradient(180deg,var(--flux-100) 0px,var(--flux) 10px,
    hsl(var(--flux-h) 100% 74% / .55) 14%,hsl(var(--flux-h) 100% 74% / .16) 46%,transparent 100%);
}
.fr--rail .section::after{
  content:"";position:absolute;left:calc(var(--rail-x) - 26px);top:calc(var(--tick-y,0px) - 6px);
  width:52px;height:190px;pointer-events:none;
  background:radial-gradient(26px 95px at 26px 0,hsl(var(--flux-h) 100% 74% / .15),transparent 72%);
}

/* A light that rides the rail with the reader. Fixed to the viewport, driven by
   document progress — at rest it sits at the top, at the foot of the page it has
   reached the bottom. Pure CSS; no scroll listener. */
.fr .railride{display:none}
@supports (animation-timeline: scroll()){
  .fr--rail .railride{
    display:block;position:fixed;left:var(--rail-x);top:0;
    width:1px;height:210px;z-index:2;pointer-events:none;
    background:linear-gradient(180deg,transparent 0,
      hsl(var(--flux-h) 100% 74% / .28) 34%,var(--flux) 56%,var(--flux-100) 64%,
      var(--flux) 72%,hsl(var(--flux-h) 100% 74% / .24) 86%,transparent 100%);
    animation:fr-railride linear both;
    animation-timeline:scroll(root block);
  }
  .fr--rail .railride::after{
    content:"";position:absolute;left:-3.5px;top:62%;
    width:8px;height:8px;border-radius:50%;background:var(--flux-100);
    box-shadow:0 0 9px 2px hsl(var(--flux-h) 100% 74% / .55),
               0 0 24px 7px hsl(var(--flux-h) 100% 74% / .2);
  }
  /* Start ON screen. Starting above means the light only appears once you have
     already scrolled, which reads as broken rather than as a rest state. */
  @keyframes fr-railride{from{transform:translateY(0)}to{transform:translateY(calc(100vh - 210px))}}
}

/* ── DEVICE B: the frontier (horizontal) ──────────────────────────────────────
   A boundary the reader crosses, once per section. Violet at the rail, cooling
   toward --beyond as it runs right: the known edge, and what is past it. This is
   the only place --beyond is allowed to appear as a line.                      */
.fr--frontier .section{border-top:1px solid transparent;
  border-image:linear-gradient(90deg,
    var(--flux) 0,
    hsl(var(--flux-h) 100% 74% / .42) 14%,
    var(--edge-hi) 38%,
    color-mix(in srgb,var(--beyond) 26%,transparent) 68%,
    transparent 97%) 1}
/* The node where the frontier meets the rail column. */
.fr--frontier .section::before{
  content:"";position:absolute;left:var(--rail-x);top:-3px;width:5px;height:5px;
  border-radius:50%;background:var(--flux-100);pointer-events:none;
  box-shadow:0 0 0 3px hsl(var(--flux-h) 100% 74% / .18),
             0 0 12px 2px hsl(var(--flux-h) 100% 74% / .45);
}
/* A short wash hanging below the crossing, so the line has depth. */
.fr--frontier .section::after{
  content:"";position:absolute;left:0;right:0;top:0;height:180px;pointer-events:none;
  background:linear-gradient(180deg,hsl(var(--flux-h) 100% 74% / .055),transparent 86%);
}
/* The hero sits above the first frontier, so it carries neither line nor node. */
.fr--frontier .hero{border-top:0}
.fr--frontier .hero::before,.fr--frontier .hero::after{display:none}

/* Section index marker — device A draws its own; device B hangs it off the line. */
.fr .node{position:absolute;left:var(--rail-x);top:var(--tick-y,0px);width:11px;height:1px;
  background:var(--flux)}
.fr .node::before{content:"";position:absolute;left:-1.5px;top:-1.5px;width:4px;height:4px;
  background:var(--flux-100);box-shadow:0 0 0 3px hsl(var(--flux-h) 100% 74% / .18)}
.fr--frontier .node{display:none}
.fr .sec-ix{position:absolute;left:calc(var(--rail-x) + 14px);top:calc(var(--tick-y,0px) - 7px);
  font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.16em;color:var(--ink-4)}
.fr--frontier .sec-ix{top:-14px;background:var(--void);padding-right:8px}

/* A band that steps off the page, for rhythm between long sections. */
.fr .band{background:var(--vessel)}

/* ═══ NAV ═════════════════════════════════════════════════════════════════════ */
.fr nav{position:sticky;top:0;z-index:60;border-bottom:1px solid var(--edge);
  background:hsl(220 33% 3% / .74);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.fr .navrow{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:66px}
.fr .logo{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.12em;
  text-transform:uppercase;display:inline-block;padding-block:6px}
.fr .logo b{font-weight:500;color:var(--ink)}
.fr .logo .lsep{color:var(--flux)}
.fr .navlinks{display:flex;gap:26px;font-family:var(--mono);font-size:var(--fs-mono);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
.fr .navlinks a{position:relative;display:inline-block;padding-block:7px;transition:color .16s}
.fr .navlinks a:hover{color:var(--ink-2)}
.fr .navlinks a::after{content:"";position:absolute;left:0;right:100%;bottom:1px;height:1px;
  background:var(--flux);transition:right .25s cubic-bezier(.2,.7,.3,1)}
.fr .navlinks a:hover::after{right:0}

/* ═══ REGISTERS — the card is abolished ═══════════════════════════════════════
   An index column and a hairline. That is the whole container.                 */
.fr .register{display:grid;grid-template-columns:64px minmax(0,var(--measure));
  gap:0 24px;padding-block:30px;border-top:1px solid transparent;
  border-image:linear-gradient(90deg,var(--edge-hi),var(--edge) 22%,transparent 92%) 1}
.fr .register .ix{font-family:var(--mono);font-size:var(--fs-mono);color:var(--ink-4);
  padding-top:.45em;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.fr .register .ix::after{content:"";display:block;width:9px;height:1px;margin-top:.85em;
  background:var(--ink-5);transition:background .16s,width .16s}
.fr .register:hover .ix{color:var(--ink-2)}
.fr .register:is(:hover,:focus-within) .ix::after{background:var(--flux);width:15px}
.fr .register h3{margin-bottom:12px}
.fr .register p{color:var(--ink-3);font-size:var(--fs-base)}
.fr .register p + p{margin-top:14px}
.fr .rule{height:1px;border:0;
  background:linear-gradient(90deg,var(--edge-hi),var(--edge) 22%,transparent 92%)}

/* A register that is also a link — used for the venture roster. */
.fr a.register{transition:background .18s}
.fr a.register:hover{background:linear-gradient(90deg,hsl(var(--flux-h) 100% 74% / .045),transparent 62%)}
.fr a.register .go{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-4);margin-top:14px;display:block;transition:color .16s}
.fr a.register:hover .go{color:var(--flux-300)}

/* ═══ ORDINAL STATUS — fill, not hue ═════════════════════════════════════════
   Operating / building / direction is an ORDER, so it is encoded as how full the
   dot is. Survives greyscale, print and every form of colour blindness — which
   a red/amber/green set does not.                                             */
.fr .chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);
  font-size:var(--fs-mono);font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-4);padding:5px 9px 5px 7px;border-radius:var(--r-1);
  box-shadow:inset 0 0 0 1px var(--edge);white-space:nowrap}
.fr .chip::before{content:"";width:7px;height:7px;border-radius:50%;flex:none}
.fr .chip--op{color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--edge-hi)}
.fr .chip--op::before{background:var(--flux);box-shadow:0 0 0 3px hsl(var(--flux-h) 100% 74% / .14)}
.fr .chip--build::before{background:linear-gradient(90deg,var(--ink-2) 50%,transparent 50%);
  box-shadow:inset 0 0 0 1px var(--ink-4)}
.fr .chip--dir::before{box-shadow:inset 0 0 0 1px var(--ink-5)}
.fr .chips{display:flex;flex-wrap:wrap;gap:8px}

/* ═══ THE ONE RAISED SURFACE ══════════════════════════════════════════════════
   Reserved for the single most important block on a page. If a second one
   appears, the first has stopped meaning anything.                            */
.fr .plate{position:relative;background:var(--plate);border-radius:var(--r-3);
  isolation:isolate;padding:34px 36px;
  box-shadow:inset 0 1px 0 0 hsl(var(--flux-h) 60% 92% / .055),inset 0 0 0 1px var(--edge),
    0 1px 2px -1px var(--shadow-fill),0 18px 40px -28px var(--shadow-key)}
.fr .plate::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  pointer-events:none;
  background:radial-gradient(120% 90px at 18% 0%,hsl(var(--flux-h) 100% 74% / .10),transparent 70%)}

/* ═══ BUTTONS ═════════════════════════════════════════════════════════════════ */
.fr .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:40px}
.fr .btn{font:500 var(--fs-base)/1 var(--sans);letter-spacing:-.004em;padding:13px 21px;
  border-radius:var(--r-2);box-shadow:inset 0 0 0 1px var(--edge-ui);color:var(--ink);
  transition:box-shadow .14s,color .14s,transform .14s}
.fr .btn:hover{box-shadow:inset 0 0 0 1px var(--ink-5),inset 0 1px 0 0 hsl(var(--flux-h) 60% 92% / .07);
  transform:translateY(-1px)}
.fr .btn--p{background:var(--ink);color:var(--void);box-shadow:none}
.fr .btn--p:hover{background:#fff;box-shadow:0 0 0 1px #fff,
  0 12px 28px -14px hsl(var(--flux-h) 100% 74% / .34)}
.fr .btn--nav{padding:9px 15px;font-size:var(--fs-xs);white-space:nowrap}

/* ═══ INSTRUMENT ROW — a fact strip, not a stat card grid ═════════════════════ */
.fr .instr{display:flex;flex-wrap:wrap;gap:0;margin-top:44px;border-top:1px solid var(--edge)}
.fr .instr > *{padding:14px 26px 14px 0;margin-right:26px;border-right:1px solid var(--edge)}
.fr .instr > *:last-child{border-right:0}
.fr .instr b{display:block;font-family:var(--mono);font-size:var(--fs-base);font-weight:500;
  color:var(--ink);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.fr .instr span{display:block;font-family:var(--mono);font-size:var(--fs-micro);
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-4);margin-top:5px}

/* ═══ FIGURES ═════════════════════════════════════════════════════════════════
   content-visibility lets the browser skip style, layout and paint for any
   figure off screen — which also stops its animation cycles. `auto` remembers the
   rendered size so the scrollbar does not jump once a figure has been seen.    */
.fr figure{margin-top:42px;content-visibility:auto;contain-intrinsic-size:auto 520px}
.fr .figscroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.fr .figscroll:focus-visible{outline:none;box-shadow:0 0 0 2px var(--void),0 0 0 4px var(--flux-300)}
.fr .figscroll::-webkit-scrollbar{height:3px}
.fr .figscroll::-webkit-scrollbar-thumb{background:var(--edge-hi);border-radius:3px}
.fr .fig-tall{display:none}          /* the portrait composition, switched on below */
.fr figure svg{width:100%;height:auto;display:block;overflow:visible}
.fr .fighint{display:none;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-4);margin-top:10px}
.fr figcaption{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.08em;
  color:var(--ink-4);margin-top:20px;max-width:70ch;text-transform:uppercase}

/* Diagram ink. Six weights and that is all. */
.fr .f-struct{fill:none;stroke:var(--edge-hi);stroke-width:1}
.fr .f-active{fill:none;stroke:var(--ink-5);stroke-width:1}
.fr .f-lit{fill:none;stroke:var(--flux);stroke-width:1.25}
.fr .f-hot{fill:none;stroke:var(--flux-100);stroke-width:1.5}
.fr .f-cold{fill:none;stroke:var(--edge-hi);stroke-width:1;stroke-dasharray:3 4}
.fr .f-beyond{fill:none;stroke:var(--beyond);stroke-width:1.25;opacity:.85}
.fr .f-wash{fill:hsl(var(--flux-h) 100% 74% / .05);stroke:none}
.fr .f-lbl{fill:var(--ink-4);font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase}
.fr .f-lbl path{fill:none;stroke:var(--ink-5);stroke-width:1}
.fr .f-lbl-hot{fill:var(--ink-2);font-weight:600}
.fr .f-lbl-beyond{fill:var(--beyond);opacity:.9}
.fr .f-tick{fill:none;stroke:var(--ink-5);stroke-width:1}
.fr .f-dot{fill:var(--flux-100)}
.fr .f-node{fill:var(--plate);stroke:var(--ink-5);stroke-width:1}
.fr .f-node-hot{fill:var(--plate);stroke:var(--flux);stroke-width:1.25}
.fr .f-link2{fill:none;stroke:hsl(var(--flux-h) 100% 74% / .30);stroke-width:1}

/* Energy travelling the wires. Every flow path carries pathLength="100", so one
   dash pattern reads at the same speed whatever the real geometry. */
.fr .f-flow{fill:none;stroke:var(--flux-100);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:11 89;stroke-dashoffset:100;animation:fr-flow 3.6s linear infinite}
.fr .f-flow.slow{animation-duration:5.4s;stroke:var(--flux);stroke-width:1.3;opacity:.75}
.fr .f-flow.dim{stroke:var(--ink-4);stroke-width:1.2;stroke-dasharray:7 93;opacity:.6}
@keyframes fr-flow{to{stroke-dashoffset:0}}
.fr .f-breathe{animation:fr-breathe 3.6s ease-in-out infinite}
@keyframes fr-breathe{0%,100%{opacity:.45}50%{opacity:1}}
.fr .f-ring{fill:none;stroke:var(--flux);stroke-width:1;transform-box:fill-box;
  transform-origin:center;animation:fr-ring 3.6s ease-out infinite}
@keyframes fr-ring{0%{transform:scale(.62);opacity:.6}70%,100%{transform:scale(1.5);opacity:0}}

/* ═══ DISCLOSURE ══════════════════════════════════════════════════════════════ */
.fr details{border-top:1px solid transparent;
  border-image:linear-gradient(90deg,var(--edge-hi),var(--edge) 22%,transparent 92%) 1}
.fr summary{display:grid;grid-template-columns:64px minmax(0,var(--measure));gap:0 24px;
  padding-block:27px;cursor:pointer;list-style:none}
.fr summary::-webkit-details-marker{display:none}
.fr summary::marker{content:""}
.fr summary .ix{font-family:var(--mono);font-size:var(--fs-mono);color:var(--ink-4);padding-top:.5em}
.fr summary h3{margin-bottom:10px}
.fr .hook{color:var(--ink-3);font-size:var(--fs-base)}
.fr .more{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.12em;
  color:var(--ink-4);margin-top:16px;text-transform:uppercase}
.fr .more::before{content:"+ "}
.fr details[open] .more{display:none}
.fr details[open] summary .hook{color:var(--ink-4)}
.fr .dwrap{display:grid;grid-template-columns:64px minmax(0,var(--measure));gap:0 24px}
.fr .dbody{grid-column:2;padding:0 0 40px;border-left:2px solid var(--flux-700);
  padding-left:22px;margin-left:-22px;max-width:var(--measure)}
.fr .dbody p{color:var(--ink-3);font-size:var(--fs-base);margin-top:16px}
.fr .dbody p:first-child{margin-top:0}

/* ═══ LEDGER ══════════════════════════════════════════════════════════════════ */
.fr .ledger{margin-top:44px;width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.fr .ledger th{text-align:left;font-family:var(--mono);font-size:var(--fs-micro);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);
  padding:0 20px 12px 0;border-bottom:1px solid var(--edge)}
.fr .ledger td{padding:15px 20px 15px 0;border-bottom:1px solid var(--edge);
  color:var(--ink-3);vertical-align:top}
.fr .ledger td:first-child{color:var(--ink);font-weight:500;white-space:nowrap}
.fr .ledger tr:hover td{color:var(--ink-2)}

/* ═══ FOOTER ══════════════════════════════════════════════════════════════════ */
.fr footer{border-top:1px solid var(--edge);padding:34px 0 46px}
.fr .footrow{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.08em;color:var(--ink-4)}
.fr .footrow a{display:inline-block;padding-block:6px;text-decoration:underline;
  text-underline-offset:3px}
.fr .plate-line{margin-top:14px;font-family:var(--mono);font-size:var(--fs-micro);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4)}

.fr .skip{position:fixed;left:-999px;top:auto;background:var(--ink);color:var(--void);
  padding:10px 16px;border-radius:var(--r-1);font-size:var(--fs-xs);font-weight:600;z-index:100}
.fr .skip:focus{left:16px;top:16px}
.fr main:focus{outline:none}
.fr .sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

/* ═══ MOTION — scroll-driven, CSS only, no JavaScript ═════════════════════════ */
@supports (animation-timeline: view()){
  @keyframes fr-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
  @keyframes fr-draw{to{stroke-dashoffset:0}}
  @keyframes fr-energise{from{opacity:.22}to{opacity:1}}
  .fr .section::before,.fr .section::after{
    animation:fr-energise linear both;animation-timeline:view();animation-range:entry 0% cover 24%}
  .fr :is(.register,.instr,figure,details,.ledger tr,.plate,.lede,.sub,h2,.kicker,.chips){
    animation:fr-rise linear both;animation-timeline:view();animation-range:entry 2% entry 48%}
  /* The hero is above the fold: it must never animate in, or the page opens empty. */
  .fr .hero :is(.lede,h1,.kicker,.instr,.actions,.chips,.sub){animation:none;opacity:1;transform:none}
  .fr :is(.f-lit,.f-hot,.f-beyond){stroke-dasharray:1400;stroke-dashoffset:1400;
    animation:fr-draw linear both;animation-timeline:view();animation-range:entry 4% cover 30%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fr *{transition:none!important;animation:none!important}
  .fr .section::before,.fr .section::after,
  .fr :is(.register,.instr,figure,details,.ledger tr,.plate,.lede,.sub,h2,.kicker,.chips){
    opacity:1!important;transform:none!important}
  .fr :is(.f-lit,.f-hot,.f-beyond){stroke-dasharray:none!important;stroke-dashoffset:0!important}
  .fr :is(.f-flow,.railride){display:none!important}
  .fr .figscroll{overflow-x:auto}
}

/* ═══ RESPONSIVE ══════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .fr .instr > *{border-right:0;padding-right:0;margin-right:32px}
  /* Diagram labels are ~10.5px in a ~910 viewBox: at 317px wide they render at
     3.6px. Scroll the figure at a legible width instead of shrinking it away. */
  .fr .figscroll{margin-inline:-4px;padding-inline:4px}
  .fr .figscroll svg{min-width:730px}
  .fr .fighint{display:block}
}
@media (max-width:720px){
  :root{--rail-x:16px}
  .fr--rail .section::after{display:none}
  .fr .wrap{width:calc(100% - 32px);padding-left:26px}
  .fr :is(.register,summary,.dwrap){grid-template-columns:1fr;gap:6px}
  .fr :is(.register,summary) .ix{padding-top:0}
  .fr .register .ix::after{display:none}
  .fr .dbody{grid-column:1;margin-left:0}

  /* A long page with no way to jump is not navigable. The links take their own
     row and scroll sideways inside their own container, which never widens the
     page. The mask makes a clipped row read as scrollable rather than broken. */
  .fr .navrow{flex-wrap:wrap;gap:0 10px;min-height:0;padding-block:8px}
  .fr .logo{font-size:11px;letter-spacing:.1em}
  .fr .btn--nav{padding:7px 12px;font-size:11px}
  .fr .navlinks{display:flex;order:3;width:100%;gap:13px;margin-top:2px;
    font-size:10px;letter-spacing:.06em;
    overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 18px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 18px),transparent 100%)}
  .fr .navlinks::-webkit-scrollbar{display:none}
  .fr .navlinks a{flex:none;padding-block:6px}

  /* Portrait screens get the vertical composition instead of a sideways scroll. */
  .fr :is(.figscroll,.fighint){display:none}
  /* Capped, so label size holds across the portrait band — ~11.8px at 320 and
     ~12.6px from 390 up, instead of ballooning to 18px on a tablet. */
  .fr .fig-tall{display:block;width:100%;max-width:330px;height:auto;margin-inline:auto}

  /* A 3-column table has a hard minimum width here: the chip is nowrap and the
     component names are unbreakable. Stacked, it has no minimum at all — which
     is what stops the <412px overflow this estate has already shipped once. */
  .fr :is(.ledger,.ledger tbody,.ledger tr,.ledger td){display:block;width:100%}
  .fr .ledger thead{position:absolute;width:1px;height:1px;margin:-1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .fr .ledger tr{padding:16px 0;border-bottom:1px solid var(--edge)}
  .fr .ledger tr:last-child{border-bottom:0}
  .fr .ledger td{border:0;padding:0}
  .fr .ledger td:first-child{font-size:var(--fs-base);white-space:normal}
  .fr .ledger td:nth-child(2){margin:9px 0}
  .fr .plate{padding:26px 22px}
}
@media (max-width:400px){
  /* Buy back horizontal room where there is least of it. Figures already scroll
     inside their own container, so shrinking them here would only cost labels. */
  :root{--rail-x:12px}
  .fr .wrap{width:calc(100% - 22px);padding-left:17px}
}
@media (max-width:344px){
  /* Below this the full brand and the nav button cannot share a row. */
  .fr .logo :is(.lsep,.lsuf){display:none}
}

/* ═══ PRINT ═══════════════════════════════════════════════════════════════════ */
@media print{
  .fr{background:#fff;color:#000}
  .fr-grain,.fr nav,.fr .actions,.fr .skip,.fr .more,.fr .railride,
  .fr .section::before,.fr .section::after,.fr .shell::before{display:none}
  .fr *{opacity:1!important;transform:none!important;box-shadow:none!important}
  .fr .dbody{display:block!important;border-left:2px solid #ccc}
  .fr .plate{border:1px solid #ccc}
  .fr :is(h1,h2,h3){color:#000!important}
  .fr :is(p,.sub,.lede){color:#222!important}
  .fr--frontier .section{border-image:none;border-top:1px solid #ccc}
}