/* ==========================================================================
   KNOW WHAT IT'S WORTH — field guide sales page
   Plain CSS. No build step. Retune the whole page from the tokens below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS — everything tunable lives here
   -------------------------------------------------------------------------- */
:root {

  /* --- Surfaces --------------------------------------------------------- */
  --cream:          #F7F2E8;   /* base background                            */
  --cream-deep:     #EFE7D8;   /* alternating band                           */
  --navy:           #152238;   /* inverted sections                          */
  --navy-deep:      #0D1727;   /* gradient foot of the last-call block       */

  /* --- Text ------------------------------------------------------------- */
  --ink:            #1B1A16;   /* body on cream            15.6:1 / 13.9:1   */
  --ink-muted:      #4A463C;   /* captions, sources         8.4:1 /  7.6:1   */
  --cream-text:     #F7F2E8;   /* body on navy             14.3:1 / 16.1:1   */
  --cream-muted:    #B9C3D2;   /* muted on navy             9.0:1 / 10.1:1   */

  /* --- Amber / gold -----------------------------------------------------
     Two ambers on purpose. Anything that is a *character* uses a token that
     clears 7:1 on its own background. --amber-rule is decorative only and is
     never used for text.                                                    */
  --amber-text:     #5F3E06;   /* amber TEXT on cream       8.6:1 /  7.9:1   */
  --amber-bright:   #F2C14E;   /* amber TEXT on navy        9.5:1 / 10.7:1   */
  --amber-rule:     #C0891A;   /* rules, borders, keylines — non-text        */
  --amber-rule-dim: #8A6412;   /* rules on the deeper cream band             */

  /* --- Action ----------------------------------------------------------- */
  --brick:          #85200F;   /* buy buttons + price only  8.5:1 /  7.7:1   */
  --brick-deep:     #6B190B;   /* pressed / focus                            */
  --on-brick:       #FFFFFF;   /* button label on brick     9.5:1            */

  /* --- Type ------------------------------------------------------------- */
  --font-head:  'Barlow Condensed', 'Arial Narrow', Helvetica, sans-serif;
  --font-body:  'Source Serif 4', Georgia, 'Times New Roman', serif;

  --fs-base:    1.25rem;    /* 20px — body                                   */
  --fs-min:     1.0625rem;  /* 17px — the floor for EVERYTHING on the page    */
  --fs-small:   1.125rem;   /* 18px — captions, footnotes, eyebrows           */
  --fs-lead:    1.375rem;   /* 22px — opening paragraphs                      */
  --fs-h1:      clamp(2.75rem, 7.2vw, 5rem);
  --fs-h2:      clamp(2.1rem, 4.6vw, 3.3rem);
  --fs-h3:      clamp(1.5rem, 2.6vw, 1.85rem);
  --fs-numeral: clamp(2.6rem, 6vw, 4.25rem);
  --fs-price:   clamp(3.25rem, 9vw, 4.75rem);

  --lh-body:    1.6;
  --lh-tight:   1.06;
  --track:      0.16em;     /* letterspacing for uppercase labels            */

  /* --- Measure & rhythm -------------------------------------------------- */
  --measure:    33em;       /* ~68 characters at the body size               */
  --wrap:       74rem;
  --gutter:     clamp(1.25rem, 4vw, 3rem);
  --section-y:  clamp(3.75rem, 8vw, 6.5rem);

  /* --- Furniture --------------------------------------------------------- */
  --rule:       2px;
  --frame:      1px solid rgba(27, 26, 22, 0.28);
  --frame-navy: 1px solid rgba(247, 242, 232, 0.30);
  --radius:     2px;        /* printed-manual corners, not app corners       */
  --bar-h:      4.75rem;
}

/* --------------------------------------------------------------------------
   2. FONTS — self-hosted, latin subset, so text paints immediately
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/barlow-condensed-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/barlow-condensed-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/source-serif-4.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/source-serif-4-italic.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   3. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

p { margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: var(--lh-tight);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}

a { color: inherit; }

strong, b { font-weight: 700; }

:focus-visible {
  outline: 3px solid var(--brick);
  outline-offset: 3px;
}
.on-navy :focus-visible { outline-color: var(--amber-bright); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.band    { background: var(--cream-deep); }
.on-navy { background: var(--navy); color: var(--cream-text); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brick);
  color: var(--on-brick);
  font-family: var(--font-head);
  font-size: var(--fs-base);
  letter-spacing: var(--track);
  padding: 1rem 1.5rem;
  z-index: 300;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   4. RECURRING DEVICES
   -------------------------------------------------------------------------- */

/* Letterspaced uppercase eyebrow, with the thin amber rule beneath it */
.eyebrow {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--amber-text);
  margin: 0 0 0.55rem;
  max-width: none;
}
.eyebrow::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: var(--rule);
  background: var(--amber-rule);
  margin-top: 0.55rem;
}
.on-navy .eyebrow { color: var(--amber-bright); }
.on-navy .eyebrow::after { background: var(--amber-bright); }
.band .eyebrow::after { background: var(--amber-rule-dim); }

/* Eyebrow whose rule runs off to the right instead of sitting under it */
.eyebrow--runner {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.eyebrow--runner::after {
  margin-top: 0;
  width: auto;
  flex: 1 1 auto;
  min-width: 2rem;
}

/* Big amber roman numeral beside a section heading */
.section-head {
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.numeral {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-numeral);
  line-height: 0.9;
  color: var(--amber-text);
  flex: 0 0 auto;
  letter-spacing: -0.01em;
}
.on-navy .numeral { color: var(--amber-bright); }
.section-head__body { min-width: 0; }
.section-head h2 { font-size: var(--fs-h2); max-width: 20ch; }
.on-navy .section-head h2 { color: var(--cream-text); }

/* Bordered card with a coloured label tucked into the top-left corner */
.card {
  border: var(--frame);
  border-top: 3px solid var(--amber-rule);
  background: var(--cream);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: clamp(1.9rem, 3.4vw, 2.5rem);
  position: relative;
  border-radius: var(--radius);
}
.card__label {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-min);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--amber-text);
  display: block;
  margin-bottom: 0.6rem;
}
.card__title {
  font-size: var(--fs-h3);
  margin-bottom: 1.25rem;
}

/* Two-digit numbered rows with dotted rules between */
.rows { list-style: none; margin: 0; padding: 0; }
.rows li {
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
  padding: 0.7rem 0;
  border-bottom: 1px dotted rgba(27, 26, 22, 0.42);
  font-size: var(--fs-base);
}
.rows li:first-child { padding-top: 0; }
.rows li:last-child { border-bottom: 0; padding-bottom: 0; }
.rows .n {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--amber-text);
  flex: 0 0 auto;
  min-width: 1.9ch;
  font-variant-numeric: tabular-nums;
}
.on-navy .rows li { border-bottom-color: rgba(247, 242, 232, 0.35); }
.on-navy .rows .n { color: var(--amber-bright); }

/* Pull quote with an amber left rule */
.pullquote {
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.5;
  border-left: 4px solid var(--amber-rule);
  padding: 0.35rem 0 0.35rem 1.35rem;
  margin: 2rem 0;
  max-width: var(--measure);
}
.on-navy .pullquote { border-left-color: var(--amber-bright); color: var(--cream-text); }

/* Reference line — a rule, then a small letterspaced link, as in a print ad */
.refline {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.25rem;
}
.refline::before {
  content: "";
  width: 3rem;
  height: var(--rule);
  background: var(--amber-rule);
  flex: 0 0 auto;
}
.refline a {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--amber-text);
  text-decoration: none;
  border-bottom: var(--rule) solid var(--amber-rule);
  padding: 0.85rem 0;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
}
.refline a:hover, .refline a:focus-visible { color: var(--brick); border-bottom-color: var(--brick); }

.caption {
  font-size: var(--fs-small);
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 0.85rem 0 0;
  max-width: 46ch;
}

/* --------------------------------------------------------------------------
   5. BUTTONS — five identical buy buttons, 56px floor
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 1rem 1.85rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-base);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  border-radius: var(--radius);
  border: var(--rule) solid transparent;
  cursor: pointer;
}

.btn--buy {
  background: var(--brick);
  color: var(--on-brick);
  border-color: var(--brick);
  box-shadow: 0 2px 0 0 var(--brick-deep);
}
.btn--buy:hover,
.btn--buy:focus-visible { background: var(--brick-deep); border-color: var(--brick-deep); }
.btn--buy:active { box-shadow: none; transform: translateY(2px); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--ink); color: var(--cream); }

.btn--block { width: 100%; }

/* Gumroad's script appends an empty <span class="logo-full"> inside each
   anchor it takes over. Keep it from disturbing the label. */
.btn .logo-full { display: none; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 2rem 0 0;
}

/* --------------------------------------------------------------------------
   6. STICKY TOP BAR
   -------------------------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--navy);
  color: var(--cream-text);
  border-bottom: var(--rule) solid var(--amber-rule);
}
.topbar__inner {
  min-height: var(--bar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.6rem;
}
.topbar__brand {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-base);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cream-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}
.topbar__right {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 2vw, 1.75rem);
}
.topbar__edition {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-min);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--amber-bright);
}
.topbar .btn--buy {
  min-height: 56px;
  padding-inline: 1.35rem;
  font-size: var(--fs-min);
  letter-spacing: 0.08em;
}

/* No JS: the bar button is simply always there. With JS, it fades in once the
   hero has scrolled away. */
.js .topbar__buy { opacity: 0; visibility: hidden; transition: opacity 0.25s ease; }
.js .topbar.is-past-hero .topbar__buy { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  .js .topbar__buy { transition: none; }
}

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero { padding-block: clamp(3rem, 7vw, 5.5rem) var(--section-y); }
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.75rem, 6vw, 4.5rem);
  align-items: start;
}
.hero h1 {
  font-size: var(--fs-h1);
  margin: 0.35rem 0 1.5rem;
  max-width: 15ch;
}
.hero h1 .said {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--brick);
  display: inline;
}
.hero__lead { font-size: var(--fs-lead); line-height: 1.55; }
/* Drop cap tuned to span three lines: box height = 3 x the lead's line-height. */
.hero__lead::first-letter {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 5.9em;
  line-height: 0.76;
  float: left;
  color: var(--amber-text);
  padding: 0 0.1em 0 0;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  margin-top: clamp(2.25rem, 4vw, 3rem);
  border-top: 1px dotted rgba(27, 26, 22, 0.42);
  padding-top: 1.5rem;
}
.stats > div {
  padding-inline: clamp(1rem, 2.4vw, 1.75rem);
  flex: 1 1 8rem;
}
.stats > div:first-child { padding-left: 0; }
.stats > div + div { border-left: var(--rule) solid var(--amber-rule); }
.stats dt {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1;
  color: var(--ink);
  text-transform: uppercase;
}
.stats dd {
  margin: 0.45rem 0 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-min);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Cover in a frame, with a quote card breaking its bottom-left corner */
.coverblock { position: relative; padding-bottom: 3.5rem; }
.coverframe {
  border: var(--frame);
  border-radius: var(--radius);
  background: var(--cream);
  padding: 0.75rem;
  box-shadow: 0 18px 44px -18px rgba(21, 34, 56, 0.55);
  max-width: 27rem;
  margin-inline: auto;
}
.coverframe img { border: 1px solid rgba(27, 26, 22, 0.20); }

.quotecard {
  position: relative;
  margin: -3.25rem 0 0 0;
  max-width: 22rem;
  background: var(--cream);
  border: var(--frame);
  border-left: 4px solid var(--amber-rule);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem;
  box-shadow: 0 10px 26px -14px rgba(21, 34, 56, 0.5);
}
.quotecard p {
  font-style: italic;
  font-size: var(--fs-base);
  line-height: 1.5;
  margin: 0;
}
.quotecard cite {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-min);
  letter-spacing: var(--track);
  text-transform: uppercase;
  font-style: normal;
  color: var(--amber-text);
}

/* --------------------------------------------------------------------------
   8. II — THE GAP (navy)
   -------------------------------------------------------------------------- */
/* The value equation — a single line of large amber-on-navy type, wrapping
   cleanly on narrow screens since each term and operator is its own token. */
.equation {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.55em 0.6em;
  margin: clamp(2.25rem, 4vw, 3rem) 0;
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(1.5rem, 3.6vw, 2.35rem);
  color: var(--amber-bright);
  max-width: none;
}
.equation__op {
  color: var(--cream-muted);
  font-weight: 600;
  font-size: 0.75em;
}
.gap-callout {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  border-left: 4px solid var(--amber-bright);
  padding: 0.5rem 0 0.5rem 1.5rem;
  font-size: var(--fs-lead);
  line-height: 1.5;
  max-width: 40em;
}

/* --------------------------------------------------------------------------
   9. III — WHAT'S INSIDE
   -------------------------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

/* -------------------------------------------------------------------------
   10. IV — LOOK INSIDE + CSS-only lightbox
   ------------------------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 2.75rem);
}
.spread { margin: 0; }
.spread__link {
  display: block;
  position: relative;
  border: var(--frame);
  border-radius: var(--radius);
  background: var(--cream);
  padding: 0.6rem;
  text-decoration: none;
  box-shadow: 0 12px 30px -18px rgba(21, 34, 56, 0.6);
}
.spread__link img { border: 1px solid rgba(27, 26, 22, 0.18); }
.spread__zoom {
  position: absolute;
  left: 1.35rem;
  bottom: 1.35rem;
  background: var(--navy);
  color: var(--amber-bright);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-min);
  letter-spacing: var(--track);
  text-transform: uppercase;
  padding: 0.7rem 1rem;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius);
}

.lightbox { display: none; }
.lightbox:target {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow: auto;
  background: rgba(13, 23, 39, 0.94);
  /* clears the sticky bar so the close control is never sitting on top of it */
  padding: calc(var(--bar-h) + 1rem) 1rem 3rem;
}
.lightbox__backdrop { position: fixed; inset: 0; display: block; }
.lightbox__inner {
  position: relative;
  max-width: 62rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
}
.lightbox__inner img {
  width: 100%;
  border: 1px solid rgba(247, 242, 232, 0.3);
  background: #fff;
}
.lightbox__close {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-base);
  letter-spacing: var(--track);
  text-transform: uppercase;
  text-decoration: none;
  min-height: 56px;
  padding: 0.85rem 1.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border-radius: var(--radius);
}
.lightbox__cap {
  position: relative;
  color: var(--cream-text);
  font-style: italic;
  font-size: var(--fs-small);
  margin: 1rem auto 0;
  max-width: 62rem;
}

/* ------------------------------------------------------------------------
   11. V — WHERE THIS COMES FROM
   ------------------------------------------------------------------------ */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
.split__figure { margin: 0; }
.split__figure .coverframe { max-width: 100%; }

/* ------------------------------------------------------------------------
   12. VI — ORDER
   ------------------------------------------------------------------------ */
.order-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.25rem, 5vw, 3.5rem);
  align-items: start;
}
.order h2 { font-size: var(--fs-h2); margin-bottom: 1.25rem; max-width: 18ch; }
.price {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-price);
  line-height: 1;
  color: var(--brick);
  margin: 1.75rem 0 0.35rem;
  display: block;
}
.price-note {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 1.75rem;
}
.included {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  border-top: 1px dotted rgba(27, 26, 22, 0.42);
}
.included li {
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
  padding: 0.8rem 0;
  border-bottom: 1px dotted rgba(27, 26, 22, 0.42);
}
/* Drawn, not typed — the subset fonts carry no arrow glyph, and a short amber
   rule echoes the keylines used everywhere else. */
.included li::before {
  content: "";
  flex: 0 0 auto;
  align-self: flex-start;
  width: 1.1rem;
  height: var(--rule);
  background: var(--amber-rule-dim);
  margin-top: 0.85em;
}
.afterbuy {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-min);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
  margin: 1.1rem 0 0;
  max-width: none;
}

.trustrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2rem, 4vw, 2.5rem);
  border-top: 1px dotted rgba(27, 26, 22, 0.42);
}
.trustrow span {
  border: var(--frame);
  border-radius: var(--radius);
  background: var(--cream);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-min);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0.8rem 1.15rem;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}

/* ------------------------------------------------------------------------
   13. VII — QUESTIONS
   ------------------------------------------------------------------------ */
.faq { max-width: 52rem; }
.faq details {
  border-bottom: 1px dotted rgba(27, 26, 22, 0.42);
}
.faq details:first-of-type { border-top: 1px dotted rgba(27, 26, 22, 0.42); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.25rem;
  padding: 1.35rem 0;
  min-height: 56px;
  font-weight: 700;
  font-size: var(--fs-lead);
  line-height: 1.5;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--amber-text);
  flex: 0 0 auto;
}
.faq details[open] summary::after { content: "\00D7"; }
.faq summary:hover, .faq summary:focus-visible { color: var(--brick); }
.faq__a { padding: 0 3rem 1.5rem 0; }
.faq__a p { max-width: var(--measure); }

/* ------------------------------------------------------------------------
   14. LAST CALL
   ------------------------------------------------------------------------ */
.lastcall {
  background: linear-gradient(178deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--cream-text);
  text-align: center;
  padding-block: clamp(4rem, 9vw, 7rem);
}
.lastcall .eyebrow { display: inline-block; color: var(--amber-bright); }
.lastcall .eyebrow::after { background: var(--amber-bright); margin-inline: auto; }
.lastcall h2 {
  font-size: var(--fs-h2);
  max-width: 16ch;
  margin: 0.75rem auto 1.5rem;
}
.lastcall p { margin-inline: auto; max-width: 34ch; font-size: var(--fs-lead); }
.lastcall .btn { margin-top: 2.25rem; }

/* ------------------------------------------------------------------------
   15. FOOTER
   ------------------------------------------------------------------------ */
.footer {
  background: var(--navy);
  color: var(--cream-text);
  padding-block: clamp(2.75rem, 5vw, 4rem);
}
.footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem clamp(1.5rem, 4vw, 3rem);
  justify-content: space-between;
  align-items: flex-start;
}
.footer__brand {
  font-family: var(--font-body);
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.2;
}
.footer__brand em {
  font-style: italic;
  font-weight: 400;
  color: var(--amber-bright);
}
.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer__nav a {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--cream-text);
  text-decoration: none;
  border-bottom: var(--rule) solid transparent;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}
.footer__nav a:hover, .footer__nav a:focus-visible {
  color: var(--amber-bright);
  border-bottom-color: var(--amber-bright);
}
.footer__edition {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-min);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--amber-bright);
}
.footer__legal {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding-top: 1.75rem;
  border-top: 1px solid rgba(247, 242, 232, 0.28);
}
.footer__legal p {
  font-size: var(--fs-min);
  line-height: 1.55;
  color: var(--cream-muted);
  max-width: 68ch;
}

/* ==========================================================================
   16. LAYOUT UP — tablet, then desktop
   ========================================================================== */
@media (min-width: 48em) {           /* 768px */
  .gallery  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quotecard { margin-left: -2.5rem; }
}

/* The contents cards only go two-up once each column is wide enough to hold a
   line of 20px serif without shredding it. */
@media (min-width: 60em) {           /* 960px */
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 62em) {           /* 992px */
  .hero__grid  { grid-template-columns: 1.15fr 0.85fr; align-items: center; }
  .split       { grid-template-columns: 0.9fr 1.1fr; }
  .order-grid  { grid-template-columns: 0.8fr 1.2fr; }
  .lastcall h2 { font-size: clamp(2.6rem, 5vw, 4rem); }

  .footer__top     { display: grid; grid-template-columns: auto 1fr auto; align-items: start; }
  .footer__nav     { justify-content: center; }
  .footer__edition { text-align: right; }
}

/* Narrow columns: the runner rule only works when the label fits one line */
@media (max-width: 47.99em) {        /* below 768px */
  .eyebrow--runner { display: block; }
  .eyebrow--runner::after { margin-top: 0.55rem; width: 3.5rem; flex: none; }
}

/* Phones: the sticky bar has to hold a brand and a 56px buy button on one line */
@media (max-width: 34em) {           /* 544px */
  :root            { --bar-h: 4.5rem; }
  .topbar__edition { display: none; }
  .topbar__inner   { flex-wrap: nowrap; gap: 0.6rem; }
  .topbar__brand   {
    font-size: var(--fs-min);
    letter-spacing: 0.02em;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .topbar .btn--buy {
    flex: 0 0 auto;
    padding-inline: 0.85rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  .btn             { padding-inline: 1.15rem; }
  .btn-row .btn    { width: 100%; }
  .faq__a          { padding-right: 0; }
  .spread__zoom    { left: 1.1rem; bottom: 1.1rem; }
  /* two lines, not three — a 3-line cap eats a phone column alive */
  .hero__lead::first-letter { font-size: 3.8em; line-height: 0.78; }
}

@media print {
  .topbar, .lightbox, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}