/* =========================================================
   Meridian Wake
   Design language: nautical chart. Pale sea mist ground,
   hairline graticule, chart magenta as the single accent,
   every section stamped with the legal instrument it derives from.
   Motion: short, mechanical, instrument-like. 180ms, hard settle.
   ========================================================= */

:root{
  --paper:      #E8EDE9;
  --paper-2:    #F1F4EF;
  --paper-3:    #DDE4DE;
  --ink:        #0B2027;
  --ink-2:      #16323C;
  --ink-70:     rgba(11,32,39,.70);
  --ink-52:     rgba(11,32,39,.52);
  --ink-38:     rgba(11,32,39,.38);
  --rule:       rgba(11,32,39,.17);
  --rule-soft:  rgba(11,32,39,.09);
  --magenta:    #CE0060;
  --magenta-d:  #A3004B;
  --kelp:       #1F6B4E;
  --land:       #E0D6BC;
  --shoal:      #A9C9DA;
  --amber:      #A9720A;

  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --mono: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --e: cubic-bezier(.33,.9,.25,1);
  --t: 180ms;
  --t-slow: 260ms;

  --gut: 20px;
  --maxw: 1360px;
  --rad: 2px;
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:76px;
}

body{
  margin:0;
  background-color:var(--paper);
  background-image:
    repeating-linear-gradient(to right, var(--rule-soft) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(to bottom, var(--rule-soft) 0 1px, transparent 1px 46px);
  color:var(--ink);
  font-family:var(--serif);
  font-size:16px;
  line-height:1.62;
  font-optical-sizing:auto;
  overflow-x:hidden;
}

img,svg{ max-width:100%; }
a{ color:inherit; }

.vh{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:8px; top:-64px; z-index:200;
  background:var(--ink); color:var(--paper); padding:10px 16px;
  font-family:var(--mono); font-size:12px; text-decoration:none;
}
.skip:focus{ top:8px; }

:focus-visible{
  outline:2px solid var(--magenta);
  outline-offset:3px;
}

.wrap{
  width:100%; max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gut);
}

.dot{ opacity:.4; padding-inline:.35em; }

/* ---------------- masthead ---------------- */

.masthead{
  position:sticky; top:0; z-index:100;
  background:rgba(232,237,233,.92);
  backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--rule);
}
.masthead-in{
  display:flex; align-items:center; gap:16px;
  min-height:60px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; margin-right:auto;
}
.brand-mark{ width:24px; height:24px; color:var(--ink); flex:none; }
.brand-word{
  font-family:var(--sans);
  font-variation-settings:"wdth" 108,"wght" 640;
  font-size:15px; letter-spacing:.005em;
}
.nav{ display:none; }
.masthead .masthead-cta{ display:none; }

.nav-toggle{
  appearance:none; background:none; border:1px solid var(--rule);
  width:44px; height:44px; display:grid; place-items:center;
  cursor:pointer; padding:0; border-radius:var(--rad);
}
.nav-toggle-bars{ display:block; width:17px; }
.nav-toggle-bars i{
  display:block; height:1.5px; background:var(--ink);
  transition:transform var(--t) var(--e);
}
.nav-toggle-bars i+i{ margin-top:5px; }
.nav-toggle[aria-expanded="true"] i:first-child{ transform:translateY(3.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] i:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

.drawer{
  border-top:1px solid var(--rule);
  padding:8px var(--gut) 18px;
  display:grid; gap:2px;
}
.drawer[hidden]{ display:none; }
.drawer a{
  font-family:var(--sans);
  font-variation-settings:"wdth" 100,"wght" 520;
  font-size:16px; text-decoration:none;
  padding:11px 0; border-bottom:1px solid var(--rule-soft);
}

/* ---------------- buttons ---------------- */

.btn{
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:0 20px;
  font-family:var(--sans);
  font-variation-settings:"wdth" 100,"wght" 600;
  font-size:14px; letter-spacing:.012em;
  text-decoration:none; border-radius:var(--rad);
  border:1px solid var(--ink);
  cursor:pointer;
  transition:transform var(--t) var(--e);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  opacity:0; transition:opacity var(--t) var(--e);
}
.btn:active{ transform:translateY(1px); }

.btn-solid{ background:var(--ink); color:var(--paper); }
.btn-solid::before{ background:var(--magenta); }
.btn-solid:hover::before{ opacity:1; }
.btn-solid:hover{ border-color:var(--magenta); }

.btn-line{ background:transparent; color:var(--ink); }
.btn-line::before{ background:rgba(11,32,39,.07); }
.btn-line:hover::before{ opacity:1; }

.btn-magenta{
  background:var(--magenta); color:#fff; border-color:var(--magenta);
  font-family:var(--mono); font-size:14px; letter-spacing:0;
}
.btn-magenta::before{ background:#fff; }
.btn-magenta:hover::before{ opacity:.12; }

/* ---------------- shared type ---------------- */

.eyebrow{
  font-family:var(--mono);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-52); margin:0 0 20px;
}
.eyebrow-light{ color:rgba(232,237,233,.6); }

h1{
  font-family:var(--sans);
  font-variation-settings:"wdth" 116,"wght" 700;
  font-size:clamp(2.55rem, 10.5vw, 4.1rem);
  line-height:.96; letter-spacing:-.026em;
  margin:0 0 22px; text-wrap:balance;
}
h1 em{ font-style:normal; color:var(--magenta); }

.h2{
  font-family:var(--sans);
  font-variation-settings:"wdth" 112,"wght" 660;
  font-size:clamp(1.65rem, 5.6vw, 2.5rem);
  line-height:1.06; letter-spacing:-.019em;
  margin:0 0 18px; text-wrap:balance;
}
.h2-narrow{ max-width:22ch; }
.h2-light{ color:var(--paper); }

.lede{
  font-size:17px; line-height:1.58; color:var(--ink-70);
  margin:0 0 28px; max-width:52ch;
}

.mini-h{
  font-family:var(--mono);
  font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-52); margin:0 0 16px;
  padding-bottom:8px; border-bottom:1px solid var(--rule);
}

/* stamp: every section carries the instrument it derives from */
.stamp{
  display:flex; flex-wrap:wrap; gap:0;
  border-top:1.5px solid var(--ink);
  border-bottom:1px solid var(--rule);
  margin-bottom:34px;
}
.stamp span{
  font-family:var(--mono);
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-52);
  padding:9px 14px 9px 0;
  position:relative;
}
.stamp span+span::before{
  content:""; position:absolute; left:-7px; top:50%;
  width:3px; height:3px; background:var(--magenta); transform:translateY(-50%);
}
.stamp span+span{ padding-left:14px; }
.stamp-light{ border-top-color:var(--paper); border-bottom-color:rgba(232,237,233,.2); }
.stamp-light span{ color:rgba(232,237,233,.62); }

.sec-head{ max-width:60ch; margin-bottom:40px; }
.sec-sub{ font-size:16px; color:var(--ink-70); margin:0; }
.sec-head-light .sec-sub{ color:rgba(232,237,233,.72); }

/* ---------------- hero ---------------- */

.hero{ padding:38px 0 56px; }
.hero-grid{ display:grid; gap:40px; }

.hero-stats{
  margin:32px 0 0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--rule); border:1px solid var(--rule);
}
.hero-stats > div{ background:var(--paper); padding:14px 14px 16px; }
.hero-stats dt{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-52); line-height:1.4;
  margin-bottom:7px;
}
.hero-stats dd{
  margin:0; font-family:var(--sans);
  font-variation-settings:"wdth" 100,"wght" 640;
  font-size:20px; letter-spacing:-.01em; font-variant-numeric:tabular-nums;
}

.hero-actions{ display:flex; flex-wrap:wrap; gap:10px; }

/* ---------------- instrument ---------------- */

.instrument{
  border:1.5px solid var(--ink);
  background:var(--paper-2);
  border-radius:var(--rad);
}
.inst-head{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:11px 14px; border-bottom:1px solid var(--rule);
  background:var(--ink);
}
.inst-name{
  font-family:var(--sans);
  font-variation-settings:"wdth" 108,"wght" 620;
  font-size:13px; color:var(--paper); letter-spacing:.01em;
}
.inst-meta{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(232,237,233,.62);
}

.chart{ margin:0; border-bottom:1px solid var(--rule); }
.chart svg{ display:block; width:100%; height:auto; }
.chart .landmass{ fill:var(--land); stroke:rgba(11,32,39,.5); stroke-width:.8; stroke-linejoin:round; }
.chart .bathy use{ fill:none; stroke-linejoin:round; }
.chart .b-line-2{ stroke:rgba(94,150,176,.32); stroke-width:40; }
.chart .b-fill-2{ stroke:rgba(169,201,218,.18); stroke-width:38.6; }
.chart .b-line-1{ stroke:rgba(94,150,176,.44); stroke-width:17; }
.chart .b-fill-1{ stroke:rgba(169,201,218,.42); stroke-width:15.6; }
.chart .soundings text{
  font-family:var(--serif); font-style:italic; font-size:8.5px;
  fill:rgba(11,32,39,.3); text-anchor:middle;
}
.chart .graticule-labels text{
  font-family:var(--mono); font-size:8px; letter-spacing:.08em;
  fill:rgba(11,32,39,.34);
}
.chart .scope-zone path{ fill:rgba(206,0,96,.05); stroke:var(--magenta); stroke-width:1; stroke-dasharray:5 4; }
.chart .scope-zone text{
  font-family:var(--mono); font-size:10px; letter-spacing:.13em;
  fill:var(--magenta); text-transform:uppercase;
}
.chart .scope-zone .sub{ font-size:8px; letter-spacing:.06em; fill:var(--ink-38); text-transform:none; }

.route-out{ stroke:var(--ink-38); stroke-width:1.4; stroke-dasharray:6 5; }
.route-in{ stroke:var(--magenta); stroke-width:2.4; stroke-linecap:round; }
#routeIn,#routeFull{ transition:opacity var(--t-slow) var(--e); }

.ports circle{ fill:none; stroke:var(--ink); stroke-width:1.2; }
.ports .halo{ fill:none; stroke:var(--magenta); stroke-width:1.2; opacity:0; transition:opacity var(--t) var(--e); }
.ports text{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.06em;
  fill:var(--ink-52);
}
.ports .is-active circle:first-of-type{ fill:var(--magenta); stroke:var(--magenta); }
.ports .is-active .halo{ opacity:1; }
.ports .is-active text{ fill:var(--ink); }

.boundary{ transition:transform var(--t-slow) var(--e), opacity var(--t) var(--e); }
.boundary path{ stroke:var(--magenta); stroke-width:1.4; }
.boundary circle{ fill:var(--paper-2); stroke:var(--magenta); stroke-width:1.6; }
.boundary text{
  font-family:var(--mono); font-size:9px; letter-spacing:.1em;
  fill:var(--magenta); text-transform:uppercase;
}

/* Below 720px the chart is drawn at roughly a third scale, so the fine
   chart furniture becomes illegible. Drop it and size up what carries
   the meaning: the ports, the scope perimeter and the track. */
@media (max-width:719px){
  .chart .soundings,
  .chart .graticule-labels,
  .chart .margin-note,
  .chart .scope-zone .sub{ display:none; }
  .chart .b-line-2,.chart .b-fill-2{ stroke-width:0; }
  .ports text{ font-size:22px; letter-spacing:0; }
  .ports circle{ stroke-width:2.6; }
  .ports .port circle:first-of-type{ r:8; }
  .ports .halo{ r:17; stroke-width:2.6; }
  .chart .scope-zone text{ font-size:20px; }
  .chart .scope-zone path{ stroke-width:2.4; stroke-dasharray:10 8; }
  .route-in{ stroke-width:5; }
  .route-out{ stroke-width:3; stroke-dasharray:11 9; }
  .boundary text{ font-size:19px; }
  .boundary circle{ r:10; stroke-width:3; }
  .boundary path{ stroke-width:3; }
}

.margin-note path{ stroke:var(--ink-38); stroke-width:1; fill:none; }
.margin-note text{ font-family:var(--mono); font-size:8.5px; fill:var(--ink-38); letter-spacing:.05em; }
.margin-note .caveat{ font-size:9px; letter-spacing:.09em; }

/* controls */
.controls{
  display:grid; grid-template-columns:1fr; gap:1px;
  background:var(--rule); border-bottom:1px solid var(--rule);
}
.ctl{ background:var(--paper-2); padding:11px 14px 13px; }
.ctl label{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-52); margin-bottom:8px;
}
.ctl output{
  font-family:var(--mono); font-size:11px; letter-spacing:.02em;
  color:var(--magenta); text-transform:none; font-variant-numeric:tabular-nums;
}
.ctl select{
  appearance:none; width:100%; min-height:40px;
  background:var(--paper); color:var(--ink);
  border:1px solid var(--rule); border-radius:var(--rad);
  font-family:var(--sans); font-variation-settings:"wdth" 100,"wght" 520;
  font-size:14px; padding:0 34px 0 10px; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 17px) 52%, calc(100% - 12px) 52%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.ctl select:hover{ border-color:var(--ink-38); }

.ctl input[type=range]{
  appearance:none; -webkit-appearance:none;
  width:100%; height:44px; background:none; cursor:pointer; margin:0;
  touch-action:manipulation;
}
.ctl input[type=range]::-webkit-slider-runnable-track{
  height:2px; background:var(--rule);
}
.ctl input[type=range]::-moz-range-track{ height:2px; background:var(--rule); }
.ctl input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:20px; height:20px; margin-top:-9px;
  border-radius:50%; background:var(--paper); border:2px solid var(--magenta);
  transition:transform var(--t) var(--e);
}
.ctl input[type=range]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background:var(--paper); border:2px solid var(--magenta);
}
.ctl input[type=range]:hover::-webkit-slider-thumb{ transform:scale(1.14); }
.ctl input[type=range]:active::-webkit-slider-thumb{ transform:scale(.94); }

/* readouts */
.readouts{
  display:grid; grid-template-columns:1fr; gap:1px;
  background:var(--rule); border-bottom:1px solid var(--rule);
}
.ro{ background:var(--paper-2); padding:16px 14px 18px; }
.ro header{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:10px; }
.ro h3{
  margin:0; font-family:var(--sans);
  font-variation-settings:"wdth" 108,"wght" 640;
  font-size:14px; letter-spacing:.005em;
}
.ro-tag{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-52);
  border:1px solid var(--rule); padding:2px 6px; white-space:nowrap;
}
.ro-value{
  margin:0 0 12px; font-family:var(--sans);
  font-variation-settings:"wdth" 104,"wght" 700;
  font-size:clamp(1.75rem,7vw,2.1rem); line-height:1;
  letter-spacing:-.024em; font-variant-numeric:tabular-nums;
  display:flex; align-items:baseline; gap:12px;
}
.ro-lines{ list-style:none; margin:0 0 14px; padding:0; }
.ro-lines li{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:5px 0; border-bottom:1px solid var(--rule-soft);
  font-family:var(--mono); font-size:11px; color:var(--ink-52);
}
.ro-lines b{ color:var(--ink); font-weight:500; font-variant-numeric:tabular-nums; text-align:right; }

.bar{ height:3px; background:var(--rule); overflow:hidden; }
.bar i{
  display:block; height:100%; width:100%; background:var(--magenta);
  transform:scaleX(0); transform-origin:left;
  transition:transform 420ms var(--e);
}
.ro-fueleu .bar i{ background:var(--kelp); }
.ro-fueleu.is-deficit .bar i{ background:var(--magenta); }
.bar-cii i{ background:var(--kelp); }

.rating{
  display:inline-grid; place-items:center;
  width:44px; height:44px; border:2px solid var(--kelp); color:var(--kelp);
  font-size:26px; line-height:1; border-radius:var(--rad);
}
.rating-sub{
  font-family:var(--mono); font-size:11px; letter-spacing:.05em;
  color:var(--ink-52); font-variation-settings:normal; font-weight:400;
}
.ro-cii[data-rating="D"] .rating,.ro-cii[data-rating="E"] .rating{ border-color:var(--magenta); color:var(--magenta); }
.ro-cii[data-rating="C"] .rating{ border-color:var(--amber); color:var(--amber); }
.ro-cii[data-rating="D"] .bar i,.ro-cii[data-rating="E"] .bar i{ background:var(--magenta); }
.ro-cii[data-rating="C"] .bar i{ background:var(--amber); }

.econ{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--rule); border-bottom:1px solid var(--rule);
}
.econ > div{
  background:var(--paper-2); padding:11px 14px 13px;
  display:flex; flex-direction:column; gap:5px;
}
.econ span{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-52);
}
.econ b{
  font-family:var(--sans); font-variation-settings:"wdth" 100,"wght" 620;
  font-size:16px; font-variant-numeric:tabular-nums; letter-spacing:-.008em;
}
.econ-hi{ grid-column:1/-1; }
.econ-hi b{ color:var(--magenta); }

.inst-foot{
  margin:0; padding:12px 14px 14px;
  font-family:var(--mono); font-size:10px; line-height:1.65;
  color:var(--ink-38);
}

/* ---------------- bands ---------------- */

.band{ padding:56px 0; border-top:1px solid var(--rule); }
.band-tint{ background:rgba(11,32,39,.035); }
.band-ink{ background:var(--ink); color:var(--paper); border-top-color:var(--ink); }
.band-ink .h2{ color:var(--paper); }

.two-col{ display:grid; gap:24px; margin-bottom:40px; }
.prose p{ margin:0 0 16px; color:var(--ink-70); font-size:16.5px; }
.band-ink .prose p{ color:rgba(232,237,233,.74); }
.prose p:last-child{ margin-bottom:0; }

.claims{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1px; background:rgba(232,237,233,.18);
  border:1px solid rgba(232,237,233,.18);
}
.claims li{ background:var(--ink); padding:20px 18px 22px; display:grid; gap:8px; }
.claims b{
  font-family:var(--sans); font-variation-settings:"wdth" 108,"wght" 640;
  font-size:15px; color:var(--paper);
}
.claims span{ font-size:15px; color:rgba(232,237,233,.66); line-height:1.55; }

/* full bleed scope diagram: breaks the module grid rhythm on purpose */
.scopeband{
  background:var(--magenta); color:#fff;
  padding:52px 0 40px; border-top:1px solid var(--magenta);
}
.scope-h{
  margin:0 0 14px; font-family:var(--sans);
  font-variation-settings:"wdth" 112,"wght" 660;
  font-size:clamp(1.6rem,5.4vw,2.4rem); line-height:1.05;
  letter-spacing:-.02em; max-width:22ch; color:#fff;
}
.scope-sub{
  margin:0 0 34px; font-size:16px; line-height:1.55;
  color:rgba(255,255,255,.82); max-width:58ch;
}
.scope-fig{ margin:0; }
.scope-fig svg{ display:block; width:100%; height:auto; }
.sc-axis path{ fill:none; stroke:rgba(255,255,255,.5); stroke-width:1; }
.sc-axis text{ font-family:var(--mono); font-size:12px; fill:#fff; letter-spacing:.06em; }
.sc-axis .sc-small{ font-size:10.5px; fill:rgba(255,255,255,.6); letter-spacing:.04em; }
.sc-out{ fill:rgba(255,255,255,.14); }
.sc-in{ fill:#fff; }
.sc-cii{ fill:var(--ink); }
.sc-in-lab{
  font-family:var(--sans); font-variation-settings:"wdth" 104,"wght" 640;
  font-size:15px; fill:var(--magenta);
}
.sc-out-lab{ font-family:var(--mono); font-size:11px; fill:rgba(255,255,255,.72); letter-spacing:.08em; }
.sc-cii-lab{
  font-family:var(--sans); font-variation-settings:"wdth" 104,"wght" 640;
  font-size:15px; fill:var(--paper);
}
.sc-cii-note{ font-family:var(--mono); font-size:11px; font-variation-settings:normal; fill:rgba(232,237,233,.7); letter-spacing:.08em; }
.sc-num{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; }
.sc-num-d{ fill:var(--magenta); }
.sc-foot{ font-family:var(--mono); font-size:11.5px; fill:rgba(255,255,255,.78); letter-spacing:.03em; }

/* table */
.table-scroll{ overflow-x:auto; border:1px solid var(--rule); margin-bottom:36px; -webkit-overflow-scrolling:touch; }
.tbl{ width:100%; min-width:660px; border-collapse:collapse; background:var(--paper-2); }
.tbl th,.tbl td{
  text-align:left; padding:11px 14px; border-bottom:1px solid var(--rule-soft);
  font-family:var(--mono); font-size:12px; font-variant-numeric:tabular-nums;
}
.tbl thead th{
  font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-52); background:var(--paper-3); border-bottom:1px solid var(--rule);
  white-space:nowrap;
}
.tbl tbody th{ color:var(--ink); font-weight:500; white-space:nowrap; }
.tbl td{ color:var(--ink-70); }
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{ border-bottom:0; }

.ref-grid{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); }
.ref-card{ background:var(--paper-2); padding:22px 18px 24px; }
.ref-card h3{
  margin:0 0 8px; font-family:var(--sans);
  font-variation-settings:"wdth" 108,"wght" 640; font-size:16px;
}
.ref-lead{ margin:0 0 16px; font-size:14.5px; color:var(--ink-52); line-height:1.5; }
.kv{ list-style:none; margin:0 0 16px; padding:0; }
.kv li{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:6px 0; border-bottom:1px solid var(--rule-soft);
  font-family:var(--mono); font-size:11.5px; color:var(--ink-52);
}
.kv b{ color:var(--ink); font-weight:500; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ref-foot{ margin:0; font-size:13.5px; line-height:1.55; color:var(--ink-52); }
.ref-watch{ background:var(--paper-3); }
.ref-watch .kv b{ color:var(--magenta); }

/* streams */
.stream-grid{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); margin-bottom:36px; }
.stream{ background:var(--paper-2); padding:22px 18px 24px; }
.stream h3{
  margin:0 0 10px; font-family:var(--sans);
  font-variation-settings:"wdth" 108,"wght" 640; font-size:16px;
}
.stream p{ margin:0 0 16px; font-size:15px; color:var(--ink-70); line-height:1.55; }
.chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.chips li{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.04em;
  border:1px solid var(--rule); padding:4px 8px; color:var(--ink-52);
  background:var(--paper);
}

.recon{ border:1.5px solid var(--ink); padding:22px 18px 24px; background:var(--paper-2); }
.recon-h{ margin-top:0; }
.recon-list{ list-style:none; margin:0; padding:0; display:grid; gap:18px; }
.recon-list li{ display:grid; gap:5px; }
.recon-list b{
  font-family:var(--sans); font-variation-settings:"wdth" 104,"wght" 700;
  font-size:24px; color:var(--magenta); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.recon-list span{ font-size:14.5px; color:var(--ink-70); line-height:1.5; }

/* api */
.api-grid{ display:grid; gap:36px; margin-bottom:40px; }
.ep{ list-style:none; margin:0 0 32px; padding:0; }
.ep li{
  display:grid; grid-template-columns:auto 1fr; gap:4px 10px;
  align-items:baseline; padding:9px 0; border-bottom:1px solid var(--rule-soft);
}
.verb{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em;
  padding:2px 5px; border:1px solid var(--rule); color:var(--ink-52);
  grid-row:1;
}
.verb.post{ color:var(--magenta); border-color:rgba(206,0,96,.4); }
.ep code{ font-family:var(--mono); font-size:12.5px; color:var(--ink); word-break:break-all; }
.ep em{
  grid-column:2; font-style:normal; font-family:var(--serif);
  font-size:13.5px; color:var(--ink-52);
}
.hooks{ list-style:none; margin:0 0 32px; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.hooks code{
  font-family:var(--mono); font-size:11px; border:1px solid var(--rule);
  padding:5px 8px; background:var(--paper-2); color:var(--ink-70);
}
.api-facts{ margin:0; display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); }
.api-facts > div{ background:var(--paper-2); padding:12px 14px; }
.api-facts dt{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-52); margin-bottom:5px;
}
.api-facts dd{ margin:0; font-size:14px; color:var(--ink); }
.api-facts code{ font-family:var(--mono); font-size:12px; }

.code-stack{ display:grid; gap:18px; }
.codeblock{ border:1px solid var(--ink); background:var(--ink); border-radius:var(--rad); overflow:hidden; }
.code-head{
  display:flex; justify-content:space-between; gap:12px;
  padding:9px 13px; border-bottom:1px solid rgba(232,237,233,.16);
  font-family:var(--mono); font-size:10px; letter-spacing:.11em;
  text-transform:uppercase; color:rgba(232,237,233,.58);
}
.codeblock pre{
  margin:0; padding:14px 13px 16px; overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.codeblock code{
  font-family:var(--mono); font-size:11.5px; line-height:1.66;
  color:#CFDBD6; white-space:pre;
}

.perf{ border-top:1.5px solid var(--ink); padding-top:26px; }
.perf-list{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); }
.perf-list li{ background:var(--paper-2); padding:15px 14px 17px; display:grid; gap:5px; }
.perf-list b{
  font-family:var(--sans); font-variation-settings:"wdth" 102,"wght" 700;
  font-size:26px; letter-spacing:-.022em; font-variant-numeric:tabular-nums;
}
.perf-list span{ font-family:var(--mono); font-size:11px; color:var(--ink-52); }
.perf-list code{ font-size:10.5px; }

/* trust */
.trust-grid{ display:grid; gap:1px; background:rgba(232,237,233,.18); border:1px solid rgba(232,237,233,.18); }
.trust-card{ background:var(--ink); padding:22px 18px 24px; }
.trust-card h3{
  margin:0 0 14px; font-family:var(--sans);
  font-variation-settings:"wdth" 108,"wght" 640; font-size:16px; color:var(--paper);
}
.tlist{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.tlist li{
  position:relative; padding-left:18px;
  font-size:14.5px; line-height:1.52; color:rgba(232,237,233,.7);
}
.tlist li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:6px; height:2px; background:var(--magenta);
}

/* pricing */
.plans{ display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); margin-bottom:40px; }
.plan{ background:var(--paper-2); padding:24px 18px 28px; }
.plan h3{
  margin:0 0 12px; font-family:var(--sans);
  font-variation-settings:"wdth" 110,"wght" 660; font-size:18px;
}
.plan-price{
  margin:0 0 14px; font-family:var(--sans);
  font-variation-settings:"wdth" 104,"wght" 700;
  font-size:30px; letter-spacing:-.026em; line-height:1.05;
}
.plan-price span{
  display:block; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-52);
  font-variation-settings:normal; margin-top:7px;
}
.plan-for{ margin:0 0 18px; font-size:14.5px; color:var(--ink-52); line-height:1.5; }
.plan-list{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.plan-list li{
  position:relative; padding-left:18px; font-size:14.5px;
  color:var(--ink-70); line-height:1.5;
}
.plan-list li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:6px; height:2px; background:var(--ink-38);
}
.plan-feature{ background:var(--ink); }
.plan-feature h3,.plan-feature .plan-price{ color:var(--paper); }
.plan-feature .plan-price span,.plan-feature .plan-for{ color:rgba(232,237,233,.6); }
.plan-feature .plan-list li{ color:rgba(232,237,233,.76); }
.plan-feature .plan-list li::before{ background:var(--magenta); }

.worked{ border:1.5px solid var(--ink); background:var(--paper-2); padding:24px 18px 26px; }
.worked-grid{ display:grid; gap:26px; margin-bottom:22px; }
.worked-lab{
  margin:0 0 12px; font-family:var(--mono); font-size:10px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-52);
}
.worked-list{ list-style:none; margin:0; padding:0; }
.worked-list li{
  display:flex; justify-content:space-between; gap:14px; align-items:baseline;
  padding:8px 0; border-bottom:1px solid var(--rule-soft);
  font-family:var(--mono); font-size:12px; color:var(--ink-52);
}
.worked-list b{ color:var(--ink); font-weight:500; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.worked-total{ border-bottom:0; border-top:1.5px solid var(--ink); margin-top:4px; padding-top:11px; }
.worked-total b{ color:var(--magenta); font-size:15px; }
.worked-note{ margin:0; font-size:15px; line-height:1.56; color:var(--ink-70); max-width:60ch; }

/* changelog */
.log{ list-style:none; margin:0; padding:0; counter-reset:none; }
.log li{
  display:grid; gap:10px; padding:22px 0;
  border-top:1px solid var(--rule);
}
.log li:last-child{ border-bottom:1px solid var(--rule); }
.log-meta{ display:flex; align-items:baseline; gap:14px; }
.log-meta b{
  font-family:var(--mono); font-size:13px; color:var(--magenta); font-weight:500;
}
.log-meta time{ font-family:var(--mono); font-size:11px; color:var(--ink-38); letter-spacing:.06em; }
.log-body h3{
  margin:0 0 7px; font-family:var(--sans);
  font-variation-settings:"wdth" 106,"wght" 620; font-size:16px;
}
.log-body p{ margin:0; font-size:15px; color:var(--ink-70); line-height:1.56; max-width:70ch; }
.log-body code{ font-family:var(--mono); font-size:12.5px; color:var(--ink); }

/* people */
.people{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); }
.people li{ background:var(--paper-2); padding:20px 18px 22px; display:grid; gap:6px; }
.people b{
  font-family:var(--sans); font-variation-settings:"wdth" 108,"wght" 640;
  font-size:16px;
}
.people .role{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--magenta);
}
.people p{ margin:6px 0 0; font-size:14.5px; color:var(--ink-70); line-height:1.55; }

/* faq */
.faq{ border-top:1px solid var(--rule); }
.faq details{ border-bottom:1px solid var(--rule); }
.faq summary{
  list-style:none; cursor:pointer; padding:18px 34px 18px 0; position:relative;
  font-family:var(--sans); font-variation-settings:"wdth" 106,"wght" 600;
  font-size:16.5px; line-height:1.35;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:6px; top:calc(50% - 1px);
  width:13px; height:2px; background:var(--magenta);
}
.faq summary::before{
  content:""; position:absolute; right:11.5px; top:calc(50% - 6.5px);
  width:2px; height:13px; background:var(--magenta);
  transition:transform var(--t) var(--e);
}
.faq details[open] summary::before{ transform:scaleY(0); }
.faq details div{ padding:0 0 20px; }
.faq details p{ margin:0; font-size:15.5px; color:var(--ink-70); line-height:1.6; max-width:72ch; }

/* cta */
.cta{ background:var(--magenta); color:#fff; padding:56px 0; }
.cta-in{ display:grid; gap:32px; }
.cta .h2{ color:#fff; }
.cta .eyebrow{ color:rgba(255,255,255,.68); }
.cta-sub{ margin:0; font-size:16.5px; color:rgba(255,255,255,.86); max-width:52ch; line-height:1.55; }
.cta-actions{ display:grid; gap:12px; align-content:start; }
.cta .btn-magenta{ background:#fff; color:var(--magenta); border-color:#fff; }
.cta .btn-magenta::before{ background:var(--ink); }
.cta .btn-magenta:hover::before{ opacity:1; }
.cta .btn-magenta:hover{ color:#fff; }
.cta-fine{
  margin:0; font-family:var(--mono); font-size:11px;
  color:rgba(255,255,255,.72); letter-spacing:.04em;
}

/* footer */
.foot{ background:var(--ink); color:rgba(232,237,233,.72); padding:48px 0 28px; }
.foot-in{ display:grid; gap:34px; }
.foot-brand .brand-word{ color:var(--paper); font-size:18px; display:block; margin-bottom:12px; }
.foot-brand p{ margin:0; font-size:13.5px; line-height:1.6; max-width:44ch; }
.foot-nav{ display:grid; grid-template-columns:1fr 1fr; gap:26px 20px; }
.foot-nav h3{
  margin:0 0 12px; font-family:var(--mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(232,237,233,.45);
  font-weight:400;
}
.foot-nav a{
  display:block; text-decoration:none; font-size:14px;
  padding:4px 0; color:rgba(232,237,233,.72);
  transition:transform var(--t) var(--e);
}
.foot-nav a:hover{ color:#fff; transform:translateX(3px); }
.foot-base{
  border-top:1px solid rgba(232,237,233,.16); padding-top:20px;
  display:grid; gap:10px;
}
.foot-base p{ margin:0; font-family:var(--mono); font-size:11px; line-height:1.6; color:rgba(232,237,233,.5); }
.credit a{ color:var(--paper); text-decoration:none; border-bottom:1px solid var(--magenta); }
.credit a:hover{ color:#fff; }

/* ---------------- reveal ---------------- */

.rv{ opacity:0; transform:translate3d(0,14px,0); }
.rv-in{
  opacity:1; transform:translate3d(0,0,0);
  transition:opacity 460ms var(--e), transform 460ms var(--e);
}

/* ---------------- breakpoints ---------------- */

@media (min-width:600px){
  :root{ --gut:28px; }
  .hero-stats{ grid-template-columns:repeat(4,1fr); }
  .controls{ grid-template-columns:1fr 1fr; }
  .econ{ grid-template-columns:repeat(3,1fr); }
  .econ-hi{ grid-column:auto; }
  .recon-list{ grid-template-columns:1fr 1fr; gap:22px 28px; }
  .worked-grid{ grid-template-columns:1fr 1fr; gap:34px; }
  .log li{ grid-template-columns:150px 1fr; gap:24px; }
  .log-meta{ flex-direction:column; gap:4px; }
  .foot-nav{ grid-template-columns:repeat(3,1fr); }
  .foot-base{ grid-template-columns:1fr auto; align-items:baseline; }
  .credit{ text-align:right; }
}

@media (min-width:860px){
  :root{ --gut:40px; }
  html{ scroll-padding-top:84px; }
  .masthead-in{ min-height:68px; }
  .nav{ display:flex; gap:26px; margin-right:24px; }
  .nav a{
    font-family:var(--mono); font-size:11px; letter-spacing:.13em;
    text-transform:uppercase; text-decoration:none; color:var(--ink-52);
    padding:6px 0; position:relative;
  }
  .nav a::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
    background:var(--magenta); transform:scaleX(0); transform-origin:left;
    transition:transform var(--t) var(--e);
  }
  .nav a:hover{ color:var(--ink); }
  .nav a:hover::after{ transform:scaleX(1); }
  .masthead .masthead-cta{ display:inline-flex; min-height:38px; font-size:12.5px; }
  .nav-toggle{ display:none; }
  .masthead .drawer{ display:none; }

  .band{ padding:88px 0; }
  .hero{ padding:56px 0 80px; }
  .two-col{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:52px; align-items:start; }
  .claims{ grid-template-columns:repeat(3,1fr); }
  .ref-grid{ grid-template-columns:1fr 1fr; }
  .stream-grid{ grid-template-columns:1fr 1fr; }
  .trust-grid{ grid-template-columns:1fr 1fr; }
  .plans{ grid-template-columns:repeat(3,1fr); }
  .people{ grid-template-columns:1fr 1fr; }
  .perf-list{ grid-template-columns:repeat(3,1fr); }
  .api-grid{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:44px; }
  .cta-in{ grid-template-columns:1.3fr .7fr; gap:48px; align-items:end; }
  .cta{ padding:80px 0; }
  /* Row one: 4 + 3 + 3 + 2. Row two: three sliders at 4 each. Both fill. */
  .controls{ grid-template-columns:repeat(12,1fr); }
  .ctl{ grid-column:span 3; }
  .ctl:first-child{ grid-column:span 4; }
  .ctl:nth-child(4){ grid-column:span 2; }
  .ctl-range{ grid-column:span 4; }
  .econ{ grid-template-columns:repeat(6,1fr); }
  .readouts{ grid-template-columns:repeat(3,1fr); }
  .recon-list{ grid-template-columns:repeat(4,1fr); }
  .foot-in{ grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:56px; }
  .foot-base{ grid-column:1/-1; }
  .stamp span{ font-size:10.5px; }
}

@media (min-width:1120px){
  .hero-grid{ grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:48px; align-items:start; }
  .hero-title{ position:sticky; top:96px; }
  h1{ font-size:clamp(3.2rem,4.3vw,4.5rem); }
  .lede{ font-size:17.5px; }
  .people{ grid-template-columns:repeat(4,1fr); }
  .ref-grid{ grid-template-columns:repeat(4,1fr); }
  .stream-grid{ grid-template-columns:repeat(4,1fr); }
  .trust-grid{ grid-template-columns:repeat(4,1fr); }
  .perf-list{ grid-template-columns:repeat(6,1fr); }
}

/* ---------------- reduced motion ---------------- */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rv{ opacity:1; transform:none; }
}