/* style.css — Scarp.

   THE GROUND IS A PHOTOGRAPH and the type never stands on it directly. Every
   run of text sits on a surface that clears its ground on its own, so the page
   stays legible wherever the photograph happens to be bright. The bands between
   sections are THIN — a band wide enough to darken the whole frame is how these
   pages end up flat, and flatness is the thing to avoid, not contrast.

   The tone of the photograph is baked into img/ground.jpg. There is no filter
   on .ground: a filter costs a compositing pass on every scroll and makes
   solving for the ground impossible, because it is applied to every candidate
   alike. */

:root {
  /* From the photograph: shadow blue-black, chalk, the gold on the cliff top. */
  --ink: #0b1016;
  --ink-2: #121a22;
  --chalk: #eceadf;
  --chalk-dim: #b9bfc0;
  --muted: #aeb7bc;
  --gold: #e9ac57;
  --gold-deep: #b97f2c;
  --sky: #a7c3dc;
  --edge: #e46a48;          /* over the line */
  --near: #e2a44c;          /* close to it */
  --safe: #8fb8a6;          /* room to fall */

  --surface: rgba(11, 16, 22, .56);
  --surface-2: rgba(18, 26, 34, .64);
  --surface-3: rgba(24, 34, 44, .78);
  --hair: rgba(236, 234, 223, .14);
  --hair-2: rgba(236, 234, 223, .08);

  --serif: Gloock, "Times New Roman", Georgia, serif;
  --sans: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "Azeret Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --page: 1180px;
  --r: 14px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font: 400 16px/1.6 var(--sans);
  color: var(--chalk);
  background: var(--ink);
  letter-spacing: -.005em;
  overflow-x: hidden;
}

/* The ground: fixed, so the same region of the photograph sits behind every
   section and the page scrolls over it. `position: fixed` rather than
   background-attachment, which iOS ignores. */
.ground {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: url("../img/ground.jpg") center 58% / cover no-repeat var(--ink);
}
/* One soft vertical gradient, thin at the top where the nav sits and deepest
   at the foot — enough to seat the page without flattening the frame. */
.ground::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8,12,17,.62) 0, rgba(8,12,17,.10) 20%, rgba(8,12,17,.16) 56%, rgba(8,12,17,.48) 100%);
}

.wrap { width: min(100% - 40px, var(--page)); margin-inline: auto; }

/* ---- nav: a floating pill ------------------------------------------- */

.nav { position: sticky; top: 0; z-index: 60; padding: 14px 0; }
.nav-inner {
  position: relative; display: flex; align-items: center; gap: 18px;
  height: 62px; padding: 0 10px 0 16px; border-radius: 999px;
  background: rgba(11, 16, 22, .72);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--hair);
  box-shadow: 0 10px 30px rgba(3, 6, 10, .38);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.brand span { display: inline-flex; }
.brand b { font: 400 23px/1 var(--serif); letter-spacing: .01em; }
.nav-links { display: flex; gap: 2px; margin-left: 6px; }
.nav-links a {
  color: var(--chalk-dim); text-decoration: none; font-size: 14.5px; font-weight: 500;
  padding: 9px 14px; border-radius: 999px; white-space: nowrap;
}
.nav-links a:hover { color: var(--chalk); background: rgba(236,234,223,.10); }
.nav-links a.on { color: var(--ink); background: var(--chalk); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nav-x {
  display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: 999px; color: var(--chalk-dim);
  background: rgba(236,234,223,.07); border: 1px solid var(--hair-2);
}
.nav-x:hover { color: var(--chalk); background: rgba(236,234,223,.14); }
.nav-x svg { width: 15px; height: 15px; fill: currentColor; display: block; }

.nav-burger {
  display: none; width: 42px; height: 42px; border-radius: 999px; flex: none;
  border: 1px solid var(--hair); background: rgba(236,234,223,.09); color: var(--chalk);
  cursor: pointer; place-items: center;
}
.nav-burger svg { width: 18px; height: 18px; display: block; }

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

h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; margin: 0; }
h1 { font-size: clamp(40px, 6.4vw, 72px); line-height: 1.03; }
h2 { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.12; }
h3 { font-size: 20px; line-height: 1.25; }
p { margin: 0 0 1em; }
a { color: var(--gold); }
.lede { font-size: clamp(17px, 2vw, 20px); line-height: 1.55; color: #e8ebe6; }
.small { font-size: 13.5px; color: var(--muted); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
/* An eyebrow that is also a chip: at 11.5px on a photograph, gold type cannot
   carry itself, and the honest fix is a ground under it rather than a brighter
   gold that stops being gold. */
.eyebrow.onglass { color: var(--gold); padding: 8px 12px; }
.eyebrow {
  font: 600 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  /* Lighter than --gold: an eyebrow is the one place gold type stands directly
     on the photograph rather than on a surface, at 11.5px, and --gold measured
     3.84:1 there against the 4.5 it needs. */
  color: #f3c887; margin: 0 0 14px;
}

/* ---- surfaces -------------------------------------------------------- */

/* Everything that carries text sits on one of these. They are what makes the
   page legible over a photograph, so they must clear their ground on their
   own — not lean on a darkened frame. */
.card {
  background: var(--surface);
  backdrop-filter: blur(7px) saturate(1.25);
  -webkit-backdrop-filter: blur(7px) saturate(1.25);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  padding: 22px 24px;
}
.card.tight { padding: 16px 18px; }
.panel {
  background: var(--surface-2);
  backdrop-filter: blur(8px) saturate(1.25);
  -webkit-backdrop-filter: blur(8px) saturate(1.25);
  border: 1px solid var(--hair);
  border-radius: 18px;
}

section { padding: 84px 0; }
section.slim { padding: 46px 0; }

/* ---- hero: two columns, text left, the live board right -------------- */

.hero { padding: 26px 0 34px; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: 18px; align-items: stretch;
}
.hero-card {
  position: relative; display: flex; flex-direction: column;
  padding: 44px 44px 36px; border-radius: 34px;
  background: rgba(11, 16, 22, .46);
  backdrop-filter: blur(8px) saturate(1.3);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  border: 1px solid var(--hair);
}
.badge {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font: 600 12.5px/1 var(--sans); color: var(--chalk-dim);
  padding: 8px 14px 8px 11px; border-radius: 999px;
  /* Its own ground, not the hero card's: the badge is 12.5px and sits at the
     top of the card where the photograph behind it is brightest. */
  background: rgba(11, 16, 22, .78); border: 1px solid var(--hair);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.badge i {
  width: 7px; height: 7px; border-radius: 999px; background: var(--safe);
  box-shadow: 0 0 0 3px rgba(143,184,166,.22);
}
.wordmark {
  display: flex; align-items: center; gap: 16px; margin: 24px 0 2px;
  font: 400 clamp(56px, 7.6vw, 104px)/.9 var(--serif); letter-spacing: -.02em;
}
.wordmark [data-mark] { width: .70em; height: .70em; flex: none; }
.wordmark [data-mark] svg { width: 100%; height: 100%; display: block; }

.hero h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(26px, 3.1vw, 37px); line-height: 1.1; letter-spacing: -.012em;
  margin-top: 10px;
}
.hero h1 em { font-style: italic; color: var(--gold); }
.hero .lede { max-width: 56ch; margin-top: 15px; font-size: 17px; color: #d8ddd9; }
.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: 16px; background: rgba(14, 20, 27, .82); border: 1px solid var(--hair-2); }
.stat .k { font: 700 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.stat .v { font: 400 30px/1.1 var(--serif); margin-top: 6px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.stat .s { font-size: 12.5px; color: var(--muted); margin-top: 3px; }

/* The right-hand card is not a picture of the product — it is the product,
   reading the chain, five rows deep. */
.edge-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 26px 26px 22px; border-radius: 34px;
  background: rgba(11, 16, 22, .54);
  backdrop-filter: blur(8px) saturate(1.3);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  border: 1px solid var(--hair);
}
.edge-card h3 { font: 400 32px/1 var(--serif); letter-spacing: -.01em; }
.edge-card .sub { font-size: 14px; color: var(--chalk-dim); margin-top: 7px; }
.edge-rows { display: flex; flex-direction: column; gap: 8px; }
.edge-row {
  display: grid; grid-template-columns: minmax(96px, auto) minmax(40px, 1fr) auto;
  align-items: center; gap: 14px;
  padding: 11px 14px; border-radius: 14px; background: rgba(20, 28, 37, .72);
  border: 1px solid var(--hair-2);
}
.edge-row .tk { font: 600 14px/1.2 var(--sans); }
.edge-row .tk s { display: block; text-decoration: none; font: 500 11.5px/1.3 var(--sans); color: var(--muted); margin-top: 3px; }
.edge-row .pc {
  font: 500 14px/1 var(--mono); font-variant-numeric: tabular-nums; text-align: right;
  white-space: nowrap;
}
.edge-row .pc s {
  display: block; text-decoration: none; font: 500 11.5px/1.2 var(--sans);
  color: var(--muted); margin-top: 5px; white-space: nowrap;
}
.edge-row .tk s { white-space: nowrap; }
.edge-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.edge-foot span { font-size: 13px; color: var(--muted); }
.edge-foot .btn { margin-left: auto; }
.skel { height: 54px; border-radius: 14px; background: rgba(236,234,223,.06); }

/* ---- section heads --------------------------------------------------- */

.section-head {
  max-width: 760px; margin: 0 auto 36px; text-align: center;
  padding: 26px 34px 28px; border-radius: 30px;
  background: rgba(11, 16, 22, .50);
  backdrop-filter: blur(9px) saturate(1.3);
  -webkit-backdrop-filter: blur(9px) saturate(1.3);
  border: 1px solid var(--hair);
}
.section-head h2 { font-size: clamp(32px, 4.4vw, 50px); line-height: 1.04; letter-spacing: -.02em; margin-top: 12px; }
.section-head h2 em { font-style: italic; color: var(--gold); }
.section-head p { margin: 12px 0 0; font-size: 16.5px; color: #d8ddd9; }

/* ---- the numbered trio ------------------------------------------------ */

.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step { padding: 26px 26px 22px; border-radius: 26px; background: var(--surface); border: 1px solid var(--hair);
  backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); }
.step .n {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px;
  font: 500 14px/1 var(--mono); color: var(--ink); background: var(--gold); margin-bottom: 16px;
}
.step h3 { font-size: 21px; }
.step p { margin: 10px 0 14px; font-size: 14.5px; color: var(--chalk-dim); line-height: 1.55; }
.step .what { font: 500 12.5px/1 var(--sans); color: var(--muted); padding-top: 13px; border-top: 1px solid var(--hair-2); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: 600 15px/1 var(--sans); text-decoration: none;
  padding: 13px 22px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: transform .12s ease, background .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--gold); color: #1b1204; border-color: var(--gold); }
.btn.primary:hover { background: #f2bb6f; }
.btn.ghost {
  background: rgba(11,16,22,.74); color: var(--chalk); border-color: var(--hair);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.btn.ghost:hover { background: rgba(30,40,50,.86); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn.lg { padding: 15px 26px; font-size: 16px; }
.btn.sm { padding: 9px 16px; font-size: 13.5px; }

/* ---- the number strip ------------------------------------------------ */

.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hair-2); border-radius: var(--r); overflow: hidden; }
.strip > div { background: rgba(14,20,27,.80); padding: 18px 20px; backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px) saturate(1.1); }
.strip b { display: block; font: 400 27px/1.1 var(--serif); letter-spacing: -.01em; }
.strip i { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); margin-top: 6px; }

/* ---- tables ---------------------------------------------------------- */

.tablewrap { overflow-x: auto; border-radius: var(--r); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font: 600 11.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--hair);
  white-space: nowrap; position: sticky; top: 0; background: var(--surface-3);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
td { padding: 12px 14px; border-bottom: 1px solid var(--hair-2); vertical-align: middle; }
tbody tr:hover td { background: rgba(236,234,223,.045); }
td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
tr.picked td { background: rgba(226,164,76,.12); }

.tick { color: var(--muted); }

/* ---- risk semantics --------------------------------------------------- */

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11.5px/1 var(--sans); letter-spacing: .04em;
  padding: 5px 10px; border-radius: 999px; white-space: nowrap;
}
.pill.over { background: rgba(228,106,72,.18); color: #f0937a; border: 1px solid rgba(228,106,72,.42); }
.pill.near { background: rgba(226,164,76,.16); color: var(--gold); border: 1px solid rgba(226,164,76,.38); }
.pill.safe { background: rgba(143,184,166,.13); color: var(--safe); border: 1px solid rgba(143,184,166,.3); }
.pill.flag { background: rgba(11,16,22,.8); color: #cdd3d2; border: 1px solid var(--hair); }

/* The fall meter: how much of the drop a position has used up. */
.meter { position: relative; height: 7px; border-radius: 999px; background: rgba(236,234,223,.12); overflow: hidden; min-width: 84px; }
.meter i { position: absolute; inset: 0 auto 0 0; display: block; border-radius: 999px; background: var(--safe); }
.meter.near i { background: var(--near); }
.meter.over i { background: var(--edge); }

/* ---- app ------------------------------------------------------------- */

.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tabs button {
  font: 600 14px/1 var(--sans); color: var(--chalk-dim); cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--hair); border-radius: 999px; padding: 11px 18px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.tabs button:hover { color: var(--chalk); }
.tabs button.on { background: var(--chalk); color: var(--ink); border-color: var(--chalk); }

.field { display: block; margin-bottom: 14px; }
.field span { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 7px; }
input[type="text"], input[type="number"], select {
  width: 100%; font: 500 15px/1 var(--mono); color: var(--chalk);
  background: rgba(8,12,17,.6); border: 1px solid var(--hair); border-radius: 10px; padding: 13px 14px;
}
input:focus, select:focus { outline: 2px solid rgba(226,164,76,.5); outline-offset: 1px; }
select { font-family: var(--sans); }

.row2 { display: grid; grid-template-columns: 1.25fr .75fr; gap: 22px; align-items: start; }
.kv { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--hair-2); font-size: 14px; }
.kv:last-child { border-bottom: 0; }
.kv span { color: var(--muted); }
.kv b { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; }

.note {
  font-size: 13.5px; line-height: 1.55; color: var(--chalk-dim);
  background: rgba(236,234,223,.055); border-left: 2px solid var(--hair);
  padding: 12px 14px; border-radius: 0 10px 10px 0;
}
.note.warn { border-left-color: var(--edge); background: rgba(228,106,72,.1); color: #f2b9a7; }
.note.good { border-left-color: var(--safe); background: rgba(143,184,166,.1); }

.status { font-size: 13.5px; color: var(--muted); min-height: 20px; }
.status a { color: var(--gold); }

/* Small print does not stand on the photograph. The two nodes that failed the
   contrast audit on /app were both loose text over the ground — the live block
   number and the board's footnote — and the fix is not a darker page, it is a
   surface under them like everything else has. */
.onglass {
  display: inline-block;
  background: rgba(11, 16, 22, .68);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  border: 1px solid var(--hair-2);
  border-radius: 9px;
  padding: 7px 11px;
}

/* ---- footer ---------------------------------------------------------- */

footer { border-top: 1px solid var(--hair-2); padding: 44px 0 60px; background: rgba(8,12,17,.58); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
footer .cols { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; }
footer a { color: var(--chalk-dim); text-decoration: none; display: block; padding: 3px 0; font-size: 14px; }
footer a:hover { color: var(--chalk); }
footer h4 { font: 600 11.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }

/* ---- prose ----------------------------------------------------------- */

.prose { max-width: 68ch; }
.prose h2 { margin: 44px 0 14px; }
.prose h3 { margin: 30px 0 10px; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: .5em; }
.prose code {
  font: 500 13px/1.4 var(--mono); background: rgba(236,234,223,.1);
  padding: 2px 6px; border-radius: 5px; overflow-wrap: anywhere;
}

/* ---- mobile ---------------------------------------------------------- */

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .trio { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  /* Surfaces are denser on a phone. The thin, translucent glass that keeps the
     desktop page from reading flat has nothing to gain here — at 390px the
     content fills the screen and almost no ground is visible around it — while
     the photograph behind it is brighter per square inch, which is what pushed
     three nodes of small print just under 4.5:1. */
  :root {
    --surface: rgba(11, 16, 22, .80);
    --surface-2: rgba(18, 26, 34, .86);
    --surface-3: rgba(24, 34, 44, .92);
  }
  .row2 { grid-template-columns: 1fr; }
  .strip { grid-template-columns: repeat(2, 1fr); }
  section { padding: 52px 0; }

  .hero-card { padding: 30px 22px 24px; border-radius: 26px; }
  .hero-card, .edge-card, .section-head { background: rgba(11, 16, 22, .86); }
  .edge-card { padding: 22px 20px 18px; border-radius: 26px; }
  .section-head { padding: 22px 22px 24px; border-radius: 24px; }
  .wordmark { gap: 12px; margin-top: 20px; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .hero-stats .stat:last-child { grid-column: span 2; }

  .nav .wrap { width: min(100% - 22px, var(--page)); }
  .nav-inner { height: 58px; gap: 10px; padding: 0 8px 0 13px; }
  .nav-links { display: none; }
  .nav-x {
  display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: 999px; color: var(--chalk-dim);
  background: rgba(236,234,223,.07); border: 1px solid var(--hair-2);
}
.nav-x:hover { color: var(--chalk); background: rgba(236,234,223,.14); }
.nav-x svg { width: 15px; height: 15px; fill: currentColor; display: block; }

.nav-burger { display: grid; }
  .nav.open .nav-links {
    display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 68px;
    gap: 2px; padding: 12px; border-radius: 24px;
    background: rgba(9, 13, 19, .97); border: 1px solid var(--hair);
  }
  .nav.open .nav-links a { padding: 12px 14px; font-size: 16px; }
  .nav-right .hide-sm { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}