/* Hallmark · shape: decoder pages, every page opens on a live decode · genre: atmospheric · theme: custom (brand: docs/design.md, the app's Code look) · job: try · idea: "your birth date is a code, and every page decodes it in front of you" · vibe: "graphite terminal, phosphor numbers, quiet and uncanny"
 * paper: oklch(12.5% 0.006 160) · accent: oklch(86% 0.17 155) · display: Hanken Grotesk (brand) · body: Hanken Grotesk (brand) · hero: the decoder, a date field that reduces to your number in place · nav: wordmark left, three tool links and the app link right, no hairline · footer: wordmark over a single row of links and the company line · imagery: the product, live calculators plus three app screenshot slots · signature: your birth date collapsing digit by digit into your Life Path
 * axes: dark/grotesk-sans/chromatic-green · posture: Committed (brand green on graphite, as in the app) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: P, a calculator page can feel like a utility; the decode animation and the app's own readings carry the argument that a date is a code */
/* Hallmark · dismissed 23 · the green numeral is the brand's hero number, as on the app's Today screen, under the declared Committed posture */
/* Hallmark · waive 64 · Red Hat Mono only on figures and the wordmark · the brand sets every digit in mono, as the app does */
/* Hallmark · dismissed 77 · each calculator page is one decoder, its worked example and the meanings table, a tool page and not a landing strip */
/* Hallmark · dismissed 58 · the worked example rows are digits and plus signs that the counter reads as words */
@import url("./tokens.css");
@import url("./base.css");

/* Layout */
.site { position: relative; z-index: var(--z-base); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-lg); }
.wordmark { font-family: var(--font-outlier); font-weight: 600; font-size: var(--text-xl); color: var(--color-accent); text-decoration: none; letter-spacing: -0.01em; }
.nav ul { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.nav a:not(.wordmark) { color: var(--color-ink-2); text-decoration: none; font-size: var(--text-sm); white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.nav a:not(.wordmark):hover { color: var(--color-ink); }
.nav a[aria-current="page"] { color: var(--color-accent); }

/* Digit rain behind the first screen (canvas painted by orizn.js; absent without script) */
.rain { position: absolute; inset: 0 0 auto 0; height: 100svh; width: 100%; z-index: 0; pointer-events: none; opacity: 0.9; mask-image: linear-gradient(to bottom, var(--color-paper) 55%, transparent); }

/* Hero: the decoder */
.hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: center; padding-block: var(--space-3xl) var(--space-2xl); }
.hero h1, .page-head h1 { font-size: var(--text-display); font-weight: 600; line-height: 1.02; letter-spacing: var(--tracking-display); max-width: 14ch; }
.lede { font-size: var(--text-lead); color: var(--color-ink-2); max-width: 40ch; margin-top: var(--space-lg); }
.decoder { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: flex-end; }
.field { display: grid; gap: var(--space-xs); }
.field label { font-size: var(--text-sm); color: var(--color-ink-2); }
.field input { height: 52px; padding-inline: var(--space-md); border: 1px solid var(--color-field); border-radius: 14px; background: var(--color-paper-2); color: var(--color-ink); font-family: var(--font-outlier); font-size: var(--text-lg); color-scheme: dark; min-width: 0; }
.field input:hover { border-color: var(--color-muted); }
.field input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.field input:disabled { opacity: 0.5; cursor: not-allowed; }
.field input[aria-invalid="true"] { border-color: var(--color-error); }
.field-wide { flex: 1 1 22rem; }
.field-wide input { width: 100%; font-family: var(--font-body); }

.btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding-inline: var(--space-lg); border: 1px solid transparent; border-radius: 14px; background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; font-size: var(--text-md); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.btn:hover { background: color-mix(in oklab, var(--color-accent) 88%, var(--color-ink)); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn-quiet { background: transparent; color: var(--color-ink); border-color: var(--color-rule); }
.btn-quiet:hover { background: var(--color-paper-2); }

/* The decode result: big mono figures */
.readout { margin: 0; display: grid; gap: var(--space-md); justify-items: start; }
.steps { font-family: var(--font-outlier); font-size: var(--text-lg); color: var(--color-muted); min-height: 1.6em; font-variant-numeric: tabular-nums; }
.steps b { color: var(--color-ink-2); font-weight: 500; }
.readout .big { font-family: var(--font-outlier); font-weight: 600; font-size: clamp(8rem, 22vw, 20rem); line-height: 0.85; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.readout .big.master { outline: 2px solid var(--color-accent); outline-offset: 16px; border-radius: 12px; }
.readout h2 { font-size: var(--text-title); font-weight: 600; }
.readout .text { color: var(--color-ink-2); max-width: 46ch; margin-top: var(--space-sm); }
.readout .more { margin-top: var(--space-xs); }

/* Sections */
section.block { padding-block: var(--section-gap) 0; }
section.block.tight { padding-block-start: var(--space-2xl); }
.block h2 { font-size: var(--text-section); font-weight: 600; line-height: 1.05; max-width: 18ch; }
.block .lede { margin-top: var(--space-md); }

/* Five numbers: a ledger, figure left, source and meaning right */
.ledger { margin-top: var(--space-2xl); display: grid; grid-template-columns: minmax(0, 1fr); border-top: var(--rule-hair) solid var(--color-rule); }
.ledger > div { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.ledger dt { font-size: var(--text-title); font-weight: 600; }
.ledger dd { margin: 0; color: var(--color-ink-2); }
.ledger dd.from { color: var(--color-muted); }

/* App screens */
.screens { margin-top: var(--space-2xl); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.screens figure { margin: 0; display: grid; gap: var(--space-md); }
.shot { aspect-ratio: 9 / 19.5; border-radius: 28px; border: var(--rule-hair) solid var(--color-rule); display: grid; place-items: center; padding: var(--space-lg); text-align: center; color: var(--color-muted); font-size: var(--text-sm); }
.shot .num-demo { font-variant-numeric: tabular-nums; font-family: var(--font-outlier); font-size: var(--text-3xl); color: var(--color-accent); }
.screens figcaption { color: var(--color-ink-2); max-width: 32ch; }

/* Tools: three large links */
.tools { margin-top: var(--space-2xl); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
.tool { display: grid; gap: var(--space-md); align-content: space-between; min-height: 300px; padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-2); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.tool:hover { background: var(--color-paper-3); }
.tool:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.tool .figure { font-variant-numeric: tabular-nums; font-family: var(--font-outlier); font-size: var(--text-3xl); color: var(--color-accent); }
.tool h3 { font-size: var(--text-title); font-weight: 600; }
.tool p { color: var(--color-ink-2); }

/* Plans */
.plans { margin-top: var(--space-2xl); display: grid; grid-template-columns: minmax(0, 1fr); border-top: var(--rule-hair) solid var(--color-rule); }
.plans > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.plans dt { font-size: var(--text-title); font-weight: 600; }
.plans dd { margin: 0; font-family: var(--font-outlier); font-size: var(--text-xl); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.plans dd span { font-family: var(--font-body); font-size: var(--text-md); color: var(--color-muted); }

/* Get the app */
.get { padding-block: var(--section-gap) var(--section-gap-s); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: end; }
.get .actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: flex-end; }

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

/* Tool and legal pages */
.page-head { padding-block: var(--space-2xl) var(--space-xl); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: center; }
.reading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); margin-top: var(--space-xl); }
.reading h3 { font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--space-sm); }
.reading ul { margin: 0; padding-left: 1.1em; color: var(--color-ink-2); display: grid; gap: var(--space-xs); }
.prose { padding-block: var(--space-xl) var(--section-gap-s); max-width: 68ch; }
.prose h1 { font-size: var(--text-display-s); font-weight: 600; line-height: 1.05; }
.prose h2 { font-size: var(--text-xl); font-weight: 600; margin-top: var(--space-2xl); margin-bottom: var(--space-sm); }
.prose p, .prose li { color: var(--color-ink-2); }
.prose p + p { margin-top: var(--space-md); }
.prose ul { padding-left: 1.1em; display: grid; gap: var(--space-xs); }
.prose a { color: var(--color-accent); }
.prose .updated { color: var(--color-muted); margin-top: var(--space-md); }
.method { padding-block: var(--space-3xl) 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: start; }
.method h2 { font-size: var(--text-section); font-weight: 600; line-height: 1.05; }
.method p { color: var(--color-ink-2); font-size: var(--text-lead); }
.meanings { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-columns); border-top: 0; }
.meanings > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: var(--rule-hair) solid var(--color-rule); border-bottom: 0; }
.meanings.years { grid-template-columns: repeat(3, minmax(0, 1fr)); }
section.block:has(.meanings) { padding-block-end: var(--section-gap-s); }
.worked { margin-top: 0; }
.worked dd { font-family: var(--font-outlier); color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.worked dd b { color: var(--color-accent); font-weight: 600; }
.worked > div { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.meanings .num { font-family: var(--font-outlier); color: var(--color-accent); margin-right: var(--space-sm); }

/* Reveal of the readout, visible by default; only scripted pages fade it in */
.js .readout[data-fresh] { animation: rise var(--dur-long) var(--ease-out); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .readout[data-fresh] { animation: none; } .rain { display: none; } .btn:active { transform: none; } }

@media (max-width: 60rem) {
  .hero, .page-head, .get { grid-template-columns: minmax(0, 1fr); }
  .hero { min-height: auto; }
  .get .actions { justify-content: flex-start; }
  .ledger > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .screens, .tools { grid-template-columns: minmax(0, 1fr); }
  .screens figure { max-width: 22rem; }
  .reading, .method, .meanings { grid-template-columns: minmax(0, 1fr); }
  .nav ul { gap: var(--space-md); }
}
@media (max-width: 40rem) { .nav ul li:not(:last-child) { display: none; } }
.get .mark { width: clamp(160px, 24vw, 340px); height: auto; border-radius: var(--radius-tile); margin-bottom: var(--space-xl); }
.get h2 { font-size: var(--text-section); font-weight: 600; line-height: 1.05; max-width: 16ch; }