/* site.css — Quern.

   The page is a photograph with things set on top of it. Two rules keep it both
   legible and not flat, and both were learned the hard way on the builds before
   this one:

   1. A full-width BAND is thin glass — alpha 0.06 to 0.34. Anything heavier
      turns the photograph into paint. Bands never carry backdrop-filter either:
      blurring a whole band destroys the frame's detail even at the right alpha.
   2. Nothing is ever set directly on a bare band. Every paragraph, table, stat
      and heading sits on its own SURFACE (a card or a sheet, 0.62-0.86), which
      is where the blur and the shadow live.

   The ground is a fixed photograph, so the same region sits behind every
   section; the frame was chosen because its texture reaches all four edges. */

:root {
  --ink: #16220f;
  --ink-2: #33422b;
  --ink-3: #45543b;
  --gold: #a9761a;
  --gold-ink: #7c5410;        /* gold dark enough to be read as text on a surface */
  --gold-lift: #d9a441;       /* gold on a dark ground */
  --cream: #f7f4ea;
  --deep: #16210f;
  --line: rgba(22, 34, 15, .14);
  --line-2: rgba(22, 34, 15, .09);

  --surface: rgba(250, 248, 240, .84);
  --surface-2: rgba(250, 248, 240, .70);
  --surface-3: rgba(250, 248, 240, .74);
  --head-wash: rgba(250, 248, 240, .46);

  --band-1: rgba(250, 248, 240, .10);
  --band-2: rgba(250, 248, 240, .28);
  --band-deep: rgba(22, 33, 15, .72);

  --r: 14px;
  --r-lg: 22px;
  --shadow: 0 2px 4px rgba(20, 30, 12, .05), 0 10px 30px rgba(20, 30, 12, .10);
  --shadow-lg: 0 4px 10px rgba(20, 30, 12, .07), 0 22px 60px rgba(20, 30, 12, .16);
  --serif: Fraunces, Georgia, "Times New Roman", serif;
  --sans: "Work Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --wrap: 1120px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink);
  font: 400 16.5px/1.6 var(--sans);
  background: #e8e4d4 url("/img/ground.jpg") center center / cover fixed no-repeat;
}
/* iOS ignores background-attachment: fixed, and repaints the photo per section.
   A fixed layer behind everything gives the same result everywhere. */
@supports (-webkit-touch-callout: none) {
  body { background: #e8e4d4; }
  body::before {
    content: ""; position: fixed; inset: 0; z-index: -1;
    background: url("/img/ground.jpg") center center / cover no-repeat;
  }
}
img { max-width: 100%; height: auto; }
a { color: var(--gold-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.12; letter-spacing: -.012em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.3rem, 6vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.22rem; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
small { font-size: .84rem; }
code, .mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---- layout ------------------------------------------------------------ */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, 760px); margin-inline: auto; }
.band { padding: clamp(3rem, 7vw, 6rem) 0; background: var(--band-1); }
.band + .band { border-top: 1px solid rgba(250, 248, 240, .16); }
.band-2 { background: var(--band-2); }
.band-deep { background: var(--band-deep); color: #eef2e4; }
.band-deep h2, .band-deep h3 { color: #f6f8ef; }
.band-deep a { color: var(--gold-lift); }
/* A card inside a dark band is still a LIGHT surface: the band's own light ink
   would land on it at 1.3:1. Every surface resets to the ordinary palette. */
.band-deep .card, .band-deep .sheet { color: var(--ink); }
.band-deep .card h2, .band-deep .card h3, .band-deep .card h4,
.band-deep .sheet h2, .band-deep .sheet h3, .band-deep .sheet h4 { color: var(--ink); }
.band-deep .card a, .band-deep .sheet a { color: var(--gold-ink); }
.band-deep .card .eyebrow, .band-deep .sheet .eyebrow { color: var(--gold-ink); }
.band-tight { padding: clamp(2rem, 4vw, 3rem) 0; }

/* A section head is a WASH: large radius, no border, no shadow — a flat rgba on a
   real element, because a gradient leaves backgroundColor transparent and a live
   contrast audit then walks straight through it to the band. */
.head { background: var(--head-wash); border-radius: var(--r-lg); padding: clamp(1.3rem, 3vw, 2.1rem) clamp(1.3rem, 3vw, 2.2rem); }
.band-deep .head { background: rgba(12, 20, 8, .52); }
.head p { color: var(--ink-2); max-width: 62ch; }
.band-deep .head p { color: #d4ddc6; }

.eyebrow {
  font: 600 .74rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-ink); margin: 0 0 .85rem;
}
.band-deep .eyebrow { color: var(--gold-lift); }
.lede { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--ink-2); }

/* ---- the hero ----------------------------------------------------------
   The first screenful is where this page is judged, and a sheet that fills it
   turns the photograph into a border. The copy sits in a column of its own and
   the frame runs past it on both sides; the cards below are separate surfaces
   with the photograph showing between them. */
.hero { padding: clamp(2rem, 5vw, 4rem) 0 clamp(2.5rem, 6vw, 4.5rem); }
.hero-grid { display: grid; gap: 1.1rem; align-items: start; }
.hero-copy h1 { max-width: 13ch; }
.hero-copy .lede { max-width: 52ch; }
.hero-side { display: grid; gap: 1.1rem; align-content: start; }
.hero-stats { margin-top: 1.1rem; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1.55fr) minmax(280px, .95fr); gap: 1.2rem; }
}

/* ---- surfaces ---------------------------------------------------------- */
.card, .sheet {
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: var(--shadow); backdrop-filter: blur(7px) saturate(1.06);
  -webkit-backdrop-filter: blur(7px) saturate(1.06);
}
.card { padding: 1.2rem 1.25rem; }
.sheet { padding: clamp(1.4rem, 3.5vw, 2.4rem); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.card-quiet { background: var(--surface-3); box-shadow: none; border-color: var(--line-2); }
.grid { display: grid; gap: 1rem; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.spread { display: flex; gap: 1rem; align-items: baseline; justify-content: space-between; }
.stack { display: grid; gap: 1rem; }

.stat .k { font: 600 .72rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.stat .v { font: 400 1.75rem/1.1 var(--serif); margin-top: .4rem; display: block; }
.stat .v.num { font-family: var(--mono); font-size: 1.5rem; font-weight: 500; letter-spacing: -.02em; }
.stat .n { color: var(--ink-3); font-size: .84rem; margin-top: .3rem; display: block; }

/* ---- nav --------------------------------------------------------------- */
.nav { position: sticky; top: 0; z-index: 40; padding: .7rem 0; }
.nav-in {
  display: flex; align-items: center; gap: .5rem;
  background: rgba(250, 248, 240, .80); border: 1px solid var(--line-2);
  border-radius: 999px; padding: .45rem .55rem .45rem .8rem;
  box-shadow: var(--shadow); backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
}
.brand { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--ink); flex: none; }
.brand svg { width: 26px; height: 26px; display: block; }
.brand b { font: 600 1.32rem/1 var(--serif); letter-spacing: -.015em; }
.nav nav { display: flex; gap: .1rem; margin-left: auto; align-items: center; }
.nav nav a {
  color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: .94rem;
  padding: .42rem .72rem; border-radius: 999px;
}
.nav nav a:hover { background: rgba(22, 34, 15, .07); color: var(--ink); }
.nav nav a[aria-current] { background: var(--ink); color: var(--cream); }
/* A .btn in the nav keeps the button's own colours: the rule above is for links. */
.nav nav a.btn, .nav nav button.btn { color: var(--cream); background: var(--ink); font-weight: 600; }
.nav nav a.btn:hover, .nav nav button.btn:hover { background: #24361a; color: var(--cream); }

/* ---- buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font: 600 .95rem/1 var(--sans); padding: .78rem 1.15rem; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  background: var(--ink); color: var(--cream); transition: transform .06s ease, background .15s ease;
}
.btn:hover { background: #24361a; color: var(--cream); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn-gold { background: var(--gold); color: #1a1405; }
.btn-gold:hover { background: #bb8420; color: #1a1405; }
.btn-ghost { background: rgba(250, 248, 240, .74); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: rgba(250, 248, 240, .92); color: var(--ink); }
.btn-sm { padding: .5rem .8rem; font-size: .86rem; }
.btn-wide { width: 100%; }

.chip {
  display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem;
  border-radius: 999px; background: rgba(22, 34, 15, .07); border: 1px solid var(--line-2);
  font: 500 .8rem/1 var(--sans); color: var(--ink-2);
}
.chip-gold { background: rgba(169, 118, 26, .16); border-color: rgba(169, 118, 26, .3); color: var(--gold-ink); }
.chip-live { background: rgba(46, 110, 40, .14); border-color: rgba(46, 110, 40, .3); color: #2c5f26; }
.chip-warn { background: rgba(150, 70, 20, .13); border-color: rgba(150, 70, 20, .28); color: #8a4212; }

/* ---- tables ------------------------------------------------------------ */
.tbl-wrap { overflow-x: auto; border-radius: var(--r); }
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
th, td { text-align: right; padding: .62rem .7rem; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
th { font: 600 .72rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.pick { cursor: pointer; }
tbody tr.pick:hover { background: rgba(22, 34, 15, .05); }
tbody tr[aria-selected="true"] { background: rgba(169, 118, 26, .13); }

/* ---- forms ------------------------------------------------------------- */
label { display: block; font: 600 .78rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .4rem; }
input[type="text"], input[type="number"], select {
  width: 100%; font: 500 1rem/1.2 var(--sans); color: var(--ink);
  padding: .7rem .8rem; border-radius: 10px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .8);
}
input:focus, select:focus, .btn:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
input.num { font-family: var(--mono); }
.seg { display: flex; gap: .3rem; flex-wrap: wrap; }
.seg button {
  font: 600 .87rem/1 var(--sans); padding: .55rem .8rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .62); color: var(--ink-2);
}
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* ---- notes ------------------------------------------------------------- */
.note { border-radius: 10px; padding: .7rem .85rem; font-size: .9rem; background: rgba(22, 34, 15, .06); color: var(--ink-2); }
.note-bad { background: rgba(150, 40, 20, .1); color: #8a2e12; }
.note-good { background: rgba(46, 110, 40, .12); color: #285a22; }
.muted { color: var(--ink-3); }
.hide { display: none !important; }

/* ---- the range bar ----------------------------------------------------- */
/* A position drawn as what it holds: dollars on one side, shares on the other,
   with the market's price where it actually is. */
.bar { position: relative; height: 34px; border-radius: 8px; background: rgba(22, 34, 15, .10); overflow: hidden; }
.bar .in { position: absolute; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(169, 118, 26, .45), rgba(46, 110, 40, .45)); }
.bar .now { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); }
.bar .now::after { content: ""; position: absolute; top: 0; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.bar-legend { display: flex; justify-content: space-between; font: 500 .78rem/1 var(--mono); color: var(--ink-3); margin-top: .35rem; }

/* ---- footer ------------------------------------------------------------ */
.foot { padding: 2.5rem 0 3.5rem; background: rgba(22, 33, 15, .80); color: #d4ddc6; }
.foot a { color: #e7ecdc; }
.foot .cols { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.foot h4 { font: 600 .74rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #9fb08e; margin-bottom: .7rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; font-size: .92rem; }

@media (max-width: 720px) {
  .nav nav a { padding: .4rem .55rem; font-size: .88rem; }
  .brand b { font-size: 1.15rem; }
  th, td { padding: .55rem .5rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }