/* ==========================================================================
   Speaking page — /speaking/. Conversion-oriented editorial layout.
   Biggest commercial page on the site — CTA clarity everywhere, three
   separate booking prompts (hero, mid-page, final block).

   SPACING SYSTEM (July 2026, desktop-rescue values): three tokens, no
   ad-hoc values, no margins layered on top of section padding.
     --space-section  total gap across a major section boundary — each
                      section pads HALF of it per side, so adjacent
                      sections meet at exactly one token (≤128px desktop)
     --space-block    gaps between blocks within a section
     --space-element  heading→body, body→quote, text→button

   LAYOUT: every section after the hero sits in a 1200px centered
   container (the hero keeps the site's full 1320px .wrap). Dividers:
   exactly two double rules on the page — under the hero (the hero's own
   border) and before About Trevor (.sp-about). No other rules.
   ========================================================================== */

:root {
  --space-section: 80px;
  --space-block:   48px;
  --space-element: 24px;
}
@media (min-width: 1024px) {
  :root {
    --space-section: 120px;
    --space-block:   64px;
    --space-element: 32px;
  }
}

/* 1200px content container for everything below the hero. These blocks
   already sit inside .wrap (1320px + gutters), so this only narrows and
   re-centers them — gutter padding stays .wrap's job. */
.sp-section,
.sp-quote-hero,
.sp-book {
  max-width: 1200px;
  margin-inline: auto;
}

/* ========= HERO — editorial paper, text L / headshot R ========= */
.sp-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: stretch;
  padding: 48px 0 56px;
  /* No top rule — the masthead's border directly above bounds the hero;
     a second line there read as a stray double. */
  border-bottom: 3px double var(--ink);
  margin: 0;
}
@media (min-width: 900px) {
  .sp-hero { grid-template-columns: 1.15fr 1fr; gap: 64px; padding: 64px 0 72px; align-items: center; }
}

.sp-hero .copy { display: flex; flex-direction: column; justify-content: center; }
.sp-hero .kicker {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 20px;
  display: flex; align-items: center; gap: 12px;
}
.sp-hero .kicker::before {
  content: ""; display: inline-block;
  width: 24px; height: 2px; background: var(--accent);
}
.sp-hero h1 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(2.5rem, 5vw + 1rem, 5.5rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0 0 24px;
  max-width: 16ch;
  text-wrap: balance;
  color: var(--ink);
}
.sp-hero h1 em {
  font-style: normal;
  font-weight: 800;
  color: inherit;
}
.sp-hero .dek {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1875rem, 0.6vw + 1rem, 1.625rem);
  line-height: 1.4;
  color: var(--ink-soft);
  max-width: 560px;
  margin: 0 0 32px;
}
.sp-hero .dek b { font-style: normal; font-weight: 700; color: var(--ink); }
.sp-hero .actions {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.sp-hero .cta {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  padding: 16px 24px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  transition: background 0.15s, color 0.15s;
}
.sp-hero .cta:hover { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.sp-hero .secondary {
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute);
}
.sp-hero .secondary a {
  color: var(--ink);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 1px;
}
.sp-hero .secondary a:hover { opacity: 0.7; }

/* Headshot — mono portrait with a subtle yellow offset frame. */
.sp-hero .portrait {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 520px;
  margin-left: auto;      /* right-align on desktop */
}
.sp-hero .portrait img {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  border: 1px solid var(--ink);
  z-index: 1;
}
.sp-hero .portrait .caption {
  position: absolute;
  bottom: -14px; left: 0;
  background: var(--paper);
  padding: 8px 12px 0 0;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute);
  z-index: 2;
}
.sp-hero .portrait .caption b { color: var(--ink); font-weight: 600; letter-spacing: 0.14em; }

/* Placeholder when no headshot file exists yet — a paper-2 square with
   an italic "T" mark. Gracefully swapped out the moment the jpg lands. */
.sp-hero .portrait.is-placeholder {
  background: var(--paper-2);
  border: 1px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.sp-hero .portrait.is-placeholder .mark {
  font-family: var(--sans);
  font-weight: 800; font-style: normal;
  font-size: clamp(6rem, 10vw, 12rem);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.03em;
}
@media (max-width: 899px) {
  .sp-hero .portrait { margin: 0 auto; }
}

/* ========= SHARED SECTION SHELL =========
   Half the section token per side; adjacent sections meet at exactly
   --space-section. No divider rules here — see .sp-about. */
.sp-section {
  padding-block: calc(var(--space-section) / 2);
}

/* Divider #2 of 2: the double rule before About Trevor. */
.sp-about { border-top: 3px double var(--ink); }
.sp-section-h {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(2rem, 3vw + 1rem, 3.5rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0 0 var(--space-element);
  max-width: 20ch;
  text-wrap: balance;
}
.sp-section-h em { font-style: normal; font-weight: 800; color: inherit; }

/* ========= BODY PROSE BLOCK (sections 3, 4) =========
   Two-paragraph editorial prose under a section heading. Constrained
   width, generous line-height, soft ink color so the heading stays the
   focal point. */
.sp-prose {
  max-width: 64ch;
  margin: 0;
}
.sp-prose p {
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 0.4vw + 0.95rem, 1.25rem);
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 18px;
  text-wrap: pretty;
}
.sp-prose p:last-child { margin-bottom: 0; }

/* ========= STAGE MEDIA (dormant) =========
   Not rendered anywhere right now — the July 2026 rebuild deleted the
   section that housed it. Kept because a video reel is planned to take
   this slot later; the 16:9 frame + placeholder treatment will be its
   starting point. */
.sp-stage-photo {
  margin: 40px 0 0;
  aspect-ratio: 16 / 9;
  background: var(--paper-2);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--rule);
}
.sp-stage-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.sp-stage-photo.is-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image:
    linear-gradient(45deg, var(--rule) 25%, transparent 25%),
    linear-gradient(-45deg, var(--rule) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--rule) 75%),
    linear-gradient(-45deg, transparent 75%, var(--rule) 75%);
  background-size: 24px 24px;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
  background-color: var(--paper-2);
}
.sp-stage-photo.is-placeholder .ph-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: var(--paper);
  padding: 10px 18px;
  border: 1px solid var(--rule);
}

/* ========= WHAT MAKES IT DIFFERENT (section 3) =========
   Four numbered blocks: oversized mono-red numeral on the left, content
   on the right (display h3 · serif paragraph · paired quote card(s)).
   Quote cards sit on paper-2 with the red left rule — same voice as the
   old testimonial treatment, now embedded where each quote proves the
   claim above it. */
/* Section intro: heading left, reel video right; the numbered blocks
   start below. Facade is borderless-shadowless here — the compartment
   border matches the hero portrait instead. */
.sp-diff-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
  margin-bottom: var(--space-block);
}
@media (min-width: 900px) {
  .sp-diff-intro { grid-template-columns: 1fr 1.2fr; column-gap: 64px; }
}
.sp-diff-intro .sp-section-h { margin: 0 0 18px; }
.sp-diff-intro .intro-dek {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.0625rem, 0.5vw + 0.95rem, 1.3125rem);
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0;
  max-width: 42ch;
  text-wrap: pretty;
}
.sp-diff-intro .yt-facade { margin: 0; }

.sp-diff {
  display: grid;
  gap: var(--space-block);   /* identical space between all four blocks, no rules */
}
/* Mobile: numeral, text, quotes stack. Desktop (≥900): numeral column on
   the left, text with the quote card(s) directly UNDER it — a two-quote
   block lays its pair side by side. (The quotes-in-a-right-rail variant
   left a crater of white space; don't go back.) */
.sp-diff-block {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "num" "text" "quotes";
  gap: var(--space-element);
}
@media (min-width: 900px) {
  .sp-diff-block {
    grid-template-columns: 120px 1fr;
    grid-template-areas:
      "num text"
      ".   quotes";
    column-gap: 48px;
    align-items: start;
  }
}
.sp-diff-block .num    { grid-area: num; }
.sp-diff-block .text   { grid-area: text; }
.sp-diff-block .quotes { grid-area: quotes; }
.sp-diff-block .num {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 800;
  font-size: clamp(3rem, 4vw + 1rem, 5rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.sp-diff-block h3 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(1.5rem, 1.4vw + 1rem, 2.125rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 var(--space-element);
}
.sp-diff-block .text p {
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 0.4vw + 0.95rem, 1.25rem);
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  max-width: 620px;
  text-wrap: pretty;
}
.sp-diff-block .quotes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-content: start;
}
@media (min-width: 900px) {
  .sp-diff-block .quotes--pair { grid-template-columns: repeat(2, 1fr); }
  .sp-diff-block .quotes--trio { grid-template-columns: repeat(3, 1fr); }
}
.sp-diff-block .quotes blockquote {
  margin: 0;
  padding: 24px 28px;
  background: var(--paper-2);
  border-left: 3px solid var(--ink);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.125rem, 0.4vw + 1rem, 1.3125rem);
  line-height: 1.55;
  color: var(--ink);
  max-width: 68ch;   /* keep single full-width cards at a readable measure */
}
.sp-diff-block .quotes blockquote cite {
  display: block;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-mute);
  font-style: normal;
}

/* ========= BANNER QUOTE (section 4) =========
   Full-width standalone centerpiece between sections. Participates in
   the section-boundary system like any other section: half the token on
   each side of the seam. */
.sp-quote-hero {
  /* No own margins: neighbor section padding (60) + this block's internal
     padding (36) = 96px seams, inside the 128px cap. */
  margin: 0 auto;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 800;
  font-size: clamp(1.75rem, 2.4vw + 1rem, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  padding: 36px 0;
  text-wrap: balance;
}
/* Key phrase gets the Learner Lab highlighter, not a color change. */
.sp-quote-hero b,
.sp-quote-hero strong {
  font-style: normal; font-weight: 800; color: var(--ink);
  background: var(--accent);
  padding: 0 8px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.sp-quote-hero cite {
  display: block;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute);
  font-style: normal;
}

/* ========= THE TOPICS (section 5) =========
   Intro prose (shared .sp-prose), then a 2-col grid of topic cards —
   display h3 over serif body, thin top rules — then a closing serif line
   with the second "Book a session" prompt of the page. */
/* Topic wall: the four flagship workshops as filled ink chips, the
   wider catalog outlined around them. Built for the buyer scan — they
   arrive with a theme and look for the match. The intro line above
   frames it all as ingredients for a custom build, not a menu. */
.sp-topic-wall {
  list-style: none;
  padding: 0;
  margin: var(--space-block) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.sp-topic-wall li {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(0.9375rem, 0.3vw + 0.85rem, 1.0625rem);
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 12px 18px;
}
.sp-topic-wall li.core {
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
}

.sp-topics-closer {
  margin-top: var(--space-block);
  display: flex;
  flex-direction: column;          /* mobile: text first, button below, left-aligned */
  align-items: flex-start;
  gap: 24px;
}
@media (min-width: 700px) {
  .sp-topics-closer {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;   /* button sits next to the text, not at the far edge */
    gap: 48px;
  }
}
.sp-topics-closer p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.125rem, 0.5vw + 1rem, 1.375rem);
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
  max-width: 46ch;
}
.sp-topics-closer .cta {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  padding: 16px 24px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.sp-topics-closer .cta:hover { background: var(--accent); color: var(--ink); border-color: var(--accent); }

/* ========= MEET TREVOR ========= */
.sp-bio {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 900px) {
  .sp-bio { grid-template-columns: 260px 1fr; gap: 56px; align-items: start; padding-top: 8px; }
}

/* Layered-circle treatment: yellow back circle offset down-right, head-
   and-shoulders portrait clipped to its own circle on top. The head breaks
   past the back circle's top edge — the whole point of the gesture. */
.sp-bio .avatar {
  position: relative;
  width: 220px;
  height: 220px;
  flex-shrink: 0;
}
.sp-bio .avatar.has-photo { background: transparent; border: none; }
.sp-bio .avatar.has-photo::before {
  content: "";
  position: absolute;
  top: 22px; left: 22px;
  width: 100%; height: 100%;
  background: var(--accent);
  border-radius: 50%;
  z-index: 0;
}
.sp-bio .avatar.has-photo img {
  position: relative;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 25%;      /* nudge crop so head sits higher in the circle */
  border-radius: 50%;
  border: 1px solid var(--ink);
  z-index: 2;
  display: block;
}

/* Placeholder fallback — square tile with a bold T. */
.sp-bio .avatar:not(.has-photo) {
  background: var(--paper-2);
  border: 1px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans);
  font-weight: 800; font-style: normal;
  font-size: 96px; letter-spacing: -0.03em;
  color: var(--ink);
  overflow: hidden;
}
.sp-bio .role {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 12px;
}
.sp-bio h3 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(2rem, 2vw + 1rem, 2.75rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0 0 20px;
}
.sp-bio h3 em { font-style: normal; font-weight: 800; color: inherit; }
.sp-bio p {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 16px;
  max-width: 680px;
}

/* "Compact" bio variant — used in section 7 of the new Speaking page.
   The hero already shows the big portrait at the top, so this second
   appearance shrinks the avatar to ~140px and drops the inline role +
   italic-h3 (the section heading "About Trevor." handles that role). */
.sp-bio.sp-bio--compact {
  gap: 32px;
  align-items: start;
}
@media (min-width: 900px) {
  .sp-bio.sp-bio--compact {
    grid-template-columns: 140px 1fr;
    gap: 40px;
    padding-top: 8px;
  }
}
.sp-bio.sp-bio--compact .avatar {
  width: 140px;
  height: 140px;
}
.sp-bio.sp-bio--compact .avatar.has-photo::before {
  top: 14px; left: 14px;       /* tighten the layered-circle offset for the smaller size */
}
.sp-bio.sp-bio--compact .avatar:not(.has-photo) {
  font-size: 64px;
}
.sp-bio.sp-bio--compact .sp-bio-body p {
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 0.4vw + 0.95rem, 1.25rem);
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 18px;
  max-width: 64ch;
}
.sp-bio.sp-bio--compact .sp-bio-body p:last-child { margin-bottom: 0; }
.sp-bio.sp-bio--compact .sp-bio-body em { font-style: italic; }

/* ========= FINAL BOOKING BLOCK =========
   Spacing tokens only — copy and structure are locked. */
.sp-book {
  /* No top margin: About's padding (60) + internal padding (56) seams at
     116px, inside the 128px cap. Bottom margin only separates the block
     from the site footer (chrome, not a section boundary). */
  margin: 0 auto calc(var(--space-section) / 2);
  padding: 56px 40px;
  background: var(--ink);
  color: var(--paper);
  position: relative;
  border: 1px solid var(--ink);
  text-align: center;
}
.sp-book::before {
  content: "";
  position: absolute;
  top: -12px; left: -12px;
  right: 12px; bottom: 12px;
  background: var(--accent);
  z-index: -1;
}
.sp-book .kicker {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.sp-book h2 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(2.5rem, 4.5vw + 1rem, 5rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0 auto 18px;
  max-width: 18ch;
}
.sp-book h2 em { font-style: normal; font-weight: 800; color: var(--accent); }
.sp-book p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.125rem, 0.5vw + 1rem, 1.375rem);
  line-height: 1.4;
  color: rgba(242,236,222,0.88);
  margin: 0 auto 32px;
  max-width: 560px;
}
.sp-book .actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.sp-book .cta {
  display: inline-block;
  background: var(--accent);
  color: var(--ink);
  text-decoration: none;
  padding: 16px 26px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--accent);
}
.sp-book .cta:hover { background: var(--paper); border-color: var(--paper); }
.sp-book .cta.ghost {
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--paper);
}
.sp-book .cta.ghost:hover { background: var(--paper); color: var(--ink); }

/* ========= CONTACT FORM (section 8) =========
   Lives inside the dark .sp-book closer — same visual weight the old
   inquiry CTA had, now doing real work. Inputs are transparent with
   paper borders; the yellow CTA is the submit button. */
.sp-book--form h2 { max-width: 22ch; }

.sp-contact-form {
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
}
.sp-contact-form .row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 20px;
}
@media (min-width: 700px) {
  .sp-contact-form .row { grid-template-columns: repeat(2, 1fr); }
}
.sp-contact-form label {
  display: block;
  margin-bottom: 20px;
}
.sp-contact-form label span {
  display: block;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.sp-contact-form input[type="text"],
.sp-contact-form input[type="email"],
.sp-contact-form textarea {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(242,236,222,0.4);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.4;
  padding: 13px 14px;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.sp-contact-form textarea { resize: vertical; min-height: 140px; }
.sp-contact-form input:focus,
.sp-contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.sp-contact-form .cta {
  border: 1px solid var(--accent);
  cursor: pointer;
  width: 100%;
}
@media (min-width: 700px) {
  .sp-contact-form .cta { width: auto; min-width: 220px; }
}

/* Honeypot — visually removed, still in the DOM for bots to trip on. */
.sp-book .hp-field {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Status notices above the form after a submit round-trip. */
.sp-book .form-note {
  max-width: 640px;
  margin: 0 auto 28px;
  padding: 14px 18px;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  text-align: left;
  border-left: 3px solid var(--accent);
  background: rgba(242,236,222,0.08);
}
.sp-book .form-note--err { border-left-color: var(--accent-ink); }
.sp-book .form-note a { color: var(--accent); }

/* "Or just email …" line under the form. Flex so items never break
   internally — a phone number split across lines reads as a typo. */
.sp-book .sp-book-alt {
  margin: 28px auto 0;
  font-family: var(--mono);
  font-style: normal;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(242,236,222,0.7);
  max-width: none;
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: baseline;
  column-gap: 12px; row-gap: 12px;
}
.sp-book .sp-book-alt a {
  color: var(--paper);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 1px;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .sp-book .sp-book-alt { flex-direction: column; align-items: center; }
  .sp-book .sp-book-alt .alt-sep { display: none; }
}
.sp-book .sp-book-alt a:hover { color: var(--accent); }