/* Hallmark · macrostructure: tool-first workbench · tone: utilitarian, ink on paper (flash sheet) · anchor hue: flash red 28
 * pre-emit critique: P4 H4 E4 S5 R5 V4 · tokens locked below, system fonts only (CSP self) */
:root {
  --color-paper: oklch(97.6% 0.008 85);
  --color-paper-2: oklch(94.2% 0.012 85);
  --color-canvas: oklch(100% 0 0);
  --color-ink: oklch(21% 0.012 60);
  --color-ink-2: oklch(38% 0.012 60);
  --color-muted: oklch(50% 0.012 60);
  --color-rule: oklch(86% 0.012 85);
  --color-accent: oklch(50% 0.17 28);
  --color-accent-2: oklch(44% 0.16 28);
  --color-on-accent: oklch(99% 0 0);
  --color-scrim: oklch(21% 0.012 60 / 0.74);
  --color-on-scrim: oklch(99% 0 0);
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-sm: 14px;
  --text-md: 17px;
  --text-lg: 19px;
  --text-xl: 26px;
  --text-display: clamp(34px, 6.4vw, 54px);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --rule: 1px solid var(--color-rule);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* author display rules must never beat the hidden attribute */
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font: var(--text-md)/1.55 var(--font-body); }
header, main, footer { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-5); }
h1, h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em; overflow-wrap: anywhere; min-width: 0; }
h1 { font-size: var(--text-display); line-height: 1.04; margin: var(--space-3) 0 var(--space-4); text-wrap: balance; }
h2 { font-size: var(--text-xl); line-height: 1.15; margin: 0 0 var(--space-2); }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-ink); text-underline-offset: 3px; }
img { display: block; max-width: 100%; height: auto; }

.top { display: flex; justify-content: space-between; align-items: center; height: 64px; }
.brand { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -0.02em; text-decoration: none; }
.credits { font-size: var(--text-sm); color: var(--color-ink-2); }

.hero { display: grid; gap: var(--space-8); padding: var(--space-4) 0 var(--space-12); }
@media (min-width: 900px) { .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
.lead { font-size: var(--text-lg); color: var(--color-ink-2); max-width: 32em; }
.fine { font-size: var(--text-sm); color: var(--color-muted); }

/* Before/after: the range input drives the clip of the "after" image. */
.compare { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-md); background: var(--color-paper-2); aspect-ratio: 4 / 3; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare .handle { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--color-canvas); pointer-events: none; transform: translateX(-1px); }
.compare figcaption { position: absolute; left: var(--space-3); right: var(--space-3); bottom: var(--space-3); background: var(--color-scrim); color: var(--color-on-scrim); font-size: 13px; line-height: 1.4; padding: 7px 10px; border-radius: var(--radius-sm); pointer-events: none; }

.step { border-top: var(--rule); padding: var(--space-10) 0 var(--space-12); display: grid; gap: var(--space-8); }
@media (min-width: 900px) { .step { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.step .intro { color: var(--color-ink-2); margin-bottom: var(--space-6); max-width: 34em; }

label.field { display: block; font-weight: 650; margin-bottom: var(--space-2); }
textarea { display: block; width: 100%; font: inherit; color: var(--color-ink); background: var(--color-canvas); border: 1px solid var(--color-rule); border-radius: var(--radius-sm); padding: var(--space-3); resize: vertical; min-height: 76px; }
textarea:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 1px; }
.count { text-align: right; font-size: var(--text-sm); color: var(--color-muted); margin: var(--space-1) 0 var(--space-5); font-variant-numeric: tabular-nums; }

fieldset { border: 0; margin: 0 0 var(--space-6); padding: 0; min-width: 0; }
legend { font-weight: 650; padding: 0; margin-bottom: var(--space-2); }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
@media (min-width: 560px) { .choices.styles { grid-template-columns: repeat(4, minmax(0, 1fr)); } .choices.places { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.choices label { position: relative; display: block; padding: var(--space-3); background: var(--color-canvas); border: 1px solid var(--color-rule); border-radius: var(--radius-sm); cursor: pointer; line-height: 1.3; transition: border-color var(--dur-fast) var(--ease-out); }
.choices label b { display: block; font-weight: 650; white-space: nowrap; }
.choices label span { display: block; font-size: 13px; color: var(--color-muted); margin-top: 2px; }
.choices input { position: absolute; opacity: 0; pointer-events: none; }
.choices label:hover { border-color: var(--color-ink-2); }
.choices label:has(input:checked) { border-color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-ink); }
.choices label:has(input:focus-visible) { outline: 2px solid var(--color-ink); outline-offset: 2px; }

.btn { display: inline-flex; justify-content: center; align-items: center; gap: var(--space-2); font: inherit; font-weight: 650; white-space: nowrap; text-decoration: none; padding: 13px 20px; border-radius: var(--radius-sm); border: 1px solid var(--color-ink); background: var(--color-canvas); color: var(--color-ink); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.btn:hover { background: var(--color-paper-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.btn.primary { width: 100%; background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.btn.primary:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; }
.btn[aria-busy="true"] { opacity: 0.8; cursor: progress; }
.file { position: relative; overflow: hidden; }
.file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.file:has(input:focus-visible) { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

.status { min-height: 1.55em; margin-top: var(--space-3); color: var(--color-ink-2); }
.status.error { color: var(--color-accent-2); }
.picked { display: flex; gap: var(--space-3); align-items: center; margin: var(--space-3) 0 var(--space-6); }
.picked img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); border: var(--rule); background: var(--color-canvas); }
.picked p { margin: 0; font-size: var(--text-sm); color: var(--color-ink-2); }
.sheet { margin: 0; background: var(--color-canvas); border: var(--rule); border-radius: var(--radius-md); overflow: hidden; }
.sheet img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.sheet img.photo { aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 899px) { .sheet.example { display: none; } }   /* phones: the hero already shows an example */
.sheet figcaption, .result-cap { font-size: var(--text-sm); color: var(--color-muted); padding: var(--space-3) var(--space-4); border-top: var(--rule); }
.result-cap { border: 0; padding: var(--space-2) 0 0; }
.place-set { margin-top: var(--space-6); }
.tips { margin: var(--space-2) 0 var(--space-6); padding-left: var(--space-5); font-size: var(--text-sm); color: var(--color-ink-2); }

.cost { border-top: var(--rule); padding: var(--space-10) 0 var(--space-12); }
.cost > * { max-width: 40em; }
footer { padding-bottom: var(--space-8); font-size: var(--text-sm); color: var(--color-muted); }
footer::before { content: ""; display: block; border-top: var(--rule); margin-bottom: var(--space-5); }   /* rule aligned with the sections above */
footer a { color: var(--color-muted); }
.doc { max-width: 42em; padding-bottom: var(--space-12); }
.doc h2 { font-size: var(--text-lg); margin-top: var(--space-6); }

@media (prefers-reduced-motion: reduce) { * { transition-duration: 1ms !important; scroll-behavior: auto !important; } }

/* Header links (every page) */
.nav { display: flex; align-items: center; gap: var(--space-5); font-size: var(--text-sm); }
.nav a { color: var(--color-ink-2); text-decoration: none; }
.nav a:hover { color: var(--color-ink); text-decoration: underline; }

/* Zodiac and idea pages (written by build_pages.py) */
.page { padding-bottom: var(--space-8); }
.crumbs { font-size: var(--text-sm); color: var(--color-muted); margin: var(--space-2) 0 0; }
.crumbs a { color: var(--color-muted); }
.page > .lead { max-width: 36em; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: var(--space-6) 0 0; border-top: var(--rule); border-bottom: var(--rule); }
@media (max-width: 719px) { .facts div:first-child { grid-column: 1 / -1; } }   /* dates get a full row on phones */
@media (min-width: 720px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.facts div { padding: var(--space-3) var(--space-4) var(--space-3) 0; min-width: 0; }
.facts dt { font-size: 13px; color: var(--color-muted); }
.facts dd { margin: 2px 0 0; font-weight: 650; }

.gallery { display: grid; gap: var(--space-6); margin: var(--space-8) 0 var(--space-10); }
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.design { margin: 0; display: flex; flex-direction: column; background: var(--color-canvas); border: var(--rule); border-radius: var(--radius-md); overflow: hidden; }
.design img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.design figcaption { font-size: var(--text-sm); color: var(--color-ink-2); padding: var(--space-3) var(--space-4) 0; border-top: var(--rule); }
.design .ai { color: var(--color-muted); }
.design .ai::after { content: " ·"; }
.design .acts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: auto 0 0; padding: var(--space-3) var(--space-4) var(--space-4); }
.btn.sm { padding: 9px 14px; font-size: 15px; }
.slot { aspect-ratio: 5 / 2; display: grid; place-content: center; gap: var(--space-1); padding: var(--space-6); text-align: center; background: var(--color-paper-2); }
.slot p { margin: 0; font-size: var(--text-sm); color: var(--color-ink-2); }
.slot .slot-h { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-ink); }
@media (min-width: 900px) { .slot { aspect-ratio: 1 / 1; } }   /* square only beside drawn designs in the 3-column grid */

.prose { max-width: 40em; margin-bottom: var(--space-8); }
.prose h2 { margin-top: var(--space-8); }
.prose ul { padding-left: var(--space-5); }
.prose li { margin-bottom: var(--space-2); }

.cta { border-top: var(--rule); padding: var(--space-8) 0; }
.cta > p { max-width: 40em; }
.cta .btn.primary { width: auto; }

.more { border-top: var(--rule); padding-top: var(--space-8); }
.links { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-6); }
@media (min-width: 720px) { .links { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.cards { list-style: none; padding: 0; margin: var(--space-8) 0 var(--space-6); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cards a { display: block; height: 100%; text-decoration: none; background: var(--color-canvas); border: var(--rule); border-radius: var(--radius-md); overflow: hidden; transition: border-color var(--dur-fast) var(--ease-out); }
.cards a:hover { border-color: var(--color-ink-2); }
.cards img, .thumb-empty { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; border-bottom: var(--rule); }
.thumb-empty { display: grid; place-items: center; padding: var(--space-3); text-align: center; line-height: 1.15; background: var(--color-paper-2); font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-ink-2); }
.cards b { display: block; padding: var(--space-3) var(--space-3) 0; }
.cards span:not(.thumb-empty) { display: block; padding: 0 var(--space-3) var(--space-3); font-size: 13px; color: var(--color-muted); }

.ideas-home { border-top: var(--rule); padding: var(--space-10) 0 var(--space-12); }
.ideas-home > p { max-width: 40em; }