/* Kilnworth: waitlist template. Written for this template.
   Default (no JavaScript, reduced motion, no WebGL): a plain, stacked page with a still picture.
   html.live (set by js/app.js when WebGL2 works and motion is allowed): the clay object is drawn behind the opening and the pinned story. */

/* ===================== BRAND SETTINGS ===================== */
:root {
  --t-paper: #efe7d8;        /* page background. Keep in step with `paper` in js/clay.js (the shader draws the same colour) */
  --t-paper-2: #e5dac7;      /* second paper tone for alternate sections */
  --t-card: #f6f0e4;         /* cards and form fields */
  --t-ink: #2a1912;          /* main text, deep clay brown */
  --t-muted: #6a5242;        /* secondary text */
  --t-accent: #a2462c;       /* terracotta: italic words, labels */
  --t-glaze: #7fae9a;        /* celadon: highlights on dark */
  --t-glaze-deep: #35594d;   /* deep celadon: last call */
  --t-on-accent: #f7f0e3;    /* text on ink buttons */
  --t-line: rgba(42, 25, 18, .16);
  --t-display: 'Cormorant', 'Iowan Old Style', Georgia, serif;
  --t-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
/* ========================================================== */

@font-face { font-family: 'Cormorant'; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/cormorant-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant'; font-weight: 500; font-style: italic; font-display: swap; src: url(../fonts/cormorant-latin-500-italic.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant'; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/cormorant-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 100 900; font-style: normal; font-display: swap; src: url(../fonts/inter-latin-wght-normal.woff2) format('woff2'); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--t-paper); color: var(--t-ink); font: 400 1.0625rem/1.6 var(--t-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .2em; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--t-glaze); color: var(--t-ink); }
:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 3px; border-radius: 4px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--t-ink); color: var(--t-on-accent); padding: .6rem 1rem; border-radius: 999px; transition: top .2s; }
.skip:focus { top: 12px; }
.wrap { width: min(1240px, 100% - 2 * clamp(20px, 5vw, 64px)); margin-inline: auto; }

/* ---------- type ---------- */
.display, .display-2, .display-3 { font-family: var(--t-display); font-weight: 500; letter-spacing: -.02em; text-wrap: balance; }
.display { font-size: clamp(2.9rem, 6.3vw, 6.8rem); line-height: .93; }
.display-2 { font-size: clamp(2.4rem, 5.2vw, 5rem); line-height: .98; }
.display-3 { font-size: clamp(2.3rem, 5vw, 4.8rem); line-height: 1; }
em { font-style: italic; color: var(--t-accent); }
.eyebrow { display: flex; align-items: center; gap: .65rem; font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--t-muted); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--t-accent); flex: none; }
.section-lede { color: var(--t-muted); max-width: 34rem; margin-top: 1.4rem; }
.section-head { display: grid; gap: 1.2rem; }

/* ---------- buttons and form ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; border: 0; cursor: pointer; text-decoration: none; background: var(--t-ink); color: var(--t-on-accent); font-weight: 600; font-size: .95rem; padding: .95rem 1.5rem; border-radius: 999px; white-space: nowrap; position: relative; overflow: hidden; transition: background .35s cubic-bezier(.2, .7, .2, 1), transform .35s cubic-bezier(.2, .7, .2, 1); }
.btn::after { content: ''; width: 1.05em; height: 1px; background: currentColor; box-shadow: 0 0 0 0 currentColor; transition: width .35s cubic-bezier(.2, .7, .2, 1); position: relative; }
.btn:hover { background: var(--t-accent); }
.btn:hover::after { width: 1.5em; }
.btn:active { transform: scale(.97); }
.btn-small { padding: .6rem 1.1rem; font-size: .85rem; }
.btn-small::after { display: none; }

.join { max-width: 33rem; position: relative; }
.join-row { display: flex; gap: .4rem; padding: .35rem; background: rgba(250, 246, 237, .72); border: 1px solid var(--t-line); border-radius: 999px; transition: box-shadow .3s, border-color .3s; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.join-row:focus-within { border-color: var(--t-ink); box-shadow: 0 0 0 4px rgba(127, 174, 154, .45); }
.join input[type=email] { flex: 1; width: 100%; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 1rem; padding: .6rem 1rem; color: var(--t-ink); }
.join input[type=email]::placeholder { color: #8c7667; }
.join input:focus { outline: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.join-note { min-height: 1.6em; margin-top: .8rem; padding-left: 1rem; font-size: .9rem; color: var(--t-muted); }
.join-note.ok { color: var(--t-glaze-deep); font-weight: 600; }
.join-note.err { color: #9a2f1a; font-weight: 600; }
.join.done .join-row { background: var(--t-glaze-deep); border-color: var(--t-glaze-deep); }
.join.done input[type=email] { color: var(--t-on-accent); }
.join.done .btn { background: var(--t-on-accent); color: var(--t-glaze-deep); pointer-events: none; }

/* ---------- navigation ---------- */
.nav { --nav-bg: var(--t-paper); position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem clamp(20px, 4vw, 48px); color: var(--t-ink); transition: background .4s, color .5s, box-shadow .4s, padding .4s; }
.nav.solid { background: color-mix(in srgb, var(--t-paper) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--t-line); padding-block: .7rem; }
.nav.dark.solid { background: color-mix(in srgb, #1e120c 80%, transparent); box-shadow: 0 1px 0 rgba(243, 232, 214, .12); }
.nav.dark { color: #f3e8d6; --nav-bg: #1e120c; }
.nav.dark .btn { background: #f3e8d6; color: #2a1912; }
.nav.dark .btn:hover { background: var(--t-glaze); }
.brand { display: inline-flex; align-items: center; gap: .55rem; font: 600 1.7rem/1 var(--t-display); letter-spacing: -.01em; text-decoration: none; }
.nav-links { display: flex; gap: 2rem; font-size: .88rem; font-weight: 500; }
.nav-links a { text-decoration: none; position: relative; padding-block: .3rem; }
.nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.nav-links a:hover::after { transform: scaleX(1); }

/* ---------- the clay canvas (live mode only) ---------- */
.clay { display: none; }
html.live .clay { display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none; }
html.live .clay canvas { width: 100%; height: 100%; display: block; }
html.live .clay.off { visibility: hidden; }
main { position: relative; z-index: 1; }

/* ---------- 1. opening ---------- */
.hero { position: relative; min-height: 100svh; display: grid; align-items: center; padding: 7.5rem clamp(20px, 5vw, 80px) 5rem; }
.hero-copy { min-width: 0; max-width: min(45rem, 56vw); display: grid; gap: 1.6rem; position: relative; z-index: 2; }
.hero .display em { display: inline-block; }
.lede { font-size: 1.12rem; color: var(--t-muted); max-width: 34rem; }
.facts { display: flex; flex-wrap: wrap; gap: .5rem 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--t-line); }
.facts li { display: grid; gap: .1rem; }
.facts strong { font: 500 2rem/1 var(--t-display); letter-spacing: -.01em; font-variant-numeric: lining-nums tabular-nums; }
.facts span { font-size: .78rem; color: var(--t-muted); letter-spacing: .02em; }
.hero-still { position: absolute; right: -2%; top: 50%; transform: translateY(-50%); width: min(62vw, 980px); height: auto; z-index: 0; mix-blend-mode: multiply; }
html.live .hero-still { display: none; }
.hero-caption { position: absolute; right: clamp(20px, 3vw, 44px); bottom: 2.2rem; display: none; align-items: center; gap: .6rem; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--t-muted); }
html.live .hero-caption { display: flex; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--t-accent); animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; transform: scale(.7); } }
.hero-cue { position: absolute; left: clamp(20px, 5vw, 80px); bottom: 1.6rem; display: none; align-items: center; gap: .8rem; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--t-muted); }
html.live .hero-cue { display: inline-flex; }
.hero-cue i { width: 1px; height: 38px; background: var(--t-line); position: relative; overflow: hidden; }
.hero-cue i::after { content: ''; position: absolute; inset: 0; background: var(--t-ink); transform: translateY(-100%); animation: cue 2.4s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* ---------- 2 to 4. the story ---------- */
.story { position: relative; padding: clamp(3rem, 8vw, 6rem) clamp(20px, 5vw, 80px); display: grid; gap: 0; }
.story-hud, .ticks { display: none; }
.panels { display: grid; border-top: 1px solid var(--t-line); }
.panel { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 1rem 2rem; padding: 2.4rem 0; border-bottom: 1px solid var(--t-line); }
.panel .stage-no { grid-row: 1 / 3; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--t-muted); }
.panel .stage-no span { font: 500 3rem/1 var(--t-display); color: var(--t-accent); letter-spacing: 0; display: block; }
.panel h2 { font: 500 clamp(2.4rem, 7vw, 4.4rem)/.95 var(--t-display); letter-spacing: -.02em; }
.panel p:not(.stage-no) { color: var(--t-muted); max-width: 32rem; }
.panel-dark { background: #2a1912; color: #f3e8d6; padding-inline: 1.6rem; border-radius: 18px; border: 0; margin-block: .6rem; }
.panel-dark .stage-no, .panel-dark p:not(.stage-no) { color: #d9c7b0; }
.panel-dark .stage-no span { color: #f0a679; }

html.live .story { padding: 0; display: block; }
html.live .story-stage { position: relative; height: 100svh; overflow: hidden; }
html.live .story-hud { display: block; position: absolute; left: clamp(20px, 5vw, 80px); top: 5.4rem; z-index: 3; }
.counter { font: 500 1rem/1 var(--t-body); letter-spacing: .1em; color: var(--ink, var(--t-ink)); transition: color .5s; font-variant-numeric: tabular-nums; }
.counter b { font: 500 1.4rem/1 var(--t-display); }
.counter span { color: var(--t-muted); }
html.live .panels { display: block; border: 0; position: absolute; inset: 0; pointer-events: none; }
html.live .panel { position: absolute; left: clamp(20px, 5vw, 80px); top: 50%; width: min(31rem, 44vw); display: block; padding: 0; border: 0; background: none; border-radius: 0; margin: 0; opacity: 0; transform: translateY(calc(-50% + 28px)); will-change: opacity, transform; color: var(--t-ink); }
html.live .panel[data-stage="2"] { color: #f6ead7; }
html.live .panel .stage-no { display: none; }
html.live .panel[data-stage="2"] .stage-no, html.live .panel[data-stage="2"] p:not(.stage-no) { color: #dcc9b2; }
html.live .panel .stage-no span { display: inline; font: 500 1.2rem/1 var(--t-display); margin-right: .1rem; }
html.live .panel h2 { font-size: clamp(4rem, 9.4vw, 9rem); margin-bottom: 1.6rem; margin-left: -.04em; }
html.live .panel p:not(.stage-no) { font-size: 1.1rem; max-width: 27rem; }
html.live .panel[data-stage="2"] .stage-no span { color: #f0a679; }
html.live .panel:not([inert]) { pointer-events: auto; }

html.live .ticks { display: flex; gap: clamp(.8rem, 2.4vw, 2.2rem); position: absolute; left: clamp(20px, 4vw, 72px); bottom: 2rem; z-index: 3; color: var(--ink, var(--t-ink)); transition: color .5s; }
.ticks button { background: none; border: 0; cursor: pointer; display: grid; gap: .55rem; text-align: left; padding: .2rem 0; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; opacity: .55; transition: opacity .35s; }
.ticks button:hover, .ticks .on button { opacity: 1; }
.ticks i { display: block; height: 2px; width: clamp(34px, 6vw, 86px); background: currentColor; opacity: .25; position: relative; }
.ticks i::after { content: ''; position: absolute; inset: 0; background: currentColor; transform: scaleX(var(--fill, 0)); transform-origin: left; opacity: 4; }
.story[data-dark="1"] { --ink: #f3e8d6; }

/* ---------- 5. collection ---------- */
.defs { position: absolute; }
.collection, .founding, .timeline, .questions, .last, .foot { position: relative; z-index: 2; }
.collection { background: var(--t-paper); padding: clamp(5rem, 11vw, 10rem) 0; }
.collection .section-head { max-width: 52rem; }
.pieces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.8rem, 1.6vw, 1.4rem); margin-top: clamp(2.6rem, 5vw, 4.5rem); }
.piece figure { background: var(--tint, var(--t-card)); border-radius: 22px; overflow: hidden; height: 100%; display: grid; grid-template-rows: auto 1fr; transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .6s; }
.piece:nth-child(1) { --tint: #f3ead8; }
.piece:nth-child(2) { --tint: #dfe8e0; }
.piece:nth-child(3) { --tint: #e3e6ee; }
.piece:nth-child(4) { --tint: #e8d9cd; }
.piece:nth-child(5) { --tint: #e0e8df; }
.piece:nth-child(6) { --tint: #f0dccf; }
.piece figure:hover { transform: translateY(-6px); box-shadow: 0 28px 40px -28px rgba(42, 25, 18, .5); }
.piece svg { width: 100%; height: auto; aspect-ratio: 200 / 170; padding: 1.2rem 1.4rem .2rem; overflow: visible; }
.piece .shadow { fill: rgba(42, 25, 18, .16); transition: transform .6s cubic-bezier(.2, .7, .2, 1), opacity .6s; transform-origin: 50% 50%; transform-box: fill-box; }
.piece .body, .piece .inner, .piece .handle, .piece .foot, .piece .glazed-rim { transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.piece figure:hover .body, .piece figure:hover .inner, .piece figure:hover .handle, .piece figure:hover .foot, .piece figure:hover .glazed-rim { transform: translateY(-5px); }
.piece figure:hover .shadow { transform: scale(.88); opacity: .6; }
.piece .gloss { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 4; stroke-linecap: round; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.piece figure:hover .gloss { transform: translateY(-5px); }
.piece .inner { fill: rgba(25, 12, 6, .26); }
.piece .inner.soft { fill: rgba(80, 55, 20, .12); }
.piece .rim { fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: 2; }
.piece figcaption { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .1rem 1rem; padding: 1.1rem 1.5rem 1.5rem; border-top: 1px solid rgba(42, 25, 18, .1); margin-top: .6rem; align-self: end; }
.piece-name { font: 500 1.7rem/1.05 var(--t-display); letter-spacing: -.01em; }
.piece-spec { grid-column: 1; font-size: .82rem; color: var(--t-muted); }
.price { grid-column: 2; grid-row: 1 / 3; text-align: right; font: 500 1.7rem/1 var(--t-display); font-variant-numeric: lining-nums; }
.price small { display: block; font: 600 .62rem/1.6 var(--t-body); letter-spacing: .14em; text-transform: uppercase; color: var(--t-muted); }

/* ---------- 6. founding offer ---------- */
.founding { background: #2a1912; color: #f3e8d6; padding: clamp(5rem, 10vw, 9rem) 0; overflow: hidden; }
.founding .eyebrow { color: #cdb9a2; }
.founding .dot { background: var(--t-glaze); }
.founding em { color: var(--t-glaze); }
.founding-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.founding-lead { display: grid; gap: 1.6rem; }
.meter { margin-top: 1.6rem; max-width: 30rem; }
.meter-top { display: flex; align-items: baseline; gap: .8rem; margin-bottom: .9rem; }
.meter-top strong { font: 500 clamp(4.5rem, 9vw, 8rem)/.85 var(--t-display); letter-spacing: -.03em; font-variant-numeric: lining-nums tabular-nums; color: #f3e8d6; }
.meter-top span { color: #cdb9a2; font-size: .95rem; }
.meter-bar { height: 8px; border-radius: 99px; background: rgba(243, 232, 214, .16); overflow: hidden; }
.meter-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #a5c9b9, var(--t-glaze)); transform: scaleX(var(--fill)); transform-origin: left; transition: transform 1.6s cubic-bezier(.2, .7, .2, 1) .2s; }
.meter.reveal:not(.in) .meter-bar i { transform: scaleX(0); }
.offers { display: grid; }
.offers li { display: grid; grid-template-columns: 3.2rem 1fr; gap: 1rem; padding: 1.7rem 0; border-top: 1px solid rgba(243, 232, 214, .18); }
.offers li:last-child { border-bottom: 1px solid rgba(243, 232, 214, .18); }
.offers .n { font: 500 1.4rem/1.2 var(--t-display); color: var(--t-glaze); }
.offers h3 { font: 500 clamp(1.7rem, 2.6vw, 2.2rem)/1.05 var(--t-display); margin-bottom: .5rem; }
.offers p { color: #d4c1ab; max-width: 27rem; }
.glazes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: clamp(1rem, 3vw, 2.6rem); padding-top: 1rem; }
.glazes li { display: flex; align-items: center; gap: .9rem; font: 500 1.4rem/1 var(--t-display); }
.sw { width: 58px; height: 58px; border-radius: 50%; display: block; box-shadow: inset 0 -6px 10px rgba(0, 0, 0, .25), 0 10px 18px -8px rgba(0, 0, 0, .6); position: relative; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.sw::after { content: ''; position: absolute; left: 14%; top: 12%; width: 38%; height: 26%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 72%); transform: rotate(-24deg); }
.glazes li:hover .sw { transform: scale(1.1) rotate(-8deg); }
.sw-cel { background: radial-gradient(circle at 36% 30%, #b3d4c5, #7fae9a 55%, #4a7a68); }
.sw-oat { background: radial-gradient(circle at 36% 30%, #f8f0df, #e3d5b9 55%, #bda885); }
.sw-iron { background: radial-gradient(circle at 36% 30%, #8a573f, #4e2c1f 55%, #2a150d); }
.sw-cob { background: radial-gradient(circle at 36% 30%, #5b7fb8, #2d4a80 55%, #1a2d52); }

/* ---------- 7. how it works ---------- */
.timeline { background: var(--t-paper-2); padding: clamp(5rem, 10vw, 9rem) 0; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2.4rem); margin-top: clamp(3rem, 6vw, 5rem); position: relative; --p: 1; }
.steps::before, .steps::after { content: ''; position: absolute; left: 0; right: 0; top: 1.4rem; height: 1px; background: var(--t-line); }
.steps::after { background: var(--t-accent); transform: scaleX(var(--p)); transform-origin: left; height: 2px; top: calc(1.4rem - .5px); }
.steps li { position: relative; display: grid; gap: .55rem; align-content: start; padding-top: 0; }
.step-no { position: relative; z-index: 1; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--t-paper-2); border: 1px solid var(--t-ink); font: 500 1.3rem/1 var(--t-display); margin-bottom: 1.2rem; transition: background .4s, color .4s; }
.steps li:hover .step-no { background: var(--t-ink); color: var(--t-paper-2); }
.steps time { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--t-accent); }
.steps h3 { font: 500 clamp(1.8rem, 2.8vw, 2.4rem)/1 var(--t-display); letter-spacing: -.01em; }
.steps p { color: var(--t-muted); font-size: .97rem; max-width: 17rem; }

/* ---------- 8. questions ---------- */
.questions { background: var(--t-paper); padding: clamp(5rem, 10vw, 9rem) 0; }
.q-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.q-grid .section-head { position: sticky; top: 6.5rem; }
.section-lede a { color: var(--t-accent); font-weight: 600; }
.faq { border-top: 1px solid var(--t-line); }
.faq details { border-bottom: 1px solid var(--t-line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.5rem 0; font: 500 clamp(1.4rem, 2.2vw, 1.85rem)/1.1 var(--t-display); letter-spacing: -.005em; transition: color .3s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1px solid var(--t-ink); background: linear-gradient(var(--t-ink), var(--t-ink)) center / 10px 1px no-repeat, linear-gradient(var(--t-ink), var(--t-ink)) center / 1px 10px no-repeat; transition: transform .45s cubic-bezier(.2, .7, .2, 1), background-color .3s; }
.faq summary:hover { color: var(--t-accent); }
.faq details[open] summary::after { transform: rotate(135deg); background-color: var(--t-ink); background-image: linear-gradient(var(--t-paper), var(--t-paper)), linear-gradient(var(--t-paper), var(--t-paper)); }
.faq details p { padding: 0 3.4rem 1.7rem 0; color: var(--t-muted); max-width: 38rem; animation: open .5s cubic-bezier(.2, .7, .2, 1); }
@keyframes open { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- 9. last call, footer ---------- */
.last { background: var(--t-glaze-deep); color: #f3ecdd; padding: clamp(5rem, 11vw, 10rem) 0; overflow: hidden; }
.last .eyebrow { color: #bfd6cb; }
.last .dot { background: #f0a679; }
.last em { color: #f0c9a6; }
.last::before { content: ''; position: absolute; right: clamp(-4rem, 3vw, 3rem); bottom: 0; width: clamp(15rem, 28vw, 26rem); aspect-ratio: 3 / 4; border-radius: 999px 999px 0 0; background: radial-gradient(ellipse 62% 52% at 50% 100%, #f6b17a 0%, #d9703d 30%, rgba(122, 52, 28, .85) 62%, #1f3b32 100%); box-shadow: inset 0 0 0 clamp(12px, 1.8vw, 22px) #2c4d42, 0 0 100px rgba(240, 150, 90, .2); }
.last-inner { position: relative; z-index: 1; display: grid; gap: 2rem; justify-items: start; }
.last .display-3 { max-width: 15em; }
.join-light { margin-top: .6rem; }
.join-light .join-row { background: rgba(247, 240, 227, .96); border-color: transparent; }
.join-light .join-row:focus-within { box-shadow: 0 0 0 4px rgba(240, 201, 166, .5); }
.join-light .join-note { color: #cfe0d7; }
.join-light .join-note.ok { color: #fff; }
.join-light .join-note.err { color: #ffc9b8; }
.join-light.done .join-row { background: #1f3b32; }
.last-small { color: #bfd6cb; font-size: .9rem; }
.foot { background: #1e120c; color: #d9c7b0; padding: clamp(3rem, 6vw, 5rem) 0 2.4rem; overflow: hidden; }
.foot-word { font: 600 clamp(5rem, 24vw, 21rem)/.8 var(--t-display); letter-spacing: -.04em; color: #2d1b12; margin: 0 0 clamp(2rem, 4vw, 3.4rem) -.04em; user-select: none; white-space: nowrap; }
.foot-cols { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 2rem; font-size: .9rem; }
.foot-cols strong { color: #f3e8d6; }
.foot-note { color: #a89580; font-size: .82rem; }

/* ---------- reveal (class added by js/scroll.js; only when motion is allowed) ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2, .7, .2, 1) var(--d, 0s), transform .9s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- smaller screens ---------- */
@media (max-width: 960px) {
  .nav-links { display: none; }
  .pieces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .founding-grid, .q-grid { grid-template-columns: 1fr; }
  .q-grid .section-head { position: static; }
  .steps { grid-template-columns: 1fr; gap: 0; }
  .steps::before, .steps::after { left: 1.4rem; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .steps::after { width: 2px; left: calc(1.4rem - .5px); transform: scaleY(var(--p)); transform-origin: top; height: auto; }
  .steps li { padding: 0 0 2.4rem 4.2rem; }
  .step-no { position: absolute; left: 0; top: 0; margin: 0; }
  .steps p { max-width: 26rem; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .foot-note { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .last::before { width: 15rem; right: -3rem; opacity: .5; }
  body { font-size: 1rem; }
  .hero-copy { max-width: 36rem; }
  .hero { align-items: stretch; padding: 6rem 20px 2rem; }
  .hero-copy { gap: 1rem; }
  .display { font-size: clamp(2.3rem, 10.4vw, 3.4rem); }
  .lede { font-size: .98rem; }
  .lede .more { display: none; }
  html.live .hero { padding-top: 5rem; }
  .hero-still { position: relative; right: auto; top: auto; transform: none; width: 118%; max-width: none; margin: 0 -9% 0; order: -1; }
  .hero { display: flex; flex-direction: column; justify-content: flex-end; }
  html.live .hero-caption, html.live .hero-cue { display: none; }
  .facts { gap: .4rem 1.6rem; padding-top: 1rem; }
  .facts li:nth-child(3) { display: none; }
  .facts strong { font-size: 1.6rem; }
  .join-row { flex-wrap: nowrap; }
  .btn { padding-inline: 1.15rem; }
  .btn::after { display: none; }
  .join input[type=email] { padding-inline: .8rem; }
  .panel { grid-template-columns: 1fr; padding: 1.8rem 0; }
  .panel .stage-no { grid-row: auto; }
  html.live .panel { left: 20px; right: 20px; width: auto; top: auto; bottom: 4.6rem; transform: translateY(24px); }
  html.live .panel h2 { font-size: clamp(3.4rem, 17vw, 4.6rem); margin-bottom: .8rem; }
  html.live .panel p:not(.stage-no) { font-size: .98rem; max-width: none; }
  html.live .story-hud { top: 4.6rem; left: 20px; }
  html.live .ticks { left: 20px; right: 20px; bottom: 1.3rem; justify-content: space-between; gap: .8rem; }
  .ticks button { width: 100%; }
  .ticks i { width: 100%; }
  .ticks li { flex: 1; }
  .pieces { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .piece figure { border-radius: 16px; }
  .piece svg { padding: .8rem .8rem 0; }
  .piece figcaption { grid-template-columns: 1fr; padding: .8rem 1rem 1.1rem; }
  .piece-name { font-size: 1.35rem; }
  .price { grid-column: 1; grid-row: auto; text-align: left; font-size: 1.35rem; margin-top: .5rem; }
  .price small { display: inline; margin-right: .4rem; }
  .meter-top strong { font-size: 5rem; }
  .glazes li { font-size: 1.2rem; }
  .sw { width: 48px; height: 48px; }
  .foot-cols { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .brand { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.glazes::before { content: 'Four glazes, mixed in small batches'; flex: 0 0 100%; font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #cdb9a2; }
.glazes { border-top: 1px solid rgba(243, 232, 214, .18); padding-top: 2rem; margin-top: 1rem; }