/* site.css — one identity for the whole site.
 *
 * ── WHY THIS LOOKS THE WAY IT DOES ───────────────────────────────────────────────────────────────
 * Rewritten 2026-08-07 after three probes measured, rather than argued, what was wrong:
 *
 *   design-probe    0 inline SVG      vs Stripe 39, Linear 13
 *   palette-probe   0 gradients, 0 shadows, 0 blur, 0 translucent layers
 *                                     vs Linear 10/12/11/9, Stripe 17/2/7/2
 *   motion-probe    0 transitions, 0 custom easing curves
 *                                     vs Stripe 708/768, Linear 150/122
 *
 * Flat fills, no surface ladder, no depth, no motion. That is what "looks cheap" is made of, and
 * none of it was a matter of taste.
 *
 * ── THE SURFACE LADDER ───────────────────────────────────────────────────────────────────────────
 * Linear stacks five dark surfaces inside a 0.05 lightness band, every one tinted blue at H≈247,
 * never grey. Stripe does the same at the light end at H≈250. We do it at H≈262 with slightly more
 * chroma (C≈0.02 against Linear's 0.003) so it reads as storm-blue rather than as neutral grey.
 *
 * Dark because MESH is displayed against black in every radar product ever made. On a dark ground
 * the data becomes the light source, which is the one thing on this site nobody else can copy.
 *
 * ── MOTION ───────────────────────────────────────────────────────────────────────────────────────
 * Both references almost never use a browser default curve. Their most-used is a hard deceleration:
 * fast out of the gate, long settle. That is what reads as weight. Durations sit at 160ms (Linear)
 * and 300ms (Stripe), and they animate transform, opacity, colour, fill and stroke, essentially
 * never anything that triggers layout.
 *
 * We keep the reduced-motion guard at the bottom. Both references have zero.
 */

@font-face{font-family:Archivo;src:url(/fonts/archivo.woff2)format('woff2-variations');
  font-weight:400 900;font-stretch:75% 125%;font-display:swap}
/* Source Serif 4 removed 2026-08-08: three typefaces is a named amateur signal and the serif was
   the one doing the least work. The file stays on disk in case the decision is revisited. */

:root{
  /* Five surfaces on an even perceptual ladder, ~0.035 L apart, all cast blue at H≈262. */
  --s0:#0b0e17;   /* page ground */
  --s1:#10141f;
  --s2:#151a28;   /* cards */
  --s3:#1b2131;   /* raised */
  --s4:#232a3c;   /* hover / active */
  --line:#2a3350;
  --line-soft:#1d2436;

  --ink:#e9edf7;
  --ink-2:#a3adc8;
  --muted:#727d9b;

  /* Accent is taken from the MESH ramp, so the interface and the data share one language. */
  --hot:#ff7a2f;
  --hot-soft:#ffa06a;
  --hot-wash:rgba(255,122,47,.10);
  --hi:#ffe08a;   /* the top of the ramp: largest stones */
  --cool:#5fb3ac;

  --display:Archivo,"Helvetica Neue",Arial,sans-serif;
  --body:Archivo,'Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --measure:38rem;

  /* Depth. Shadows carry the surface hue rather than black, which is why they read as light
     falling on a material instead of as a grey smear. */
  --sh-1:0 1px 2px rgba(4,6,12,.6);
  --sh-2:0 4px 14px -4px rgba(4,6,12,.7), 0 1px 2px rgba(4,6,12,.6);
  --sh-3:0 18px 48px -18px rgba(4,6,12,.9), 0 2px 8px rgba(4,6,12,.55);
  --glow:0 0 0 1px rgba(255,122,47,.35), 0 8px 30px -10px rgba(255,122,47,.45);

  /* Hard deceleration, matched to what the references actually ship. */
  --ease:cubic-bezier(.25,1,.5,1);
  --ease-soft:cubic-bezier(.165,.84,.44,1);
  --t-fast:140ms;
  --t:220ms;
  --t-slow:380ms;

  --accent:#ff7a2f;  /* alias kept for older page rules */
  --rule:#2a3350; --hair:#1d2436; --paper:#0b0e17; --panel:#151a28;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:dark}
body{margin:0;color:var(--ink);
  background:var(--s0);
  /* Two very wide, very low-opacity washes. Depth on the ground plane, so nothing sits on a
     dead flat fill. Measured as 0 on this site before today. */
  background-image:
    radial-gradient(1200px 620px at 78% -8%, rgba(255,122,47,.075), transparent 62%),
    radial-gradient(900px 520px at 6% 4%, rgba(95,120,220,.075), transparent 60%);
  background-attachment:fixed;
  font:400 17px/1.62 var(--body);letter-spacing:-.004em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.wrap{max-width:64rem;margin:0 auto;padding:0 clamp(1.1rem,4vw,2.5rem)}
a{color:var(--ink);text-underline-offset:3px;text-decoration-thickness:1px;
  transition:color var(--t-fast) var(--ease)}
a:hover{color:var(--hot)}
strong,b{font-weight:600}
::selection{background:rgba(255,122,47,.3)}

h1{font-family:var(--display);font-weight:900;font-stretch:112%;
  font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1;letter-spacing:-.035em;
  margin:clamp(2rem,5vw,3.2rem) 0 0;max-width:22ch;text-wrap:balance}
h2{font-family:var(--display);font-weight:800;font-stretch:106%;
  font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.08;letter-spacing:-.03em;
  margin:clamp(2.2rem,5vw,3rem) 0 .8rem;max-width:22ch}
h3{font-family:var(--display);font-weight:800;font-stretch:100%;font-size:1.12rem;
  letter-spacing:-.015em;margin:1.9rem 0 .5rem}
p{margin:0 0 1.1rem;max-width:var(--measure);color:var(--ink-2)}
.lede{font-size:1.12rem;line-height:1.55;color:var(--ink-2);margin-top:1.1rem;max-width:40rem}
.fine,.legal{font-size:.9rem;color:var(--muted);line-height:1.55}
.muted{color:var(--muted)}
.lbl{font:600 10.5px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.tnum{font-variant-numeric:tabular-nums}
code,pre{font:13.5px/1.6 var(--mono)}
code{background:var(--s3);padding:.14rem .34rem;color:var(--ink);border-radius:3px}
pre{background:var(--s1);border:1px solid var(--line-soft);padding:1rem 1.1rem;overflow-x:auto;
  margin:1.1rem 0;max-width:100%;border-radius:6px;box-shadow:var(--sh-1)}
pre code{background:none;padding:0}

/* ═══ MASTHEAD ═══════════════════════════════════════════════════════════════════════════════════ */
.site-head{border-bottom:1px solid var(--line-soft);position:sticky;top:0;z-index:20;
  background:rgba(11,14,23,.72);backdrop-filter:saturate(1.5) blur(14px);
  -webkit-backdrop-filter:saturate(1.5) blur(14px)}
.site-head-inner{max-width:64rem;margin:0 auto;padding:.9rem clamp(1.1rem,4vw,2.5rem);
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.site-brand{font-family:var(--display);font-weight:900;font-stretch:112%;font-size:1.02rem;
  letter-spacing:-.02em;text-transform:uppercase;text-decoration:none;color:var(--ink)}
.site-brand:hover{color:var(--ink)}
.mk{display:none}
.site-nav{display:flex;gap:1.15rem;flex-wrap:wrap;align-items:baseline}
.site-nav a{font:600 10.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;padding-bottom:3px;border-bottom:1px solid transparent;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.site-nav a:hover{color:var(--hot);border-bottom-color:var(--hot)}
.site-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--hot)}

/* ── PHONE NAV ───────────────────────────────────────────────────────────────────────────────────
   Preserved from the sheet this replaces, and it is not cosmetic. Measured on the live page at
   390px, the old nav was nine 12.8px links with 25px tap targets wrapped into three rows a few px
   apart, so a thumb aimed at one landed on its neighbour. Full-width rows, two columns, ~44px. */
@media(max-width:34rem){
  .site-head{position:static}
  .site-head-inner{padding-bottom:0;gap:.5rem}
  .site-nav{display:grid;grid-template-columns:1fr 1fr;gap:0;width:100%;
    border-top:1px solid var(--line-soft);margin-top:.5rem}
  .site-nav a{min-height:44px;display:flex;align-items:center;padding:0 .2rem;
    border-bottom:1px solid var(--line-soft)}
  .site-nav a:nth-child(odd){border-right:1px solid var(--line-soft);padding-right:.6rem}
  .site-nav a:nth-child(even){padding-left:.6rem}
  .site-nav a[aria-current="page"]{border-bottom-color:var(--line-soft);color:var(--hot)}
}

/* ═══ FOOTER ═════════════════════════════════════════════════════════════════════════════════════ */
.site-foot{max-width:64rem;margin:clamp(3rem,7vw,5rem) auto 0;
  padding:2.2rem clamp(1.1rem,4vw,2.5rem) 0;border-top:1px solid var(--line)}
.site-foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem 2rem}
.site-foot h2{font:600 10.5px/1.3 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .7rem;padding:0;border:0;max-width:none}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.site-foot a{color:var(--ink-2);text-decoration:none;font-size:.92rem;line-height:1.4;
  border-bottom:1px solid transparent;transition:color var(--t-fast) var(--ease)}
.site-foot a:hover{color:var(--hot);border-bottom-color:var(--hot)}
@media(max-width:44rem){.site-foot-cols{grid-template-columns:1fr 1fr}}
@media(max-width:26rem){.site-foot-cols{grid-template-columns:1fr}}
.site-id{max-width:64rem;margin:2rem auto 0;padding:1.3rem clamp(1.1rem,4vw,2.5rem) 3rem;
  border-top:1px solid var(--line-soft);font-size:.9rem;line-height:1.65;color:var(--muted)}
.site-id b{color:var(--ink-2)}
.site-id a{color:var(--ink-2)}

/* ═══ CONTROLS ═══════════════════════════════════════════════════════════════════════════════════ */
.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-end;margin:1.4rem 0 0}
label{display:block;font:600 10.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .35rem}
input,textarea,select{
  font:400 1.05rem/1.3 var(--body);padding:.8rem .8rem;border:1px solid var(--line);
  background:var(--s1);color:var(--ink);border-radius:7px;width:100%;min-width:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),
             background-color var(--t-fast) var(--ease)}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:hover,textarea:hover{border-color:#38446b;background:var(--s2)}
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:none;border-color:var(--hot);background:var(--s2);
  box-shadow:0 0 0 3px rgba(255,122,47,.18)}
textarea{min-height:9rem;font:13.5px/1.55 var(--mono);resize:vertical}

button,.btn{font-family:var(--display);font-weight:900;font-stretch:106%;font-size:1.02rem;
  letter-spacing:-.01em;padding:.85rem 1.25rem;color:#12151f;
  background:linear-gradient(180deg,var(--hot-soft),var(--hot));
  border:0;cursor:pointer;border-radius:7px;text-decoration:none;display:inline-block;
  box-shadow:var(--sh-2);
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t) var(--ease),
             filter var(--t-fast) var(--ease)}
button:hover,.btn:hover{transform:translateY(-1px);box-shadow:var(--glow);filter:brightness(1.06)}
button:active,.btn:active{transform:translateY(0) scale(.99)}
button:focus-visible,.btn:focus-visible{outline:2px solid var(--hot);outline-offset:3px}
button[disabled]{opacity:.5;cursor:default;transform:none;box-shadow:var(--sh-1)}
.ghost{background:none;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.ghost:hover{background:var(--s3);border-color:#38446b;filter:none}
.fld{margin:0 0 .9rem}
.ex{font-size:.88rem;color:var(--muted);margin:.7rem 0 0}

/* ═══ SURFACES ═══════════════════════════════════════════════════════════════════════════════════ */
.panel,.answer{background:linear-gradient(180deg,var(--s2),var(--s1));
  border:1px solid var(--line-soft);border-radius:10px;padding:clamp(1.1rem,2.5vw,1.6rem);
  margin:1.4rem 0 0;box-shadow:var(--sh-2);
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),
             transform var(--t) var(--ease)}
.panel:hover,.answer:hover{border-color:var(--line);box-shadow:var(--sh-3)}
.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem;margin:1.4rem 0 0}
.answer-head{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:baseline;
  margin:0 0 .8rem}
.note{border-left:3px solid var(--hot);background:var(--hot-wash);padding:1rem 1.1rem;
  margin:1.4rem 0 0;max-width:var(--measure);border-radius:0 8px 8px 0}
.note p:last-child{margin-bottom:0}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1.2rem;margin:1.2rem 0 0}
.stat .n,.num,.n{font-family:var(--display);font-weight:900;font-stretch:106%;
  font-size:2.1rem;line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums;
  color:var(--ink)}
.stat .k,.k{font:600 10px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);display:block;margin:0 0 .2rem}
.hit,.flag{color:var(--hot)}
.clean,.none{color:var(--muted)}
.size{font-family:var(--display);font-weight:800;font-variant-numeric:tabular-nums;color:var(--hot)}

.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.4rem 0 0}
table,.tbl{width:100%;border-collapse:collapse;font-size:.95rem}
th{text-align:left;font:600 10px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--line);padding:0 .7rem .5rem 0;font-weight:600}
td{border-bottom:1px solid var(--line-soft);padding:.55rem .7rem .55rem 0;vertical-align:baseline;
  color:var(--ink-2)}
tbody tr{transition:background-color var(--t-fast) var(--ease)}
tbody tr:hover{background:rgba(255,255,255,.022)}
td.num{font-variant-numeric:tabular-nums;font-family:var(--display);font-weight:700;
  font-size:1rem;white-space:nowrap;color:var(--ink)}

.err,.fail{border-left:3px solid var(--hot);background:var(--hot-wash);padding:.9rem 1.1rem;
  margin:1.2rem 0 0;font-size:.97rem;border-radius:0 8px 8px 0}
.updated,.when{font:600 10px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted)}
.bar{height:8px;background:var(--hot);display:block;border-radius:4px}
.inl{display:inline-block}
.sub{font-size:1.05rem;color:var(--ink-2);margin:.6rem 0 1.8rem;max-width:40rem}
.controls{display:flex;flex-wrap:wrap;gap:.7rem;align-items:flex-end;margin:1.4rem 0}
.controls .fld{margin:0}
.alt{background:var(--s2)}
.foot{margin:1.2rem 0 0;font-size:.88rem;color:var(--muted);line-height:1.5}
hr{height:1px;background:var(--line-soft);border:0;margin:2.4rem 0}

/* ═══ REVEAL ═════════════════════════════════════════════════════════════════════════════════════
   Sections lift in as they arrive. Transform and opacity only, so it never touches layout. */
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(14px);
    transition:opacity var(--t-slow) var(--ease-soft),transform var(--t-slow) var(--ease-soft)}
  .reveal.in{opacity:1;transform:none}
}

/* Both reference sites ship zero reduced-motion rules. Ours is not negotiable. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}