/* ==========================================================================
   HARD TO REPLACE™ — DESIGN SYSTEM
   Built to THE HARD TO REPLACE BRAND STANDARDS MANUAL™ v1.0: matte black,
   warm white, slate gray, with Deep Navy as the single accent. Quiet
   confidence, restraint, white space. Every colour pair is checked for WCAG AA.

   Contents
     1. Tokens
     2. Reset & base
     3. Typography
     4. Layout
     5. Buttons
     6. Header & navigation
     7. Sections & components
     8. Forms
     9. Footer
    10. Utilities, motion, print
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Tokens */

/* Palette follows THE HARD TO REPLACE BRAND STANDARDS MANUAL™ v1.0 —
   matte black, warm white, slate gray, and a SINGLE accent, never two.

   Deliberate departure: the manual names Deep Navy as the accent, but the
   published book cover and the HTR logo are both gold on black. Navy would
   make the two things this site exists to sell look like another company's.
   The design doc's own reference — "not Las Vegas, Aman" — is matte black,
   warm neutrals and one restrained metallic. So gold is the accent.

   Gold cannot carry small text on a light ground (bright gold is ~2.5:1), so
   the accent is a deep bronze on warm white and opens to full brand gold on
   matte black, where the logo lives. Every pair below passes WCAG AA. */
:root {
  /* Surface */
  --ink:            #1B1B19;   /* matte black */
  --ink-raised:     #252523;
  --ink-line:       #373734;
  --paper:          #F6F4EF;   /* warm white */
  --paper-raised:   #FBFAF7;
  --paper-sunken:   #ECE9E1;
  --white:          #FFFFFF;

  /* Text */
  --text:           #1B1B19;
  --text-muted:     #5A6672;   /* slate gray — 5.4:1 on warm white */
  --text-on-ink:    #F1F0EC;
  --text-on-ink-muted: #A8AFB7; /* slate on matte black */

  /* Accent — brand gold, used alone. Named --copper* for historical reasons;
     the values are the gold sampled from the HTR logo. */
  --copper:         #9A7420;   /* rules, borders, marks — non-text use */
  --copper-text:    #7A5A18;   /* deep bronze — 5.8:1 on warm white */
  --copper-on-ink:  #D0A030;   /* brand gold — 7.4:1 on matte black */
  --oxblood:        #7A5A18;   /* links — same accent, one accent only */
  --stone:          #C3C7CB;
  --stone-line:     #D8DADC;

  /* Feedback */
  --error:          #8A2118;
  --error-bg:       #FBEDEB;
  --success:        #2E5B3A;
  --success-bg:     #EDF4EE;
  --notice:         #7A5200;
  --notice-bg:      #FDF3DC;

  /* Type */
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
                "Hoefler Text", Georgia, "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale — 1.25 ratio at mobile, opening to 1.333 at desktop */
  --step--1: clamp(0.83rem, 0.80rem + 0.14vw, 0.90rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.40vw, 1.50rem);
  --step-2:  clamp(1.44rem, 1.30rem + 0.70vw, 2.00rem);
  --step-3:  clamp(1.73rem, 1.50rem + 1.15vw, 2.66rem);
  --step-4:  clamp(2.07rem, 1.70rem + 1.85vw, 3.55rem);
  --step-5:  clamp(2.49rem, 1.90rem + 2.95vw, 4.74rem);

  /* Spacing — 4px base, geometric */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.25rem;
  --space-xl:  3.5rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6rem;

  /* Structure */
  --measure: 68ch;
  --wrap: 76rem;
  --wrap-narrow: 46rem;
  --radius: 2px;
  --radius-lg: 4px;
  --border: 1px solid var(--stone-line);
  --shadow-sm: 0 1px 2px rgba(27, 27, 25, 0.06), 0 2px 8px rgba(27, 27, 25, 0.04);
  --shadow-lg: 0 2px 4px rgba(27, 27, 25, 0.05), 0 12px 32px rgba(27, 27, 25, 0.10);

  --transition: 160ms cubic-bezier(0.2, 0, 0.2, 1);
  --header-h: 4.5rem;
}

/* ------------------------------------------------------- 2. Reset & base */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
img { background: var(--paper-sunken); }

hr {
  border: 0;
  border-top: var(--border);
  margin: var(--space-l) 0;
}

::selection { background: var(--copper); color: var(--white); }

/* Focus — visible, never removed */
:focus-visible {
  outline: 3px solid var(--copper-text);
  outline-offset: 3px;
  border-radius: var(--radius);
}
.on-ink :focus-visible { outline-color: var(--copper-on-ink); }

.skip-link {
  position: absolute;
  left: var(--space-s);
  top: var(--space-s);
  z-index: 200;
  padding: var(--space-2xs) var(--space-s);
  background: var(--ink);
  color: var(--text-on-ink);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
  transform: translateY(-200%);
  transition: transform var(--transition);
}
.skip-link:focus { transform: translateY(0); }

/* ------------------------------------------------------- 3. Typography */

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-s);
  text-wrap: balance;
}

h1 { font-size: var(--step-5); line-height: 1.02; letter-spacing: -0.025em; }
h2 { font-size: var(--step-4); line-height: 1.06; letter-spacing: -0.02em; }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 var(--space-s); max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--oxblood); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--copper-text); }
.on-ink a { color: var(--copper-on-ink); }

strong { font-weight: 650; }

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 56ch;
}
.on-ink .lede { color: var(--text-on-ink-muted); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper-text);
  margin: 0 0 var(--space-s);
  display: block;
}
.on-ink .eyebrow { color: var(--copper-on-ink); }

/* Trademark mark. line-height:0 keeps the raised glyph from inflating the
   line box, which otherwise opens a gap in headlines and buttons. */
.tm {
  font-size: 0.5em;
  vertical-align: super;
  line-height: 0;
  letter-spacing: 0;
  font-weight: 500;
}
h1 .tm, h2 .tm { font-size: 0.32em; margin-right: -0.08em; }
h3 .tm, h4 .tm { font-size: 0.4em; }
.btn .tm, .nav__link .tm, .eyebrow .tm { font-size: 0.62em; }

/* Pull quote — brand language. Used sparingly, never as decoration. */
.pullquote {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  line-height: 1.28;
  font-style: italic;
  color: var(--text);
  max-width: 30ch;
  margin: 0;
  padding-left: var(--space-m);
  border-left: 2px solid var(--copper);
}
.on-ink .pullquote { color: var(--text-on-ink); border-left-color: var(--copper-on-ink); }

/* ------------------------------------------------------------ 4. Layout */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--space-m);
}
@media (min-width: 48rem) { .wrap { padding-inline: var(--space-l); } }

.wrap-narrow { max-width: var(--wrap-narrow); margin-inline: auto; }

.section { padding-block: var(--space-2xl); }
@media (min-width: 60rem) { .section { padding-block: var(--space-3xl); } }
.section--tight { padding-block: var(--space-xl); }

.section--ink {
  background: var(--ink);
  color: var(--text-on-ink);
}
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: var(--text-on-ink); }
.section--sunken { background: var(--paper-sunken); }
.section--raised { background: var(--paper-raised); }

.section__head { max-width: 46rem; margin-bottom: var(--space-xl); }
.section__head p { color: var(--text-muted); }
.on-ink .section__head p { color: var(--text-on-ink-muted); }

.grid { display: grid; gap: var(--space-m); }
@media (min-width: 44rem) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 44rem) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 44rem) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.split { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 60rem) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
  .split--wide-left { grid-template-columns: 1.25fr 1fr; }
  .split--wide-right { grid-template-columns: 1fr 1.25fr; }
  .split--reverse > :first-child { order: 2; }
}

.stack > * + * { margin-top: var(--space-s); }
.stack-l > * + * { margin-top: var(--space-l); }

/* ----------------------------------------------------------- 5. Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 3rem;
  padding: 0.8rem 1.6rem;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), transform var(--transition);
}
.btn:active { transform: translateY(1px); }
/* Single flex child: keeps a label containing ™ on one unbroken run. */
.btn__label { display: inline-block; }

/* Matte black on light ground: quiet, timeless, and it lets gold stay an
   accent rather than becoming the loudest thing on the page. */
.btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--primary:hover { background: #000000; border-color: #000000; color: var(--white); }

/* On matte black the primary action inverts to brand gold. */
.on-ink .btn--primary { background: var(--copper-on-ink); color: var(--ink); border-color: var(--copper-on-ink); }
.on-ink .btn--primary:hover { background: #E0B44A; border-color: #E0B44A; color: var(--ink); }

.btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--secondary:hover { background: var(--ink); color: var(--paper); }

.on-ink .btn--secondary { color: var(--text-on-ink); border-color: var(--text-on-ink-muted); }
.on-ink .btn--secondary:hover { background: var(--text-on-ink); color: var(--ink); }

.btn--ghost {
  background: transparent;
  color: var(--copper-text);
  border-color: transparent;
  padding-inline: 0;
  min-height: 2.5rem;
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--stone);
}
.btn--ghost:hover { color: var(--oxblood); text-decoration-color: currentColor; }
.on-ink .btn--ghost { color: var(--copper-on-ink); }

.btn--sm { min-height: 2.5rem; padding: 0.5rem 1rem; font-size: var(--step--1); }
.btn--block { display: flex; width: 100%; }

/* Unresolved CTA. Never a dead button: it announces itself as unfinished. */
.btn--unresolved {
  background: repeating-linear-gradient(45deg, var(--notice-bg), var(--notice-bg) 8px, #F7E9C8 8px, #F7E9C8 16px);
  color: var(--notice);
  border: 2px dashed var(--notice);
  cursor: not-allowed;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: center;
  margin-top: var(--space-m);
}
@media (max-width: 30rem) {
  .btn-row .btn:not(.btn--ghost) { width: 100%; }
}

/* ---------------------------------------------- 6. Header & navigation */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(246, 244, 239, 0.92);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: var(--border);
}
@supports not (backdrop-filter: blur(1px)) { .header { background: var(--paper); } }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: var(--header-h);
}

.brandmark {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.brandmark:hover { color: var(--oxblood); }
.brandmark img { max-height: 2.25rem; width: auto; }

.nav { display: none; }
@media (min-width: 62rem) {
  .nav { display: flex; align-items: center; gap: var(--space-m); }
}
.nav__link {
  font-size: var(--step--1);
  font-weight: 550;
  letter-spacing: 0.02em;
  color: var(--text);
  text-decoration: none;
  padding: var(--space-2xs) 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--transition), color var(--transition);
}
.nav__link:hover { color: var(--oxblood); border-bottom-color: var(--copper); }
.nav__link[aria-current="page"] { border-bottom-color: var(--copper); color: var(--oxblood); }

.header__actions { display: flex; align-items: center; gap: var(--space-2xs); }
.header .btn { min-height: 2.75rem; }
@media (max-width: 61.999rem) { .header__cta { display: none; } }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 2.75rem;
  padding: 0.4rem 0.9rem;
  background: transparent;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 650;
  color: var(--ink);
  cursor: pointer;
}
@media (min-width: 62rem) { .menu-toggle { display: none; } }
.menu-toggle__bars { display: block; width: 1rem; height: 0.7rem; position: relative; }
.menu-toggle__bars::before,
.menu-toggle__bars::after,
.menu-toggle__bars span {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
}
.menu-toggle__bars::before { top: 0; }
.menu-toggle__bars span { top: 50%; transform: translateY(-50%); }
.menu-toggle__bars::after { bottom: 0; }

.mobile-menu {
  display: none;
  border-top: var(--border);
  background: var(--paper-raised);
}
.mobile-menu[data-open="true"] { display: block; }
@media (min-width: 62rem) { .mobile-menu { display: none !important; } }
.mobile-menu ul { list-style: none; margin: 0; padding: var(--space-s) 0; }
.mobile-menu li + li { border-top: 1px solid var(--stone-line); }
.mobile-menu a {
  display: block;
  padding: var(--space-s) 0;
  font-size: var(--step-1);
  font-family: var(--font-serif);
  color: var(--ink);
  text-decoration: none;
}
.mobile-menu a[aria-current="page"] { color: var(--oxblood); }
.mobile-menu .btn { margin: var(--space-s) 0 var(--space-m); }

/* Sticky mobile CTA on high-intent pages. Restrained: hidden until scrolled. */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  padding: var(--space-2xs) var(--space-m) calc(var(--space-2xs) + env(safe-area-inset-bottom));
  background: rgba(27, 27, 25, 0.96);
  transform: translateY(110%);
  transition: transform var(--transition);
}
.sticky-cta[data-visible="true"] { transform: translateY(0); }
@media (min-width: 62rem) { .sticky-cta { display: none; } }
.sticky-cta .btn { margin-block: var(--space-2xs); }

/* --------------------------------------------- 7. Sections & components */

/* Hero */
.hero { padding-block: var(--space-xl) var(--space-2xl); background: var(--paper); }
@media (min-width: 60rem) { .hero { padding-block: var(--space-2xl); } }
.hero h1 { margin-bottom: var(--space-m); }
.hero__copy { max-width: 34ch; }
.hero .lede { max-width: 46ch; }

.hero__media { position: relative; }
.hero__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

/* Image placeholder — honest about what is missing */
.img-missing {
  display: grid;
  place-content: center;
  gap: var(--space-2xs);
  aspect-ratio: 4 / 5;
  padding: var(--space-l);
  text-align: center;
  background: repeating-linear-gradient(45deg, var(--paper-sunken), var(--paper-sunken) 10px, #E1DED5 10px, #E1DED5 20px);
  border: 2px dashed var(--text-muted);
  border-radius: var(--radius-lg);
  color: var(--text-muted);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.img-missing--cover { aspect-ratio: 2 / 3; }
.img-missing--wide { aspect-ratio: 16 / 9; }

/* Transformation model: Strong → Useful → Hard To Replace */
.model {
  display: grid;
  gap: var(--space-s);
  counter-reset: step;
}
@media (min-width: 56rem) {
  .model { grid-template-columns: repeat(3, 1fr); gap: var(--space-m); }
}
.model__step {
  position: relative;
  padding: var(--space-l) var(--space-m) var(--space-m);
  background: var(--ink-raised);
  border-top: 3px solid var(--copper-on-ink);
  border-radius: var(--radius-lg);
}
.model__step::before {
  counter-increment: step;
  content: counter(step);
  display: block;
  font-family: var(--font-serif);
  font-size: var(--step-1);
  color: var(--copper-on-ink);
  margin-bottom: var(--space-2xs);
}
.model__step h3 { font-size: var(--step-2); margin-bottom: var(--space-2xs); }
.model__step p { color: var(--text-on-ink-muted); font-size: var(--step-0); }
/* Connector arrows, decorative only */
@media (min-width: 56rem) {
  .model__step:not(:last-child)::after {
    content: "";
    position: absolute;
    right: calc(var(--space-m) / -2 - 0.28rem);
    top: 50%;
    width: 0.55rem; height: 0.55rem;
    border-top: 2px solid var(--copper-on-ink);
    border-right: 2px solid var(--copper-on-ink);
    transform: translateY(-50%) rotate(45deg);
  }
}

/* Cards */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-m);
  background: var(--paper-raised);
  border: var(--border);
  border-radius: var(--radius-lg);
}
.card h3 { margin-bottom: 0; }
.card p { color: var(--text-muted); font-size: var(--step-0); }
.card__foot { margin-top: auto; padding-top: var(--space-s); }
.on-ink .card { background: var(--ink-raised); border-color: var(--ink-line); }
.on-ink .card p { color: var(--text-on-ink-muted); }

/* Path cards — the "choose your path" fork */
.path {
  display: flex;
  flex-direction: column;
  padding: var(--space-l);
  background: var(--paper-raised);
  border: var(--border);
  border-top: 4px solid var(--copper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.path--primary { border-top-color: var(--oxblood); background: var(--white); }
.path__title { font-size: var(--step-2); }
.path ol, .path ul { margin: var(--space-s) 0 var(--space-m); padding-left: 1.1rem; color: var(--text-muted); }
.path li { margin-bottom: var(--space-2xs); }
.path .btn { margin-top: auto; }

/* Numbered / labelled lists */
.marked { list-style: none; margin: 0; padding: 0; }
.marked li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: var(--space-s);
  max-width: var(--measure);
}
.marked li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 0.6rem; height: 0.6rem;
  border: 2px solid var(--copper);
  border-radius: 50%;
}
.on-ink .marked li::before { border-color: var(--copper-on-ink); }
.marked strong { display: block; }

/* Process steps — Understand → Assess → … */
.process { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-s); counter-reset: p; }
@media (min-width: 48rem) { .process { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 72rem) { .process { grid-template-columns: repeat(6, 1fr); } }
.process li {
  counter-increment: p;
  padding-top: var(--space-s);
  border-top: 2px solid var(--copper);
}
.process li b { display: block; font-family: var(--font-serif); font-size: var(--step-1); font-weight: 600; }
.process li span { display: block; font-size: var(--step--1); color: var(--text-muted); margin-top: var(--space-3xs); }
.on-ink .process li span { color: var(--text-on-ink-muted); }

/* Testimonials */
.quote {
  display: flex;
  flex-direction: column;
  padding: var(--space-l);
  background: var(--paper-raised);
  border: var(--border);
  border-radius: var(--radius-lg);
}
.quote blockquote {
  margin: 0 0 var(--space-m);
  font-family: var(--font-serif);
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--text);
}
.quote figcaption { margin-top: auto; font-size: var(--step--1); line-height: 1.5; }
.quote figcaption b { display: block; font-size: var(--step-0); font-family: var(--font-sans); }
.quote figcaption span { color: var(--text-muted); }

/* Stat / outcome blocks */
.outcome { padding-top: var(--space-s); border-top: 2px solid var(--copper); }
.outcome h3 { font-size: var(--step-1); margin-bottom: var(--space-2xs); }
.outcome p { font-size: var(--step-0); color: var(--text-muted); }
.on-ink .outcome p { color: var(--text-on-ink-muted); }

/* FAQ */
.faq { border-top: var(--border); max-width: var(--wrap-narrow); }
.faq details { border-bottom: var(--border); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-m);
  padding: var(--space-m) 0;
  font-family: var(--font-serif);
  font-size: var(--step-1);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-sans);
  font-size: var(--step-2);
  font-weight: 400;
  color: var(--copper-text);
  line-height: 1;
  flex: none;
}
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding-bottom: var(--space-m); }
.faq p { color: var(--text-muted); }

/* Book cover presentation */
.cover-shot { max-width: 22rem; margin-inline: auto; }
.cover-shot img { box-shadow: var(--shadow-lg); border-radius: var(--radius); }

.keynote-subtitle {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  font-style: italic;
  color: var(--copper-text);
  margin-top: calc(var(--space-s) * -0.5);
  margin-bottom: var(--space-m);
}

/* Audience note — states plainly who a thing is written for. */
.audience-note {
  margin-block: var(--space-m);
  padding-left: var(--space-s);
  border-left: 3px solid var(--copper);
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--text-muted);
}
.audience-note strong { color: var(--text); }
.on-ink .audience-note { color: var(--text-on-ink-muted); border-left-color: var(--copper-on-ink); }
.on-ink .audience-note strong { color: var(--text-on-ink); }

/* Retailer list */
.retailers { list-style: none; margin: var(--space-m) 0 0; padding: 0; display: grid; gap: var(--space-2xs); }
@media (min-width: 36rem) { .retailers { grid-template-columns: repeat(2, 1fr); } }

/* Notice band — test mode, draft mode, honest system messaging */
.notice {
  padding: var(--space-s) var(--space-m);
  background: var(--notice-bg);
  border: 1px solid #E8D5A8;
  border-left: 4px solid var(--notice);
  border-radius: var(--radius);
  color: var(--notice);
  font-size: var(--step--1);
  line-height: 1.55;
}
.notice b { color: var(--notice); }
.notice p { color: inherit; max-width: none; }

.draft-banner {
  background: var(--ink);
  color: var(--text-on-ink);
  font-size: var(--step--1);
  text-align: center;
  padding: var(--space-2xs) var(--space-m);
  border-bottom: 3px solid var(--copper-on-ink);
}
.draft-banner b { color: var(--copper-on-ink); }

/* Inline unresolved placeholder */
mark.ph {
  background: var(--notice-bg);
  color: var(--notice);
  border: 1px dashed var(--notice);
  border-radius: var(--radius);
  padding: 0.05em 0.35em;
  font-family: var(--font-sans);
  font-size: 0.86em;
  font-weight: 650;
  letter-spacing: 0.02em;
}

/* -------------------------------------------------------------- 8. Forms */

.form { max-width: 42rem; }
.field { margin-bottom: var(--space-m); }
.field > label,
.fieldset__legend {
  display: block;
  margin-bottom: var(--space-3xs);
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--text);
}
.field .hint {
  display: block;
  margin-bottom: var(--space-2xs);
  font-size: var(--step--1);
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: 0;
}
.optional { font-weight: 400; color: var(--text-muted); }

.input, .select, .textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.85rem;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  color: var(--text);
  background: var(--white);
  border: 1px solid #B9AF9E;
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text) 50%), linear-gradient(135deg, var(--text) 50%, transparent 50%); background-position: right 1.1rem center, right 0.75rem center; background-size: 0.36rem 0.36rem; background-repeat: no-repeat; padding-right: 2.25rem; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-muted); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--copper-text); box-shadow: 0 0 0 3px rgba(154, 116, 32, 0.22); outline: none; }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--error);
  background: var(--error-bg);
}

.field__error {
  display: none;
  margin-top: var(--space-3xs);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--error);
}
.field__error[data-shown="true"] { display: block; }

.fieldset { border: 0; margin: 0 0 var(--space-m); padding: 0; }
.check {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: var(--space-2xs) var(--space-xs);
  align-items: start;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--text-muted);
}
.check input { width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--oxblood); }

.form__status { margin-top: var(--space-m); }
.form__status:empty { margin: 0; }
.status-msg { padding: var(--space-s) var(--space-m); border-radius: var(--radius); border-left: 4px solid; font-size: var(--step-0); }
.status-msg--error { background: var(--error-bg); border-color: var(--error); color: var(--error); }
.status-msg--success { background: var(--success-bg); border-color: var(--success); color: var(--success); }
.status-msg--test { background: var(--notice-bg); border-color: var(--notice); color: var(--notice); }
.status-msg p { max-width: none; }

/* Honeypot — visually hidden but not display:none, so bots still fill it */
.hp {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* Inline email capture */
.signup { display: grid; gap: var(--space-2xs); }
@media (min-width: 34rem) {
  .signup { grid-template-columns: 1fr auto; align-items: start; }
}

/* ------------------------------------------------------------- 9. Footer */

.footer { background: var(--ink); color: var(--text-on-ink); padding-block: var(--space-2xl) var(--space-l); }
.footer__top { display: grid; gap: var(--space-xl); }
@media (min-width: 56rem) { .footer__top { grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-l); } }
.footer h2 { font-size: var(--step-2); }
.footer__logo {
  width: 100%;
  max-width: 15rem;
  height: auto;
  margin-bottom: var(--space-m);
}
.footer h3 {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--copper-on-ink);
  margin-bottom: var(--space-s);
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: var(--space-3xs); }
/* Comfortable touch height — footer links are the most-missed tap target. */
.footer li a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  color: var(--text-on-ink);
  text-decoration: none;
  font-size: var(--step-0);
}
.footer li a:hover { color: var(--copper-on-ink); text-decoration: underline; }
.footer__bottom {
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1px solid var(--ink-line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-m);
  justify-content: space-between;
  font-size: var(--step--1);
  color: var(--text-on-ink-muted);
}
.footer__bottom p { max-width: none; }

/* ------------------------------------------ 10. Utilities, motion, print */

.visually-hidden {
  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;
}

.text-center { text-align: center; }
.center-block { margin-inline: auto; }
.muted { color: var(--text-muted); }
.on-ink .muted { color: var(--text-on-ink-muted); }
.no-max { max-width: none; }
.mt-xs { margin-top: var(--space-xs); }
.mt-s { margin-top: var(--space-s); }
.mt-l { margin-top: var(--space-l); }
.mt-xl { margin-top: var(--space-xl); }

/* These replaced inline style attributes so the site can ship a Content
   Security Policy with no 'unsafe-inline' for styles or scripts. */
.measure-narrow { max-width: 52ch; }
.measure-mid { max-width: 60ch; }
.btn-row--center { justify-content: center; }
.field--flush { margin: 0; }
.span-all { grid-column: 1 / -1; }
.embed-16x9 { width: 100%; aspect-ratio: 16 / 9; border: 0; }
.social-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-s);
  list-style: none;
  padding: 0;
}

/* Motion: one restrained entrance, disabled entirely on request. */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(12px); transition: opacity 500ms ease, transform 500ms ease; }
  .reveal[data-shown="true"] { opacity: 1; transform: none; }
}

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

@media print {
  .header, .footer, .sticky-cta, .draft-banner, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; }
  a::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
}