/* ============================================================
   STORYLOOM — Design System
   Palette:  Parchment #F8F4EC · Terra Ember #B55B29
             Storyloom Navy #1D2A44 · Grove Green #3F4E3A
   Type:     Cormorant Garamond (display) · Libre Caslon Text (body)
             Edu SA Hand (handwritten accents)
   ============================================================ */

:root {
  --parchment: #F8F4EC;
  --parchment-2: #F3ECDE;
  --parchment-3: #EDE3CF;
  --paper: #FFFDF8;
  --ink: #1D2A44;
  --ink-soft: rgba(29, 42, 68, 0.74);
  --ink-faint: rgba(29, 42, 68, 0.52);
  --terra: rgb(181, 91, 41);
  --terra-rgb: 181, 91, 41;
  --terra-deep: rgb(150, 71, 29);
  --terra-soft: rgba(181, 91, 41, 0.12);
  --grove: #3F4E3A;
  --navy: #1D2A44;
  --navy-deep: #16203575;
  --cream-on-dark: #EFE8D8;
  --cream-soft-on-dark: rgba(239, 232, 216, 0.78);
  --hairline: rgba(29, 42, 68, 0.16);
  --hairline-strong: rgba(29, 42, 68, 0.3);
  --hairline-on-dark: rgba(239, 232, 216, 0.22);

  --font-display: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --font-body: "Libre Caslon Text", "Adobe Caslon Pro", Georgia, serif;
  --font-hand: "Edu SA Hand", "Segoe Script", cursive;

  --size-hero: clamp(2.7rem, 6.4vw, 4.8rem);
  --size-h2: clamp(2.1rem, 4.4vw, 3.3rem);
  --size-h3: clamp(1.45rem, 2.4vw, 1.9rem);
  --size-h4: 1.25rem;
  --size-body: 1.0625rem;
  --size-small: 0.9375rem;

  --container: 1180px;
  --gutter: clamp(28px, 5vw, 48px);
  --section-pad: clamp(76px, 12vh, 136px);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-quick: 220ms;
  --dur-med: 420ms;
  --dur-slow: 800ms;

  --shadow-soft: 0 2px 8px rgba(29, 42, 68, 0.05), 0 12px 32px rgba(29, 42, 68, 0.07);
  --shadow-lift: 0 4px 14px rgba(29, 42, 68, 0.08), 0 22px 48px rgba(29, 42, 68, 0.12);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.06'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   PROPRIETARY MATERIAL IMAGE PROTECTION
   ============================================================ */
img {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

html {
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.78;
  color: var(--ink);
  background-color: var(--parchment);
  overflow-x: hidden;
  overflow-x: clip;
}

/* Paper-noise texture — applied to alternating sections only, never
   two in a row, so the texture reads as deliberate variety. */
.grain {
  background-image: var(--grain);
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

::selection {
  background: rgba(181, 91, 41, 0.22);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0.005em;
  color: var(--ink);
  text-wrap: balance;
  /* Cormorant Garamond ships old-style figures by default, which sit below the
     baseline at varying heights — "10 Thoughtful…" and "2026" read as smudges
     at heading sizes. The face also carries lining figures; use those. */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

/* Same face, same problem, wherever numbers matter outside a heading. */
.toc a,
.price-card .price,
.price-card .was-amount,
.arc-card-caption,
.menu-link .no,
.week,
.stat .num,
.post-meta,
.article-hero .post-meta {
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

h1 {
  font-size: var(--size-hero);
}

h2 {
  font-size: var(--size-h2);
}

h3 {
  font-size: var(--size-h3);
}

h4 {
  font-size: var(--size-h4);
}

h1 b,
h1 strong,
h2 b,
h2 strong,
h3 b,
h3 strong,
h4 b,
h4 strong {
  font-family: inherit;
}

em,
.accent-italic {
  font-style: italic;
}

/* <i> is included so headlines saved before the editor normalised its accent to
   <em> still get the terracotta, without needing to be re-saved one by one. */
h1 em,
h2 em,
h3 em,
h1 i,
h2 i,
h3 i {
  color: var(--terra);
  font-style: italic;
  font-weight: 500;
}

:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 300;
  background: var(--navy);
  color: var(--cream-on-dark);
  padding: 10px 18px;
  border-radius: 2px;
  font-size: 0.9rem;
}

.skip-link:focus {
  left: 12px;
}

/* ---------- Layout ---------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container-narrow {
  max-width: 820px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-pad);
  position: relative;
}

.section-tint {
  background-color: var(--parchment-2);
}

.section-dark {
  background-color: var(--navy);
  color: var(--cream-on-dark);
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4 {
  color: var(--cream-on-dark);
}

.section-dark h2 em {
  color: #D98A5A;
}

.section-dark p {
  color: var(--cream-soft-on-dark);
}

/* ---------- Breakpoint utilities ----------
   For content that has a separate mobile wording (headings, mainly). The
   breakpoint matches the hero's mobile/desktop split. */
.only-mobile {
  display: none;
}

@media (max-width: 767px) {
  .only-desktop {
    display: none;
  }

  .only-mobile {
    display: block;
  }
}

/* ---------- Eyebrow / section headers ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--terra-deep);
  margin-bottom: 22px;
}

.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--terra);
  flex: none;
}

.eyebrow-center {
  justify-content: center;
}

.eyebrow-center::after {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--terra);
  flex: none;
}

.hero-eyebrow-center {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgb(181, 91, 41);
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.hero-eyebrow-center::before,
.hero-eyebrow-center::after {
  content: "";
  display: inline-block;
  width: 36px;
  height: 1px;
  background-color: rgb(181, 91, 41);
  opacity: 0.85;
}

/* On narrow screens the two 34px rules plus the 14px gaps ate enough width to
   split four-word eyebrows mid-phrase ("The trouble with / gifts"). Shrinking
   the rules and easing the tracking keeps them on one line; where a break is
   actually wanted, the admin puts a <br> in the field. */
@media (max-width: 767px) {
  .eyebrow {
    gap: 10px;
    letter-spacing: 0.22em;
  }

  .eyebrow::before,
  .eyebrow-center::after {
    width: 20px;
  }
}

.section-dark .eyebrow {
  color: #D98A5A;
}

.section-dark .eyebrow::before,
.section-dark .eyebrow::after {
  background: #D98A5A;
}

.section-head {
  max-width: 720px;
  margin-bottom: clamp(40px, 6vh, 64px);
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
}

.section-head p.lede {
  margin-top: 20px;
  font-size: 1.1rem;
  color: var(--ink-soft);
}

.section-dark .section-head p.lede {
  color: var(--cream-soft-on-dark);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 16px 30px 15px;
  border-radius: 2px;
  cursor: pointer;
  transition: transform var(--dur-quick) var(--ease-out),
    background-color var(--dur-quick) var(--ease-out),
    color var(--dur-quick) var(--ease-out),
    border-color var(--dur-quick) var(--ease-out),
    box-shadow var(--dur-quick) var(--ease-out);
  touch-action: manipulation;
  min-height: 48px;
}

.btn svg {
  width: 17px;
  height: 17px;
  flex: none;
  transition: transform var(--dur-quick) var(--ease-out);
}

.btn:hover svg {
  transform: translateX(4px);
}

.btn-primary {
  background: var(--terra-deep);
  color: #FFF6EC;
  box-shadow: 0 10px 24px rgba(181, 91, 41, 0.28);
}

.btn-primary:hover {
  background: var(--terra-deep);
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(150, 71, 29, 0.32);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-ghost {
  border: 1px solid var(--hairline-strong);
  color: var(--ink);
  background: transparent;
}

.btn-ghost:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--parchment);
  transform: translateY(-2px);
}

.btn-light {
  background: var(--parchment);
  color: var(--navy);
}

.btn-light:hover {
  background: #fff;
  transform: translateY(-2px);
}

.btn-ghost-light {
  border: 1px solid var(--hairline-on-dark);
  color: var(--cream-on-dark);
}

.btn-ghost-light:hover {
  background: var(--cream-on-dark);
  color: var(--navy);
  border-color: var(--cream-on-dark);
  transform: translateY(-2px);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terra-deep);
  border-bottom: 1px solid rgba(150, 71, 29, 0.35);
  padding-bottom: 3px;
  transition: border-color var(--dur-quick), color var(--dur-quick);
}

.text-link svg {
  width: 15px;
  height: 15px;
  transition: transform var(--dur-quick) var(--ease-out);
}

.text-link:hover {
  color: var(--terra);
  border-color: var(--terra);
}

.text-link:hover svg {
  transform: translateX(4px);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 120;
  background: rgba(248, 244, 236, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-quick), box-shadow var(--dur-quick), top var(--dur-quick);
}

/* ============================================================
   PROMOTIONAL TOP BAR
   ============================================================ */
.promo-bar {
  position: relative;
  z-index: 130;
  padding: 9px 0;
  font-family: var(--font-body);
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  text-align: center;
  line-height: 1.4;
  transition: transform 0.35s var(--ease-out), opacity 0.35s var(--ease-out);
}

.promo-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  position: relative;
}

.promo-bar-link {
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.2s;
}

.promo-bar-link:hover {
  opacity: 0.85;
  text-decoration: underline;
}

.promo-bar-text {
  font-weight: 600;
}

/* Adjust header stacking when promo bar is present */
.has-promo-bar .site-header {
  position: sticky;
  top: 0;
}

/* How much vertical space the promo bar is eating. Sections that size
   themselves against the viewport subtract this so nothing gets pushed
   below the fold when the bar is switched on. JS overwrites it with the
   measured height; these are the no-JS fallbacks. */
.has-promo-bar {
  --promo-h: 38px;
}

@media (max-width: 767px) {
  .has-promo-bar {
    --promo-h: 52px;
  }
}

.site-header.is-scrolled {
  border-bottom-color: var(--hairline);
  box-shadow: 0 4px 24px rgba(29, 42, 68, 0.06);
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 84px;
  transition: height var(--dur-quick) var(--ease-out);
}

.site-header.is-scrolled .nav-bar {
  height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  flex: none;
}

.brand img.emblem {
  width: 46px;
  height: 46px;
  transition: width var(--dur-quick), height var(--dur-quick);
}

.site-header.is-scrolled .brand img.emblem {
  width: 38px;
  height: 38px;
}

.brand img.wordmark {
  width: 158px;
  height: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
}

.nav-links a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  padding: 8px 2px;
  position: relative;
  white-space: nowrap;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 2px;
  height: 1px;
  background: var(--terra);
  transition: right var(--dur-quick) var(--ease-out);
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--ink);
}

.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after {
  right: 0;
}

.nav-cta {
  flex: none;
}

.nav-cta .btn {
  padding: 12px 22px 11px;
  font-size: 0.88rem;
  min-height: 44px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 48px;
  height: 48px;
  padding: 12px;
  flex: none;
}

.nav-toggle span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--ink);
  transition: transform var(--dur-quick) var(--ease-out), opacity var(--dur-quick);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  inset: 0;
  /* Above the promo bar (130) and the header (120). At 110 both painted on top
     of this full-screen overlay: the promo bar covered the close button and
     clipped the first menu link, so with the bar switched on the menu opened
     with no visible way out. Nothing should sit over a takeover menu. */
  z-index: 140;
  background: var(--parchment);
  background-image: var(--grain);
  display: flex;
  flex-direction: column;
  /* flex-start + auto margins below, not justify-content:center: centring a
     flex column clips the overflow at the *top* on short screens, putting the
     first links out of reach. Auto margins centre when there's room and simply
     stop when there isn't. */
  justify-content: flex-start;
  padding: 100px var(--gutter) 48px;
  /* Long menus scroll inside the overlay rather than dragging the page. */
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med);
}

.mobile-menu nav {
  margin-top: auto;
}

.mobile-menu .menu-cta {
  margin-bottom: auto;
}

/* Pinned to the viewport, not to the overlay's scrollable content, so it holds
   its place while the menu scrolls. */
.menu-close {
  position: fixed;
  top: 14px;
  right: max(12px, calc(var(--gutter) - 12px));
  z-index: 2;
  width: 48px;
  height: 48px;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.mobile-menu.is-open .menu-close {
  display: flex;
}

.menu-close svg {
  width: 26px;
  height: 26px;
}

/* One close control at a time: the header's hamburger steps aside for it. */
body.menu-open .nav-toggle {
  visibility: hidden;
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.mobile-menu nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-menu a.menu-link {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 7vw, 2.6rem);
  font-weight: 600;
  color: var(--ink);
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}

.mobile-menu.is-open a.menu-link {
  opacity: 1;
  transform: none;
}

.mobile-menu a.menu-link span.no {
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: var(--terra-deep);
  font-weight: 700;
}

.mobile-menu .menu-cta {
  margin-top: 36px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-med) var(--ease-out) 0.28s, transform var(--dur-med) var(--ease-out) 0.28s;
}

.mobile-menu.is-open .menu-cta {
  opacity: 1;
  transform: none;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: clip;
  background-color: var(--parchment);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
  padding-block: clamp(56px, 9vh, 100px);
  min-height: min(85vh, 820px);
}

.hero-copy .eyebrow {
  margin-bottom: 26px;
}

.hero-copy h1 {
  font-size: clamp(2.6rem, 5.2vw, 4.4rem);
  font-weight: 500;
  line-height: 1.14;
  margin-bottom: 26px;
  color: var(--ink);
}

.hero-copy h1 em {
  font-style: italic;
  color: var(--terra);
  font-weight: 500;
}

.hero-copy .sub {
  font-size: clamp(1.06rem, 1.5vw, 1.2rem);
  color: var(--ink-soft);
  /* Wider measure so the standfirst fits more words per line before wrapping. */
  max-width: 62em;
  margin-bottom: 36px;
  line-height: 1.72;
}

.hero-note {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.hero-note .stars {
  display: inline-flex;
  gap: 3px;
  color: var(--terra);
}

.hero-note .stars svg {
  width: 16px;
  height: 16px;
}

/* ============================================================
   HERO ARC CAROUSEL — Rotating Image Frame Arc
   ============================================================ */
.hero-arc-carousel {
  padding-block: clamp(36px, 5vh, 64px) clamp(56px, 8vh, 90px);
  overflow: hidden;
  position: relative;
}

.hero-arc-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 4vh, 48px);
}

.arc-carousel-stage {
  position: relative;
  width: 100%;
  max-width: 1100px;
  height: clamp(300px, 42vh, 420px);
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1200px;
  user-select: none;
}

.arc-track {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.arc-card {
  position: absolute;
  width: clamp(200px, 22vw, 280px);
  aspect-ratio: 4 / 5;
  transition: transform 0.55s cubic-bezier(0.25, 1, 0.35, 1),
    opacity 0.55s cubic-bezier(0.25, 1, 0.35, 1),
    box-shadow 0.55s cubic-bezier(0.25, 1, 0.35, 1),
    filter 0.55s cubic-bezier(0.25, 1, 0.35, 1);
  cursor: pointer;
  will-change: transform, opacity;
  opacity: 1;
}

.arc-card-inner {
  width: 100%;
  height: 100%;
  background: var(--paper);
  background-color: #FFFFFF;
  padding: 6px 6px 16px 6px;
  border: 1px solid var(--hairline);
  box-shadow: 0 16px 40px rgba(29, 42, 68, 0.09), 0 4px 12px rgba(29, 42, 68, 0.04);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.arc-card-inner img {
  width: 100%;
  flex: 1;
  min-height: 0;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}

.arc-card-caption {
  padding-top: 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: none;
}

.arc-card-caption strong {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.arc-card-caption span {
  font-family: var(--font-hand);
  font-size: 0.92rem;
  color: var(--terra-deep);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Card positions along arc - ALL visible cards are 100% opaque to prevent see-through bleeding */
/* Position 0 (Active Center Upright) */
.arc-card[data-pos="0"] {
  transform: translateX(0) translateY(-14px) rotate(0deg) scale(1.06);
  z-index: 10;
  opacity: 1;
  filter: none;
}

.arc-card[data-pos="0"] .arc-card-inner {
  border-color: rgba(181, 91, 41, 0.45);
  box-shadow: 0 24px 55px rgba(29, 42, 68, 0.16), 0 6px 18px rgba(29, 42, 68, 0.08);
}

/* Position -1 (Left Inner Tilt) */
.arc-card[data-pos="-1"] {
  transform: translateX(calc(-1 * clamp(140px, 18vw, 220px))) translateY(10px) rotate(-7deg) scale(0.92);
  z-index: 8;
  opacity: 1;
  filter: brightness(0.96);
}

/* Position 1 (Right Inner Tilt) */
.arc-card[data-pos="1"] {
  transform: translateX(clamp(140px, 18vw, 220px)) translateY(10px) rotate(7deg) scale(0.92);
  z-index: 8;
  opacity: 1;
  filter: brightness(0.96);
}

/* Position -2 (Left Outer Tilt) */
.arc-card[data-pos="-2"] {
  transform: translateX(calc(-1 * clamp(260px, 33vw, 410px))) translateY(42px) rotate(-14deg) scale(0.8);
  z-index: 5;
  opacity: 1;
  filter: brightness(0.91);
}

/* Position 2 (Right Outer Tilt) */
.arc-card[data-pos="2"] {
  transform: translateX(clamp(260px, 33vw, 410px)) translateY(42px) rotate(14deg) scale(0.8);
  z-index: 5;
  opacity: 1;
  filter: brightness(0.91);
}

/* Hidden Positions (Off-stage) */
.arc-card[data-pos="hidden-left"] {
  transform: translateX(calc(-1 * clamp(360px, 45vw, 540px))) translateY(80px) rotate(-20deg) scale(0.65);
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}

.arc-card[data-pos="hidden-right"] {
  transform: translateX(clamp(360px, 45vw, 540px)) translateY(80px) rotate(20deg) scale(0.65);
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}

/* Navigation Buttons */
.arc-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 15;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--hairline-strong);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(29, 42, 68, 0.1);
  transition: all 0.25s ease;
  cursor: pointer;
}

.arc-nav:hover {
  background: var(--navy);
  color: var(--parchment);
  border-color: var(--navy);
  transform: translateY(-50%) scale(1.08);
}

.arc-prev {
  left: clamp(10px, 2vw, 30px);
}

.arc-next {
  right: clamp(10px, 2vw, 30px);
}

.arc-nav svg {
  width: 20px;
  height: 20px;
}

/* Centered Copy Layout */
.hero-copy-centered {
  text-align: center;
  max-width: 1200px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-copy-centered h1 {
  margin-inline: auto;
}

.hero-copy-centered .sub {
  margin-inline: auto;
}

.btn-row-center {
  justify-content: center;
}

.hero-note-center {
  justify-content: center;
}

@keyframes stamp-drift {
  from {
    transform: translateY(0) rotate(-4deg);
  }

  to {
    transform: translateY(8px) rotate(2deg);
  }
}

/* Hero entrance.
   Driven purely by CSS: the animation starts the moment this stylesheet
   applies. It used to be gated on an .is-ready class added by main.js,
   which is deferred — that kept the hero (and therefore the LCP element)
   invisible until the script had downloaded and run, costing ~3s of LCP. */
@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.js .hero [data-hero] {
  animation: hero-rise 0.45s var(--ease-out) both;
}

.js .hero [data-hero="1"] {
  animation-delay: 0.03s;
}

.js .hero [data-hero="2"] {
  animation-delay: 0.08s;
}

.js .hero [data-hero="3"] {
  animation-delay: 0.14s;
}

.js .hero [data-hero="4"] {
  animation-delay: 0.2s;
}

.js .hero [data-hero="5"] {
  animation-delay: 0.26s;
}

.js .hero .hero-plate-wrap[data-hero] {
  animation-duration: 0.6s;
}

/* ============================================================
   MOBILE HERO — Full-bleed crossfading background slideshow
   Hidden on desktop, shown on mobile ≤ 767px
   ============================================================ */
.hero-mobile {
  display: none;
}

.hero-desktop {
  display: block;
}

@media (max-width: 767px) {
  .hero-mobile {
    display: block;
    position: relative;
    min-height: 92vh;
    /* Subtract the promo bar, otherwise turning it on pushes the CTA and the
       slide dots below the fold. --promo-h is 0 unless the bar is showing. */
    min-height: calc(92svh - var(--promo-h, 0px));
    overflow: hidden;
  }

  .hero-desktop {
    display: none !important;
  }

  .hero-arc-carousel {
    padding-block: 0;
  }

  /* Slide images — each fills the entire hero */
  .hero-mobile-slides {
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .hero-mobile-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
  }

  .hero-mobile-slide.is-active {
    opacity: 1;
  }

  .hero-mobile-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    /* Parked slightly in so the slide never shows an edge mid-transition. */
    transform: scale(1.04);
  }

  /* A slow drift inward while a slide is up — enough to feel alive, not enough
     to notice as movement. Duration comes from --hero-slide-dur, which main.js
     sets from the admin's slide speed, so the zoom always finishes exactly as
     the slide hands over. */
  .hero-mobile-slide.is-active img {
    animation: hero-slide-zoom var(--hero-slide-dur, 4s) ease-out forwards;
  }

  /* Losing .is-active would drop the animation and snap the image back to its
     parked size mid-crossfade. The outgoing slide instead holds the zoom it had
     actually reached until it has faded out, so scale and opacity move together.
     The held value is written inline by main.js from the live computed
     transform — pinning it to a fixed scale here caused the opposite jerk,
     because the animation is only part-way through when the slide hands over. */
  .hero-mobile-slide.is-leaving img {
    animation: none;
  }

  @keyframes hero-slide-zoom {
    from {
      transform: scale(1.04);
    }

    to {
      transform: scale(1.11);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-mobile-slide.is-active img,
    .hero-mobile-slide.is-leaving img {
      animation: none;
      transform: scale(1.04);
    }
  }

  /* Dark at both ends — the copy sits at the top and the button/dots at the
     bottom, so both need cover. The middle stays clear so the artwork reads. */
  .hero-mobile-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
      to bottom,
      rgba(20, 18, 12, 0.86) 0%,
      rgba(20, 18, 12, 0.60) 26%,
      rgba(20, 18, 12, 0.28) 48%,
      rgba(20, 18, 12, 0.58) 76%,
      rgba(20, 18, 12, 0.88) 100%
    );
  }

  /* Left-justified copy: headline block pinned to the top, action block to
     the bottom, artwork breathing in between. */
  .hero-mobile-copy {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 92vh;
    min-height: calc(92svh - var(--promo-h, 0px));
    padding: clamp(28px, 5vh, 44px) clamp(22px, 6vw, 36px) clamp(34px, 5vh, 52px);
  }

  .hero-mobile-top,
  .hero-mobile-bottom {
    width: 100%;
  }

  .hero-mobile-copy h1 {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 8.5vw, 3.2rem);
    font-weight: 500;
    line-height: 1.12;
    color: #FFFDF8;
    margin: 0 0 18px;
  }

  .hero-mobile-copy h1 em {
    font-style: italic;
    color: #E8A87C;
    font-weight: 500;
  }

  .hero-mobile-body {
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 3.8vw, 1.06rem);
    line-height: 1.72;
    color: rgba(255, 253, 248, 0.82);
    margin: 0 0 28px;
    max-width: 100%;
  }

  .hero-mobile-body {
    margin-bottom: 0;
  }

  .hero-mobile-btn {
    font-size: 0.95rem !important;
    padding: 14px 28px !important;
    border-radius: 8px;
  }

  /* Slide indicators — which frame of the slideshow is showing */
  .hero-mobile-dots {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
  }

  .hero-mobile-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 253, 248, 0.38);
    cursor: pointer;
    transition: width 0.35s var(--ease-out), background 0.35s var(--ease-out);
  }

  .hero-mobile-dot.is-active {
    width: 26px;
    background: #FFFDF8;
  }

  /* Keep the tap target finger-friendly without enlarging the visual dot */
  .hero-mobile-dot::before {
    content: '';
    position: absolute;
    inset: -12px;
  }

  .hero-mobile-dot {
    position: relative;
  }
}

/* Promo bar mobile adjustments */
@media (max-width: 767px) {
  .promo-bar {
    font-size: 0.8rem;
    padding: 8px 0;
  }

  .promo-bar-inner {
    padding-right: 28px;
  }

}

/* ---------- Scroll reveal (gated on .js so content survives without JS) ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--stagger, 0) * 90ms);
  will-change: opacity, transform;
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

.js [data-reveal="fade"] {
  transform: none;
}

.js [data-reveal="left"] {
  transform: translateX(-24px);
}

.js [data-reveal="right"] {
  transform: translateX(24px);
}

/* Thread divider */
.thread-divider {
  display: block;
  width: min(560px, 72%);
  margin: 0 auto;
  color: var(--terra);
  opacity: 0.85;
}

.js .thread-divider path {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  transition: stroke-dashoffset 2.2s var(--ease-in-out);
}

.thread-divider.is-visible path {
  stroke-dashoffset: 0;
}

/* ---------- Cards & plates ---------- */
.plate {
  background: var(--paper);
  padding: 10px;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}

.plate img {
  width: 100%;
}

a.plate:hover,
.plate.hoverable:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
}

/* Read-only panel, never a link: outline only, and no hover state at all, so
   nothing about it suggests it can be clicked. */
.card {
  background: transparent;
  border: 1px solid var(--hairline-strong, var(--hairline));
  padding: clamp(28px, 3.4vw, 40px);
  position: relative;
}

/* ---------- Problem strip ---------- */
.fading-gifts {
  display: grid;
  /* Narrower cards read better than three wide slabs — cap each one and
     centre the row rather than stretching to the full container. */
  grid-template-columns: repeat(3, minmax(0, 300px));
  justify-content: center;
  gap: clamp(20px, 3vw, 36px);
  margin-block: 48px;
}

.fading-gift {
  text-align: center;
  padding: 36px 20px 32px;
  border: 1px solid var(--hairline-strong, var(--hairline));
  background: transparent;
  border-radius: 2px;
}

.fading-gift .word {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
}

.fading-gift .fate {
  color: var(--ink);
  font-style: italic;
  font-size: 1rem;
}

/* The three cards used to fade out left-to-right, which read as three different
   text colours rather than as an effect. Every card now carries the same weight
   of ink. */

/* ---------- Spread showcase (weave gallery) ---------- */
.weave-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
  align-items: start;
}

.weave-gallery .plate:nth-child(1) {
  grid-column: 1 / 6;
  transform: rotate(-1deg);
}

.weave-gallery .plate:nth-child(2) {
  grid-column: 6 / 10;
  margin-top: 56px;
  transform: rotate(1.1deg);
}

.weave-gallery .plate:nth-child(3) {
  grid-column: 10 / 13;
  margin-top: 20px;
  transform: rotate(-0.6deg);
}

.weave-gallery a.plate:hover,
.weave-gallery .plate.hoverable:hover {
  transform: translateY(-6px) rotate(0deg);
}

.plate .caption {
  font-family: var(--font-hand);
  font-size: 0.98rem;
  color: var(--ink-soft);
  padding: 12px 4px 4px;
  text-align: center;
}

/* ---------- Process ---------- */
.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 36px);
  counter-reset: step;
}

.process-step {
  position: relative;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.process-step:hover {
  transform: none;
  box-shadow: none;
}

.process-step .step-no {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 3.4rem;
  line-height: 1;
  color: rgba(181, 91, 41, 0.35);
  margin-bottom: 14px;
}

.process-step h3 {
  margin-bottom: 10px;
  font-size: 1.35rem;
}

.process-step p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

/* vertical dashed divider between process columns */
.process-line {
  position: absolute;
  top: 10px;
  bottom: 10px;
  right: calc(-1 * clamp(10px, 1.25vw, 18px));
  width: 1px;
  background: repeating-linear-gradient(180deg, var(--terra) 0 6px, transparent 6px 13px);
  opacity: 0.35;
  display: none;
}

@media (min-width: 860px) {
  .process-grid .process-step:not(:last-child) .process-line {
    display: block;
  }
}

/* ---------- Transformation (before/after) ---------- */
.transform-stage {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
}

.transform-quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.35;
  padding: clamp(28px, 4vw, 44px);
  position: relative;
}

.transform-quote.before {
  color: var(--ink-faint);
  border: 1px dashed var(--hairline-strong);
  text-align: center;
}

.transform-quote.after {
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-soft);
  text-align: center;
}

.transform-quote .who {
  display: block;
  margin-top: 14px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra-deep);
}

.transform-mark {
  width: clamp(64px, 7vw, 92px);
  opacity: 0.9;
}

/* ---------- Story index (for whom) ---------- */
/* Four per row on desktop, so eight cards read as two even rows rather than
   whatever auto-fit happens to work out to at a given width. */
.story-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}

.story-card {
  /* Flex, not block: with the label hidden the whitespace text nodes between
     the spans were still generating line boxes and leaving ~87px of dead space
     under the artwork. A flex container drops whitespace-only children. */
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  transition: transform 0.4s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)), box-shadow 0.4s var(--ease-out);
}

.story-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(29, 42, 68, 0.15);
}

/* .img-wrap is a <span>. Left inline it ignores aspect-ratio and its box bottom
   lands on the text baseline, which put the absolutely-positioned caption
   partway up the card and clipped everything under the title. */
.story-card .img-wrap {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
}

.story-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Desktop resting state: a soft scrim so the title on the artwork stays
   readable. Hover deepens it to carry the extra copy that slides in. */
.story-card .card-overlay-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28, 34, 43, 0.88) 0%, rgba(28, 34, 43, 0.35) 45%, transparent 100%);
  opacity: 0.6;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.story-card:hover .card-overlay-gradient {
  opacity: 1;
}

/* The block itself is always on the card — only the secondary lines inside it
   wait for hover (see .hint-text / .explore-btn below). */
.story-card .card-hover-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 20px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
  pointer-events: none;
}

.story-card .card-hover-content .for-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.2;
}

.story-card .card-hover-content .hint-text {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.88);
  font-style: italic;
}

.story-card .card-hover-content .explore-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #E88B52;
}

/* Everything below the title animates in on hover / keyboard focus. They
   collapse to zero height at rest, so the block — anchored to the card's bottom
   edge — sits with just the title on it, and the title rides upward as the
   details expand underneath. */
.story-card .card-hover-content .hint-text,
.story-card .card-hover-content .explore-btn {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, max-height 0.4s var(--ease-out),
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), margin-top 0.4s var(--ease-out);
}

.story-card .card-hover-content .explore-btn {
  margin-top: 0;
}

.story-card:hover .card-hover-content .hint-text,
.story-card:focus-visible .card-hover-content .hint-text {
  opacity: 1;
  max-height: 3.6em;
  transform: translateY(0);
}

.story-card:hover .card-hover-content .explore-btn,
.story-card:focus-visible .card-hover-content .explore-btn {
  opacity: 1;
  max-height: 2.4em;
  margin-top: 6px;
  transform: translateY(0);
  transition-delay: 0.06s;
}

/* The title now lives on the artwork, so the duplicate label underneath is
   redundant on desktop. Touch layouts re-hide it for their own reasons. */
.story-card .story-label {
  display: none;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 4px 4px;
}

.story-card .story-label .for {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
}

.story-card .story-label .hint {
  font-size: 0.85rem;
  color: var(--ink-faint);
  font-style: italic;
  white-space: nowrap;
}

/* ---------- Testimonials (dark) ---------- */
/* ---------- Testimonial band ----------
   One thin horizontal panel: photo on the left fading into the dark
   panel, quote in the middle, vertical dots on the right. */
/* The band is the whole thing — no section padding, so there is no strip of
   dark above or below it, and the artwork runs off the left viewport edge. */
.testimonial-section {
  padding: 0;
}

.testimonial-head {
  padding-bottom: clamp(28px, 4vh, 44px);
}

.testimonial-band {
  position: relative;
  display: grid;
  /* Photo takes close to half the band; the rest is quote, with the dot rail
     taking only what it needs. */
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.6fr) auto;
  align-items: stretch;
  background: var(--ink);
  /* Square corners and no container: it spans the viewport, so the photo is
     flush to the left edge and the ink panel to the right. */
  border-radius: 0;
  overflow: hidden;
  /* Tall enough that the artwork and the quote fill it — the earlier value left
     a wide strip of bare ink under the text. */
  min-height: clamp(280px, 26vw, 380px);
}

/* Photo column */
.tb-media {
  position: relative;
  overflow: hidden;
}

.tb-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s var(--ease-out);
}

.tb-photo.is-active {
  opacity: 1;
}

/* Feathered edge so the photo dissolves into the panel */
.tb-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(29, 42, 68, 0) 18%,
    rgba(29, 42, 68, 0.4) 52%,
    rgba(29, 42, 68, 0.82) 80%,
    var(--ink) 100%
  );
}

/* Copy column */
.tb-body {
  position: relative;
  padding: clamp(30px, 3.2vw, 48px) clamp(26px, 4vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tb-quote {
  width: 34px;
  height: 25px;
  fill: #D98A5A;
  opacity: 0.85;
  margin-bottom: 16px;
  flex: none;
}

.testimonial-stage {
  position: relative;
  min-height: 150px;
}

.testimonial {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out), visibility 0s linear 0.7s;
}

.testimonial.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0.12s, 0.12s, 0.12s;
}

.testimonial blockquote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.2rem, 1.75vw, 1.65rem);
  line-height: 1.48;
  max-width: 30em;
  color: var(--cream-on-dark);
}

.testimonial cite {
  margin-top: 16px;
  font-style: normal;
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(255, 253, 248, 0.62);
}


/* Vertical dot rail */
.testimonial-dots {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding-right: clamp(16px, 2vw, 30px);
}

.testimonial-dots button {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
}

.testimonial-dots button::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.28);
  transition: background var(--dur-quick), transform var(--dur-quick);
}

.testimonial-dots button[aria-current="true"]::after {
  background: #E8A87C;
  transform: scale(1.35);
  animation: tb-dot-pulse 2.6s var(--ease-out) infinite;
}

/* Soft halo on the live dot so the rail reads as moving with the quote. */
@keyframes tb-dot-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(232, 168, 124, 0.5);
  }

  55% {
    box-shadow: 0 0 0 5px rgba(232, 168, 124, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-dots button[aria-current="true"]::after {
    animation: none;
  }
}

@media (max-width: 860px) {
  /* Stack: photo on top, copy below, dots go horizontal */
  .testimonial-band {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .tb-media {
    height: 210px;
  }

  .tb-fade {
    background: linear-gradient(
      to bottom,
      rgba(29, 42, 68, 0) 30%,
      rgba(29, 42, 68, 0.75) 76%,
      var(--ink) 100%
    );
  }

  .testimonial-stage {
    min-height: 170px;
  }

  .testimonial-dots {
    flex-direction: row;
    justify-content: center;
    padding: 0 0 26px;
  }
}

/* ---------- FAQ groups ----------
   The heading used to sit on a hairline identical to the one under every
   question, so a section title read as just another row. It now gets a terracotta
   rule above it, a much larger type size and real space between groups. */
.faq-group + .faq-group {
  margin-top: clamp(64px, 9vh, 104px);
}

.faq-group-head {
  padding-top: 20px;
  margin-bottom: 22px;
  position: relative;
  /* Clears the sticky header when jumped to from a link. */
  scroll-margin-top: 96px;
}

.faq-group-head::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 2px;
  background: var(--terra);
}

.faq-group-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.8vw, 2.15rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}

.faq-group-count {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Jump links to each section, so a long page is navigable without scrolling. */
.faq-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: clamp(40px, 6vh, 64px);
}

.faq-jump a {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 9px 20px;
  transition: color var(--dur-quick), border-color var(--dur-quick), background var(--dur-quick);
}

.faq-jump a:hover,
.faq-jump a:focus-visible {
  color: #FFFFFF;
  background: var(--terra);
  border-color: var(--terra);
}

/* ---------- Occasions marquee ---------- */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  padding-block: 8px;
}

.marquee-track {
  display: inline-flex;
  gap: 14px;
  padding-right: 14px;
  animation: marquee 46s linear infinite;
  will-change: transform;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  padding: 13px 24px;
  border: 1px solid var(--hairline);
  background: var(--paper);
  border-radius: 999px;
  color: var(--ink-soft);
  transition: border-color var(--dur-quick), color var(--dur-quick), transform var(--dur-quick);
}

a.chip:hover {
  border-color: var(--terra);
  color: var(--terra-deep);
  transform: translateY(-2px);
}

.chip svg {
  width: 14px;
  height: 14px;
  color: var(--terra);
}

/* ---------- Occasion / relationship grids ---------- */
.occasion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.occasion-card {
  padding: 30px 26px;
}

.occasion-card h3 {
  font-size: 1.35rem;
  margin-bottom: 8px;
}

.occasion-card p {
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.occasion-card .festival-tag {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grove);
  border: 1px solid rgba(63, 78, 58, 0.3);
  padding: 4px 10px;
  border-radius: 999px;
}

/* image-led occasion cards */
.occasion-card.visual {
  padding: 0;
  overflow: hidden;
}

.occasion-card.visual .oc-img {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.occasion-card.visual .oc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  transition: transform 1s var(--ease-out);
}

.occasion-card.visual:hover .oc-img img {
  transform: scale(1.05);
}

.occasion-card.visual .oc-body {
  padding: 20px 22px 24px;
}

.occasion-card.visual .oc-body h3 {
  font-size: 1.3rem;
  margin-bottom: 6px;
}

.occasion-card.visual .oc-body p {
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.occasion-card.visual .festival-tag {
  margin: 14px 0 0 22px;
  background: var(--paper);
}

/* ---------- FAQ accordion ---------- */
.faq-list {
  border-top: 1px solid var(--hairline);
}

.faq-item {
  border-bottom: 1px solid var(--hairline);
}

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  padding: 24px 4px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  color: var(--ink);
  transition: color var(--dur-quick);
}

.faq-q:hover {
  color: var(--terra-deep);
}

.faq-q .faq-icon {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  transition: transform var(--dur-med) var(--ease-out), background var(--dur-quick), border-color var(--dur-quick);
}

.faq-q .faq-icon svg {
  width: 12px;
  height: 12px;
}

.faq-item.is-open .faq-icon {
  transform: rotate(45deg);
  background: var(--terra);
  border-color: var(--terra);
  color: #fff;
}

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-med) var(--ease-out);
}

.faq-item.is-open .faq-a {
  grid-template-rows: 1fr;
}

.faq-a>div {
  overflow: hidden;
}

.faq-a p {
  padding: 0 44px 26px 4px;
  color: var(--ink-soft);
  max-width: 62em;
}

/* ---------- Final CTA ---------- */
.final-cta {
  position: relative;
  overflow: hidden;
  color: var(--cream-on-dark);
  text-align: center;
  background-color: #0F1626;
  border: none;
  margin-bottom: -1px;
}

.final-cta .bg {
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 0;
  right: 0;
  background-size: cover;
  background-position: center center;
  filter: saturate(1.1) brightness(0.85);
}

.final-cta .bg::after {
  content: "";
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 0;
  right: 0;
  background: radial-gradient(circle at 50% 45%, rgba(29, 42, 68, 0.42) 0%, rgba(15, 22, 38, 0.86) 75%, rgba(10, 15, 26, 0.96) 100%);
}

.final-cta .inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(100px, 16vh, 170px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.final-cta .eyebrow {
  color: #D98A5A;
  margin-bottom: 22px;
  font-size: 0.88rem;
  letter-spacing: 0.28em;
}

.final-cta .eyebrow::before,
.final-cta .eyebrow::after {
  background: #D98A5A;
}

.final-cta h2 {
  font-size: clamp(2.4rem, 4.8vw, 3.8rem);
  font-weight: 500;
  line-height: 1.18;
  color: #F8F4EC;
  max-width: 18em;
  margin-inline: auto;
  margin-bottom: 24px;
}

.final-cta h2 em {
  font-style: italic;
  color: #E88B52;
  font-weight: 500;
}

.final-cta p {
  max-width: 36em;
  margin: 0 auto 38px;
  color: rgba(248, 244, 236, 0.88);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.74;
}

.final-cta .btn-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.final-cta .subnote {
  margin-top: 16px;
  font-size: 0.9rem;
  color: rgba(248, 244, 236, 0.85);
  font-style: italic;
  font-family: var(--font-body);
  letter-spacing: 0.02em;
}

.final-cta .btn-ghost-light {
  border: 1px solid rgba(248, 244, 236, 0.3);
  color: #F8F4EC;
  background: rgba(248, 244, 236, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

.final-cta .btn-ghost-light:hover {
  background: #F8F4EC;
  color: var(--navy);
  border-color: #F8F4EC;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

/* ---------- Library / book reader ---------- */
.book-feature {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.book-feature.flip {
  direction: rtl;
}

.book-feature.flip>* {
  direction: ltr;
}

.book-meta .book-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 22px;
}

.book-tag {
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 5px 12px;
}

.book-meta p.synopsis {
  color: var(--ink-soft);
  margin-bottom: 28px;
}

.reader-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 40px);
  background: rgba(18, 25, 43, 0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med);
}

.reader-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.reader-dialog {
  width: min(1020px, 100%);
  background: var(--parchment);
  background-image: var(--grain);
  border: 1px solid rgba(248, 244, 236, 0.2);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.5);
  transform: translateY(24px) scale(0.98);
  transition: transform var(--dur-med) var(--ease-out);
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 32px);
}

.reader-modal.is-open .reader-dialog {
  transform: none;
}

.reader-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--hairline);
}

.reader-top .reader-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
}

.reader-close {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  transition: background var(--dur-quick), color var(--dur-quick), transform var(--dur-quick);
}

.reader-close:hover {
  background: var(--navy);
  color: var(--parchment);
  transform: rotate(90deg);
}

.reader-close svg {
  width: 16px;
  height: 16px;
}

.reader-stage {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vw, 34px);
  min-height: 0;
}

/* --- The book: two static halves + a turning leaf hinged at the spine --- */
.reader-book {
  position: relative;
  /* exact aspect of the print spreads (A3 landscape), so covers
     (A4 portrait) fill one half with no cropping or bars */
  width: min(860px, 100%, 82vh);
  aspect-ratio: 1191 / 842;
  perspective: 2400px;
}

.reader-book .half {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-soft);
}

.reader-book .half-left {
  left: 0;
  border-right: 0;
}

.reader-book .half-right {
  left: 50%;
  border-left: 0;
}

.reader-book .half.empty {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.reader-book .art {
  position: absolute;
  top: 0;
  left: 0;
  /* each half shows its own half of the full spread: the image spans
     200% of the half (= the whole open book). max-width:none is vital —
     the global img reset would otherwise squeeze the spread into one page. */
  width: 200%;
  max-width: none;
  height: 100%;
  object-fit: contain;
}

.reader-book .art.side-right {
  left: -100%;
}

.reader-book .art-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reader-book::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 1.5%;
  bottom: 1.5%;
  width: 12px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(29, 42, 68, 0.07), transparent);
  pointer-events: none;
  z-index: 6;
}

.reader-book.closed-right::after,
.reader-book.closed-left::after {
  display: none;
}

.reader-book .leaf {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  transform-style: preserve-3d;
  transition: transform 0.62s cubic-bezier(0.34, 0.08, 0.24, 1);
  z-index: 5;
}

.reader-book .leaf.on-right {
  left: 50%;
  transform-origin: left center;
}

.reader-book .leaf.on-right.turn {
  transform: rotateY(-180deg);
}

.reader-book .leaf.on-left {
  left: 0;
  transform-origin: right center;
}

.reader-book .leaf.on-left.turn {
  transform: rotateY(180deg);
}

.reader-book .leaf-front,
.reader-book .leaf-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--hairline);
  box-shadow: 0 5px 14px rgba(29, 42, 68, 0.09);
}

.reader-book .leaf-back {
  transform: rotateY(180deg);
}

/* Cover / back-cover faces */
.reader-book .bookface {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--navy);
  background-image: var(--grain);
  padding: 24px;
  text-align: center;
}

.reader-book .bookface::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(239, 232, 216, 0.32);
  pointer-events: none;
}

.reader-book .bookface img {
  width: clamp(44px, 8vw, 68px);
  height: auto;
}

.reader-book .bookface .bf-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 3vw, 1.9rem);
  line-height: 1.2;
  color: #F5EFDF;
  max-width: 11em;
}

.reader-book .bookface .bf-sub {
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #D98A5A;
}

.reader-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--hairline);
}

.reader-caption {
  font-family: var(--font-hand);
  color: var(--ink-soft);
  font-size: 1rem;
  min-height: 1.4em;
}

.reader-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.reader-nav .page-ind {
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  min-width: 64px;
  text-align: center;
}

.reader-arrow {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  transition: background var(--dur-quick), color var(--dur-quick), transform var(--dur-quick), opacity var(--dur-quick);
}

.reader-arrow:hover:not(:disabled) {
  background: var(--terra);
  border-color: var(--terra);
  color: #fff;
  transform: translateY(-2px);
}

.reader-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.reader-arrow svg {
  width: 17px;
  height: 17px;
}

/* ---------- Timeline (how it works) ---------- */
.timeline {
  position: relative;
  padding-left: 44px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, var(--terra) 0%, var(--hairline-strong) 100%);
}

.timeline-item {
  position: relative;
  padding-bottom: clamp(36px, 5vh, 56px);
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -39px;
  top: 9px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--parchment);
  border: 2px solid var(--terra);
}

.timeline-item .week {
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--terra-deep);
  margin-bottom: 8px;
  display: block;
}

.timeline-item h3 {
  margin-bottom: 10px;
}

.timeline-item p {
  color: var(--ink-soft);
  max-width: 56em;
}

/* ---------- Pricing ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 32px);
  align-items: stretch;
}

.price-card {
  display: flex;
  flex-direction: column;
}

.price-card.featured {
  border-color: var(--terra);
  box-shadow: var(--shadow-lift);
}

/* Only the popular tier carries a badge now. The others get a spacer of the
   same height so every tier's name still sits on the same line — without it the
   highlighted card's heading dropped below its neighbours'. */
.price-card .tier-tag,
.price-card:not(.featured)::before {
  display: block;
  min-height: 27px;
  margin-bottom: 16px;
}

.price-card:not(.featured)::before {
  content: "";
}

.price-card .tier-tag {
  align-self: flex-start;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--terra-deep);
  background: var(--terra);
  color: #FFF6EC;
  padding: 5px 12px;
  border-radius: 999px;
}

.price-card h3 {
  margin-bottom: 6px;
}

/* "Was" row sits under the amount charged: struck-through original on the left,
   saving badge beside it. Rendered only when a compare price is set. */
.price-card .price-was {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 0;
}

.price-card .was-amount {
  font-family: var(--font-display);
  font-size: 1.12rem;
  color: var(--ink-faint);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  font-variant-numeric: tabular-nums;
}

.price-card .save-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2F6A46;
  background: rgba(47, 106, 70, 0.1);
  border: 1px solid rgba(47, 106, 70, 0.28);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.price-card .price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.1rem;
  margin: 14px 0 4px;
  font-variant-numeric: tabular-nums;
}

/* The "was" row now carries the gap down to the feature list. */
.price-card .price:has(+ .price-was) {
  margin-bottom: 0;
}

.price-card .price small {
  font-size: 0.95rem;
  color: var(--ink-faint);
  font-weight: 400;
  font-family: var(--font-body);
}

.price-card ul {
  margin: 22px 0 30px;
  display: grid;
  gap: 11px;
}

.price-card ul li {
  display: flex;
  gap: 11px;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.price-card ul li svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 5px;
  color: var(--grove);
}

.price-card .btn {
  margin-top: auto;
}

/* ---------- Forms ---------- */
.form-grid {
  display: grid;
  gap: 30px;
}

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

.field label {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.field label .req {
  color: var(--terra);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline-strong);
  border-radius: 2px;
  padding: 13px 15px;
  min-height: 48px;
  transition: border-color var(--dur-quick), box-shadow var(--dur-quick);
}

.field ::placeholder {
  color: rgba(29, 42, 68, 0.36);
  font-size: 0.9rem;
}

.field textarea {
  resize: vertical;
  min-height: 150px;
}

@media (max-width: 640px) {

  /* 16px floor prevents iOS auto-zoom on focus */
  .field input,
  .field select,
  .field textarea {
    font-size: 1rem;
  }
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--terra);
  box-shadow: 0 0 0 3px rgba(181, 91, 41, 0.14);
}

.field .helper {
  margin-top: 7px;
  font-size: 0.85rem;
  color: var(--ink-faint);
}

/* ---------- Scroll progress ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 200;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, #96471D, #B55B29 55%, #D98A5A);
  pointer-events: none;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy);
  background-image: var(--grain);
  color: var(--cream-soft-on-dark);
  padding: clamp(64px, 9vh, 100px) 0 36px;
  font-size: 0.95rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(32px, 4vw, 56px);
  padding-bottom: 52px;
  border-bottom: 1px solid var(--hairline-on-dark);
}

.footer-brand img {
  width: 120px;
  margin-bottom: 20px;
}

.footer-brand p {
  max-width: 26em;
  font-size: 0.92rem;
}

.footer-col .footer-heading {
  font-size: 0.82rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #D98A5A;
  font-family: var(--font-body);
  font-weight: 700;
  margin-bottom: 20px;
}

.footer-col ul {
  display: grid;
  gap: 11px;
}

.footer-col a {
  color: var(--cream-soft-on-dark);
  transition: color var(--dur-quick);
}

.footer-col a:hover {
  color: #fff;
}

.footer-contact li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
}

.footer-contact svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 5px;
  color: #D98A5A;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding-top: 28px;
  font-size: 0.82rem;
  color: rgba(239, 232, 216, 0.5);
}

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

.footer-bottom a:hover {
  color: #fff;
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  /* padding-block only — the .container side padding must survive */
  padding-block: clamp(64px, 10vh, 110px) clamp(40px, 6vh, 72px);
  text-align: center;
}

.page-hero h1 {
  max-width: 15em;
  margin-inline: auto;
}

.page-hero .lede {
  max-width: 44em;
  margin: 24px auto 0;
  font-size: 1.12rem;
  color: var(--ink-soft);
}

/* ---------- Stats strip ---------- */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: center;
  border-block: 1px solid var(--hairline);
  padding-block: 36px;
}

.stat .num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 2.9rem);
  color: var(--terra-deep);
}

.stat .lbl {
  font-size: 0.88rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 4px;
}

/* ---------- Prose ---------- */
.prose p+p {
  margin-top: 1.2em;
}

.prose .drop::first-letter {
  font-family: var(--font-display);
  font-size: 3.4em;
  font-weight: 600;
  color: var(--terra);
  float: left;
  line-height: 0.82;
  padding: 6px 10px 0 0;
}

.hand-note {
  font-family: var(--font-hand);
  color: var(--terra-deep);
  font-size: 1.1rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .nav-links {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-cta {
    display: none;
  }

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

@media (max-width: 859px) {
  .hero-grid {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-block: 48px 64px;
  }

  .hero-art {
    max-width: 480px;
    margin-inline: auto;
    width: 100%;
  }

  .hero-stamp {
    top: -26px;
    left: -14px;
  }

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

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

  /* ---- Relationship cards on touch devices ----
     No hover state: :hover sticks after a tap on touch and left the
     tags + "Explore Stories" permanently overlapping the artwork.
     Instead the card is static — just the image with its title always
     on it, and the duplicate label underneath removed. */
  /* .img-wrap is a <span>, so it needs display:block before aspect-ratio
     applies at all — as an inline box it just took its size from the image. */
  .story-card .img-wrap {
    display: block;
    aspect-ratio: 3 / 5;
  }

  /* Take the image out of flow too, or its own 4:5 intrinsic size wins. */
  .story-card .img-wrap > img {
    position: absolute;
    inset: 0;
  }

  .story-card:hover {
    transform: none;
    box-shadow: none;
  }

  .story-card:hover img,
  .story-card:active img {
    transform: none;
  }

  /* Title reads permanently, so the scrim is permanent too */
  .story-card .card-overlay-gradient,
  .story-card:hover .card-overlay-gradient {
    opacity: 1;
  }

  .story-card .card-hover-content,
  .story-card:hover .card-hover-content {
    opacity: 1;
    transform: none;
  }

  /* Title only — no tags, no "Explore Stories" */
  .story-card .card-hover-content .hint-text,
  .story-card .card-hover-content .explore-btn {
    display: none;
  }

  .story-card .story-label {
    display: none;
  }

  .fading-gifts {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .weave-gallery {
    grid-template-columns: 1fr 1fr;
  }

  .weave-gallery .plate:nth-child(1) {
    grid-column: 1 / 3;
  }

  .weave-gallery .plate:nth-child(2) {
    grid-column: 1 / 2;
    margin-top: 0;
  }

  .weave-gallery .plate:nth-child(3) {
    grid-column: 2 / 3;
    margin-top: 0;
  }

  .transform-stage {
    grid-template-columns: 1fr;
  }

  .transform-mark {
    margin-inline: auto;
    transform: rotate(90deg);
  }

  .book-feature,
  .book-feature.flip {
    grid-template-columns: 1fr;
    direction: ltr;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-inline: auto;
  }

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

  .stats-strip {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* Mobile-only styling for homepage hero section and introducing section */
@media (max-width: 767px) {
  /* Mobile view hero card subcaptions & hero copy subcaption */
  .arc-card-caption span {
    font-size: 0.78rem;
  }
  .arc-card-caption strong {
    font-size: 0.92rem;
  }
  .hero-copy .sub {
    font-size: 0.96rem;
  }

  .reveal-split-section {
    min-height: auto !important;
    padding: 60px 0 !important;
    background: #f0eade !important;
  }

  .reveal-split-section .reveal-right-img {
    opacity: 0.28 !important;
    filter: contrast(0.95) brightness(1.05) !important;
  }

  .reveal-split-section .reveal-container {
    padding: 0 24px !important;
  }

  .reveal-split-section .col-lg-5 {
    min-height: auto !important;
    gap: 32px !important;
  }

  .reveal-split-section .reveal-text-top h2 {
    font-size: 2.15rem !important;
    line-height: 1.2 !important;
  }

  .reveal-split-section .reveal-text-top .sub {
    font-size: 1.02rem !important;
    line-height: 1.68 !important;
    color: #1C222B !important;
    font-weight: 500 !important;
  }

  .reveal-split-section .reveal-btn-bottom {
    padding-top: 12px !important;
  }
}

@media (max-width: 640px) {
  .story-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px;
  }

  .story-card .story-label {
    padding: 10px 2px 2px;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .story-card .story-label .for {
    font-size: 1.05rem;
  }

  .story-card .story-label .hint {
    font-size: 0.78rem;
    white-space: normal;
  }

  .story-card .card-hover-content {
    padding: 14px 12px;
    gap: 4px;
  }

  .story-card .card-hover-content .for-title {
    font-size: 1.05rem;
  }

  .story-card .card-hover-content .hint-text {
    font-size: 0.78rem;
  }

  .story-card .card-hover-content .explore-btn {
    font-size: 0.72rem;
    margin-top: 2px;
  }

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

  .brand img.wordmark {
    width: 132px;
  }

  .btn {
    width: 100%;
  }

  .btn-row .btn {
    width: 100%;
  }

  .nav-cta {
    display: none;
  }
}

@media (min-width: 641px) {
  .btn {
    width: auto;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal],
  .hero [data-hero] {
    opacity: 1 !important;
    transform: none !important;
  }

  .thread-divider path {
    stroke-dashoffset: 0 !important;
  }

  .marquee-track {
    animation: none !important;
  }
}

/* ============================================================
   LOOM HERO — scroll-morph intro (index)
   Cards scatter, form a line, then a ring around the headline,
   and morph into a bottom arc as the page scrolls.
   Driven by real page scroll (sticky stage), never scroll-jacked.
   ============================================================ */
.loom-hero {
  position: relative;
  height: 240vh;
}

.loom-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: clip;
  display: grid;
  place-items: center;
}

/* background media layer — swap the <img> for a muted looping <video>
   when the final footage is ready; the treatment stays identical */
.loom-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.loom-bg img,
.loom-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  opacity: 0.09;
}

.loom-cards {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.loom-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 88px;
  height: 124px;
  opacity: 0;
  pointer-events: auto;
  will-change: transform;
}

.loom-card.intro-anim {
  transition: transform 1.15s var(--ease-out), opacity 0.8s var(--ease-out);
}

.loom-card a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.55s var(--ease-out);
}

@media (hover: hover) {
  .loom-card a:hover {
    transform: rotateY(180deg);
  }
}

.loom-card .face {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  overflow: hidden;
  backface-visibility: hidden;
  border: 1px solid rgba(29, 42, 68, 0.18);
  box-shadow: 0 6px 18px rgba(29, 42, 68, 0.18);
  background: var(--paper);
}

.loom-card .face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.loom-card .face.back {
  transform: rotateY(180deg);
  background: var(--navy);
  display: grid;
  place-items: center;
}

.loom-card .face.back img {
  width: 55%;
  height: auto;
  opacity: 0.95;
}

.loom-copy {
  position: relative;
  z-index: 5;
  text-align: center;
  padding-inline: var(--gutter);
  max-width: 720px;
  will-change: transform;
}

.loom-copy h1 {
  max-width: 12em;
  margin-inline: auto;
}

.loom-copy .eyebrow {
  margin-bottom: 22px;
}

.loom-hint {
  margin-top: 26px;
  font-size: 0.8rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: opacity 0.4s var(--ease-out);
}

.loom-hint .hint-line {
  display: block;
  width: 1px;
  height: 34px;
  margin: 14px auto 0;
  background: linear-gradient(180deg, var(--terra), transparent);
  animation: hint-drop 1.8s var(--ease-in-out) infinite;
}

@keyframes hint-drop {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }

  55% {
    transform: scaleY(1);
    transform-origin: top;
  }

  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

.loom-sub {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

.loom-sub .sub {
  font-size: clamp(1.05rem, 1.5vw, 1.18rem);
  color: var(--ink-soft);
  max-width: 34em;
  margin: 18px auto 30px;
}

.loom-sub .btn-row {
  justify-content: center;
}

.loom-sub .hero-note {
  justify-content: center;
  margin-top: 26px;
}

.loom-stage.arc-ready .loom-hint {
  opacity: 0;
}

.loom-stage.arc-ready .loom-sub {
  opacity: 1;
  transform: none;
}

/* Static fallback: no JS or reduced motion — a calm, complete hero */
html:not(.js) .loom-hero,
.loom-hero.static {
  height: auto;
}

html:not(.js) .loom-stage,
.loom-hero.static .loom-stage {
  position: relative;
  height: auto;
  min-height: 70vh;
  padding-block: clamp(64px, 12vh, 120px);
}

html:not(.js) .loom-cards {
  display: none;
}

html:not(.js) .loom-sub,
.loom-hero.static .loom-sub {
  opacity: 1;
  transform: none;
}

html:not(.js) .loom-hint,
.loom-hero.static .loom-hint {
  display: none;
}

@media (max-width: 640px) {
  .loom-hero {
    height: 200vh;
  }

  .loom-card {
    width: 84px;
    height: 118px;
  }
}

/* ============================================================
   DISPLAY STACK — fanned book cards (library)
   ============================================================ */
.display-stack-wrap {
  display: grid;
  place-items: center;
  min-height: 24rem;
  padding: clamp(10px, 2vw, 20px) 0 clamp(56px, 7vw, 84px) 0;
}

.display-stack {
  display: grid;
  grid-template-areas: "stack";
  place-items: center;
  padding-right: clamp(48px, 9vw, 128px);
}

.display-card {
  grid-area: stack;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 16px;
  width: 23.5rem;
  height: 9.5rem;
  padding: 14px;
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  background: rgba(255, 253, 248, 0.82);
  background-image: var(--grain);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-soft);
  transform: skewY(-8deg);
  /* the 120ms delay + long ease gives the hover a sense of weight */
  transition: transform 0.85s var(--ease-out) 0.12s, box-shadow 0.85s var(--ease-out) 0.12s, border-color 0.4s 0.12s;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
  isolation: isolate;
}

.display-card .dc-cover {
  flex: none;
  width: 5.2rem;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--hairline);
}

.display-card .dc-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.display-card .dc-cover.placeholder {
  background: var(--navy);
  display: grid;
  place-items: center;
}

.display-card .dc-cover.placeholder img {
  width: 46%;
  height: auto;
  object-fit: contain;
}

.display-card .dc-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding-block: 3px;
}

/* soft parchment fade on the trailing edge, like pages under pages */
.display-card::after {
  content: "";
  position: absolute;
  top: -5%;
  right: -4px;
  height: 110%;
  width: 78%;
  background: linear-gradient(to left, var(--parchment) 4%, transparent);
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.7s var(--ease-out);
  border-radius: 10px;
}

/* dim the cards resting behind */
.display-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: rgba(248, 244, 236, 0.55);
  z-index: 3;
  transition: opacity 0.7s var(--ease-out);
}

.display-card:nth-child(1) {
  transform: skewY(-8deg) translate(0, 0);
}

.display-card:nth-child(2) {
  transform: skewY(-8deg) translate(4.5rem, 2.9rem);
}

.display-card:nth-child(3) {
  transform: skewY(-8deg) translate(9rem, 5.8rem);
}

.display-card:nth-child(3)::before,
.display-card:nth-child(3)::after {
  opacity: 0;
}

/* hover lifts the card in place — never above its neighbours */
.display-card:hover {
  border-color: rgba(181, 91, 41, 0.5);
  box-shadow: var(--shadow-lift);
}

.display-card:hover::before,
.display-card:hover::after {
  opacity: 0;
}

.display-card:nth-child(1):hover {
  transform: skewY(-8deg) translate(0, -2.2rem);
}

.display-card:nth-child(2):hover {
  transform: skewY(-8deg) translate(4.5rem, 0.7rem);
}

.display-card:nth-child(3):hover {
  transform: skewY(-8deg) translate(9rem, 3.6rem);
}

.display-card .dc-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.display-card .dc-top .dc-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--terra-soft);
  flex: none;
}

.display-card .dc-top .dc-icon img {
  width: 18px;
  height: auto;
}

.display-card .dc-top .dc-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--terra-deep);
  white-space: nowrap;
}

.display-card .dc-desc {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--ink);
  white-space: nowrap;
}

.display-card .dc-meta {
  font-size: 0.82rem;
  color: var(--ink-faint);
  white-space: nowrap;
}

.library-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: clamp(56px, 9vh, 96px) clamp(32px, 5vh, 56px);
  max-width: 900px;
  margin-inline: auto;
}

.library-hero .page-hero {
  text-align: center;
  padding: 0;
  width: 100%;
}

.library-hero .page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5.8vw, 4.6rem);
  font-weight: 700;
  line-height: 1.12;
  color: var(--ink);
  margin-top: 14px;
  margin-bottom: 22px;
  letter-spacing: 0.005em;
}

.library-hero .page-hero h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--terra-deep);
}

.library-hero .page-hero .lede {
  font-family: 'Libre Caslon Text', Georgia, serif;
  font-size: clamp(1.05rem, 1.8vw, 1.22rem);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 36em;
  margin-inline: auto;
}

.library-hero .eyebrow-center {
  justify-content: center;
}

.library-hero .eyebrow-center::after {
  display: inline-block;
}

/* Badges / Quiet Lux Details */
.hero-library-badges {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-top: clamp(28px, 4vh, 40px);
  padding: 12px 24px;
  background: rgba(255, 253, 248, 0.75);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  backdrop-filter: blur(8px);
}

.hero-library-badges .hl-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-soft);
}

.hero-library-badges .hl-badge svg {
  color: var(--terra);
  flex-shrink: 0;
}

.hero-library-badges .hl-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--terra);
  opacity: 0.4;
}

@media (max-width: 640px) {
  .hero-library-badges {
    border-radius: 16px;
    padding: 12px 16px;
    gap: 8px 14px;
  }
  .hero-library-badges .hl-dot {
    display: none;
  }
}

@media (max-width: 640px) {
  .display-stack-wrap {
    min-height: 20rem;
  }

  .display-stack {
    padding-right: 0;
    transform: scale(0.82);
  }

  .display-card {
    width: 19rem;
    height: 9rem;
  }

  .display-card:nth-child(2) {
    transform: skewY(-8deg) translate(2.4rem, 2.9rem);
  }

  .display-card:nth-child(3) {
    transform: skewY(-8deg) translate(4.8rem, 5.8rem);
  }

  .display-card:nth-child(1):hover {
    transform: skewY(-8deg) translate(0, -1.6rem);
  }

  .display-card:nth-child(2):hover {
    transform: skewY(-8deg) translate(2.4rem, 1rem);
  }

  .display-card:nth-child(3):hover {
    transform: skewY(-8deg) translate(4.8rem, 4rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .loom-hint .hint-line {
    animation: none;
  }
}

/* ============================================================
   THE SHELF — interactive story cards (library)
   ============================================================ */
.shelf {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 24px);
}

.shelf-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  height: clamp(300px, 30vw, 400px);
  padding: 1.2rem 1rem;
  text-align: center;
  color: #F5EFDF;
  border-radius: 4px;
  box-shadow: var(--shadow-soft);
  --d: 700ms;
  --e: cubic-bezier(0.19, 1, 0.22, 1);
}

.shelf-card .sc-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 110%;
  background-size: cover;
  background-position: center;
  transition: transform calc(var(--d) * 1.5) var(--e);
  pointer-events: none;
}

.shelf-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
  pointer-events: none;
  background-image: linear-gradient(to bottom,
      hsla(222, 40%, 10%, 0) 0%, hsla(222, 40%, 10%, 0.04) 22%,
      hsla(222, 40%, 10%, 0.2) 45%, hsla(222, 40%, 10%, 0.48) 62%,
      hsla(222, 40%, 10%, 0.7) 78%, hsla(222, 40%, 10%, 0.84) 100%);
  transform: translateY(-50%);
  transition: transform calc(var(--d) * 2) var(--e);
}

.shelf-card .content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  transition: transform var(--d) var(--e);
}

.shelf-card .sc-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1.15;
}

.shelf-card .sc-copy {
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.45;
  color: rgba(245, 239, 223, .92);
  max-width: 26ch;
}

.shelf-card .sc-tag {
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #EDB58C;
  border: 1px solid rgba(237, 181, 140, .5);
  padding: 4px 12px;
  border-radius: 999px;
}

/* On a pointer device the cover is the whole attraction, so at rest the card is
   nothing but the artwork — no copy, no scrim. Hover brings the dark scrim up
   from below and the copy in with it, so the text always lands on a background
   dark enough to read against.
   Touch devices keep the base state above (scrim + copy always visible), since
   there is no hover there to reveal anything. */
@media (hover: hover) and (min-width: 600px) {
  .shelf-card::after {
    /* Scrim parked below the card: invisible until hover pulls it up. */
    transform: translateY(0);
  }

  .shelf-card .content {
    opacity: 0;
    transform: translateY(0.9rem);
    transition: transform var(--d) var(--e), opacity calc(var(--d) * 0.7) var(--e);
  }

  .shelf-card:hover::after,
  .shelf-card:focus-within::after {
    transform: translateY(-50%);
  }

  .shelf-card:hover .sc-bg,
  .shelf-card:focus-within .sc-bg {
    transform: translateY(-4%);
  }

  .shelf-card:hover .content,
  .shelf-card:focus-within .content {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(var(--d) / 6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .shelf-card .sc-bg,
  .shelf-card::after,
  .shelf-card .content {
    transition-duration: 1ms;
  }
}

@media (max-width: 859px) {
  .shelf {
    grid-template-columns: 1fr 1fr;
  }

  .shelf-card {
    height: 300px;
  }
}

@media (max-width: 560px) {
  .shelf {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   JOURNAL / BLOG STYLES (journal.html)
   ============================================================ */
.journal-hero {
  padding-block: clamp(64px, 10vh, 110px) clamp(32px, 5vh, 60px);
  text-align: center;
}

.journal-hero h1 {
  max-width: 15em;
  margin-inline: auto;
}

.journal-hero .lede {
  max-width: 44em;
  margin: 20px auto 36px;
  font-size: 1.12rem;
  color: var(--ink-soft);
}

/* Category Filter Pills */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 28px;
}

.filter-pill {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 8px 20px;
  cursor: pointer;
  transition: all var(--dur-quick) var(--ease-out);
}

.filter-pill:hover,
.filter-pill[aria-pressed="true"] {
  background: var(--terra);
  border-color: var(--terra);
  color: #FFFFFF;
}

/* Featured Post Card */
.featured-post {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-quick), box-shadow var(--dur-quick);
}

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

.featured-post .fp-media {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 280px;
  overflow: hidden;
  background: #F3EFEA;
}

.featured-post .fp-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.featured-post:hover .fp-media img {
  transform: scale(1.03);
}

.featured-post .fp-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #FFF;
  background: var(--terra);
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 700;
}

.featured-post .fp-copy {
  padding: clamp(24px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra);
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.4;
}

.post-meta .cat {
  color: var(--terra);
  font-weight: 700;
}

.post-meta .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--terra);
  display: inline-block;
  flex-shrink: 0;
  opacity: 0.6;
}

.post-meta .read-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-faint);
  font-weight: 500;
  white-space: nowrap;
}

.post-meta .read-time svg {
  width: 13px;
  height: 13px;
}

.featured-post h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: 14px;
  color: var(--ink);
}

.featured-post h2 em {
  font-style: italic;
  color: var(--terra);
  font-weight: 500;
}

.featured-post .fp-excerpt {
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.65;
  margin-bottom: 24px;
}

.featured-post .text-link {
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--terra);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.featured-post .text-link svg {
  width: 15px;
  height: 15px;
  transition: transform var(--dur-quick);
}

.featured-post:hover .text-link svg {
  transform: translateX(4px);
}

/* The featured article and the grid are one block of content, so they share a
   section and a single rhythm instead of two full section paddings stacked into
   a ~200px void between them. */
.journal-body {
  padding-top: clamp(16px, 2vh, 28px);
}

.journal-body .featured-post {
  margin-bottom: clamp(36px, 5vh, 64px);
}

.journal-pagination {
  margin-top: clamp(36px, 5vh, 56px);
  display: flex;
  justify-content: center;
}

/* Post Cards Grid */
.post-grid {
  display: grid;
  /* Tracks capped rather than stretched, and centred, so two or four articles
     don't leave a lopsided hole where the third column would be. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
  justify-content: center;
  gap: clamp(20px, 2.6vw, 32px);
}

.post-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: transform var(--dur-quick), box-shadow var(--dur-quick);
  height: 100%;
}

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

.post-card .pc-media {
  position: relative;
  width: 100%;
  padding-top: 65%;
  overflow: hidden;
  background: #F3EFEA;
}

.post-card .pc-media img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.post-card:hover .pc-media img {
  transform: scale(1.04);
}

.post-card .pc-body {
  padding: 24px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.post-card h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.28;
  margin-bottom: 10px;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card .pc-excerpt {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card .pc-more {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terra);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
}

.post-card .pc-more svg {
  width: 14px;
  height: 14px;
  transition: transform var(--dur-quick);
}

.post-card:hover .pc-more svg {
  transform: translateX(4px);
}

/* Filter Counter */
.filter-count {
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;
}

/* Empty until a topic is picked — don't reserve a line for it. */
.filter-count:empty {
  display: none;
}

#filter-count:not(:empty) {
  margin-bottom: 22px;
}

/* Newsletter Band */
.newsletter-band {
  text-align: center;
  padding-block: clamp(28px, 4vh, 48px);
}

.newsletter-band h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 500;
  color: #F8F4EC;
  margin-bottom: 10px;
}

.newsletter-band h2 em {
  font-style: italic;
  color: #E88B52;
}

.newsletter-band p {
  color: rgba(248, 244, 236, 0.82);
  font-size: 0.98rem;
  line-height: 1.55;
  max-width: 44ch;
  margin: 0 auto 20px;
}

.newsletter-form {
  display: flex;
  align-items: stretch;
  gap: 10px;
  max-width: 520px;
  margin: 0 auto 12px;
}

.newsletter-form input {
  flex: 1;
  height: 46px;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 4px;
  border: 1px solid rgba(248, 244, 236, 0.3);
  background: rgba(248, 244, 236, 0.08);
  color: #FFF;
  font-family: var(--font-body);
  font-size: 0.95rem;
  box-sizing: border-box;
}

.newsletter-form input::placeholder {
  color: rgba(248, 244, 236, 0.5);
}

.newsletter-form input:focus {
  outline: none;
  border-color: #E88B52;
  background: rgba(248, 244, 236, 0.12);
}

.newsletter-form .btn {
  height: 46px;
  min-height: 46px;
  padding: 0 22px;
  white-space: nowrap !important;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  box-sizing: border-box;
  margin: 0;
}

.newsletter-form .btn svg {
  flex-shrink: 0;
}

.newsletter-note {
  font-size: 0.78rem;
  color: rgba(248, 244, 236, 0.5);
  margin-top: 8px;
}

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

  .post-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

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

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

/* ============================================================
   ARTICLE DETAIL STYLES (journal-dont-get-me-anything.html)
   ============================================================ */
.article-hero {
  padding-block: clamp(48px, 8vh, 80px) clamp(20px, 3vh, 36px);
  text-align: center;
}

.article-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
  max-width: 18em;
  margin: 12px auto 16px;
}

.article-hero h1 em {
  font-style: italic;
  color: var(--terra);
  font-weight: 500;
}

.article-hero .dek {
  font-size: 1.18rem;
  color: var(--ink-soft);
  max-width: 32em;
  margin: 0 auto 20px;
  line-height: 1.6;
}

.article-hero .post-meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #7B8A9C;
  font-weight: 400;
  margin: 16px auto 0;
  text-align: center;
}

.article-hero .post-meta .cat {
  color: var(--terra);
  font-weight: 700;
}

.article-hero .post-meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #B4BEC9;
  display: inline-block;
}

.article-hero .post-meta .read-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #7B8A9C;
  font-weight: 400;
}

.article-hero .post-meta .read-time svg {
  width: 13px;
  height: 13px;
  color: #7B8A9C;
}

.article-figure {
  max-width: 960px;
  margin: 0 auto clamp(32px, 5vh, 56px);
  border-radius: 6px;
  overflow: hidden;
}

.article-figure img {
  width: 100%;
  height: auto;
  max-height: 540px;
  object-fit: cover;
}

.article-figure figcaption {
  font-family: var(--font-hand);
  font-size: 0.95rem;
  color: var(--ink-faint);
  text-align: center;
  margin-top: 10px;
}

/* Article Layout: Body + Sidebar */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.article-body {
  font-family: 'Libre Caslon Text', Georgia, serif;
  font-size: 1.06rem;
  line-height: 1.8;
  color: rgba(28, 34, 43, 0.88);
}

/* Links in article copy were the same colour as the text around them and had no
   underline, so a reader had no way to tell one was there. Excludes the buttons
   and cards inside the body, which have their own treatment. */
.article-body p a,
.article-body li a,
.article-body blockquote a,
.article-body .takeaway a {
  color: var(--terra-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(181, 91, 41, 0.4);
  transition: text-decoration-color var(--dur-quick), color var(--dur-quick);
}

.article-body p a:hover,
.article-body li a:hover,
.article-body blockquote a:hover,
.article-body .takeaway a:hover {
  color: var(--terra);
  text-decoration-color: var(--terra);
}

.article-body .lead-in {
  font-size: 1.06rem;
  line-height: 1.8;
  color: rgba(28, 34, 43, 0.88);
  margin-bottom: 22px;
}

/* The opening paragraph's drop cap. This only ever existed in the editor's
   preview stylesheet, never here — so the published article showed a lead
   paragraph that was merely a little larger, which is why the opening and the
   rest "did not look the same". Matches the About page's treatment. */
.article-body .lead-in::first-letter {
  font-family: var(--font-display);
  float: left;
  font-size: 3.5em;
  line-height: 0.82;
  font-weight: 600;
  color: var(--terra);
  padding: 6px 12px 0 0;
}

.article-body h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  font-weight: 600;
  color: var(--ink);
  margin: 40px 0 16px;
  scroll-margin-top: 100px;
  line-height: 1.25;
  text-wrap: balance;
  text-wrap: pretty;
}

.article-body h3 {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.1vw, 1.55rem);
  font-weight: 600;
  color: var(--ink);
  margin: 32px 0 12px;
  scroll-margin-top: 100px;
  line-height: 1.28;
  letter-spacing: -0.01em;
  text-wrap: balance;
  text-wrap: pretty;
}

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

.article-body ul {
  margin: 20px 0 28px;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.article-body ul li {
  position: relative;
  padding-left: 24px;
  font-size: 1.04rem;
  line-height: 1.7;
}

.article-body ul li::before {
  content: "•";
  position: absolute;
  left: 4px;
  top: 0;
  color: var(--terra);
  font-size: 1.4rem;
  line-height: 1;
  font-weight: 700;
}

.article-body ol {
  margin: 20px 0 28px;
  padding-left: 0;
  list-style: none;
  counter-reset: article-ol-counter;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.article-body ol li {
  position: relative;
  padding-left: 28px;
  font-size: 1.04rem;
  line-height: 1.7;
  counter-increment: article-ol-counter;
}

.article-body ol li::before {
  content: counter(article-ol-counter) ".";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--terra);
  font-size: 1.05rem;
  line-height: 1.7;
  font-weight: 700;
}

.article-body strong {
  color: var(--ink);
  font-weight: 700;
}

.article-body em.said {
  font-style: italic;
  color: var(--terra-deep);
}

/* Article Figure & Images */
.article-body figure,
.article-body .article-figure {
  margin: 32px 0;
  background: var(--cream-soft, #FFFDF8);
  padding: 14px;
  border: 1px solid var(--hairline, rgba(28, 34, 43, 0.12));
  border-radius: 4px;
}

.article-body figure img,
.article-body .article-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}

.article-body figcaption {
  font-family: var(--font-hand, "Edu SA Hand", cursive);
  text-align: center;
  padding-top: 12px;
  font-size: 0.98rem;
  color: var(--ink-soft, rgba(28, 34, 43, 0.74));
}

/* Article Tables */
.article-body .table-wrap {
  overflow-x: auto;
  margin: 28px 0;
}

.article-body .article-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.article-body .article-table th,
.article-body .article-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--hairline, rgba(28, 34, 43, 0.12));
  text-align: left;
}

.article-body .article-table th {
  font-family: var(--font-display, "Cormorant Garamond", serif);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terra, #B55B29);
}

.article-body .table-caption {
  font-size: 0.85rem;
  color: var(--ink-soft, rgba(28, 34, 43, 0.65));
  margin-top: 8px;
  text-align: center;
}

/* Inline Promotional CTA */
.article-body .inline-cta {
  margin: 36px 0;
  padding: 28px;
  background: var(--cream-soft, #FFFDF8);
  border: 1px solid rgba(181, 91, 41, 0.35);
  border-radius: 4px;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}

.article-body .inline-cta .ic-cover img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--hairline, rgba(28, 34, 43, 0.12));
  border-radius: 3px;
}

.article-body .inline-cta h3 {
  font-family: var(--font-display, "Cormorant Garamond", serif);
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--ink, #1D2A44);
}

.article-body .inline-cta p {
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 14px;
  color: var(--ink-soft, rgba(28, 34, 43, 0.8));
}

/* Pull Quote */
.pull-quote {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.35;
  color: var(--terra-deep);
  border-left: 3px solid var(--terra);
  padding: 16px 0 16px 24px;
  margin: 36px 0;
}

.pull-quote cite {
  display: block;
  font-style: normal;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 10px;
  font-weight: 700;
}

/* Takeaway Box */
.takeaway {
  background: rgba(181, 91, 41, 0.06);
  border: 1px solid rgba(181, 91, 41, 0.2);
  border-radius: 8px;
  padding: 24px;
  margin: 32px 0;
}

.takeaway .tk-label {
  font-family: var(--font-body);
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terra);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.takeaway .tk-label svg {
  width: 16px;
  height: 16px;
  color: var(--terra);
}

.takeaway p {
  margin: 0;
  color: var(--ink);
}

/* Inline CTA Card */
.inline-cta {
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--paper);
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  padding: 24px;
  margin: 44px 0;
  box-shadow: var(--shadow-soft);
}

.inline-cta .ic-cover {
  flex: none;
  width: 90px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--hairline);
}

.inline-cta .ic-cover img {
  width: 100%;
  height: auto;
  display: block;
}

.inline-cta h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--ink);
}

.inline-cta p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 14px;
}

/* Share Row */
.share-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
  margin-top: 48px;
}

.share-label {
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 700;
  margin-right: 4px;
}

.share-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  background: var(--paper);
  display: grid;
  place-items: center;
  color: var(--ink);
  transition: all var(--dur-quick);
  text-decoration: none;
  cursor: pointer;
}

.share-btn:hover {
  background: var(--terra);
  border-color: var(--terra);
  color: #FFF;
  transform: translateY(-2px);
}

.share-btn svg {
  width: 17px;
  height: 17px;
}

/* Author Note */
.author-note {
  display: flex;
  gap: 20px;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 24px;
  margin-top: 36px;
}

.author-note img {
  width: 54px;
  height: 53px;
  flex: none;
}

.author-note .an-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ink);
  margin-bottom: 4px;
}

.author-note p {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}

/* Sticky Article Sidebar */
.article-aside {
  position: sticky;
  top: 100px;
  display: grid;
  gap: 28px;
}

.toc {
  position: relative;
  padding-left: 18px;
  border-left: 1px solid var(--hairline-strong);
  background: transparent;
  border-top: none;
  border-right: none;
  border-bottom: none;
  border-radius: 0;
}

.toc-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 700;
  margin-bottom: 16px;
}

.toc ul {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.toc a {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color var(--dur-quick), font-weight var(--dur-quick);
  display: block;
  line-height: 1.3;
}

.toc a:hover {
  color: var(--terra);
}

/* Sub-points (h3) sit indented and a shade quieter, so a ten-item listicle
   reads as a hierarchy rather than twelve equal-weight links. */
.toc ul li.toc-sub {
  margin-left: 14px;
}

.toc ul li.toc-sub a {
  font-size: 0.94rem;
  color: var(--ink-faint);
}

.toc ul li.toc-sub a:hover,
.toc ul li.toc-sub a.active {
  color: var(--terra);
}

/* Tighter than the h2 gap, to group each h2 with the points beneath it. */
.toc ul li.toc-sub + li.toc-sub {
  margin-top: -4px;
}

.toc a.active {
  color: var(--terra) !important;
  font-weight: 700 !important;
}

.aside-card {
  background: #FBF8F3;
  border: 1px solid #E8E3DB;
  border-radius: 6px;
  padding: 24px;
  text-align: left;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.aside-card .ac-cover {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  border: 1px solid #E2DCD2;
  margin: 0 0 22px 0;
  display: block;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.aside-card .ac-label {
  font-family: var(--font-body);
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terra);
  font-weight: 700;
  margin-bottom: 12px;
  text-align: left;
}

.aside-card h4 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.22;
  color: var(--ink);
  margin-bottom: 14px;
  text-align: left;
}

.aside-card p {
  font-family: 'Libre Caslon Text', Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(28, 34, 43, 0.78);
  margin-bottom: 24px;
  text-align: left;
}

.aside-card .btn {
  width: 100%;
  text-align: center;
  padding: 14px 20px;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(181, 91, 41, 0.25);
}

/* Related Section Grid */
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 36px);
  justify-content: center;
}

/* Dynamically center single or double cards cleanly */
.related-grid:has(> :nth-child(1):last-child) {
  grid-template-columns: minmax(auto, 380px);
}

.related-grid:has(> :nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(280px, 380px));
}

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

  .article-aside {
    position: static;
  }

  .related-grid,
  .related-grid:has(> :nth-child(1):last-child),
  .related-grid:has(> :nth-child(2):last-child) {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

  .inline-cta {
    flex-direction: column;
    text-align: center;
  }
}

/* ============================================================
   SECTION ICONS — decorative transparent illustrations
   Optional per section; nothing renders unless one is uploaded.
   Sized from a single token so every icon stays consistent.
   ============================================================ */
:root {
  --icon-size: 108px;
  --icon-size-sm: 84px;
}

.section-icon {
  display: block;
  width: var(--icon-size);
  height: var(--icon-size);
  object-fit: contain;
  margin-bottom: 16px;
}

/* Centred sections centre their icon too */
.fading-gift .section-icon {
  margin-inline: auto;
}

/* "The plan" carries the whole section, so its icons run 1.5x the token. */
.process-step .section-icon {
  width: calc(var(--icon-size) * 1.5);
  height: calc(var(--icon-size) * 1.5);
  margin-bottom: 18px;
}

.timeline-item .section-icon {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  margin-bottom: 10px;
}

@media (max-width: 767px) {
  :root {
    --icon-size: 84px;
    --icon-size-sm: 66px;
  }

  .section-icon {
    margin-bottom: 12px;
  }
}

/* ============================================================
   PAGESPEED RENDERING OPTIMIZATIONS
   ============================================================ */
/* .testimonial-stage is deliberately NOT in this list any more: it now sits
   inside .testimonial-band, whose height it drives. A 400px intrinsic
   placeholder made the band render ~250px too tall until it scrolled into
   view, then snap shorter — a visible layout jump. */
/* .faq-list is deliberately NOT in this list: the FAQ page now has anchored
   section headings, and a skipped list is only size-estimated, so jumping to a
   topic below one landed in the wrong place. */
.weave-gallery,
.story-grid,
.process-grid,
.occasion-grid,
.final-cta {
  content-visibility: auto;
  contain-intrinsic-size: 1px 400px;
}