/* Hallmark · shape: Marquee Hero · genre: editorial · theme: Ink (deal 3/3, seed fastskis-race-ski-log-887f·c3891c74·2026-11-11·r1) · job: subscribe · draw: 9a295c
 * hero: Corridor, set left · nav: edge-aligned · footer: newsletter-first · imagery: photographs, library 1, muted · signature: the pairs to test as a falling ranked list · ink: paper
 * axes: light/grotesk-sans/chromatic-teal · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4 · weakest: P, a waitlist page argues little; led with the real ranking reasons from the grind chart instead of feature claims */
/* Hallmark · waive 22 · ink and greys at zero chroma · a race notice is printed in plain black, as the Ink theme sets it */
@import url("./tokens.css");
@import url("./base.css");

:root { --nav-h: 72px; --radius-input: 10px; }
h1, h2, h3 { line-height: 1.02; }
body { color: var(--color-ink-2); }
h1, h2, h3, .wordmark { color: var(--color-ink); }
::selection { background: var(--color-accent-soft); color: var(--color-accent-soft-ink); }

/* Controls */
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-input); background: var(--color-ink); color: var(--color-paper); font: 600 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-ink-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
@media (prefers-reduced-motion: reduce) { .btn { transition: background-color var(--dur-short) linear; } }

a { font-weight: 600; color: var(--color-ink); text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--color-accent); }
a:active { color: var(--color-ink-2); }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

.num { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; }
.fill { padding: 0 0.25em; border: 1px dashed color-mix(in oklch, var(--color-muted) 70%, transparent); border-radius: 3px; color: var(--color-muted); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Nav */
.nav { height: var(--nav-h); display: flex; align-items: center; }
.nav .container { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-lg); }
.wordmark { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); letter-spacing: var(--tracking-display); line-height: 1; text-decoration: none; }
.nav__links { display: flex; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.nav__links a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }

/* Sign-up */
.signup { width: min(100%, 30rem); text-align: left; }
.signup label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.signup__row { display: flex; gap: var(--space-xs); margin-top: var(--space-xs); }
.signup input { flex: 1; min-width: 0; min-height: 48px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); outline: 2px solid transparent; outline-offset: -3px; }
.signup input:focus-visible { outline-color: var(--color-focus); }
.signup input[aria-invalid] { border-color: var(--color-error); }
.signup input:disabled { opacity: 0.55; cursor: not-allowed; }
.signup__help { min-height: 1lh; margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }

/* Hero: Corridor */
.hero { min-height: calc(100dvh - var(--nav-h)); display: grid; align-content: center; padding-block: var(--space-lg) var(--space-2xl); }
.hero__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: start; }
.hero h1 { grid-column: 1 / -1; max-width: none; font-size: clamp(2.5rem, 10vw, 9rem); line-height: 1; }
.hero .lead { grid-column: 1 / span 5; max-width: 24ch; color: var(--color-ink); }
.hero .signup { grid-column: 8 / -1; width: 100%; }

@media (max-width: 60rem) {
  .hero { min-height: 0; padding-block: var(--space-2xl); }
  .hero .lead, .hero .signup { grid-column: 1 / -1; }
  .hero .signup { width: min(100%, 30rem); }
}
@media (max-width: 40rem) {
  .nav__links { gap: var(--space-md); }
  .signup__row { flex-direction: column; }
  .signup .btn { justify-content: center; }
}

/* Shared section pieces */
.cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
.head { align-items: end; row-gap: var(--space-md); }
.head h2 { grid-column: 1 / span 7; }
.head .lead { grid-column: 9 / -1; }
.caption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }

/* Test list: the waterfall */
.picks-section { padding-top: var(--section-gap-s); }
.picks { margin: var(--space-2xl) 0 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-ink); }
.pick { align-items: baseline; row-gap: var(--space-xs); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.pick__score { grid-column: 1 / span 2; }
.pick__pair { grid-column: 3 / span 6; max-width: none; font-size: var(--pick-size); line-height: 1; }
.pick__why { grid-column: 9 / -1; }
.pick__why .num { display: block; color: var(--color-ink); }
.pick:nth-child(1) { --pick-size: clamp(3.5rem, 8vw, 7rem); }
.pick:nth-child(2) { --pick-size: clamp(2.75rem, 5.6vw, 5rem); }
.pick:nth-child(3) { --pick-size: clamp(2.25rem, 4vw, 3.5rem); }
.pick:nth-child(4) { --pick-size: clamp(1.75rem, 2.8vw, 2.5rem); }

/* Maker's note and the plate */
.note-section { padding-top: var(--section-gap-l); }
.statement { max-width: 22ch; font-family: var(--font-display); font-size: var(--text-display-s); font-weight: 700; color: var(--color-ink); letter-spacing: var(--tracking-display); line-height: 1.08; text-wrap: balance; }
.note-text { margin-top: var(--space-lg); max-width: 46ch; color: var(--color-ink); }
.byline { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-ink-2); }
.plate { aspect-ratio: 21 / 9; margin: var(--space-2xl) 0 0; border-radius: var(--radius-card); }

/* The log: an index on a paper step */
.log-section { margin-top: var(--section-gap); padding-block: var(--section-gap-s); background: var(--color-paper-2); }
.log { width: 100%; margin-top: var(--space-2xl); border-collapse: collapse; border-top: var(--rule-hair) solid var(--color-ink); }
.log th, .log td { padding: var(--space-md) var(--space-md) var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule); text-align: left; vertical-align: baseline; }
.log th { font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); white-space: nowrap; }
.log td:nth-child(2) { font-weight: 600; color: var(--color-ink); }
.log tbody tr:first-child td { padding-block: var(--space-lg); font-size: var(--text-lg); }
.log .num { font-size: 0.9375em; }

/* Price */
.price-section { padding-top: var(--section-gap); }
.price-section .cols { row-gap: var(--space-xl); }
.price__head { grid-column: 1 / span 5; }
.price__amount { margin-top: var(--space-xl); color: var(--color-ink); font-family: var(--font-display); font-size: var(--text-display-s); font-weight: 700; letter-spacing: var(--tracking-display); line-height: 1.1; font-variant-numeric: tabular-nums; }
.price__amount--second { margin-top: var(--space-lg); }
.price__terms { margin-top: var(--space-xs); color: var(--color-ink-2); }
.included { grid-column: 7 / -1; margin: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.included > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); column-gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.included dt { font-family: var(--font-display); font-weight: 700; color: var(--color-ink); font-size: var(--text-title); letter-spacing: var(--tracking-display); line-height: 1.2; }
.included dd { margin: 0; }

/* Close and footer */
.close { margin-top: var(--section-gap-l); padding-block: var(--space-3xl) var(--space-xl); border-top: var(--rule-hair) solid var(--color-ink); }
.close .cols { align-items: end; row-gap: var(--space-xl); }
.close h2 { grid-column: 1 / span 6; }
.close .signup { grid-column: 8 / -1; width: 100%; }
.colophon { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-sm) var(--space-lg); margin-top: var(--space-3xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-ink-2); }
.colophon p { max-width: none; }

@media (max-width: 60rem) {
  .head h2, .head .lead, .pick__score, .pick__pair, .pick__why, .price__head, .included, .close h2, .close .signup { grid-column: 1 / -1; }
  .pick { row-gap: var(--space-sm); }
  .plate { aspect-ratio: 4 / 3; }
  .close .signup { width: min(100%, 30rem); }
}
@media (max-width: 40rem) {
  .included > div { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2xs); }
  .log thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .log tr { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--space-md); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .log td, .log tbody tr:first-child td { padding: 0; border: 0; font-size: var(--text-md); }
  .log td:nth-child(2) { grid-column: 2; }
  .log td:nth-child(n+3) { grid-column: 2; color: var(--color-ink-2); }
  .log td[data-label]::before { content: attr(data-label) " "; color: var(--color-muted); }
}