@charset "UTF-8";
/* ==========================================================================
   Learjet 464 Juliet — design system
   --------------------------------------------------------------------------
   Built from the cover: a storm-black sky, bone-white and signal-red condensed
   type, and the declassified-dossier furniture taped across the bottom third
   (typed memoranda, polaroids, a red route line running USA → Colombia).
   Everything here is written for that one book; nothing is a generic theme.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Ground — sampled off the cover's sky and asphalt */
  --ink:        #07090a;
  --storm:      #101417;
  --slate:      #171d21;
  --slate-hi:   #1f272c;
  --gunmetal:   #2b343a;
  --gunmetal-2: #3a454c;

  /* Type on dark */
  --bone:       #ebe6da;
  --bone-2:     #b6b1a5;
  --bone-dim:   #7f8a88;

  /* Signal red — the "464 JULIET" red */
  --red:        #c42127;
  --red-hi:     #e2372c;
  --red-deep:   #8c1519;

  /* Jungle + aged paper */
  --olive:      #3d4636;
  --paper:      #ded6c4;
  --paper-2:    #c9bfa6;
  --paper-ink:  #2a2620;
  --teal:       #1d4a55;   /* the jet's cheatline */

  /* Type stacks */
  --display: "Anton", "Oswald", "Arial Narrow", sans-serif;
  --ui:      "Oswald", "Helvetica Neue", Arial, sans-serif;
  --mono:    "Courier Prime", "Courier New", ui-monospace, monospace;
  --body:    "Spectral", Georgia, "Times New Roman", serif;

  /* Rhythm */
  --gap:      clamp(1.25rem, 3vw, 2.5rem);
  --section:  clamp(4.5rem, 11vw, 9.5rem);
  --shell:    82rem;
  --shell-narrow: 46rem;

  /* Motion */
  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* --------------------------------------------------------------------------
   2. Reset + base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

/* Deep links land under the sticky masthead without this. */
[id] { scroll-margin-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--storm);
  color: var(--bone-2);
  font-family: var(--body);
  font-size: clamp(1rem, .96rem + .22vw, 1.125rem);
  line-height: 1.72;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a { color: var(--bone); text-decoration-color: rgba(196,33,39,.55); text-underline-offset: .18em; }
a:hover { color: #fff; text-decoration-color: var(--red-hi); }

::selection { background: var(--red); color: #fff; }

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

hr {
  border: 0;
  border-top: 1px solid var(--gunmetal);
  margin: var(--gap) 0;
}

/* Film grain — the cover is heavily textured, so flat panels read as wrong. */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  margin: 0 0 .5em;
  color: var(--bone);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.005em;
}

.display-xl,
.display-l,
.display-m,
h1, h2 {
  font-family: var(--display);
  text-transform: uppercase;
}

.display-xl { font-size: clamp(3.4rem, 12.5vw, 10.5rem); line-height: .84; letter-spacing: -.015em; }
.display-l  { font-size: clamp(2.4rem, 6.4vw, 5rem);     line-height: .9;  }
.display-m  { font-size: clamp(1.9rem, 4vw, 3rem);       line-height: .96; }

h1 { font-size: clamp(2.6rem, 7.5vw, 6rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.5rem); }
h3 {
  font-family: var(--ui);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.2;
}
h4 {
  font-family: var(--mono);
  font-weight: 700;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--bone-2);
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.6;
  color: var(--bone);
  font-weight: 300;
}

strong, b { color: var(--bone); font-weight: 600; }
em, i { font-style: italic; }

blockquote { margin: 0; }

/* The red-hairline eyebrow that runs under the cover's title. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  margin: 0 0 1.4rem;
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--red-hi);
}
.eyebrow::before {
  content: "";
  width: 2.2rem;
  height: 2px;
  background: var(--red);
  flex: none;
}

/* Cover motif: hairline — star — hairline. */
.rule-star {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2rem 0;
  color: var(--red);
}
.rule-star::before,
.rule-star::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
}
.rule-star span { font-size: .7rem; line-height: 1; }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.shell {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
}
.shell-narrow { width: min(100% - 2.5rem, var(--shell-narrow)); margin-inline: auto; }

.section { padding-block: var(--section); position: relative; }
.section-tight { padding-block: clamp(3rem, 7vw, 5.5rem); }

.bg-storm { background: var(--storm); }
.bg-ink   { background: var(--ink); }
.bg-slate { background: var(--slate); }
.bg-olive { background: linear-gradient(160deg, #232a20, #151a13); }

/* A hairline top edge keeps stacked dark sections from merging. */
.section + .section { border-top: 1px solid rgba(255,255,255,.055); }

.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 60rem) {
  .split { grid-template-columns: 1fr 1fr; }
  .split-40 { grid-template-columns: 4fr 6fr; }
  .split-60 { grid-template-columns: 6fr 4fr; }
}

.stack > * + * { margin-top: var(--gap); }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--red);
  --btn-fg: #fff;
  --btn-bd: var(--red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7em;
  padding: .95em 1.9em;
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--ui);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .2s var(--ease);
}
.btn:hover {
  --btn-bg: var(--red-hi);
  --btn-bd: var(--red-hi);
  color: #fff;
  transform: translateY(-2px);
}
.btn:active { transform: translateY(0); }

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--bone);
  --btn-bd: var(--gunmetal-2);
}
.btn-ghost:hover {
  --btn-bg: transparent;
  --btn-bd: var(--bone);
  color: #fff;
}

.btn-block { width: 100%; }
.btn-sm { padding: .7em 1.35em; font-size: .72rem; }

.btn[disabled], .btn.is-disabled {
  pointer-events: none;
  opacity: .4;
}

/* A quiet text link with the red underline that grows on hover. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-family: var(--ui);
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bone);
  padding-bottom: .35em;
  border-bottom: 1px solid var(--red);
  transition: gap .25s var(--ease), color .25s var(--ease);
}
.link-arrow:hover { gap: 1em; color: #fff; }

/* --------------------------------------------------------------------------
   6. Dossier furniture
   -------------------------------------------------------------------------- */

/* Typed memorandum on aged paper — lifted from the cover's bottom-right. */
.memo {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background:
    linear-gradient(150deg, var(--paper) 0%, var(--paper-2) 100%);
  color: var(--paper-ink);
  font-family: var(--mono);
  font-size: .86rem;
  line-height: 1.75;
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
}
.memo h4, .memo strong { color: var(--paper-ink); }
.memo a { color: var(--red-deep); }
.memo-row {
  display: grid;
  grid-template-columns: minmax(7.5rem, auto) 1fr;
  gap: .3rem 1.2rem;
  border-bottom: 1px dotted rgba(42,38,32,.35);
  padding-block: .5rem;
}
.memo-row:last-of-type { border-bottom: 0; }
.memo-row dt {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .7rem;
  opacity: .68;
  padding-top: .18em;
}
.memo-row dd { margin: 0; font-weight: 700; }

/* Rubber stamp. Deliberately crooked and slightly bled-out. */
.stamp {
  display: inline-block;
  padding: .45em .8em;
  border: 2px solid currentColor;
  border-radius: 2px;
  color: var(--red);
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .82;
  transform: rotate(-6deg);
}
.stamp-flat { transform: none; }

/* Redaction bar — used sparingly, as texture rather than gimmick. */
.redacted {
  background: var(--paper-ink);
  color: transparent;
  user-select: none;
  padding-inline: .2em;
}

/* Taped polaroid, as scattered across the cover's lower band. */
.polaroid {
  position: relative;
  background: #f0ece2;
  padding: .7rem .7rem 3.1rem;
  box-shadow: 0 16px 36px rgba(0,0,0,.55);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.polaroid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.polaroid .cap {
  position: absolute;
  left: .9rem; right: .9rem; bottom: .85rem;
  font-family: var(--mono);
  font-size: .68rem;
  line-height: 1.35;
  color: #4a4438;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.polaroid::before {           /* strip of tape */
  content: "";
  position: absolute;
  top: -.7rem; left: 50%;
  width: 4.5rem; height: 1.4rem;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(226,214,182,.42);
  box-shadow: 0 1px 3px rgba(0,0,0,.28);
}
.polaroid:hover { transform: translateY(-6px) rotate(0deg) !important; z-index: 2; }
.polaroid:nth-child(3n+1) { transform: rotate(-1.6deg); }
.polaroid:nth-child(3n+2) { transform: rotate(1.1deg); }
.polaroid:nth-child(3n+3) { transform: rotate(-.5deg); }

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 200;
  padding: .7em 1.2em;
  background: var(--red);
  color: #fff;
  font-family: var(--ui);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }

.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(7,9,10,.82);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.masthead-inner {
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-height: 4.6rem;
}

.wordmark {
  display: flex;
  flex-direction: column;
  gap: .18rem;
  text-decoration: none;
  line-height: 1;
  margin-right: auto;
}
.wordmark-lead {
  font-family: var(--mono);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .46em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.wordmark-main {
  font-family: var(--display);
  font-size: clamp(1.3rem, 5.2vw, 1.6rem);
  white-space: nowrap;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--bone);
}
.wordmark-main b { color: var(--red); font-weight: inherit; }
.wordmark:hover .wordmark-main { color: #fff; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.9rem); }
.nav a {
  position: relative;
  font-family: var(--ui);
  font-size: .78rem;
  font-weight: 300;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bone-2);
  padding-block: .4rem;
  transition: color .2s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--bone); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

.masthead-actions { display: flex; align-items: center; gap: .9rem; }

.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  min-height: 2.5rem;
  padding: .45em .85em;
  border: 1px solid var(--gunmetal-2);
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bone-2);
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.lang-switch:hover { border-color: var(--red); color: var(--bone); }
.lang-short { display: none; }
@media (max-width: 26rem) {
  .lang-full  { display: none; }
  .lang-short { display: inline; }
  .lang-switch { padding: .45em .6em; letter-spacing: .1em; }
}

.nav-toggle {
  display: none;
  width: 2.75rem; height: 2.75rem;
  padding: 0;
  border: 1px solid var(--gunmetal-2);
  background: transparent;
  color: var(--bone);
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 1.15rem; height: 1.5px;
  margin-inline: auto;
  background: currentColor;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle span { position: relative; }
.nav-toggle span::before,
.nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -.36rem; }
.nav-toggle span::after  { top: .36rem; }
[data-nav-open] .nav-toggle span { background: transparent; }
[data-nav-open] .nav-toggle span::before { transform: translateY(.36rem) rotate(45deg); }
[data-nav-open] .nav-toggle span::after  { transform: translateY(-.36rem) rotate(-45deg); }

@media (max-width: 61.99rem) {
  .nav-toggle { display: block; order: 3; }
  .nav {
    position: fixed;
    inset: 4.6rem 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem 1.25rem 2rem;
    background: var(--ink);
    border-bottom: 1px solid var(--gunmetal);
    transform: translateY(-140%);
    transition: transform .38s var(--ease);
    max-height: calc(100dvh - 4.6rem);
    overflow-y: auto;
  }
  [data-nav-open] .nav { transform: translateY(0); }
  .nav a {
    padding: .95rem 0;
    font-size: 1rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .nav a::after { display: none; }
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3.5rem, 8vw, 6rem);
  overflow: hidden;
  background: var(--ink);
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("../images/hero-storm.webp") center bottom / cover no-repeat;
  opacity: .42;
  transform: scale(1.06);
}
.hero::before {                       /* storm vignette */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(7,9,10,.15), rgba(7,9,10,.9) 70%),
    linear-gradient(180deg, rgba(7,9,10,.55) 0%, rgba(7,9,10,.35) 40%, var(--ink) 96%);
}

.hero-grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
@media (min-width: 64rem) {
  .hero-grid { grid-template-columns: 1.15fr .85fr; }
}

.hero-title { margin: 0; }
.hero-title .line-1 {
  display: block;
  margin-bottom: .06em;
  font-family: var(--display);
  font-size: clamp(2.9rem, 13vw, 7.2rem);
  line-height: .9;
  letter-spacing: .012em;
  color: var(--bone);
  text-transform: uppercase;
}
.hero-title .line-2 {
  display: block;
  font-family: var(--display);
  font-size: clamp(4rem, 19vw, 11rem);
  line-height: .8;
  letter-spacing: -.01em;
  color: var(--red);
  text-transform: uppercase;
  text-shadow: 0 0 60px rgba(196,33,39,.28);
}

.hero-sub {
  margin: 1.9rem 0 0;
  font-family: var(--mono);
  font-size: clamp(.7rem, 1.1vw, .84rem);
  font-weight: 700;
  letter-spacing: .22em;
  line-height: 1.75;
  text-transform: uppercase;
  color: var(--bone-2);
  max-width: 34ch;
}

.hero-lede { margin-top: 1.6rem; max-width: 42ch; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 2.4rem;
}
.hero-formats {
  margin-top: 1.6rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

/* The cover itself, lit from above and standing on its own shadow. */
.cover-plate {
  position: relative;
  margin-inline: auto;
  max-width: 27rem;
  transform: perspective(1400px) rotateY(-9deg) rotateX(2deg);
  transform-style: preserve-3d;
  transition: transform .7s var(--ease);
}
.cover-plate img {
  width: 100%;
  box-shadow:
    0 2px 0 rgba(255,255,255,.09) inset,
    22px 34px 70px rgba(0,0,0,.72),
    0 0 0 1px rgba(255,255,255,.06);
}
.cover-plate::after {                 /* pooled shadow on the ground */
  content: "";
  position: absolute;
  left: 6%; right: -4%; bottom: -2.2rem;
  height: 2.4rem;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.72), transparent 72%);
  filter: blur(9px);
  z-index: -1;
}
.cover-plate:hover { transform: perspective(1400px) rotateY(-4deg) rotateX(1deg) translateY(-6px); }

/* Closing CTA: the book as an object, both faces. Kept to a few degrees —
   these are product shots, not the snapshots in the scatter above. */
.cover-pair {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(.75rem, 2.5vw, 2rem);
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}
.cover-face {
  display: block;
  flex: 0 1 clamp(8rem, 20vw, 15rem);
  transition: transform .5s var(--ease);
}
.cover-face img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow:
    0 2px 0 rgba(255,255,255,.09) inset,
    18px 26px 55px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,255,255,.06);
}
.cover-face-front { transform: rotate(-3deg); }
.cover-face-back  { transform: rotate(2.5deg); }
.cover-face:hover,
.cover-face:focus-visible { transform: rotate(0deg) translateY(-8px) scale(1.03); z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .cover-face-front:hover, .cover-face-front:focus-visible { transform: rotate(-3deg); }
  .cover-face-back:hover,  .cover-face-back:focus-visible  { transform: rotate(2.5deg); }
}

.cover-badge {
  position: absolute;
  top: 1.1rem; right: -1.4rem;
  z-index: 3;
  max-width: calc(100% - 2rem);
  background: var(--ink);
  border-color: var(--red);
}
@media (max-width: 30rem) {
  /* The overhang costs more than it gains once the plate is near-full-width,
     and the longer Spanish word ran off the screen. Tuck it inside. */
  .cover-badge { right: .6rem; top: .6rem; }
}

@media (max-width: 63.99rem) {
  .cover-plate { transform: none; max-width: 20rem; }
  .cover-plate:hover { transform: translateY(-4px); }
}

/* --------------------------------------------------------------------------
   9. Stat / fact row
   -------------------------------------------------------------------------- */
.facts {
  display: grid;
  gap: 1px;
  background: var(--gunmetal);
  border-block: 1px solid var(--gunmetal);
}
@media (min-width: 48rem) {
  .facts { grid-template-columns: repeat(3, 1fr); }
}
.fact {
  background: var(--storm);
  padding: clamp(1.8rem, 4vw, 3rem) clamp(1.4rem, 3vw, 2.4rem);
}
.fact-label {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--red-hi);
}
.fact-value {
  margin: .7rem 0 .5rem;
  font-family: var(--display);
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: .95;
  text-transform: uppercase;
  color: var(--bone);
}
.fact-note { font-size: .95rem; line-height: 1.55; color: var(--bone-dim); margin: 0; }

/* --------------------------------------------------------------------------
   10. Pull quote
   -------------------------------------------------------------------------- */
.pullquote {
  position: relative;
  padding: clamp(2rem, 5vw, 4rem) 0;
  text-align: center;
}
.pullquote q {
  display: block;
  font-family: var(--body);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  line-height: 1.5;
  color: var(--bone);
  quotes: "“" "”";
  max-width: 52ch;
  margin-inline: auto;
}
.pullquote cite {
  display: block;
  margin-top: 1.6rem;
  font-family: var(--mono);
  font-style: normal;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

/* Bob's line runs one sentence, so it gets room to run larger and looser
   than a full testimonial paragraph. */
.pullquote-slide--headline q {
  max-width: 34ch;
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  line-height: 1.32;
}

/* Slides stack in normal flow (divided) with no JS; JS measures the tallest
   slide, locks the track to that height, and crossfades between slides
   centered in it — so switching never jumps the box size. */
.pullquote-slide + .pullquote-slide {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--gunmetal);
}
.pullquote-slider[data-slider-ready] .pullquote-slides {
  position: relative;
  overflow: hidden;
}
.pullquote-slider[data-slider-ready] .pullquote-slide {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease), visibility 0s linear .5s;
}
.pullquote-slider[data-slider-ready] .pullquote-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .5s var(--ease);
}

/* Randall's testimonial gets a slower, more deliberate crossfade than Bob's
   quick headline swap. */
.pullquote-slider[data-slider-ready] .pullquote-slide--review {
  transition: opacity 1.6s var(--ease), visibility 0s linear 1.6s;
}
.pullquote-slider[data-slider-ready] .pullquote-slide--review.is-active {
  transition: opacity 1.6s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .pullquote-slider[data-slider-ready] .pullquote-slide { transition: none; }
}

.pullquote-source {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  margin-top: 1.6rem;
}
.pullquote-source img {
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--gunmetal-2);
}
.pullquote-source cite { margin-top: 0; text-align: left; }

.pullquote-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.3rem;
  margin-top: clamp(2rem, 4vw, 2.8rem);
}
.pullquote-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  background: transparent;
  border: 1px solid var(--gunmetal-2);
  color: var(--bone-dim);
  font-size: .8rem;
  cursor: pointer;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.pullquote-arrow:hover { border-color: var(--red); color: var(--bone); }
.pullquote-dots { display: flex; gap: .55rem; }
.pullquote-dot {
  width: .5rem;
  height: .5rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--gunmetal-2);
  background: transparent;
  cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.pullquote-dot.is-active { background: var(--red); border-color: var(--red); }

/* --------------------------------------------------------------------------
   11. Store
   -------------------------------------------------------------------------- */
.editions {
  display: grid;
  gap: clamp(1.1rem, 2vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
  align-items: stretch;
}

.edition {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 3vw, 2.2rem);
  background: var(--slate);
  border: 1px solid var(--gunmetal);
  transition: border-color .3s var(--ease), transform .3s var(--ease),
              background .3s var(--ease);
}
.edition:hover {
  border-color: var(--gunmetal-2);
  background: var(--slate-hi);
  transform: translateY(-4px);
}
.edition-featured {
  border-color: var(--red-deep);
  background: linear-gradient(170deg, #1d2126, var(--slate));
}
.edition-featured:hover { border-color: var(--red); }

.edition-flag {
  position: absolute;
  top: -.75rem; left: clamp(1.6rem, 3vw, 2.2rem);
  padding: .35em .75em;
  background: var(--red);
  color: #fff;
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* The flagship: signed paperback as a wide banner above the digital grid. */
.edition-hero {
  display: grid;
  gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: center;
  margin-bottom: clamp(1.1rem, 2vw, 1.6rem);
  padding: clamp(1.6rem, 3.5vw, 2.8rem);
  background: linear-gradient(150deg, #1d2126 0%, var(--slate) 60%);
  border: 1px solid var(--red-deep);
  transition: border-color .3s var(--ease);
}
.edition-hero:hover { border-color: var(--red); }

@media (min-width: 52rem) {
  .edition-hero { grid-template-columns: minmax(11rem, 17rem) 1fr; }
}

.edition-hero-art {
  position: relative;
  margin: 0;
  max-width: 17rem;
}
.edition-hero-art img {
  width: 100%;
  box-shadow: 14px 20px 46px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.06);
}
.edition-hero-stamp {
  position: absolute;
  top: .8rem; right: -1rem;
  background: var(--ink);
  border-color: var(--red);
}

.edition-hero-body { display: flex; flex-direction: column; }
.edition-hero-body .edition-meta {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  display: grid;
}
.edition-name-lg { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }

/* The flag sits inside the padded banner rather than straddling a card edge. */
.edition-flag-static {
  position: static;
  align-self: flex-start;
  display: inline-block;
  margin-bottom: 1rem;
}
.edition-flag-quiet { background: var(--gunmetal-2); }

/* Four digital editions, even across on a wide screen. */
.editions { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); }

.edition-icon {
  font-size: 1.5rem;
  color: var(--red-hi);
  margin-bottom: 1.1rem;
}
.edition-format {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone-dim);
  margin-bottom: .55rem;
}
.edition-name {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--bone);
  margin-bottom: .85rem;
}
.edition-blurb { font-size: .96rem; line-height: 1.62; margin-bottom: 1.3rem; }

.edition-meta {
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
  display: grid;
  gap: .45rem;
  font-family: var(--ui);
  font-size: .78rem;
  font-weight: 300;
  letter-spacing: .05em;
  color: var(--bone-2);
}
.edition-meta li {
  display: flex;
  align-items: baseline;
  gap: .6em;
}
.edition-meta li::before {
  content: "";
  flex: none;
  width: .3rem; height: .3rem;
  background: var(--red);
  transform: rotate(45deg);
  translate: 0 -.15em;
}

.edition-foot { margin-top: auto; }
.edition-price {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: 1.1rem;
  font-family: var(--display);
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  line-height: 1;
  color: var(--bone);
}
.edition-price small {
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

.edition-soon {
  padding: .95em 0;
  font-family: var(--ui);
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone-dim);
  border-top: 1px solid var(--gunmetal);
}

/* Multi-vendor buy row (audiobook: direct, Spotify, ElevenReader). */
.edition-vendors { display: flex; flex-direction: column; gap: .6rem; }
.edition-vendor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .65rem .9rem;
  background: var(--slate-hi);
  border: 1px solid var(--gunmetal);
}
.edition-vendor-info { display: flex; flex-direction: column; gap: .2rem; }
.edition-vendor-name {
  font-family: var(--ui);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bone);
}
.edition-vendor-price {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--bone-dim);
}
.edition-vendor form { flex-shrink: 0; }

.edition-vendor-soon {
  flex-shrink: 0;
  font-family: var(--ui);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

/* --------------------------------------------------------------------------
   12. Forms
   -------------------------------------------------------------------------- */
.field { margin-bottom: 1.15rem; }
.field label {
  display: block;
  margin-bottom: .45rem;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone-2);
}
.field .req { color: var(--red-hi); }

input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], select, textarea {
  width: 100%;
  padding: .85em 1em;
  background: var(--ink);
  border: 1px solid var(--gunmetal);
  color: var(--bone);
  font-family: var(--body);
  font-size: 1rem;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
input::placeholder, textarea::placeholder { color: #5f6a70; }
input:focus, select:focus, textarea:focus {
  border-color: var(--red);
  background: #0b0e10;
  outline: none;
}
textarea { min-height: 8rem; resize: vertical; }

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23b6b1a5' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.6rem;
}

.field-row {
  display: grid;
  gap: 0 var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

/* Cognito Forms — seamless embed, chameleon theme.

   Chameleon ships almost no styling of its own so the host page's CSS applies,
   which is why the fields above already inherit correctly. The submit button
   is the one thing it leaves alone entirely, so it falls back to the browser's
   default control — a rounded grey system button in the middle of the page.
   These rules give it the same treatment as .btn.

   The class is doubled to raise specificity. Cognito's runtime stylesheet
   loads after ours and leans on :root-stacked selectors; those target its
   --styled and --protect-css variants rather than chameleon, but the doubled
   class wins regardless without reaching for !important.

   Deliberately not scoped to a container: Cognito writes its modifier classes
   compounded (.cog-cognito--styled.cog-cognito--protect-css), so which element
   carries the base class isn't guaranteed. .cog-button is Cognito's own name
   and appears nowhere else on the site, so it needs no ancestor to be safe.

   Multi-page forms use .cog-button for Previous/Next too, so they pick this up
   as well. */
.cog-button.cog-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7em;
  width: auto;
  padding: .95em 1.9em;
  appearance: none;               /* kills the iOS/Safari default control look */
  border: 1px solid var(--red);
  border-radius: 0;
  background: var(--red);
  color: #fff;
  font-family: var(--ui);
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .2s var(--ease);
}
.cog-button.cog-button:hover {
  background: var(--red-hi);
  border-color: var(--red-hi);
  color: #fff;
  transform: translateY(-2px);
}
.cog-button.cog-button:active { transform: translateY(0); }
.cog-button.cog-button:focus-visible {
  outline: 2px solid var(--red-hi);
  outline-offset: 3px;
}
.cog-button.cog-button[disabled] {
  opacity: .4;
  pointer-events: none;
  transform: none;
}

/* Status banners */
.note {
  padding: 1.2rem 1.4rem;
  border-left: 3px solid var(--gunmetal-2);
  background: var(--slate);
  margin-bottom: var(--gap);
}
.note p:last-child { margin-bottom: 0; }
.note-title {
  display: block;
  margin-bottom: .35rem;
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone);
}
.note-ok    { border-left-color: #4e7a4a; }
.note-warn  { border-left-color: #a8862f; }
.note-error { border-left-color: var(--red); }

/* --------------------------------------------------------------------------
   13. Download list
   -------------------------------------------------------------------------- */
.downloads { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.downloads li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.3rem;
  background: var(--slate);
  border: 1px solid var(--gunmetal);
}
.downloads i { color: var(--red-hi); font-size: 1.1rem; flex: none; }
.downloads .dl-name {
  font-family: var(--ui);
  font-size: .9rem;
  letter-spacing: .05em;
  color: var(--bone);
  margin-right: auto;
}
.downloads .dl-size {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  color: var(--bone-dim);
}

/* --------------------------------------------------------------------------
   14. Reviews
   -------------------------------------------------------------------------- */
.review-grid {
  columns: 1;
  column-gap: var(--gap);
}
@media (min-width: 48rem)  { .review-grid { columns: 2; } }
@media (min-width: 76rem)  { .review-grid { columns: 3; } }

.review {
  break-inside: avoid;
  margin-bottom: var(--gap);
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--slate);
  border: 1px solid var(--gunmetal);
  border-top: 2px solid var(--red-deep);
}
.review p { font-size: .97rem; line-height: 1.68; }
.review cite {
  display: block;
  margin-top: 1.1rem;
  font-family: var(--mono);
  font-style: normal;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.review cite::before { content: "— "; color: var(--red); }

/* --------------------------------------------------------------------------
   15. Photo archive
   -------------------------------------------------------------------------- */
.photo-grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.6rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

/* Home page: a few frames tossed on the desk rather than filed in a grid.
   The tilt sits on the .polaroid and the scroll reveal on its slot — they
   cannot share an element, because [data-reveal].is-in resets transform and
   would flatten the lean. */
.photo-scatter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.scatter-slot {
  /* Wide enough that the pile carries the section rather than sitting in a
     puddle at the centre — five of these fill the shell edge to edge. */
  flex: 0 1 clamp(9rem, 20vw, 16.5rem);
  /* A 20deg lean throws the corners well outside the box. Let neighbours
     overlap instead of reserving space for the widest possible swing. */
  margin-inline: clamp(-1.75rem, -1.4vw, -.5rem);
}
.scatter-slot:nth-child(even) { z-index: 2; }
.scatter-slot:hover,
.scatter-slot:focus-within { z-index: 4; }

.photo-scatter .polaroid {
  display: block;
  transform: rotate(var(--tilt)) translateY(calc(var(--drop) * 1rem));
}
.photo-scatter .polaroid:hover,
.photo-scatter .polaroid:focus-visible {
  /* Straighten and lift out of the pile, as though picked up. */
  transform: rotate(0deg) translateY(-10px) scale(1.05) !important;
  box-shadow: 0 26px 50px rgba(0, 0, 0, .62);
}

@media (max-width: 700px) {
  /* Two-up, and half the lean — steep angles collide once the cards wrap. */
  .scatter-slot { flex-basis: clamp(7.5rem, 38vw, 10rem); margin-inline: -.5rem; }
  .photo-scatter .polaroid {
    transform: rotate(calc(var(--tilt) * .5)) translateY(calc(var(--drop) * .5rem));
  }
}

@media (prefers-reduced-motion: reduce) {
  .photo-scatter .polaroid:hover,
  .photo-scatter .polaroid:focus-visible { transform: rotate(var(--tilt)) !important; }
}

/* --------------------------------------------------------------------------
   16. Video
   -------------------------------------------------------------------------- */
.video-plate {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  background: var(--ink) url("../images/hero-storm.webp") center / cover no-repeat;
  border: 1px solid var(--gunmetal);
  text-decoration: none;
  overflow: hidden;
}
.video-plate::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(7,9,10,.62);
  transition: background .3s var(--ease);
}
.video-plate:hover::before { background: rgba(7,9,10,.45); }
.video-play {
  position: relative;
  display: grid;
  place-items: center;
  width: 5rem; height: 5rem;
  border: 2px solid var(--bone);
  border-radius: 50%;
  color: var(--bone);
  font-size: 1.3rem;
  transition: transform .3s var(--ease), background .3s var(--ease),
              border-color .3s var(--ease), color .3s var(--ease);
}
.video-plate:hover .video-play {
  transform: scale(1.08);
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.video-note {
  margin-top: .9rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

/* --------------------------------------------------------------------------
   17. Route line — USA → Colombia, as drawn on the cover
   -------------------------------------------------------------------------- */
.route {
  display: block;
  width: 100%;
  max-width: 22rem;
  margin-inline: auto;
  overflow: visible;
}
.route-path {
  fill: none;
  stroke: var(--red);
  stroke-width: 1.6;
  stroke-dasharray: 5 4;
  stroke-linecap: round;
}
.route-node { fill: var(--red); }
.route-label {
  fill: var(--bone-2);
  font-family: var(--mono);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
@media (prefers-reduced-motion: no-preference) {
  .route-path {
    stroke-dashoffset: 200;
    animation: route-draw 2.6s var(--ease) forwards;
  }
}
@keyframes route-draw { to { stroke-dashoffset: 0; } }

/* --------------------------------------------------------------------------
   18. Page head (interior pages)
   -------------------------------------------------------------------------- */
.page-head {
  position: relative;
  isolation: isolate;
  padding-block: clamp(4rem, 10vw, 8rem) clamp(2.5rem, 6vw, 4.5rem);
  background: var(--ink);
  overflow: hidden;
  border-bottom: 1px solid var(--gunmetal);
}
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../images/hero-storm.webp") center bottom / cover no-repeat;
  opacity: .3;
}
.page-head::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(7,9,10,.5), var(--ink));
}
.page-head h1 { max-width: 18ch; }
.page-head .lede { max-width: 52ch; margin-top: 1.2rem; }

/* Long-form reading column for the story / author pages. */
.prose { max-width: 68ch; }
.prose p { margin-bottom: 1.35em; }
.prose h2 { margin-top: 2.2em; }
.prose h3 { margin-top: 2em; margin-bottom: .8em; color: var(--bone); }
.prose ul { padding-left: 0; list-style: none; margin: 0 0 1.6em; }
.prose ul li {
  position: relative;
  padding-left: 1.7em;
  margin-bottom: .7em;
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: .38rem; height: .38rem;
  background: var(--red);
  transform: rotate(45deg);
}
.prose a { color: var(--bone); }

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */
.page-footer {
  position: relative;
  background: var(--ink);
  border-top: 1px solid var(--gunmetal);
  padding-block: clamp(3.5rem, 8vw, 5.5rem) 2rem;
}
.footer-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.footer-grid h4 { margin-bottom: 1.1rem; color: var(--red-hi); }
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer-list a {
  display: inline-flex;
  align-items: center;
  font-family: var(--ui);
  font-size: .84rem;
  font-weight: 300;
  letter-spacing: .07em;
  text-decoration: none;
  color: var(--bone-2);
}
.footer-list a:hover { color: var(--bone); }

/* Footer contact is a labelled block now — publicist, email, phone — so it
   uses the memo's dt/dd rhythm rather than the plain link list. */
.footer-contact-intro {
  margin: 0 0 1.1rem;
  max-width: 28ch;
  font-family: var(--ui);
  font-size: .84rem;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--bone-dim);
}
.footer-contact { margin: 0; display: grid; gap: .75rem; }
.footer-contact-row { display: grid; gap: .15rem; }
.footer-contact dt {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone-dim);
  opacity: .75;
}
.footer-contact dd {
  margin: 0;
  font-family: var(--ui);
  font-size: .84rem;
  font-weight: 300;
  letter-spacing: .07em;
  color: var(--bone-2);
}
.footer-contact dd a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.footer-contact dd a:hover { color: var(--bone); }

.footer-brand .wordmark-main { font-size: 2rem; }
.footer-tagline {
  margin-top: 1rem;
  max-width: 30ch;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--bone-dim);
}

.footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem var(--gap);
  align-items: center;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--gunmetal);
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.footer-base p { margin: 0; }
.footer-base .spacer { margin-left: auto; }

/* --------------------------------------------------------------------------
   20. Utilities + motion
   -------------------------------------------------------------------------- */
.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.mx-auto { margin-inline: auto; }
.measure { max-width: 58ch; }
.measure-narrow { max-width: 44ch; }
.mt-0 { margin-top: 0; }
.muted { color: var(--bone-dim); }
.nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Scroll-in reveal. Elements start hidden ONLY when JS is running, so a
   no-JS visitor sees the whole page. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   22. Small screens
   The layout reflows on its own; these are the places where reflowing alone
   left something awkward at phone width.
   -------------------------------------------------------------------------- */
@media (max-width: 40rem) {

  /* Two ragged, differently-sized buttons stacked left looked accidental.
     Full width makes them read as a deliberate pair — and as bigger targets. */
  .hero-actions { display: grid; grid-template-columns: 1fr; gap: .7rem; }
  .hero-actions .btn { width: 100%; }

  /* The case-file rows were squeezing a long label against a long value in
     two narrow columns. Stack them instead. */
  .memo-row {
    grid-template-columns: 1fr;
    gap: .15rem;
    padding-block: .65rem;
  }
  .memo-row dd { font-size: .95em; }

  /* The route drawing is decoration; at full width its 120:96 box ate most of
     a screen. Cap it and keep it centred. */
  .route { max-width: 15rem; }

  /* One polaroid per row turned the archive into a very long scroll. Two-up
     reads like a contact sheet and halves the distance. */
  .photo-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.1rem;
  }
  .polaroid { padding: .45rem .45rem 2.9rem; }
  .polaroid .cap {
    left: .6rem; right: .6rem; bottom: .6rem;
    font-size: .58rem;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
  .polaroid::before { width: 3rem; height: 1rem; top: -.5rem; }

  /* Centre the cover in the flagship card once it stacks. */
  .edition-hero-art { max-width: 15rem; margin-inline: auto; }
  .edition-hero-stamp { right: -.5rem; }

  /* Quantity and inscription side by side left both too narrow to use. */
  .edition-hero-body .field-row { grid-template-columns: 1fr; }

  /* Long single words (URLs, emails) shouldn't force a sideways scroll. */
  .memo dd, .downloads .dl-name, .footer-list a { overflow-wrap: anywhere; }

  /* The pull quote was running to a very narrow measure at this width. */
  .pullquote q { max-width: none; }

  /* Comfortable finger targets. The footer links and the inline "read more"
     links were 14–28px tall, which is fine with a mouse and not with a thumb.
     Padding does the work so nothing has to move. */
  .footer-list { gap: .1rem; }
  .footer-list a { min-height: 2.75rem; }

  .link-arrow {
    min-height: 2.75rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
  }

  /* Phone and email are the two most likely taps on a phone — in the footer,
     and in the contact block of every memo card. */
  .footer-base a,
  .memo-row dd a,
  .footer-contact dd a,
  .footer-list a[href^="tel:"],
  .footer-list a[href^="mailto:"] {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }
}

/* Very narrow phones: buy back a little horizontal room. */
@media (max-width: 23.5rem) {
  .shell, .shell-narrow { width: min(100% - 1.6rem, var(--shell)); }
  .masthead-inner { gap: .6rem; }
  .photo-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   21. Print
   -------------------------------------------------------------------------- */
@media print {
  body { background: #fff; color: #000; }
  .masthead, .page-footer, .hero-bg, .btn, .nav-toggle { display: none !important; }
  .hero, .page-head, .section { padding-block: 1rem; background: #fff; }
  h1, h2, h3, .hero-title .line-1 { color: #000; }
  .hero-title .line-2 { color: #000; }
}