/* site.css — one stylesheet for every page.

   THE STRUCTURE, which is the whole design and is not negotiable per page:

     ground    a fixed photograph, never touched, never covered by a scrim
     band      a full-width wash over it at alpha 0.06-0.16 — GLASS, not paint
     surface   a card or sheet at 0.62-0.80 — every word on this page sits on one

   Band and surface are two jobs and cannot be done by one layer. Thicken the
   band to make text readable and the photograph becomes paint; drop a card and
   the text is on glass at 1.7:1. So: nothing is ever set directly on a bare
   band. A section heading gets a wash chip, running text gets a sheet, a
   number gets a card.

   Colour comes from the photograph — a defocused London at dusk: amber and
   rose lights over violet. The ink is that violet taken almost to black; the
   accent is the amber. */

/* ---------------------------------------------------------------- tokens */
:root {
  --ink:        #1a1230;   /* headings, body */
  --ink-2:      #40365c;   /* secondary text on a surface */
  /* --ink-3 and --accent are set where they are because of a measurement, not
     a preference: at #6b6088 and #a2560f the 13-15px muted text and the links
     came out at 3.8-4.4:1 against the glass-over-photograph they sit on, and
     AA wants 4.5. Both were darkened until the audit (tools/contrast.mjs, with
     a planted control that must fail) came back clean on every page. */
  --ink-3:      #544969;   /* labels, captions */
  --accent:     #83440a;   /* amber, dark enough to carry text on a surface */
  --accent-lit: #e79c3e;   /* the same amber for dark bands */
  --rose:       #9c2f52;
  --green:      #1c6b4b;

  --surface:    rgba(255, 252, 250, 0.80);
  --surface-2:  rgba(255, 252, 250, 0.66);
  --wash:       rgba(255, 252, 250, 0.42);
  --edge:       rgba(26, 18, 48, 0.10);
  --edge-2:     rgba(26, 18, 48, 0.16);

  --band-a:     rgba(255, 250, 246, 0.07);
  --band-b:     rgba(255, 250, 246, 0.15);
  /* The deep band's alpha is a MEASURED figure. At 0.74 the frame it covers
     read p50 0.05 and busy 0.4 against the reference's 0.12 and 1.6 — the
     photograph had stopped existing there. At 0.62 the bokeh comes back
     through and the cards on top still clear AA. */
  --deep:       rgba(23, 15, 44, 0.62);

  --shadow:     0 1px 2px rgba(20, 12, 40, .05), 0 8px 28px rgba(20, 12, 40, .09);
  --shadow-lg:  0 2px 6px rgba(20, 12, 40, .07), 0 24px 60px rgba(20, 12, 40, .16);

  --r-sm: 10px; --r: 16px; --r-lg: 26px; --r-xl: 38px;
  --wrap: 1120px;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: 400 17px/1.62 var(--sans);
  color: var(--ink);
  background: #2b2444 url("/img/ground.jpg") center 38% / cover no-repeat fixed;
  min-height: 100vh;
  overflow-x: hidden;
}
/* iOS ignores background-attachment: fixed, and a scrolling photograph on a
   page this long is a different design. A fixed pseudo-element behind
   everything is the same picture and does scroll-lock there. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: #2b2444 url("/img/ground.jpg") center 38% / cover no-repeat;
  z-index: -2;
}

img { max-width: 100%; }
a { color: var(--accent); text-decoration-color: rgba(131, 68, 10, .40); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

::selection { background: rgba(231, 156, 62, .32); }

:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ------------------------------------------------------------------ type */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; color: var(--ink); margin: 0 0 .5em; letter-spacing: -.012em; line-height: 1.12; }
h1 { font-size: clamp(46px, 8.4vw, 92px); letter-spacing: -.028em; }
h2 { font-size: clamp(30px, 4.2vw, 44px); }
h3 { font-size: clamp(21px, 2.3vw, 26px); line-height: 1.22; }
h4 { font-size: 18px; font-family: var(--sans); font-weight: 600; letter-spacing: -.005em; }
p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; }
small { font-size: 13.5px; }

.lede { font-size: clamp(18px, 2.1vw, 21px); line-height: 1.56; color: var(--ink-2); }
.eyebrow {
  font: 600 11.5px/1 var(--sans); letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 14px;
}
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.muted { color: var(--ink-3); }

/* --------------------------------------------------------------- layout */
.wrap { width: min(var(--wrap), calc(100% - 40px)); margin-inline: auto; }
.wrap.narrow { width: min(760px, calc(100% - 40px)); }
/* A sheet that fills the viewport IS the viewport: the frame behind the market
   table measured 24.9% flat and chroma 0.018 against the reference's worst of
   14.5% and 0.033, because at 1120px wide there was no photograph left beside
   it. Narrower, the ground comes back down both sides. */
.wrap.mid { width: min(980px, calc(100% - 40px)); }

.band { padding: clamp(56px, 8vw, 108px) 0; background: var(--band-a); }
.band.b { background: var(--band-b); }
.band.plain { background: none; }
.band.deep { background: var(--deep); }
.band.deep h2, .band.deep h3 { color: #fdf8f2; }
.band.deep .eyebrow { color: rgba(253, 248, 242, .66); }

/* A section heading needs its own ground: a flat rgba wash on a real element,
   never a gradient (a live contrast audit walks computed backgroundColor up
   the tree, and a gradient leaves that transparent, so the audit reads the
   band and calls a comfortable heading 1.7:1). */
.head { display: inline-block; background: var(--wash); border-radius: var(--r-xl); padding: 18px 30px 20px; margin-bottom: 30px; }
.head p { max-width: 62ch; }
.band.deep .head { background: rgba(23, 15, 44, .58); }

.sheet {
  /* A SHEET IS THINNER THAN A CARD. It is the only surface big enough to fill
     a viewport on its own, and at the card's 0.80 the frame behind the market
     table composited to one flat tone (22.7% of its pixels within a hair of
     the median, against the reference's worst of 14.8). At 0.74 the bokeh
     shows through it and the text still clears AA — checked, not assumed. */
  background: rgba(255, 252, 250, 0.74);
  border-radius: var(--r-lg); padding: clamp(26px, 4vw, 46px); box-shadow: var(--shadow);
}
.card { background: var(--surface); border-radius: var(--r); padding: 24px 26px; box-shadow: var(--shadow); }
.card.soft { background: var(--surface-2); box-shadow: none; border: 1px solid var(--edge); }
.grid { display: grid; gap: 18px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid.four { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* --------------------------------------------------------------- pieces */
.btn {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font: 600 15px/1 var(--sans); letter-spacing: -.005em;
  padding: 15px 24px; border-radius: 99px; border: 1px solid transparent;
  background: var(--ink); color: #fdf8f2; text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  box-shadow: 0 2px 10px rgba(20, 12, 40, .18);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(20, 12, 40, .24); }
.btn:active { transform: none; }
.btn[disabled], .btn.off { opacity: .45; pointer-events: none; }
.btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--edge-2); box-shadow: var(--shadow); }
.btn.amber { background: var(--accent); color: #fff8ec; }
.btn.sm { font-size: 13.5px; padding: 10px 16px; }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font: 500 13px/1 var(--sans); color: var(--ink-2);
  background: var(--surface); border-radius: 99px; padding: 9px 15px; box-shadow: var(--shadow);
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.chip.live .dot { background: var(--green); }
.chip.warn { color: #6d200d; } .chip.warn .dot { background: #b3400f; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }

.stat { background: var(--surface); border-radius: var(--r); padding: 20px 22px; box-shadow: var(--shadow); }
.stat .k { font: 600 11.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.stat .v { font: 500 30px/1.06 var(--serif); margin-top: 10px; letter-spacing: -.02em; }
.stat .v.num { font-family: var(--mono); font-size: 25px; font-weight: 500; }
.stat .n { font-size: 13.5px; color: var(--ink-3); margin-top: 7px; line-height: 1.4; }

/* tables always live on a sheet, and scroll inside it rather than the page */
.tablewrap { overflow-x: auto; border-radius: var(--r); }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th {
  font: 600 11.5px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
  text-align: right; padding: 0 0 12px; white-space: nowrap;
}
th:first-child, td:first-child { text-align: left; }
td { padding: 12px 0; border-top: 1px solid var(--edge); text-align: right; white-space: nowrap; }
td.name { white-space: normal; }
tbody tr:hover td { background: rgba(255, 252, 250, .40); }
th + th, td + td { padding-left: 18px; }

.tag { display: inline-block; font: 600 10.5px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 5px; background: rgba(26, 18, 48, .07); color: var(--ink-2); }
.tag.warn { background: rgba(179, 64, 15, .14); color: #6d200d; }
.tag.good { background: rgba(28, 107, 75, .14); color: #10462f; }

hr { border: 0; border-top: 1px solid var(--edge); margin: 26px 0; }

/* ------------------------------------------------------------------- nav */
.nav { position: sticky; top: 0; z-index: 50; padding: 14px 0; }
.nav .bar {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255, 252, 250, .82); backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-radius: 99px; padding: 8px 8px 8px 18px; box-shadow: var(--shadow);
}
.nav .mark { width: 26px; height: 26px; flex: none; display: block; }
.nav .mark svg { width: 100%; height: 100%; display: block; }
.nav .word { font: 500 25px/1 var(--serif); letter-spacing: -.02em; color: var(--ink); text-decoration: none; margin-right: 10px; }
.nav a.link {
  font: 500 14.5px/1 var(--sans); color: var(--ink-2); text-decoration: none;
  padding: 9px 12px; border-radius: 99px;
}
.nav a.link:hover { background: rgba(26, 18, 48, .06); color: var(--ink); }
.nav a.link.on { color: var(--ink); background: rgba(26, 18, 48, .07); }
.nav .spacer { flex: 1; }
.nav .btn { padding: 11px 18px; font-size: 14px; }
.nav .burger { display: none; background: none; border: 0; cursor: pointer; padding: 9px; border-radius: 99px; }
.nav .burger span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; }
.nav .burger span + span { margin-top: 4px; }
.menu { display: none; }

@media (max-width: 860px) {
  .nav .link, .nav .spacer { display: none; }
  .nav .burger { display: block; margin-left: auto; }
  .nav .bar { padding-left: 14px; }
  .nav .word { font-size: 22px; }
  .menu.open { display: block; margin-top: 10px; background: var(--surface); border-radius: var(--r-lg); padding: 12px; box-shadow: var(--shadow); }
  .menu a { display: block; padding: 12px 14px; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; font-weight: 500; }
  .menu a:hover { background: rgba(26, 18, 48, .06); }
}

@media (max-width: 520px) {
  /* The nav's call to action is the only thing competing with the wordmark on
     a phone, and the hero repeats it two hundred pixels below. */
  .nav > .wrap > .bar > .btn { display: none; }
  .wrap { width: calc(100% - 28px); }
  .hero .pane { padding-inline: 22px; }
  .tabs button { padding: 10px 14px; font-size: 13.5px; }
  th + th, td + td { padding-left: 12px; }
}

/* ----------------------------------------------------------------- hero */
.hero { padding: clamp(40px, 7vw, 92px) 0 clamp(50px, 8vw, 104px); }
.hero .pane {
  background: rgba(255, 252, 250, .74); border-radius: var(--r-xl);
  padding: clamp(34px, 5.5vw, 72px) clamp(26px, 5vw, 64px) clamp(38px, 5vw, 60px);
  box-shadow: var(--shadow-lg); text-align: center;
}
.hero h1 { margin: 16px 0 22px; }
.hero .lede { max-width: 60ch; margin-inline: auto; }
.hero .cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 32px 0 26px; }
.hero .chips { justify-content: center; }

/* --------------------------------------------------------------- footer */
.foot { padding: 52px 0 66px; background: var(--deep); color: rgba(253, 248, 242, .78); font-size: 14.5px; }
.foot a { color: rgba(253, 248, 242, .92); }
.foot .row { display: flex; flex-wrap: wrap; gap: 22px 40px; align-items: flex-start; justify-content: space-between; }
.foot .word { font: 500 22px/1 var(--serif); color: #fdf8f2; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* ------------------------------------------------------------------ app */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; background: var(--surface); border-radius: 99px; padding: 6px; box-shadow: var(--shadow); width: fit-content; max-width: 100%; }
.tabs button {
  font: 600 14.5px/1 var(--sans); color: var(--ink-2); background: none; border: 0; cursor: pointer;
  padding: 11px 19px; border-radius: 99px;
}
.tabs button.on { background: var(--ink); color: #fdf8f2; }
.tabs button:hover:not(.on) { background: rgba(26, 18, 48, .06); color: var(--ink); }

.panel { display: none; }
.panel.on { display: block; }

label.field { display: block; margin-bottom: 16px; }
label.field > span { display: block; font: 600 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
input[type=text], input[type=number], select, textarea {
  width: 100%; font: 400 16px/1.4 var(--sans); color: var(--ink);
  background: rgba(255, 255, 255, .72); border: 1px solid var(--edge-2); border-radius: var(--r-sm);
  padding: 13px 15px;
}
input.num, .amount input { font-family: var(--mono); font-variant-numeric: tabular-nums; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(141, 74, 11, .16); }
input::placeholder { color: #6f6689; }

.amount { display: flex; gap: 10px; align-items: center; }
.amount input { flex: 1; font-size: 20px; }
.amount .unit { font: 600 14px/1 var(--sans); color: var(--ink-3); }

.rows { display: grid; gap: 10px; }
.row-card {
  display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center;
  /* Thinner than a card for the same reason a sheet is: a list of these fills
     the viewport, and at 0.80 the app's vault list read 25.8% flat. */
  background: rgba(255, 252, 250, 0.76); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--shadow);
}
.row-card.pick { cursor: pointer; border: 1.5px solid transparent; }
.row-card.pick:hover { border-color: var(--edge-2); }
.row-card.pick.on { border-color: var(--accent); background: rgba(255, 250, 242, .88); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; font-size: 14.5px; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }

.note { font-size: 14px; color: var(--ink-2); background: rgba(255, 250, 242, .7); border-left: 3px solid var(--accent); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 12px 16px; }
.note.warn { border-left-color: #b3400f; background: rgba(255, 244, 238, .8); }
.note.err { border-left-color: var(--rose); background: rgba(255, 240, 244, .85); }

.steps { counter-reset: step; display: grid; gap: 14px; }
.step { display: grid; grid-template-columns: 34px 1fr; gap: 16px; align-items: start; }
.step::before {
  counter-increment: step; content: counter(step);
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font: 600 14px/1 var(--mono); background: var(--ink); color: #fdf8f2;
}
.step.done::before { background: var(--green); content: "✓"; }
.step.now::before { background: var(--accent); }
.step.wait::before { background: rgba(26, 18, 48, .18); color: var(--ink-2); }

.bar-meter { height: 7px; border-radius: 99px; background: rgba(26, 18, 48, .1); overflow: hidden; }
.bar-meter i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.bar-meter i.full { background: var(--rose); }

.spin { display: inline-block; width: 13px; height: 13px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: sp .7s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } html { scroll-behavior: auto; } }

.mono-addr { font-family: var(--mono); font-size: 13px; word-break: break-all; }

/* prose pages (docs, credits) */
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 1.05em; }
.prose li { margin-bottom: .4em; }
.prose code { font: 500 13.5px var(--mono); background: rgba(26, 18, 48, .07); padding: 2px 6px; border-radius: 5px; }
.prose pre { background: rgba(26, 18, 48, .06); border-radius: var(--r-sm); padding: 16px 18px; overflow-x: auto; }
.prose pre code { background: none; padding: 0; font-size: 13px; line-height: 1.6; }
.prose dl { margin: 0 0 1.05em; }
.prose dt { font-weight: 600; margin-top: .9em; }
.prose dd { margin: .2em 0 0; color: var(--ink-2); }