/* Wimberly Custom Guitars - built for time, not trends.
   Optimized: design tokens, dark mode, fluid typography, layout polish.
   Fonts self-hosted in /fonts/ (variable woff2, latin subset). */

/* ═══════════════════════════════════════════
   SELF-HOSTED FONTS
═══════════════════════════════════════════ */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-stretch: normal;
  font-display: swap;
  src: url('/fonts/source-serif-4-var-latin.woff2') format('woff2');
  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: 'Source Serif 4';
  font-style: italic;
  font-weight: 200 900;
  font-stretch: normal;
  font-display: swap;
  src: url('/fonts/source-serif-4-italic-var-latin.woff2') format('woff2');
  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: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-var-latin.woff2') format('woff2');
  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;
}

/* ═══════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════ */
:root {
  /* Brand palette - light mode */
  --walnut:        #3b2a1d;
  --walnut-deep:   #241810;
  --walnut-mid:    #4a3525;
  --charcoal:      #22201d;
  --steel:         #39414a;
  --parchment:     #f3ece0;
  --parchment-dim: #e7ddcc;
  --parchment-mid: #ede4d2;
  --cream:         #faf6ee;
  --amber:         #a8702a;
  --amber-light:   #c08a3e;
  --amber-dim:     #8a5b22;
  --ink:           #2a2520;
  --ink-soft:      #5b5249;
  --ink-muted:     #7a7165;
  --line:          #d8ccb8;
  --line-soft:     #e8dfd0;

  /* Typography */
  --serif: 'Source Serif 4', Georgia, serif;
  --sans:  'Inter', -apple-system, Segoe UI, sans-serif;

  /* Fluid type scale */
  --text-xs:   clamp(0.75rem,  0.70rem + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.8125rem,0.75rem + 0.30vw, 0.9375rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem   + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem   + 4vw,    5rem);

  /* Spacing */
  --sp-1:  0.25rem;   /* 4px  */
  --sp-2:  0.5rem;    /* 8px  */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.25rem;   /* 20px */
  --sp-6:  1.5rem;    /* 24px */
  --sp-8:  2rem;      /* 32px */
  --sp-10: 2.5rem;    /* 40px */
  --sp-12: 3rem;      /* 48px */
  --sp-16: 4rem;      /* 64px */
  --sp-20: 5rem;      /* 80px */
  --sp-24: 6rem;      /* 96px */

  /* Transitions */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 160ms var(--ease);
  --t-med:  260ms var(--ease);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(20, 14, 8, 0.07);
  --shadow-md: 0 8px 24px rgba(20, 14, 8, 0.10);
  --shadow-lg: 0 20px 48px rgba(20, 14, 8, 0.15);

  /* Radii */
  --radius-sm: 2px;
  --radius-md: 4px;
}

/* Dark mode - campfire, not pitch black */
[data-theme="dark"] {
  --cream:         #1a1510;
  --parchment:     #261d15;
  --parchment-dim: #201810;
  --parchment-mid: #2a2018;
  --charcoal:      #141008;
  --ink:           #d8ccb8;
  --ink-soft:      #a89880;
  --ink-muted:     #7a6e60;
  --line:          #3a2e22;
  --line-soft:     #2e2418;
  --walnut-deep:   #e8d8c0;
  --walnut:        #c8b090;
  --walnut-mid:    #b09070;
  --amber:         #d4963a;
  --amber-light:   #daa050;
  --amber-dim:     #a87030;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.5);
}

/* ═══════════════════════════════════════════
   BASE RESET
═══════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: var(--sp-20);
  hanging-punctuation: first last;
}

body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--ink);
  background: var(--cream);
  min-height: 100vh;
  min-height: 100dvh;
  transition: background var(--t-med), color var(--t-med);
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
ul[role="list"], ol[role="list"] { list-style: none; }
input, button, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; line-height: 1.15; }
p, li, figcaption { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; background: none; border: none; }

::selection { background: rgba(168,112,42,.22); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════
   TYPOGRAPHY
═══════════════════════════════════════════ */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--walnut-deep);
}

.eyebrow {
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--amber);
  display: block;
}

p { font-size: var(--text-base); color: var(--ink-soft); }
p + p { margin-top: 1rem; }

.lede {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--ink);
  font-weight: 300;
}

.inline-link {
  border-bottom: 1px solid var(--amber);
  color: var(--walnut-deep);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.inline-link:hover { color: var(--amber); }

/* ═══════════════════════════════════════════
   HEADER
═══════════════════════════════════════════ */
.site-head {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3) clamp(var(--sp-5), 5vw, var(--sp-16));
  background: rgba(250,246,238, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: background var(--t-med), box-shadow var(--t-med);
}

[data-theme="dark"] .site-head {
  background: rgba(26, 21, 16, 0.92);
}

.site-head--scrolled { box-shadow: var(--shadow-sm); }

.brand {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--walnut-deep);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  transition: opacity var(--t-fast);
}
.brand:hover { opacity: .8; }
.brand span {
  display: block;
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--amber);
  margin-top: .15rem;
}
.site-logo { display: block; height: 3.6rem; width: auto; object-fit: contain; }

.head-right { display: flex; align-items: center; gap: var(--sp-6); }

nav {
  display: flex;
  gap: clamp(var(--sp-4), 2.5vw, var(--sp-8));
  font-size: var(--text-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 400;
}
nav a { color: var(--ink-muted); transition: color var(--t-fast); }
nav a:hover, nav a.active { color: var(--walnut-deep); }

.nav-cta {
  border: 1px solid var(--line);
  padding: .38rem .65rem;
  color: var(--walnut-deep) !important;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast) !important;
}
.nav-cta:hover, .nav-cta.active {
  background: var(--walnut-deep);
  border-color: var(--walnut-deep);
  color: var(--cream) !important;
}

/* Theme toggle */
.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem;
  color: var(--ink-muted);
  border-radius: var(--radius-sm);
  transition: color var(--t-fast), background var(--t-fast);
}
.theme-toggle:hover { color: var(--walnut-deep); background: var(--line-soft); }

/* ═══════════════════════════════════════════
   LAYOUT PRIMITIVES
═══════════════════════════════════════════ */
section { padding: clamp(var(--sp-12), 8vw, var(--sp-24)) clamp(var(--sp-5), 5vw, var(--sp-16)); }
.wrap   { max-width: 1140px; margin: 0 auto; }
.narrow { max-width: 740px;  margin: 0 auto; }

.section-head { max-width: 740px; margin-bottom: var(--sp-10); }
.section-head h2 { font-size: var(--text-2xl); margin: var(--sp-2) 0 var(--sp-4); }
.section-head p  { font-size: var(--text-base); margin-top: var(--sp-3); }

.text-center { text-align: center; }
.no-top-padding { padding-top: 0; }
.hero-actions-start { justify-content: flex-start; }
.section-heading-compact { font-size: clamp(1.9rem, 4vw, 2.8rem); margin: .5rem 0 1.2rem; }
.section-copy-spaced { margin-top: 1.25rem; }
.section-copy-wide { max-width: 54ch; margin: 0 auto 2rem; }
.section-top-gap { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.section-top-gap-xl { padding-top: clamp(3rem, 7vw, 6rem); }
.large-pull { font-size: clamp(1.4rem, 3vw, 2rem); }
.hero-heading-large { font-size: clamp(2rem, 5vw, 3.5rem); margin: .75rem 0 1.25rem; }
.author-quote { margin-top: 1.6rem; font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--walnut-deep); }
.full-height-center { min-height: 70vh; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.image-surface { border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }

/* Band backgrounds */
.band-dark  { background: var(--walnut-deep); color: var(--parchment); }
.band-dark  h1, .band-dark  h2, .band-dark  h3 { color: var(--cream); }
.band-dark  p { color: var(--parchment-dim); }

.band-steel { background: var(--charcoal); color: var(--parchment); }
.band-steel h1, .band-steel h2, .band-steel h3 { color: var(--cream); }
.band-steel p { color: var(--parchment-dim); }

.band-parch { background: var(--parchment); }
[data-theme="dark"] .band-parch { background: var(--parchment); }

/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero-short { min-height: 64vh; }
.hero-mid   { min-height: 75vh; }

.hero img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(20,14,8,.12) 0%,
    rgba(20,14,8,.08) 35%,
    rgba(20,14,8,.75) 80%,
    rgba(20,14,8,.90) 100%
  );
}

.hero-copy {
  position: relative; z-index: 2;
  padding: clamp(var(--sp-8), 6vw, var(--sp-20));
  max-width: 880px;
}

.hero-copy .eyebrow { color: var(--amber-light); margin-bottom: var(--sp-3); }
.hero h1  { color: #faf6ee; font-size: var(--text-3xl); margin: var(--sp-2) 0 var(--sp-4); }
.hero .tagline {
  color: #f3ece0;
  font-size: var(--text-lg);
  font-family: var(--serif);
  font-style: italic;
  max-width: 56ch;
}
.hero .btn { color: #faf6ee; }

/* ═══════════════════════════════════════════
   TWO-COLUMN SPLIT
═══════════════════════════════════════════ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--sp-6), 4.5vw, var(--sp-16));
  align-items: center;
}
.split.reverse .split-media { order: 2; }
.split.align-top { align-items: start; }

.split-media img {
  width: 100%;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}
.split-copy h2   { font-size: var(--text-2xl); margin-bottom: var(--sp-5); }
.split-copy p    { font-size: var(--text-base); }
.split-copy p+p  { margin-top: var(--sp-4); }
.split-copy .eyebrow { margin-bottom: var(--sp-3); }

/* ═══════════════════════════════════════════
   ARCHIVE PHOTO
═══════════════════════════════════════════ */
.archive-photo { margin: var(--sp-8) 0 var(--sp-2); }
.archive-photo img {
  width: 100%;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.archive-photo figcaption {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--ink-muted);
  padding-top: var(--sp-3);
  font-style: italic;
}

/* ═══════════════════════════════════════════
   MODEL CARDS
═══════════════════════════════════════════ */
.models {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--sp-5), 3vw, var(--sp-8));
  margin-top: var(--sp-4);
}

.model-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: transform var(--t-med), box-shadow var(--t-med);
  display: flex;
  flex-direction: column;
}
[data-theme="dark"] .model-card { background: var(--parchment-mid); border-color: var(--line); }
.model-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

.model-card .ph { aspect-ratio: 4/5; overflow: hidden; background: var(--walnut-deep); }
.model-card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.model-card:hover .ph img { transform: scale(1.03); }

.model-card .body { padding: var(--sp-6) var(--sp-6) var(--sp-8); flex: 1; display: flex; flex-direction: column; }
.model-card h3    { font-size: var(--text-xl); }
.model-card .dialect {
  font-size: var(--text-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber);
  margin: var(--sp-2) 0 var(--sp-3);
}
.model-card p { font-size: var(--text-base); flex: 1; }
.model-price {
  font-size: var(--text-xs);
  letter-spacing: .10em;
  color: var(--ink-muted);
  margin-top: var(--sp-3);
  font-family: var(--sans);
  font-weight: 400;
}

.model-card .more {
  display: inline-block;
  margin-top: var(--sp-5);
  font-size: var(--text-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--walnut-deep);
  border-bottom: 1px solid var(--amber);
  padding-bottom: 2px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.model-card:hover .more { color: var(--amber); }

/* ═══════════════════════════════════════════
   SPEC TABLE
═══════════════════════════════════════════ */
.spec { border-top: 1px solid var(--line); }
.spec .row {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: var(--sp-6);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--line);
}
.spec .row dt {
  font-size: var(--text-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amber);
  font-weight: 500;
  padding-top: .15rem;
}
.spec .row dd { font-size: var(--text-base); color: var(--ink); }

.price-line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-10);
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: 2px solid var(--walnut-deep);
}
[data-theme="dark"] .price-line { border-top-color: var(--ink); }
.price-line .k { font-size: var(--text-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--amber); }
.price-line .v { font-family: var(--serif); font-size: var(--text-lg); color: var(--walnut-deep); margin-top: var(--sp-1); }

/* ═══════════════════════════════════════════
   MATERIALS GRID
═══════════════════════════════════════════ */
.mats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(var(--sp-5), 3vw, var(--sp-10));
  margin-top: var(--sp-4);
}
.mat { padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.mat .num {
  font-family: var(--serif);
  font-size: var(--text-base);
  color: var(--amber);
  display: block;
  margin-bottom: var(--sp-2);
}
.mat h3 { font-size: var(--text-lg); margin-bottom: var(--sp-3); }
.mat p  { font-size: var(--text-base); }

/* ═══════════════════════════════════════════
   PROCESS STEPS
═══════════════════════════════════════════ */
.steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(var(--sp-8), 4vw, var(--sp-16));
}
.step {
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-5);
  align-items: baseline;
}
.step .n { font-family: var(--serif); font-size: var(--text-lg); color: var(--amber); min-width: 2.2rem; }
.step h4  { font-size: var(--text-base); font-weight: 500; margin-bottom: var(--sp-1); }
.step p   { font-size: var(--text-sm); }

/* ═══════════════════════════════════════════
   GALLERY / PAIR
═══════════════════════════════════════════ */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.pair figure { margin: 0; }
.pair img    { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--radius-sm); }
.pair figcaption { font-size: var(--text-xs); color: var(--ink-muted); padding-top: var(--sp-3); line-height: 1.5; font-style: italic; }

/* ═══════════════════════════════════════════
   CALLOUT BLOCK
═══════════════════════════════════ */
.callout {
  border-left: 2px solid var(--amber);
  padding: var(--sp-4) var(--sp-6);
  margin: var(--sp-8) 0;
  background: var(--parchment);
}
[data-theme="dark"] .callout { background: var(--parchment-mid); }

/* About-page touring note - kept visually distinct from the letter copy. */
.touring-callout {
  border-left-width: 3px;
  padding: clamp(1.5rem, 4vw, 2rem) clamp(1.5rem, 5vw, 2.75rem);
}

.callout p {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--ink);
}
.callout .names {
  display: block;
  font-style: normal;
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber);
  margin-top: var(--sp-3);
  font-weight: 500;
}

/* ═══════════════════════════════════════════
   PULL QUOTE
═══════════════════════════════════════════ */
.pull {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3.2vw, 2.2rem);
  line-height: 1.4;
  font-style: italic;
  color: var(--cream);
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}
.pull .by {
  display: block;
  font-style: normal;
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--amber-light);
  margin-top: var(--sp-6);
}

/* ═══════════════════════════════════════════
   FULL-WIDTH GUITAR IMAGE
═══════════════════════════════════════════ */
.full-guitar-image {
  width: 100%;
  max-height: 80vh;
  object-fit: contain;
  background: var(--walnut-deep);
}

/* ═══════════════════════════════════════════
   CTA SECTION
═══════════════════════════════════════════ */
.cta { text-align: center; }
.cta .eyebrow { margin-bottom: var(--sp-3); }
.cta h2 { font-size: var(--text-2xl); margin-bottom: var(--sp-4); }
.cta p  { max-width: 52ch; margin: 0 auto var(--sp-2); }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-6); }

.waitlist-form {
  max-width: 680px;
  margin: var(--sp-8) auto 0;
  padding: clamp(var(--sp-5), 3vw, var(--sp-8));
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: var(--sp-4);
  text-align: left;
}
[data-theme="dark"] .waitlist-form { background: var(--parchment-mid); }
.waitlist-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
.waitlist-form label {
  display: grid;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amber);
  font-weight: 500;
}
.waitlist-form input,
.waitlist-form select {
  width: 100%;
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  font-weight: 300;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
[data-theme="dark"] .waitlist-form input,
[data-theme="dark"] .waitlist-form select {
  background: var(--parchment-dim);
}
.waitlist-form input:focus,
.waitlist-form select:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(168,112,42,.15);
}
.waitlist-form button { border: 0; cursor: pointer; justify-self: start; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--cream);
  background: var(--amber);
  padding: var(--sp-4) var(--sp-8);
  border-radius: var(--radius-sm);
  transition: background var(--t-fast), transform var(--t-fast);
  border: 1px solid transparent;
}
.btn:hover { background: var(--amber-dim); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn.secondary {
  background: transparent;
  color: var(--walnut-deep);
  border-color: var(--line);
}
.btn.secondary:hover { background: var(--walnut-deep); border-color: var(--walnut-deep); color: var(--cream); }

.btn.ghost {
  background: transparent;
  color: var(--cream);
  border-color: rgba(216,204,184,.5);
}
.hero .btn.ghost { color: #faf6ee; }
.btn.ghost:hover { background: rgba(168,112,42,.3); border-color: var(--amber-light); }

/* ═══════════════════════════════════════════
   COMMISSION FORM
═══════════════════════════════════════════ */
.commission-card {
  background: var(--cream);
  border: 1px solid var(--line);
  padding: clamp(var(--sp-6), 3vw, var(--sp-8));
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
[data-theme="dark"] .commission-card { background: var(--parchment-mid); }
.commission-card h3  { font-size: var(--text-xl); margin-bottom: var(--sp-5); }
.commission-card dl  { display: grid; gap: var(--sp-4); }
.commission-card div { border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.commission-card dt  { font-size: var(--text-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--amber); font-weight: 500; }
.commission-card dd  { font-family: var(--serif); font-size: var(--text-lg); color: var(--walnut-deep); margin-top: var(--sp-1); }

.commission-form { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); }
.commission-form label {
  display: grid;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amber);
  font-weight: 500;
}
.commission-form input,
.commission-form select,
.commission-form textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  font-weight: 300;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
[data-theme="dark"] .commission-form input,
[data-theme="dark"] .commission-form select,
[data-theme="dark"] .commission-form textarea {
  background: var(--parchment-dim);
}
.commission-form textarea { resize: vertical; min-height: 9rem; }
.commission-form input:focus,
.commission-form select:focus,
.commission-form textarea:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(168,112,42,.15);
}
.commission-form button { border: 0; cursor: pointer; justify-self: start; }
.form-honeypot {
  display: none !important;
  visibility: hidden;
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}



/* ═══════════════════════════════════════════
   BUILD JOURNAL / EMAIL CAPTURE
═══════════════════════════════════════════ */
.journal-signup h2 {
  font-size: var(--text-xl);
  margin: var(--sp-2) auto var(--sp-4);
  max-width: 760px;
}
.journal-signup p {
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}
.newsletter-form {
  margin-top: var(--sp-4);
}
.newsletter-form-center {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.newsletter-row {
  display: flex;
  gap: var(--sp-2);
  align-items: stretch;
}
.newsletter-row input {
  min-width: 0;
  flex: 1 1 auto;
  font-family: var(--sans);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .8rem 1rem;
  font-weight: 300;
}
.newsletter-row button {
  flex: 0 0 auto;
  font-size: var(--text-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--cream);
  background: var(--amber);
  border-radius: var(--radius-sm);
  padding: .8rem 1rem;
  transition: background var(--t-fast), transform var(--t-fast);
}
.newsletter-row button:hover { background: var(--amber-dim); transform: translateY(-1px); }
.newsletter-row input:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(168,112,42,.18);
}
.band-dark .newsletter-row input,
.site-foot .newsletter-row input {
  color: var(--cream);
  background: rgba(250,246,238,.08);
  border-color: rgba(216,204,184,.24);
}
.band-dark .newsletter-row input::placeholder,
.site-foot .newsletter-row input::placeholder { color: rgba(216,204,184,.55); }
.foot-journal {
  max-width: 360px;
}
.foot-journal .label {
  font-size: var(--text-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--amber);
  font-weight: 500;
  margin-bottom: var(--sp-2);
  display: block;
}
.foot-journal p {
  color: rgba(216,204,184,.72);
  font-size: var(--text-sm);
  line-height: 1.55;
}
.journal-article .narrow {
  max-width: 780px;
}
.journal-article p {
  font-family: var(--serif);
  font-size: clamp(1.08rem, 1vw + .95rem, 1.32rem);
  line-height: 1.72;
  color: var(--ink);
}
.journal-article .lede {
  font-size: clamp(1.25rem, 1.4vw + 1rem, 1.7rem);
  line-height: 1.55;
  color: var(--walnut-deep);
}
.journal-signature {
  margin-top: var(--sp-8);
  color: var(--amber) !important;
}

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
.site-foot {
  background: var(--walnut-deep);
  color: var(--parchment-dim);
  padding: var(--sp-16) clamp(var(--sp-5), 5vw, var(--sp-16)) var(--sp-10);
}
[data-theme="dark"] .site-foot { background: #100c08; }

.foot-grid {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto minmax(260px, 1fr) minmax(280px, 360px);
  gap: clamp(var(--sp-8), 5vw, var(--sp-12));
  align-items: start;
}
.foot-grid .brand { color: var(--cream); }
.foot-nav-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: var(--sp-8);
  justify-content: end;
}

.site-foot nav {
  flex-direction: column;
  gap: var(--sp-2);
  text-transform: none;
  letter-spacing: .04em;
  font-size: var(--text-sm);
  font-weight: 300;
}
.site-foot nav .label {
  font-size: var(--text-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--amber);
  font-weight: 500;
  margin-bottom: var(--sp-2);
  display: block;
}
.site-foot nav a { color: var(--parchment-dim); transition: color var(--t-fast); display: block; }
.site-foot nav a:hover { color: var(--cream); }

.foot-note {
  max-width: 1140px;
  margin: var(--sp-10) auto 0;
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(216,204,184,.15);
  font-size: var(--text-xs);
  letter-spacing: .04em;
  color: rgba(216,204,184,.55);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3);
}
.foot-note a { color: inherit; transition: color var(--t-fast); }
.foot-note a:hover { color: var(--cream); }

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 860px) {
  .split, .models, .mats, .steps, .pair, .foot-nav-grid {
    grid-template-columns: 1fr;
  }
  .foot-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .foot-nav-grid { justify-content: start; }
  .foot-journal { max-width: 520px; }
  .split.reverse .split-media { order: 0; }
  .spec .row { grid-template-columns: 1fr; gap: var(--sp-1); }
  nav { gap: var(--sp-4); font-size: .68rem; }
  .brand span { display: none; }
  .hero { min-height: 80vh; }
  .hero-short { min-height: 56vh; }
  .hero-mid   { min-height: 68vh; }
}

@media (max-width: 600px) {
  .site-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
  }
  .site-logo { height: 2.8rem; }
  .head-right { width: 100%; gap: var(--sp-2); justify-content: space-between; }
  .site-head nav {
    gap: var(--sp-3);
    font-size: .62rem;
    overflow-x: auto;
    padding-bottom: 0;
  }
  .nav-cta { padding: .32rem .5rem; }
  .theme-toggle { flex: 0 0 auto; }
  nav .nav-cta { white-space: nowrap; }
  .btn.secondary { margin-left: 0; }
  .cta-actions { flex-direction: column; align-items: center; }
  .waitlist-row { grid-template-columns: 1fr; }
  .waitlist-form button { justify-self: stretch; justify-content: center; }
  .newsletter-row { flex-direction: column; }
  .newsletter-row button { width: 100%; justify-content: center; }
  .price-line { flex-direction: column; gap: var(--sp-4); }
}

/* ═══════════════════════════════════════════
   PRINT
═══════════════════════════════════════════ */
@media print {
  .site-head, .site-foot, .cta, .theme-toggle { display: none; }
  body { background: white; color: black; }
  .hero { min-height: auto; }
}