/* ============================================================
   Taper — warm glass over a terraced hillside.

   One photograph runs behind every page: terraces at Sa Pa, their
   levels stepping down from ripe gold to green with water standing
   on several of them ("Terraced fields Sa Pa 1", CC BY 2.0 — see
   data/photo-candidates.json and credits.html). A taper is a price
   that comes down level by level until somebody meets it, and a
   terraced hillside is that shape in a landscape.

   THE SURFACE DIVISION, and the stylesheet must obey it — the live
   audit re-checks every text node against it:

     .sheet   thin glass (54%)  display type and graphic panels only
     .card    body card (66%)   every paragraph, label and number
     .slab    dense (82%)       figures, tables, long lists

   Every word sits on a surface of its own — card, sheet, chip — and
   never on the bare photograph, because every contrast failure this
   family of sites has ever shipped was a sentence standing on a
   picture. Bands are THIN: a large pale pane over a photograph IS a
   fill, whatever the CSS says, and a sibling shipped one at 72% flat
   with a median gradient of zero.

   COLOUR IS NOT DEFINED HERE. css/tokens.css is generated by
   tools/palette.mjs, which solves each colour in OKLCh against the
   gamut at its own lightness and refuses to write the file unless
   every pair holds, with a control that must fail.
   tools/validate.mjs refuses a CHROMATIC literal typed into this
   file — achromatic ones are alpha stops and highlights; a brand hue
   typed by hand is the thing that drifts.

   TWO COLOURS CARRY MEANING AND ONLY TWO:
     terrace  an auction that is not takeable: waiting, gated or over
     grain    an auction that is LIVE — anyone may take it right now
   Neither is ever used to mean "important". Every state chip also
   carries its state as a WORD, so the colour is never the only thing
   saying it.
   ============================================================ */
@import url("tokens.css");

:root {
  --r: 26px;
  --r-sm: 18px;
  --r-xs: 12px;
  --maxw: 1200px;

  /* Fraunces, not the sibling's Bodoni: the pages LOAD Fraunces and this token
     named Bodoni, so every display line rendered in an inherited face while the
     requested one downloaded and went unused. A computed-style read is the only
     thing that finds that — the page looks deliberate either way. */
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Red Hat Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Fraunces is a variable face with an optical size axis and a `SOFT` axis.
   Letting the browser pick the optical size is what keeps the wordmark from
   looking like the body serif blown up. */
.wordmark, h1, h2, h3, .big, .score { font-optical-sizing: auto; font-variation-settings: "SOFT" 20, "WONK" 1; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--ground-fill);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select { font: inherit; color: inherit; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.mono, code { font-family: var(--mono); font-size: .9em; }
.num { font-variant-numeric: tabular-nums; }
.up { color: var(--up); }
.down { color: var(--down); }
.muted { color: var(--ink-3); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: var(--wash-2); }
:focus-visible { outline: 2px solid var(--terrace); outline-offset: 2px; }

/* ---------- the photograph ---------- */
.ground {
  position: fixed; inset: -40px; z-index: -3;
  /* The terraces step down across the middle of the frame, the hazy ridge sits
     along the top and the deepest green fills the bottom left. `cover` scales
     by the CONSTRAINED axis, so on a wide window the horizontal position does
     almost nothing and the vertical one does all the work: at 50% down the hero
     sat on the flat green of the lower field with the steps above the fold, and
     the steps are the half of the picture that is about the product. 34% brings
     them into the band the hero occupies. */
  background: var(--ground-fill) url("../img/ground.jpg") 50% 34% / cover no-repeat;
}
@media (max-width: 760px) { .ground { background-image: url("../img/ground-1280.jpg"); background-position: 42% 38%; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: -.005em;
  padding: 11px 20px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease, color .2s ease, opacity .2s;
}
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; }
.btn-lg { padding: 15px 28px; font-size: 16px; }
.btn-sm { padding: 7px 14px; font-size: 13.5px; }
.btn-block { width: 100%; }
.btn-primary { background: var(--terrace); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--terrace-2); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(var(--ink-rgb), .30); }
.btn-fruit { background: var(--grain); color: #fff; }
.btn-fruit:hover:not(:disabled) { background: var(--grain-2); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(var(--grain-rgb), .30); }
.btn-oil { background: var(--straw); color: var(--straw-ink); }
.btn-oil:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(var(--straw-rgb), .45); }
.btn-glass { background: rgba(255, 255, 255, .86); color: var(--ink); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.btn-glass:hover:not(:disabled) { background: #fff; transform: translateY(-1px); }
.btn-quiet { background: var(--wash); color: var(--ink); }
.btn-quiet:hover:not(:disabled) { background: var(--wash-2); }
.btn .arrow {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px;
  background: rgba(255, 255, 255, .2); font-size: 13px; line-height: 1; margin-right: -8px;
}
.btn-glass .arrow, .btn-quiet .arrow { background: var(--wash); }

/* ---------- chips / eyebrows ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 500;
  background: rgba(255, 255, 255, .86); color: var(--ink-2);
  backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite);
}
.chip b { color: var(--ink); font-weight: 600; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--up); animation: pulse 2.2s infinite; flex: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--up-rgb), .45); } 70% { box-shadow: 0 0 0 9px rgba(var(--up-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--up-rgb), 0); } }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  /* --ink, not --ink-2: an eyebrow sits on the thinnest glass (--head), and tools/contrast.mjs
     measured --ink-2 there at 3.63:1 over the bright sky in the photograph. The gold dash carries
     the colour. */
  color: var(--ink);
}
.eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--straw); }
/* A stop's state, as a tinted chip. The TEXT is the darkest ink; the colour
   only tints the background — colour at 11px does not carry enough contrast to
   be the thing that says it, so the chip always contains the WORD as well.
   lives in the tint — 11.5px type in a hue measured under 4.5:1 on a sibling. */
.kind { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.kind.armed { background: var(--mist); }   /* waiting: the gate is shut */
.kind.open { background: var(--straw); }    /* the gate is open: anyone may take it */
.kind.gone { background: var(--wash-2); } /* filled, cancelled or expired */

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 60; padding: 14px 0; }
.nav-inner {
  position: relative; display: flex; align-items: center; gap: 20px; height: 62px; padding: 0 10px 0 14px;
  border-radius: 999px; background: rgba(var(--glass), .76);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 2px 12px rgba(var(--ink-rgb), .08);
  transition: background .25s, box-shadow .25s;
}
.nav.scrolled .nav-inner { background: rgba(var(--glass), .9); box-shadow: 0 10px 30px rgba(var(--ink-rgb), .14); }
.brand { display: flex; align-items: center; gap: 8px; flex: none; }
.brand [data-mark] { display: block; width: 32px; height: 32px; }
.brand [data-mark] svg { display: block; width: 100%; height: 100%; }
.brand-name { font-family: var(--serif); font-weight: 500; font-size: 28px; letter-spacing: -.01em; line-height: 1; margin-top: 1px; color: var(--ink); }
.nav-links { display: flex; gap: 2px; margin-left: 4px; }
.nav-links a { font-size: 15px; font-weight: 500; color: var(--ink-2); padding: 8px 12px; border-radius: 999px; transition: background .15s, color .15s; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); background: var(--wash); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nav-burger { display: none; width: 42px; height: 42px; border-radius: 999px; border: 0; background: var(--wash); cursor: pointer; place-items: center; }
.nav-burger svg { display: block; }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--wash-2); color: var(--ink); flex: none; }
.icon-btn svg { display: block; width: 17px; height: 17px; fill: currentColor; }
@media (max-width: 1000px) {
  .nav-links { display: none; }
  .nav-burger { display: grid; flex: none; }
  .nav-inner { gap: 10px; padding-right: 8px; }
  .nav.open .nav-links {
    display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 72px;
    padding: 12px; border-radius: 22px; background: rgba(var(--glass), .97); box-shadow: var(--shadow);
  }
  .nav.open .nav-links a { padding: 12px 14px; font-size: 16px; }
}
@media (max-width: 520px) {
  .nav .wrap { padding: 0 12px; }
  .nav-inner { height: 58px; padding-left: 12px; }
  .brand-name { font-size: 25px; }
  .nav-right .btn { padding: 9px 14px; font-size: 14px; }
  .nav-right .btn .arrow { display: none; }
}

/* ---------- hero ---------- */
.hero { padding: 26px 0 30px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: 18px; align-items: start; }
.hero-card {
  position: relative; padding: 44px 46px 36px; border-radius: 40px;
  /* THE THIN SHEET. It carries display type and nothing else: at 54% over this
     photograph the palette proves 3:1 for large type at both ends of the
     picture and does NOT prove 4.5:1 for prose. The first draft put the whole
     hero — paragraph, chips, figures — on a 46% sheet, and the sentences stood
     on grass and brick. The prose moved to `.hero-body` below, which is a body
     card. */
  background: var(--surface);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 40px 100px rgba(var(--ink-rgb), .18);
  display: flex; flex-direction: column;
}
/* The body card INSIDE the hero sheet. It composites over the sheet, not over
   the photograph, which is why the palette proves it separately. */
.hero-body {
  margin-top: 18px; padding: 22px 24px 24px; border-radius: 28px;
  background: rgba(var(--glass), .40);
}
.hero-body > p { color: var(--ink-2); font-size: 16.5px; }
.wordmark {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--serif); font-weight: 500; font-size: clamp(58px, 7vw, 96px);
  line-height: .9; letter-spacing: -.03em; margin: 22px 0 14px; color: var(--ink);
}
.wordmark [data-mark] { width: .8em; height: .8em; flex: none; margin-top: -.06em; }
.wordmark [data-mark] svg { width: 100%; height: 100%; display: block; }
.hero h1 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(30px, 3.4vw, 44px); line-height: 1.06; letter-spacing: -.015em; color: var(--ink);
}
.hero h1 em { font-style: italic; color: var(--grain); }
.hero .lede { max-width: 560px; margin-top: 14px; font-size: 17.5px; color: var(--ink-2); }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: auto; padding-top: 30px; }
.stat { padding: 14px 16px; border-radius: var(--r-sm); background: var(--surface-2); }
.stat:nth-child(2) { background: var(--surface-3); }
.stat .k { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.stat .v { font-family: var(--serif); font-weight: 500; font-size: 32px; line-height: 1.1; margin-top: 4px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.stat .s { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.skel { display: inline-block; min-width: 3.2em; height: .9em; border-radius: 6px; background: linear-gradient(90deg, rgba(var(--ink-rgb), .08), rgba(var(--ink-rgb), .16), rgba(var(--ink-rgb), .08)); background-size: 200% 100%; animation: sk 1.3s infinite linear; vertical-align: -.05em; }
@keyframes sk { to { background-position: -200% 0; } }

/* ---------- the live board of stops beside the hero ---------- */
.board {
  padding: 26px 24px 22px; border-radius: 40px; display: flex; flex-direction: column; gap: 14px;
  align-self: start;
  background: var(--surface-2);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 40px 100px rgba(var(--ink-rgb), .18);
}
.board-top h3 { font-family: var(--serif); font-weight: 500; font-size: 32px; line-height: 1.02; letter-spacing: -.012em; }
.board-top .sub { font-size: 14px; color: var(--ink-2); margin-top: 6px; }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--wash-2); gap: 2px; }
.seg button { border: 0; background: transparent; padding: 7px 15px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--ink); cursor: pointer; }   /* --ink: --ink-2 on the tinted track measured 4.50:1, under the bar by a hair */
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(var(--ink-rgb), .12); }
.board-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.board-tools .when { font-size: 13px; color: var(--ink-2); }
.rows { list-style: none; display: grid; gap: 4px; }
.rows li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 12px 7px 8px; border-radius: 14px; background: rgba(255, 255, 255, .66); }
.rows li:nth-child(even) { background: rgba(255, 255, 255, .56); }
.rows .t { display: block; font-weight: 700; font-size: 14.5px; line-height: 1.2; }
.rows .n { display: block; font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rows .r { text-align: right; font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 700; line-height: 1.2; }
.rows .r small { display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-2); }
.board-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--surface-3); font-size: 13px; color: var(--ink-2); }
.board-foot b { color: var(--ink); }
.tk {
  flex: none; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center;
  font-size: 9.5px; font-weight: 800; letter-spacing: .02em; color: #fff; line-height: 1; background: var(--terrace);
}
.tk.open { background: var(--grain); }
.spark { display: block; width: 100%; height: 22px; }
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-card { padding: 34px 24px 26px; border-radius: 32px; }
  .board { border-radius: 32px; }
}
@media (max-width: 560px) {
  /* The block number goes at phone width: with it the chip wrapped into a ragged two-line block. */
  #tip { display: none; }
  .hero .chip { white-space: nowrap; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .hero-stats .stat:last-child { grid-column: span 2; }
  .board-top h3 { font-size: 27px; }
  .wordmark { gap: 10px; }
}

/* ---------- thin strip ---------- */
.strip { padding: 6px 0 20px; }
.strip-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.strip .chip { font-size: 13.5px; padding: 8px 15px; }

/* ---------- sections ---------- */
.section { padding: 64px 0; }
.band { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .07) 120px, rgba(255, 255, 255, .07) calc(100% - 120px), rgba(255, 255, 255, 0) 100%); }
.section-head {
  max-width: 800px; margin: 0 auto 34px; text-align: center;
  padding: 26px 34px 28px; border-radius: 34px; background: var(--head);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.section-head h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(34px, 4.2vw, 52px); line-height: 1.04; letter-spacing: -.02em; margin-top: 10px; }
.section-head h2 em { font-style: italic; color: var(--grain); }
.section-head p { color: var(--ink-2); font-size: 17px; margin-top: 12px; }

.card {
  padding: 26px 26px 24px; border-radius: var(--r); background: var(--surface-2);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.card h3 { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.12; letter-spacing: -.01em; }
.card p { color: var(--ink-2); margin-top: 8px; font-size: 15.5px; }
.card p + p { margin-top: 10px; }

/* how it works: four steps, the life of one stop */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.steps .card:nth-child(odd) { background: var(--surface-3); }
.step-n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: var(--terrace); color: #fff; font-weight: 700; font-size: 15px; margin-bottom: 14px; }
.steps .card:nth-child(4) .step-n { background: var(--grain); }
@media (max-width: 1000px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .steps { grid-template-columns: 1fr; } }

/* the two things you can write */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pair .card { padding: 30px 30px 28px; }
.pair .card:first-child { background: var(--surface-3); }
.pair h3 { font-size: 30px; display: flex; align-items: center; gap: 12px; }
.outcomes { list-style: none; display: grid; gap: 8px; margin-top: 18px; }
.outcomes li { padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .66); font-size: 14.5px; color: var(--ink-2); }
.outcomes li b { color: var(--ink); }
.outcomes li.cost { background: var(--grain-wash); }
@media (max-width: 860px) { .pair { grid-template-columns: 1fr; } }

/* the story */
.story { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 16px; align-items: stretch; }
.story blockquote { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(24px, 2.6vw, 31px); line-height: 1.22; letter-spacing: -.01em; color: var(--ink); }
.story cite { display: block; margin-top: 16px; font-style: normal; font-size: 14px; color: var(--ink-2); }
.story .card:first-child { background: var(--surface-3); padding: 36px 36px 32px; }
@media (max-width: 860px) { .story { grid-template-columns: 1fr; } }

/* the honest part */
.cost-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cost-grid .card:nth-child(2) { background: var(--surface-3); }
.big { font-family: var(--serif); font-weight: 500; font-size: 34px; line-height: 1; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.big.flame { color: var(--grain-2); }
.cost-note { margin-top: 14px; padding: 16px 20px; border-radius: 18px; background: var(--surface-2); font-size: 14.5px; color: var(--ink-2); }
@media (max-width: 900px) { .cost-grid { grid-template-columns: 1fr; } }

/* what it is built on */
.built { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.built .card:nth-child(odd) { background: var(--surface-3); }
.built .addr { display: inline-block; margin-top: 12px; font-family: var(--mono); font-size: 12.5px; padding: 5px 10px; border-radius: 10px; background: var(--wash); color: var(--ink); }
.built .addr:hover { background: var(--wash-2); }
@media (max-width: 900px) { .built { grid-template-columns: 1fr; } }

/* The proof panel: three cards to a row, so a section of pale panes never
   fills a viewport on its own (a single column measured 27% flat on a sibling). */
.proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.proof.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.proof .card { background: var(--surface-2); }
.proof .card:nth-child(even) { background: var(--surface-3); }
.proof .score { font-family: var(--serif); font-weight: 500; font-size: 46px; line-height: 1; letter-spacing: -.02em; color: var(--terrace); }
.proof h3 { font-size: 21px; margin: 10px 0 8px; }
.proof p { font-size: 13.5px; }
@media (max-width: 900px) { .proof { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { max-width: 840px; margin: 0 auto; display: grid; gap: 10px; }
.faq details { border-radius: var(--r-sm); background: var(--surface-2); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.faq details:nth-child(even) { background: var(--surface-3); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 24px; font-weight: 600; font-size: 17px; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--ink-3); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 24px 22px; color: var(--ink-2); }
.faq .a p + p { margin-top: 10px; }

/* ---------- the dark slab + footer ---------- */
.slab {
  border-radius: 36px; padding: 56px 40px; text-align: center; color: #fff;
  background: rgba(var(--ink-rgb), .86); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.slab h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(38px, 5vw, 60px); line-height: 1.02; letter-spacing: -.02em; }
.slab h2 em { color: var(--mist); }
.slab .inner { display: inline-block; max-width: 620px; margin: 16px auto 0; padding: 16px 22px; border-radius: 20px; background: rgba(255, 255, 255, .10); color: var(--pale); font-size: 16.5px; }
.slab .hero-cta { justify-content: center; margin-top: 26px; }

.footer { padding: 30px 0 40px; }
.foot-card { padding: 34px 34px 26px; border-radius: 30px; background: var(--surface-2); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px; }
.foot-grid h5 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 10px; }   /* --ink-2: --ink-3 measured 4.45:1 at 390px */
.foot-grid a { display: block; color: var(--ink-2); padding: 3px 0; font-size: 14.5px; }
.foot-grid a:hover { color: var(--ink); }
.foot-grid .blurb { color: var(--ink-2); font-size: 14.5px; margin-top: 12px; max-width: 340px; }
/* EVERY WORD SITS ON A SURFACE OF ITS OWN. The first live audit measured this
   line at 2.4:1 — the photograph credit, in 13px, standing on the photograph
   it credits. It is the recurring failure in this family of sites. Each half
   is now a chip on the dense surface, and the ink is the darkest one. */
.foot-base { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 28px; padding-top: 18px; font-size: 13px; color: var(--ink); }
.foot-base > span { padding: 8px 14px; border-radius: 999px; background: var(--surface-3); backdrop-filter: var(--blur-lite); -webkit-backdrop-filter: var(--blur-lite); }
.foot-base a { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- reveal ---------- */
.js .rise { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.js .rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .rise { opacity: 1; transform: none; transition: none; } .live-dot { animation: none; } html { scroll-behavior: auto; } }

/* ============================================================
   the app
   ============================================================ */
.app { padding: 18px 0 40px; }
.app-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .app-grid { grid-template-columns: 1fr; } }
.pane { padding: 24px 24px 22px; border-radius: 30px; background: var(--surface-2); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: 0 30px 80px rgba(var(--ink-rgb), .14); }
.pane.dense { background: var(--surface-3); }
.pane h2 { font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.05; letter-spacing: -.012em; }
.pane .sub { color: var(--ink-2); font-size: 14.5px; margin-top: 4px; }
.tabs { display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--surface-3); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); width: max-content; max-width: 100%; margin: 0 auto 16px; box-shadow: 0 8px 30px rgba(var(--ink-rgb), .12); }
.tabs a { padding: 10px 20px; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--ink-2); }
.tabs a.on { background: var(--terrace); color: #fff; }
.field { margin-top: 18px; }
.field > label, .field > .label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
.opts { display: flex; flex-wrap: wrap; gap: 6px; }
.opt { border: 1px solid var(--line); background: rgba(255, 255, 255, .72); padding: 8px 13px; border-radius: 12px; font-weight: 600; font-size: 14px; cursor: pointer; color: var(--ink); font-variant-numeric: tabular-nums; }
.opt small { display: block; font-size: 11px; font-weight: 500; color: var(--ink-2); }
.opt:hover { background: #fff; }
.opt.on { background: var(--terrace); color: #fff; border-color: var(--terrace); }
.opt.on small { color: var(--pale); }
.opt.sell.on { background: var(--grain); border-color: var(--grain); }
.opt:disabled { opacity: .5; cursor: not-allowed; }
.input { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.input input, .input select { border: 0; outline: 0; background: transparent; width: 100%; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 0; }
.input span { color: var(--ink-2); font-size: 14px; white-space: nowrap; }
.input:focus-within { border-color: var(--terrace); box-shadow: 0 0 0 3px var(--wash-2); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hint { font-size: 13px; color: var(--ink-2); margin-top: 6px; }
.hint b { color: var(--ink); }
.hint button { border: 0; background: none; color: var(--terrace); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.summary { margin-top: 18px; padding: 16px 18px; border-radius: 18px; background: rgba(255, 255, 255, .74); display: grid; gap: 8px; font-size: 14.5px; }
.summary .line { display: flex; justify-content: space-between; gap: 12px; }
.summary .line span { color: var(--ink-2); }
.summary .line b { font-variant-numeric: tabular-nums; text-align: right; }
.summary .line.total { padding-top: 8px; border-top: 1px solid var(--line); }
.if { margin-top: 12px; display: grid; gap: 6px; }
.if div { padding: 10px 12px; border-radius: 12px; background: var(--wash); font-size: 13.5px; color: var(--ink); }
.if div.cost { background: var(--grain-wash); }
.act { margin-top: 18px; display: grid; gap: 10px; }
.note { font-size: 13px; color: var(--ink-2); text-align: center; }
.plan { list-style: none; display: grid; gap: 6px; margin-top: 12px; }
.plan li { display: flex; gap: 10px; align-items: center; font-size: 13.5px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .66); }
.plan li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--line); flex: none; }
.plan li.doing::before { background: var(--straw); }
.plan li.done::before { background: var(--up); }
.plan li.bad::before { background: var(--down); }
.msg { margin-top: 12px; padding: 12px 14px; border-radius: 14px; font-size: 14px; background: var(--wash); }
.msg.bad { background: rgba(var(--down-rgb), .12); }
.msg.good { background: rgba(var(--up-rgb), .14); }
.msg a { text-decoration: underline; }

.list { display: grid; gap: 8px; margin-top: 14px; }
.item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 18px; background: rgba(255, 255, 255, .72); }
.item:nth-child(even) { background: rgba(255, 255, 255, .62); }
.item .t { font-weight: 700; font-size: 15px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.item .n { font-size: 13px; color: var(--ink-2); }
.item .r { text-align: right; }
.item .r b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
.item .r small { display: block; font-size: 12px; color: var(--ink-2); }
.item .go { display: flex; gap: 6px; align-items: center; justify-content: flex-end; margin-top: 6px; }
.item .go .input { padding: 5px 10px; border-radius: 10px; width: 92px; }
.item .go .input input { font-size: 14px; }
.item.dead { opacity: .72; }
.empty { padding: 26px 20px; border-radius: 18px; background: rgba(255, 255, 255, .66); text-align: center; color: var(--ink-2); font-size: 14.5px; margin-top: 14px; }
.empty b { color: var(--ink); }
.wallet-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px 12px 18px; border-radius: 999px; background: var(--surface-3); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); margin-bottom: 14px; font-size: 14px; }
.wallet-bar b { font-family: var(--mono); font-size: 13.5px; }
.progress { height: 4px; border-radius: 4px; background: var(--wash-2); overflow: hidden; margin-top: 10px; }
.progress i { display: block; height: 100%; width: 0; background: var(--terrace); transition: width .3s; }

/* modal (wallet picker) */
.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(var(--ink-rgb), .45); padding: 16px; }
.modal .box { width: min(420px, 100%); padding: 24px; border-radius: 26px; background: rgba(var(--glass), .97); box-shadow: var(--shadow-lg); }
.modal h3 { font-family: var(--serif); font-weight: 500; font-size: 26px; }
.modal .wl { display: grid; gap: 8px; margin-top: 14px; }
.modal .wl button, .modal .wl a { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-weight: 600; text-align: left; }
.modal .wl img { width: 26px; height: 26px; border-radius: 6px; }

.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 95; max-width: min(560px, calc(100% - 32px)); padding: 13px 18px; border-radius: 16px; background: var(--ink); color: #fff; font-size: 14px; box-shadow: var(--shadow); }
.toast.bad { background: var(--down); }
.toast a { text-decoration: underline; color: var(--pale); }

/* ---------- prose pages (docs, credits) ---------- */
.doc { padding: 20px 0 40px; }
.doc-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; }
.toc { position: sticky; top: 96px; padding: 20px 18px; border-radius: 24px; background: var(--surface); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.toc a { display: block; font-size: 14px; padding: 5px 8px; border-radius: 10px; color: var(--ink); }
.toc a:hover { background: var(--wash); }
.prose { display: grid; gap: 14px; }
.prose > section { padding: 30px 34px 28px; border-radius: 28px; background: var(--surface-2); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.prose > section:nth-child(even) { background: var(--surface-3); }
.prose h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(38px, 5vw, 58px); line-height: 1.02; letter-spacing: -.02em; }
.prose h2 { font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.1; letter-spacing: -.01em; margin-bottom: 10px; }
.prose h3 { font-size: 17px; margin: 18px 0 6px; }
.prose p, .prose li { color: var(--ink-2); font-size: 16px; }
.prose p + p { margin-top: 10px; }
.prose ul, .prose ol { padding-left: 22px; margin-top: 8px; display: grid; gap: 6px; }
.prose a { color: var(--terrace); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.prose code { background: var(--wash); padding: 1px 6px; border-radius: 6px; color: var(--ink); }
.prose table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.prose th, .prose td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.prose td { color: var(--ink); }
.prose .tbl { overflow-x: auto; }
@media (max-width: 900px) { .doc-grid { grid-template-columns: 1fr; } .toc { position: static; } .prose > section { padding: 24px 20px; } }


/* ============================================================
   Added for Taper's own pages. Everything below obeys the surface
   division above: nothing sets a chromatic colour literal, and every
   text node lands on a card, a sheet or a chip.
   ============================================================ */

.wide { grid-column: 1 / -1; }
.mono-inline { font-family: var(--mono); }

/* --- chips in a row, and the rule between blocks --- */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }

/* --- the hero's second card: one number, said once --- */
.hero-stat { align-self: start; }
.hero-stat .big { margin: 2px 0 6px; }

/* --- a score, as in 29/29 --- */
.score { font-family: var(--serif); font-size: clamp(34px, 5vw, 46px); line-height: 1; margin: 4px 0 10px; color: var(--ink); }
.score-of { font-size: .5em; color: var(--ink-3); font-family: var(--sans); font-weight: 600; }

/* --- three columns inside one card --- */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; }

/* --- a small figure table. Zebra rows, because a forty-row block of
       one tint is a FILL: a sibling measured 32% flat on a table and
       the ground was not the problem. --- */
table.fig { width: 100%; border-collapse: collapse; margin: 10px 0 4px; font-size: 14px; }
table.fig th, table.fig td { text-align: left; padding: 7px 10px; color: var(--ink-2); font-weight: 500; }
table.fig td { text-align: right; font-family: var(--mono); color: var(--ink); }
table.fig tr:nth-child(odd) { background: var(--wash); }

/* --- the taper itself --- */
.chart-card { padding: 20px 22px 16px; }
.taper-chart { width: 100%; height: auto; display: block; overflow: visible; }
.taper-chart.sm { margin: 8px 0 2px; }
.taper-area { fill: var(--wash); }
.taper-line { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.taper-floor { stroke: var(--grain); stroke-width: 3; stroke-linecap: round; }
.taper-legend { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 10px 0 4px; font-size: 14px; color: var(--ink-2); }
.taper-legend b { color: var(--ink); font-family: var(--mono); }

/* ============================================================
   The app
   ============================================================ */
.app-page .hero { display: none; }
.app { padding: 96px 0 60px; }
.app .wrap > * + * { margin-top: 18px; }

.warn-strip {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 12px 16px; font-size: 14px; color: var(--ink-2);
  backdrop-filter: blur(var(--blur-lite)); -webkit-backdrop-filter: blur(var(--blur-lite));
}
.warn-strip b { color: var(--ink); }

.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tab {
  font: 600 14px/1 var(--sans); padding: 11px 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  backdrop-filter: blur(var(--blur-lite)); -webkit-backdrop-filter: blur(var(--blur-lite));
}
.tab[aria-selected="true"] { background: var(--terrace); color: #fff; border-color: transparent; }

.app-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 18px; align-items: start; }
.form-card, .quote-card { padding: 24px 26px; }
.quote-card .big { margin: 2px 0 4px; }

.field { display: block; margin: 0 0 14px; }
.field-label { display: block; font: 600 13px/1.4 var(--sans); color: var(--ink-2); margin-bottom: 6px; }
.field-note { font-size: 13px; line-height: 1.55; color: var(--ink-3); margin: -6px 0 14px; }
.field-note b { color: var(--ink-2); }
.input {
  width: 100%; box-sizing: border-box; font: 500 15px/1.2 var(--sans);
  padding: 11px 13px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--surface-3); color: var(--ink);
}
.input:focus { outline: 2px solid var(--terrace-2); outline-offset: 1px; }
select.input { appearance: none; background-image: none; }
.input-row { display: flex; gap: 8px; align-items: center; }
.input-row .input { flex: 1 1 auto; }
.unit { font: 500 13px/1 var(--sans); color: var(--ink-3); white-space: nowrap; }
.more { margin: 4px 0 14px; }
.more summary { cursor: pointer; font: 600 13px/1 var(--sans); color: var(--ink-2); padding: 6px 0; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }

.board-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }

/* Rows alternate their tint: a long list of one pale pane is a fill. */
.row {
  display: flex; gap: 16px; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-radius: var(--r-sm); flex-wrap: wrap;
}
.row:nth-child(odd) { background: var(--wash); }
.row-live { box-shadow: inset 3px 0 0 var(--grain-2); }
.row-main { flex: 1 1 260px; min-width: 0; }
.row-title { margin: 0 0 3px; font: 500 15px/1.3 var(--sans); color: var(--ink); }
.row-side { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.chip-live { background: var(--straw); color: var(--straw-ink); border-color: transparent; }

.modal {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  padding: 20px; background: rgba(var(--ink-rgb), .34);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.modal[hidden] { display: none; }
.modal-card { max-width: 560px; width: 100%; max-height: 86vh; overflow: auto; padding: 26px 28px; }
.modal-card h2 { margin: 4px 0 14px; }

.lockup { display: inline-flex; align-items: center; gap: .42em; }
.lockup svg { width: 1.32em !important; height: 1.32em !important; }
.lockup b { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; }

@media (max-width: 860px) {
  .app-grid { grid-template-columns: 1fr; }
  .app { padding: 84px 0 48px; }
}

/* ============================================================
   CASCADE FIXES.

   `.card p { font-size: 15.5px }` is (0,1,1) and beats `.big`,
   `.score` and `.eyebrow`, which are all (0,1,0) — so every
   headline number inside a card rendered at body size, in the
   display serif, and looked like a typo. Nothing in the
   stylesheet reads wrong; only the painted pixels said so, and
   only a computed-style read found which rule was winning.

   A sibling shipped `.head a { color }` beating `.btn` the same
   way and put ink on ember at 2.08:1. Grep for a duplicate
   selector before blaming the tool.
   ============================================================ */
p.big, .card p.big { font-size: 34px; line-height: 1; margin-top: 4px; }
p.score, .card p.score { font-size: clamp(34px, 5vw, 46px); line-height: 1; margin-top: 4px; }
p.eyebrow, .card p.eyebrow { font-size: 12px; margin-top: 0; }
p.cost-note, .card p.cost-note { font-size: 13.5px; }
p.field-note, .card p.field-note { font-size: 13px; }
p.row-title, .card p.row-title { font-size: 15px; margin-top: 0; }
.card p.sub { font-size: 15.5px; }
.split p.sub, .card .split p.sub { font-size: 14.5px; }

/* ============================================================
   FOOTER, corrected after looking at the painted page.

   `.foot-base > span` gives the last line a chip; the pages put
   <p> there instead, so both sentences stood on the BARE
   PHOTOGRAPH. Every contrast failure this family of sites has
   ever shipped was a sentence standing on a picture, and the
   live audit passed this one only because the photograph happens
   to be dark enough there — which is luck, not a surface.

   The link rows stacked around their "·" separators because
   `.foot-card p` is a block and the anchors wrapped; they are one
   flex row now, with the separators as real elements rather than
   loose text nodes.
   ============================================================ */
.foot-base > p, .foot-base > span {
  padding: 8px 14px; border-radius: 999px; margin: 0;
  background: var(--surface-3);
  backdrop-filter: blur(var(--blur-lite)); -webkit-backdrop-filter: blur(var(--blur-lite));
}
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; margin-top: 8px; }
.foot-links a { white-space: nowrap; }
.foot-links .sep { color: var(--ink-3); }

/* The nav links carry the DARKEST ink, not the second weight. */
.nav-links a { color: var(--ink); }

/* AND THE SAME SPECIFICITY TRAP A SECOND TIME.
   `.section-head p` is (0,1,1) and quietly overrode `.eyebrow`'s `--ink` with
   `--ink-2`, which on the thin sheet over this photograph's brightest band
   measures 4.05:1 — under the 4.5 an eyebrow needs at 12px. The rule's own
   comment said "--ink, not --ink-2" and the rule was not the one winning.
   Guessing which node it was cost two passes; reading the COMPUTED colour off
   the element found it at once. */
.section-head p.eyebrow, .card p.eyebrow, p.eyebrow { color: var(--ink); font-size: 12px; }