/* =========================================================================
   PULPTROPOLIS — Component styles (continued from style.css)
   ========================================================================= */

/* -------- Header / Nav -------- */
.ppt-header {
  background: var(--ppt-chrome, #ffffff);
  border-bottom: 2px solid var(--ppt-ink);
  position: relative;
  z-index: 100;
}
.ppt-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--ppt-pad-x);
  gap: 24px;
}
.ppt-header__logo img {
  height: 64px !important;
  width: auto !important;
  display: block;
}
.ppt-nav {
  display: flex;
  gap: clamp(16px, 2.5vw, 32px);
  font-family: var(--ppt-display);
  font-weight: 800;
  font-size: clamp(20px, 1.8vw, 30px);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  list-style: none;
  margin: 0; padding: 0;
}
.ppt-nav a { color: var(--ppt-ink); }
.ppt-nav a:hover { color: var(--ppt-accent); }
.ppt-nav .current-menu-item > a { color: var(--ppt-accent); }

.ppt-nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--ppt-ink);
  padding: 10px 14px;
  font-family: var(--ppt-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 900px) {
  .ppt-nav-toggle { display: inline-block; }
  .ppt-nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    gap: 0;
    background: var(--ppt-chrome, #ffffff);
    border-bottom: 2px solid var(--ppt-ink);
    padding: 12px var(--ppt-pad-x) 24px;
  }
  .ppt-nav a {
    padding: 14px 0;
    border-bottom: 1px solid var(--ppt-rule);
    display: block;
  }
  .ppt-nav.is-open { display: flex; }
}

/* -------- Hero slider -------- */
.ppt-hero {
  position: relative;
  background: var(--ppt-bg);
  border-bottom: 2px solid var(--ppt-ink);
  overflow: hidden;
}
.ppt-hero__slide {
  position: relative;
  display: none;
  height: clamp(360px, 46vw, 520px);
  color: #fff;
  background: #08090c;
  overflow: hidden;
}
.ppt-hero__slide.is-active { display: block !important; }
.ppt-hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.ppt-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to right,
    rgba(8,10,14,.88) 0%,
    rgba(8,10,14,.72) 35%,
    rgba(8,10,14,.25) 65%,
    rgba(8,10,14,0) 100%);
}
.ppt-hero__slide--right .ppt-hero__scrim {
  background: linear-gradient(to left,
    rgba(8,10,14,.88) 0%,
    rgba(8,10,14,.72) 35%,
    rgba(8,10,14,.25) 65%,
    rgba(8,10,14,0) 100%);
}
.ppt-hero__text {
  position: absolute; inset: 0;
  padding: clamp(28px, 5vw, 56px) clamp(24px, 5vw, 64px);
  display: flex; flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  text-align: left;
}
.ppt-hero__slide--right .ppt-hero__text {
  align-items: flex-end;
  text-align: right;
}
.ppt-hero__meta {
  font-family: var(--ppt-mono);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  margin-bottom: 14px;
}
.ppt-hero__title {
  font-family: var(--ppt-display);
  font-weight: 900;
  font-size: clamp(40px, 6.5vw, 96px);
  line-height: .9;
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 680px;
  text-shadow: 0 4px 20px rgba(0,0,0,.5);
}
.ppt-hero__series {
  font-family: var(--ppt-mono);
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ppt-accent);
  margin-bottom: 18px;
}
.ppt-hero__blurb {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.55;
  color: rgba(255,255,255,.92);
  max-width: 520px;
  margin: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.ppt-hero__cta {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ppt-mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  padding: 12px 18px;
  border: 1px solid rgba(255,255,255,.6);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(2px);
}
/* Free book: a solid button, not a translucent outline. The offer should not
   look like the same optional gesture as "Open the book". */
.ppt-hero__cta--accent {
  background: var(--ppt-accent);
  border-color: var(--ppt-accent);
  color: #fff;
  backdrop-filter: none;
}

/* The free-ebook mark above the title.
   Amber rather than accent red for two reasons: the series line directly under
   the title is already red, and amber is the token the newsletter block's
   kicker uses — so the flag and the signup block read as the same offer. */
.ppt-hero__flag {
  display: inline-block;
  background: var(--ppt-hot);
  color: var(--ppt-ink);
  font-family: var(--ppt-mono);
  /* 1.5× the original 13px / 8-14px padding, at your request. */
  font-size: 20px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 12px 21px;
  margin-bottom: 16px;
  line-height: 1;
  /* Sits over photography, so it needs its own weight rather than relying on
     the scrim behind it. */
  box-shadow: 0 2px 14px rgba(0,0,0,.35);
}
.ppt-hero__chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--ppt-pad-x);
  border-top: 1px solid var(--ppt-rule);
  background: var(--ppt-bg);
  gap: 16px;
  flex-wrap: wrap;
}
.ppt-hero__strip {
  display: flex; gap: 4px; flex-wrap: wrap; flex: 1; min-width: 0;
}
.ppt-hero__tab {
  background: transparent;
  border: 0; cursor: pointer;
  padding: 6px 10px;
  font-family: var(--ppt-display);
  font-weight: 600;
  font-size: 18px;
  text-transform: uppercase;
  color: var(--ppt-ink-mute);
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.ppt-hero__tab.is-active {
  font-weight: 800;
  color: var(--ppt-accent);
  border-bottom-color: var(--ppt-accent);
}
.ppt-hero__nav {
  display: flex; gap: 8px;
}
.ppt-hero__nav button {
  width: 44px; height: 44px;
  border: 1px solid var(--ppt-ink);
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  font-family: var(--ppt-mono);
}
.ppt-hero__nav button.is-primary {
  background: var(--ppt-ink);
  color: var(--ppt-bg);
}
.ppt-hero__nav button:focus-visible {
  outline: 2px solid var(--ppt-accent);
  outline-offset: 2px;
}
.ppt-hero__toggle {
  font-size: 13px !important; /* glyph, not an arrow — needs to sit smaller */
  letter-spacing: 0.05em;
}
.ppt-hero__slide { animation: pptHeroFade .6s ease; }
@keyframes pptHeroFade { from { opacity: 0; } to { opacity: 1; } }

/* -------- Hero on small screens: not a carousel -------- */
/* Measured at 375px: three slides fitted with 40px to spare and the fourth was
   clipped outright, because the overlay treatment is a landscape composition.
   Portrait means a 40px title and a ten-line blurb sitting on top of a
   photograph inside a 360px band — legible to nobody.
   So below 720px it stops being a carousel and becomes a single stacked hero:
   image band, then text on solid ink beneath it. First slide only — that's the
   pinned free book — and the other featured titles are still reachable in the
   genre lanes further down the page. No tabs, no arrows, no swipe, no timers. */
@media (max-width: 720px) {
  /* :first-child rather than .is-active, so whatever the JS has done to the
     classes, mobile always has exactly one visible slide. */
  .ppt-hero__slide { display: none !important; }
  .ppt-hero__slide:first-child {
    display: block !important;
    height: auto;
    animation: none;
  }
  .ppt-hero__chrome { display: none; }

  .ppt-hero__img {
    position: static;
    width: 100%;
    height: 52vw;
    min-height: 190px;
    max-height: 260px;
    opacity: 1 !important;   /* cover-art fallback is dimmed at desktop sizes */
  }
  .ppt-hero__scrim { display: none; }   /* nothing sits over the image now */

  .ppt-hero__text {
    position: static;
    inset: auto;
    background: var(--ppt-ink);
    padding: 22px 20px 28px;
    /* Right-aligned slides must not stay right-aligned in a narrow column. */
    align-items: flex-start !important;
    text-align: left !important;
  }
  .ppt-hero__title {
    font-size: clamp(34px, 11vw, 46px);
    text-shadow: none;       /* no photo behind it any more */
  }
  .ppt-hero__blurb {
    text-shadow: none;
    max-width: none;
    /* The longest blurb ran to ten lines here. Cap it; the product page has
       the rest, and the button is right underneath. */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ppt-hero__cta { margin-top: 18px; }
}

/* The JS already declines to auto-advance under reduced-motion; silence the
   crossfade too, so manual slide changes are instant rather than animated. */
@media (prefers-reduced-motion: reduce) {
  .ppt-hero__slide { animation: none; }
}

/* -------- Catalog / Series spotlight -------- */
.ppt-catalog__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 32px; gap: 16px; flex-wrap: wrap;
}

.ppt-books-bar {
  display: flex;
  align-items: center;
  padding: 18px var(--ppt-pad-x);
  background-color: var(--ppt-bg-elev) !important;
  border-bottom: 1px solid var(--ppt-rule);
}
.ppt-books-bar__title {
  font-family: var(--ppt-display);
  font-weight: 900;
  font-size: clamp(22px, 2.5vw, 36px);
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--ppt-ink) !important;
}

/* Tighten the catalog's top padding — .ppt-wrap's clamp() is too generous
   directly under the hero. Deliberate, not a Divi workaround: the two-class
   selector already outranks .ppt-wrap, so no !important is needed. */
.ppt-main .ppt-catalog { padding-top: 32px; }

/* Small-header catalog bar (used on the /shop/ archive) */
.ppt-catalog__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 24px;
  margin-bottom: 36px;
  border-bottom: 4px double var(--ppt-ink);
}
.ppt-catalog__title {
  font-family: var(--ppt-display);
  font-weight: 900;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.ppt-catalog__sort {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ppt-catalog__sort select {
  font-family: var(--ppt-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 36px 10px 14px;
  border: 1px solid var(--ppt-ink);
  background: var(--ppt-bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M0 0l6 8 6-8z' fill='%230e0c0a'/></svg>") no-repeat right 12px center;
  background-size: 10px 7px;
  color: var(--ppt-ink);
  cursor: pointer;
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.ppt-catalog__sort select:focus {
  outline: 2px solid var(--ppt-accent);
  outline-offset: 2px;
}

/* Pagination */
.ppt-pagination {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--ppt-rule);
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  font-family: var(--ppt-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ppt-pagination .page-numbers {
  padding: 10px 14px;
  border: 1px solid var(--ppt-ink);
  color: var(--ppt-ink);
  text-decoration: none;
}
.ppt-pagination .page-numbers.current {
  background: var(--ppt-ink);
  color: var(--ppt-bg);
}
.ppt-pagination .page-numbers:hover {
  background: var(--ppt-accent);
  color: #0a0a0c;
  border-color: var(--ppt-accent);
}
.ppt-series {
  padding-top: 28px;
  margin-top: 48px;
}
.ppt-series:first-of-type { margin-top: 0; }
.ppt-series__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.ppt-series__title {
  font-family: var(--ppt-display);
  font-weight: 900;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1;
  margin: 8px 0 0;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.ppt-series__tagline {
  font-family: var(--ppt-body);
  font-size: 18px;
  color: var(--ppt-ink-dim);
  max-width: 380px;
  text-align: right;
}
.ppt-series__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 36px;
  margin-top: 32px;
  align-items: flex-start;
}

/* Lane pitch, shown inside the grid when a lane has fewer than three books.
   `auto-fill` leaves empty tracks either way; this puts something worth reading
   in them instead of white space. */
.ppt-series__note {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  align-self: start;
  padding-top: 4px;
  max-width: 46ch;
}
.ppt-series__note-text {
  margin: 0;
  font-family: var(--ppt-display);
  font-weight: 800;
  /* Deliberately below the lane headline's scale so it reads as subordinate. */
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  color: var(--ppt-ink);
}
@media (min-width: 861px) {
  /* Only widen once there are at least two tracks to span — below that,
     auto-fill has collapsed to a single column and a span would push out
     an implicit track and overflow the row. */
  .ppt-series__note { grid-column: span 2; }
}

/* -------- Book cover card -------- */
.ppt-cover {
  width: 100%;
  aspect-ratio: 5 / 8;
  position: relative;
  background: #000;
  box-shadow: 6px 8px 0 0 var(--ppt-ink), 0 14px 30px -12px rgba(0,0,0,.45);
  display: block;
}
.ppt-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.ppt-cover--tilt-l { transform: rotate(-2deg); }
.ppt-cover--tilt-r { transform: rotate(2deg); }
.ppt-book-card { display: block; color: inherit; }
.ppt-book-card__title {
  font-family: var(--ppt-display);
  font-weight: 800;
  font-size: clamp(20px, 2vw, 24px);
  margin-top: 18px;
  text-transform: uppercase;
  line-height: 1.05;
}
.ppt-book-card__meta {
  font-family: var(--ppt-mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ppt-ink-dim);
  margin-top: 6px;
}
/* Pricing sits on its own row because a book can be sold in three places at
   once — print here, Kindle on Amazon, and Kindle Unlimited. Tracking is
   tighter than the meta row above: at 0.18em the three facts wrapped every
   card in the three-up grid, and the wrap fell between "Print" and its figure.
   Darker than the meta row too — this is the line a buyer is looking for. */
.ppt-book-card__pricing {
  font-family: var(--ppt-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ppt-ink);
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
/* Spelled out, not abbreviated: "KU" is insider shorthand, and a reader who
   does not already know it will not decode a two-letter badge.

   Set in the accent rather than boxed in it. At full length a solid red block
   under every cover in a three-up grid became the loudest thing on the page —
   heavier than the title above it — and the phrase is already doing the
   selling. Colour alone is enough emphasis when the surrounding row is ink.

   Deliberately no Amazon or Kindle Unlimited logo: those are trademarks with
   brand-usage rules attached, and a full-colour vendor badge would fight a
   design built entirely from ink, one red, and hard shadows. */
.ppt-ku {
  color: var(--ppt-accent);
  font-weight: 600;
  white-space: nowrap;
}

/* -------- Book detail page -------- */
.ppt-book {
  padding: var(--ppt-pad-y) var(--ppt-pad-x);
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 56px;
  border-bottom: 2px solid var(--ppt-ink);
}
.ppt-book__cover-wrap {
  display: flex; justify-content: center; align-items: flex-start;
}
.ppt-book__cover-wrap .ppt-cover { max-width: 380px; }
.ppt-book__tag {
  display: inline-block;
  padding: 5px 12px;
  background: var(--ppt-accent);
  color: #fff;
  font-family: var(--ppt-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.ppt-book__title {
  font-family: var(--ppt-display);
  font-weight: 900;
  font-size: clamp(48px, 9vw, 112px);
  line-height: .88;
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: -0.015em;
}
.ppt-book__byline {
  font-family: var(--ppt-mono);
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ppt-ink-dim);
  margin-bottom: 22px;
}
.ppt-book__blurb {
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.5;
  margin-top: 20px;
}
.ppt-book__blurb > :first-child { margin-top: 0; }
.ppt-book__blurb > :last-child  { margin-bottom: 0; }
.ppt-book__blurb p { margin: 0 0 0.85em; }

/* The blurb accepts markup, so headings written into it inherit the global
   h2/h3 scale — clamp(36px, 6vw, 72px) — which would out-shout the book title
   directly above. Scope them down to a lead-in size that still reads as a
   heading against the body copy. */
.ppt-book__blurb h2,
.ppt-book__blurb h3,
.ppt-book__blurb h4 {
  font-family: var(--ppt-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.1;
  color: var(--ppt-accent);
  font-size: clamp(19px, 1.9vw, 25px);
  margin: 0 0 10px;
}
.ppt-book__blurb a { text-decoration: underline; }
.ppt-book__blurb ul,
.ppt-book__blurb ol { margin: 0 0 0.85em 1.2em; }
/* KU graphic button */
/* Now layers on .ppt-btn, so type, padding and focus ring come from there and
   this is only the hover treatment. The standalone rules it replaced carried
   line-height:0 and a 40px img height — both existed purely to wrap the old
   Kindle Unlimited PNG tightly, and line-height:0 would have collapsed a text
   label to nothing.

   Typed as `a` to outrank .ppt-btn:hover regardless of stylesheet order. That
   base rule inverts to white-on-ink; without the colour below, this button's
   lighter hover background would leave near-white text on it. */
a.ppt-book__ku-btn:hover {
  background: var(--ppt-bg-elev);
  border-color: var(--ppt-accent);
  color: var(--ppt-accent);
}
.ppt-book__ctas {
  display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap;
}
.ppt-book__specs {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid var(--ppt-rule);
}
.ppt-book__spec-val {
  font-family: var(--ppt-mono);
  font-size: 14px;
  margin-top: 4px;
}

.ppt-excerpt {
  padding: var(--ppt-pad-y) var(--ppt-pad-x);
  background: var(--ppt-bg-elev);
  border-bottom: 2px solid var(--ppt-ink);
}
.ppt-excerpt__inner {
  max-width: 760px; margin: 0 auto;
}
.ppt-excerpt__text {
  font-family: var(--ppt-mono);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.7;
  margin: 20px 0 26px;
  color: var(--ppt-ink);
}

.ppt-pulls {
  padding: var(--ppt-pad-y) var(--ppt-pad-x);
  background: var(--ppt-bg);
  border-bottom: 2px solid var(--ppt-ink);
}
.ppt-pulls__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  margin-top: 28px;
}
/* The accent rule and padding live on the <figure> so the attribution sits
   inside the same visual unit as the quote it belongs to. */
.ppt-pull {
  margin: 0;
  padding: 26px 30px;
  background: var(--ppt-bg);
  border-left: 4px solid var(--ppt-accent);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ppt-pulls blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--ppt-display);
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}
.ppt-pull__source {
  font-family: var(--ppt-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ppt-ink-mute);
  margin-top: auto; /* pin to the bottom so sources align across a row */
}
.ppt-pull__source::before {
  content: "— ";
}

/* The free-ebook line in the newsletter block. Its own line in the hot accent,
   so it reads as the offer rather than trailing off the paragraph above. */
.ppt-newsletter__bonus {
  margin: 14px 0 0;
  font-family: var(--ppt-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.1;
  font-size: clamp(20px, 2.2vw, 30px);
  color: var(--ppt-hot);
}

/* FREE marker on catalogue and lane cards. */
.ppt-book-card--free .ppt-cover { position: relative; }
.ppt-book-card--free .ppt-cover::after {
  content: "Free";
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 6px 10px;
  background: var(--ppt-accent);
  color: #fff;
  font-family: var(--ppt-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
}

@media (max-width: 860px) {
  .ppt-book { grid-template-columns: 1fr; gap: 32px; }
  .ppt-book__specs { grid-template-columns: repeat(2, 1fr); }
}

/* -------- Dispatch (blog) -------- */
/* Was a four-selector escalation (.ppt-dispatch, .ppt-main .ppt-dispatch,
   #main .ppt-dispatch, .et_pb_section.ppt-dispatch) plus !important, purely
   to outrank Divi's section styling. One class is enough now. */
.ppt-dispatch {
  padding: var(--ppt-pad-y) var(--ppt-pad-x);
  background-color: var(--ppt-bg-elev);
  border-bottom: 2px solid var(--ppt-ink);
}
.ppt-dispatch__head {
  border-bottom: 4px double var(--ppt-ink);
  padding-bottom: 18px;
  margin-bottom: 36px;
}
/* Was a style="" attribute on the archive's standfirst. Moved here so it can be
   restyled without editing PHP, now that the copy itself is Customizer-driven. */
.ppt-dispatch__intro {
  margin: 14px 0 0;
  color: var(--ppt-ink-dim);
  max-width: 640px;
  font-size: 19px;
  line-height: 1.55;
}
.ppt-dispatch__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 36px;
}
.ppt-dispatch__card {
  display: block;
  color: inherit;
  padding: 0 24px;
  border-left: 1px solid var(--ppt-rule);
}
.ppt-dispatch__card:first-child { border-left: 0; padding-left: 0; }
.ppt-dispatch__title {
  font-family: var(--ppt-display);
  font-weight: 800;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.05;
  margin: 12px 0 14px;
  text-transform: uppercase;
}
.ppt-dispatch__deck {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ppt-ink-dim);
  /* ppt_teaser() already equalises the word count; this equalises the rendered
     height as well, which word count alone cannot do across breakpoints — a
     28-word teaser wraps to four lines on desktop and seven on a narrow column.
     Clamping keeps every card in a row the same depth at every width. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ppt-dispatch__more {
  font-family: var(--ppt-mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ppt-accent-dp);
  margin-top: 18px;
  display: inline-block;
}

/* Single dispatch article */
.ppt-article {
  padding: var(--ppt-pad-y) var(--ppt-pad-x);
  background: var(--ppt-bg);
  border-bottom: 2px solid var(--ppt-ink);
}
.ppt-article__inner { max-width: 760px; margin: 0 auto; }
.ppt-article__title {
  font-family: var(--ppt-display);
  font-weight: 900;
  font-size: clamp(40px, 6vw, 88px);
  line-height: .9;
  margin: 16px 0 22px;
  text-transform: uppercase;
  letter-spacing: -0.015em;
}
.ppt-article__body p {
  font-size: 19px; line-height: 1.65; margin: 0 0 1.2em;
}
.ppt-article__body h2 { font-size: clamp(28px, 3vw, 42px); margin: 1.6em 0 .6em; }
.ppt-article__body h3 { font-size: clamp(22px, 2vw, 30px); margin: 1.4em 0 .5em; }
.ppt-article__body a { color: var(--ppt-accent-dp); border-bottom: 1px solid currentColor; }
.ppt-article__body ul,
.ppt-article__body ol { margin: 0 0 1.2em 1.4em; font-size: 19px; line-height: 1.65; }
.ppt-article__body li { margin-bottom: .5em; }

/* -------- Legal / policy pages -------- */
/* Wrap policy content in <div class="ppt-legal"> to opt out of the display-type
   headings. Uppercase Big Shoulders at 42px is right for a poster and wrong for
   a document somebody has to read twenty subheads of. */
.ppt-legal h2 {
  font-family: var(--ppt-body);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  font-size: clamp(21px, 1.9vw, 26px);
  line-height: 1.25;
  margin: 2em 0 .5em;
  padding-top: .9em;
  border-top: 1px solid var(--ppt-rule);
}
.ppt-legal h2:first-of-type { margin-top: 1em; }
.ppt-legal h3 {
  font-family: var(--ppt-body);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.3;
  margin: 1.6em 0 .4em;
  color: var(--ppt-ink-dim);
}
/* Slightly tighter than an essay: policy text is scanned, not savoured. */
.ppt-legal p,
.ppt-legal li { font-size: 17px; line-height: 1.6; }
.ppt-legal ul,
.ppt-legal ol { margin: 0 0 1.2em 1.4em; }
.ppt-legal strong { font-weight: 700; }
.ppt-legal__meta {
  font-family: var(--ppt-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ppt-ink-mute);
  margin: 0 0 2em;
}

/* -------- Contact -------- */
/* Social first, email last. There is one email address on the page and it is
   scoped to order problems; everything else routes to a profile or to Kevin.
   The social block is therefore the substance of the page, not a footnote. */
.ppt-contact__lede {
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.5;
  max-width: 48ch;
  margin: 0 0 2.5em;
}
.ppt-contact__heading {
  font-size: clamp(24px, 2.4vw, 34px) !important;
  margin: 0 0 20px !important;
  border-top: 0 !important;
  padding-top: 0 !important;
}
.ppt-contact__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  /* Borders live on the cards, not on this container. Using the container's
     background as gutter-fill looks right only when the cards happen to fill
     every cell — with three cards in a two-column grid the leftover cell showed
     as a grey block. Cards that own their own borders leave no empty cell to
     colour in. */
  gap: 0;
  margin-bottom: 3em;
}
.ppt-contact__card {
  background: var(--ppt-bg);
  border: 1px solid var(--ppt-rule);
  margin: -1px 0 0 -1px;         /* collapse adjacent borders into one hairline */
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
}
.ppt-contact__card-title {
  /* Scoped down: the global heading scale is poster-sized and would swamp a card. */
  font-size: clamp(21px, 2vw, 27px) !important;
  line-height: 1.05;
  margin: 10px 0 12px !important;
  border-top: 0 !important;
  padding-top: 0 !important;
  color: var(--ppt-ink);
}
.ppt-contact__card p { font-size: 16px; line-height: 1.55; margin: 0 0 1em; }
.ppt-contact__card p:last-child { margin-bottom: 0; }

/* Whole-card links for the social profiles. */
.ppt-contact__card--link {
  text-decoration: none;
  color: inherit;
  transition: background .15s ease;
}
.ppt-contact__card--link::after {
  content: "→";             /* arrow, so a card reads as a destination */
  font-family: var(--ppt-mono);
  color: var(--ppt-accent);
  margin-top: auto;
  padding-top: 14px;
  font-size: 18px;
}
.ppt-contact__card--link:hover { background: var(--ppt-bg-elev); }
.ppt-contact__card--link:hover .ppt-contact__card-title { color: var(--ppt-accent); }
.ppt-contact__card--link:focus-visible {
  outline: 2px solid var(--ppt-accent);
  outline-offset: -2px;
}

/* The newsletter card sits in the social grid but goes nowhere — the signup
   block is further down the page — so it must not look clickable. */
.ppt-contact__card--muted { background: var(--ppt-bg-elev); }

/* The dead end. Muted on purpose: information, not an offer. */
.ppt-contact__card--closed {
  background: var(--ppt-bg-elev);
  color: var(--ppt-ink-mute);
}
.ppt-contact__card--closed .ppt-contact__card-title { color: var(--ppt-ink-mute); }

.ppt-contact__action {
  margin-top: auto !important;   /* pin actions to a common baseline */
  padding-top: 10px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.ppt-contact__aside {
  font-family: var(--ppt-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ppt-ink-mute);
  border-bottom: 1px solid currentColor;
}

.ppt-contact__foot {
  padding-top: 32px;
  border-top: 4px double var(--ppt-ink);
}
.ppt-contact__address {
  font-family: var(--ppt-mono);
  font-size: 14px;
  line-height: 1.7;
  margin: 12px 0 8px;
  white-space: pre-line;         /* keeps the address's own line breaks */
}
.ppt-contact__note { font-size: 14px; color: var(--ppt-ink-mute); margin: 0; }

/* -------- Media rights -------- */
.ppt-rights__lede {
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.5;
  max-width: 58ch;
  margin: 0 0 2.5em;
}
.ppt-rights__agent {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 32px;
  align-items: start;
  padding: 30px;
  background: var(--ppt-bg-elev);
  border-left: 4px solid var(--ppt-accent);
  margin: 0 0 1.6em;
}
/* No logo uploaded — collapse the reserved column rather than leaving a gap. */
.ppt-rights__agent--nologo { grid-template-columns: 1fr; }
.ppt-rights__agent-logo img { width: 100%; height: auto; }
.ppt-rights__agent-name {
  font-size: clamp(26px, 2.6vw, 36px) !important;
  margin: 8px 0 6px !important;
  border-top: 0 !important;
  padding-top: 0 !important;
}
.ppt-rights__agent-role { margin: 0 0 12px; font-size: 16px; line-height: 1.5; }
.ppt-rights__agent-links {
  font-family: var(--ppt-mono);
  font-size: 14px;
  line-height: 1.8;
  margin: 0;
}
.ppt-rights__meta {
  display: block;
  font-family: var(--ppt-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ppt-ink-mute);
  margin-top: 6px;
}
@media (max-width: 640px) {
  .ppt-rights__agent { grid-template-columns: 1fr; gap: 20px; }
  .ppt-rights__agent-logo { max-width: 140px; }
}
.ppt-article__body blockquote {
  margin: 1.5em 0;
  padding: 18px 24px;
  border-left: 4px solid var(--ppt-accent);
  font-family: var(--ppt-display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 28px);
  text-transform: uppercase;
  line-height: 1.2;
}

/* -------- Newsletter -------- */
.ppt-newsletter {
  padding: var(--ppt-pad-y) var(--ppt-pad-x);
  background: var(--ppt-ink);
  color: var(--ppt-bg);
  border-bottom: 2px solid var(--ppt-ink);
}
.ppt-newsletter__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}
.ppt-newsletter__grid > * { min-width: 0; }
.ppt-newsletter h2 {
  font-family: var(--ppt-display);
  font-weight: 900;
  font-size: clamp(40px, 7vw, 96px);
  line-height: .9;
  margin: 14px 0 18px;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  color: var(--ppt-bg);
}
.ppt-newsletter h2 .ppt-newsletter__accent { color: var(--ppt-accent); display: block; }
.ppt-newsletter__copy {
  color: rgba(255,255,255,.78);
  font-size: 19px;
  line-height: 1.55;
  max-width: 480px;
}
.ppt-newsletter form {
  display: flex; flex-direction: column; gap: 12px;
  min-width: 0;
}
.ppt-newsletter input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: 1px solid rgba(255,255,255,.3);
  padding: 18px 20px;
  color: var(--ppt-bg);
  font-family: var(--ppt-mono);
  font-size: 15px;
  outline: none;
  border-radius: 0;
}
.ppt-newsletter input[type="email"]:focus { border-color: var(--ppt-hot); }
.ppt-newsletter button[type="submit"] {
  width: 100%;
  box-sizing: border-box;
  background: var(--ppt-accent);
  color: #ffffff !important;
  border: 1px solid var(--ppt-accent);
  padding: 18px 20px;
  font-family: var(--ppt-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
}
.ppt-newsletter button[type="submit"]:hover {
  background: var(--ppt-accent-dp); border-color: var(--ppt-accent-dp); color: #ffffff !important;
}
/* Kit spinner (hidden by default, shown when submit is active) */
.ppt-newsletter .formkit-spinner {
  display: flex;
  width: 0;
  height: 0;
  overflow: hidden;
  transition: all 300ms ease-in-out;
}
.ppt-newsletter .formkit-spinner > div {
  width: 8px; height: 8px;
  background: #fff;
  border-radius: 100%;
  opacity: .6;
  animation: ppt-bounce 1.4s infinite ease-in-out both;
}
.ppt-newsletter .formkit-spinner > div:nth-child(1) { animation-delay: -.32s; }
.ppt-newsletter .formkit-spinner > div:nth-child(2) { animation-delay: -.16s; }
.ppt-newsletter button[data-active] .formkit-spinner { width: 36px; height: 16px; }
.ppt-newsletter button[data-active] span { opacity: 0; }
@keyframes ppt-bounce {
  0%, 80%, 100% { transform: scale(0); }
  40%           { transform: scale(1); }
}
/* Kit success/error alerts */
.ppt-newsletter .formkit-alert { display: none; padding: 12px; font-size: 14px; margin-bottom: 12px; }
.ppt-newsletter .formkit-alert:not(:empty) { display: block; }
.ppt-newsletter .formkit-alert-error { background: #fde8e2; color: #ea4110; border: 1px solid #f2643b; }
.ppt-newsletter .formkit-powered-by-convertkit-container { display: none; }

/* These six declarations were orphaned — the selector and its opening brace
   had been lost, so the block was followed by a stray `}` and browsers
   discarded the lot. The fine print was therefore inheriting 17px body copy in
   full-strength cream rather than the quiet mono caption intended. */
.ppt-newsletter__small {
  font-family: var(--ppt-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-top: 2px;
}
@media (max-width: 980px) {
  .ppt-newsletter__grid { grid-template-columns: 1fr; gap: 28px; }
  .ppt-newsletter h2 { font-size: clamp(36px, 9vw, 64px); }
}

/* -------- Footer -------- */
.ppt-footer {
  padding: 56px var(--ppt-pad-x) 32px;
  background: var(--ppt-chrome, #ffffff);
}
.ppt-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 36px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--ppt-rule);
}
.ppt-footer__about {
  font-size: 15px;
  line-height: 1.55;
  margin-top: 16px;
  max-width: 360px;
  color: var(--ppt-ink-dim);
}
.ppt-footer__col h4 {
  font-family: var(--ppt-mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ppt-ink-dim);
  margin: 0 0 14px;
  font-weight: 500;
}
.ppt-footer__col ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.ppt-footer__col a { font-size: 15px; }
.ppt-footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 22px;
  font-family: var(--ppt-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ppt-ink-mute);
  gap: 16px; flex-wrap: wrap;
}
@media (max-width: 900px) {
  .ppt-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .ppt-footer__grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   PULPTROPOLIS — Series landing pages + Author block
   ========================================================================= */

/* -------- Series hero -------- */
.ppt-series-hero {
  position: relative;
  background: var(--ppt-bg-elev);
  border-bottom: 2px solid var(--ppt-ink);
  overflow: hidden;
}
/* No-image fallback — content flows in padding */
.ppt-series-hero:not(.ppt-series-hero--has-img) {
  padding: var(--ppt-pad-y) var(--ppt-pad-x);
  text-align: center;
}
.ppt-series-hero:not(.ppt-series-hero--has-img) .ppt-series-hero__text {
  max-width: 820px;
  margin: 0 auto;
}
/* With-image — fixed-height section, image + text are absolutely placed */
.ppt-series-hero--has-img {
  background: #08090c;
  color: #fff;
  height: clamp(420px, 50vw, 560px);
  display: block;
}
.ppt-series-hero--has-img .ppt-series-hero__img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover;
}
.ppt-series-hero--has-img .ppt-series-hero__text {
  position: absolute !important;
  inset: 0;
  z-index: 2;
  padding: clamp(28px, 5vw, 56px) clamp(24px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  text-align: left;
  max-width: 720px;
}

/* ─── Hero text alignment (works for both with-image and fallback) ─── */
.ppt-series-hero[data-align="center"] .ppt-series-hero__text {
  align-items: center;
  text-align: center;
  max-width: 820px;
  left: 0; right: 0;
  margin-left: auto; margin-right: auto;
}
.ppt-series-hero[data-align="right"] .ppt-series-hero__text {
  align-items: flex-end;
  text-align: right;
  margin-left: auto;
}
.ppt-series-hero[data-align="center"] .ppt-series-hero__tagline,
.ppt-series-hero[data-align="center"] .ppt-series-hero__desc {
  margin-left: auto; margin-right: auto;
}
.ppt-series-hero[data-align="right"] .ppt-series-hero__tagline,
.ppt-series-hero[data-align="right"] .ppt-series-hero__desc {
  margin-left: auto;
}
.ppt-series-hero__title {
  font-family: var(--ppt-display);
  font-weight: 900;
  font-size: clamp(40px, 6vw, 84px);
  line-height: .9;
  margin: 14px 0 18px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.ppt-series-hero--has-img .ppt-series-hero__title {
  color: #fff;
  text-shadow: 0 4px 20px rgba(0,0,0,.5);
}
.ppt-series-hero__tagline {
  font-family: var(--ppt-display);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.15;
  margin: 0 0 18px;
  text-transform: uppercase;
  color: var(--ppt-accent);
  max-width: 640px;
}
.ppt-series-hero__desc {
  font-size: 18px;
  line-height: 1.55;
  max-width: 580px;
}
.ppt-series-hero--has-img .ppt-series-hero__desc {
  color: rgba(255,255,255,.88);
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}

/* -------- Author block -------- */
.ppt-author {
  padding: var(--ppt-pad-y) var(--ppt-pad-x);
  background: var(--ppt-bg);
  border-bottom: 2px solid var(--ppt-ink);
}
.ppt-author__inner {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  align-items: start;
  max-width: 980px;
  margin: 0 auto;
}
.ppt-author__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--ppt-bg-elev);
  overflow: hidden;
  box-shadow: 6px 8px 0 0 var(--ppt-ink);
}
.ppt-author__photo img {
  width: 100%; height: 100%; object-fit: cover;
}
.ppt-author__name {
  font-family: var(--ppt-display);
  font-weight: 900;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1;
  margin: 8px 0 18px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.ppt-author__bio {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ppt-ink);
}
.ppt-author__bio p { margin: 0 0 1em; }
@media (max-width: 720px) {
  .ppt-author__inner { grid-template-columns: 1fr; gap: 24px; }
  .ppt-author__photo { max-width: 220px; }
}

/* -------- Reading order list -------- */
.ppt-reading-order {
  padding: var(--ppt-pad-y) var(--ppt-pad-x);
  background: var(--ppt-bg);
  border-bottom: 2px solid var(--ppt-ink);
}
.ppt-reading-order__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 32px;
  gap: 16px; flex-wrap: wrap;
  border-bottom: 4px double var(--ppt-ink);
  padding-bottom: 18px;
}
.ppt-reading-order__list {
  display: flex; flex-direction: column;
  gap: 32px;
}
.ppt-reading-order__item {
  display: grid;
  grid-template-columns: 80px 180px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  text-decoration: none;
  color: inherit;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--ppt-rule);
  transition: background .15s;
}
.ppt-reading-order__item:hover {
  background: var(--ppt-bg-elev);
  padding-left: 12px;
  padding-right: 12px;
}
.ppt-reading-order__item:last-child { border-bottom: 0; }
.ppt-reading-order__num {
  font-family: var(--ppt-display);
  font-weight: 900;
  font-size: clamp(56px, 7vw, 84px);
  line-height: 1;
  color: var(--ppt-accent);
  letter-spacing: -0.04em;
}
.ppt-reading-order__cover {
  width: 180px;
  max-width: 180px;
}
.ppt-reading-order__cover .ppt-cover {
  width: 100% !important;
  max-width: 180px !important;
}
.ppt-reading-order__body { padding-top: 8px; min-width: 0; }
.ppt-reading-order__title {
  font-family: var(--ppt-display);
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1;
  margin: 0 0 14px;
  text-transform: uppercase;
}
.ppt-reading-order__synopsis {
  font-size: 17px;
  line-height: 1.55;
  margin: 0 0 14px;
  color: var(--ppt-ink-dim);
  max-width: 560px;
}
.ppt-reading-order__cta {
  font-family: var(--ppt-mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ppt-accent-dp);
}
@media (max-width: 720px) {
  .ppt-reading-order__item {
    grid-template-columns: 48px 120px minmax(0, 1fr);
    gap: 16px;
  }
  .ppt-reading-order__cover { width: 120px; max-width: 120px; }
  .ppt-reading-order__cover .ppt-cover { max-width: 120px !important; }
  .ppt-reading-order__num { font-size: 36px; }
}

/* =========================================================================
   WOOCOMMERCE (signed print editions)
   ========================================================================= */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
  font-family: var(--ppt-mono);
  color: var(--ppt-accent-dp);
}
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--ppt-display) !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--ppt-accent) !important;
  color: #0a0a0c !important;
  font-family: var(--ppt-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  border-radius: 0 !important;
  padding: 14px 20px !important;
}
.woocommerce span.onsale {
  background: var(--ppt-hot) !important;
  color: var(--ppt-ink) !important;
  border-radius: 0 !important;
  font-family: var(--ppt-mono) !important;
}

/* =========================================================================
   6. PRINT
   ========================================================================= */
@media print {
  .ppt-header, .ppt-footer, .ppt-newsletter, .ppt-hero__chrome { display: none; }
  body { background: #fff; color: #000; }
}