/* =========================================================================
   Corporate Product Management - book site

   Identity taken from the printed cover (Softcover v3), not invented:
     paper  white
     ink    black, set in an ultra-condensed poster gothic
     gold   #B06608, sampled from the printed rules and the word "thriving"

   The cover's own joke, "a hands-on guide to [surviving] thriving", is the
   brand device and recurs on the page.

   Theme: light, locked. One deliberate ink-black block (The method) acts as
   the spine of the scroll. That is the single permitted inversion, and it is
   a full-section switch, not alternating tints.

   Shape system: square. The book is a printed object with square corners and
   hairline rules. Nothing on this page is rounded, including buttons.
   ========================================================================= */

:root {
  /* --- paper --- */
  --paper:    #ffffff;
  --paper-2:  #f6f3ed;
  --paper-3:  #efeae0;

  /* --- ink --- */
  --ink:      #0d0d0d;
  --ink-2:    #33322e;
  --ink-3:    #6b6963;

  /* --- gold (single accent, locked) --- */
  --gold:     #b06608;   /* brand value, for rules and large type */
  --gold-ink: #8a5005;   /* darkened for small text, passes AA on paper */

  /* --- rules --- */
  --rule:      #ddd8cd;
  --rule-soft: #ece8df;

  /* --- the one inverted block --- */
  --dark:      #0d0d0d;
  --dark-2:    #1a1a19;
  --dark-rule: #33322e;
  --dark-ink3: #97948c;

  /* --- rhythm --- */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section-y: clamp(5rem, 10vw, 9rem);
  --maxw: 1300px;

  /* --- type --- */
  /* The printed cover uses an ultra-condensed poster gothic. Big Shoulders
     Display 800 is the closest widely available match; if the original face is
     licensed for web, swap it in here and nothing else needs to change. */
  --display: "Big Shoulders Display", "Haettenschweiler", "Arial Narrow", Impact, sans-serif;
  --serif: "EB Garamond", Georgia, "Times New Roman", serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* =========================================================================
   Reset
   ========================================================================= */

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

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.075rem, 1.02rem + 0.24vw, 1.19rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: 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; }

::selection { background: var(--gold); color: var(--paper); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: 0.75rem 1.25rem; font-family: var(--display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.skip-link:focus { left: 0; }

/* =========================================================================
   Furniture
   ========================================================================= */

.shell { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
section { position: relative; }
.section-pad { padding-block: var(--section-y); }

/* the printed hairline under a heading, straight off the back cover */
.gold-rule {
  width: 74px; height: 3px; background: var(--gold);
  margin-block: 1.5rem;
}

.eyebrow {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 1.25rem;
}

/* --- the poster face --- */
.h-display, .h-section, .h-sub {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.012em;
  text-wrap: balance;
}

.h-display { font-size: clamp(2.9rem, 1.5rem + 5.8vw, 6.1rem); line-height: 0.9; }
.h-section { font-size: clamp(2.3rem, 1.3rem + 3.9vw, 4.35rem); line-height: 0.92; }
.h-sub     { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem); line-height: 0.98; }

.lede {
  font-size: clamp(1.15rem, 1.06rem + 0.42vw, 1.42rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 34em;
}

.body-copy { color: var(--ink-2); max-width: 36em; }

.h-section + .lede, .h-display + .lede { margin-top: 1.4rem; }

.gold { color: var(--gold); }

/* --- the cover's joke, reused --- */
.swap { position: relative; display: inline-block; white-space: nowrap; }
.swap s {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--ink-2);
  color: var(--ink-3);
}
.swap .over {
  position: absolute;
  left: 50%;
  bottom: 0.82em;
  translate: -50% 0;
  font-style: italic;
  color: var(--gold);
  font-size: 0.94em;
  line-height: 1;
  white-space: nowrap;
}

/* =========================================================================
   Buttons - square, printed
   ========================================================================= */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem;
  white-space: nowrap;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 1.05rem 1.85rem;
  border: 2px solid var(--ink);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease), transform 0.15s var(--ease);
}
.btn:active { transform: translateY(1px); }

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

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

.btn-sm { padding: 0.7rem 1.2rem; font-size: 0.8125rem; border-width: 2px; }

.btn .arw { width: 15px; height: 15px; flex: none; transition: transform 0.2s var(--ease); }
.btn:hover .arw { transform: translateX(3px); }

/* on the inverted block */
.on-dark .btn-primary { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.on-dark .btn-primary:hover { background: var(--gold); border-color: var(--gold); color: var(--paper); }

/* =========================================================================
   Navigation
   ========================================================================= */

.nav {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 50;
  height: 72px; display: flex; align-items: center;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.nav[data-stuck="true"] { border-bottom-color: var(--rule); background: rgba(255, 255, 255, 0.95); }

.nav-inner {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}

.brand {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex; align-items: baseline; gap: 0.55rem;
}
.brand .mark { color: var(--gold); }
.brand .short { display: none; }

.nav-links { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.1rem); }
.nav-links a {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
  transition: color 0.18s var(--ease);
}
.nav-links a:hover { color: var(--gold); }

@media (max-width: 940px) {
  .brand .full { display: none; }
  .brand .short { display: inline; }
  .nav-links { display: none; }
}

/* =========================================================================
   Hero
   ========================================================================= */

.hero {
  min-height: 100dvh;
  display: flex; align-items: center;
  padding-block: 112px clamp(3rem, 6vw, 4.5rem);
  overflow: hidden;
}

.hero-inner {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  align-items: center;
  gap: clamp(2rem, 4.5vw, 4rem);
}

.hero-copy { max-width: 46rem; }

.hero h1 {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.7rem, 1.1rem + 6.2vw, 5.6rem);
  line-height: 0.88;
  letter-spacing: 0.008em;
}
.hero h1 .gold { display: block; color: var(--gold); }

.hero-sub {
  margin-top: 2.4rem;
  font-size: clamp(1.2rem, 1.08rem + 0.55vw, 1.55rem);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 30em;
}

.hero-actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* --- the book object ---
   Ships on a white ground, not an alpha channel. mix-blend-mode: multiply drops
   that ground out against the paper and keeps the render's own cast shadow, so
   this only works while the page background stays white. */
.book-stage { display: flex; justify-content: center; }

.book-cut {
  width: auto;
  height: min(70vh, 700px);
  mix-blend-mode: multiply;
  transition: transform 0.7s var(--ease);
}
.book-cut:hover { transform: translateY(-6px); }

/* multiply needs a white backdrop to disappear into */
@supports not (mix-blend-mode: multiply) {
  .book-cut { mix-blend-mode: normal; }
}

@media (max-width: 940px) {
  .hero { min-height: auto; padding-block: 104px clamp(3rem, 9vw, 4rem); }
  .hero-inner { grid-template-columns: 1fr; gap: 2.75rem; }
  .book-stage { order: -1; }
  .book-cut { height: min(52vh, 440px); }
}

/* Stacked CTAs of different widths read as ragged. Match them. */
@media (max-width: 560px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
}

/* =========================================================================
   Formats strip. Availability only. Prices are deliberately not shown
   anywhere: they would need hand-updating and a stale price costs more
   trust than an absent one buys.
   ========================================================================= */

.formats { border-block: 1px solid var(--rule); background: var(--paper-2); }
.formats-inner {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  gap: 0.75rem clamp(1.75rem, 5vw, 4rem);
  padding-block: 1.05rem;
}
.fmt {
  font-family: var(--display); font-weight: 700;
  font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
  transition: color 0.18s var(--ease);
}
.fmt:hover { color: var(--gold); }

/* =========================================================================
   Thesis - the back cover's pull quote, at scale
   ========================================================================= */

.thesis { background: var(--paper); text-align: center; }
.thesis-inner { max-width: 52rem; margin-inline: auto; }

.thesis blockquote {
  font-size: clamp(1.6rem, 1.05rem + 2.35vw, 2.85rem);
  line-height: 1.28;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.thesis .qm {
  font-family: var(--serif);
  font-size: 2.6em;
  line-height: 0;
  color: var(--gold);
  vertical-align: -0.32em;
}
.thesis .gold-rule { margin-inline: auto; }

/* =========================================================================
   Tension
   ========================================================================= */

.tension { background: var(--paper-2); border-block: 1px solid var(--rule); }

/* the jacket's claim: statement, then the correction in gold.
   Greedy wrapping, not balanced: balance leaves a short orphan middle line. */
.tension-claim { max-width: 36ch; text-wrap: normal; }
.tension-claim .gold { display: block; margin-top: 0.14em; }

.tension-grid {
  margin-top: clamp(2.75rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
@media (min-width: 940px) { .tension-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.demands { margin-top: 0; }
.demand {
  padding-block: 1rem;
  border-top: 1px solid var(--rule);
  font-size: clamp(1.1rem, 1.02rem + 0.45vw, 1.32rem);
  color: var(--ink-2);
  line-height: 1.35;
}
.demand:last-child { border-bottom: 1px solid var(--rule); }

.turn-quote {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.85rem, 1.15rem + 2.5vw, 3.1rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-wrap: balance;
}
.turn-note { margin-top: 1.75rem; color: var(--ink-2); max-width: 32em; }

/* =========================================================================
   Promises - "Inside, you'll learn how to"
   ========================================================================= */

.promises { background: var(--paper); }
.promise-list { margin-top: clamp(2.25rem, 4vw, 3.25rem); }

.promise {
  display: flex; align-items: baseline; gap: clamp(1rem, 2.4vw, 2.25rem);
  padding-block: clamp(1.1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--rule);
}
.promise:last-child { border-bottom: 1px solid var(--rule); }

.promise-n {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  color: var(--gold);
  line-height: 1;
  flex: none;
  min-width: 2.2ch;
}
.promise-t {
  font-size: clamp(1.15rem, 1.03rem + 0.6vw, 1.55rem);
  line-height: 1.3;
  color: var(--ink);
}

/* =========================================================================
   The method - the single inverted block
   ========================================================================= */

.method {
  background: var(--dark);
  color: var(--paper);
  overflow: hidden;
}
.method .eyebrow { color: var(--gold); }
.method .lede { color: var(--dark-ink3); }

.method-head { padding-block: var(--section-y) 0; }
.method-head .h-section { max-width: 15ch; }
.method-head .lede { margin-top: 1.5rem; }

.pan { position: relative; margin-top: clamp(2.75rem, 5vw, 4rem); padding-bottom: var(--section-y); }

/* While pinned the section's top sits at the viewport top, which puts it under
   the fixed header. Reserve that height and centre the cards in what is left. */
@media (min-width: 1024px) {
  .pan {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 72px;
    padding-bottom: 0;
  }
}

/* The first and last cards line up with the section heading above them, not
   with the raw viewport edge, so both insets match the shell's content edge
   and the pan begins and ends symmetrically. */
.track {
  display: flex;
  gap: 0;
  width: max-content;
  padding-inline: max(var(--gutter), calc((var(--vw, 100vw) - var(--maxw)) / 2 + var(--gutter)));
}

.step {
  position: relative;
  flex: none;
  width: clamp(258px, 74vw, 330px);
  min-height: 400px;
  display: flex; flex-direction: column;
  padding: 2rem 1.9rem;
  border-left: 1px solid var(--dark-rule);
  transition: background-color 0.3s var(--ease);
}
.step:last-child { border-right: 1px solid var(--dark-rule); }
.step:hover { background: var(--dark-2); }

.step-num {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.6rem, 2rem + 1.4vw, 3.5rem);
  line-height: 0.85;
  color: var(--gold);
}

.step-title {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  margin-top: 2.6rem;
  font-size: 1.62rem;
  line-height: 0.95;
  letter-spacing: 0.012em;
  min-height: 3.1rem;
  display: flex;
  align-items: flex-end;
}

.step-body { margin-top: 0.9rem; color: var(--dark-ink3); font-size: 1.02rem; line-height: 1.5; }

.step-meta {
  margin-top: auto; padding-top: 0.9rem; min-height: 3.2em;
  border-top: 1px solid var(--dark-rule);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dark-ink3);
}

.step-loop { background: var(--dark-2); }
.step-loop .step-title { margin-top: 0; }
.step-loop .loop-mark { width: 44px; height: 44px; stroke: var(--gold); fill: none; stroke-width: 1.5; margin-bottom: 1.6rem; }

@media (max-width: 1023px) {
  .track {
    width: auto; overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 1.25rem;
    scrollbar-width: thin;
  }
  .step { scroll-snap-align: center; }
}

/* =========================================================================
   Traps
   ========================================================================= */

.traps { background: var(--paper); }
.traps-head { max-width: 44rem; }

.trap-grid {
  margin-top: clamp(2.5rem, 4.5vw, 3.75rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
@media (min-width: 700px)  { .trap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) { .trap-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.trap {
  background: var(--paper);
  padding: clamp(1.6rem, 2.6vw, 2.1rem);
  display: flex; flex-direction: column;
  min-height: 236px;
  transition: background-color 0.25s var(--ease);
}
.trap:hover { background: var(--paper-2); }

.trap-name {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.32rem;
  line-height: 0.98;
  letter-spacing: 0.012em;
}
.trap-says {
  margin-top: 1rem;
  font-size: 1.16rem;
  font-style: italic;
  color: var(--gold-ink);
  line-height: 1.35;
}
.trap-why { margin-top: 1.15rem; color: var(--ink-3); font-size: 1rem; line-height: 1.45; }

.trap--ink { background: var(--dark); }
.trap--ink:hover { background: var(--dark-2); }
.trap--ink .trap-name { color: var(--paper); }
.trap--ink .trap-says { color: var(--gold); }
.trap--ink .trap-why { color: var(--dark-ink3); }

/* =========================================================================
   Inside the book
   ========================================================================= */

.inside { background: var(--paper-2); border-block: 1px solid var(--rule); }

.inside-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 1000px) { .inside-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }

.page-stage { perspective: 1700px; }
.page {
  background: var(--paper);
  padding: clamp(2.1rem, 3.6vw, 3.1rem) clamp(1.9rem, 3.2vw, 2.8rem);
  font-size: 1.02rem;
  line-height: 1.72;
  transform: rotateY(5deg);
  transform-origin: left center;
  box-shadow: -1px 0 0 #e4dfd4, 0 20px 44px rgba(0, 0, 0, 0.13), 0 46px 84px rgba(0, 0, 0, 0.09);
}
.page h3 {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 1.65rem; line-height: 0.95; letter-spacing: 0.012em; margin-bottom: 1.3rem;
}
.page p { margin-bottom: 1rem; text-wrap: pretty; }
.page p:last-of-type { margin-bottom: 0; }
.page em { color: var(--gold); font-style: italic; }
.page-foot {
  margin-top: 2rem; padding-top: 0.9rem; border-top: 1px solid var(--rule-soft);
  font-family: var(--display); font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.16em; color: var(--ink-3);
}
.page-caption { margin-top: 1.3rem; font-size: 0.98rem; color: var(--ink-3); font-style: italic; }

.toc { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.toc-part + .toc-part { margin-top: 2rem; }
.toc-part-name {
  font-family: var(--display); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold-ink);
  padding-bottom: 0.75rem; border-bottom: 2px solid var(--gold);
}
.toc-list li {
  display: flex; align-items: baseline; gap: 0.7rem;
  padding-block: 0.48rem; color: var(--ink-2); font-size: 1.06rem;
}
.toc-list .dots {
  flex: 1; height: 1px; transform: translateY(-4px);
  background: repeating-linear-gradient(90deg, var(--rule) 0 2px, transparent 2px 6px);
}
.toc-list .pg { font-family: var(--display); font-weight: 700; font-size: 0.8125rem; color: var(--ink-3); letter-spacing: 0.06em; }
.toc-list li.is-key { color: var(--ink); }

/* =========================================================================
   Reader
   ========================================================================= */

.reader { background: var(--paper); }

.reader-quote {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.7rem);
  line-height: 0.93; letter-spacing: 0.01em; text-wrap: balance;
  max-width: 52rem;
}
.reader-attrib {
  margin-top: 1.4rem; font-family: var(--display); font-weight: 700; font-size: 0.8125rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3);
}

.whatif { margin-top: clamp(2.75rem, 5vw, 4rem); padding-top: clamp(2.25rem, 4vw, 3rem); border-top: 1px solid var(--rule); }
.whatif-intro { font-size: clamp(1.12rem, 1.03rem + 0.4vw, 1.32rem); color: var(--ink-2); max-width: 40em; margin-bottom: 2rem; }
.whatif-intro b { color: var(--ink); font-weight: 600; }

.whatif-list { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 840px) { .whatif-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 4rem); } }

.whatif-item {
  padding-block: 1rem; border-top: 1px solid var(--rule);
  font-size: clamp(1.08rem, 1rem + 0.35vw, 1.24rem);
  line-height: 1.3; color: var(--ink);
}

/* =========================================================================
   Author colophon. A footnote, not a section. Body-size type, narrow measure,
   hairline above, no display headline: the book is the product.
   ========================================================================= */

.colophon {
  background: var(--paper);
  padding-block: clamp(3rem, 5vw, 4.5rem);
}
.colophon-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  border-top: 1px solid var(--rule);
  padding-top: clamp(2rem, 3.5vw, 2.75rem);
}
@media (min-width: 860px) {
  .colophon-inner { grid-template-columns: 12rem minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); }
}
.colophon-label {
  font-family: var(--display); font-weight: 700;
  font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-3);
}
.colophon-body { max-width: 58ch; }
.colophon-body p { font-size: 0.98rem; line-height: 1.6; color: var(--ink-2); }
.colophon-body p + p { margin-top: 0.9rem; }
.colophon-meta {
  margin-top: 1.35rem;
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem;
  font-family: var(--display); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3);
}
.colophon-meta a { color: var(--gold-ink); border-bottom: 1px solid var(--rule); }
.colophon-meta a:hover { border-bottom-color: var(--gold); }

/* =========================================================================
   Buy
   ========================================================================= */

.buy { background: var(--paper); }
.buy-head { max-width: 42rem; }

.retailers { margin-top: clamp(2.5rem, 4.5vw, 3.5rem); display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 860px) { .retailers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.retailer { background: var(--paper); padding: clamp(1.9rem, 3vw, 2.5rem); display: flex; flex-direction: column; }
.retailer-name { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 1.7rem; line-height: 1; letter-spacing: 0.015em; }
.retailer-note { margin-top: 0.7rem; color: var(--ink-3); font-size: 1rem; }

.editions { margin-top: 1.6rem; display: grid; gap: 0.55rem; }
.edition {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.9rem 1.05rem; border: 1px solid var(--rule);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.edition:hover { border-color: var(--ink); background: var(--paper-2); }
.edition-label { font-size: 1.08rem; }
.edition-meta { display: inline-flex; align-items: baseline; gap: 1rem; white-space: nowrap; }
.edition-price {
  font-family: var(--display); font-weight: 700;
  font-size: 0.95rem; letter-spacing: 0.05em; color: var(--ink);
}
.edition-go {
  font-family: var(--display); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold-ink);
  display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap;
}
.edition-go .arw { width: 13px; height: 13px; }

.isbns {
  margin-top: clamp(2rem, 3.5vw, 2.75rem); padding-top: 1.4rem; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 0.5rem 2.25rem;
  font-family: var(--display); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3);
}
.isbns b { color: var(--ink-2); font-weight: 400; }

/* =========================================================================
   FAQ
   ========================================================================= */

.faq { background: var(--paper-2); border-block: 1px solid var(--rule); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 980px) { .faq-grid { grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr); } }

.faq-list { border-top: 1px solid var(--rule); }
.faq-item { border-bottom: 1px solid var(--rule); }

.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-block: 1.3rem; text-align: left;
  font-size: clamp(1.1rem, 1.02rem + 0.35vw, 1.28rem);
  line-height: 1.3; transition: color 0.2s var(--ease);
}
.faq-q:hover { color: var(--gold); }

.faq-toggle { position: relative; flex: none; width: 17px; height: 17px; }
.faq-toggle::before, .faq-toggle::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--gold);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.faq-toggle::before { width: 15px; height: 2px; transform: translate(-50%, -50%); }
.faq-toggle::after  { width: 2px; height: 15px; transform: translate(-50%, -50%); }
.faq-item[data-open="true"] .faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.36s var(--ease); }
.faq-item[data-open="true"] .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a p { color: var(--ink-2); max-width: 40em; padding-bottom: 1.4rem; }

/* =========================================================================
   Close
   ========================================================================= */

.close { background: var(--dark); color: var(--paper); text-align: center; }
.close-inner { display: grid; justify-items: center; }
.close .h-display { max-width: 16ch; }
.close .lede { margin-top: 1.5rem; color: var(--dark-ink3); margin-inline: auto; }
.close-actions { margin-top: 2.4rem; }

/* =========================================================================
   Footer
   ========================================================================= */

.footer { background: var(--dark); color: var(--dark-ink3); padding-block: 2.5rem; border-top: 1px solid var(--dark-rule); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2.5rem; }
.footer-brand {
  font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.045em;
  font-size: 1.0625rem; color: var(--paper);
}
.footer-brand .mark { color: var(--gold); }
.footer-meta {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.75rem;
  font-family: var(--display); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
}

/* =========================================================================
   Motion
   ========================================================================= */

.js [data-reveal] { opacity: 0; }
.js.reveal-fallback [data-reveal] { opacity: 1 !important; transform: none !important; }
.js.static-view [data-reveal] { opacity: 1 !important; transform: none !important; }
/* QA capture: release the viewport-height hero so the whole page can be shot
   in a single tall window. Never active without ?static=1. */
.js.static-view .hero,
.js.static-view .pan { min-height: 0; }

/* No pin means no pan, so the track must scroll on its own or half the
   framework is clipped away with no way to reach it. */
.no-pan .track {
  width: auto;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.no-pan .step { scroll-snap-align: center; }

/* QA capture: wrap the track so a single tall screenshot shows every step.
   A horizontal scroller cannot be photographed, which made earlier reviews
   judge the framework on four of its nine cards. */
.js.static-view .track { width: auto; overflow: visible; flex-wrap: wrap; }
.js.static-view .pan { display: block; }

@media (prefers-reduced-motion: reduce) {
  .track {
    width: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }
  .step { scroll-snap-align: center; }
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .page { transform: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Author section with no portrait yet: one column, measure held for reading. */


.creds {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-bottom: clamp(2rem, 3.5vw, 2.75rem);
  border-top: 1px solid var(--rule);
}
@media (min-width: 780px) {
  .creds { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); }
}
.cred { padding-block: 1.1rem; border-bottom: 1px solid var(--rule); }
@media (min-width: 780px) { .cred { border-bottom: none; } }
.cred-v {
  display: block;
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.35rem);
  line-height: 0.95; letter-spacing: 0.012em;
}
.cred-l { display: block; margin-top: 0.4rem; color: var(--ink-3); font-size: 0.98rem; line-height: 1.4; }

.author .author-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 clamp(2rem, 4vw, 4rem);
}
@media (min-width: 900px) {
  .author .author-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .author .author-body > div > *:first-child { margin-top: 0; }
}
.author-sig { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; align-items: baseline; }
.author-sig a { color: var(--gold-ink); border-bottom: 1px solid var(--rule); }
.author-sig a:hover { border-bottom-color: var(--gold); }

/* --- craft pass --- */

/* The excerpt is much shorter than the contents beside it, which left a tall
   void. Let it ride along instead. */
@media (min-width: 1000px) {
  .page-stage { position: sticky; top: 104px; }
}

/* At 390 the three prices wrapped 2 + 1, which reads as a mistake. Three even
   columns, label stacked over price. */


/* Required by the Amazon Associates Operating Agreement. It rides in the ISBN
   metadata line rather than as its own block, set in the serif so a sentence
   stays readable next to the letterspaced caps. Sized to still pass AA. */
.isbns-note {
  margin-left: auto;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.875rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-3);
}
@media (max-width: 780px) { .isbns-note { margin-left: 0; } }