/* Hallmark · shape: Stage + tally (multi-page, kept) · genre: modern-minimal · theme: Dusk (custom, user asked for premium glassmorphism) · redesign: restyle · dusk: fog/periwinkle-apricot/glass
 * hero: Stage over a photograph of fog at dusk, the head on its palest part, the answer slip in smoked glass · nav: slate glass bar, wordmark, links, one pill · footer: wordmark over links and credits · imagery: one library photograph (CC BY), the user's photos, the product (slip, calculators, video) · signature: the answer slip printing a real result in smoked glass over the fog
 * axes: dark/grotesk-sans/cool · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P3 H3 E3 S3 R3 V3 · weakest: R, the facts wall was a tile grid the theme forbids; it is now one glass tally of ruled rows */
/* waive: 29 and F7, the user asked for glassmorphism; glass is the theme's product surface, never nested, always with its lit edge */
/* waive: theme Motion: the slip print and count-up stay because they show a result being worked out; all still under reduced motion */
@import url("./tokens.css");
@import url("./base.css");

@font-face { font-family: "Wix Madefor Display"; src: url(fonts/wix-madefor-display-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+2212; }
@font-face { font-family: "Wix Madefor Display"; src: url(fonts/wix-madefor-display-latin-ext-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0100-02FF, U+20A0-20C0; }
@font-face { font-family: "Wix Madefor Display"; src: url(fonts/wix-madefor-display-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+2212; }
@font-face { font-family: "Wix Madefor Display"; src: url(fonts/wix-madefor-display-latin-ext-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0100-02FF, U+20A0-20C0; }
@font-face { font-family: "Wix Madefor Text"; src: url(fonts/wix-madefor-text-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+2212; }
@font-face { font-family: "Wix Madefor Text"; src: url(fonts/wix-madefor-text-latin-ext-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-02FF, U+20A0-20C0; }
@font-face { font-family: "Wix Madefor Text"; src: url(fonts/wix-madefor-text-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+2212; }
@font-face { font-family: "Wix Madefor Text"; src: url(fonts/wix-madefor-text-latin-ext-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0100-02FF, U+20A0-20C0; }
@font-face { font-family: "Wix Madefor Text"; src: url(fonts/wix-madefor-text-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+2212; }
@font-face { font-family: "Wix Madefor Text"; src: url(fonts/wix-madefor-text-latin-ext-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0100-02FF, U+20A0-20C0; }

body { font-size: 1.0625rem; line-height: 1.55; }
::selection { background: var(--color-accent); color: var(--color-accent-ink); }
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--tracking-display); line-height: 1.04; }
h1 { font-size: clamp(2.75rem, 5.2vw, 4.75rem); max-width: 13ch; }
h2 { font-size: clamp(2rem, 3vw, 3rem); max-width: 18ch; }
h3 { font: 500 var(--text-lg)/1.25 var(--font-body); letter-spacing: 0; }
.lead, .two .words p { color: var(--color-ink-2); font-size: var(--text-lead); }
.section { padding-block: var(--section-gap-s) 0; }
.big, .fig, .row, .ledger, .result, .typed td { font-variant-numeric: tabular-nums; }

/* glass: one recipe, never nested */
.glass, .sheet, .printer, .board, .typed, .calc, .ledger, .wall, .asks { background: var(--glass); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.35); backdrop-filter: blur(var(--glass-blur)) saturate(1.35); box-shadow: var(--glass-hi), var(--shadow-card); border-radius: var(--radius-card); }
.wall .sheet, .calc .result, .merge .sources .sheet { background: color-mix(in oklab, var(--color-light) 5%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }

/* nav */
.nav { position: sticky; top: var(--space-sm); z-index: var(--z-sticky-nav); display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); margin-top: var(--space-sm); padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-lg); background: var(--glass); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.35); backdrop-filter: blur(var(--glass-blur)) saturate(1.35); box-shadow: var(--glass-hi); border-radius: var(--radius-pill); max-width: calc(var(--container) - 2 * var(--gutter)); width: calc(100% - 2 * var(--space-md)); }
.wordmark { font: 600 1.125rem/1 var(--font-display); letter-spacing: -0.01em; text-decoration: none; color: var(--color-ink); }
.nav ul { display: flex; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; font-weight: 500; font-size: var(--text-sm); }
.nav ul a { text-decoration: none; color: var(--color-ink-2); }
.nav ul a:hover, .nav a[aria-current="page"] { color: var(--color-ink); }
.nav a[aria-current="page"]::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); margin-right: var(--space-xs); vertical-align: middle; }

/* controls */
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-pill); font: 600 0.9375rem/1 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-light) 35%, transparent); }
.btn--primary:hover { background: var(--color-accent-hi); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-light) 35%, transparent), 0 0 0 4px color-mix(in oklab, var(--color-accent) 22%, transparent); }
.btn--secondary { background: color-mix(in oklab, var(--color-light) 6%, transparent); color: var(--color-ink); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-light) 12%, transparent); }
.btn--secondary:hover { background: color-mix(in oklab, var(--color-light) 11%, transparent); }
.btn:active { translate: 0 1px; }
.btn:disabled, button:disabled { opacity: 0.45; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.nav .btn { min-height: 40px; }

/* the hour: photograph behind the home hero */
.hour { position: absolute; inset: 0 0 auto; height: min(100svh, 980px); z-index: -1; overflow: hidden; }
.hour img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; animation: drift 48s var(--ease-in-out) infinite alternate; }
.hour::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 58% at 22% 52%, color-mix(in oklab, var(--color-fog) 78%, transparent), transparent 78%), linear-gradient(to bottom, transparent 62%, var(--color-paper)); }
@keyframes drift { to { transform: scale(1.06) translateX(-2%); } }
main { position: relative; isolation: isolate; }
main:has(.hour) .hero--hour .head h1 { color: var(--color-day-ink); }
main:has(.hour) .hero--hour .head .lead { color: var(--color-day-muted); }
main:has(.hour) .hero--hour .head .btn--secondary { background: color-mix(in oklab, var(--color-fog) 70%, transparent); color: var(--color-day-ink); box-shadow: none; }

/* hero */
.hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: center; padding-block: var(--space-3xl) var(--section-gap-s); }
.hero > .head { grid-column: 1 / span 6; }
.hero > .product { grid-column: 7 / span 6; }
.hero .lead { margin-top: var(--space-lg); max-width: 36ch; }
.hero > .product[data-slot] { background: none; overflow: visible; }

/* the answer slip, in glass */
.printer { padding: var(--space-lg); }
.printer-tabs { display: flex; gap: var(--space-lg); margin-bottom: var(--space-md); padding-bottom: var(--space-sm); border-bottom: 1px solid color-mix(in oklab, var(--color-light) 7%, transparent); }
.printer-tabs button { display: inline-flex; align-items: center; gap: var(--space-xs); border: 0; background: none; padding: var(--space-2xs) 0; color: var(--color-muted); font: 500 var(--text-sm)/1 var(--font-body); cursor: pointer; }
.printer-tabs button::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.printer-tabs button[aria-selected="true"] { color: var(--color-ink); }
.printer-tabs button[aria-selected="true"]::before { background: var(--color-accent); }
.printer-tabs button:hover { color: var(--color-ink); }
.paper-out { overflow: hidden; }
.slip { background: color-mix(in oklab, var(--color-light) 4%, transparent); border-radius: var(--radius-inner); padding: var(--space-lg); }
.slip.printing { animation: rise 700ms var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.slip .ask { font-size: 1.0625rem; color: var(--color-ink); padding-bottom: var(--space-md); margin-bottom: var(--space-sm); border-bottom: 1px solid color-mix(in oklab, var(--color-light) 7%, transparent); }
.slip .ask small { display: block; font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-2xs); }
.row { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-2xs) 0; font-size: 1rem; }
.row.quiet { color: var(--color-muted); }
.row.total { border-top: 1px solid color-mix(in oklab, var(--color-light) 12%, transparent); margin-top: var(--space-sm); padding-top: var(--space-sm); font-weight: 500; }
.big { display: block; font: 500 clamp(2.5rem, 4.4vw, 3.75rem)/1 var(--font-display); letter-spacing: -0.02em; margin-top: var(--space-sm); color: var(--color-ink); }
.mark { color: var(--color-accent-2); }
.slip .note, .cap { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }

/* bands */
.band { background: var(--color-paper-2); color: var(--color-ink); padding-block: var(--space-3xl); margin-top: var(--section-gap-s); }
.band h2 { color: var(--color-ink); }
.band .lead { margin-top: var(--space-lg); }

/* media beside words */
.two { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: center; }
.two > .words { grid-column: 1 / span 5; }
.two > .media { grid-column: 7 / span 6; }
.two.flip > .words { grid-column: 8 / span 5; order: 2; }
.two.flip > .media { grid-column: 1 / span 6; order: 1; }
.two .words p { margin-top: var(--space-lg); }
.media.sheet { padding: var(--space-sm); }
.media img, .media video { width: 100%; height: auto; border-radius: var(--radius-inner); }
.phone { max-width: 340px; margin-inline: auto; }
.phone video { aspect-ratio: 9 / 16; object-fit: cover; background: var(--color-shade); }
.photo { aspect-ratio: 4 / 3; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); }
.photo.sheet { padding: 0; }

/* the facts: one glass tally of rows */
.wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xs); margin-top: var(--space-2xl); padding: var(--space-xs); }
.wall:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wall:has(> :nth-child(3):last-child) .sheet { flex-direction: column; gap: var(--space-2xs); }
.wall .sheet { display: flex; align-items: baseline; gap: var(--space-lg); padding: var(--space-lg); border-radius: var(--radius-inner); }
.wall .fig { font: 500 clamp(2rem, 3.2vw, 2.75rem)/1 var(--font-display); letter-spacing: -0.02em; min-width: 4.5ch; flex-shrink: 0; color: var(--color-ink); }
.wall .sheet--fluoro .fig { color: var(--color-accent-2); }
.wall .sheet p { color: var(--color-ink-2); }

/* country boards */
.boards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-2xl); }
.board { display: flex; flex-direction: column; padding: var(--space-xl); text-decoration: none; color: var(--color-ink); transition: box-shadow var(--dur-short) var(--ease-out); }
.board:hover { box-shadow: var(--glass-hi), var(--shadow-card), 0 0 0 1px color-mix(in oklab, var(--color-accent) 45%, transparent); }
.board .name { font: 500 var(--text-2xl)/1 var(--font-display); }
.board ul { list-style: none; padding: 0; margin: var(--space-lg) 0; flex: 1; }
.board li { padding: var(--space-sm) 0; border-top: 1px solid color-mix(in oklab, var(--color-light) 7%, transparent); color: var(--color-ink-2); font-size: 1rem; }
.board .go { color: var(--color-accent); font-weight: 500; }

/* table */
.typed { margin-top: var(--space-2xl); padding: var(--space-md) var(--space-xl); }
.typed table { width: 100%; border-collapse: collapse; }
.typed th { text-align: left; font-weight: 500; font-size: var(--text-sm); color: var(--color-muted); padding: var(--space-sm) var(--space-md) var(--space-sm) 0; }
.typed td { padding: var(--space-md) var(--space-md) var(--space-md) 0; border-top: 1px solid color-mix(in oklab, var(--color-light) 7%, transparent); vertical-align: top; color: var(--color-ink-2); }
.typed td:first-child { color: var(--color-ink); font-weight: 500; width: 32%; }

/* calculators */
.calc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); padding: var(--space-xl); }
.calc fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-md); align-content: start; }
.calc legend { font: 500 var(--text-lg)/1.2 var(--font-display); margin-bottom: var(--space-sm); padding: 0; }
.calc label { display: grid; gap: var(--space-xs); font-weight: 500; font-size: var(--text-sm); color: var(--color-ink-2); }
.calc input, .calc select { width: 100%; border: 0; border-radius: var(--radius-inner); background: color-mix(in oklab, var(--color-light) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-light) 10%, transparent); color: var(--color-ink); padding: var(--space-sm) var(--space-md); font: 500 1.0625rem/1.3 var(--font-body); font-variant-numeric: tabular-nums; caret-color: var(--color-accent); }
.calc select option { background: var(--color-paper-2); }
.calc input:focus-visible, .calc select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.calc .check { display: flex; align-items: center; gap: var(--space-xs); font-size: 1rem; }
.calc .check input { width: 20px; height: 20px; accent-color: var(--color-accent); }
.calc .hint { font-weight: 400; color: var(--color-muted); }
.result { padding: var(--space-lg); border-radius: var(--radius-inner); align-self: stretch; }
.result .verdict { margin-top: var(--space-md); font-size: var(--text-lg); color: var(--color-ink); }

/* questions */
.asks { list-style: none; margin: var(--space-2xl) 0 0; padding: var(--space-xs) var(--space-xl); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-columns); }
.asks li { padding: var(--space-lg) 0; border-top: 1px solid color-mix(in oklab, var(--color-light) 7%, transparent); }
.asks li:nth-child(-n+2) { border-top: 0; }
.asks q { display: block; font-size: var(--text-lg); color: var(--color-ink); quotes: "“" "”"; margin-bottom: var(--space-xs); }
.asks a { font-size: var(--text-sm); font-weight: 500; color: var(--color-accent); }
.asks li { color: var(--color-ink-2); }
.media.asks { padding: var(--space-xs) var(--space-xl); grid-template-columns: minmax(0, 1fr); margin: 0; }
.media.asks li:nth-child(2) { border-top: 1px solid color-mix(in oklab, var(--color-light) 7%, transparent); }

/* steps */
.steps { counter-reset: s; list-style: none; padding: 0; margin: var(--space-2xl) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.steps li { counter-increment: s; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; margin-bottom: var(--space-md); font: 600 var(--text-sm)/1 var(--font-body); color: var(--color-accent-ink); background: var(--color-accent); }
.steps p { margin-top: var(--space-xs); color: var(--color-ink-2); }
.media.steps { grid-template-columns: minmax(0, 1fr); padding: var(--space-xl); margin: 0; gap: var(--space-lg); }
.cmd { display: flex; gap: var(--space-xs); margin-top: var(--space-md); }
.cmd code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; background: var(--color-shade); border-radius: var(--radius-inner); padding: var(--space-sm) var(--space-md); font-size: 0.85rem; color: var(--color-ink-2); }
.copy { min-height: 40px; }

/* crypto: exports flowing into one ledger */
.merge { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.4fr); gap: var(--gap-columns); align-items: center; }
.sources { display: grid; gap: var(--space-sm); }
.merge .sources .sheet { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-pill); font-weight: 500; font-size: var(--text-sm); color: var(--color-ink-2); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-light) 10%, transparent); }
.arrow { font: 500 var(--text-2xl)/1 var(--font-display); color: var(--color-accent); }
.ledger { padding: var(--space-lg); }
.merge.live .sources .sheet { animation: feed 2.4s var(--ease-in-out) infinite; }
.merge.live .sources .sheet:nth-child(2) { animation-delay: .8s; } .merge.live .sources .sheet:nth-child(3) { animation-delay: 1.6s; }
@keyframes feed { 0%, 70%, 100% { translate: 0 0; } 35% { translate: 8px 0; } }

/* footer */
.footer { margin-top: var(--section-gap-s); padding-block: var(--space-3xl) var(--space-2xl); border-top: 1px solid var(--color-rule); }
.footer .mast { font: 500 clamp(2.5rem, 6vw, 4.5rem)/1 var(--font-display); letter-spacing: -0.025em; }
.footer nav ul { display: flex; flex-wrap: wrap; gap: var(--space-lg); list-style: none; padding: 0; margin: var(--space-xl) 0; font-weight: 500; }
.footer nav a { text-decoration: none; color: var(--color-ink-2); }
.footer nav a:hover { color: var(--color-ink); }
.footer p { font-size: var(--text-sm); color: var(--color-muted); max-width: 70ch; margin-top: var(--space-xs); }

@media (max-width: 60rem) {
  .hero > .head, .hero > .product, .two > .words, .two > .media, .two.flip > .words, .two.flip > .media { grid-column: 1 / -1; order: initial; }
  .boards, .steps, .wall, .wall:has(> :nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr); }
  .calc, .merge { grid-template-columns: minmax(0, 1fr); }
  .arrow { rotate: 90deg; justify-self: center; }
  .nav ul { display: none; }
  .hour::after { background: linear-gradient(to bottom, color-mix(in oklab, var(--color-fog) 70%, transparent) 0%, color-mix(in oklab, var(--color-fog) 40%, transparent) 45%, var(--color-paper) 100%); }
}
@media (max-width: 40rem) {
  .asks { grid-template-columns: minmax(0, 1fr); padding-inline: var(--space-lg); }
  .asks li:nth-child(2) { border-top: 1px solid color-mix(in oklab, var(--color-light) 7%, transparent); }
  .calc, .typed, .board { padding: var(--space-lg); }
  .wall .sheet { flex-direction: column; gap: var(--space-2xs); }
}
@media (prefers-reduced-motion: reduce) { .hour img, .slip.printing, .merge.live .sources .sheet { animation: none; } .btn, .board { transition: none; } }