/* =====================================================================
   Milah Wooden Creations: base (lead-owned). Sections own their layout.
   Colours are plain hex on purpose: an oklch() custom property on Chrome
   < 111 is invalid at computed time and paints a white page (memory
   reference_oklch_old_browsers). Values are GROUNDWORK section 2 samples.
   url() paths are relative to assets/ (build.py convention).
   ===================================================================== */

@font-face {
  font-family: "Young Serif";
  src: url("fonts/site/young-serif-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Albert Sans";
  src: url("fonts/site/albert-sans-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- palette (sampled from her logo and photos) ---- */
  --char: #281e19;        /* the night bench: dark page base */
  --burn: #40362e;        /* engraving ink; secondary text on sage (4.84:1) */
  --bark: #795841;        /* log-slice bark ring: rims, small accents */
  --taupe: #8e7960;       /* logo script; large text on light only */
  --taupe-soft: #c7b29b;  /* secondary text on char (7.96:1) */
  --paper: #f0ece2;       /* primary text on char (13.8:1). Never a page background */
  --pine: #edcab4;        /* wood highlight, warm text on char (10.6:1) */
  --amber: #ca6a22;       /* the laser lid: tints and large text only (4.34:1 on char) */
  --amber-deep: #9e4f08;  /* lid in shadow */
  --amber-btn: #d97f2a;   /* burn button fill: char text on it 5.44:1 */
  --glow: #e7ad30;        /* lid glow: focus rings on dark (8.08:1), active states */
  --laser: #e26266;       /* the laser point AND the money button only (char text 4.79:1) */
  --laser-hover: #ea7a7d; /* char text 5.87:1 */
  --laser-core: #ffe9f2;  /* white-hot core of the point */
  --laser-bloom: #ff3d8b; /* bloom around the point */
  --blush: #e3b4a5;       /* colour-pop highlight on char (8.79:1) */
  --rose: #af5d50;        /* paint-pop fill (decoration only on light) */
  --sage-deep: #5c6346;   /* logo sprig; text only on paper/pine */
  --sage-wall: #a2a995;   /* her wall: the LIGHT section background (char 6.70:1) */

  /* ---- type ---- */
  --font-display: "Young Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Albert Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-display: clamp(2.75rem, 1.55rem + 5.4vw, 8.75rem);  /* 44 to 140px */
  --fs-h2: clamp(2.125rem, 1.45rem + 3vw, 4.5rem);         /* 34 to 72px */
  --fs-h3: clamp(1.5rem, 1.25rem + 1.1vw, 2.25rem);        /* 24 to 36px */
  --fs-lead: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);  /* 18 to 22px */
  --fs-body: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);     /* 16 to 17px */
  --fs-small: 0.9375rem;                                   /* 15px floor, nothing smaller */
  --lh-tight: 1.04;
  --lh-snug: 1.2;
  --lh-body: 1.55;

  /* ---- space ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --section-y: clamp(4.5rem, 2.8rem + 7vw, 10rem);        /* section padding */
  --section-y-tight: clamp(3rem, 2rem + 4vw, 6rem);
  --gutter: clamp(16px, 4.5vw, 56px);                      /* never under 16px */
  --wrap: 1240px;
  --wrap-narrow: 760px;
  --header-h: 72px;                                        /* base.js keeps this true */
  --radius: 14px;
  --radius-pill: 999px;

  /* ---- motion ---- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur: 320ms;

  /* ---- theme slots (dark by default; [data-theme] swaps them) ---- */
  --bg: var(--char);
  --fg: var(--paper);
  --fg-soft: var(--taupe-soft);
  --link: var(--pine);
  --focus: var(--glow);
  --line: rgba(240, 236, 226, 0.16);
  --chip-bg: rgba(240, 236, 226, 0.06);
  --chip-line: rgba(240, 236, 226, 0.34);
  --chip-on-bg: var(--paper);
  --chip-on-fg: var(--char);
}

[data-theme="dark"] {
  --bg: var(--char);
  --fg: var(--paper);
  --fg-soft: var(--taupe-soft);
  --link: var(--pine);
  --focus: var(--glow);
  --line: rgba(240, 236, 226, 0.16);
  --chip-bg: rgba(240, 236, 226, 0.06);
  --chip-line: rgba(240, 236, 226, 0.34);
  --chip-on-bg: var(--paper);
  --chip-on-fg: var(--char);
  color-scheme: dark;
}
[data-theme="sage"] {
  --bg: var(--sage-wall);
  --fg: var(--char);
  --fg-soft: var(--burn);
  --link: var(--char);
  --focus: var(--char);
  --line: rgba(40, 30, 25, 0.22);
  --chip-bg: rgba(240, 236, 226, 0.28);
  --chip-line: rgba(40, 30, 25, 0.45);
  --chip-on-bg: var(--char);
  --chip-on-fg: var(--paper);
  color-scheme: light;
}
[data-theme] { background-color: var(--bg); color: var(--fg); }

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background-color: #281e19;
  color-scheme: dark;
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background-color: #281e19;
  background-color: var(--char);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
textarea { resize: vertical; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: var(--laser); color: var(--char); }
[hidden] { display: none !important; }
main { display: block; }
main:focus, [tabindex="-1"]:focus { outline: none; }

/* headings: Young Serif has one weight, so hierarchy is size and space */
h1, h2, h3, .display, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-snug);
  text-wrap: balance;
  font-synthesis: none;
}
h1, .display { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -0.015em; }
h2, .h2 { font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -0.01em; }
h3, .h3 { font-size: var(--fs-h3); }
p { text-wrap: pretty; }
.lead { font-size: var(--fs-lead); line-height: 1.45; color: var(--fg); }
.soft { color: var(--fg-soft); }
.small { font-size: var(--fs-small); }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* ---------------------------------------------------------------- layout helpers */
.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}
.wrap--narrow { max-width: calc(var(--wrap-narrow) + 2 * var(--gutter)); }
.section { position: relative; padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }
.section--flush { padding-block: 0; }
.stack > * + * { margin-block-start: var(--stack, var(--space-4)); }

/* anchor targets clear the fixed header */
main > section[id], footer[id] { scroll-margin-top: var(--header-h); }

/* ---------------------------------------------------------------- a11y */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
.skip-link {
  position: fixed;
  top: 10px;
  left: max(16px, env(safe-area-inset-left));
  z-index: 200;
  padding: 0.7em 1.1em;
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--char);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus, .skip-link:focus-visible { transform: none; outline-color: var(--glow); }

/* ---------------------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--paper);
  --btn-fg: var(--char);
  --btn-bg-hover: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 52px;
  min-width: 44px;
  padding: 0.8em 1.55em;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 650 1.0625rem/1.1 var(--font-body);
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) ease, box-shadow var(--dur) var(--ease-out), transform var(--dur-fast) ease;
}
.btn:hover { background: var(--btn-bg-hover); text-decoration: none; }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--sm { min-height: 44px; padding: 0.6em 1.15em; font-size: 0.9375rem; }
.btn--lg { min-height: 60px; padding: 0.95em 1.9em; font-size: 1.1875rem; }
.btn--block { display: flex; width: 100%; }

/* the money button: pink = the laser = make yours. Only for "make yours / send" */
.btn--laser {
  --btn-bg: var(--laser);
  --btn-fg: var(--char);
  --btn-bg-hover: var(--laser-hover);
  box-shadow: 0 0 0 0 rgba(255, 61, 139, 0);
}
.btn--laser:hover { box-shadow: 0 0 0 5px rgba(226, 98, 102, 0.22), 0 6px 28px -6px rgba(255, 61, 139, 0.55); }

/* the burn button: amber, lid light */
.btn--burn {
  --btn-bg: var(--amber-btn);
  --btn-fg: var(--char);
  --btn-bg-hover: var(--glow);
}
.btn--burn:hover { box-shadow: 0 0 0 5px rgba(231, 173, 48, 0.22), 0 6px 28px -8px rgba(202, 106, 34, 0.7); }

/* quiet: outline on the current theme */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-bg-hover: var(--chip-bg);
  box-shadow: inset 0 0 0 1.5px var(--chip-line);
}
/* text button (e.g. "Skip to finished"), still a 44px target */
.btn--text {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-bg-hover: transparent;
  min-height: 44px;
  padding-inline: 0.4em;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ---------------------------------------------------------------- chips
   Radio/checkbox chips: the input sits invisibly over the whole chip, so taps
   and elementFromPoint land on the real control.
   <label class="chip"><input type="radio" name="piece" value="coaster"><span class="chip__face">Coaster</span></label> */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; margin: 0; border: 0; }
.chips > legend { padding: 0; margin-bottom: var(--space-3); font-weight: 600; }
.chip { position: relative; display: inline-flex; min-width: 44px; }
.chip > input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.chip__face, .chip--static {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 44px;
  width: 100%;
  padding: 0.5em 1.05em;
  border-radius: var(--radius-pill);
  background: var(--chip-bg);
  box-shadow: inset 0 0 0 1.5px var(--chip-line);
  color: var(--fg);
  font-size: var(--fs-small);
  font-weight: 550;
  line-height: 1.15;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.chip > input:hover + .chip__face { box-shadow: inset 0 0 0 1.5px var(--fg); }
.chip > input:checked + .chip__face {
  background: var(--chip-on-bg);
  color: var(--chip-on-fg);
  box-shadow: inset 0 0 0 1.5px var(--chip-on-bg);
}
.chip > input:focus-visible + .chip__face { outline: 3px solid var(--focus); outline-offset: 3px; }
.chip > input:disabled + .chip__face { opacity: 0.5; }
.chip > input:disabled { cursor: not-allowed; }

/* price chip: real prices only, from BRIEF.md */
.price {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  padding: 0.28em 0.75em;
  border-radius: var(--radius-pill);
  background: var(--chip-bg);
  box-shadow: inset 0 0 0 1px var(--chip-line);
  color: var(--fg);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.25;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.price b, .price strong { font-weight: 750; }

/* ---------------------------------------------------------------- motion helpers
   Content is visible by default. .is-entering only plays a short arrival on an
   element that is ALREADY visible (Milah.enter), so nothing can be stranded at
   opacity 0 waiting for an observer (memory reference_reveal_visibility_traps). */
@keyframes milah-enter {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}
.is-entering { animation: milah-enter 620ms var(--ease-out) both; }

/* ---------------------------------------------------------------- header */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-top: env(safe-area-inset-top);
  color: var(--paper);
  background: linear-gradient(180deg, rgba(40, 30, 25, 0.62) 0%, rgba(40, 30, 25, 0.28) 62%, rgba(40, 30, 25, 0) 100%);
  transition: background-color var(--dur) ease, box-shadow var(--dur) ease;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding: 8px max(var(--gutter), env(safe-area-inset-right)) 8px max(var(--gutter), env(safe-area-inset-left));
}
.site-header__brand {
  display: block;
  flex: none;
  border-radius: 6px;
  padding: 2px;
  margin-left: -2px;
}
.site-header__brand img { width: auto; height: 60px; transform-origin: 0 50%; transition: transform var(--dur) var(--ease-out); }
.site-header__nav { display: flex; align-items: center; gap: clamp(6px, 2vw, 18px); }
.site-header__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.5em;
  color: var(--paper);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
}
.site-header__link:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.site-header.is-scrolled {
  background: var(--char);
  box-shadow: 0 1px 0 rgba(199, 178, 155, 0.16);
}
.site-header.is-scrolled .site-header__brand img { transform: scale(0.84); }
@media (max-width: 420px) {
  .site-header__brand img { height: 52px; }
  .site-header__link { padding-inline: 0.35em; }
  .site-header .btn--sm { padding-inline: 0.95em; }
}

@media (min-width: 900px) {
  .site-header__link { font-size: 1.0625rem; }
  .site-header .btn--sm { font-size: 1.0625rem; min-height: 48px; padding-inline: 1.3em; }
}

/* ---------------------------------------------------------------- footer */
.site-footer {
  padding-block: var(--space-8) calc(var(--space-6) + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(199, 178, 155, 0.14);
  font-size: var(--fs-small);
}
.site-footer__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "brand links" "brand made" "credit credit";
  align-items: center;
  column-gap: clamp(1.5rem, 5vw, 4rem);
  row-gap: var(--space-3);
}
.site-footer__brand { grid-area: brand; display: block; width: clamp(112px, 16vw, 168px); border-radius: 8px; }
.site-footer__brand img { width: 100%; height: auto; }
.site-footer__links { grid-area: links; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); align-self: end; }
.site-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--paper);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(240, 236, 226, 0.35);
  overflow-wrap: anywhere;
}
.site-footer__link:hover { text-decoration-color: currentColor; }
.site-footer__made { grid-area: made; align-self: start; color: var(--taupe-soft); }
.site-footer__credit {
  grid-area: credit;
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(199, 178, 155, 0.14);
  color: var(--taupe-soft);
}
.site-footer__credit a {
  display: inline-block;
  padding-block: 12px;
  margin-block: -12px;
  color: var(--paper);
}
@media (max-width: 560px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    grid-template-areas: "brand" "links" "made" "credit";
    justify-items: start;
  }
  .site-footer__brand { width: 128px; margin-bottom: var(--space-2); }
}

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .is-entering { animation: none; }
}

/* ---- hero ---- */
/* ARRIVAL: a top-down look at her laser bed. Flat wood, the gantry rail across it, the laser module riding
   the rail; the words engrave row by row (raster). See src/sections/10-hero.html. */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--char);
  color: var(--paper);
  overflow: hidden;
}

/* the wood: her pine, seen from straight above (no perspective, no zoom) */
.hero__bed {
  position: relative;
  flex: 1 1 auto;
  min-height: 62vh;
  min-height: 62svh;
  background: #d6b088 url("img/hero/pine-2048.webp") center / cover no-repeat;
  overflow: hidden;
  isolation: isolate;
}
@media (max-aspect-ratio: 9/10) {
  .hero__bed { background-image: url("img/hero/pine-strip.webp"); }
}
/* a soft fall of light: brighter where the beam works, darker towards the frame of the machine */
.hero__bed::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 42% 38%, rgba(255, 236, 205, 0.10) 0%, rgba(255, 236, 205, 0) 55%),
    linear-gradient(180deg, rgba(40, 24, 14, 0.30) 0%, rgba(40, 24, 14, 0) 22%, rgba(40, 24, 14, 0) 80%, rgba(40, 24, 14, 0.38) 100%);
  z-index: 3;
}

.hero__ink,
.hero__glow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* the engraving multiplies into the wood, so her grain shows through the char */
.hero__ink { z-index: 1; mix-blend-mode: multiply; }
.hero__glow { z-index: 4; mix-blend-mode: screen; }

/* the h1. No JS: engraved-looking type on the wood. With JS: the canvas draws it; the h1 stays for
   screen readers and search. While the script is on its way: hidden, so the finished words never flash */
.hero__title {
  position: absolute;
  z-index: 2;
  left: 7%;
  right: 7%;
  top: 22%;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 1.2rem + 6.4vw, 8rem);
  line-height: 1.04;
  color: #3b2617;
  text-wrap: balance;
  mix-blend-mode: multiply;
}
.js .hero:not(.hero--js):not(.hero--static) .hero__title { color: transparent; animation: hero-ink 0.6s ease-out 5s forwards; }
@keyframes hero-ink { to { color: #3b2617; } }
.hero--js .hero__title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- the machine: an aluminium rail across the bed and the laser module hanging off it ---- */
.hero__gantry {
  --mw: 72px;
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: 0;
  height: 0;
  pointer-events: none;
  will-change: transform;
  visibility: hidden;
}
.hero--js .hero__gantry { visibility: visible; }
.hero__rail {
  position: absolute;
  left: -2%;
  right: -2%;
  top: calc(var(--mw) * -0.74);
  height: calc(var(--mw) * 0.26);
  background: linear-gradient(180deg, #7f8286 0%, #d7d9dc 16%, #a3a6aa 34%, #5f6266 52%, #b4b7bb 70%, #8a8d91 86%, #55585c 100%);
  box-shadow: 0 calc(var(--mw) * 0.16) calc(var(--mw) * 0.2) calc(var(--mw) * -0.06) rgba(46, 24, 8, 0.5);
}
/* the extrusion's slot */
.hero__rail::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 46%;
  height: 12%;
  background: rgba(20, 20, 22, 0.55);
}
.hero__carriage {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  will-change: transform;
}
.hero__module {
  position: absolute;
  width: var(--mw);
  height: calc(var(--mw) * 1.16);
  left: calc(var(--mw) * -0.5);
  top: calc(var(--mw) * -1.22);
  border-radius: calc(var(--mw) * 0.09);
  background: linear-gradient(150deg, #34312e 0%, #191715 46%, #22201e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -2px 0 rgba(0, 0, 0, 0.5),
    calc(var(--mw) * 0.06) calc(var(--mw) * 0.2) calc(var(--mw) * 0.22) calc(var(--mw) * -0.04) rgba(40, 20, 6, 0.55);
}
/* the cooling fan seen from above */
.hero__fan {
  position: absolute;
  left: 15%;
  width: 70%;
  top: 10%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, #3a3734 0 17%, rgba(0, 0, 0, 0) 18%),
    repeating-conic-gradient(from 8deg, #45423e 0deg 9deg, #141312 9deg 30deg);
  box-shadow: inset 0 0 0 calc(var(--mw) * 0.035) #47443f, inset 0 0 calc(var(--mw) * 0.08) rgba(0, 0, 0, 0.7);
}
.hero__badge {
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 9%;
  height: 7%;
  border-radius: 2px;
  background: #d07126;
}
/* the lens the beam leaves from: the module's lowest point, right over the glowing spot */
.hero__lens {
  position: absolute;
  left: 50%;
  bottom: calc(var(--mw) * -0.07);
  width: 20%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #8a8780 0%, #2a2826 55%, #0d0c0b 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}

/* ---- the band under the wood: the line and the way in ---- */
.hero__foot {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding: clamp(18px, 3vh, 30px) max(16px, 4vw) calc(clamp(18px, 3vh, 30px) + env(safe-area-inset-bottom, 0px));
  background: var(--char);
  box-shadow: 0 -18px 30px -12px rgba(20, 12, 7, 0.65);
}
.hero__line {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
  line-height: 1.2;
  color: var(--paper);
  text-wrap: balance;
}
.hero__cta { flex: none; }
@media (max-width: 640px) {
  .hero__foot { flex-direction: column; align-items: stretch; text-align: center; }
  .hero__cta { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .js .hero:not(.hero--js):not(.hero--static) .hero__title { animation-delay: 1.5s; }
}

/* ---- process ---- */
/* THE MAKING: four of her photos in order, one line each (rebuilt 2026-10-11, no scroll animation) */
.process { padding-block: clamp(56px, 9vw, 120px); }
.process__title {
  margin: 0 0 clamp(24px, 4vw, 48px);
  font-size: var(--fs-h2);
  text-wrap: balance;
}
.process__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
}
@media (max-width: 1099px) { .process__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.process__step { min-width: 0; display: grid; gap: 6px; align-content: start; }
.process__fig {
  margin: 0 0 6px;
  aspect-ratio: 4 / 5;
  max-width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(40, 30, 25, 0.12);
}
.process__fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.process__name {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);
  line-height: 1.1;
}
.process__n {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  min-width: 1.9em;
  height: 1.9em;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--char);
  color: var(--paper);
  transform: translateY(-0.12em);
}
.process__say { margin: 0; font-size: var(--fs-body); line-height: 1.4; }

/* ---- range ---- */
/* THE RANGE: her pieces, real prices, still photos (rebuilt 2026-10-11) */
.range { padding-block: clamp(56px, 9vw, 120px); }
.range__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-bottom: clamp(20px, 3.5vw, 40px);
}
.range__title { margin: 0; font-size: var(--fs-h2); text-wrap: balance; }
.range__etsy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--paper);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.range__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2.4vw, 32px) clamp(12px, 2vw, 28px);
}
@media (max-width: 899px) { .range__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.range__item { min-width: 0; }
.range__link {
  display: grid;
  gap: 4px;
  color: var(--paper);
  text-decoration: none;
  border-radius: 12px;
}
.range__pic {
  display: block;
  aspect-ratio: 1;
  max-width: 100%;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 8px;
  background: rgba(240, 236, 226, 0.06);
}
.range__pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .range__link:hover .range__pic img { transform: scale(1.03); }
}
.range__link:hover .range__name { text-decoration: underline; text-underline-offset: 0.2em; }
.range__name {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 0.98rem + 0.6vw, 1.5rem);
  line-height: 1.15;
}
.range__price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--blush, #e3b4a5);
  font-variant-numeric: tabular-nums;
}
.range__price--ask { font-weight: 600; color: var(--taupe-soft, #c7b29b); }
.range__more { margin: clamp(22px, 3vw, 36px) 0 0; font-size: var(--fs-body); color: var(--taupe-soft, #c7b29b); }

/* ---- studio ---- */
/* =====================================================================
   40 studio: the live burn preview + send (GROUNDWORK 7a, SIGNATURE 4).
   Everything is scoped to .studio / .sendsheet. Colours are plain hex
   (oklch on old Chrome paints white, memory reference_oklch_old_browsers).
   Phone (round 8): the stage owns the screen on arrival, then scrolls up into
   a pinned window (negative sticky top) with the price, burn and send on its
   strip, so the preview stays in view while choosing and typing. Desktop (round 7): the burn fills the whole first screen,
   edge to edge; the dock (price, burn, send, then the configurator) rises
   over it as you scroll and the board scales into the space above it.
   ===================================================================== */

.studio {
  --studio-ink: #f0ece2;
  --studio-soft: #c7b29b;
  --studio-card: #30251f;
  --studio-line: rgba(240, 236, 226, 0.14);
  --stage-h: clamp(300px, 61svh, 520px);
  padding-top: calc(var(--header-h) + 20px);
  padding-bottom: var(--section-y);
  background-color: #281e19;
  background-image: radial-gradient(90% 60% at 30% 0%, rgba(202, 106, 34, 0.09), rgba(202, 106, 34, 0) 70%);
}
.studio__wrap { position: relative; }

/* ---------------------------------------------------------------- grid (phones first) */
.studio__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "stage" "form" "send" "real";
  row-gap: 18px;
}
.studio__stagecol { grid-area: stage; }
.studio__dock { display: contents; }
.studio__dockbar { display: none; }
.studio__form { grid-area: form; }
.studio__send { grid-area: send; }
.studio__real { grid-area: real; }

.studio__title {
  font-size: clamp(2.125rem, 1.25rem + 2.7vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -0.012em;
  color: var(--studio-ink);
}
.studio__intro {
  margin-top: 8px;
  color: var(--studio-soft);
  font-size: var(--fs-lead);
  line-height: 1.35;
}

/* ---------------------------------------------------------------- the stage (the night bench) */
.studio__stagecol {
  position: sticky;
  top: var(--header-h);
  z-index: 4;
  margin-inline: calc(-1 * max(var(--gutter), env(safe-area-inset-left)));
}
.studio__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  height: var(--stage-h);
  overflow: hidden;
  background-color: #1b1410;
  background-image:
    radial-gradient(70% 62% at 50% 46%, rgba(237, 202, 180, 0.13) 0%, rgba(202, 106, 34, 0.07) 42%, rgba(0, 0, 0, 0) 74%),
    radial-gradient(120% 70% at 50% 120%, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .94 0 0 0 0 .86 0 0 0 0 .78 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  box-shadow: 0 18px 28px -18px rgba(0, 0, 0, 0.75);
}
.studio__bed { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
/* the macro camera lives in the engine (opts.camera + setView): the canvas never grows. On desktop the
   page also scales this box (never the canvas's own layout box: the engine measures with layoutBox) */
.studio__cam { position: absolute; inset: 0; transform-origin: 50% 0; }
.studio__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
}
/* the lens: a warm raking light from the upper left and a soft vignette (a photograph, not a scan),
   a shallow depth of field round the glowing point while the camera is close, and the sensor's grain
   over everything (wood, laser, smoke) so the drawn parts sit in the same photograph as her board */
.studio__lens {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(130% 100% at 46% 44%, rgba(10, 6, 4, 0) 58%, rgba(10, 6, 4, 0.46) 100%),
    linear-gradient(128deg, rgba(255, 226, 184, 0.13) 0%, rgba(255, 226, 184, 0) 38%, rgba(18, 10, 6, 0) 62%, rgba(18, 10, 6, 0.2) 100%);
}
.studio__dof {
  --fx: 56%;
  --fy: 58%;
  position: absolute;
  inset: 0;
  opacity: 0;
  -webkit-backdrop-filter: blur(1.4px);
  backdrop-filter: blur(1.4px);
  -webkit-mask-image: radial-gradient(ellipse 78% 72% at var(--fx) var(--fy), rgba(0, 0, 0, 0) 72%, #000 100%);
  mask-image: radial-gradient(ellipse 78% 72% at var(--fx) var(--fy), rgba(0, 0, 0, 0) 72%, #000 100%);
}
.studio__grain {
  position: absolute;
  inset: 0;
  opacity: 0.3;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.6 -.3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* the aria-live region ("Burning..." / "Done") is for screen readers only: on screen the laser itself,
   the Skip / Burn again button and the finished wood say it, with no UI chrome over the material */
.studio__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.studio__dot { display: none; }

/* phones: a strip floats over the bottom of the photo (the price, the laser's button, the send) */
.studio__bar {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px max(12px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
  background: rgba(18, 12, 9, 0.9);
  box-shadow: 0 -1px 0 rgba(240, 236, 226, 0.08);
}
.studio__price--bar { flex: 1 1 auto; min-width: 0; }
.studio__price--bar .studio__amount { font-size: 1.75rem; line-height: 1; }
.studio__price--bar .studio__ladder,
.studio__price--bar.is-unpriced { display: none; }
.studio__bar .btn { flex: none; min-height: 48px; font-size: 1rem; padding-inline: 1em; }
.studio__bar .studio__burn { min-width: 0; }
.studio__sendbtn--bar { margin-top: 0; }
.studio__price--bar.is-unpriced ~ .studio__burn { margin-left: auto; }

/* the heading over the wood (phones: just above the strip, on a soft fall of shadow) */
.studio__head {
  position: absolute;
  inset: auto 0 68px 0;
  z-index: 2;
  padding: 56px max(16px, env(safe-area-inset-left)) 12px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(18, 12, 9, 0) 0%, rgba(18, 12, 9, 0.6) 58%, rgba(18, 12, 9, 0.86) 100%);
}
.studio__head .studio__title { text-shadow: 0 2px 22px rgba(10, 6, 4, 0.7); }
.studio__head .studio__intro { margin-top: 4px; color: #ece2d2; font-size: 1.0625rem; }
.studio__caption {
  min-width: 0;
  color: #ece4d6;
  font-size: var(--fs-small);
  line-height: 1.3;
}
/* name on one line, size under it: a deliberate two-line label, never a ragged wrap */
.studio__capname { display: block; color: var(--studio-ink); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.studio__capsize { display: block; white-space: nowrap; }
.studio__capsize[hidden] { display: none; }
.studio__burn { flex: none; min-height: 46px; min-width: 8.6em; padding-inline: 1.3em; }
.studio__burn.is-skip { --btn-bg: rgba(240, 236, 226, 0.12); --btn-fg: #f0ece2; --btn-bg-hover: rgba(240, 236, 226, 0.2); box-shadow: inset 0 0 0 1.5px rgba(240, 236, 226, 0.4); }

/* ---------------------------------------------------------------- controls */
.studio__form { display: grid; row-gap: 18px; padding-top: 6px; }
.studio__col { display: grid; row-gap: 18px; min-width: 0; }
.studio__field { min-width: 0; }
.studio__form .chips > legend,
.studio__label {
  color: var(--studio-soft);
  font-size: var(--fs-small);
  font-weight: 650;
  line-height: 1.2;
}
.studio__form .chips > legend { margin-bottom: 8px; }
/* labels with a for= are tap targets too: keep them 44px tall */
.studio__label {
  display: inline-flex;
  align-items: flex-end;
  min-height: 44px;
  padding-bottom: 8px;
  cursor: pointer;
}
.studio__labelrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.studio__count { padding-bottom: 8px; color: var(--studio-soft); font-size: var(--fs-small); }
.studio__count.is-full { color: #f3b0a4; }

.studio__pieces .chip__face { gap: 7px; padding-inline: 0.85em 1.05em; }
.studio .chip__face svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.studio .chip__face svg .fill { fill: #e26266; stroke: none; }
.studio .chip > input:checked + .chip__face svg .fill { fill: #af5d50; }

.studio__input,
.studio__select {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 13px 15px;
  border: 0;
  border-radius: 12px;
  background: rgba(240, 236, 226, 0.06);
  box-shadow: inset 0 0 0 1.5px rgba(240, 236, 226, 0.34);
  color: var(--studio-ink);
  font-size: 1.125rem;
  line-height: 1.35;
  caret-color: #e26266;
  transition: box-shadow var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.studio__input { resize: none; }
.studio__input::placeholder { color: rgba(199, 178, 155, 0.8); }
.studio__input:hover, .studio__select:hover { box-shadow: inset 0 0 0 1.5px rgba(240, 236, 226, 0.6); }
.studio__input:focus-visible, .studio__select:focus-visible { outline: 3px solid var(--glow); outline-offset: 2px; }
.studio__input.is-typing {
  background: rgba(240, 236, 226, 0.09);
  box-shadow: inset 0 0 0 1.5px #e7ad30, 0 0 0 4px rgba(231, 173, 48, 0.14);
}
.studio__select {
  min-height: 52px;
  padding-right: 44px;
  font-size: 1.0625rem;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9.5l6 6 6-6' fill='none' stroke='%23c7b29b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px;
  cursor: pointer;
}
.studio__select option { background: #281e19; color: #f0ece2; }
.studio__designs { margin-top: 2px; }
.studio__hint {
  margin-top: 10px;
  color: #f3c9a0;
  font-size: var(--fs-small);
  line-height: 1.4;
}

/* font chips: each label set in its own engraving face (loaded on demand) */
.studio__fonts .chip__face { min-width: 64px; padding-inline: 0.95em; }
.studio__fonts .chip__face.is-face { line-height: 1; letter-spacing: 0; }
.studio__fonts [data-face="cursive"].is-face { font-size: 1.5rem; font-weight: 400; }
.studio__fonts [data-face="handwritten"].is-face { font-size: 1.25rem; font-weight: 400; }
.studio__fonts [data-face="elegant"].is-face { font-size: 1.2rem; }
.studio__fonts [data-face="classic"].is-face { font-size: 1.0625rem; font-weight: 400; }
.studio__fonts [data-face="bold"].is-face { font-size: 1rem; font-weight: 400; }

/* ---------------------------------------------------------------- send panel (phones) */
.studio__send {
  margin-top: 26px;
  padding: 20px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(240, 236, 226, 0.075), rgba(240, 236, 226, 0.035));
  box-shadow: inset 0 0 0 1px var(--studio-line);
}
.studio__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 12px;
  row-gap: 2px;
}
.studio__amount {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.9rem + 1.4vw, 3rem);
  line-height: 1.05;
  color: #edcab4;
  font-variant-numeric: lining-nums;
}
.studio__ladder { color: var(--studio-soft); font-size: 1rem; line-height: 1.4; }
.studio__price.is-unpriced .studio__ladder { color: #edcab4; font-size: 1.1875rem; font-weight: 600; }
.studio__sendbtn { margin-top: 14px; }
.studio__sendbtn.is-ready { animation: studio-ready 1700ms var(--ease-out) 1; }
@keyframes studio-ready {
  0% { box-shadow: 0 0 0 0 rgba(226, 98, 102, 0.7); }
  60% { box-shadow: 0 0 0 14px rgba(226, 98, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(226, 98, 102, 0); }
}
.studio__sharerow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; }
.studio__mini { min-height: 44px; padding: 0.5em 1.15em; font-size: var(--fs-small); }
.studio__etsy {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #edcab4;
  font-size: var(--fs-small);
  font-weight: 650;
}
.studio__note { margin-top: 10px; color: var(--studio-soft); font-size: var(--fs-small); line-height: 1.45; }

/* her real piece, swapped with the chosen piece: the honest "close, never identical" */
.studio__real { margin: 6px 0 0; }
.studio__real img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 52%;
  border-radius: 16px;
  background: #1b1410;
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.9);
}
.studio__real figcaption { margin-top: 10px; color: var(--studio-soft); font-size: var(--fs-small); line-height: 1.45; }

/* phones + tablets (round 8): the board owns the screen on arrival. The stage pins with a NEGATIVE top, so
   it scrolls up until only --stage-min is left under the header and holds there; the script scales the board
   into that window. While the words field has focus (.is-kbd) the whole stage pins at the size that fits. */
@media (max-width: 959.98px) {
  .studio { --stage-min: clamp(250px, 46svh, 420px); padding-top: var(--header-h); }
  .studio.is-tall { --stage-h: clamp(420px, calc(100svh - var(--header-h) - 72px), 780px); }
  .studio__stagecol { top: calc(var(--header-h) - max(0px, var(--stage-h) - var(--stage-min))); }
  .studio.is-kbd .studio__stagecol { top: var(--header-h); }
  .studio__cam { transform-origin: 50% 100%; }
  .studio.is-stuck .studio__head,
  .studio.is-kbd .studio__head { display: none; }
  .studio__form :is(input, select, textarea, label, button),
  .studio__send :is(a, button),
  .studio__real { scroll-margin-top: calc(var(--header-h) + var(--stage-min) + 12px); }
}
@media (min-width: 640px) and (max-width: 959.98px) {
  .studio { --stage-h: clamp(300px, 46svh, 480px); --stage-min: clamp(250px, 40svh, 420px); }
  .studio.is-tall { --stage-h: clamp(420px, calc(100svh - var(--header-h) - 120px), 900px); }
  .studio__form, .studio__send, .studio__real { max-width: 640px; }
}

/* ---------------------------------------------------------------- desktop: the burn owns the first screen
   One grid column, four rows: [the wood above the dock bar] [the dock] [the hold] [her real board].
   The stage and the heading span rows 1-3 and pin under the header at full screen height; the dock spans
   rows 2-3 and pins to the bottom of the screen (--dock-top, set by the script from its real height),
   so all three let go at the same moment. The script scales the board into the space above the dock. */
@media (min-width: 960px) {
  .studio { --bar-h: 104px; --dock-top: 50svh; --hold: 0px; padding-top: var(--header-h); }
  .studio.is-pinned { --hold: 56svh; }
  /* the section's own top padding already clears the header: a "#studio" jump (Make yours, the range
     presets, Milah.scrollToEl) lands with the whole first screen (burn + dock bar) in view */
  #studio { scroll-margin-top: 0; }
  .studio__wrap { max-width: none; padding: 0; }
  .studio__grid {
    grid-template-areas: none;
    grid-template-rows: calc(100vh - var(--header-h) - var(--bar-h)) auto var(--hold) auto;
    grid-template-rows: calc(100svh - var(--header-h) - var(--bar-h)) auto var(--hold) auto;
    row-gap: 0;
  }
  .studio__stagecol {
    grid-area: auto;
    grid-row: 1 / 4;
    grid-column: 1;
    align-self: start;
    position: sticky;
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    height: calc(100svh - var(--header-h));
    min-height: 520px;
  }
  .studio__stagecol { z-index: 1; margin-inline: 0; }
  .studio__stage { height: 100%; box-shadow: none; }
  .studio__bar { display: none; }
  /* the wood stops where the dock bar starts, so the whole board is on the first screen */
  .studio__cam { bottom: var(--bar-h); transition: border-radius var(--dur) var(--ease-out); }
  .studio__cam.is-small { border-radius: 26px; overflow: hidden; box-shadow: 0 50px 80px -40px rgba(0, 0, 0, 0.85); }

  /* the heading, laid over the lower left of the wood on a soft shadow of the bench (it pins with the stage) */
  .studio__head {
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 0 0 calc(var(--bar-h) + 30px) max(var(--gutter), 48px);
    background: radial-gradient(75% 64% at 0% 100%, rgba(16, 11, 8, 0.93) 0%, rgba(16, 11, 8, 0.84) 34%, rgba(16, 11, 8, 0.42) 62%, rgba(16, 11, 8, 0) 86%);
  }
  .studio__title {
    font-size: clamp(3.25rem, 1.6rem + 3vw, 5.25rem);
    line-height: 0.98;
    text-shadow: 0 2px 30px rgba(10, 6, 4, 0.7);
  }
  .studio__head .studio__intro { margin-top: 12px; color: #ece2d2; font-size: 1.5rem; text-shadow: 0 1px 16px rgba(10, 6, 4, 0.8); }

  /* the dock: one dark bench drawer across the screen */
  .studio__dock {
    grid-row: 2 / 4;
    grid-column: 1;
    align-self: start;
    position: sticky;
    top: var(--dock-top);
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 0 max(var(--gutter), 48px) 22px;
    background: linear-gradient(180deg, #241a15 0%, #211814 100%);
    box-shadow: inset 0 1px 0 rgba(240, 236, 226, 0.1), 0 -36px 70px -26px rgba(0, 0, 0, 0.75);
  }
  .studio:not(.is-pinned) .studio__dock { position: relative; top: auto; }

  /* its bar: the price and what it is on the left, save / burn / send on the right */
  .studio__dockbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 124px;
    padding: 18px 0;
  }
  .studio__dockinfo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 26px; min-width: 0; }
  .studio__price--dock { column-gap: 12px; }
  .studio__price--dock .studio__amount { font-size: clamp(2.75rem, 1.6rem + 1.7vw, 3.5rem); }
  .studio__price--dock .studio__ladder { font-size: 1.5rem; color: #ece2d2; }
  .studio__price--dock.is-unpriced .studio__ladder { font-size: 1.5rem; }
  .studio__caption--dock { font-size: 1.375rem; color: #e3d3bf; line-height: 1.3; }
  .studio__caption--dock .studio__capname,
  .studio__caption--dock .studio__capsize { display: inline; }
  .studio__caption--dock .studio__capname { color: #f0ece2; }
  .studio__caption--dock .studio__capsize[hidden] { display: none; }
  .studio__dockbtns { flex: none; display: flex; align-items: center; gap: 12px; }
  .studio__dockbtns .btn { min-height: 70px; font-size: 1.375rem; padding-inline: 1.35em; }
  .studio__burn--dock { min-width: 7.4em; }
  .studio__sendbtn--dock { margin-top: 0; }
  .studio__dsave { --btn-fg: #f0ece2; }

  /* the configurator: piece | your words | font and finish, at a reading size, on one line */
  .studio__form {
    grid-area: auto;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
    column-gap: clamp(32px, 3.2vw, 56px);
    row-gap: 0;
    align-items: start;
    padding-top: 18px;
    border-top: 1px solid rgba(240, 236, 226, 0.1);
  }
  .studio__form .chips > legend,
  .studio__label { font-family: var(--font-display); font-size: 1.375rem; font-weight: 400; color: #f0ece2; letter-spacing: 0; line-height: 1.1; }
  .studio__form .chips > legend { margin-bottom: 12px; }
  .studio__label { min-height: 44px; padding-bottom: 12px; align-items: flex-end; }
  .studio__labelrow .studio__label { min-height: 0; padding-bottom: 12px; }
  .studio__count { font-size: 1rem; padding-bottom: 12px; }
  .studio__form .chips { gap: 9px 8px; }
  .studio__form .chip__face { min-height: 48px; padding: 0.35em 0.95em; font-size: 1.0625rem; font-weight: 600; }
  .studio__pieces .chip__face { padding-inline: 0.7em 0.95em; }
  .studio .chip__face svg { width: 22px; height: 22px; }
  .studio__input { font-size: 1.5rem; line-height: 1.25; min-height: 0; height: 96px; padding: 14px 18px; }
  .studio__designs { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
  .studio__designs .studio__label { flex: none; min-height: 44px; padding-bottom: 0; align-items: center; font-size: 1.125rem; font-family: var(--font-body); font-weight: 650; color: #d9c7b2; }
  .studio__select { flex: 1 1 auto; min-width: 0; min-height: 50px; font-size: 1.0625rem; }
  .studio__fonts .chip__face { min-width: 0; }
  .studio__fonts [data-face="cursive"].is-face { font-size: 1.75rem; }
  .studio__fonts [data-face="handwritten"].is-face { font-size: 1.375rem; }
  .studio__fonts [data-face="elegant"].is-face { font-size: 1.375rem; }
  .studio__fonts [data-face="classic"].is-face { font-size: 1.1875rem; }
  .studio__fonts [data-face="bold"].is-face { font-size: 1.0625rem; }

  /* the phone send panel becomes the dock's quiet last line: her promise and the Etsy shop */
  .studio__send {
    grid-area: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    margin-top: 14px;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .studio__send .studio__price--panel,
  .studio__send .studio__sendbtn--panel,
  .studio__send .studio__psave,
  .studio__send [data-share] { display: none; }
  .studio__note { order: -1; margin: 0; font-size: 1.0625rem; color: #d9c7b2; }
  .studio__sharerow { margin: 0; }
  .studio__etsy { font-size: 1.0625rem; }

  /* her real board, after the pin lets go: the honest comparison, big, with its line beside it */
  .studio__real {
    grid-area: auto;
    grid-row: 4;
    grid-column: 1;
    display: grid;
    grid-template-columns: minmax(0, 44vw) minmax(0, 1fr);
    align-items: end;
    column-gap: clamp(32px, 4vw, 72px);
    margin: 0;
    padding: clamp(72px, 9vh, 120px) max(var(--gutter), 48px) 0;
  }
  .studio__real img { aspect-ratio: 5 / 6; object-position: 50% 42%; border-radius: 22px; }
  .studio__real figcaption {
    margin: 0 0 12px;
    max-width: 14ch;
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.2rem + 1.6vw, 3rem);
    line-height: 1.1;
    color: #f0ece2;
  }
}
/* small desktops: the bar keeps price, burn and send on one line */
@media (min-width: 960px) and (max-width: 1279.98px) {
  .studio__dsave { display: none; }
  .studio__dockbtns .btn { font-size: 1.1875rem; padding-inline: 1.1em; }
  .studio__caption--dock .studio__capsize { display: none; }
  .studio__form { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 28px; }
  .studio__send .studio__psave { display: inline-flex; }
}

/* ---------------------------------------------------------------- the send sheet (dialog) */
html.studio-modal { overflow: hidden; }
.sendsheet {
  --studio-ink: #f0ece2;
  --studio-soft: #c7b29b;
  position: fixed;
  inset: 0;
  width: min(620px, calc(100% - 32px));
  max-width: none;
  height: fit-content;
  max-height: calc(100vh - 32px);
  max-height: calc(100svh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: #30251f;
  color: var(--studio-ink);
  box-shadow: inset 0 0 0 1px rgba(240, 236, 226, 0.1), 0 40px 120px -20px rgba(0, 0, 0, 0.85);
  overflow: auto;
  overscroll-behavior: contain;
  color-scheme: dark;
}
.sendsheet::backdrop { background: rgba(16, 11, 8, 0.74); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.sendsheet[open] { animation: sheet-in 260ms var(--ease-out) both; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.sendsheet__inner { padding: 22px 22px 26px; }
.sendsheet__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sendsheet__title { font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); line-height: 1.1; padding-top: 6px; }
.sendsheet__title:focus { outline: none; }
.sendsheet__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: -4px -8px 0 0;
  border: 0;
  border-radius: 50%;
  background: rgba(240, 236, 226, 0.08);
  color: var(--studio-ink);
}
.sendsheet__close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sendsheet__close:hover { background: rgba(240, 236, 226, 0.16); }

.sendsheet__form { display: grid; row-gap: 18px; margin-top: 16px; }
.spell {
  padding: 16px 16px 8px;
  border-radius: 16px;
  background: rgba(20, 14, 11, 0.42);
  box-shadow: inset 0 0 0 1px rgba(240, 236, 226, 0.1);
}
.spell__ask { color: #edcab4; font-weight: 650; font-size: 1rem; }
.spell__words {
  margin-top: 6px;
  color: #fff;
  font-size: clamp(1.75rem, 1.35rem + 2vw, 2.5rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: 0.015em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.spell__meta { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.spell__thumb {
  flex: none;
  width: 84px;
  height: 84px;
  border-radius: 10px;
  background: radial-gradient(70% 70% at 50% 45%, #3a2c23, #1b1410);
}
.spell__spec { color: var(--studio-soft); font-size: var(--fs-small); line-height: 1.45; }
.spell__edit { margin-top: 2px; padding-left: 0; color: #edcab4; }

.sendsheet__row { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 560px) { .sendsheet__row { grid-template-columns: 1fr 1fr; } }
.sendsheet .field { min-width: 0; margin: 0; padding: 0; border: 0; }
.sendsheet .field > label,
.sendsheet .field > legend {
  display: block;
  margin-bottom: 7px;
  padding: 0;
  color: var(--studio-ink);
  font-size: var(--fs-small);
  font-weight: 650;
}
.sendsheet input[type="text"],
.sendsheet textarea {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  background: rgba(240, 236, 226, 0.07);
  box-shadow: inset 0 0 0 1.5px rgba(240, 236, 226, 0.34);
  color: var(--studio-ink);
  font-size: 1.0625rem;
  caret-color: #e26266;
}
.sendsheet textarea { resize: vertical; min-height: 76px; }
.sendsheet textarea::placeholder { color: rgba(199, 178, 155, 0.8); }
.sendsheet input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px #f3b0a4; }

.qty__ladder { gap: 8px; }
.qty__ladder .chip__face { font-variant-numeric: tabular-nums lining-nums; }
.qty__stepper { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1.5px rgba(240, 236, 226, 0.34); }
.qty__btn {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(240, 236, 226, 0.08);
  color: var(--studio-ink);
  font-size: 1.5rem;
  line-height: 1;
}
.qty__btn:hover { background: rgba(240, 236, 226, 0.16); }
.qty__n { min-width: 2.2em; text-align: center; font-size: 1.25rem; font-weight: 700; }
.qty__total { margin-top: 10px; color: #edcab4; font-weight: 650; }

.tick {
  position: relative;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border-radius: 14px;
  background: rgba(240, 236, 226, 0.05);
  box-shadow: inset 0 0 0 1.5px rgba(240, 236, 226, 0.22);
  cursor: pointer;
}
.tick > input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.tick__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px #edcab4;
  transition: background-color var(--dur-fast) ease;
}
.tick__box svg { width: 20px; height: 20px; fill: none; stroke: #281e19; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.tick > input:checked ~ .tick__box { background: #e26266; box-shadow: none; }
.tick > input:checked ~ .tick__box svg { opacity: 1; }
.tick > input:focus-visible ~ .tick__box { outline: 3px solid var(--glow); outline-offset: 3px; }
.tick.is-invalid { box-shadow: inset 0 0 0 2px #f3b0a4; }
.tick__text { font-size: 1rem; line-height: 1.5; color: var(--studio-ink); }

.sendsheet__error { min-height: 0; color: #f3b0a4; font-weight: 650; }
.sendsheet__error:empty { display: none; }
.sendsheet__small { color: var(--studio-soft); font-size: var(--fs-small); line-height: 1.45; }
.sendsheet__done { display: grid; row-gap: 14px; margin-top: 14px; }
.sendsheet__done:focus { outline: none; }
.sendsheet__lead { font-size: var(--fs-lead); line-height: 1.45; }
.sendsheet__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sendsheet [data-address] { color: var(--studio-ink); overflow-wrap: anywhere; }

@media (max-width: 639.98px) {
  .sendsheet {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }
  .sendsheet__inner { min-height: 100%; padding: calc(14px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
}

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .studio__sendbtn.is-ready,
  .sendsheet[open] { animation: none; }
}

/* lead fix: the price must never be squeezed under the buttons on a 390px phone */
.studio__price--bar { flex: none; }
@media (max-width: 430px) {
  .studio__bar { gap: 6px; padding-inline: 12px; }
  .studio__price--bar .studio__amount { font-size: 1.5rem; }
  .studio__bar .btn { font-size: 0.9375rem; padding-inline: 0.8em; }
  .studio__bar .studio__sendbtn--bar { margin-left: auto; }
}

/* 2026-10-11 (Kort: too much motion, weird zooming): no pinned or sticky stage, no scaling, no lens blur.
   The preview, the controls and the send simply sit one after another. */
.studio__stagecol, .studio__dock, .studio__stage { position: relative !important; top: auto !important; }
.studio__cam { transform: none !important; }
.studio__dof { display: none !important; }

/* 2026-10-11: the close section already pairs her proof with this real board; no duplicate here */
.studio__real { display: none !important; }

/* ---- close ---- */
/* CLOSE: proof beside the real piece, then her words and the way back in (rebuilt 2026-10-11, still) */
.close { padding-block: clamp(56px, 9vw, 120px) clamp(40px, 6vw, 80px); }
.close__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
}
@media (max-width: 899px) { .close__wrap { grid-template-columns: minmax(0, 1fr); } }
.close__title { margin: 0 0 clamp(18px, 3vw, 32px); font-size: var(--fs-h2); text-wrap: balance; }
.close__pair {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  gap: clamp(12px, 2vw, 24px);
  align-items: end;
}
.close__fig { margin: 0; min-width: 0; display: grid; gap: 8px; }
.close__pic { display: block; border-radius: 10px; overflow: hidden; background: rgba(240, 236, 226, 0.06); }
.close__pic img { width: 100%; height: auto; display: block; }
.close__pic--proof { background: #f4efe6; }
.close__label { font-size: 0.9375rem; font-weight: 700; color: var(--taupe-soft, #c7b29b); }
.close__end { display: grid; gap: clamp(16px, 2.4vw, 26px); justify-items: start; min-width: 0; }
.close__slice { display: block; width: min(100%, 420px); border-radius: 50%; overflow: hidden; }
.close__slice img { width: 100%; height: auto; display: block; }
.close__words { margin: 0; }
.close__quote { margin: 0; }
.close__quote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.25rem);
  line-height: 1.2;
  text-wrap: balance;
}
.close__by { margin-top: 10px; }
.close__sig { width: clamp(130px, 14vw, 180px); height: auto; display: block; }
@media (max-width: 640px) { .close__cta { width: 100%; justify-content: center; } }