/* Cellar Dash — The Long Answer.
 *
 * Concept: docs/marketing/the-long-answer.md. It is the companion to One Night
 * and the deliberate inverse of it: that page is spacious, editorial and slow,
 * and this one is dense, precise and unglamorous. Close-set small type, real
 * tables, tight rules, no photography, no motion, no mockups.
 *
 * The contrast IS the argument. It says: we know when to perform and when to
 * stop. A second page that kept performing would confirm the suspicion that the
 * first one was all there was.
 *
 * Estate Light from tokens.css, same as everything else. Nothing here is a hex
 * that isn't a token.
 */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--cd-page);
  color: var(--el-body);
  font-family: var(--cd-sans);
  font-size: 15.5px;
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
  /* Numbers typeset as numbers, everywhere on this page. 100. Six months.
     $1.99. Eight. A page whose argument is "here are the figures" cannot set
     them in proportional digits that wobble down a column. */
  font-variant-numeric: tabular-nums;
}

.hold { max-width: 860px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 44px); }

/* ── Head ───────────────────────────────────────────────────────────────── */
.head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; padding: 24px 0 0;
}
.head .brand {
  font-family: var(--cd-serif); font-size: 20px; color: var(--el-ink); text-decoration: none;
}
.head .back { font-size: 13px; color: var(--el-muted); text-decoration: none; }
.head .back:hover { color: var(--cd-accent); }

.lede { padding: clamp(44px, 7vw, 76px) 0 0; }
.lede h1 {
  font-family: var(--cd-serif); font-weight: 400; color: var(--el-ink);
  font-size: clamp(32px, 5vw, 50px); line-height: 1.08; letter-spacing: -0.012em;
  max-width: 15em;
}
.lede .said {
  margin-top: 22px; font-family: var(--cd-serif); font-style: italic;
  font-size: clamp(17px, 2vw, 20px); color: var(--el-muted); max-width: 32em;
}

/* ── The index: eight questions, in the order they get asked ────────────── */
/* This list is half the point of the page. It gets sent as the answer to a
   specific question, so every row is a deep link. */
.spine { margin: clamp(38px, 6vw, 62px) 0 0; border-top: 2px solid var(--el-line2); }
.spine ol { list-style: none; counter-reset: q; }
.spine li { counter-increment: q; border-bottom: 1px solid var(--el-line); }
.spine a {
  display: flex; gap: 16px; align-items: baseline;
  padding: 13px 2px; text-decoration: none; color: var(--el-ink);
}
.spine a:hover { color: var(--cd-accent); }
.spine a::before {
  content: counter(q, decimal-leading-zero);
  font-family: var(--cd-mono); font-size: 11.5px; color: var(--el-faint);
  letter-spacing: 0.08em; min-width: 2.4em;
}
.spine .q { font-size: 16.5px; font-weight: 600; }
.spine .why {
  margin-left: auto; font-family: var(--cd-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--el-accent2);
  white-space: nowrap; align-self: center;
}
@media (max-width: 620px) { .spine .why { display: none; } }

/* ── Sections ───────────────────────────────────────────────────────────── */
.q-sec { padding: clamp(40px, 6vw, 62px) 0 0; scroll-margin-top: 18px; }
.q-sec > .no {
  font-family: var(--cd-mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--el-faint); display: block; margin-bottom: 10px;
}
.q-sec h2 {
  font-family: var(--cd-serif); font-weight: 400; color: var(--el-ink);
  font-size: clamp(25px, 3.4vw, 34px); line-height: 1.12; letter-spacing: -0.01em;
  max-width: 17em;
}
.q-sec .claim {
  margin-top: 20px; font-size: 17px; font-weight: 600; color: var(--el-ink);
  max-width: 30em;
}
.q-sec p { max-width: 34em; }
.q-sec p + p { margin-top: 13px; }
.q-sec b, .q-sec strong { color: var(--el-ink); font-weight: 600; }

/* A fact with a number in it, set apart from the prose around it. */
.facts { margin-top: 22px; border-top: 1px solid var(--el-line); }
.facts div {
  display: grid; grid-template-columns: 11em 1fr; gap: 6px 20px;
  padding: 11px 0; border-bottom: 1px solid var(--el-line); align-items: baseline;
}
@media (max-width: 560px) { .facts div { grid-template-columns: 1fr; } }
.facts dt, .facts .k {
  font-family: var(--cd-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--el-muted);
}
/* Capped: at the page's full 860px this column ran to about a hundred
   characters, which is past readable even for something meant to feel like a
   specification. Dense is the brief; unreadable is not. */
.facts dd, .facts .v { font-size: 15px; color: var(--el-body); max-width: 40em; }
.facts .v b { color: var(--el-ink); }

/* ── Section 5 gets the air ─────────────────────────────────────────────── */
/* The only place this page relaxes, and the contrast is what makes it land. */
#trust {
  margin-top: clamp(44px, 7vw, 76px);
  padding: clamp(40px, 6vw, 64px) 0 clamp(8px, 2vw, 20px);
  border-top: 2px solid var(--el-line2);
  border-bottom: 2px solid var(--el-line2);
}
#trust h2 { font-size: clamp(28px, 4.2vw, 42px); }
#trust .claim { font-size: 19px; max-width: 24em; }
.mech { margin-top: 30px; display: grid; gap: 26px; }
.mech > div { max-width: 33em; }
.mech h3 {
  font-family: var(--cd-sans); font-size: 14px; font-weight: 700; color: var(--el-ink);
  letter-spacing: 0.01em; margin-bottom: 5px;
}
.mech p { margin: 0; }

/* ── Cost ───────────────────────────────────────────────────────────────── */
.prices { margin-top: 24px; border-top: 1px solid var(--el-line); }
.price {
  display: grid; grid-template-columns: 9em 1fr; gap: 4px 20px;
  padding: 15px 0; border-bottom: 1px solid var(--el-line); align-items: baseline;
}
@media (max-width: 560px) { .price { grid-template-columns: 1fr; } }
.price .fig {
  font-family: var(--cd-serif); font-size: 26px; color: var(--el-ink); line-height: 1;
}
.price .fig small { font-family: var(--cd-sans); font-size: 12.5px; color: var(--el-muted); }
.price p { margin: 0; font-size: 14.5px; }

/* The justifier's line. Set large — it is the one sentence somebody repeats
   out loud to another person. */
.repeatable {
  margin-top: 34px; font-family: var(--cd-serif);
  font-size: clamp(22px, 3.2vw, 34px); line-height: 1.22; color: var(--el-ink);
  max-width: 17em;
}

/* ── Foot ───────────────────────────────────────────────────────────────── */
/* One CTA, at the very bottom, small. Anyone who reaches it is already decided;
   a big button here reads as desperation. */
.foot {
  margin-top: clamp(44px, 7vw, 72px); padding: 34px 0 54px;
  border-top: 1px solid var(--el-line);
  display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center;
}
.start {
  font-family: var(--cd-sans); font-size: 14px; font-weight: 600;
  padding: 9px 20px; border-radius: 999px; cursor: pointer;
  background: var(--cd-act-bg); border: 1px solid var(--cd-act-bg); color: var(--cd-act-ink);
}
.start:hover { background: var(--cd-act-bg-h); border-color: var(--cd-act-bg-h); }
.foot .note { font-size: 13.5px; color: var(--el-muted); }
.foot nav { margin-left: auto; display: flex; gap: 18px; font-size: 13px; }
.foot nav a { color: var(--el-muted); }
@media (max-width: 620px) { .foot nav { margin-left: 0; width: 100%; } }

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--cd-accent); outline-offset: 3px; border-radius: 3px;
}