/* ============================================================
   The Specialist Publishing Company — page styles
   Layered on top of the design system (styles.css). Every value
   here comes from a design token; nothing is hardcoded.
   ============================================================ */

/* ---------------- page scaffolding ---------------- */

html { scroll-behavior: smooth; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
img { max-width: 100%; }

.skip-link {
  position: absolute; left: var(--space-4); top: -4rem; z-index: 100;
  background: var(--surface-card); color: var(--text-strong);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-label); letter-spacing: var(--tracking-wide);
  transition: top var(--dur-base) var(--ease-soft);
}
.skip-link:focus { top: var(--space-4); }

.wrap        { max-width: var(--content);      margin: 0 auto; padding-inline: var(--page-gutter); }
.wrap--wide  { max-width: var(--content-wide); margin: 0 auto; padding-inline: var(--page-gutter); }
.wrap--read  { max-width: var(--content-narrow); margin: 0 auto; padding-inline: var(--page-gutter); }

/* padding-block, not shorthand: most pages carry both .wrap and .section, and
   a `padding: X 0` shorthand here would silently wipe the gutter above. */
.section       { padding-block: var(--space-10); }
.section--tight{ padding-block: var(--space-8); }

/* long-form reading column */
.prose p,
.prose li { max-width: var(--measure); }
.prose p  { font: var(--type-body); color: var(--text-body); }
.prose > p:first-of-type { font: var(--type-lead); color: var(--text-body); }

.lede { font: var(--type-lead); color: var(--text-body); max-width: var(--measure); }

/* ---------------- header / navigation ---------------- */

.site-head { position: sticky; top: 0; z-index: 40; }
.site-head .sps-nav { background: var(--surface-card); }

/* Tabs carry the design's exact border: a 2px outset box on three sides with
   a 2px rule beneath, oxblood on the current section. (Measured off the kit,
   where the tabs are <button> and these are the browser's own button borders.) */
.site-head .sps-nav__link {
  /* ButtonBorder is the system colour the kit's <button> tabs paint with; the
     token is the fallback for browsers that don't support the keyword. */
  border: 2px outset var(--ink-400);
  border-color: ButtonBorder;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-sm);
}
/* Unselected tabs and the hero buttons all take the brand's white, matching
   the tab borders. The current section stays oxblood. */
.site-head .sps-nav__link { color: var(--text-strong); }
.site-head .sps-nav__link--active { border-bottom-color: var(--accent); color: var(--accent); }
/* the DS caps this at 11ch, which breaks it over four lines; the reference
   shows two — AUTHOR OF “THE / SPECIALIST” */
/* no brand-tag override: the design system's own 26ch gives the two-line break */
/* Five sections fit the bar at the design system's own padding and type size,
   so nothing here overrides them — this was only needed when the two books
   sat in the nav as well. */

.nav-toggle {
  display: none; align-items: center; gap: var(--space-2);
  background: var(--surface-raised); color: var(--text-strong);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 0.55rem 0.9rem; cursor: pointer;
  font-family: var(--font-label); font-size: 0.9rem;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block; width: 18px; height: 1px; background: currentColor; content: "";
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { position: absolute; top: -5px; }
.nav-toggle__bars::after  { position: absolute; top: 5px; }


/* ---------------- buttons ---------------- */

/* The two hero buttons take the brand's white, matching the nav tabs above
   them. Every other button keeps the design system's own colours. */
.hero__actions .sps-btn--primary,
.hero__actions .sps-btn--secondary { color: var(--text-strong); }

/* The order page's Buy-on-Amazon buttons take the same white as the home page's
   "Order the Book". They're links, so :visited and :hover are pinned too —
   otherwise the site's visited-link gold overrides the button colour once
   someone has been to Amazon. */
.order-books .sps-btn--primary,
.order-books .sps-btn--primary:visited,
.order-books .sps-btn--primary:hover { color: var(--text-strong); }

/* ---------------- ornament + headings ---------------- */

/* .wrap sets `margin: 0 auto`, which wipes the design system's own
   `margin: var(--space-7) 0` on .sps-rule — restore the vertical rhythm and
   give the closing rule room to breathe away from the hero above it. */
.sps-rule.wrap { margin-block: var(--space-9); }

/* The rule's mark is the outhouse drawing, not a glyph — the DS's letter
   spacing for a typographic mark would offset the image. */
.sps-rule__mark { letter-spacing: 0; line-height: 0; }
.sps-rule__mark img { display: block; width: 22px; height: 22px; }

/* the family scene that closes the home page */
.scene {
  display: block; width: min(440px, 80%); height: auto;
  margin: var(--space-8) auto 0; opacity: 0.85;
}


.eyebrow {
  font-family: var(--font-label); font-size: var(--text-sm);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--accent); display: block; margin-bottom: var(--space-3);
}
.page-title { font: var(--type-title); color: var(--text-strong); margin: 0 0 var(--space-5); }
.page-head  { margin-bottom: var(--space-8); }
.page-head--center { text-align: center; }
.page-head--center .lede,
.page-head--center p { margin-left: auto; margin-right: auto; }

.section-title { font: var(--type-section); color: var(--text-strong); margin: 0 0 var(--space-5); }

/* ---------------- home: hero ---------------- */

.hero {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-10); align-items: center;
  /* extra air up top: the bar is sticky, so the design's --space-10 leaves the
     eyebrow sitting tight against it */
  padding: var(--space-12) 0 var(--space-9);
}
.hero__covers { display: flex; justify-content: center; }

/* the reference sets a larger eyebrow above the hero title */
.eyebrow--hero { font-size: 25px; letter-spacing: var(--tracking-label); }
.eyebrow--gold { color: var(--gold-500); }

/* the family promise, inline in the hero — a sunken box with an oxblood edge */
.callout {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-sunken);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
}
.callout p { margin: 0; font: var(--type-body); color: var(--text-body); max-width: 48ch; }

/* hero photo slideshow */
.slideshow { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.slideshow__slide { width: 326px; max-width: 100%; }
/* .sps-photo sets display:inline-block, which outranks the UA [hidden] rule */
.slideshow__slide[hidden] { display: none; }
.slideshow__slide .sps-photo__img { height: 392px; }
.slideshow__slide.is-current { animation: spsFade var(--dur-slow) var(--ease-soft); }
.slideshow__dots { display: flex; gap: var(--space-2); }
.slideshow__dot {
  width: 9px; height: 9px; border-radius: var(--radius-pill); padding: 0; cursor: pointer;
  background: transparent; border: 1px solid var(--border-strong);
  transition: background var(--dur-fast) var(--ease-soft);
}
.slideshow__dot.is-current { background: var(--accent); }

/* the family pull-quote that closes the home page */
.family {
  background: var(--surface-deep); color: var(--text-on-deep);
  border-top: 1px solid var(--border-deep);
  padding: var(--space-9) 0;
  text-align: center;
}
.family__quote {
  font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: var(--text-2xl); line-height: 1.3; color: var(--text-on-deep);
  max-width: 26ch; margin: var(--space-4) auto var(--space-6);
  border: 0; padding: 0;
}
.family__by {
  font: var(--type-caption); font-size: calc(var(--text-sm) + 2px);
  color: var(--text-on-deep-muted); margin: var(--space-3) auto 0; max-width: none;
}
.hero__covers img {
  width: min(100%, 26rem); height: auto; display: block;
  border-radius: var(--radius-xs);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45)) drop-shadow(0 22px 46px rgba(0,0,0,0.55));
}
.hero__title {
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  /* the design sets these explicitly rather than using --text-4xl/-tight */
  font-size: 64px; line-height: 1.02;
  color: var(--text-strong); margin: 0 0 var(--space-5);
}
.hero__title em { color: var(--accent-hover); font-style: normal; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); }

/* the three facts, in brass */
.facts {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5); margin-top: var(--space-8);
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  padding: var(--space-6) 0;
}
.facts__n {
  display: block; font-family: var(--font-display);
  font-size: var(--text-2xl); font-weight: var(--weight-semibold);
  color: var(--gold-500); line-height: 1;
}
.facts__k {
  display: block; font-family: var(--font-label); font-size: var(--text-sm);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-muted); margin-top: var(--space-2);
}

/* ---------------- the family promise band ---------------- */

.promise {
  background: var(--surface-deep);
  border-top: 1px solid var(--border-deep);
  border-bottom: 1px solid var(--border-deep);
  padding: var(--space-10) 0;
  text-align: center;
}
.promise .eyebrow { margin-bottom: var(--space-4); }
.promise h2 { font: var(--type-section); color: var(--text-on-deep); margin: 0 0 var(--space-4); }
.promise p {
  font: var(--type-lead); color: var(--text-on-deep-muted);
  max-width: 52ch; margin: 0 auto var(--space-6);
}

/* ---------------- two-book chooser ---------------- */

.book-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.book-tile { display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start; }
.book-tile__cover img {
  width: 15rem; max-width: 100%; height: auto; display: block;
  border: 1px solid var(--night-300); border-radius: 2px 4px 4px 2px;
  box-shadow: var(--shadow-print);
}
.book-tile__head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.book-tile__head h2 { margin: 0; }
.book-tile__head a { text-decoration: none; color: var(--text-strong); }
.book-tile__head a:hover { color: var(--accent-hover); }
.book-tile__meta { display: block; margin-top: var(--space-1); }
.book-tile h3 { font-family: var(--font-display); font-size: var(--text-xl); margin: 0; }
.book-tile__meta {
  font-family: var(--font-label); font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--text-muted);
}
.book-tile p { margin: 0; }

/* ---------------- alternating photo / text blocks ---------------- */

.spread {
  display: grid; grid-template-columns: minmax(0, 20rem) 1fr;
  gap: var(--space-9); align-items: start;
  margin: var(--space-9) 0;
}
.spread--flip { grid-template-columns: 1fr minmax(0, 20rem); }
.spread--flip .spread__media { order: 2; }
.spread__body h3, .spread__body .spread__title { margin-top: 0; }
/* section headings inside a spread are h2 for document order, but keep the
   quieter h3 look — the page title is the only display-size heading. */
.spread__title, .prose h3 {
  font: var(--type-heading); color: var(--text-strong); margin: 0 0 0.5em;
}
.spread__body p:last-child { margin-bottom: 0; }
.spread__media { display: flex; justify-content: center; }
.spread--wide { grid-template-columns: minmax(0, 26rem) 1fr; }

/* photo frame link wrapper keeps the mat, adds a lift on hover */
a.sps-photo { text-decoration: none; display: inline-block; }
a.sps-photo .sps-photo__mat {
  transition: transform var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft);
}
a.sps-photo:hover .sps-photo__mat { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

/* ---------------- book pages ---------------- */

.book-head {
  display: grid; grid-template-columns: minmax(0, 16rem) 1fr;
  gap: var(--space-9); align-items: center;
  margin-bottom: var(--space-9);
}
.book-head__media { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); }
.book-head__cover {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--night-300); border-radius: 2px 4px 4px 2px;
  box-shadow: var(--shadow-print);
}
.book-head__media .sps-photo { width: 240px; max-width: 100%; }

.book-head__title {
  display: flex; align-items: baseline; gap: var(--space-3);
  flex-wrap: wrap; margin-bottom: var(--space-3);
}
.book-head__title .page-title { margin: 0; }
.book-head__year { font: var(--type-caption); color: var(--text-muted); }

.book-head__buy { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-6); flex-wrap: wrap; }
.book-head__price {
  font-family: var(--font-display); font-size: var(--text-2xl); color: var(--text-strong);
  font-variant-numeric: lining-nums;
}
.book-head__ship { font: var(--type-caption); color: var(--text-muted); margin-top: var(--space-3); }

/* ---------------- excerpts ---------------- */

.excerpt { margin: var(--space-8) auto; max-width: var(--measure); }
.excerpt__title {
  font-family: var(--font-display); font-size: var(--text-xl);
  font-style: italic; color: var(--gold-300);
  margin: 0 0 var(--space-5); text-align: center;
}
.excerpt p {
  font: var(--type-body); color: var(--text-body);
  margin: 0 0 var(--space-5);
}
.excerpt p:first-of-type::first-letter {
  font-family: var(--font-display); font-size: 3.4em; line-height: 0.82;
  float: left; padding: 0.05em 0.08em 0 0; color: var(--oxblood-400);
}

/* ---------------- order page ---------------- */

.order-grid {
  display: grid; grid-template-columns: 1.4fr minmax(0, 22rem);
  gap: var(--space-9); align-items: start;
}

.order-line {
  display: flex; align-items: center; gap: var(--space-5);
  padding: var(--space-5); margin-bottom: var(--space-4);
  background: var(--surface-card);
  border: var(--border-rule) solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft);
}
.order-line--chosen {
  background: var(--surface-raised); border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.order-line__cover img {
  width: 5.5rem; height: auto; display: block;
  border: 1px solid var(--night-300); border-radius: 2px 3px 3px 2px;
  box-shadow: var(--shadow-sm);
}
.order-line__body { flex: 1; min-width: 0; }
.order-line__title {
  font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: var(--weight-semibold); color: var(--text-strong);
  display: block; margin-bottom: var(--space-1);
}
.order-line__note { font: var(--type-caption); color: var(--text-muted); }
.order-line__price {
  font-family: var(--font-display); font-size: var(--text-lg);
  color: var(--gold-300); display: block; margin-top: var(--space-2);
}

.stepper { display: inline-flex; align-items: center; gap: var(--space-3); }
.stepper__btn {
  width: 2.75rem; height: 2.75rem; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--surface-raised); border: 1px solid var(--border-strong);
  font-family: var(--font-display); font-size: 1.4rem; line-height: 1;
  color: var(--text-strong);
  transition: background var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
}
.stepper__btn:hover { background: var(--surface-card); border-color: var(--text-faint); }
.stepper__input {
  width: 3.5rem; height: 2.75rem; text-align: center;
  /* Cormorant's oldstyle figures make a lone "1" read as "I" — this audience
     skews older, so the quantity field uses the body face's lining figures. */
  font-family: var(--font-serif); font-variant-numeric: lining-nums tabular-nums;
  font-size: var(--text-lg);
  color: var(--text-strong); background: var(--surface-raised);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-inset);
  -moz-appearance: textfield;
}
.stepper__input::-webkit-outer-spin-button,
.stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.summary { position: sticky; top: calc(var(--nav-height) + var(--space-4)); }
.summary__label {
  font-family: var(--font-label); font-size: 0.78rem;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--border);
}
.summary__row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-4); padding: var(--space-2) 0;
}
.summary__row span:first-child { font: var(--type-body); color: var(--text-body); }
.summary__row span:last-child  { font-family: var(--font-serif); font-weight: var(--weight-medium); color: var(--text-strong); }
.summary__row--muted span { color: var(--text-muted); }
.summary__row--total {
  border-top: 1px solid var(--border); margin-top: var(--space-3); padding-top: var(--space-4);
}
.summary__row--total span:first-child { font: var(--type-heading); color: var(--text-strong); }
.summary__row--total span:last-child {
  font-family: var(--font-display); font-size: var(--text-xl);
  font-weight: var(--weight-semibold); color: var(--text-strong);
}
.summary__note { font: var(--type-caption); color: var(--text-muted); text-align: center; margin: var(--space-4) 0 0; }
.summary__empty { font: var(--type-caption); color: var(--text-muted); }

.btn-block { width: 100%; margin-top: var(--space-5); }


/* ---------------- history ---------------- */

.history-grid {
  display: grid; grid-template-columns: 1fr 320px;
  gap: var(--space-9); align-items: start; margin-top: var(--space-6);
}
.history-aside { position: sticky; top: calc(var(--nav-height) + var(--space-5)); }
/* the page title shares the subhead's oxblood */
.history-title { color: var(--accent); }
.history-subhead {
  font-family: var(--font-serif); font-size: var(--text-xl);
  color: var(--accent); margin: 0 0 0.5em;
}

/* ---------------- gallery ---------------- */

/* the design sets the gallery's intro muted and narrower than a normal lead */
.gallery-lede { color: var(--text-muted); max-width: 52ch; text-align: center; }


.gallery {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--space-7); justify-items: center;
}
.gallery a { display: block; text-decoration: none; }
.gallery__mat {
  display: block; background: var(--surface-paper); padding: var(--border-frame);
  border: 1px solid var(--night-300); border-radius: var(--radius-xs);
  box-shadow: var(--shadow-print);
  transition: transform var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft);
}
.gallery a:hover .gallery__mat,
.gallery a:focus-visible .gallery__mat { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.gallery img {
  /* the design shows the whole print at its natural proportions — no crop */
  display: block; width: 100%; height: auto;
  filter: sepia(0.30) contrast(1.02) brightness(1.01);
}
.gallery__cap { display: block; margin-top: var(--space-3); text-align: center; }
.gallery li { width: 100%; }

/* lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 90;
  display: none; align-items: center; justify-content: center;
  background: rgba(13, 9, 5, 0.86);
  backdrop-filter: blur(3px);
  padding: var(--space-6);
}
.lightbox[open], .lightbox.is-open { display: flex; }
.lightbox__figure { margin: 0; max-width: min(92vw, 60rem); animation: spsFade var(--dur-slow) var(--ease-soft); }
.lightbox__mat {
  display: block; background: var(--surface-paper); padding: var(--border-frame);
  border: 1px solid var(--night-300); border-radius: var(--radius-xs);
  box-shadow: var(--shadow-lg);
}
.lightbox__img {
  display: block; max-width: 100%; max-height: 76vh; width: auto; height: auto;
  filter: sepia(0.30) contrast(1.02) brightness(1.01);
}
.lightbox__cap {
  font-family: var(--font-serif); font-style: italic; font-size: var(--text-sm);
  color: var(--text-on-deep-muted); text-align: center; margin-top: var(--space-4);
}
.lightbox__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 3.25rem; height: 3.25rem; border-radius: var(--radius-pill);
  background: var(--surface-card); color: var(--text-strong);
  border: 1px solid var(--border-strong); cursor: pointer;
  font-family: var(--font-display); font-size: 1.6rem; line-height: 1;
}
.lightbox__btn:hover { background: var(--surface-raised); }
.lightbox__btn--prev { left: var(--space-5); }
.lightbox__btn--next { right: var(--space-5); }
.lightbox__close {
  position: absolute; top: var(--space-5); right: var(--space-5);
  width: 3rem; height: 3rem; border-radius: var(--radius-pill);
  background: var(--surface-card); color: var(--text-strong);
  border: 1px solid var(--border-strong); cursor: pointer; font-size: 1.4rem; line-height: 1;
}
.lightbox__count {
  position: absolute; bottom: var(--space-6); left: 50%; transform: translateX(-50%);
  font-family: var(--font-label); letter-spacing: var(--tracking-label);
  font-size: var(--text-sm); color: var(--text-on-deep-muted);
}

@keyframes spsFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------------- contact ---------------- */

.contact-plate {
  background: var(--surface-deep); border: 1px solid var(--border-deep);
  border-radius: var(--radius-md); padding: var(--space-9);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-9);
}
.contact-plate h3 { margin-top: 0; }
.contact-block { font: var(--type-body); color: var(--text-on-deep); }
.contact-block .k {
  display: block; font-family: var(--font-label); font-size: var(--text-sm);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-muted); margin-bottom: var(--space-2);
}
.contact-block + .contact-block { margin-top: var(--space-6); }
.contact-block a { font-size: var(--text-md); }

/* ---------------- footer ---------------- */

.site-foot {
  background: var(--surface-deep); color: var(--text-on-deep);
  border-top: 1px solid var(--border-deep);
  margin-top: var(--space-10);
}
/* The home page ends on the family plate, which is the same espresso as the
   footer — the footer's top margin would show the lighter page ground through
   as a band between them. Other pages end on the page ground and keep it. */
main:has(> .family:last-child) + .site-foot { margin-top: 0; }
.site-foot {
  padding: var(--space-10) 0 var(--space-8);
}
.site-foot__inner { max-width: var(--content-wide); margin: 0 auto; padding: 0 var(--page-gutter); }
.site-foot__brand img { display: block; height: 52px; width: auto; margin-bottom: var(--space-4); }
.site-foot__line { font: var(--type-body); color: var(--text-on-deep-muted); max-width: 34ch; margin: 0; }
.site-foot__text { font: var(--type-caption); color: var(--text-on-deep); line-height: 1.6; margin: 0 0 var(--space-4); }
.site-foot__role { color: var(--text-on-deep-muted); }

/* the fine-print bar the reference closes with */
.site-foot__bar {
  max-width: var(--content-wide); margin: var(--space-7) auto 0;
  padding: var(--space-4) var(--page-gutter) 0;
  border-top: 1px solid var(--border-deep);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3);
}
.site-foot__bar span { font-family: var(--font-serif); font-size: 0.82rem; color: var(--text-on-deep-muted); }
.site-foot__inner {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--space-8);
}
.site-foot__label {
  font-family: var(--font-label); font-size: var(--text-sm);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--gold-500); margin: 0 0 var(--space-4);
}
/* Footer links take the same white as the publisher name, rather than the
   site's gold link colour. :visited is covered too, or they'd revert to gold. */
.site-foot a,
.site-foot a:visited { color: var(--text-on-deep); }
.site-foot a:hover { color: var(--accent-hover); }

/* The Sections column reads as a list, not as prose links — no rule at rest,
   but one on hover so it still announces itself as clickable. */
.site-foot__list a { text-decoration: none; }
.site-foot__list a:hover { text-decoration: underline; }

.site-foot__list { list-style: none; margin: 0; padding: 0; }
.site-foot__list li { margin-bottom: var(--space-2); color: var(--text-on-deep-muted); font-size: var(--text-base); }

/* ---------------- responsive ---------------- */

/* the bar sheds the tag first, then folds into a menu */
@media (max-width: 1240px) {
  .site-head .sps-nav__brand-tag { display: none; }
}

@media (max-width: 1040px) {
  .hero { grid-template-columns: 1fr; gap: var(--space-8); }
  .hero__covers, .slideshow { order: -1; }
  .order-grid { grid-template-columns: 1fr; }
  .summary { position: static; }
}

/* the top bar runs out of room before the page layout does */
@media (max-width: 1100px) {
  .nav-toggle { display: inline-flex; }
  .sps-nav { flex-wrap: wrap; }
  .sps-nav__links {
    display: none; width: 100%; flex-direction: column; align-items: stretch;
    gap: 0; margin-top: var(--space-4);
    border-top: 1px solid var(--border-strong); padding-top: var(--space-3);
  }
  .sps-nav__links.is-open { display: flex; }
  .site-head .sps-nav__link {
    padding: var(--space-4) var(--space-2); font-size: var(--text-base);
    border-bottom: 1px solid var(--border); border-radius: 0;
  }
  .sps-nav__link--active { border-bottom-color: var(--accent); }
}

@media (max-width: 860px) {
  .spread, .spread--flip, .spread--wide { grid-template-columns: 1fr; gap: var(--space-6); }
  .spread--flip .spread__media { order: 0; }
  .spread__media { justify-content: flex-start; }
  .history-grid { grid-template-columns: 1fr; }
  .history-aside { position: static; }
  .book-head { grid-template-columns: 1fr; }
  .book-head__media { max-width: 16rem; }
  .book-grid { grid-template-columns: 1fr; gap: var(--space-9); }
  .contact-plate { grid-template-columns: 1fr; gap: var(--space-7); padding: var(--space-7); }
  .site-foot__inner { grid-template-columns: 1fr 1fr; }
  .hero__title { font-size: var(--text-3xl); }
  .section { padding-block: var(--space-8); }
}

@media (max-width: 620px) {
  /* on a phone the stacked covers push the headline off the screen */
  .hero { padding-top: var(--space-6); gap: var(--space-6); }
  .hero__covers img { width: min(100%, 17rem); }
  .slideshow__slide { width: min(100%, 17rem); }
  .slideshow__slide .sps-photo__img { height: auto; aspect-ratio: 320 / 392; }

  /* the display sizes are set for a page, not a phone */
  .hero__title   { font-size: var(--text-2xl); }
  .page-title    { font-size: var(--text-2xl); }
  .section-title { font-size: var(--text-xl); }
  .promise h2    { font-size: var(--text-xl); }
  .lede          { font-size: var(--text-base); }

  /* the line has no room for cover, title and stepper side by side */
  .order-line { flex-wrap: wrap; gap: var(--space-4); }
  .order-line__body { flex: 1 1 55%; }
  .order-line .stepper { flex: 1 0 100%; justify-content: flex-end; }

  .facts { grid-template-columns: 1fr; gap: var(--space-5); text-align: left; }
  .site-foot__inner { grid-template-columns: 1fr; }
  .order-line { flex-wrap: wrap; }
  .order-line__cover img { width: 4.5rem; }
  .gallery { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: var(--space-4); }
  .lightbox__btn--prev { left: var(--space-2); }
  .lightbox__btn--next { right: var(--space-2); }
  .excerpt p:first-of-type::first-letter { font-size: 2.8em; }
}

/* ---------------- reduced motion ---------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  a.sps-photo:hover .sps-photo__mat,
  .gallery a:hover .gallery__mat { transform: none; }
}

/* ---------------- small utilities ---------------- */

.center { text-align: center; }
.center p, .center .lede { margin-left: auto; margin-right: auto; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.stack-0 { margin-bottom: 0; }

.summary__clear { margin-top: var(--space-4); }