/* Hallmark · shape: almanac page, ruled sections on paper · genre: editorial · theme: custom (DESIGN.md, Ink) · job: try · idea: "a countdown app shown as the printed page it is" · vibe: "warm paper, black ink, one spot colour"
 * paper: #F6F1E9 · accent: #D2491F · display: Fraunces · body: Inter · hero: head and both store actions left, an iPhone and an Android phone rising from a sunken-paper stage right · nav: wordmark left, language and get-the-app right, closed by a heavy ink rule · footer: wordmark over a hairline row of links · imagery: the product, cut from the real store screenshots · signature: a live serif numeral counting the days to New Year over the app's tick-marked ruler
 * axes: paper/serif/terracotta · posture: split · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4 · weakest: E, phones are cut from framed store art, so they run off the bottom; every phone sits on a band edge so the cut reads as intended */
@import url("./tokens.css");
@import url("./base.css");

body { font-size: 1.0625rem; }


/* Masthead: the app's Home header, a wordmark closed off by a heavy ink rule. */
.mast { border-bottom: var(--rule-heavy) solid var(--color-ink); }
.mast .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 72px; }
.wordmark { font-family: var(--font-display); font-weight: 400; font-variation-settings: "opsz" 24; font-size: 1.625rem; letter-spacing: -0.02em; text-decoration: none; color: var(--color-ink); }
.mast nav { display: flex; align-items: center; gap: var(--space-lg); font-size: var(--text-sm); }
.mast nav a { color: var(--color-ink-2); text-decoration: none; padding: var(--space-xs) 0; }
.mast nav a:hover { color: var(--color-ink); text-decoration: underline; }
.mast nav a.get { color: var(--color-ink); font-weight: 600; }

/* Buttons: the app's InkButton and outline button. */
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--space-lg); border-radius: var(--radius-card); font-family: var(--font-body); font-weight: 600; font-size: var(--text-md); text-decoration: none; white-space: nowrap; border: 1px solid var(--color-ink); transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn-primary { background: var(--color-ink); color: var(--color-paper); }
.btn-primary:hover { background: var(--color-ink-2); border-color: var(--color-ink-2); }
.btn-primary:active { transform: translateY(1px); }
.btn-soon { background: transparent; color: var(--color-ink-2); border-color: var(--color-rule); cursor: default; }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; transition: none; }
.fine { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }

/* Hero */
.hero .container { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: end; padding-top: var(--space-2xl); }
.hero-text { grid-column: 1 / span 6; align-self: center; padding-bottom: var(--space-2xl); }
.hero h1 { font-weight: 300; font-variation-settings: "opsz" 144; font-size: clamp(3rem, 5.4vw + 0.5rem, 5.5rem); line-height: 0.98; letter-spacing: -0.035em; }
.hero .lead { margin: var(--space-lg) 0 var(--space-xl); font-size: var(--text-lead); color: var(--color-ink-2); max-width: 30ch; }
.stage { grid-column: 7 / -1; position: relative; height: clamp(420px, 44vw, 600px); background: var(--color-paper-3); border-radius: 20px 20px 0 0; overflow: hidden; }
.stage img { position: absolute; bottom: 0; }
.stage .p1 { left: 9%; width: 46%; }
.stage .p2 { right: 7%; width: 40%; bottom: 0; }

/* Section headings */
.section { padding-block: var(--section-gap-s); }
.section h2 { font-weight: 400; font-variation-settings: "opsz" 48; font-size: var(--text-section); line-height: 1.05; letter-spacing: -0.025em; }
.section .body { margin-top: var(--space-md); color: var(--color-ink-2); font-size: var(--text-lead); max-width: 34ch; }

/* Signature: the live numeral and the ruler */
.time .container { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: end; }
.time .count { grid-column: 1 / span 7; }
.time .words { grid-column: 9 / -1; padding-bottom: var(--space-lg); }
.numeral { display: block; font-family: var(--font-display); font-weight: 300; font-variation-settings: "opsz" 144; font-size: clamp(8rem, 20vw, 17rem); line-height: 0.8; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; min-height: 0.8em; }
.until { margin-top: var(--space-md); font-family: var(--font-display); font-style: italic; font-weight: 300; font-variation-settings: "opsz" 48; font-size: clamp(1.75rem, 2.4vw + 0.75rem, 2.75rem); line-height: 1.1; color: var(--color-ink-2); }
.until b { font-style: normal; font-weight: 400; color: var(--color-ink); display: block; }
.ruler { position: relative; margin-top: var(--space-xl); height: 24px; max-width: 560px; --p: 0.5; }
.ruler .line { position: absolute; left: 0; right: 0; top: 11px; height: 1px; background: var(--color-ink); }
.ruler .tick { position: absolute; top: 7px; width: 1px; height: 9px; background: var(--color-ink); }
.ruler .tick.long { top: 4px; height: 15px; }
.ruler .done { position: absolute; left: 0; right: 0; top: 10px; height: 3px; background: var(--color-accent); transform-origin: left center; transform: scaleX(var(--p)); }
.ruler .now { position: absolute; top: 6px; left: calc(var(--p) * 100%); width: 12px; height: 12px; transform: translateX(-50%); border-radius: 50%; background: var(--color-accent); }
.ruler .end { position: absolute; top: 5px; right: -6px; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--color-ink); background: var(--color-paper); }
.ruler-meta { display: flex; justify-content: space-between; max-width: 560px; margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.ruler-meta .pct { color: var(--color-accent); font-weight: 600; }

/* Moments: three phones rising from a sunken band */
.moments { background: var(--color-paper-3); padding-bottom: 0; }
.moments .head { max-width: 640px; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-2xl); }
.trio figure { margin: 0; display: flex; flex-direction: column; }
.trio h3 { font-weight: 400; font-variation-settings: "opsz" 24; font-size: var(--text-xl); letter-spacing: -0.015em; }
.trio figcaption p { margin-top: var(--space-2xs); color: var(--color-ink-2); max-width: 30ch; }
.trio .phone { margin-top: var(--space-xl); height: clamp(300px, 34vw, 460px); overflow: hidden; display: flex; justify-content: center; align-items: flex-start; }
.trio .phone img { width: 82%; }

/* Night: the same page in the dark, in both themes */
.night { background: var(--color-night-paper); color: var(--color-night-ink); padding-bottom: 0; }
.night .container { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: end; }
.night .words { grid-column: 1 / span 5; align-self: center; padding-bottom: var(--section-gap-s); }
.night .body { color: var(--color-night-ink-2); }
.night .pair { grid-column: 7 / -1; position: relative; height: clamp(380px, 40vw, 540px); overflow: hidden; }
.night .pair img { position: absolute; top: 0; }
.night .pair .p1 { left: 0; width: 48%; }
.night .pair .p2 { right: 0; width: 42%; top: 12%; }
.night :focus-visible { outline-color: var(--color-night-accent); }

/* Features: hairline rows, like the countdown list */
.list .container { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); }
.list h2 { grid-column: 1 / span 4; }
.rows { grid-column: 6 / -1; list-style: none; margin: 0; padding: 0; border-top: var(--rule-heavy) solid var(--color-ink); }
.rows li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-lg); padding: var(--space-lg) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.rows .t { font-family: var(--font-display); font-variation-settings: "opsz" 24; font-size: var(--text-xl); line-height: 1.2; letter-spacing: -0.015em; }
.rows .d { color: var(--color-ink-2); }

/* Close */
.close { border-top: var(--rule-hair) solid var(--color-rule); }
.close .container { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: center; }
.close .words { grid-column: 1 / span 7; }
.close .body { max-width: 44ch; }
.close .actions { margin-top: var(--space-xl); }

/* Footer */
.foot { border-top: var(--rule-heavy) solid var(--color-ink); padding-block: var(--space-xl) var(--space-2xl); }
.foot .container { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-lg); }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-lg); font-size: var(--text-sm); }
.foot a { color: var(--color-ink-2); text-decoration: none; }
.foot a:hover { color: var(--color-ink); text-decoration: underline; }
.foot small { font-size: var(--text-sm); color: var(--color-muted); }

/* The numeral needs the script; without it the date line still reads. */
html:not(.js) .numeral, html:not(.js) .ruler, html:not(.js) .ruler-meta { display: none; }

@media (max-width: 60rem) {
  .hero-text, .stage, .time .count, .time .words, .night .words, .night .pair, .list h2, .rows, .close .words { grid-column: 1 / -1; }
  .hero-text { padding-bottom: var(--space-xl); }
  .stage { height: clamp(380px, 96vw, 560px); }
  .time .words { padding-bottom: 0; }
  .night .words { padding-bottom: var(--space-xl); }
  .night .pair { height: clamp(340px, 90vw, 520px); }
  .trio { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .trio .phone { height: clamp(320px, 90vw, 460px); }
  .trio .phone img { width: min(70%, 320px); }
}
@media (max-width: 40rem) {
  .mast nav .lang-long { display: none; }
  .rows li { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .actions .btn { flex: 1 1 100%; }
}