/* ============================================================
   textcomb — pre-launch landing
   3a/3b (holding) + 3c/3d (specimen), reworked for production.
   Palette rule from the brand spec: ONE accent per surface.
   Light = proofreader's red #B0452F. Dark = clay #D98B72.

   Theming is token-only: components never reference a raw theme
   color. The dark assignments appear twice — once for the
   explicit choice (data-theme), once for the OS preference — and
   the two blocks must stay identical.
   ============================================================ */

/* ---------- tokens ---------- */

:root {
  --bg:            #F4F3EE;   /* paper */
  --ink:           #24262B;   /* graphite */
  --accent:        #B0452F;   /* proofreader's red */
  --accent-hover:  #9A3B27;
  --on-accent:     #F4F3EE;

  --card:          #FFFFFF;
  --card-border:   transparent;
  --card-shadow:   0 2px 4px rgba(20,20,20,.05), 0 18px 50px rgba(20,20,20,.10);
  --card-shadow-s: 0 2px 4px rgba(20,20,20,.05), 0 14px 36px rgba(20,20,20,.10);
  --panel:         #EBEAE3;   /* tint band */

  --rule:          rgba(36,38,43,.14);
  --rule-strong:   rgba(36,38,43,.18);

  --ink-prose:     rgba(36,38,43,.78);
  --ink-body:      rgba(36,38,43,.80);
  --ink-q:         rgba(36,38,43,.65);
  --ink-meta:      rgba(36,38,43,.50);
  --ink-micro:     rgba(36,38,43,.45);
  --ink-faint:     rgba(36,38,43,.40);

  --field-bg:      #FFFFFF;
  --field-border:  rgba(36,38,43,.35);
  --placeholder:   rgba(36,38,43,.40);

  --chip-border:   rgba(36,38,43,.35);
  --chip-ink:      var(--ink);
  --stamp-border:  #B0452F;

  --comb-line:     rgba(36,38,43,.18);   /* unread rule */
  --comb-ink:      rgba(36,38,43,.55);   /* combed rule */

  /* 24px at the 390 frame → 56px at the 1440 frame */
  --gutter: clamp(24px, 12px + 3.1vw, 56px);

  color-scheme: light;
}

/* Explicit choice (the toggle). KEEP IN SYNC with the media block below. */
:root[data-theme="dark"] {
  --bg:            #24262B;   /* graphite */
  --ink:           #F4F3EE;   /* starlight */
  --accent:        #D98B72;   /* clay */
  --accent-hover:  #E29D86;
  --on-accent:     #24262B;

  --card:          #2A2C31;
  --card-border:   rgba(244,243,238,.12);
  --card-shadow:   none;
  --card-shadow-s: none;
  --panel:         #2A2C31;

  --rule:          rgba(244,243,238,.14);
  --rule-strong:   rgba(244,243,238,.18);

  --ink-prose:     rgba(244,243,238,.72);
  --ink-body:      rgba(244,243,238,.70);
  --ink-q:         rgba(244,243,238,.55);
  --ink-meta:      rgba(244,243,238,.45);
  --ink-micro:     rgba(244,243,238,.40);
  --ink-faint:     rgba(244,243,238,.35);

  --field-bg:      rgba(244,243,238,.04);
  --field-border:  rgba(244,243,238,.30);
  --placeholder:   rgba(244,243,238,.45);

  --chip-border:   rgba(217,139,114,.5);
  --chip-ink:      #D98B72;
  --stamp-border:  rgba(217,139,114,.6);

  --comb-line:     rgba(244,243,238,.22);
  --comb-ink:      rgba(244,243,238,.60);

  color-scheme: dark;
}

/* OS preference, no JavaScript required. Identical to the block above;
   an explicit data-theme="light" (the toggle) wins over it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #24262B;
    --ink:           #F4F3EE;
    --accent:        #D98B72;
    --accent-hover:  #E29D86;
    --on-accent:     #24262B;

    --card:          #2A2C31;
    --card-border:   rgba(244,243,238,.12);
    --card-shadow:   none;
    --card-shadow-s: none;
    --panel:         #2A2C31;

    --rule:          rgba(244,243,238,.14);
    --rule-strong:   rgba(244,243,238,.18);

    --ink-prose:     rgba(244,243,238,.72);
    --ink-body:      rgba(244,243,238,.70);
    --ink-q:         rgba(244,243,238,.55);
    --ink-meta:      rgba(244,243,238,.45);
    --ink-micro:     rgba(244,243,238,.40);
    --ink-faint:     rgba(244,243,238,.35);

    --field-bg:      rgba(244,243,238,.04);
    --field-border:  rgba(244,243,238,.30);
    --placeholder:   rgba(244,243,238,.45);

    --chip-border:   rgba(217,139,114,.5);
    --chip-ink:      #D98B72;
    --stamp-border:  rgba(217,139,114,.6);

    --comb-line:     rgba(244,243,238,.22);
    --comb-ink:      rgba(244,243,238,.60);

    color-scheme: dark;
  }
}

/* ---------- reset & base ---------- */

*, *::before, *::after { box-sizing: border-box; }

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  -webkit-font-smoothing: antialiased;
}

/* Spacing is set deliberately, never inherited from UA defaults. */
h1, h2, h3, p, figure, figcaption { margin: 0; }

a { color: inherit; }
a:hover { color: var(--accent); }

::selection { background: var(--accent); color: var(--on-accent); }

img, svg { display: block; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* Cross-fade the whole surface when the toggle flips. The class is
   held on <html> for ~450ms around the swap, then removed. */
html.theming,
html.theming *,
html.theming *::before,
html.theming *::after {
  transition:
    background-color .4s ease,
    border-color .4s ease,
    color .4s ease,
    fill .4s ease,
    stroke .4s ease,
    box-shadow .4s ease !important;
}

/* ---------- shell: full-bleed bands, measured content ---------- */

.shell {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- typography ---------- */

.h1, .h2 {
  font-family: 'Spectral', Georgia, serif;
  font-weight: 300;
  color: var(--ink);
  text-wrap: pretty;
}
.h1 em, .h2 em { font-style: italic; font-weight: 300; }

.lede {
  font-family: 'Spectral', Georgia, serif;
  font-weight: 400;
  color: var(--ink-prose);
  text-wrap: pretty;
}

.eyebrow {
  font-family: 'DM Mono', monospace;
  font-weight: 400;
  font-size: 9.5px;
  letter-spacing: .2em;
  color: var(--accent);
}

/* the wordmark's two-tone break, carried into running text:
   "text" in type color, "comb" in the surface's accent */
.brandtone { color: var(--accent); }

/* ---------- wordmark ---------- */

.wordmark {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.wordmark:hover { color: inherit; }
.wordmark__badge { width: 14px; height: 14px; }
.wordmark__badge path { stroke: var(--accent); }
.wordmark__text {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  letter-spacing: .04em;
  line-height: 1;
  color: var(--ink);
}
.wordmark__text em { font-style: normal; color: var(--accent); }

/* ---------- mode toggle: a chip naming the surface you'd switch to ---------- */

.mode {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--rule-strong);
  color: var(--ink-meta);
  font-family: 'DM Mono', monospace;
  font-weight: 500;
  font-size: 9px;
  line-height: 1;
  letter-spacing: .14em;
  padding: 8px;
  cursor: pointer;
}
.mode__swatch { width: 8px; height: 8px; background: var(--ink); flex: none; }
.mode__label { display: none; }
.mode:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- signup ---------- */

.signup { width: 100%; }

.signup__row { display: flex; flex-direction: column; gap: 10px; }

.signup__input {
  width: 100%;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: 0;
  padding: 14px 16px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.signup__input::placeholder {
  font-family: 'DM Mono', monospace;
  letter-spacing: .04em;
  color: var(--placeholder);
}
.signup__input:focus { border-color: var(--accent); }

.signup__button {
  background: var(--accent);
  color: var(--on-accent);
  font-family: 'DM Mono', monospace;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .16em;
  border: none;
  border-radius: 0;
  padding: 15px 24px;
  cursor: pointer;
  transition: background 130ms linear;
  white-space: nowrap;
}
.signup__button:hover { background: var(--accent-hover); }
.signup__button:active { background: var(--accent-hover); }
.signup__button[disabled] { cursor: default; opacity: .6; }

.signup__microline {
  font-family: 'DM Mono', monospace;
  font-size: 8.5px;
  letter-spacing: .12em;
  color: var(--ink-micro);
  margin-top: 12px;
}

.signup__status {
  font-family: 'DM Mono', monospace;
  font-size: 8.5px;
  letter-spacing: .12em;
  margin-top: 10px;
  min-height: 1em;
  color: var(--accent);
}
.signup__status:empty { margin-top: 0; min-height: 0; }

/* ---------- comb strip (holding hero): rules turn to ink as the comb passes ---------- */

.comb-strip {
  position: relative;
  width: 300px;
  max-width: 100%;
}
.comb-strip__lines {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.comb-strip__lines i { display: block; height: 2px; background: var(--comb-line); }
.comb-strip__lines i:nth-child(1) { width: 100%; }
.comb-strip__lines i:nth-child(2) { width: 93%; }
.comb-strip__lines i:nth-child(3) { width: 97%; }
.comb-strip__lines i:nth-child(4) { width: 76%; }

/* combed copy on top, revealed in step with the comb */
.comb-strip__lines--inked { position: absolute; inset: 0; }
.comb-strip__lines--inked i { background: var(--comb-ink); }
.comb-strip__lines--inked {
  animation: strip-ink 7s cubic-bezier(.65,.05,.35,.95) infinite alternate;
}

.comb-strip__comb {
  position: absolute;
  top: -8px;
  left: 0;
  animation: comb-glide 7s cubic-bezier(.65,.05,.35,.95) infinite alternate;
}
.comb-strip__comb svg { width: 28px; height: 28px; }
.comb-strip__comb path { stroke: var(--accent); }

/* travel = strip width − comb width, at any strip width */
@keyframes comb-glide { from { left: 0; } to { left: calc(100% - 28px); } }
@keyframes strip-ink {
  from { clip-path: inset(-10px 100% -10px 0); }
  to   { clip-path: inset(-10px 0 -10px 0); }
}

/* ---------- first-paint rise (JS-gated so no-JS never hides content) ---------- */

[data-js] .rise { opacity: 0; transform: translateY(14px); }
[data-js] body.is-loaded .rise {
  opacity: 1;
  transform: none;
  transition: opacity .75s ease, transform .75s cubic-bezier(.22,.61,.36,1);
}
[data-js] body.is-loaded .rise--2 { transition-delay: .09s; }
[data-js] body.is-loaded .rise--3 { transition-delay: .18s; }
[data-js] body.is-loaded .rise--4 { transition-delay: .27s; }

/* ============================================================
   HOLDING PAGE
   ============================================================ */

.holding {
  max-width: 1440px;
  margin-inline: auto;
  min-height: max(740px, 100svh);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px var(--gutter) 20px;
}

.holding__mast {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.holding__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 0;
}

.holding__title {
  font-size: clamp(31px, 23.2px + 2vw, 52px);
  line-height: 1.2;
  margin-top: 34px;
}

.holding__lede {
  font-size: clamp(16px, 14.9px + .29vw, 19px);
  line-height: 1.62;
  margin-top: 16px;
}

.holding .signup { margin-top: 30px; }

.holding__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: 'DM Mono', monospace;
  font-size: 8.5px;
  letter-spacing: .12em;
  color: var(--ink-meta);
}

/* ============================================================
   SPECIMEN LANDING
   ============================================================ */

/* — masthead — */
.masthead .shell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-block: 22px 0;
}
/* — hero — */
.hero .shell { padding-block: 52px 56px; }

.hero__title {
  font-size: clamp(37px, 29.2px + 2vw, 58px);
  line-height: 1.14;
}
.hero__lede {
  font-size: clamp(16.5px, 15.6px + .24vw, 19px);
  line-height: 1.65;
  margin-top: 18px;
}
.hero .signup { margin-top: 30px; }

/* — plate: the cited answer — */
.plate {
  background: var(--card);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow-s);
  padding: 24px 24px 22px;
  margin-top: 44px;
  max-width: 640px;   /* keeps the answer's measure readable when stacked */
  scroll-margin-top: 24px;
}
.plate__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.plate__title {
  font-family: 'DM Mono', monospace;
  font-size: 8.5px;
  letter-spacing: .16em;
  color: var(--ink-meta);
}
.plate__stamp {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--accent);
  border: 1px solid var(--stamp-border);
  padding: 2px 7px;
  white-space: nowrap;
}
.plate__question {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  line-height: 1.7;
  color: var(--ink-q);
  margin-top: 18px;
}
.plate__answer {
  position: relative;
  border-top: 1px solid var(--rule);
  margin-top: 14px;
  padding-top: 16px;
  font-family: 'Spectral', Georgia, serif;
  font-size: clamp(15.5px, 14.4px + .29vw, 18.5px);
  line-height: 1.82;
  color: var(--ink);
}
.plate__answer-live { position: relative; z-index: 1; text-wrap: pretty; }
.plate__note {
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  letter-spacing: .12em;
  color: var(--ink-faint);
  margin-top: 16px;
}

/* citation chip — no trailing space, the period hugs the chip */
.cite {
  font-family: 'DM Mono', monospace;
  font-size: 8.5px;
  letter-spacing: .04em;
  border: 1px solid var(--chip-border);
  color: var(--chip-ink);
  padding: 1px 6px;
  white-space: nowrap;
  vertical-align: 2px;
}

/* — the comb pass: unread rules are typeset into the answer —
   Default (no JS / after print) is the finished state; JS arms the
   sequence and .is-combed runs it once when the plate is seen. */

.plate__ghost {
  position: absolute;
  inset: 1.1em 0 .4em;
  display: flex;
  flex-direction: column;
  gap: 1.55em;
  overflow: hidden;
  opacity: 0;                      /* hidden unless armed */
  pointer-events: none;
}
.plate__ghost i { display: block; height: 2px; flex: none; background: var(--comb-line); }
.plate__ghost i:nth-child(1) { width: 100%; }
.plate__ghost i:nth-child(2) { width: 96%; }
.plate__ghost i:nth-child(3) { width: 99%; }
.plate__ghost i:nth-child(4) { width: 93%; }
.plate__ghost i:nth-child(5) { width: 100%; }
.plate__ghost i:nth-child(6) { width: 97%; }
.plate__ghost i:nth-child(7) { width: 88%; }
.plate__ghost i:nth-child(8) { width: 58%; }

.plate__comb {
  position: absolute;
  top: -7px;
  left: -16px;
  width: 32px;
  height: 32px;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}
.plate__comb svg { width: 100%; height: 100%; }
.plate__comb path { stroke: var(--accent); }

/* armed, waiting to be seen */
[data-js] .plate:not(.is-combed) .plate__answer-live { clip-path: inset(-6px 100% -6px -6px); }
[data-js] .plate:not(.is-combed) .plate__ghost { opacity: 1; }
[data-js] .plate:not(.is-combed) .plate__stamp { opacity: 0; }

/* the pass */
.plate.is-combed .plate__ghost { opacity: 1; animation: sweep-out 1.9s cubic-bezier(.7,.05,.3,.95) .4s both; }
.plate.is-combed .plate__answer-live { animation: sweep-in 1.9s cubic-bezier(.7,.05,.3,.95) .4s both; }
.plate.is-combed .plate__comb {
  animation:
    comb-ride 1.9s cubic-bezier(.7,.05,.3,.95) .4s both,
    comb-hide .3s ease 2.3s forwards;
}
.plate.is-combed .plate__stamp { animation: stamp .45s cubic-bezier(.3,1.5,.5,1) 2.3s both; }

@keyframes sweep-in {
  from { clip-path: inset(-6px 100% -6px -6px); }
  to   { clip-path: inset(-6px -6px -6px -6px); }
}
@keyframes sweep-out {
  from { clip-path: inset(0 0 0 0); }
  to   { clip-path: inset(0 0 0 100%); }
}
@keyframes comb-ride {
  from { opacity: 1; left: -16px; }
  to   { opacity: 1; left: calc(100% - 16px); }
}
@keyframes comb-hide { to { opacity: 0; } }
@keyframes stamp {
  from { opacity: 0; transform: scale(1.3); }
  to   { opacity: 1; transform: scale(1); }
}

/* — numbered sections (§) — */
.strip { border-top: 1px solid var(--rule); }
.strip--tint { background: var(--panel); border-top: none; }
.strip .shell {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding-block: 40px 46px;
}
.strip__grid { display: contents; }

.item { display: flex; flex-direction: column; gap: 8px; }
.item--ruled { border-top: 1px solid var(--rule-strong); padding-top: 12px; }
.item__label {
  font-family: 'DM Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--ink);
}
.item__body {
  font-family: 'Spectral', Georgia, serif;
  font-size: clamp(15.5px, 14.9px + .15vw, 17px);
  line-height: 1.6;
  color: var(--ink-body);
  text-wrap: pretty;
}

/* — footer — */
.footer { border-top: 1px solid var(--rule); }
.footer .shell {
  padding-block: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: 'DM Mono', monospace;
  font-size: 8.5px;
  letter-spacing: .12em;
  color: var(--ink-meta);
}

/* ============================================================
   DESKTOP — the 1440px frame
   ============================================================ */

@media (min-width: 900px) {
  .wordmark { gap: 10px; }
  .wordmark__badge { width: 16px; height: 16px; }
  .wordmark__text { font-size: 15px; }

  .mode { padding: 8px 12px; }
  .mode__label { display: inline; }

  /* The form takes a fixed measure (max-width, set per section) and the
     input flexes to fill what the button doesn't take — the pair always
     renders as one deliberate line, never a ragged wrap. */
  .signup__row { flex-direction: row; flex-wrap: wrap; gap: 12px; }
  .signup__input { flex: 1 1 240px; width: auto; min-width: 180px; }
  .signup__button { padding: 14px 24px; }
  .signup__microline { font-size: 9px; letter-spacing: .14em; margin-top: 16px; }
  .signup__status { font-size: 9px; letter-spacing: .14em; }
  .holding .signup__row { justify-content: center; }

  .comb-strip { width: 520px; }

  /* — holding — */
  .holding { min-height: max(880px, 100svh); padding: 44px var(--gutter) 36px; }
  .holding__center { padding: 56px 0; }
  .holding__title { margin-top: 48px; max-width: 15em; }
  .holding__lede { margin-top: 24px; max-width: 42ch; }
  .holding .signup { margin-top: 40px; max-width: 560px; }
  .holding__foot { font-size: 9.5px; letter-spacing: .14em; }

  /* — specimen — */
  .masthead .shell { padding-block: 36px 0; }

  .hero__lede { margin-top: 26px; max-width: 44ch; }
  .hero .signup { margin-top: 42px; max-width: 540px; }
  .hero .signup__microline { margin-top: 14px; }

  .plate { box-shadow: var(--card-shadow); padding: 34px 38px 30px; }
  .plate__title { font-size: 9.5px; letter-spacing: .18em; }
  .plate__stamp { font-size: 10px; letter-spacing: .14em; padding: 3px 9px; }
  .plate__question { font-size: 12px; margin-top: 24px; }
  .plate__answer { margin-top: 18px; padding-top: 20px; }
  .plate__note { font-size: 9px; letter-spacing: .14em; margin-top: 22px; }
  .cite { font-size: 9.5px; letter-spacing: .06em; padding: 2px 7px; }

  .strip .shell { padding-block: 64px 72px; gap: 0; }
  .eyebrow { font-size: 10px; }
  .strip__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 44px;
    margin-top: 34px;
  }
  .item { gap: 12px; }
  .item--ruled { padding-top: 16px; }
  .item__label { font-size: 11px; }

  .footer .shell { padding-block: 26px; font-size: 9.5px; letter-spacing: .14em; }
}

/* ============================================================
   WIDE — hero goes two-column only when both columns get a fair
   share. Proportional tracks (copy slightly larger, as in the
   1440 mockup: 636 / 620) so neither side can starve the other.
   ============================================================ */

@media (min-width: 1080px) {
  .hero .shell {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 72px);
    align-items: center;
    padding-block: 88px 96px;
  }
  .hero__copy { display: flex; flex-direction: column; align-items: flex-start; }
  .plate { margin-top: 0; }
}

/* ============================================================
   REDUCED MOTION — everything lands in its finished state
   ============================================================ */

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

  .comb-strip__comb { animation: none; }
  .comb-strip__lines--inked { display: none; }

  [data-js] .rise { opacity: 1; transform: none; transition: none; }

  [data-js] .plate .plate__answer-live { clip-path: none !important; animation: none !important; }
  [data-js] .plate .plate__ghost { display: none !important; }
  [data-js] .plate .plate__stamp { opacity: 1 !important; animation: none !important; }
  .plate__comb { display: none !important; }
}