/* =============================================================================
   $RF - RISK FREE*  ·  LAYOUT + SURFACE
   Authority: working/DESIGN-TOKENS.json. Every value below is consumed from it
   verbatim. Nothing here is re-derived.

   Laws enforced in this file:
     L1  board digits are --figure in EVERY state. Colour lives on ONE cell.
     L2  the sign glyph is always printed. U+2212, never U+002D.
     L3  six cells at every breakpoint. Unused cells are blank flaps.
     L4  no colour or background-colour is ever transitioned. The board's sign
         cell is repainted at the flip midpoint, while the leaf is edge-on.
     L5  no disclosure text is dimmed. --ink-dim is metadata-rail only.
     L6  the asterisk is --signal-neg permanently.
     L8  every transition names the single property it animates. The shorthand
         that animates everything is not used.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1 · TOKENS
   --------------------------------------------------------------------------- */

:root {
  /* colour */
  --ground:       #08090B;
  --surface:      #0E1013;
  --flap:         #15181C;
  --flap-lo:      #12151A;
  --ink:          #C9CDD4;
  --ink-dim:      #7B838E;
  --figure:       #FFB000;
  --figure-ghost: #A36D00;
  --signal-neg:   #F0483E;
  --signal-pos:   #357F5C;
  --hairline:     #232830;
  --hairline-hot: #412F12;
  --perf:         #1B1F25;
  --focus:        #FFB000;

  /* radius. Three values. There is no fourth. */
  --r-flat: 0;
  --r-flap: 2px;
  --r-well: 3px;

  /* grid. The horizontal unit is one character of Martian Mono at wdth 87.5
     at --t-fine, because the register is a terminal and a terminal measures
     in columns. */
  --ch:  calc(var(--t-fine) * 0.648);
  --pad: clamp(20px, 4vw, 64px);

  --rail-prose: calc(62 * var(--ch));
  --rail-gut:   calc(5 * var(--ch));
  --rail-meta:  calc(20 * var(--ch));
  --rail-total: min(calc(87 * var(--ch)), 1180px);

  --measure-table: calc(80 * var(--ch));
  --measure-prose: calc(62 * var(--ch));
  --measure-fine:  calc(52 * var(--ch));
  --measure-lede:  calc(44 * var(--ch));

  /* rhythm */
  --rhy-board: clamp(48px, 9vh, 96px);
  --rhy-prose: clamp(56px, 7vh, 88px);
  --rhy-table: 34px;
  --rhy-tight: 22px;
  --rhy-foot:  clamp(96px, 14vh, 160px);

  /* space. Seven steps, ratio approx 1.618. Deliberately not a 4px grid. */
  --sp-1: 4px;  --sp-2: 7px;  --sp-3: 11px; --sp-4: 18px;
  --sp-5: 29px; --sp-6: 47px; --sp-7: 76px;

  /* motion. MOTION_INTENSITY 2. One object moves and it is the board. */
  --dur-flap:   62ms;
  --dur-hover:  120ms;
  --dur-expand: 180ms;
  --dur-decay:  900ms;
  --dur-focus:  0ms;
  --ease-flap:   cubic-bezier(.55, .06, .68, .19);
  --ease-hover:  linear;
  --ease-expand: cubic-bezier(.2, 0, 0, 1);
  --ease-decay:  linear;

  --rail-h: calc(var(--t-micro) * 1.65 + 2 * var(--sp-3) + 1px);
}

/* ---------------------------------------------------------------------------
   2 · RESET + GROUND
   --------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--ground);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--rail-h) + var(--sp-5));
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  /* No overflow-x hack. `overflow-x: clip` was removed on purpose: it hides a
     real overflow from a scrollWidth probe and turns a broken band into a
     false green. The board is solved from the CONTAINER inline size instead,
     and the vw fallback carries a scrollbar allowance. */
  min-height: 100%;
}

h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
b { font-weight: 700; }
code { font-size: 1em; }

a { color: inherit; text-decoration: none; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  transition: none;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--surface); color: var(--ink);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--hairline);
  font-family: var(--rf-mono); font-stretch: 75%; font-size: var(--t-micro);
  letter-spacing: var(--tr-label); text-transform: uppercase;
}
.skip:focus { left: var(--pad); top: var(--sp-3); }

.tnum { font-variant-numeric: tabular-nums; }

/* the guilloche. One lathe-work rosette, larger than the viewport, positioned
   so only an arc of it ever crosses the board well. The only ornament. */
.guilloche {
  position: fixed;
  top: -18vh;
  right: -34vw;
  width: min(150vh, 130vw);
  aspect-ratio: 1;
  background: url("/assets/img/guilloche.svg") center / contain no-repeat;
  /* DESIGN-TOKENS specifies opacity .025 on --hairline. Measured: #232830 at
     2.5% over #08090B is a delta of 0.7 of one 8-bit level, so it cannot
     render at all. .09 is the lowest value that resolves to a visible line on
     an 8-bit display, which is what "sub-perceptual ornament" means in
     practice. Still under 5 levels of separation from the ground. */
  opacity: .09;
  z-index: 1;
  pointer-events: none;
}
@media (max-width: 899px) { .guilloche { top: 6vh; right: -55vw; width: 150vw; } }

main, .rail, .foot { position: relative; z-index: 10; }

/* ---------------------------------------------------------------------------
   3 · SECTION 00 · TOP RAIL
   The H1 is a rail item, not a title: visually identical to its neighbours.
   --------------------------------------------------------------------------- */

.rail {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  background: var(--ground);
  border-bottom: 1px solid var(--hairline);
}
.rail__in {
  display: flex; flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) var(--pad);
}
.rail__grp { display: flex; align-items: baseline; gap: var(--sp-4); min-width: 0; }
.rail__item {
  font-size: var(--t-micro);
  color: var(--ink);
  white-space: nowrap;
}
.rail__item.rf-h1 { font-size: var(--t-micro); margin: 0; }
.rail__sp { display: inline-block; width: .6em; }
.rail__meta { color: var(--ink-dim); }        /* the one place --ink-dim lives */
.rail__long { display: none; }

.ast {
  color: var(--signal-neg);                    /* L6 · permanent, data-independent */
  /* The asterisk is a link inside a text block, so colour alone may not carry
     it: at 2.3:1 against --ink a red-only cue fails WCAG 1.4.1. It therefore
     keeps a hairline underline at rest and thickens it on hover. */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-hover) var(--ease-hover);
}
.ast:hover, .ast:focus-visible { border-bottom-color: var(--signal-neg); }

.rail__rehearse {
  margin: 0;
  padding: var(--sp-2) var(--pad);
  border-top: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--t-micro);
}
.rail__rehearse[hidden] { display: none; }

@media (min-width: 560px) { .rail__long { display: inline; } }
@media (min-width: 900px) {
  .rail__in { flex-wrap: nowrap; justify-content: space-between; }
  .rail__grp--read { justify-content: flex-end; }
}

/* ---------------------------------------------------------------------------
   4 · SECTION 01 · THE BOARD BAND
   --------------------------------------------------------------------------- */

.band {
  min-height: 100dvh;
  display: grid;
  grid-template-rows:
    [rail] calc(var(--rail-h) + var(--sp-5))
    [pre]  1fr
    [label] auto
    [board] auto
    [denom] auto
    [verdict] auto
    [lede] auto
    [post] .78fr;
  row-gap: 0;
  container-type: inline-size;
}
.band__pre { grid-row: pre; }

.band__label {
  grid-row: label;
  padding: 0 var(--pad) var(--sp-4);
  color: var(--ink);
  font-size: var(--t-micro);
}
.dot { display: inline-block; padding: 0 .55em; color: var(--ink-dim); }

/* -- the board object ------------------------------------------------------ */

.board { grid-row: board; position: relative; z-index: 20; }

/* --t-board is declared in type.css with a vw fallback. Where container query
   units are supported the well is solved from the CONTAINER inline size, so a
   classic scrollbar can never push the array past the viewport edge. */
@supports (width: 1cqw) {
  .band, .nf__board { --t-board: min(50vh, calc((100cqw - (2 * var(--pad))) / 4.055)); }
}

.board__well {
  background: var(--surface);
  border-radius: var(--r-well);
  padding: calc(var(--t-board) * .09);
  margin-inline: var(--pad);
  display: grid;
  grid-template-columns: repeat(6, calc(var(--t-board) * .600));
  gap: calc(var(--t-board) * .055);
  justify-content: start;
  box-shadow: inset 0 1px 0 var(--hairline);
}
.board__edge {
  height: 1px;
  background: var(--hairline-hot);   /* full bleed, directly beneath the well */
}

.flap {
  position: relative;
  width: calc(var(--t-board) * .600);
  height: calc(var(--t-board) * .85);
  border-radius: var(--r-flap);
  background: var(--flap-lo);
  overflow: hidden;
}

.flap__face, .flap__leaf {
  position: absolute; left: 0; right: 0;
  overflow: hidden;
  backface-visibility: hidden;
}
.flap__face--top, .flap__leaf--out {
  top: 0; height: 53.5%;
  border-radius: var(--r-flap) var(--r-flap) 0 0;
  background: linear-gradient(180deg, #171A1F 0%, #14171B 100%);
}
.flap__face--bot, .flap__leaf--in {
  bottom: 0; height: 46.5%;
  border-radius: 0 0 var(--r-flap) var(--r-flap);
  background: var(--flap-lo);
}
.flap__leaf { z-index: 30; }
.flap__leaf--out { transform-origin: bottom; transform: perspective(900px) rotateX(0deg); }
.flap__leaf--in  { transform-origin: top;    transform: perspective(900px) rotateX(90deg); }

/* the seam, plus the cast shadow it throws on the lower leaf */
.flap__seam {
  position: absolute; left: 0; right: 0;
  top: 53.5%;
  height: calc(var(--t-board) * .85 * .09);
  border-top: 1px solid var(--ground);
  background: linear-gradient(180deg, rgb(0 0 0 / .42) 0, rgb(0 0 0 / 0) 100%);
  z-index: 25;
  pointer-events: none;
}

.flap__glyph {
  position: absolute; left: 0; width: 100%;
  height: calc(var(--t-board) * .85);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--rf-mono);
  font-weight: 700;
  font-stretch: 75%;                 /* explicit: the wdth axis defaults to 112.5 */
  font-size: var(--t-board);
  line-height: 1;
  letter-spacing: 0;                 /* --tr-board is carried by the gutter */
  font-feature-settings: "calt" 1, "case" 1;
  color: var(--figure);              /* L1 · amber in every state */
  /* Optical y. DESIGN-TOKENS specifies 47% of the cell height. Measured on the
     shipped binary, cap height is .800em and the round glyphs (0 6 8 S O)
     overshoot it by ~.012em top and bottom, so the ink band is .824em inside a
     cell that is only .850em tall. At 47% the top of a 0 clips against the
     flap's own overflow. -.005em is the closest the array gets to 47% with no
     clipping: it lands the ink at 49.4%, and the seam at 53.5% still cuts below
     the glyph's centre, which is the behaviour 47% was specified to produce. */
  transform: translateY(-.005em);
  user-select: none;
  white-space: pre;
}
.flap__face--top > .flap__glyph, .flap__leaf--out > .flap__glyph { top: 0; }
.flap__face--bot > .flap__glyph, .flap__leaf--in  > .flap__glyph { bottom: 0; }

/* live figures only. Sub-perceptual: it makes the amber sit ON the black
   rather than float in front of it. Do not raise the alpha or the blur. */
.board[data-live="1"] .flap__glyph { text-shadow: 0 0 2px rgb(255 176 0 / .18); }

/* the ONE coloured character on the page */
.flap[data-sign="neg"] .flap__glyph { color: var(--signal-neg); }
.flap[data-sign="pos"] .flap__glyph { color: var(--signal-pos); }
.flap[data-ghost="1"]  .flap__glyph { color: var(--figure-ghost); text-shadow: none; }

/* reduced motion: the cells resolve instantly and the seam darkens for one
   frame, so the change is still perceptible. A silent update on a page whose
   entire content is one live figure is a broken page, not a calm one. */
@keyframes seamTick { 0% { opacity: 1; } 55% { opacity: 1; } 100% { opacity: 0; } }
.flap__tick {
  position: absolute; inset: 0;
  background: rgb(0 0 0 / .55);
  z-index: 32; opacity: 0; pointer-events: none;
}
.flap[data-tick="1"] .flap__tick { animation: seamTick 110ms var(--ease-decay) 1; }

/* -- the denominator line, attached to the board's foot -------------------- */

.band__denom {
  grid-row: denom;
  padding: var(--sp-4) var(--pad) 0;
  color: var(--ink);
  font-size: var(--t-fine);
  max-width: calc(var(--measure-table) + 2 * var(--pad));
}

.band__verdict {
  grid-row: verdict;
  padding: var(--rhy-tight) var(--pad) 0;
  max-width: calc(var(--measure-lede) + 2 * var(--pad));
  /* Reserve the tallest state's box. Measured: pre-launch is the longest
     sub-line, at 5 lines on a 44ch measure at 360. Without this the verdict
     changing state re-flows the lede beneath it, which is exactly the CLS
     Lighthouse measured at 0.073 before this rule existed. */
  min-height: calc(var(--t-lede) * 1.35 + var(--sp-3) + var(--t-fine) * 1.6 * 5);
}
@media (min-width: 560px) {
  .band__verdict { min-height: calc(var(--t-lede) * 1.35 + var(--sp-3) + var(--t-fine) * 1.6 * 4); }
}
@media (min-width: 900px) {
  .band__verdict { min-height: calc(var(--t-lede) * 1.35 + var(--sp-3) + var(--t-fine) * 1.6 * 4); }
}
.band__verdict .rf-fine { margin-top: var(--sp-3); color: var(--ink); }
.band__retry { margin-top: var(--sp-4); }

.band__lede {
  grid-row: lede;
  padding: var(--rhy-tight) var(--pad) 0;
  max-width: calc(var(--measure-lede) + 2 * var(--pad));
  color: var(--ink);
}

/* ---------------------------------------------------------------------------
   5 · BUTTONS. No gradient anywhere. 1px hairline, --r-flat, amber focus.
   --------------------------------------------------------------------------- */

.cta { padding: var(--rhy-board) var(--pad) 0; }
.cta__in {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--sp-4);
  max-width: var(--measure-prose);
}
.cta__ca { color: var(--ink); font-size: var(--t-fine); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%;
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--hairline);
  border-radius: var(--r-flat);
  background: transparent;
  color: var(--ink);
  font-family: var(--rf-mono); font-weight: 500; font-stretch: 75%;
  font-size: var(--t-micro); line-height: 1.65;
  letter-spacing: var(--tr-label); text-transform: uppercase;
  font-feature-settings: "case" 1;
  cursor: pointer;
  transition: border-color var(--dur-hover) var(--ease-hover);
}
.btn:hover:not(:disabled) { border-color: var(--figure); }
.btn:disabled { cursor: not-allowed; border-style: dashed; color: var(--ink-dim); }
.btn--pri { border-color: var(--hairline); }
.btn--tert { padding-inline: var(--sp-4); }
.btn[hidden] { display: none; }

@media (min-width: 560px) {
  .btn { width: auto; }
  .cta__in { flex-direction: row; flex-wrap: wrap; align-items: center; max-width: none; }
  .cta__ca { flex-basis: 100%; }
}

/* ---------------------------------------------------------------------------
   6 · THE SECTION RULE. A bond-coupon perforation, never a border-top.
   --------------------------------------------------------------------------- */

.rule {
  border: 0;
  height: 1px;
  margin: var(--rhy-prose) var(--pad);
  background-image: repeating-linear-gradient(90deg, var(--perf) 0 2px, transparent 2px 6px);
}
.rule--in { margin-inline: 0; margin-block: var(--rhy-table); max-width: var(--measure-prose); }

/* ---------------------------------------------------------------------------
   7 · PROSE SECTIONS. Two-rail from 900px. Everything hard-left at --pad.
   At 1920 the measure stays at 87ch and the right of the viewport stays bare
   ground. That asymmetry is the design. Do not centre it.
   --------------------------------------------------------------------------- */

.sec { padding: 0 var(--pad); }
.sec__prose { max-width: var(--measure-prose); }
.sec__prose > * + * { margin-top: var(--rhy-tight); }
.sec__prose > h2 + * { margin-top: var(--sp-5); }
.sec__prose p { color: var(--ink); }
.sec__meta { margin-top: var(--rhy-table); }

.metarail { display: grid; gap: var(--rhy-tight); font-size: var(--t-fine); }
.metarail dt { color: var(--ink-dim); letter-spacing: var(--tr-label); text-transform: uppercase; }
.metarail dd { margin: var(--sp-1) 0 0; color: var(--ink-dim); }
@media (max-width: 899px) {
  .metarail { grid-template-columns: repeat(auto-fit, minmax(calc(16 * var(--ch)), max-content)); gap: var(--sp-4) var(--sp-6); }
}

@media (min-width: 900px) {
  .sec {
    display: grid;
    grid-template-columns: var(--rail-prose) var(--rail-gut) var(--rail-meta);
    gap: 0;
    max-width: calc(var(--rail-total) + 2 * var(--pad));
  }
  .sec--single { display: block; }
  .sec__meta {
    grid-column: 3;
    margin-top: 0;
    padding-left: var(--rail-gut);
    border-left: 1px solid var(--hairline);   /* a rule instead of a gap */
    align-self: start;
  }
  .sec__prose { grid-column: 1; }
}

.pull {
  color: var(--ink);
  max-width: var(--measure-lede);
  margin-top: var(--rhy-table) !important;
}
.seccta { margin-top: var(--rhy-table) !important; }

.stamp, .stampline, .underline-stamp {
  color: var(--ink);
  font-size: var(--t-fine);
}
.stampline { padding-bottom: var(--sp-2); border-bottom: 1px solid var(--hairline); }
.underline-stamp { max-width: var(--measure-fine); }

.hexwrap { display: inline-block; max-width: 100%; overflow-x: auto; vertical-align: bottom; }
.hexwrap .rf-hex { white-space: nowrap; }

.gaps { display: grid; gap: var(--sp-4); }
.gaps li {
  position: relative;
  padding-left: calc(3 * var(--ch));
  color: var(--ink);                 /* L5 · never dimmed, never smaller */
}
.gaps li::before {
  content: "";
  position: absolute; left: 0; top: .72em;
  width: calc(1.4 * var(--ch)); height: 1px;
  background: var(--figure-ghost);
}

.split h3 { margin-bottom: var(--sp-3); font-size: var(--t-micro); color: var(--ink); }

/* -- tables. A term sheet that reflows is not a term sheet. ---------------- */

.sec__prose--table { max-width: var(--measure-table); }
.sec__prose--table > p, .sec__prose--table > .note { max-width: var(--measure-prose); }
.scrollx { overflow-x: auto; max-width: 100%; padding-bottom: var(--sp-2); }
.terms, .legend {
  width: var(--measure-table);          /* a term sheet that reflows is not a term sheet */
  max-width: none;
  font-size: var(--t-fine);
  color: var(--ink);
}
.legend { width: min(var(--measure-table), calc(52 * var(--ch))); }
/* the sheet's longest term is 16 characters, so it hands the column back to the
   values, where a 42-character address has to fit on one unbroken line */

.terms > div, .legend > div {
  display: grid;
  grid-template-columns: calc(32 * var(--ch)) 1fr;
  gap: 0 var(--sp-4);
  padding: var(--sp-3) 0;
  background-image: repeating-linear-gradient(90deg, var(--perf) 0 2px, transparent 2px 6px);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
}
.terms > div:last-child, .legend > div:last-child { background-image: none; }
.terms dt, .legend dt { color: var(--ink); letter-spacing: var(--tr-data); }
.terms dd, .legend dd { margin: 0; color: var(--ink); }
.terms dd { text-align: right; }
.legend > div { grid-template-columns: calc(16 * var(--ch)) 1fr; }
/* the sheet's longest term is 16 characters, so it hands the column back to the
   values, where a 42-character address has to fit on one unbroken line */
.terms.terms--sheet > div { grid-template-columns: calc(20 * var(--ch)) 1fr; }
.terms.terms--base  > div { grid-template-columns: calc(32 * var(--ch)) 1fr; }

.note { max-width: var(--measure-prose); color: var(--ink); }
.note__k { display: block; color: var(--ink-dim); margin-bottom: var(--sp-2); font-size: var(--t-micro); }

.qa + .qa { margin-top: var(--rhy-prose) !important; }
.qa .q { font-weight: 700; }
.qa .a { margin-top: var(--rhy-tight); max-width: var(--measure-prose); }

/* ---------------------------------------------------------------------------
   8 · SECTION 09 · FOOTER
   --------------------------------------------------------------------------- */

.foot { padding: var(--rhy-foot) var(--pad) var(--rhy-board); border-top: 1px solid var(--hairline); }
.foot__in { max-width: var(--rail-total); }
.foot__nav {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
  font-size: var(--t-micro);
  max-width: min(calc(122 * var(--ch)), 100%);   /* one row from 1280 up */
}
.foot__nav a {
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-hover) var(--ease-hover);
}
.foot__nav a:hover, .foot__nav a:focus-visible { border-bottom-color: var(--figure); }

.foot__ca { margin-top: var(--rhy-table); color: var(--ink); font-size: var(--t-fine); }
.foot__copy { margin-top: var(--sp-4); }
.foot__copy[hidden] { display: none; }
.foot__signoff { margin-top: var(--rhy-table); max-width: var(--measure-prose); color: var(--ink); }
.foot__legal { margin-top: var(--rhy-table); max-width: var(--measure-fine); color: var(--ink); }
.foot__stamp { margin-top: var(--rhy-table); max-width: var(--measure-fine);
               color: var(--ink-dim); text-transform: none; letter-spacing: 0;
               font-stretch: 87.5%; line-height: 1.65; }

/* ---------------------------------------------------------------------------
   9 · A1 · 404
   --------------------------------------------------------------------------- */

.nf { padding: calc(var(--rail-h) + var(--rhy-foot)) var(--pad) var(--rhy-foot); }
.nf__in { max-width: var(--measure-prose); }
.nf h2 { margin-bottom: var(--rhy-tight); }
.nf p { color: var(--ink); margin-bottom: var(--rhy-table); }
.nf__board { container-type: inline-size; padding-bottom: var(--rhy-foot); }
.nf__board .band__denom { padding-top: var(--sp-4); max-width: none; }
.nf__verdict { padding: var(--rhy-tight) var(--pad) 0; max-width: calc(var(--measure-lede) + 2 * var(--pad)); }
.nf__board > .rf-fine { padding: var(--sp-3) var(--pad) 0; max-width: calc(var(--measure-fine) + 2 * var(--pad)); color: var(--ink); }

/* ---------------------------------------------------------------------------
   10 · REDUCED MOTION
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ast, .btn, .foot__nav a { transition: none; }
}