/* Anytown Painting Co. · Painting site design
   Every surface is a wall colour sampled from project photos. Red is the logo's, kept for actions. */
@font-face { font-family: "Recursive"; src: url(assets/fonts/recursive-sans-var.woff2) format("woff2"); font-weight: 300 1000; font-display: swap; }
@font-face { font-family: "Recursive Wall"; src: url(assets/fonts/recursive-wall.woff2) format("woff2"); font-weight: 860; font-display: block; }

:root {
  --nav-h: 68px;
  /* walls */
  --rec-black: #262726;     /* basement after, 13 Jan 2023 1:38 p.m. */
  --greige: #CFCAC0;        /* basement before, 8:52 a.m. */
  --navy: #2D3D63;          /* stucco exterior after */
  --great-grey: #736D64;    /* great room after */
  --hall-white: #E6E3DC;    /* hallway after */
  --red: #E3160B;           /* logo red, deepened a touch so white labels pass contrast */
  --tape: #E4D6A7;          /* masking tape */
  --tape-ink: #3A352B;

  --ink: var(--rec-black);
  --paper: var(--greige);

  /* type: Recursive. CASL 1 = the brush/marker hand, CASL 0 = the finished print */
  --casual: "CASL" 1;
  --linear: "CASL" 0;
  --t-xs: .8125rem; --t-s: .9375rem; --t-b: 1.125rem; --t-l: 1.375rem; --t-xl: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  --t-2xl: clamp(2.5rem, 1.6rem + 3.4vw, 4.75rem);
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --ease-roll: cubic-bezier(.3, .0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body { margin: 0; font-family: "Recursive", system-ui, sans-serif; font-variation-settings: var(--linear); font-weight: 420; font-size: var(--t-b); line-height: 1.55; color: var(--ink); background: var(--paper); }
img { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
h1, h2, h3 { margin: 0; line-height: 1.02; font-variation-settings: var(--casual); font-weight: 820; letter-spacing: -.01em; }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); line-height: 1.1; }
p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 1rem; top: -4rem; z-index: 50; background: var(--ink); color: var(--hall-white); padding: .75rem 1rem; }
.skip:focus { top: 1rem; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 900px; margin-left: 0; margin-left: max(0px, calc((100vw - 1240px) / 2)); }
.lede { font-size: var(--t-l); line-height: 1.45; max-width: 36em; }
.fine { font-size: var(--t-s); opacity: .78; }

/* ── Buttons. Tapping one leaves it wet for a moment; it dries flat. ───────── */
.btn { --bg: transparent; --fg: currentColor; position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .7rem 1.35rem; border: 2px solid transparent; border-radius: 3px; background: var(--bg); color: var(--fg); font: inherit; font-weight: 700; font-size: 1.1875rem; line-height: 1.1; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn::after { content: ""; position: absolute; inset: -2px; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.55) 38%, rgba(255,255,255,.12) 52%, transparent 70%), linear-gradient(transparent, rgba(255,255,255,.18)); opacity: 0; pointer-events: none; }
.btn.is-wet::after { animation: dry 1.4s var(--ease-roll) forwards; }
@keyframes dry { 0% { opacity: 1; } 100% { opacity: 0; } }
.btn-red { --bg: var(--red); --fg: #fff; }
.btn-ink { --bg: var(--ink); --fg: var(--hall-white); }
.btn-line { border-color: currentColor; }
.btn-quiet { padding-inline: .5rem; text-decoration: underline; font-weight: 520; }
.btn-small { min-height: 44px; font-size: 1rem; padding: .5rem 1rem; }

/* ── Masking tape: the only secondary material. Labels written on it in marker. ── */
.tape { display: inline-flex; gap: .6em; align-items: baseline; padding: .42em .9em .38em; background: var(--tape); color: var(--tape-ink); font-variation-settings: var(--casual); font-weight: 640; font-size: var(--t-s); line-height: 1.2; transform: rotate(-1.2deg);
  clip-path: polygon(0 6%, 3% 0, 7% 8%, 11% 1%, 100% 0, 98% 30%, 100% 62%, 97% 100%, 60% 96%, 8% 100%, 0 97%, 2% 55%);
  box-shadow: inset 0 0 0 100vmax rgba(255,255,255,.08); }
.tape time { font-weight: 800; }

/* ── Nav ───────────────────────────────────────────────────────────────────── */
.nav { position: fixed; inset: 0 0 auto; z-index: 20; min-height: var(--nav-h); display: flex; align-items: center; gap: 1.5rem; padding: .75rem var(--gutter); color: var(--ink); transition: color .3s, background-color .3s; }
.nav { background: color-mix(in srgb, var(--nav-bg, var(--greige)) 94%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.nav[data-on="dark"] { color: var(--hall-white); --nav-bg: var(--rec-black); }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; margin-right: auto; font-weight: 800; font-size: 1rem; letter-spacing: .02em; }
.brand img { width: 34px; height: auto; }
.nav-links { display: flex; gap: 1.5rem; }
.nav-links a, .nav-phone { text-decoration: none; font-weight: 560; font-size: 1rem; min-height: 44px; display: inline-flex; align-items: center; }
.brand { min-height: 44px; }
.nav-links a:hover, .nav-phone:hover { text-decoration: underline; }

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.hero { position: relative; height: var(--hero-h, 260vh); background: var(--rec-black); }
.hero-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #BDB9B0; }
.hero-wall { position: absolute; inset: var(--nav-h, 68px) 0 0 0; width: 100%; height: calc(100% - var(--nav-h, 68px)); object-fit: cover; touch-action: pan-y; }
.hero-copy-mobile, .hint-mobile, .quote-heading-mobile, .quote-lede-mobile, .legend-mobile, .order-empty-mobile { display: none; }
.hero-tape { position: absolute; left: var(--gutter); bottom: clamp(1.5rem, 5vh, 3rem); font-size: 1.0625rem; }
.hero-tape time { min-width: 5.6em; }
.hero-panel { position: absolute; right: var(--gutter); bottom: clamp(1.5rem, 5vh, 3rem); width: min(440px, 36vw); padding: 1.6rem 1.7rem 1.7rem; background: var(--rec-black); color: var(--hall-white); display: grid; gap: 1rem; }
.hero-panel > p:first-child { font-size: var(--t-l); line-height: 1.4; }
.hero-proof { font-size: var(--t-s); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .25rem; }
.hero-hint { position: absolute; left: 50%; bottom: clamp(1.5rem, 5vh, 3rem); transform: translateX(-50%); font-size: var(--t-s); font-weight: 600; color: var(--ink); background: color-mix(in srgb, var(--greige) 85%, transparent); padding: .35rem .8rem; border-radius: 2px; transition: opacity .4s; }
.hero-hint[data-gone] { opacity: 0; }
.hero-toggle { position: absolute; left: var(--gutter); bottom: calc(clamp(1.5rem, 5vh, 3rem) + 3.4rem); min-height: 44px; padding: .5rem 1rem; font: inherit; font-weight: 700; border: 2px solid currentColor; background: var(--greige); color: var(--ink); border-radius: 3px; cursor: pointer; }

/* ── Logbook ───────────────────────────────────────────────────────────────── */
.logbook-intro { background: var(--rec-black); color: var(--hall-white); padding: clamp(5rem, 12vw, 9rem) 0 clamp(3rem, 6vw, 5rem); }
.logbook-intro .lede { margin-top: 1.4rem; color: #CFCBC3; }
/* each entry sits on its own "after" wall colour; --ink/--soft are set per entry inline */
.entry { background: var(--wall); color: var(--ink); padding: clamp(3rem, 7vw, 6rem) 0; }
.entry-grid { max-width: 1400px; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: clamp(1.5rem, 4vw, 4rem); align-items: end; }
.entry-flip .entry-grid { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); }
.entry-flip .entry-photo { order: 2; }
.entry-photo { position: relative; margin: 0; aspect-ratio: 2.16 / 1; background: rgba(0,0,0,.2); }
.entry-photo { overflow: visible; }
.entry-static { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.entry-wall { width: 100%; height: 100%; display: block; cursor: none; touch-action: pan-y; }
.paint-prompt { display: none; }
/* the roller's footprint follows the pointer so it's obvious the photo can be painted */
.roller-ghost { position: absolute; z-index: 2; top: 0; left: 0; width: var(--rw, 120px); height: var(--rw, 120px); margin: calc(var(--rw, 120px) / -2) 0 0 calc(var(--rw, 120px) / -2); border: 2px solid rgba(255,255,255,.9); outline: 1px solid rgba(0,0,0,.35); border-radius: 4px; pointer-events: none; opacity: 0; transition: opacity .2s; }
.entry-photo:hover .roller-ghost { opacity: 1; }
@media (hover: none) { .roller-ghost { display: none; } }
.entry-tape { position: absolute; left: 1rem; bottom: -1rem; }
.entry-card { color: var(--ink); display: grid; gap: 1rem; padding-bottom: .5rem; }
.entry-card h2 { font-size: var(--t-xl); line-height: 1.1; }
.entry-card p { color: var(--soft); }
.entry-kind { font-size: var(--t-s); font-weight: 650; }
.entry-times { margin: .5rem 0 0; display: grid; gap: .35rem; font-size: var(--t-s); }
.entry-times div { display: grid; grid-template-columns: 4.5rem 1fr; }
.entry-times dt { font-weight: 700; }
.entry-times dd { margin: 0; color: var(--soft); }
.entry-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: .5rem; }
.entry .btn-ink { --bg: var(--ink); --fg: var(--wall); }
.logbook-more { background: var(--rec-black); color: var(--hall-white); padding: clamp(3rem, 6vw, 5rem) 0; }
.logbook-more .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.logbook-more p { max-width: 40em; font-size: var(--t-l); color: #CFCBC3; }
.logbook-filters { display: flex; flex-wrap: wrap; gap: .6rem; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter) clamp(2rem, 4vw, 3rem); background: var(--rec-black); }
.filter { min-height: 44px; padding: .45rem 1rem; border: 1px solid var(--hall-white); border-radius: 999px; background: transparent; color: var(--hall-white); font: inherit; font-size: 1rem; cursor: pointer; }
.filter[aria-pressed="true"] { background: var(--hall-white); color: var(--rec-black); }
.two-frame { display: grid; grid-template-columns: 2fr 3fr; aspect-ratio: 2.16 / 1; background: rgba(0,0,0,.14); }
.pair-frame { position: relative; min-width: 0; height: 100%; }
.pair-frame img { width: 100%; height: 100%; object-fit: cover; }
.frame-tape { position: absolute; z-index: 2; left: .5rem; bottom: -1rem; max-width: calc(100% - .75rem); display: flex; flex-wrap: wrap; gap: .2em .45em; font-size: clamp(.58rem, .85vw, .8rem); }
.step-photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
[hidden] { display: none !important; }

/* These pages share the same static markup, with one route visible at a time. */
.page-logbook .hero, .page-logbook .how, .page-logbook .colour, .page-logbook .quote { display: none; }
.page-quote .hero, .page-quote .logbook-intro, .page-quote .entry, .page-quote .logbook-more, .page-quote .how, .page-quote .colour { display: none; }
.page-quote .quote { scroll-margin-top: var(--nav-h); }

/* ── How Alex Taylor works ──────────────────────────────────────────────────────── */
.how { background: var(--greige); padding: clamp(5rem, 10vw, 8rem) 0; }
.how .lede { margin-top: 1.25rem; }
.steps { list-style: none; margin: clamp(3rem, 6vw, 4.5rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); counter-reset: step; }
.steps li { counter-increment: step; padding: 1.5rem 1.4rem 0 0; display: grid; align-content: start; gap: 1rem; position: relative; }
.steps li + li { padding-left: 1.4rem; border-left: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); }
.steps li::before { content: counter(step); font-variation-settings: var(--casual); font-weight: 800; font-size: 2.25rem; line-height: 1; }
.step-tape { justify-self: start; }
.steps blockquote { margin: 0; font-size: var(--t-l); line-height: 1.38; font-weight: 460; }
.who { font-size: var(--t-s); opacity: .75; }
.how-foot { margin-top: 3rem; font-weight: 600; }

/* ── Colour ────────────────────────────────────────────────────────────────── */
.colour { position: relative; background: var(--c-paper, var(--hall-white)); color: var(--c-ink, var(--ink)); padding: clamp(5rem, 10vw, 8rem) 0; transition: color .5s; isolation: isolate; }
.colour-wall { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.colour .btn-ink { --bg: var(--c-ink, var(--ink)); --fg: var(--c-paper, var(--hall-white)); }
.colour-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: end; }
.chips { list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 1.25rem; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.75rem, 1.5vw, 1.25rem); }
.chips li { display: flex; }
.chip { width: 100%; font: inherit; text-align: left; color: var(--rec-black); border: 0; border-radius: 0; cursor: pointer; background: #fff; padding: .6rem .6rem 1rem; display: grid; align-content: start; gap: .25rem; box-shadow: 0 1px 0 rgba(0,0,0,.12); }
.chip[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--c-ink, var(--ink)); }
.chip-swatch { display: block; aspect-ratio: 1 / 1.15; background: var(--c); margin-bottom: .6rem; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.chip b { font-variation-settings: var(--casual); font-weight: 760; font-size: 1.0625rem; line-height: 1.2; padding-inline: .2rem; }
.chip span:last-child { font-size: var(--t-xs); opacity: .72; padding-inline: .2rem; }
.colour .fine { margin-bottom: 1.75rem; }

/* ── Quote ─────────────────────────────────────────────────────────────────── */
.quote { background: var(--greige); padding: clamp(5rem, 10vw, 8rem) 0; border-top: 2px solid var(--ink); }
.quote-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: end; }
.quote-grid { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .9fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.house { width: 100%; height: auto; display: block; overflow: visible; color: var(--ink); }
.ground { stroke: var(--ink); stroke-width: 2; }
.zone { cursor: pointer; outline: none; }
.zone .z { fill: color-mix(in srgb, var(--greige) 70%, #fff); stroke: var(--ink); stroke-width: 1.5; transition: fill .25s; }
.zone:hover .z { fill: #fff; }
.zone:focus-visible .z { stroke: var(--red); stroke-width: 4; }
.zone .paint { pointer-events: none; }
.zl { font-family: "Recursive"; font-variation-settings: "CASL" 1; font-weight: 700; font-size: 17px; text-anchor: middle; fill: var(--ink); pointer-events: none; }
.zl-s { font-size: 14px; }
.zone[aria-checked="true"] .zl:not(.zl-out) { fill: var(--zl, var(--ink)); }
.extras { border: 0; padding: 0; margin: 1.75rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.extras legend { font-weight: 700; font-size: var(--t-s); margin-bottom: .6rem; padding: 0; }
.legend-mobile { display: none; }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pill span { display: inline-flex; align-items: center; min-height: 44px; padding: .45rem 1rem; border: 1.5px solid var(--ink); border-radius: 999px; font-size: 1rem; font-weight: 560; }
.pill input:checked + span { background: var(--ink); color: var(--hall-white); }
.pill input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 2px; }
.selection-prompt { display: none; }
.order { position: sticky; top: 5.5rem; background: #fff; padding: 1.6rem; display: grid; gap: 1rem; box-shadow: 0 1px 0 rgba(0,0,0,.14); }
.order h3 { font-size: 1.75rem; }
.order-empty { opacity: .72; }
.order-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.order-list li { display: flex; align-items: center; gap: .7rem; font-weight: 560; }
.order-list i { width: 1.1rem; height: 1.1rem; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); flex: none; }
.order-list li.extra i { background: none; box-shadow: none; }
.order-fields { display: grid; gap: .8rem; padding-top: .6rem; border-top: 1px solid rgba(0,0,0,.14); }
.order-fields label { display: grid; gap: .3rem; font-weight: 650; font-size: var(--t-s); }
.order-fields input, .order-fields textarea { font: inherit; font-weight: 420; font-size: 1rem; padding: .7rem .8rem; border: 1.5px solid color-mix(in srgb, var(--ink) 45%, transparent); border-radius: 3px; background: #FBFAF8; color: var(--ink); min-height: 48px; }
.order-send { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ── Footer ────────────────────────────────────────────────────────────────── */
.foot { background: var(--rec-black); color: var(--hall-white); padding: 4rem 0 5rem; }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2rem; font-size: 1rem; }
.foot-grid img { width: 48px; height: auto; margin-bottom: 1rem; }
.foot-name { font-weight: 800; }
.foot-h { font-size: 1.25rem; margin-bottom: .6rem; }
.open { margin-top: .6rem; font-size: var(--t-s); color: #CFCBC3; }

/* ── Phones ────────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  :root { --t-b: 1.0625rem; --t-l: 1.1875rem; }
  :root { --nav-h: 60px; }
  .nav { gap: .75rem; padding: .5rem 1rem; min-height: var(--nav-h); }
  .nav-links, .nav-phone { display: none; }
  .brand span { font-size: .875rem; }
  .brand img { width: 28px; }
  .hero { height: var(--hero-h, 230vh); }
  .hero-wall { z-index: 1; object-fit: cover; }
  .hero-panel { z-index: 3; left: 0; right: 0; bottom: 0; width: auto; padding: .7rem 1rem calc(.65rem + env(safe-area-inset-bottom)); gap: .35rem; }
  .hero-panel > p:first-child { font-size: .9rem; line-height: 1.3; }
  .hero-proof { font-size: .8rem; }
  .hero-copy-desktop { display: inline; }
  .hero-copy-mobile, .hint-desktop, .quote-heading-desktop, .quote-lede-desktop, .legend-desktop, .order-empty-desktop { display: none; }
  .hint-mobile, .quote-heading-mobile, .quote-lede-mobile, .legend-mobile, .order-empty-mobile { display: inline; }
  .hero-actions { margin: 0; }
  .hero-actions .btn-red { display: none; }
  .hero-actions .btn { flex: 1 1 auto; }
  .hero-tape { z-index: 2; left: 1rem; bottom: auto; top: var(--tape-top, 60%); font-size: 1rem; }
  .hero-hint { z-index: 2; bottom: auto; top: calc(var(--tape-top, 60%) - 2.8rem); left: auto; right: 1rem; transform: none; }
  .hero-toggle { z-index: 2; left: 1rem; bottom: auto; top: calc(var(--tape-top, 60%) - 3.6rem); }
  .paint-prompt { position: absolute; z-index: 3; top: .75rem; right: .75rem; display: inline-flex; align-items: center; gap: .45rem; min-height: 42px; padding: .45rem .8rem; border: 2px solid #fff; border-radius: 999px; background: var(--red); color: #fff; font-size: .9rem; font-weight: 800; box-shadow: 0 3px 14px rgba(0,0,0,.3); pointer-events: none; }
  .paint-prompt svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .entry-photo:hover .paint-prompt { transform: translateY(-2px); }
  .entry-grid, .entry-flip .entry-grid { grid-template-columns: 1fr; padding: 0; }
  .entry-flip .entry-photo { order: 0; }
  .entry-photo { aspect-ratio: 4 / 3.4; }
  .two-frame { aspect-ratio: 4 / 3.4; }
  .frame-tape { left: .25rem; bottom: -.85rem; padding: .3em .45em; font-size: .62rem; }
  .entry-card { padding: 1.75rem 1.1rem 0; }
  .entry-tape { left: 1rem; }
  .steps { grid-template-columns: 1fr; border-top: 0; }
  .steps li, .steps li + li { padding: 1.4rem 0 1.6rem; border-left: 0; border-top: 1.5px solid var(--ink); grid-template-columns: 2.5rem 1fr; column-gap: .75rem; }
  .steps li::before { grid-row: span 3; font-size: 1.75rem; }
  .steps li:nth-child(4)::before { grid-row: span 4; }
  .colour-head, .quote-head { grid-template-columns: 1fr; }
  .chips { grid-template-columns: repeat(5, 62%); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; }
  .chip { scroll-snap-align: start; }
  .quote-grid { grid-template-columns: 1fr; }
  .quote-house { margin-inline: -.5rem; }
  .zl { font-size: 25px; } .zl-s { font-size: 20px; }
  .selection-prompt { display: grid; gap: .15rem; margin: 0 0 .8rem; padding: .8rem .9rem; border-left: 4px solid var(--red); background: #fff; }
  .selection-prompt strong { font-size: 1rem; }
  .selection-prompt span { font-size: .875rem; color: color-mix(in srgb, var(--ink) 78%, transparent); }
  .extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .extras legend { grid-column: 1 / -1; margin-bottom: .25rem; }
  .legend-mobile small { font-size: .8em; font-weight: 450; opacity: .7; }
  .pill { min-width: 0; }
  .pill span { width: 100%; min-height: 48px; gap: .5rem; padding: .5rem .65rem; border-radius: 4px; font-size: .9rem; }
  .pill span::before { content: ""; width: 18px; height: 18px; flex: 0 0 18px; border: 1.5px solid currentColor; border-radius: 3px; }
  .pill input[type="radio"] + span::before { border-radius: 50%; }
  .pill input:checked + span::before { border-color: var(--hall-white); background: var(--hall-white); box-shadow: inset 0 0 0 4px var(--ink); }
  .order { position: static; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .hero { height: auto; }
  .hero-stage { position: relative; }
  .btn.is-wet::after { animation: none; }
  * { scroll-behavior: auto !important; transition: none !important; }
}

.static-page { min-height: 100vh; background: var(--greige); padding: clamp(8rem, 16vh, 11rem) 0 clamp(5rem, 10vw, 8rem); }
.static-page .wrap { max-width: 900px; }
.static-page h1 { font-size: var(--t-2xl); }
.static-page .lede { margin-top: 1.5rem; }
.static-copy { display: grid; gap: 1.3rem; max-width: 42em; margin-top: 2rem; }
.static-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.notfound { min-height: 100vh; padding: var(--nav-h) 0 0; display: grid; grid-template-rows: minmax(15rem, 54vh) 1fr; background: var(--greige); }
.notfound-wall { position: relative; overflow: hidden; background: #CFCAC0 url(/assets/pairs/basement/before-1600.jpg) center 47% / cover no-repeat; }
.notfound-paint { position: absolute; inset: 0; background: url(/assets/pairs/basement/after-1600.jpg) center 47% / cover no-repeat; clip-path: polygon(0 0, 34% 0, 34% 18%, 32.8% 29%, 35% 42%, 32.5% 55%, 34.5% 67%, 32.6% 83%, 34% 100%, 0 100%); }
.notfound-copy { align-self: start; padding: clamp(2.5rem, 7vw, 5rem) var(--gutter); }
.notfound-copy h1 { max-width: 14ch; font-size: var(--t-2xl); }