/* ============================================================
   DESIGN TOKENS & VARIABLES
   ============================================================ */
:root {
  --ink-deep: #1a2744;
  --ink-medium: #2c4a7c;
  --ink-light: #4a7ab5;
  --ink-pale: #7ba3d4;
  --parchment: #faf6f0;
  --parchment-warm: #f5efe5;
  --parchment-deep: #ede5d8;
  --cream: #fff9f0;
  --blush: #f0ddd5;
  --sage: #c8d5c0;
  --lavender: #d5cfe5;
  --dusty-rose: #d4a5a5;
  --gold: #c9a96e;
  --gold-light: #e8d5a8;
  --gold-pale: #e8d9b8;
  /* --gold itself is too pale to read as text on parchment (about 2:1);
     this is the same hue darkened to clear 4.5:1 on parchment and white. */
  --gold-deep: #8a6a2f;

  /* Link colours. Every clickable piece of text that has no rule of its own
     takes these rather than the browser's default blue and visited purple. */
  --link: var(--ink-deep);
  --link-hover: var(--gold-deep);
  --link-underline: rgba(201, 169, 110, 0.6);
  --link-on-dark: var(--gold-light);
  --link-on-dark-hover: #ffffff;
  --focus-ring: var(--gold-deep);
  --focus-ring-on-dark: var(--gold);

  /* Tokens used by the Testimonials & Footer sections */
  --warm-white: #fdfcfa;
  --card-bg: #ffffff;
  --navy: #2c3e5a;
  --navy-light: #3d5a80;
  --text-body: #4a4540;

  --text-primary: #1a2744;
  --text-secondary: #4a5568;
  --text-muted: #718096;
  --bg-primary: #faf6f0;
  --bg-card: rgba(255, 255, 255, 0.72);
  --border-light: rgba(26, 39, 68, 0.08);
  --shadow-soft: 0 4px 24px rgba(26, 39, 68, 0.06);
  --shadow-elevated: 0 12px 48px rgba(26, 39, 68, 0.1);

  --font-serif: 'Georgia', 'Cormorant Garamond', 'Times New Roman', serif;
  --font-display: 'Cormorant Garamond', 'Georgia', serif;

  /* ----------------------------------------------------------
     SPACING CONTRACT

     Section rhythm scales with the viewport instead of being reset
     at each breakpoint. It used to be patched per query (70px, then
     50px from a `max-width: 2024px` block that also undid the mobile
     gutter, then 25px under 390px), so the gap between sections
     changed in steps and phones kept a 48px side gutter.
       --section-y   top/bottom padding of every .section   32 → 56px
       --section-x   side gutter of every .section          16 → 48px
       --section-head-gap  space under a .section-header     24 → 44px
     ---------------------------------------------------------- */
  --section-y: clamp(32px, 4.2vw, 56px);
  --section-x: clamp(16px, 4vw, 48px);
  --section-head-gap: clamp(24px, 3.2vw, 44px);

  /* Vertical gap between the stacked blocks of the single-post page
     (back link, feature image, body, footer, prev/next, related). Every
     boundary there uses this one value so the rhythm stays uniform. */
  --article-gap: clamp(28px, 3.6vw, 48px);

  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-elegant: cubic-bezier(0.4, 0, 0.2, 1);

  /* ----------------------------------------------------------
     BUTTON SIZE CONTRACT

     One size for every text button, at every viewport. These are
     deliberately NOT redefined inside any media query: a button
     that changes size at a breakpoint is the thing this contract
     exists to prevent. Mobile comfort comes from --btn-min-h
     (a 46px touch target), not from shrinking the box.

     Width has a floor too. Left to `inline-flex` alone a button
     sizes to its label, so "Books" came out visibly narrower than
     "Explore the Books" right beside it — same height, different
     box. --btn-min-w gives every text button a common width to
     start from; a longer label still grows past it, and a CTA may
     stretch to 100%. Height, padding and font never vary.
     ---------------------------------------------------------- */
  --btn-pad-y: 12px;
  --btn-pad-x: 28px;
  --btn-font: 0.86rem;
  --btn-radius: 4px;
  --btn-border: 1px;
  --btn-gap: 8px;
  --btn-min-h: 46px;
  --btn-min-w: 200px;
  --btn-line: 1.2;

  /* Compact variant: dense rows only (book links, chips, pagination).
     Still meets the 40px minimum for a comfortable tap. */
  --btn-pad-y-sm: 8px;
  --btn-pad-x-sm: 18px;
  --btn-font-sm: 0.78rem;
  --btn-min-h-sm: 40px;

  /* Square icon buttons — one size, so circles stay circles. */
  --btn-icon-size: 40px;
  --btn-icon-font: 1.05rem;
  --btn-icon-size-sm: 36px;

  /* Magnifier glyph, drawn as a mask so it takes `currentColor`. Used
     where a search control has no icon of its own — core's Search block
     renders a text label unless the editor picks the icon option. */
  --yb-search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* The horizontal clip lives here rather than on body: `overflow-x: hidden` on
   body computes overflow-y to auto, which makes body the scroll container and
   silently breaks every `position: sticky` inside it. On html it clips exactly
   the same way while the viewport stays the scrollport. */
html {
  overflow-x: hidden;
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-serif);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.7;
  cursor: none;
}

img {
  max-width: 100%;
  display: block;
}

/* Base links. Every selector is wrapped in :where() so the whole block carries
   zero specificity: any component rule (.nav-link, .btn, .footer-links a, …)
   still wins outright, and these only reach links nothing else has styled —
   the ones that were falling back to the browser's blue and purple. */
:where(a) {
  color: var(--link);
  text-decoration-color: var(--link-underline);
  text-underline-offset: 0.18em;
  transition: color 0.25s var(--ease-smooth), text-decoration-color 0.25s var(--ease-smooth);
}

:where(a:hover, a:focus-visible, a:active) {
  color: var(--link-hover);
  text-decoration-color: currentColor;
}

/* The ink-blue bands: navy text would vanish into them. */
:where(.site-footer, .yb-announcement, .page-hero, .article-hero, .insights-cta,
  .footer-cta-band, .autographed-banner, .order-summary) :where(a) {
  color: var(--link-on-dark);
  text-decoration-color: rgba(232, 213, 168, 0.5);
}

:where(.site-footer, .yb-announcement, .page-hero, .article-hero, .insights-cta,
  .footer-cta-band, .autographed-banner, .order-summary) :where(a:hover, a:focus-visible, a:active) {
  color: var(--link-on-dark-hover);
  text-decoration-color: currentColor;
}

/* ============================================================
   CUSTOM FOUNTAIN PEN CURSOR (FIXED HOTSPOT)
   ============================================================ */
.cursor-pen {
  position: fixed;
  width: 28px;
  height: 28px;
  pointer-events: none;
  z-index: 100000;
  /* offset so the SVG pen-tip (bottom-left corner) aligns with actual pointer */
  transform: translate(-1px, -1px);
}

.cursor-pen svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 3px rgba(26, 39, 68, 0.25));
}

.cursor-pen.hovering svg {
  filter: drop-shadow(0 2px 6px rgba(26, 39, 68, 0.35));
  transform: rotate(-10deg) scale(1.12);
  transition: transform 0.2s var(--ease-smooth), filter 0.2s;
}

.ink-droplet {
  position: fixed;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, var(--ink-medium) 0%, var(--ink-deep) 50%, transparent 100%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  animation: inkDrop 0.7s var(--ease-smooth) forwards;
}

@keyframes inkDrop {
  0% {
    transform: scale(0);
    opacity: 1;
  }

  30% {
    transform: scale(1.2);
    opacity: 0.7;
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}

body:not(.yb-no-cursor) a,
body:not(.yb-no-cursor) button,
body:not(.yb-no-cursor) .nav-link,
body:not(.yb-no-cursor) .btn,
body:not(.yb-no-cursor) input,
body:not(.yb-no-cursor) textarea,
body:not(.yb-no-cursor) select,
body:not(.yb-no-cursor) [role="button"] {
  cursor: none !important;
}

/* ============================================================
   LOADING SCREEN — BOOK PAGE FLIP (FIXED ANIMATION)
   ============================================================ */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: var(--parchment);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s var(--ease-elegant), visibility 0.8s;
  /* The cover swings wide of the book while it opens; without this the
     overhang can spill past the viewport and raise a scrollbar. */
  overflow: hidden;
}

.loading-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* --- Book construct --- */
.book-loader {
  width: 180px;
  height: 220px;
  perspective: 1000px;
  position: relative;
  /* The cover swings out to the left of the spine, so the construct is offset
     right for the open book — cover to page edge, 367px at full size — to sit
     centred. A transform does this without reserving layout width, which a
     margin would — that pushed the book off the right edge on narrow screens.
     The shift is measured, not half the box: the open cover reaches slightly
     further than the book is wide. It scales with the book, so a smaller
     screen only has to change --yb-book-scale. */
  --yb-book-scale: 1;
  transform: translateX(calc(93px * var(--yb-book-scale))) scale(var(--yb-book-scale));
}

/* Spine / back cover */
.book-loader .back-cover {
  position: absolute;
  /* width: 100%; */
  height: 100%;
  left: 0;
  right: 0;
  margin: 0 auto;
  background: linear-gradient(135deg, var(--ink-deep) 0%, #1e3355 100%);
  border-radius: 3px 10px 10px 3px;
  box-shadow: 0 6px 28px rgba(26, 39, 68, 0.35);
}

.book-loader .back-cover::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 14px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.25), transparent);
  border-radius: 3px 0 0 3px;
}

/* Stacked page edges (static) */
.book-loader .page-edges {
  position: absolute;
  right: 4px;
  top: 6px;
  bottom: 6px;
  width: 8px;
  background: repeating-linear-gradient(to bottom,
      #f8f3eb 0px, #f8f3eb 2px,
      #e8e2d8 2px, #e8e2d8 3px);
  border-radius: 0 2px 2px 0;
}

/* Flipping pages */
.book-loader .flip-page {
  position: absolute;
  width: calc(100% - 14px);
  height: calc(100% - 12px);
  top: 6px;
  left: 14px;
  transform-origin: left center;
  transform-style: preserve-3d;
  animation: flipPage 1.2s ease-in-out infinite;
}

.book-loader .flip-page:nth-child(3) {
  animation-delay: 0s;
}

.book-loader .flip-page:nth-child(4) {
  animation-delay: 0.18s;
}

.book-loader .flip-page:nth-child(5) {
  animation-delay: 0.36s;
}

.book-loader .flip-page .front,
.book-loader .flip-page .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 0 6px 6px 0;
}

.book-loader .flip-page .front {
  background: linear-gradient(100deg, #f0ebe3 0%, #faf6f0 40%, #f5efe5 100%);
  /* Faint text lines */
  background-image:
    repeating-linear-gradient(transparent, transparent 16px,
      rgba(26, 39, 68, 0.05) 16px, rgba(26, 39, 68, 0.05) 17px);
  background-position: 20px 24px;
}

.book-loader .flip-page .front::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(0, 0, 0, 0.04);
}

.book-loader .flip-page .back {
  background: linear-gradient(260deg, #e8e2d8 0%, #f0ebe3 100%);
  transform: rotateY(180deg);
}

@keyframes flipPage {
  0% {
    transform: rotateY(0deg);
    z-index: 10;
  }

  35% {
    transform: rotateY(-90deg);
    z-index: 10;
  }

  50% {
    transform: rotateY(-180deg);
    z-index: 0;
  }

  100% {
    transform: rotateY(-180deg);
    z-index: 0;
  }
}

/* Front cover (on top, opens first then stays open) */
.book-loader .front-cover {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--ink-deep) 0%, var(--ink-medium) 100%);
  border-radius: 3px 10px 10px 3px;
  transform-origin: left center;
  animation: openCover 1.2s ease-in-out forwards;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2);
}

.book-loader .front-cover::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 14px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent);
  border-radius: 3px 0 0 3px;
}

.book-loader .front-cover img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  opacity: 0.9;
}

@keyframes openCover {
  0% {
    transform: rotateY(0deg);
  }

  40% {
    transform: rotateY(-165deg);
  }

  100% {
    transform: rotateY(-165deg);
  }
}

.loading-text {
  margin-top: 44px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink-medium);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  animation: loadPulse 1.6s ease-in-out infinite;
  /* No offset of its own: the open book is centred (see .book-loader), so
     centred text sits under it. */
  max-width: 100%;
}

.loading-tagline {
  margin-top: 0px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
  letter-spacing: 0.15em;
  max-width: 100%;
}

@keyframes loadPulse {

  0%,
  100% {
    opacity: 0.4;
  }

  50% {
    opacity: 1;
  }
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.main-content {
  opacity: 0;
  transition: opacity 1s var(--ease-elegant) 0.3s;
}

.main-content.visible {
  opacity: 1;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0 48px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-light);
  transition: all 0.4s var(--ease-elegant);
}

/* The frosted glass lives on a pseudo-element, not the bar itself. A
   backdrop-filter on .navbar makes it the containing block for its fixed
   children, so the mobile drawer (.nav-links) was sized and placed against
   the 60–76px bar instead of the viewport and never showed properly. */
.navbar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(250, 246, 240, 0.88);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  pointer-events: none;
}

.navbar.scrolled {
  height: 60px;
  box-shadow: var(--shadow-soft);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text-primary);
}

.nav-logo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  transition: transform 0.4s var(--ease-bounce);
  box-shadow: 0 2px 8px rgba(26, 39, 68, 0.1);
}

.navbar.scrolled .nav-logo {
  width: 36px;
  height: 36px;
}

.nav-brand:hover .nav-logo {
  transform: rotate(-8deg) scale(1.08);
}

.nav-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.nav-brand-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-deep);
}

.nav-brand-tagline {
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 3px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}

.nav-link {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.88rem;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 6px;
  position: relative;
  letter-spacing: 0.03em;
  transition: color 0.3s var(--ease-smooth), background-color 0.3s var(--ease-smooth);
}

/* The rule is inset to the link's padding rather than sized as a percentage,
   so it tracks the width of the label instead of the width of the box —
   "Blog" and "Testimonials" were getting very different-looking underlines. */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 16px;
  right: 16px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--ink-medium);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s var(--ease-smooth), background-color 0.3s var(--ease-smooth);
}

.nav-link:hover {
  color: var(--ink-deep);
  background: rgba(26, 39, 68, 0.04);
}

.nav-link:hover::after {
  transform: scaleX(1);
}

/* Ring switched off site-wide; the colour shift is the whole focus cue now. */
.nav-link:focus-visible {
  outline: none;
  color: var(--ink-deep);
}

/* The current page keeps its gold rule; hovering it does not restate the
   hover colour, so the two states never read as the same thing. */
.nav-link.active {
  color: var(--ink-deep);
  font-weight: 500;
}

.nav-link.active::after {
  background: var(--gold);
  transform: scaleX(1);
}

.nav-link.active:hover {
  background: rgba(201, 169, 110, 0.1);
}

.nav-link.active:hover::after {
  background: var(--gold);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink-deep);
  margin: 5px 0;
  transition: all 0.3s var(--ease-smooth);
  border-radius: 2px;
}

/* ============================================================
   HERO SECTION (with full-bleed image)
   ============================================================ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* Dark overlay for readability */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(26, 39, 68, 0.55) 0%,
      rgba(26, 39, 68, 0.45) 40%,
      rgba(26, 39, 68, 0.60) 100%);
  z-index: 1;
}

.hero-inner {
  max-width: 860px;
  padding: 140px 48px 100px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.hero-logo-wrapper {
  margin-bottom: 18px;
  opacity: 0;
  animation: fadeInUp 0.8s var(--ease-elegant) 0.4s forwards;
}

.hero-logo-wrapper img {
  width: 90px;
  height: 90px;
  margin: 0 auto;
  border-radius: 50%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  background: rgba(255, 255, 255, 0.1);
}

.hero-ornament {
  display: inline-block;
  width: 50px;
  height: 1px;
  background: var(--gold-light);
  margin-bottom: 24px;
  position: relative;
  opacity: 0;
  animation: fadeInUp 0.8s var(--ease-elegant) 0.6s forwards;
}

.hero-ornament::before,
.hero-ornament::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--gold-light);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}

.hero-ornament::before {
  left: -10px;
}

.hero-ornament::after {
  right: -10px;
}

.hero-subtitle-top {
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 20px;
  opacity: 0;
  animation: fadeInUp 0.8s var(--ease-elegant) 0.7s forwards;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.5vw, 4.5rem);
  font-weight: 300;
  line-height: 1.15;
  color: #fff;
  margin-bottom: 12px;
  opacity: 0;
  animation: fadeInUp 0.8s var(--ease-elegant) 0.9s forwards;
}

.hero-title em {
  font-style: italic;
  color: var(--gold-light);
  font-weight: 400;
}

.hero-tagline {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 28px;
  font-style: italic;
  opacity: 0;
  animation: fadeInUp 0.8s var(--ease-elegant) 1.0s forwards;
}

.hero-description {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.65);
  max-width: 560px;
  margin: 0 auto 40px;
  line-height: 1.8;
  opacity: 0;
  animation: fadeInUp 0.8s var(--ease-elegant) 1.1s forwards;
  word-break: break-word;
}

.hero-cta-group {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeInUp 0.8s var(--ease-elegant) 1.3s forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.scroll-indicator {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 2;
  opacity: 0;
  animation: fadeInUp 0.8s var(--ease-elegant) 1.8s forwards;
  cursor: pointer;
}

.scroll-indicator span {
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.scroll-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, var(--gold-light), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .scroll-indicator {
    gap: 14px;
  }

  /* On the 768x1024 tablet viewport, min-height: 100vh makes the hero
     banner unusually tall relative to its content, leaving excessive
     empty space above/below. Cap it so the banner height stays balanced
     while content, alignment, and styling are untouched. */
  .hero {
    min-height: 70vh;
  }

  /* Footer social icons default to flex-start (left-aligned) at every
     width. On the 768x1024 tablet viewport, center them within the
     footer-brand column instead; icon size, spacing, and colors unchanged. */
  .footer-social {
    justify-content: center;
  }
}

@keyframes scrollPulse {

  0%,
  100% {
    opacity: 0.3;
    transform: scaleY(0.6);
  }

  50% {
    opacity: 1;
    transform: scaleY(1);
  }
}

/* ============================================================
   BUTTONS — INK SPLASH HOVER EFFECT
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  font-family: var(--font-serif);
  font-size: var(--btn-font);
  line-height: var(--btn-line);
  letter-spacing: 0.08em;
  text-decoration: none;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  min-height: var(--btn-min-h);
  min-width: var(--btn-min-w);
  border-radius: var(--btn-radius);
  /* border-box keeps the 1px border inside --btn-min-h, so a bordered
     button and a borderless one are exactly the same height. */
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color 0.45s var(--ease-smooth), border-color 0.45s var(--ease-smooth),
    transform 0.35s var(--ease-smooth), box-shadow 0.35s var(--ease-smooth);
}

/* Ink splash pseudo-element shared by all buttons */
.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 0%;
  transform: translate(-50%, -50%);
  transition: width 0.5s var(--ease-smooth), height 0.5s var(--ease-smooth);
  z-index: -1;
}

.btn:hover::before {
  width: 100%;
  height: 320px;
}

.btn:hover {
  transform: translateY(-2px);
}

/* --- Primary (glass on hero) → fills to deep blue ink --- */
.btn-primary {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: var(--btn-border) solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
}

.btn-primary::before {
  background: var(--ink-deep);
}

.btn-primary:hover {
  color: var(--cream);
  border-color: var(--ink-deep);
  box-shadow: 0 6px 22px rgba(26, 39, 68, 0.3);
}

/* --- Secondary (gold) → fills to deep blue ink --- */
.btn-secondary {
  background: var(--gold);
  color: var(--ink-deep);
  border: var(--btn-border) solid var(--gold);
  font-weight: 500;
}

.btn-secondary::before {
  background: var(--ink-deep);
}

.btn-secondary:hover {
  color: var(--cream);
  border-color: var(--ink-deep);
  box-shadow: 0 6px 22px rgba(26, 39, 68, 0.25);
}

/* --- Dark (blue bg) → fills to cream ink --- */
.btn-dark {
  background: var(--ink-deep);
  color: var(--cream);
  border: var(--btn-border) solid var(--ink-deep);
}

.btn-dark::before {
  background: var(--cream);
}

.btn-dark:hover {
  color: var(--ink-deep);
  border-color: var(--ink-deep);
  box-shadow: 0 6px 22px rgba(26, 39, 68, 0.15);
}

/* --- Outline (transparent) → fills to deep blue ink --- */
.btn-outline {
  background: transparent;
  color: var(--ink-deep);
  border: var(--btn-border) solid rgba(26, 39, 68, 0.2);
}

.btn-outline::before {
  background: var(--ink-deep);
}

.btn-outline:hover {
  color: var(--cream);
  border-color: var(--ink-deep);
  box-shadow: 0 6px 22px rgba(26, 39, 68, 0.2);
}

/* ============================================================
   SHARED SECTION STYLES
   ============================================================ */
.section {
  padding: var(--section-y) var(--section-x);
  position: relative;
}

.section-header {
  text-align: center;
  max-width: 660px;
  margin: 0 auto var(--section-head-gap);
}

.section-label {
  font-size: 0.72rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 14px;
  display: block;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.8vw, 2.8rem);
  font-weight: 400;
  color: var(--ink-deep);
  margin-bottom: 18px;
  line-height: 1.2;
}

.section-divider {
  width: 36px;
  height: 1.5px;
  background: var(--gold);
  margin: 0 auto 0;
}

.section-description {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.75;
}

.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.7s var(--ease-elegant), transform 0.7s var(--ease-elegant);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   ABOUT SECTION
   ============================================================ */
.about {
  background: linear-gradient(180deg, var(--parchment-deep) 0%, var(--parchment) 50%, var(--cream) 100%);
}

.about-grid {
  max-width: 1060px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 64px;
  align-items: center;
}

.about-image-wrapper {
  position: relative;
}

.about-image-frame {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-elevated);
  position: relative;
}

.about-image-frame img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

.about-image-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(201, 169, 110, 0.15);
  border-radius: 10px;
  pointer-events: none;
}

.about-decorative {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 100px;
  height: 100px;
  border: 1px solid var(--gold-light);
  border-radius: 10px;
  z-index: -1;
  opacity: 0.6;
}

.about-content h3 {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 400;
  color: var(--ink-deep);
  margin-bottom: 20px;
  line-height: 1.3;
}

.about-content p {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.85;
  margin-bottom: 16px;
}

.about-content .emphasis {
  font-style: italic;
  color: var(--ink-medium);
  border-left: 2px solid var(--gold);
  padding-left: 16px;
  margin: 24px 0;
}

/* ============================================================
   THE SERIES — Predicate Uncertainty
   ============================================================ */
.series-section {
  background: var(--cream);
}

.series-grid {
  max-width: 1060px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
}

.series-content h3 {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 400;
  color: var(--ink-deep);
  margin-bottom: 20px;
  line-height: 1.3;
}

.series-content p {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.85;
  margin-bottom: 16px;
}

.series-content .emphasis {
  font-style: italic;
  color: var(--ink-medium);
  border-left: 2px solid var(--gold);
  padding-left: 16px;
  margin: 24px 0;
}

.series-content .emphasis p {
  margin-bottom: 0;
}

.series-cta {
  display: flex;
  /* Matches the .about-cta/.series-cta pair in wordpress.css, which loads
     later and was already overriding this to 12px. */
  gap: 12px;
  flex-wrap: wrap;
}

.series-image-wrapper {
  position: relative;
}

.series-image-frame {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-elevated);
  position: relative;
}

.series-image-frame img {
  width: 100%;
  display: block;
}

.series-image-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(201, 169, 110, 0.15);
  border-radius: 10px;
  pointer-events: none;
}

.series-decorative {
  position: absolute;
  bottom: -16px;
  left: -16px;
  width: 100px;
  height: 100px;
  border: 1px solid var(--gold-light);
  border-radius: 10px;
  z-index: -1;
  opacity: 0.6;
}

/* ============================================================
   BLOG / RECENT POSTS
   ============================================================ */
.blog-section {
  background: var(--cream);
}

.posts-grid {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.post-card {
  background: var(--bg-card);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid var(--border-light);
  overflow: hidden;
  transition: all 0.45s var(--ease-smooth);
}

.post-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-elevated);
  border-color: rgba(201, 169, 110, 0.2);
}

.post-card-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.post-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s var(--ease-smooth);
}

.post-card:hover .post-card-image img {
  transform: scale(1.06);
}

.post-card-category {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-deep);
  font-weight: 500;
}

.post-card-body {
  padding: 24px;
}

.post-card-date {
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.post-card-title {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 500;
  color: var(--ink-deep);
  line-height: 1.35;
  margin-bottom: 10px;
  transition: color 0.3s;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card:hover .post-card-title {
  color: var(--ink-medium);
}

.post-card-excerpt {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card-link {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-medium);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
  transition: gap 0.3s, color 0.3s;
}

.post-card-link:hover {
  gap: 10px;
  color: var(--ink-deep);
}

/* ============================================================
   BOOKS SECTION
   ============================================================ */
.books-section {
  background: linear-gradient(180deg, var(--cream) 0%, var(--parchment-warm) 100%);
}

.books-grid {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.book-card {
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  border: 1px solid var(--border-light);
  padding: 36px 28px;
  text-align: center;
  transition: all 0.45s var(--ease-smooth);
  position: relative;
  overflow: hidden;
}

.book-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold), var(--gold-light));
  opacity: 0;
  transition: opacity 0.35s;
}

.book-card:hover::before {
  opacity: 1;
}

.book-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-elevated);
}

.book-cover-img {
  width: 150px;
  height: 225px;
  margin: 0 auto 24px;
  border-radius: 4px;
  box-shadow: 0 8px 28px rgba(26, 39, 68, 0.18);
  transition: transform 0.45s var(--ease-bounce);
  overflow: hidden;
}

.book-cover-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.book-card:hover .book-cover-img {
  transform: translateY(-3px) rotateY(-4deg);
}

.book-card h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--ink-deep);
  margin-bottom: 6px;
}

.book-genre {
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.book-card>p {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 20px;
}

.book-buy-links {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-book {
  /* Compact variant: several of these sit together under one book cover. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  padding: var(--btn-pad-y-sm) var(--btn-pad-x-sm);
  min-height: var(--btn-min-h-sm);
  box-sizing: border-box;
  font-size: var(--btn-font-sm);
  line-height: var(--btn-line);
  font-family: var(--font-serif);
  border-radius: var(--btn-radius);
  text-decoration: none;
  letter-spacing: 0.06em;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color 0.45s var(--ease-smooth), border-color 0.45s var(--ease-smooth),
    transform 0.35s var(--ease-smooth), box-shadow 0.35s var(--ease-smooth);
}

.btn-book::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s var(--ease-smooth), height 0.5s var(--ease-smooth);
  z-index: -1;
}

.btn-book:hover::before {
  width: 260px;
  height: 260px;
}

.btn-book:hover {
  transform: translateY(-2px);
}

.btn-book.amazon {
  background: var(--ink-deep);
  color: var(--cream);
  border: 1px solid var(--ink-deep);
}

.btn-book.amazon::before {
  background: var(--cream);
}

.btn-book.amazon:hover {
  color: var(--ink-deep);
  border-color: var(--ink-deep);
}

.btn-book.archway {
  background: transparent;
  color: var(--ink-deep);
  border: 1px solid rgba(26, 39, 68, 0.2);
}

.btn-book.archway::before {
  background: var(--ink-deep);
}

.btn-book.archway:hover {
  color: var(--cream);
  border-color: var(--ink-deep);
}

.btn-book.signed {
  background: var(--gold);
  color: var(--ink-deep);
  border: 1px solid var(--gold);
}

.btn-book.signed::before {
  background: var(--gold-light);
}

.btn-book.signed:hover {
  color: var(--ink-deep);
  border-color: var(--gold-light);
}

/* "Get an autographed copy" link under the section description */
.autographed-link-wrap {
  margin-top: 14px;
}

.autographed-link {
  color: var(--gold);
  font-family: var(--font-serif);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease-smooth), color 0.3s var(--ease-smooth);
}

.autographed-link:hover {
  color: var(--gold-light);
  border-bottom-color: var(--gold-light);
}

/* Autographed banner */
.autographed-banner {
  max-width: 960px;
  margin: 44px auto 0;
  background: linear-gradient(135deg, var(--ink-deep) 0%, var(--ink-medium) 100%);
  border-radius: 12px;
  padding: 36px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  color: var(--cream);
  position: relative;
  overflow: hidden;
}

.autographed-banner::before {
  content: '';
  position: absolute;
  top: -60%;
  right: -15%;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(201, 169, 110, 0.1), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.autographed-content h3 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 400;
  margin-bottom: 6px;
}

.autographed-content p {
  font-size: 0.9rem;
  opacity: 0.8;
  line-height: 1.55;
}

.btn-autographed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  min-height: var(--btn-min-h);
  min-width: var(--btn-min-w);
  box-sizing: border-box;
  background: var(--gold);
  color: var(--ink-deep);
  border: none;
  border-radius: var(--btn-radius);
  font-family: var(--font-serif);
  font-size: var(--btn-font);
  line-height: var(--btn-line);
  letter-spacing: 0.08em;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.3s var(--ease-smooth);
  font-weight: 500;
  position: relative;
  z-index: 1;
}

.btn-autographed:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials-section {
  background: var(--warm-white);
  padding: var(--section-y) var(--section-x);
  position: relative;
}

.testimonials-section .section-inner {
  max-width: 1140px;
  margin: 0 auto;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.testimonial-card {
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 36px;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 0;
  transform: translateY(20px);
  position: relative;
}

.testimonial-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.05);
}

.testimonial-quote-icon {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 48px;
  color: var(--gold-pale);
  line-height: 1;
  margin-bottom: 8px;
}

.testimonial-stars {
  display: flex;
  gap: 2px;
  color: var(--gold);
  font-size: 14px;
  margin-bottom: 16px;
}

.testimonial-text {
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.8;
  font-style: italic;
  margin-bottom: 24px;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-light);
}

.testimonial-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
}

.testimonial-role {
  font-size: 12px;
  color: var(--text-muted);
}

/* ============================================================
   SUBSCRIBE
   ============================================================ */
.subscribe-section {
  background: linear-gradient(180deg, var(--parchment) 0%, var(--parchment-warm) 100%);
}

.subscribe-card {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.subscribe-form {
  display: flex;
  gap: 10px;
  max-width: 460px;
  margin: 28px auto 0;
}

.subscribe-input {
  flex: 1;
  /* Matches the button it sits beside, so the pair lines up at every width. */
  padding: var(--btn-pad-y) 18px;
  min-height: var(--btn-min-h);
  box-sizing: border-box;
  border: var(--btn-border) solid var(--border-light);
  border-radius: var(--btn-radius);
  font-family: var(--font-serif);
  font-size: var(--btn-font);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  transition: all 0.3s var(--ease-smooth);
  color: var(--text-primary);
  outline: none;
}

.subscribe-input::placeholder {
  color: var(--text-muted);
}

.subscribe-input:focus {
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.16);
}

.subscribe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  min-height: var(--btn-min-h);
  min-width: var(--btn-min-w);
  box-sizing: border-box;
  background: var(--ink-deep);
  color: var(--cream);
  border: none;
  border-radius: var(--btn-radius);
  font-family: var(--font-serif);
  font-size: var(--btn-font);
  line-height: var(--btn-line);
  letter-spacing: 0.08em;
  transition: all 0.3s var(--ease-smooth);
  white-space: nowrap;
}

.subscribe-btn:hover {
  background: var(--ink-medium);
  transform: translateY(-2px);
}

.subscribe-note {
  margin-top: 14px;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-section {
  background: var(--cream);
}

.contact-form-wrap {
  max-width: 520px;
  margin: 0 auto;
}

.contact-form-wrap form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-form-wrap textarea {
  resize: vertical;
  font-family: var(--font-serif);
}

.contact-form-wrap .form-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.6);
  padding: 28px 32px 32px;
  position: relative;
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.3), transparent);
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* The last section before the footer carried a full --section-y bottom pad,
   which stacked with the footer's own top pad into an oversized gap. Trim the
   trailing pad only — the section's own top spacing is left alone. */
.main-content > .section:last-of-type,
.main-content > :last-child > .section:last-of-type {
  padding-bottom: clamp(24px, 3vw, 36px);
}

/* The number of link columns comes from Theme Options (0–4), so the tracks
   are generated per rendered column instead of a fixed four — a fixed
   template left empty tracks on the right whenever fewer were configured. */
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr);
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 48px;
  margin-bottom: 48px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  color: inherit;
  text-decoration: none;
}

.footer-logo:hover .footer-logo-name,
.footer-logo:focus-visible .footer-logo-name {
  color: var(--gold);
}

.footer-logo img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.footer-logo-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 1px;
  transition: color 0.3s ease;
}

.footer-logo-tagline {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
}

.footer-about {
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 20px;
  max-width: 280px;
}

.footer-social {
  display: flex;
  gap: 12px;
}

.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 16px;
}

.footer-social a:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}

.footer-heading {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.footer-links a:hover {
  color: var(--gold);
  transform: translateX(4px);
}

/* Current page, or on the front page the section being read. Marked
   `.active` + `aria-current` server-side, and by theme.js's sectionSpy. */
.footer-links a.active,
.footer-links a[aria-current="page"] {
  color: var(--gold);
  font-weight: 600;
}

/* The header's mark for the current item — a gold rule under the label —
   so the two menus show it the same way. */
.footer-links a,
.footer-bottom-links a {
  position: relative;
}

.footer-links a.active::after,
.footer-bottom-links a.active::after,
.footer-bottom-links .nav-link.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--gold);
  transform: none;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  margin-bottom: 12px;
}

.footer-contact-item .iconify {
  color: var(--gold);
  margin-top: 3px;
  flex-shrink: 0;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-copyright {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.35);
}

.footer-copyright a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-copyright a:hover,
.footer-copyright a:focus-visible {
  color: var(--gold);
}

.footer-bottom-links {
  display: flex;
  gap: 24px;
}

.footer-bottom-links a {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.35);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-bottom-links a:hover {
  color: var(--gold);
}

.footer-bottom-links a.active,
.footer-bottom-links a[aria-current="page"] {
  color: var(--gold);
}


/* ============================================================
   SCROLL-TO-TOP
   ============================================================ */
.scroll-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 42px;
  height: 42px;
  background: var(--ink-deep);
  color: var(--cream);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: all 0.35s var(--ease-smooth);
  box-shadow: 0 4px 14px rgba(26, 39, 68, 0.2);
}

.scroll-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-top:hover {
  background: var(--ink-medium);
  transform: translateY(-3px);
}

/* ============================================================
   UTILITIES (moved from inline styles)
   ============================================================ */
.mt-8 {
  margin-top: 8px;
}

.self-start {
  align-self: flex-start;
}

/* The "Required fields are marked *" note shown to signed-in readers sits
   outside any label, so its asterisk is named here to match the fields'. */
#comments #commentform label span,
#comments #commentform .required-field-message .required {
  color: #f44336;
}

#block-3 .wp-block-latest-posts__list.wp-block-latest-posts.is-layout-flow.wp-block-latest-posts-is-layout-flow {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#block-3 .wp-block-latest-posts__list.wp-block-latest-posts.is-layout-flow.wp-block-latest-posts-is-layout-flow a {
  text-decoration: none;
  color: #c9a96e !important;
}

/* input:focus-visible {
    outline: none;
    box-shadow: none;
    border-color:#32373c;
    border: 1px solid #32373c !important;
} */


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin: 0 auto;
  }

  /* The brand block takes its own full-width row and the link columns share
     the row below. A fixed `1fr 1fr` left an empty cell whenever the column
     count was odd, and put the tall brand block beside a short link list;
     auto-fit collapses unused tracks so any count (0–4) fills the width. */
  .footer-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-brand .footer-about {
    max-width: 560px;
  }
}

@media (max-width: 991px) {
  /* `.btn` deliberately keeps its desktop padding here. It used to shrink to
     13px 23px at this breakpoint, which no other button matched — so a theme
     button and a WooCommerce button on the same row drifted apart between
     768px and 991px. Size now comes from the tokens at every viewport. */

}

@media (max-width: 768px) {
  body {
    cursor: auto;
  }

  .cursor-pen {
    display: none;
  }

  a,
  button,
  .nav-link,
  .btn,
  input,
  textarea,
  select,
  [role="button"] {
    cursor: auto !important;
  }

  .navbar {
    padding: 0 20px;
  }

  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 260px;
    height: 100vh;
    background: var(--parchment);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    transition: right 0.4s var(--ease-smooth);
    box-shadow: -6px 0 28px rgba(0, 0, 0, 0.1);
    z-index: 1000;
  }

  .nav-links.open {
    right: 0;
  }

  .nav-toggle {
    display: block;
    position: relative;
    z-index: 1001;
  }

  .nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .nav-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }

  /* `.section` padding comes from --section-y / --section-x at every width. */

  .hero-inner {
    padding: 120px 20px 90px;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  /* Stacked, the portrait would run the full column width, and at 4/5 that
     makes it taller than the text it introduces. Cap and centre it instead. */
  .about-image-wrapper {
    width: 100%;
    max-width: 280px;
    margin-inline: auto;
  }

  .series-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .posts-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .books-grid {
    grid-template-columns: 1fr;
  }

  .autographed-banner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 24px;
  }

  /* Footer social icons default to flex-start (left-aligned) at every
     width. Center them within the footer-brand column on mobile; icon
     size, spacing, and colors unchanged. */
  .footer-social {
    justify-content: center;
  }

  .subscribe-form {
    flex-direction: column;
  }

  /* Home only: once .subscribe-form stacks, the button is a min-width
     inline-flex box that sits left in the column. Auto side margins center it. */
  .home .subscribe-form .subscribe-btn {
    margin: 0px auto;
  }

  /* Home only: same for the contact section's Send Message button, which sits
     left in the .yb-form flex column. */
  .home .contact-form-wrap .yb-form-submit {
    margin: 0px auto;
  }

  /* Mobile footer: the columns stack, so the desktop rhythm (48px grid gap,
     20px headings, 10px link gaps) reads as large empty bands. Tighten the
     gaps between and inside the Explore / Categories / Contact blocks. */
  footer {
    padding: 20px 20px 20px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 24px;
  }

  .footer-about {
    margin-bottom: 14px;
  }

  .footer-heading {
    margin-bottom: 10px;
  }

  .footer-links {
    gap: 6px;
  }

  .footer-contact-item {
    margin-bottom: 8px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    padding-top: 16px;
  }
}

/* ============================================================
   DECORATIVE PARTICLES
   ============================================================ */
.particle {
  position: fixed;
  width: 2.5px;
  height: 2.5px;
  background: var(--gold-light);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  animation: particleFloat 18s linear infinite;
}

@keyframes particleFloat {
  0% {
    opacity: 0;
    transform: translateY(100vh) translateX(0);
  }

  10% {
    opacity: 0.25;
  }

  90% {
    opacity: 0.25;
  }

  100% {
    opacity: 0;
    transform: translateY(-10vh) translateX(25px);
  }
}

/* ============================================================
   AUTOGRAPH PAGE — page hero
   ============================================================ */
.page-hero {
  position: relative;
 padding: 110px 10px 55px;
  text-align: center;
  background: linear-gradient(135deg, var(--ink-deep) 0%, #1e3355 100%);
  overflow: hidden;
}

.page-hero-overlay {
  position: absolute;
  top: -40%;
  right: -10%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(201, 169, 110, 0.14), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.page-hero-inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  z-index: 1;
}

.page-hero .hero-ornament {
  margin: 0 auto 22px;
}

/* Book price line on the autograph cards */
.book-price {
  font-family: var(--font-serif);
  font-size: 0.85rem;
  color: var(--gold);
  letter-spacing: 0.03em;
  margin-top: 4px;
}

/* Order form fieldset */
.order-fieldset {
  border: 1px solid rgba(26, 39, 68, 0.15);
  border-radius: 8px;
  padding: 20px 22px 22px;
  margin: 4px 0;
}

.order-fieldset legend {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink-deep);
  padding: 0 10px;
}

.order-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
}

.order-title-row+.order-title-row {
  border-top: 1px solid rgba(26, 39, 68, 0.08);
}

.order-check {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 210px;
  flex: 1 1 210px;
  font-family: var(--font-serif);
  color: var(--ink-deep);
  cursor: pointer;
}

.order-check input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--gold);
  cursor: pointer;
}

.order-format {
  flex: 1 1 160px;
  min-width: 150px;
}

.order-inscription {
  flex: 2 1 200px;
  min-width: 180px;
}

.scroll-top {
  position: fixed;
  bottom: 45px;
  right: 28px;
  width: 42px;
  height: 42px;
  background: var(--ink-deep);
  color: var(--cream);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: all 0.35s var(--ease-smooth);
  box-shadow: 0 4px 14px rgba(26, 39, 68, 0.2);
}

.section.page-section .woocommerce .woocommerce-form-coupon-toggle .showcoupon {
  color: #c9a96e;
}

label .yb-required {
  color: #f44336;
}

#yb-form-contact-2493 p.yb-form-status.is-error {
  display: none !important;
}

#yb-form-newsletter-3035-email-error {
  text-align: left;
}

.section.page-section .wc_payment_method {

  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
}

input:focus {
  border-color: #cccccc00 !important;
}

.payment_box.payment_method_cheque {
  margin-left: 23px;
}

.section.page-section .payment_box.payment_method_cheque {
  margin-left: 27px;
}

#blog {
  padding-top: 10px;
}

@media (max-width: 768px) {
  /* Only has to clear the 76px fixed navbar, same as on desktop. */
  .page-hero {
    padding: 110px 20px 48px;
  }

  .order-title-row {
    flex-direction: column;
    align-items: stretch;
  }

  .order-check {
    min-width: 0;
  }
}

/* ============================================================
   ORDER / PRODUCT DETAIL PAGE
   ============================================================ */
/* Sits under a page banner, so top padding is the ordinary --section-y. */
.product-section {
  max-width: 1120px;
  margin: 0 auto;
}

.product-back {
  display: inline-block;
  margin-bottom: 34px;
  font-family: var(--font-serif);
  font-size: 0.9rem;
  color: var(--ink-deep);
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: color 0.3s var(--ease-smooth);
}

.product-back:hover {
  color: var(--gold);
}

.product-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: start;
}

.product-image {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(26, 39, 68, 0.22);
  background: var(--cream);
}

.product-image img {
  width: 100%;
  height: auto;
  display: block;
}

.product-info .section-label {
  margin-bottom: 10px;
  display: inline-block;
}

.product-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  line-height: 1.12;
  color: var(--ink-deep);
  margin-bottom: 8px;
}

.product-author {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--gold);
  font-size: 1rem;
}

.product-desc {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.product-features {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.product-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-serif);
  color: var(--ink-deep);
  font-size: 0.95rem;
}

.product-features .iconify {
  color: var(--gold);
  font-size: 19px;
  flex-shrink: 0;
}

.product-price-box {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px 26px;
  border: 1px solid rgba(201, 169, 110, 0.4);
  border-radius: 8px;
  background: rgba(201, 169, 110, 0.07);
}

.product-price-label {
  font-family: var(--font-serif);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.product-price {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--ink-deep);
  font-weight: 500;
}

/* Order layout: form + summary */
.order-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: start;
  margin-top: 64px;
  scroll-margin-top: 110px;
}

.order-form {
  background: var(--warm-white);
  border: 1px solid rgba(26, 39, 68, 0.1);
  border-radius: 12px;
  padding: 34px 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.order-heading {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 400;
  color: var(--ink-deep);
  margin-bottom: 4px;
}

.order-subheading {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--ink-deep);
}

.order-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.order-field label {
  font-family: var(--font-serif);
  font-size: 0.9rem;
  color: var(--ink-deep);
  letter-spacing: 0.02em;
}

.order-optional {
  color: var(--text-secondary);
  font-style: italic;
  font-size: 0.82rem;
}

.order-field textarea {
  resize: vertical;
  font-family: var(--font-serif);
}

.qty-control {
  display: flex;
  align-items: stretch;
  gap: 10px;
  max-width: 200px;
}

/* The stepper's frame belongs to `.qty-control`; the buttons are borderless
   segments inside it. This used to draw its own 1px border and a 6px radius —
   a second box inside the wrapper's — while the copy in woocommerce.css, which
   loads later, overrode it with the borderless treatment. The two had drifted,
   so the rule you read was not the rule that applied. Kept identical here. */
.qty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-icon-size);
  min-height: var(--btn-min-h);
  box-sizing: border-box;
  border: 0;
  background: transparent;
  font-size: var(--btn-icon-font);
  line-height: 1;
  color: var(--ink-deep);
  cursor: pointer;
  transition: background 0.25s var(--ease-smooth), color 0.25s var(--ease-smooth);
}

.qty-btn:hover {
  background: rgba(26, 39, 68, 0.06);
}

.qty-control input {
  text-align: center;
  width: 70px;
  -moz-appearance: textfield;
  appearance: textfield;
}

.qty-control input::-webkit-outer-spin-button,
.qty-control input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Order summary card */
.order-summary {
  background: linear-gradient(135deg, var(--ink-deep) 0%, #1e3355 100%);
  color: var(--cream);
  border-radius: 12px;
  padding: 32px 30px;
  position: sticky;
  top: 100px;
}

.summary-heading {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  margin-bottom: 20px;
  color: #fff;
}

.summary-book {
  display: flex;
  gap: 14px;
  align-items: center;
  padding-bottom: 20px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.summary-book img {
  width: 58px;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.summary-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
}

.summary-format {
  font-size: 0.82rem;
  color: var(--gold-light);
  margin-top: 3px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  padding: 8px 0;
  color: rgba(255, 255, 255, 0.82);
}

.summary-total {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 1.25rem;
  color: #fff;
}

.summary-total span:last-child {
  color: var(--ink-deep);
  font-weight: 500;
}

.summary-note {
  margin-top: 16px;
  font-size: 0.78rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 900px) {
  .product-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .product-image {
    max-width: 340px;
    margin: 0 auto;
  }

  .order-layout {
    grid-template-columns: 1fr;
  }

  .order-summary {
    position: static;
  }
}

@media (max-width: 768px) {
  .order-form {
    padding: 26px 22px;
  }
}

/* ============================================================
   INSIGHTS PAGE — blog listing
   ============================================================ */
.insights-section {
  background: var(--cream);
}

.insights-inner {
  max-width: 1140px;
  margin: 0 auto;
}

/* ---- Filter chips ---- */
.insights-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 46px;
  max-width: 900px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: var(--btn-font-sm);
  line-height: var(--btn-line);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.7);
  border: var(--btn-border) solid var(--border-light);
  border-radius: 30px;
  padding: var(--btn-pad-y-sm) var(--btn-pad-x-sm);
  min-height: var(--btn-min-h-sm);
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.35s var(--ease-smooth);
}

.filter-chip:hover {
  color: var(--ink-deep);
  border-color: rgba(201, 169, 110, 0.45);
  transform: translateY(-2px);
}

.filter-chip.active {
  background: var(--ink-deep);
  border-color: var(--ink-deep);
  color: var(--gold-light);
}

/* ---- Featured post ---- */
.featured-post {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 0;
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 52px;
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.45s var(--ease-smooth), transform 0.45s var(--ease-smooth);
}

.featured-post:hover {
  box-shadow: var(--shadow-elevated);
  transform: translateY(-4px);
}

.featured-post-image {
  position: relative;
  min-height: 340px;
  overflow: hidden;
}

.featured-post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-smooth);
}

.featured-post:hover .featured-post-image img {
  transform: scale(1.05);
}

.featured-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  background: var(--ink-deep);
  color: var(--gold-light);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 20px;
}

.featured-post-body {
  padding: 44px 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.featured-post-title {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 500;
  line-height: 1.28;
  color: var(--ink-deep);
  margin: 14px 0 14px;
}

.featured-post-excerpt {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: 26px;
}

/* ---- Post meta (date · read time) ---- */
.post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.post-meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold);
  display: inline-block;
}

.post-meta .post-topic {
  color: var(--ink-medium);
}

/* ---- Card tweaks for the listing grid ---- */
.insights-grid {
  margin-bottom: 46px;
}

.post-card.is-hidden {
  display: none;
}

.post-card-body .post-meta {
  margin-bottom: 12px;
}

/* ---- Pagination ----
   Framed as a gold hairline rule with the controls seated on the page
   background, echoing the .section-divider / .hero-ornament motif. */
.insights-pagination {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 40px;
  padding: 30px 0 0;
}

.insights-pagination.is-hidden {
  display: none;
}

/* Hairline rule above the controls, fading out at both ends */
.insights-pagination::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(420px, 80%);
  height: 1px;
  background: linear-gradient(90deg,
      transparent,
      rgba(201, 169, 110, 0.55) 25%,
      rgba(201, 169, 110, 0.55) 75%,
      transparent);
}

.page-numbers {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 10px;
}

/* --- Number buttons: underline-on-hover, gold seal when active --- */
.page-number {
  position: relative;
  /* Square-ish tap target. `line-height: 1px` here used to collapse the text
     box and leave centring to the flex parent; centring is explicit now. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--btn-icon-size);
  min-height: var(--btn-icon-size);
  line-height: var(--btn-line);
  padding: 0 10px;
  box-sizing: border-box;
  border: none;
  background: none;
  border-radius: 2px;
  font-family: var(--font-display);
  font-size: 1.12rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.35s var(--ease-smooth);
}

/* The thin gold underline that grows in on hover */
.page-number::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 0;
  height: 1px;
  background: var(--gold);
  transform: translateX(-50%);
  transition: width 0.35s var(--ease-smooth);
}

.page-number:hover:not(.active) {
  color: var(--ink-deep);
}

.page-number:hover:not(.active)::after {
  width: 18px;
}

.page-number.active {
  color: var(--ink-deep);
  font-weight: 600;
  cursor: default;
}

/* Gold square frame around the current page */
.page-number.active::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--gold);
  border-radius: 2px;
  animation: sealIn 0.45s var(--ease-elegant);
}

.page-number.active::after {
  width: 0;
}

@keyframes sealIn {
  from {
    transform: scale(0.75);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* --- Prev / Next: text + travelling arrow, no boxes --- */
.page-arrow {
  /* Same target height as .page-number, so arrows and numbers sit level. */
  min-height: var(--btn-icon-size);
  padding: 0 10px;
  box-sizing: border-box;
  border: none;
  background: none;
  font-family: var(--font-serif);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-medium);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: color 0.3s var(--ease-smooth), opacity 0.3s;
}

.page-arrow span {
  display: inline-block;
  transition: transform 0.35s var(--ease-smooth);
}

.page-arrow:hover:not(:disabled) {
  color: var(--ink-deep);
}

#pagePrev:hover:not(:disabled) span {
  transform: translateX(-5px);
}

#pageNext:hover:not(:disabled) span {
  transform: translateX(5px);
}

.page-arrow:disabled {
  opacity: 0.28;
  cursor: not-allowed;
  color: var(--text-muted);
}

/* --- Count line --- */
.insights-count {
  text-align: center;
  margin-top: 18px;
  font-family: var(--font-serif);
  font-size: 0.74rem;
  font-style: italic;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* The open cover needs roughly twice the book's width to show in full. Below
   that, scale the whole construct rather than letting it clip. */
@media (max-width: 425px) {
  /* 286px open, so it clears a 320px screen with room either side. */
  .book-loader {
    --yb-book-scale: 0.78;
  }

  .loading-text {
    font-size: 1rem;
    letter-spacing: 0.2em;
    margin-top: 28px;
  }
}

/* The narrowest phones (a folded Galaxy Fold is 280px) are narrower than the
   book opens even at 0.78; 0.7 brings it to 257px. */
@media (max-width: 300px) {
  .book-loader {
    --yb-book-scale: 0.7;
  }
}

/* Mobile only: close the dead space between the posts list and the pagination.
   The gap is mostly .insights-grid's 46px bottom margin plus the pagination's
   own 40px top margin — stacked, that is over 100px on a phone. The gold
   hairline above the controls already separates the two, so the spacing can be
   much tighter here. Desktop keeps its original values. */
@media (max-width: 768px) {
  .insights-grid {
    margin-bottom: 16px;
  }

  .insights-count {
    margin-top: 10px;
  }

  .insights-pagination {
    margin-top: 12px;
    padding-top: 14px;
  }
}

@media (max-width: 560px) {
  .insights-pagination {
    margin-top: 8px;
    padding-top: 12px;
    gap: 4px;
  }

  .page-numbers {
    margin: 0 2px;
    gap: 2px;
  }

  /* Pagination keeps its target size on small screens. It previously shrank
     numbers to 34x30 while arrows stayed 42px tall, so the row went ragged
     exactly where taps are least precise. Only the label spacing tightens. */
  .page-number {
    padding: 0 6px;
  }

  .page-arrow {
    letter-spacing: 0.14em;
    gap: 6px;
    padding: 0 6px;
  }
}

/* ---- Newsletter strip ---- */
.insights-cta {
  background: linear-gradient(135deg, var(--ink-deep) 0%, #1e3355 100%);
  border-radius: 14px;
  padding: 54px 40px;
  text-align: center;
  max-width: 1140px;
  margin: var(--section-y) auto 0;
}

.insights-cta h3 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--cream);
  margin-bottom: 12px;
}

.insights-cta p {
  color: rgba(255, 249, 240, 0.72);
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto 26px;
}

@media (max-width: 991px) {
  .footer-grid {
    width: 100%;
  }
}

@media (max-width: 900px) {
  .featured-post {
    grid-template-columns: 1fr;
  }

  .featured-post-image {
    min-height: 240px;
  }

  .featured-post-body {
    padding: 32px 26px;
  }

  .featured-post-title {
    font-size: 1.5rem;
  }
}

@media (max-width: 768px) {
  .insights-cta {
    padding: 40px 22px;
    border-radius: 0;
  }
}

/* ============================================================
   BLOG DETAILS PAGE
   ============================================================ */
.article-hero {
  position: relative;
  padding: 130px 24px var(--article-gap);
  background: linear-gradient(135deg, var(--ink-deep) 0%, #1e3355 100%);
  text-align: center;
  overflow: hidden;
}

.article-hero::after {
  content: '';
  position: absolute;
  top: -35%;
  right: -8%;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(201, 169, 110, 0.14), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.article-hero-inner {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  z-index: 1;
}

.article-category {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-light);
  border: 1px solid rgba(201, 169, 110, 0.45);
  border-radius: 30px;
  padding: 5px 18px;
  margin-bottom: 22px;
}

.article-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--cream);
  margin-bottom: 20px;
}

.article-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 249, 240, 0.62);
}

.article-meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold);
  display: inline-block;
}

/* ---- Body layout ---- */
.article-section {
  padding-top: 0;
  background: var(--cream);
}

.article-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

.article-back {
  display: inline-block;
  margin: var(--article-gap) 0;
  font-size: 0.85rem;
  color: var(--ink-deep);
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: color 0.3s var(--ease-smooth);
}

.article-back:hover {
  color: var(--gold);
}

.article-feature-image {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: var(--article-gap);
  box-shadow: var(--shadow-soft);
}

.article-feature-image img {
  width: 100%;
  height: 410px;
  object-fit: cover;
}

.article-figcaption {
  font-size: 0.74rem;
  font-style: italic;
  color: var(--text-muted);
  text-align: center;
  margin-top: 14px;
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 58px;
  align-items: start;
  padding-bottom: var(--article-gap);
}

/* ---- Prose ---- */
.article-body {
  font-size: 1.02rem;
  line-height: 1.9;
  color: var(--text-secondary);
}

.article-body>p {
  margin-bottom: 24px;
}

.article-body .lead {
  font-size: 1.16rem;
  line-height: 1.8;
  color: var(--ink-deep);
  font-style: italic;
}

.article-body h2 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--ink-deep);
  margin: 20px 0 4px;
}

/* Small gold rule under each section heading */
.article-body h2::after {
  content: '';
  display: block;
  width: 34px;
  height: 1.5px;
  background: var(--gold);
  margin-top: 12px;
  margin-bottom: 20px;
}

.article-body blockquote {
  margin: 34px 0;
  padding: 6px 0 6px 26px;
  border-left: 2px solid var(--gold);
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.6;
  font-style: italic;
  color: var(--ink-deep);
}

.article-body em {
  color: var(--ink-medium);
}

/* ---- Tags + share ---- */
.article-footer {
  margin-top: var(--article-gap);
  padding-top: var(--article-gap);
  border-top: 1px solid var(--border-light);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.article-tag {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--border-light);
  border-radius: 30px;
  padding: 6px 15px;
  text-decoration: none;
  transition: all 0.3s var(--ease-smooth);
}

.article-tag:hover {
  color: var(--ink-deep);
  border-color: rgba(201, 169, 110, 0.5);
}

.article-share {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.article-share a {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-light);
  border-radius: 50%;
  color: var(--ink-medium);
  text-decoration: none;
  transition: all 0.3s var(--ease-smooth);
}

.article-share a:hover {
  color: var(--gold);
  border-color: rgba(201, 169, 110, 0.5);
  transform: translateY(-2px);
}

/* ---- Sidebar ---- */
.article-sidebar {
  position: sticky;
  top: 100px;
}

.sidebar-card {
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 26px 24px;
  margin-bottom: 24px;
}

.sidebar-heading {
  font-family: var(--font-display);
  font-size: 1.12rem;
  color: var(--ink-deep);
  margin-bottom: 6px;
}

.sidebar-heading+.section-divider {
  margin: 0 0 18px;
}

.sidebar-author {
  text-align: center;
}

.sidebar-author img {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 14px;
  border: 1px solid rgba(201, 169, 110, 0.4);
}

.sidebar-author p {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--text-muted);
}

/* Compact post list in the sidebar */
.mini-post {
  display: flex;
  gap: 13px;
  padding: 12px 0;
  text-decoration: none;
  border-top: 1px solid var(--border-light);
}

.mini-post:first-of-type {
  border-top: none;
  padding-top: 0;
}

.mini-post img {
  width: 62px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.mini-post-title {
  font-family: var(--font-display);
  font-size: 0.94rem;
  line-height: 1.35;
  color: var(--ink-deep);
  transition: color 0.3s;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mini-post:hover .mini-post-title {
  color: var(--gold);
}

.mini-post-date {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Keep the related block on the same rhythm as the rest of the article
   instead of the larger global --section-y. */
.section.related-posts {
  padding-top: var(--article-gap);
  padding-bottom: var(--article-gap);
}

/* ---- Prev / next ---- */
.article-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--article-gap) 24px 0;
  border-top: 1px solid var(--border-light);
}

.article-nav a {
  text-decoration: none;
  padding: 20px 22px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
  transition: all 0.35s var(--ease-smooth);
}

.article-nav a:hover {
  border-color: rgba(201, 169, 110, 0.4);
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}

.article-nav .is-empty {
  visibility: hidden;
}

.article-nav-label {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 7px;
}

.article-nav-title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.4;
  color: var(--ink-deep);
}

.article-nav .next {
  text-align: right;
}

@media (max-width: 960px) {
  .article-layout {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .article-sidebar {
    position: static;
  }
}

@media (max-width: 768px) {
  .article-hero {
    padding: 120px 20px var(--article-gap);
  }

  .footer-links {
    flex-wrap: wrap;
    list-style: none;
    display: flex;
    flex-direction: row;
    gap: 25px;
  }

  .article-body {
    font-size: 0.97rem;
  }

  .article-nav {
    grid-template-columns: 1fr;
  }

  .article-nav .next {
    text-align: left;
  }

  .article-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .comment-form-row {
    grid-template-columns: 1fr;
  }

  .comment-form-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .comment-submit {
    width: 100%;
  }
}

/* ---- Blog details at small phone widths ----
   The article sits inside `.section` (--section-x) AND `.article-wrap`
   (0 24px), so two padding layers stacked up at 425px and `.article-nav`
   added a third. Everything below collapses that
   to a single 16px gutter and steps down the pieces that never had a rule
   under 768px. */
@media (max-width: 425px) {
  .section.article-section,
  .section.related-posts {
    padding-left: 0;
    padding-right: 0;
  }

  .article-wrap {
    padding: 0 16px;
  }

  .related-posts .section-header,
  .related-posts .posts-grid {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Hero: the decorative 460px circle overflows a 425px box, and the
     stacked meta row needs tighter spacing than the 768px rule gives. */
  .article-hero {
    padding: 120px 16px var(--article-gap);
  }

  .article-hero::after {
    width: 280px;
    height: 280px;
    top: -18%;
    right: -22%;
  }

  .article-category {
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    padding: 5px 14px;
    margin-bottom: 18px;
  }

  .article-title {
    margin-bottom: 16px;
  }

  .article-meta {
    gap: 7px;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
  }

  /* A fixed 410px crop is nearly square on a ~290px column. */
  .article-feature-image {
    border-radius: 10px;
  }

  .article-feature-image img {
    height: 200px;
  }

  .article-layout {
    gap: 32px;
  }

  .article-body h2 {
    font-size: 1.35rem;
    margin-top: 34px;
  }

  .article-body blockquote {
    margin: 26px 0;
    padding-left: 18px;
    font-size: 1.12rem;
  }

  /* Prev/next: drop the third padding layer, keep the top rule aligned
     with the body gutter. */
  .article-nav {
    padding-left: 16px;
    padding-right: 16px;
    gap: 14px;
  }

  .article-nav a {
    padding: 16px 18px;
  }

  .article-footer {
    gap: 14px;
  }

  .article-share {
    flex-wrap: wrap;
  }

  .sidebar-card {
    padding: 22px 18px;
  }

}

/* ============================================================
   COMMENTS
   ============================================================ */
.article-comments {
  /* The footer's own border already separates the share row, so a full gap on
     both sides of this rule stacked into a wide empty band. */
  margin-top: calc(var(--article-gap) / 2);
  padding-top: calc(var(--article-gap) / 2);
  border-top: 1px solid var(--border-light);
}

.comments-heading {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--ink-deep);
  margin-bottom: 6px;
}

.comments-count {
  color: var(--text-muted);
  font-size: 1.05rem;
}

.comment-list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}

#primary .yb-account .woocommerce-EditAccountForm.edit-account .woocommerce-Button.button {
  margin-top: 30px;
}

#primary .yb-account fieldset {
  padding: 20px 10px;
}

#yb-register .section-title {
  margin-top: 7px;
}

#customer_login .yb-login-panel.u-column1.col-1 .yb-auth-head .section-title {
  margin-top: 7px;
}

.comment-item {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border-light);
}

.comment-item:first-child {
  padding-top: 0;
}

.comment-avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--parchment-deep);
  color: var(--ink-medium);
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Scoped to `.comment-item`, the custom list this block was drawn for.
   Unscoped, both rules also hit WordPress's own comment walker, where the
   class names mean something different: there `.comment-meta` is the <footer>
   wrapping the author block, the date and the moderation notice, so
   `display: flex` laid those three out as columns and the avatar, name, date
   and "awaiting moderation" line collapsed into each other. `.comment-author`
   is the avatar+name flex row there, not a name. */
.comment-item .comment-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.comment-item .comment-author {
  font-weight: 600;
  color: var(--ink-deep);
}

/* Scoped to the custom comment list: WooCommerce reuses the bare .comment-text
   class for product reviews, where pre-wrap turns the template's source
   indentation into blank lines. */
.comment-item .comment-text {
  color: var(--text-secondary);
  line-height: 1.75;
  white-space: pre-wrap;
}

.comment-empty {
  margin-top: 22px;
  font-style: italic;
  color: var(--text-muted);
}

.comment-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.comment-pagination[hidden] {
  display: none;
}

.comment-page-numbers {
  display: flex;
  gap: 6px;
}

.comment-page-btn,
.comment-page-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--btn-icon-size);
  min-height: var(--btn-icon-size);
  padding: 0 12px;
  box-sizing: border-box;
  line-height: var(--btn-line);
  border: var(--btn-border) solid var(--border-light);
  /* Bordered boxes, so they take the shared radius. (The main `.page-number`
     pager is a different, borderless treatment and keeps its own.) */
  border-radius: var(--btn-radius);
  background: var(--card-bg);
  color: var(--ink-medium);
  font-family: inherit;
  font-size: var(--btn-font-sm);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.comment-page-btn:hover:not(:disabled),
.comment-page-num:hover:not(.is-active) {
  background: var(--parchment-deep);
  color: var(--ink-deep);
}

.comment-page-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.comment-page-num.is-active {
  background: var(--ink-deep);
  border-color: var(--ink-deep);
  color: var(--parchment, #fff);
  font-weight: 600;
}

.comment-form {
  margin-top: 36px;
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.comment-form-heading {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink-deep);
}

.comment-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.comment-form textarea {
  resize: vertical;
  font-family: var(--font-serif);
}

.comment-form-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.comment-form .form-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
}

.comment-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  min-height: var(--btn-min-h);
  min-width: var(--btn-min-w);
  box-sizing: border-box;
  background: var(--ink-deep);
  color: var(--cream);
  border: none;
  border-radius: var(--btn-radius);
  font-family: var(--font-serif);
  font-size: var(--btn-font);
  line-height: var(--btn-line);
  letter-spacing: 0.08em;
  white-space: nowrap;
  transition: all 0.3s var(--ease-smooth);
}

.comment-submit:hover {
  background: var(--ink-medium);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(26, 39, 68, 0.22);
}

.comment-status {
  font-size: 0.84rem;
  margin: 0;
}

.comment-status.is-error {
  color: var(--dusty-rose);
}

.comment-status.is-ok {
  color: var(--ink-medium);
}

.books-grid .book-card .book-genre+p {
  min-height: 83px;
}

.section.books-section#books {
  padding-top: 30px;
}

/* Block-editor buttons. The theme ships no theme.json, so without this rule
   core's own block stylesheet applies: a 9999px pill with em-based padding
   that scales with the font size. Any button placed in page content would
   then be a different shape and height from every `.btn` beside it.

   This replaces a `.postid-57`-scoped copy of core's padding — a per-post
   patch that fixed one page and left the rest on the pill. Size comes from
   the shared tokens, so editor buttons match the contract everywhere.
   `is-style-outline` keeps its own colours; only the box is normalised. */
.wp-element-button,
.wp-block-button__link,
.wp-block-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  min-height: var(--btn-min-h);
  min-width: var(--btn-min-w);
  box-sizing: border-box;
  border-radius: var(--btn-radius);
  font-family: var(--font-serif);
  font-size: var(--btn-font);
  line-height: var(--btn-line);
  text-decoration: none;
}

.page-id-24 #yb-filter-search {
  width: 100%;
}

/* Cart action buttons previously squashed their vertical padding to 9px,
   making them shorter than identical buttons elsewhere. They use the shared
   size now; only the row's alignment is cart-specific. */

.related.products .products .product-card .product-card-actions .product-card-action.yb-quick-view,
.product-card-action.product-card-wishlist {
  opacity: 0;
}

.woocommerce-Price-amount.amount {
  font-weight: 700;
}

.woocommerce-checkout input:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus {
  box-shadow: none !important;
}

.woocommerce-cart #primary .section.page-section {
  padding-bottom: 70px;
}

.woocommerce-order-received #primary .section.page-section {
  padding-bottom: 0px;
}

/* Single post only: on narrow screens the article body and the related-posts
   grid each kept a full section pad, which stacked into a tall empty band
   above the footer. Scoped to .single-post so the shared .section classes
   keep their spacing everywhere else. */
@media (max-width: 425px) {
  .single-post .section.article-section,
  .single-post .section.related-posts {
    padding-bottom: 16px;
  }
}