/* =====================================================================
   PoshBBQ — Static site core stylesheet
   Faithful port of the original Next.js/Tailwind art direction.
   Palette: bone / ash / ember / steel · Fraunces + JetBrains Mono
   ===================================================================== */

/* ---- Fonts (Fraunces = display, JetBrains Mono = mono) -------------- */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,300..600&family=JetBrains+Mono:wght@300;400;500&display=swap");

/* ---- Tokens --------------------------------------------------------- */
:root {
  --ash: #1a1a1a;
  --bone: #f2efe9;
  --bone-warm: #e8e3d8;
  --ember: #b54a2c;
  --steel: #8a8a88;

  --font-display: "Fraunces", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --maxw: 1600px;
  --pad: 1.5rem;      /* px-6  */
  --gap: 1.5rem;      /* gap-6 */

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-wipe: cubic-bezier(0.7, 0, 0.15, 1);
}

/* ---- Reset ---------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

html, body {
  background: var(--bone);
  color: var(--ash);
  font-family: var(--font-mono);
  font-feature-settings: "ss01", "ss02", "cv01";
  overflow-x: hidden;
  line-height: 1.7;
}

/* Lenis smooth-scroll hooks */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }
input, textarea { font: inherit; }

::selection { background: var(--ember); color: var(--bone); }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bone-warm); }
::-webkit-scrollbar-thumb { background: #cfc7b6; }
::-webkit-scrollbar-thumb:hover { background: var(--steel); }

/* =====================================================================
   Typography helpers
   ===================================================================== */
.font-display { font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 144, "SOFT" 30; }
.font-mono { font-family: var(--font-mono); }
.italic { font-style: italic; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.micro {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.body { font-size: 16px; line-height: 1.7; }
.lead { font-size: 16px; line-height: 1.7; }
.journal-text { font-size: 20px; line-height: 1.75; }

.tracking-display { letter-spacing: -0.03em; }

/* Colors */
.t-ash { color: var(--ash); }
.t-bone { color: var(--bone); }
.t-ember { color: var(--ember); }
.t-steel { color: var(--steel); }
.t-ash-80 { color: rgba(26, 26, 26, 0.8); }
.t-ash-70 { color: rgba(26, 26, 26, 0.7); }
.t-ash-60 { color: rgba(26, 26, 26, 0.6); }
.t-ash-50 { color: rgba(26, 26, 26, 0.5); }
.t-bone-85 { color: rgba(242, 239, 233, 0.85); }
.t-bone-80 { color: rgba(242, 239, 233, 0.8); }
.t-bone-70 { color: rgba(242, 239, 233, 0.7); }
.t-bone-60 { color: rgba(242, 239, 233, 0.6); }
.t-bone-50 { color: rgba(242, 239, 233, 0.5); }

.bg-bone { background: var(--bone); }
.bg-ash { background: var(--ash); }
.bg-bone-warm { background: var(--bone-warm); }

.hover-ember { transition: color 0.4s var(--ease-out); }
.hover-ember:hover { color: var(--ember); }

/* =====================================================================
   Layout
   ===================================================================== */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.grid12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
}
.gap-lg { gap: var(--gap); }
.items-end { align-items: flex-end; }
.items-start { align-items: flex-start; }
.items-baseline { align-items: baseline; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-col { flex-direction: column; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-10 { gap: 2.5rem; }

/* Column spans (mobile-first: everything full width) */
[class*="col-"] { grid-column: span 12 / span 12; }

/* Section rhythm */
.section { padding-block: 8rem; }         /* py-32 */
.pt-hero { padding-top: 6rem; }           /* pt-24 */
.mt-14 { margin-top: 3.5rem; }
.mt-12 { margin-top: 3rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-24 { margin-top: 6rem; }
.mt-20 { margin-top: 5rem; }
.mt-16 { margin-top: 4rem; }
.mb-16 { margin-bottom: 4rem; }
.mb-8 { margin-bottom: 2rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-xl { max-width: 36rem; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }

/* =====================================================================
   Header / Nav
   ===================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: rgba(242, 239, 233, 0.85);
  color: var(--ash);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: box-shadow 0.5s ease;
}
.site-header.scrolled { box-shadow: 0 1px 0 rgba(26, 26, 26, 0.08); }

.nav-bar {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  gap: var(--gap);
  height: 3.5rem;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ash);
}
.wordmark .em { font-style: italic; color: var(--ember); }

.nav-left { grid-column: span 6; }
.nav-center {
  grid-column: span 8;
  display: none;
  justify-content: center;
  gap: 2.5rem;
}
.nav-link {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ash);
  transition: color 0.3s ease;
}
.nav-link:hover, .nav-link.active { color: var(--ember); }

.nav-right {
  grid-column: span 6;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}
.nav-cta {
  display: none;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: var(--ember);
  color: var(--bone);
  padding: 0.5rem 1rem;
  border: 1px solid var(--ember);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}
.nav-cta:hover { background: var(--ash); border-color: var(--ash); }
.nav-toggle {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ash);
}

.nav-mobile {
  display: none;
  background: var(--bone);
  color: var(--ash);
  border-top: 1px solid rgba(26, 26, 26, 0.1);
}
.nav-mobile.open { display: block; }
.nav-mobile nav {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
}
.nav-mobile-link {
  font-family: var(--font-display);
  font-size: 1.875rem;
  letter-spacing: -0.03em;
}
.nav-mobile-cta {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--ember);
  color: var(--bone);
  padding: 1rem 1.5rem;
  margin: 0 1.5rem 2.5rem;
  width: calc(100% - 3rem);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* =====================================================================
   Buttons
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 1rem 1.5rem;
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
  border: 1px solid transparent;
}
.btn .arrow { transition: transform 0.5s var(--ease-out); }
.btn:hover .arrow { transform: translateX(0.25rem); }
.btn-lg { font-size: 12px; padding: 1.25rem 2rem; }

.btn-primary { background: var(--ember); color: var(--bone); border-color: var(--ember); }
.btn-primary:hover { background: var(--ash); color: var(--bone); border-color: var(--ash); }

.btn-secondary { border-color: var(--ash); color: var(--ash); }
.btn-secondary:hover { background: var(--ash); color: var(--bone); }

.btn-ghost { color: var(--ash); border-bottom: 1px solid var(--ash); padding-left: 0; padding-right: 0; }
.btn-ghost:hover { color: var(--ember); border-color: var(--ember); }

/* On-ash variants */
.on-ash .btn-secondary { color: var(--bone); border-color: var(--bone); }
.on-ash .btn-secondary:hover { background: var(--bone); color: var(--ash); }
.btn-secondary.on-bone { color: var(--bone); border-color: var(--bone); }
.btn-secondary.on-bone:hover { background: var(--bone); color: var(--ash); }

/* =====================================================================
   Eyebrow / Section index / hairline
   ===================================================================== */
.eyebrow-steel { color: var(--steel); }
.eyebrow-ember { color: var(--ember); }
.eyebrow-bone { color: rgba(242, 239, 233, 0.7); }

.section-index {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.section-index .num { color: var(--ember); }
.section-index .rule { width: 2rem; height: 1px; background: currentColor; align-self: center; }
.section-index .lbl { color: var(--steel); }

.hairline { height: 1px; background: currentColor; opacity: 0.18; }

.quiet-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: color 0.4s ease;
}
.quiet-link .u { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.quiet-link:hover { color: var(--ember); }
.quiet-link .arrow { color: var(--ember); }

/* =====================================================================
   Figure / Placeholder frame
   ===================================================================== */
.figure {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.figure .wipe-clip { position: absolute; inset: 0; background: var(--ash); }
.figure.tone-bone .wipe-clip { background: var(--bone-warm); }
.figure.tone-steel .wipe-clip { background: rgba(138, 138, 136, 0.3); }
.figure img { position: absolute; inset: 0; width: 100%; height: 100%; }
.figure img.fit-contain { object-fit: contain; }
.figure img.fit-cover { object-fit: cover; }
.figure .vignette {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26, 26, 26, 0.4), transparent 45%);
}
.figure .frame-caption {
  position: absolute; inset: auto 0 0 0;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 1.5rem;
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  color: rgba(242, 239, 233, 0.8);
}

/* Aspect ratios */
.ar-4-3 { aspect-ratio: 4 / 3; }
.ar-4-5 { aspect-ratio: 4 / 5; }
.ar-3-2 { aspect-ratio: 3 / 2; }
.ar-16-9 { aspect-ratio: 16 / 9; }
.ar-21-9 { aspect-ratio: 21 / 9; }

/* =====================================================================
   Motion — reveal, wipe, hero door, marquee, dropcap
   ===================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 700ms var(--ease-out),
    transform 700ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="in"] { opacity: 1; transform: translateY(0); }

.wipe-clip { clip-path: inset(0 100% 0 0); transition: clip-path 1100ms var(--ease-wipe); transition-delay: var(--reveal-delay, 0ms); }
[data-wipe="in"] .wipe-clip { clip-path: inset(0 0 0 0); }

/* Signature hero line-mask reveal (on-load) */
.line-mask { display: block; overflow: hidden; }
.line-mask > span {
  display: block;
  transform: translateY(115%);
  transition: transform 1100ms var(--ease-out);
  transition-delay: var(--line-delay, 0ms);
  will-change: transform;
}
.hero-ready .line-mask > span { transform: translateY(0); }

.hero-door { transform: translateY(0); transition: transform 1400ms var(--ease-out); transition-delay: 300ms; will-change: transform; }
.hero-door[data-open="true"] { transform: translateY(-42%); }

/* Marquee / drift */
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.drift-track { display: flex; width: max-content; gap: 3.5rem; animation: drift 90s linear infinite; }
.drift-track:hover { animation-play-state: paused; }
.drift-item { display: flex; align-items: center; gap: 3.5rem; white-space: nowrap; }
.drift-item .dot { color: var(--ember); }

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { display: flex; width: max-content; animation: marquee 44s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }

/* Configure image swap */
.swap-fill { position: absolute; inset: 0; background: var(--ash); }
.swap-enter { animation: swapIn 900ms var(--ease-out) both; }
@keyframes swapIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* Editorial drop-cap */
.dropcap::first-letter {
  float: left;
  font-family: var(--font-display);
  font-weight: 300;
  font-style: normal;
  font-size: clamp(6rem, 12vw, 12rem);
  line-height: 0.78;
  padding-right: 0.12em;
  padding-top: 0.06em;
  color: var(--ash);
  letter-spacing: -0.03em;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .line-mask > span { transform: none; }
  .wipe-clip { clip-path: inset(0 0 0 0); }
}

/* =====================================================================
   Display type scale (matches original clamp values)
   ===================================================================== */
.h-hero { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.03em; font-size: clamp(3.75rem, 13vw, 13rem); line-height: 0.88; color: var(--ash); }
.h-1 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.03em; font-size: clamp(3rem, 10vw, 10rem); line-height: 0.9; }
.h-2 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.03em; font-size: clamp(2.75rem, 7vw, 7rem); line-height: 0.95; }
.h-3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.03em; font-size: clamp(2.5rem, 7vw, 7rem); line-height: 0.95; }
.h-4 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.03em; font-size: clamp(2rem, 5vw, 4rem); line-height: 1; }
.h-5 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.03em; font-size: clamp(2rem, 5.5vw, 5rem); line-height: 1.05; }
.h-cta { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.03em; font-size: clamp(2rem, 5vw, 4.5rem); line-height: 1.05; }
.h-article { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.03em; font-size: clamp(2.5rem, 8vw, 8rem); line-height: 0.95; }
.h-config { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.03em; font-size: clamp(3rem, 9vw, 9rem); line-height: 0.9; }
.h-404 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.03em; font-size: clamp(3rem, 12vw, 12rem); line-height: 0.9; }
.h-mat { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.03em; font-size: clamp(1.5rem, 3.2vw, 3rem); line-height: 1.05; }
.h-num { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.03em; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1; }
.h-preface { font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2.25rem); line-height: 1.35; letter-spacing: -0.03em; color: var(--ash); }
.h-journal-title { font-family: var(--font-display); letter-spacing: -0.03em; font-size: clamp(2rem, 4.5vw, 4rem); line-height: 1; }

.display-xl { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.03em; }
.display-2xl { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.03em; }

/* Lists / meta */
.list-plain > li { padding-block: 0.25rem; }
.check li { display: flex; align-items: baseline; gap: 0.75rem; }
.check li .mk { color: var(--ember); }

.meta-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--steel); }
.meta-value { margin-top: 0.5rem; font-size: 16px; color: var(--ash); }

/* Spec / dl rows */
.spec-list { border-block: 1px solid rgba(26, 26, 26, 0.2); }
.spec-list > div { display: grid; grid-template-columns: repeat(12, 1fr); padding-block: 0.75rem; border-top: 1px solid rgba(26, 26, 26, 0.15); }
.spec-list > div:first-child { border-top: none; }
.spec-list dt { grid-column: span 4; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--steel); }
.spec-list dd { grid-column: span 8; font-size: 16px; color: var(--ash); }

/* Divided ordered lists (anatomy / materials) */
.divide-y-ash > * + * { border-top: 1px solid rgba(26, 26, 26, 0.15); }
.divide-y-bone > * + * { border-top: 1px solid rgba(242, 239, 233, 0.1); }
.border-y-ash { border-block: 1px solid rgba(26, 26, 26, 0.2); }
.border-y-bone { border-block: 1px solid rgba(242, 239, 233, 0.2); }
.border-t-ash { border-top: 1px solid rgba(26, 26, 26, 0.2); }
.border-t-bone { border-top: 1px solid rgba(242, 239, 233, 0.15); }

/* =====================================================================
   Configurator
   ===================================================================== */
.config-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem; }
.opt-group { }
.opt-group-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(26, 26, 26, 0.2);
}
.opt-row {
  display: flex; width: 100%; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  text-align: left; padding-block: 0.625rem;
  font-family: var(--font-display); color: rgba(26, 26, 26, 0.5);
  transition: color 0.3s ease;
}
.opt-row:hover, .opt-row[aria-pressed="true"] { color: var(--ash); }
.opt-row .mark { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--steel); }
.opt-row[aria-pressed="true"] .mark { color: var(--ember); }
.opt-row .label { font-size: 1.25rem; line-height: 1.15; letter-spacing: -0.03em; }
.opt-row .code { margin-top: 0.35rem; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--steel); }
.opt-note { margin: 0 0 0.5rem 1.75rem; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--steel); }
.opt-subhead { list-style: none; margin: 1rem 0 0.35rem; padding: 0.75rem 0 0.35rem; border-top: 1px solid rgba(26,26,26,.12); }
.opt-subhead:first-child { border-top: none; padding-top: 0; margin-top: 0; }

.swatch-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem; }
.swatch {
  position: relative; aspect-ratio: 1; border: 1px solid rgba(26, 26, 26, 0.15);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.swatch:hover { border-color: rgba(26, 26, 26, 0.4); transform: translateY(-2px); }
.swatch[aria-pressed="true"] { border-color: var(--ember); box-shadow: 0 0 0 2px var(--bone), 0 0 0 4px rgba(181, 74, 44, 0.4); }
.swatch .sw-code { position: absolute; inset: auto auto 0 0; padding: 0.25rem; font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; }
.swatch .sw-code.light { color: rgba(242, 239, 233, 0.8); }
.swatch .sw-code.dark { color: rgba(26, 26, 26, 0.7); }

.config-summary { margin-top: 1.5rem; border: 1px solid rgba(26, 26, 26, 0.2); background: var(--bone); padding: 1.5rem; }
.config-summary ul { display: grid; grid-template-columns: 1fr; gap: 0.25rem; font-size: 16px; color: var(--ash); }
.config-summary .k { color: var(--steel); }

/* =====================================================================
   Enquire form
   ===================================================================== */
.field { display: block; }
.field .field-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--steel); }
.field .req { color: var(--ember); }
.field .field-input { margin-top: 0.75rem; }
.field input, .field textarea {
  width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(26, 26, 26, 0.4);
  padding-bottom: 0.75rem; font-family: var(--font-display); letter-spacing: -0.03em; color: var(--ash);
  outline: none; font-size: 1.5rem; transition: border-color 0.3s ease;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(26, 26, 26, 0.25); }
.field input:focus, .field textarea:focus { border-color: var(--ember); }
.field textarea { resize: none; font-size: 1.25rem; line-height: 1.35; }
.field .field-hint { margin-top: 0.5rem; display: block; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--steel); }
.field .field-hint.err { color: var(--ember); }

.form-submit {
  display: inline-flex; align-items: center; gap: 0.75rem; padding: 1.25rem 2rem;
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em;
  background: var(--ember); color: var(--bone); transition: background-color 0.4s ease;
}
.form-submit:hover:not(:disabled) { background: var(--ash); }
.form-submit:disabled { background: rgba(26, 26, 26, 0.1); color: rgba(26, 26, 26, 0.4); cursor: not-allowed; }
.form-submit .arrow { transition: transform 0.5s var(--ease-out); }
.form-submit:hover:not(:disabled) .arrow { transform: translateX(0.25rem); }

.config-chip { margin-bottom: 2.5rem; border: 1px solid rgba(181, 74, 44, 0.4); background: var(--bone-warm); padding: 1.25rem; }
.form-error { margin-top: 2rem; border: 1px solid rgba(181, 74, 44, 0.5); background: var(--bone-warm); padding: 1.25rem; }
.form-error a { color: var(--ember); text-decoration: underline; text-underline-offset: 2px; }
.honeypot { position: absolute; left: -9999px; height: 0; width: 0; opacity: 0; }

.done-state { display: flex; min-height: 360px; flex-direction: column; justify-content: center; border-top: 1px solid rgba(26, 26, 26, 0.2); padding-top: 4rem; }
.done-state .again { margin-top: 2.5rem; align-self: flex-start; border: 1px solid rgba(26, 26, 26, 0.4); padding: 1rem 1.5rem; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ash); transition: all 0.3s ease; }
.done-state .again:hover { border-color: var(--ash); background: var(--ash); color: var(--bone); }
.hidden { display: none !important; }

/* Model pills */
.pill {
  border: 1px solid rgba(242, 239, 233, 0.3); padding: 0.5rem 0.75rem;
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.pill:hover { border-color: var(--ember); color: var(--ember); }

.link-underline { border-bottom: 1px solid var(--ash); padding-bottom: 2px; transition: color 0.3s ease, border-color 0.3s ease; }
.link-underline:hover { color: var(--ember); border-color: var(--ember); }
.link-underline.on-ash { border-color: var(--bone); }

/* Footer */
.footer { background: var(--bone); color: var(--ash); }
.footer-inner { max-width: var(--maxw); margin-inline: auto; padding: 8rem var(--pad) 0; }
.footer-wordmark { position: relative; font-family: var(--font-display); font-weight: 600; line-height: 0.82; letter-spacing: -0.045em; color: var(--ash); user-select: none; font-size: clamp(2.25rem, 5vw, 4rem); }
.footer-wordmark .dot { display: inline-block; width: 0.14em; height: 0.14em; margin-left: 0.04em; border-radius: 9999px; background: var(--ember); transform: translateY(-0.05em); }
.footer-col .meta-label { margin-bottom: 1rem; }
.footer-col ul { margin-top: 0; display: flex; flex-direction: column; gap: 0.5rem; font-size: 16px; }
.footer-col a { transition: color 0.3s ease; }
.footer-col a:hover { color: var(--ember); }
.footer-bottom { display: grid; grid-template-columns: 1fr; gap: 0.75rem; padding-block: 1.5rem; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--steel); }
.footer-bottom a { color: var(--ember); }
.footer-bottom a:hover { color: var(--ash); }

.text-center { text-align: center; }
.text-right { text-align: right; }
.whitespace-nowrap { white-space: nowrap; }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.w-full { width: 100%; }
.block { display: block; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-14 { margin-bottom: 3.5rem; }
.mb-24 { margin-bottom: 6rem; }
.py-4 { padding-block: 1rem; }
.pt-10 { padding-top: 2.5rem; }
.pt-16 { padding-top: 4rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-8 { margin-top: 2rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-8 > * + * { margin-top: 2rem; }
.space-y-14 > * + * { margin-top: 3.5rem; }
.min-h-screen { min-height: 100vh; }