/* Riffle — industrial-product, light inversion.
 *
 * Ground is warm and a few percent off white. One accent, rust, spent on roughly two percent of
 * pixels and only ever to mean "this is late". Panels lift five percent, never more. No gradient
 * anywhere. Two type registers — display 44–64px against micro-caps at 10px — and the table,
 * which is data and stays quiet in between.
 *
 * --hot is a graphics-and-large-display colour: at 3.7:1 it fails AA for body text. Small text
 * that has to be rust uses --hot-ink instead, which clears 5.4:1. The contrast audit in
 * scripts/ui-check.mjs fails the build if that slips.
 */

:root {
  --paper:   #EDEBE4;
  --lift:    #F7F6F1;
  --sunk:    #E7E4DB;
  --ink:     #16150F;
  --quiet:   #5C5A4E;
  --rule:    #D5D2C6;
  --hair:    #E4E1D6;
  --ghost:   #E4E1D8;
  --hot:     #D4491A;
  --hot-ink: #A8380F;
  --hot-wash:#F6E7E0;

  --sans: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;

  --rail: 54px;
  --pad: 46px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }

/* ── the margin is UI ───────────────────────────────────────────────────────────────── */

.rail {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--rail);
  border-right: 1px solid var(--rule);
  background: var(--paper);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
}
.rail-mark {
  writing-mode: vertical-rl;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
}
.rail-tag {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--quiet);
}

.page { margin-left: var(--rail); }
.wrap { max-width: 1240px; padding: 0 var(--pad); margin: 0 auto; }

/* ── type registers ─────────────────────────────────────────────────────────────────── */

.kicker, .links a, .btn, th, .fig-key, .price-key, .foot-key {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
}
.kicker { color: var(--quiet); display: block; }

h1 {
  font-size: clamp(34px, 3.8vw, 52px);
  line-height: 1.0;
  letter-spacing: -0.032em;
  font-weight: 700;
  margin: 14px 0 18px;
}
h1 em { font-style: normal; color: var(--hot); }

h2 {
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 0;
}

.lede { color: var(--quiet); font-size: 14.5px; line-height: 1.68; margin: 0 0 26px; max-width: 40ch; }

/* ── controls ───────────────────────────────────────────────────────────────────────── */

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

.btn {
  display: inline-block;
  font-family: var(--sans);
  padding: 15px 24px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  text-decoration: none;
  cursor: pointer;
  border-radius: 0;
  line-height: 1;
}
.btn:hover { background: #2B2921; }
.btn.outline { background: none; color: var(--ink); border-color: var(--rule); }
.btn.outline:hover { border-color: var(--ink); }
.btn.small { padding: 11px 16px; }

/* ── hero: the pitch holds still, the artefacts move ────────────────────────────────── */

/* One hairline across both columns where the hero ends, so the change of ground reads as a
   seam rather than as the page running out. */
.hero { display: grid; grid-template-columns: 0.94fr 1.06fr; border-bottom: 1px solid var(--rule); }

.pitch {
  /* The wordmark is meant to run off the edge of its own column, not across the artefacts.
     Clipping here is what makes the bleed read as deliberate rather than as a z-index mistake. */
  overflow: hidden;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  min-height: 620px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 44px 0 var(--pad);
  position: -webkit-sticky;
  position: sticky;
}
.pitch > * { position: relative; z-index: 2; }
.wordmark {
  position: absolute;
  bottom: 44px;
  left: 34px;
  font-size: clamp(96px, 12vw, 168px);
  line-height: 0.8;
  font-weight: 700;
  letter-spacing: -0.05em;
  color: var(--ghost);
  user-select: none;
  pointer-events: none;
  z-index: 0;
}

.topnav {
  position: absolute;
  top: 26px;
  right: 44px;
  display: flex;
  gap: 22px;
  align-items: center;
  z-index: 3;
}
.links a { color: var(--quiet); text-decoration: none; }
.links { display: flex; gap: 22px; }
.links a:hover { color: var(--ink); }

.feed {
  border-left: 1px solid var(--rule);
  background: var(--sunk);
  padding: 84px 44px 84px;
  display: grid;
  gap: 46px;
  align-content: center;
}

/* ── the artefacts ──────────────────────────────────────────────────────────────────── */

.doc {
  background: var(--lift);
  border: 1px solid var(--rule);
  padding: 24px 26px;
  box-shadow: 0 1px 0 #DCD9CE;
}
.doc.step { margin-left: 30px; }
.doc.back { margin-right: 30px; }

.doc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  border-bottom: 1px solid var(--ink); padding-bottom: 11px; flex-wrap: wrap; }
.doc-head b { font-size: 19px; letter-spacing: -0.02em; }
.doc-head span { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--quiet); }
.doc-head .late { color: var(--hot-ink); font-weight: 700; }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; padding: 12px 8px 7px 0; color: var(--quiet); white-space: nowrap; }
th.r, td.r { text-align: right; }
td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--hair); font-size: 12.5px; }
td.m { font-family: var(--mono); font-variant-numeric: tabular-nums; }
tr.hot td:first-child, tr.hot td.cover { color: var(--hot-ink); }
tr.why td { border-bottom: 1px solid var(--hair); font-size: 10.5px; color: var(--quiet); padding: 0 0 9px; }

.bar { margin-top: 16px; height: 3px; background: #E0DCD0; position: relative; }
.bar i { position: absolute; inset: 0 auto 0 0; background: var(--hot); }

.doc-foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 13px; gap: 16px; }
.doc-foot span { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--quiet); }
.doc-foot b { font-size: 24px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.note { font-size: 10.5px; color: var(--quiet); margin: 10px 0 0; line-height: 1.5; }

/* mail artefact */
.mail-head { border-bottom: 1px solid var(--hair); padding-bottom: 10px; margin-bottom: 12px; }
.mail-head dl { margin: 0; display: grid; grid-template-columns: 74px 1fr; gap: 4px 12px; font-size: 11.5px; }
.mail-head dt { color: var(--quiet); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding-top: 2px; }
.mail-head dd { margin: 0; }
.mail-body { font-family: var(--mono); font-size: 11.5px; line-height: 1.75; white-space: pre-wrap; margin: 0; }

/* ── numbered index ─────────────────────────────────────────────────────────────────── */

section { padding: 84px 0 0; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px;
  border-bottom: 1px solid var(--ink); padding-bottom: 18px; flex-wrap: wrap; }
.section-head p { margin: 0; color: var(--quiet); font-size: 14px; max-width: 46ch; }

.idx .row { display: grid; grid-template-columns: 56px 1fr 1.35fr 130px; gap: 24px;
  padding: 20px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.idx i { font-style: normal; font-size: 10px; letter-spacing: 0.16em; color: var(--quiet); }
.idx h3 { margin: 0; font-size: 19px; letter-spacing: -0.02em; }
.idx p { margin: 0; color: var(--quiet); font-size: 13.5px; line-height: 1.6; }
.idx em { font-style: normal; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--quiet); text-align: right; }

/* ── the messy-files section ────────────────────────────────────────────────────────── */

.reads { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; margin-top: 8px; }
.reads div { padding: 22px 0; border-bottom: 1px solid var(--rule); }
.reads h3 { margin: 0 0 7px; font-size: 15px; letter-spacing: -0.01em; }
.reads p { margin: 0; color: var(--quiet); font-size: 13.5px; line-height: 1.62; }

/* ── pricing ────────────────────────────────────────────────────────────────────────── */

.plans { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.plan { padding: 26px 26px 26px 0; border-right: 1px solid var(--rule); }
.plan:last-child { border-right: 0; }
.price-key { color: var(--quiet); }
.price { font-size: 44px; letter-spacing: -0.03em; font-weight: 700; margin: 12px 0 2px;
  font-variant-numeric: tabular-nums; }
.price small { font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--quiet); }
.plan .cap { font-size: 13px; color: var(--quiet); margin: 0 0 16px; }
.plan ul { margin: 0 0 20px; padding: 0; list-style: none; }
.plan li { font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--hair); color: var(--quiet); }
.plan li::before { content: "·"; margin-right: 8px; color: var(--ink); }

.billing-note { margin-top: 22px; font-size: 12.5px; color: var(--quiet); max-width: 62ch; }

/* ── faq ────────────────────────────────────────────────────────────────────────────── */

.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); padding: 18px 0; }
.faq summary { cursor: pointer; font-size: 16px; letter-spacing: -0.01em; font-weight: 700;
  list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--quiet); font-weight: 400; }
.faq details[open] summary::after { content: "−"; }
.faq p { color: var(--quiet); font-size: 13.5px; line-height: 1.68; margin: 12px 0 0; max-width: 74ch; }

/* ── close ──────────────────────────────────────────────────────────────────────────── */

.close { margin-top: 96px; border-top: 1px solid var(--ink); padding: 46px 0 0;
  display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.close h2 { max-width: 16ch; }

footer { margin-top: 72px; border-top: 1px solid var(--rule); padding: 22px 0 60px;
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot-key { color: var(--quiet); }
footer nav { display: flex; gap: 20px; }
footer a { color: var(--quiet); font-size: 12px; text-decoration: none; }
footer a:hover { color: var(--ink); }

/* ── responsive ─────────────────────────────────────────────────────────────────────── */

@media (max-width: 1020px) {
  :root { --rail: 34px; --pad: 22px; }
  .hero { grid-template-columns: 1fr; }
  .pitch { position: static; height: auto; padding: 76px var(--pad) 46px; min-height: 0; }
  .wordmark { display: none; }
  .topnav { position: static; margin-bottom: 24px; justify-content: flex-end; }
  .feed { border-left: 0; border-top: 1px solid var(--rule); padding: 34px var(--pad); }
  .doc.step, .doc.back { margin: 0; }
  .plans, .reads { grid-template-columns: 1fr; }
  .plan { border-right: 0; border-bottom: 1px solid var(--rule); padding-right: 0; }
  .idx .row { grid-template-columns: 40px 1fr; }
  .idx em { display: none; }
  .close { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}