/* Cellar Dash — One Night.
 *
 * The concept is docs/marketing/one-night.md and the form section there is the
 * brief this file answers. Shortest version: the homepage it replaces is eleven
 * bands in a 1140px column with alternating tints, which is the shape of every
 * SaaS page ever made. This is a magazine feature. One beat per screen, the
 * scroll IS the evening, and the page is slow on purpose because an evening is.
 *
 * Estate Light from tokens.css, same as the app and the current homepage. No
 * hexes here that aren't a token — a marketing page on a slightly different
 * parchment than the product is the drift this split was made to stop.
 *
 * Two things this file does NOT do, both deliberate:
 *   · no dark mode. The app has never had one; a marketing page that does is
 *     advertising a product that doesn't exist.
 *   · no screenshots of UI. The outputs — the wheel, the scorecard, the recap,
 *     the Muse piece — are typeset as themselves, in real selectable text. A
 *     screenshot of writing says "feature". Typeset writing says "this is what
 *     you get".
 */

html { scroll-behavior: smooth; }
body {
  background: var(--cd-page);
  color: var(--el-body);
  font-family: var(--cd-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── The measure ────────────────────────────────────────────────────────── */
/* Narrower than the old page's 1140 and off-centre by default. A centred
   column with a tinted band behind it is the SaaS tell; the asymmetry is most
   of what makes this read as editorial instead. */
.beat { position: relative; padding: clamp(84px, 13vh, 150px) 0; }
.hold { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px); }
.col  { max-width: 30em; }
.col.wide { max-width: 38em; }
.col.push { margin-left: auto; }          /* the asymmetry, switched on per beat */

/* ── Type ───────────────────────────────────────────────────────────────── */
h1, h2, .display { font-family: var(--cd-serif); color: var(--el-ink); font-weight: 400; }
h1 {
  font-size: clamp(44px, 8.2vw, 104px); line-height: 0.98; letter-spacing: -0.02em;
}
h2 {
  font-size: clamp(32px, 5.2vw, 62px); line-height: 1.04; letter-spacing: -0.014em;
}
.sub {
  font-size: clamp(18px, 2.1vw, 23px); line-height: 1.5; color: var(--el-body);
  margin-top: 1.1em; max-width: 26em;
}
/* The italic line under a beat. Always the quiet, specific one — the sentence
   that proves the loud one above it. */
.aside {
  font-family: var(--cd-serif); font-style: italic;
  font-size: clamp(17px, 1.9vw, 21px); line-height: 1.5;
  color: var(--el-muted); margin-top: 1.3em; max-width: 27em;
}
.mark {
  font-family: var(--cd-mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--el-accent2);
  font-feature-settings: "tnum"; display: block; margin-bottom: 22px;
}
.mark .n { color: var(--el-faint); margin-right: 1.2em; }

/* ── The rule ───────────────────────────────────────────────────────────── */
/* A real hairline between beats, full width. Not a tinted band — a rule is a
   magazine's punctuation and a tint is a slide deck's. */
.beat + .beat::before {
  content: ""; position: absolute; top: 0; left: clamp(20px, 5vw, 56px);
  right: clamp(20px, 5vw, 56px); height: 1px; background: var(--el-line);
}

/* ── Header and foot ────────────────────────────────────────────────────── */
.head {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px clamp(20px, 5vw, 56px);
}
/* No nav. The old page had Features / Compare / Pricing across the top, which
   is four doors out of an argument that has not started yet. There is one way
   out of this page before the foot and it is the brand mark. */
.head .brand {
  font-family: var(--cd-serif); font-size: 21px; color: var(--el-ink);
  text-decoration: none; letter-spacing: 0.01em;
}
.quiet-in {
  font-family: var(--cd-sans); font-size: 13px; font-weight: 600;
  color: var(--el-muted); background: none; border: 0; cursor: pointer;
  border-bottom: 1px solid transparent; padding: 2px 0;
}
.quiet-in:hover { color: var(--cd-accent); border-bottom-color: currentColor; }

/* ── Calls to action ────────────────────────────────────────────────────── */
/* Two on the page, after beat 5 and after beat 10, and that is the lot. The
   old homepage had six. */
.cta { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; }
.go {
  font-family: var(--cd-sans); font-size: 16px; font-weight: 600;
  padding: 14px 26px; border-radius: 999px; border: 1px solid var(--cd-act-bg);
  background: var(--cd-act-bg); color: var(--cd-act-ink); cursor: pointer;
}
.go:hover { background: var(--cd-act-bg-h); border-color: var(--cd-act-bg-h); }
.go:disabled {
  background: none; color: var(--el-muted); border-color: var(--el-line2); cursor: default;
}
.go-note { font-size: 14px; color: var(--el-muted); }

/* ── Image slots ────────────────────────────────────────────────────────── */
/* Every photograph on this page is a decision nobody has taken yet, so the
   slots carry their own brief: ratio, what is in frame, and the must-not. They
   are meant to look unfinished. A grey rectangle would let somebody sign off a
   page that has no pictures in it. */
.shot {
  position: relative; border: 1px dashed var(--el-line2); border-radius: 3px;
  background: repeating-linear-gradient(
    135deg, transparent 0 11px, var(--cd-accent-wash) 11px 12px);
  display: flex; align-items: center; justify-content: center;
  padding: 28px; text-align: center;
}
.shot[data-ratio="full"]  { aspect-ratio: 16 / 9; }
.shot[data-ratio="tall"]  { aspect-ratio: 4 / 5; }
.shot[data-ratio="wide"]  { aspect-ratio: 3 / 2; }
.shot-in { max-width: 32em; }
.shot-tag {
  font-family: var(--cd-mono); font-size: 10px; letter-spacing: 0.18em;
  /* --el-accent2, the same ink .mark uses and for the same reason: this is the
     smallest type on the page and the accent tuned for parchment only just
     clears AA at 11px. (--cd-accent-br is the brand hex, which is brighter and
     measured 2.42:1 here — it is for fills, not for ten-point captions.) */
  text-transform: uppercase; color: var(--el-accent2); display: block;
}
.shot-what {
  font-family: var(--cd-serif); font-size: clamp(19px, 2.4vw, 27px);
  line-height: 1.25; color: var(--el-ink); margin: 12px 0 10px;
}
.shot-not { font-size: 13.5px; line-height: 1.5; color: var(--el-muted); }
.shot-not b { color: var(--el-body); font-weight: 600; }

/* ── Specimens: the outputs, typeset ────────────────────────────────────── */
/* Beats 7, 8 and 9 print real product output. Until the evening is run and
   shot, they print a stand-in — and a stand-in on a marketing page has to be
   impossible to mistake for a claim, so it carries a rule and a label and the
   text says what it is. */
.specimen { position: relative; }
.specimen::before {
  content: attr(data-pending);
  position: absolute; top: -11px; left: 0;
  font-family: var(--cd-mono); font-size: 9.5px; letter-spacing: 0.17em;
  text-transform: uppercase; color: var(--cd-accent);
  background: var(--cd-page); padding: 0 9px 0 0;
}
.specimen[data-pending] { border-top: 1px solid var(--cd-accent); padding-top: 26px; }

/* The scorecard. A real table — names down the side, glasses as rows. */
.card-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--el-card); border: 1px solid var(--el-line);
  border-radius: 4px; padding: 20px clamp(14px, 2.4vw, 26px) 6px;
}
.card-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 330px; }
@media (max-width: 560px) {
  .card-table { font-size: 13px; }
  .card-table th, .card-table td { padding: 9px 8px; }
}
.card-table caption {
  text-align: left; font-family: var(--cd-mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--el-muted);
  padding-bottom: 14px;
}
.card-table th, .card-table td {
  padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--el-line);
  font-variant-numeric: tabular-nums;
}
.card-table thead th {
  font-family: var(--cd-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--el-muted); font-weight: 400;
}
.card-table tbody th { font-weight: 600; color: var(--el-ink); white-space: nowrap; }
.card-table .hit  { color: var(--el-ok-br); font-weight: 700; }
.card-table .miss { color: var(--el-muted); }
.card-table tr.rough td, .card-table tr.rough th { background: var(--cd-accent-wash); }
.card-table tbody tr:last-child td, .card-table tbody tr:last-child th { border-bottom: 0; }
/* The finding. Set as a finding, not as body copy — it is the single most
   persuasive sentence on the page because it is an actual output. */
.finding {
  font-family: var(--cd-serif); font-size: clamp(23px, 3.3vw, 38px);
  line-height: 1.22; color: var(--el-ink); margin-top: 38px; max-width: 18em;
}

/* The roast. Prose at size, with the other voices as quiet chips beside it. */
.roast {
  font-family: var(--cd-serif); font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.45; color: var(--el-ink); max-width: 20em;
}
.voices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; max-width: 30em; }
.voice {
  font-family: var(--cd-sans); font-size: 12.5px; font-weight: 600;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--el-line2); color: var(--el-muted); background: var(--el-card);
}
.voice.on { border-color: var(--cd-accent); color: var(--cd-accent); }

/* The Muse piece. Beat 9 is a held note: nothing else is allowed on screen. */
.keepsake {
  font-family: var(--cd-serif); font-size: clamp(21px, 2.7vw, 29px);
  line-height: 1.62; color: var(--el-ink); max-width: 19em;
  margin: 0 auto; text-align: left;
}
.keepsake p + p { margin-top: 1.15em; }

/* ── Beat 5: the wheel ──────────────────────────────────────────────────── */
/* The real component from flavor-wheel.js, drawing the real vocabulary off
   /api/flavor/wheel/wine. Not a picture of a wheel. The module ships geometry
   only and leaves presentation to each page on purpose, so the rules below are
   this page's own — they restate the app's three revealed states rather than
   inheriting them, because the app's stylesheet is four thousand lines a
   stranger should not download to read a headline. */
.wheel-stage { display: grid; gap: clamp(28px, 4vw, 54px); align-items: center; }
@media (min-width: 900px) { .wheel-stage { grid-template-columns: minmax(0, 1fr) 24em; } }

.fw { width: 100%; max-width: 460px; height: auto; display: block; margin: 0 auto; user-select: none; }
.fw-band { fill: var(--fam); fill-opacity: 0.9; stroke: none; }
.fw-famgroup.on .fw-band { fill-opacity: 1; }
.fw-fam {
  font-family: var(--cd-mono); font-size: 7.5px; letter-spacing: 0.07em;
  text-transform: uppercase; fill: var(--fam); fill-opacity: 0.95;
  text-anchor: middle; dominant-baseline: middle; pointer-events: none;
}
.fw-famgroup.on .fw-fam { font-weight: 700; }
.fw-cell path {
  fill: var(--fam); fill-opacity: 0.46;
  stroke: var(--cd-surface-2); stroke-width: 0.6;
  cursor: pointer; transition: fill-opacity 0.12s;
}
.fw-cell:hover path { fill-opacity: 0.72; }
.fw-cell text {
  font-family: var(--cd-sans); font-size: 8.5px; fill: var(--cd-on-surface-2);
  text-anchor: middle; dominant-baseline: middle; pointer-events: none;
}
.fw-cell.mine path { fill-opacity: 0.95; }
.fw-cell.mine text { fill: #fff; font-weight: 600; }
.fw-cell.strong path { stroke: #fff; stroke-width: 1.6; stroke-opacity: 0.85; }
.fw-cell.strong text { font-weight: 800; font-size: 9.5px; }
/* Known for, and you missed it: no fill, ringed in ink. */
.fw-cell.ref:not(.mine) path {
  fill: var(--cd-surface-2); fill-opacity: 0.96;
  stroke: var(--cd-text); stroke-width: 3; stroke-opacity: 1; stroke-linejoin: round;
}
.fw-cell.ref:not(.mine) text { fill: var(--cd-text); font-weight: 700; font-size: 9px; }
/* You both found it: your fill, ringed in the one green on the wheel. */
.fw-cell.both path {
  stroke: var(--el-ok-br); stroke-width: 3.6; stroke-opacity: 1; stroke-linejoin: round;
}
.fw-cell.both text { fill: #fff; font-weight: 800; }
.fw-cell:focus { outline: none; }
.fw-cell:focus-visible path { stroke: var(--cd-gold); stroke-width: 3; stroke-opacity: 1; }
.fw-count {
  font-family: var(--cd-serif); font-size: 30px; fill: var(--el-ink);
  text-anchor: middle; dominant-baseline: middle; pointer-events: none;
}
.fw-countlabel {
  font-family: var(--cd-mono); font-size: 8px; letter-spacing: 0.14em;
  text-transform: uppercase; fill: var(--el-muted);
  text-anchor: middle; dominant-baseline: middle; pointer-events: none;
}

/* The key to the three states. Written as sentences, because "both / yours /
   missed" in a legend is three words that explain nothing. */
.states { display: grid; gap: 15px; margin-top: 8px; }
/* `display: grid` outranks the UA rule behind the hidden attribute, so without
   this the three states are named before the reveal — on the one beat whose
   entire argument is that the answer comes after. */
.states[hidden] { display: none; }
.state { display: grid; grid-template-columns: 28px 1fr; gap: 13px; align-items: start; }
.chip { width: 26px; height: 18px; border-radius: 3px; margin-top: 3px; }
.chip.both { background: var(--cd-accent-wash2); border: 2.5px solid var(--el-ok-br); }
.chip.mine { background: var(--cd-accent-wash2); border: 1px solid var(--el-line2); }
.chip.ref  { background: var(--cd-surface-2); border: 2.5px solid var(--cd-text); }
.state p { font-size: 14.5px; line-height: 1.45; margin: 0; }
.state b { color: var(--el-ink); }

.wheel-try {
  font-family: var(--cd-mono); font-size: 10.5px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--el-muted); text-align: center;
  margin-top: 18px;
}

/* ── Beat 6: the turn ───────────────────────────────────────────────────── */
/* A grace note, and the spec says it must not be longer than one. Four
   glasses, one of them turned. Drawn, not photographed — the point is the
   record it leaves, and a photograph of a glass cannot show that. */
.glasses { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.glass {
  flex: 1 1 120px; min-width: 112px; border: 1px solid var(--el-line2); border-radius: 4px;
  background: var(--el-card); padding: 16px 14px; text-align: center;
}
.glass .no {
  font-family: var(--cd-mono); font-size: 10px; letter-spacing: 0.17em;
  text-transform: uppercase; color: var(--el-muted);
}
.glass .what { font-family: var(--cd-serif); font-size: 19px; color: var(--el-ink); margin-top: 7px; }
.glass.turned { border-color: var(--cd-accent); background: var(--cd-accent-wash); }
.glass.turned .what { color: var(--cd-accent); }
.glass .stamp {
  font-family: var(--cd-mono); font-size: 9px; letter-spacing: 0.1em;
  color: var(--el-muted); margin-top: 8px; display: block; min-height: 1.2em;
}

/* ── Beat 10 / the foot ─────────────────────────────────────────────────── */
.twice { display: grid; gap: clamp(22px, 3vw, 38px); }
@media (min-width: 820px) { .twice { grid-template-columns: 1fr 1fr; } }
.night { border-top: 2px solid var(--el-line2); padding-top: 18px; }
.night h3 {
  font-family: var(--cd-mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--el-muted); font-weight: 400; margin-bottom: 14px;
}

.foot { background: var(--cd-well-1); color: var(--cd-on-dark-2); padding: clamp(72px, 10vh, 118px) 0 58px; }
.foot h2 { color: var(--cd-on-dark); }
/* --gold-lt, not --cd-gold: the semantic gold is remapped onto the sienna
   accent, which on this near-black ground measured 3.23:1 and is under AA at
   16px. The literal gold is 13:1 and is the only thing on the page allowed to
   be bright. */
.foot .go { border-color: var(--gold-lt); background: var(--gold-lt); color: var(--cd-well-1); }
.foot .go:hover { background: var(--gold); border-color: var(--gold); }
.foot .go-note { color: var(--cd-on-dark-2); }
/* The one link out, and it is a line of small type rather than a button: a
   second button here competes with the sign-up. See "The Foot" in one-night.md
   — it is at the foot and not in the header because a header link stands open
   during beat 5, which is the beat that has to land. */
.long-answer { margin-top: 30px; font-size: 14.5px; color: var(--cd-on-dark-2); font-style: italic; }
.long-answer a { color: var(--gold-lt); }
.foot-legal {
  margin-top: 54px; padding-top: 22px; border-top: 1px solid rgba(246,239,226,0.17);
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
  font-size: 13px; color: var(--cd-on-dark-2);
}
.foot-legal a { color: var(--cd-on-dark-2); }

/* ── Motion, only as evidence ───────────────────────────────────────────── */
/* Nothing here is ambience. Each beat lifts once as it arrives, which is the
   page keeping its "one thing per screen" promise rather than decorating. */
.rise { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s ease; }
.rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { opacity: 1; transform: none; transition: none; }
}

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