/* =========================================================================
   TANATANA — shared stylesheet  ·  Warm DARK scheme, all sans
   Palette: near-black ground #191919; yellow #FFF05A, gold #FFD25A,
   amber #FFAA5A, coral #FF785A accents; warm off-white ink.
   Dark grounds, warm-white ink, coral/amber accents. Reskin from :root below.
   ========================================================================= */

:root {
  /* Grounds — neutral dark */
  --paper:   #191919;   /* main bg — near-black */
  --paper-2: #221f1b;   /* lifted panel */
  --paper-3: #2c2823;   /* deeper panel */

  /* Ink (light on dark) */
  --umber: #f5f0e6;   /* primary text — warm off-white */
  --soft:  #b3aa9b;   /* secondary text — warm grey */
  --line:        #2f2c28;   /* subtle border on dark */
  --line-strong: #423d36;   /* stronger border */

  /* Accents (yellow / gold / amber / coral) */
  --olive:     #221f1b;   /* feature band, footer — lifted dark */
  --olive-300: #ffd25a;   /* accent label on the bands — gold */
  --clay:      #ff785a;   /* interaction: links, arrows, eyebrows, buttons — coral */
  --clay-deep: #ffaa5a;   /* amber (hover) */
  --clay-300:  #fff05a;   /* brightest accent on dark grounds — yellow */

  /* Body · Breath · Mind tonal grounds (subtle warm darks) */
  --body-bg:   #221d16;   /* warm — grounded */
  --breath-bg: #1b1c1c;   /* cool dark — air */
  --mind-bg:   #231b1b;   /* warm-grey — depth */

  /* Type — Manrope (sans, display + body) + JetBrains Mono (labels) */
  --display: "Manrope", system-ui, -apple-system, Segoe UI, sans-serif;
  --sans:    "Manrope", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-eyebrow: 0.78rem;
  --fs-body:    clamp(1.02rem, 0.97rem + 0.25vw, 1.18rem);
  --fs-lead:    clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
  --fs-h3:      clamp(1.3rem, 1.12rem + 0.85vw, 1.8rem);
  --fs-h2:      clamp(1.85rem, 1.4rem + 2.1vw, 3rem);
  --fs-h1:      clamp(2.8rem, 1.9rem + 4.4vw, 5.6rem);

  --gap: 1.25rem;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --section: clamp(4rem, 9vw, 8rem);
  --wrap: 1240px;
  --measure: 64ch;
  --radius: 2px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.62;
  color: var(--umber);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--umber);
}
h1 { font-size: var(--fs-h1); font-weight: 400; letter-spacing: -0.028em; line-height: 1.0; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.14; }

p { max-width: var(--measure); color: var(--umber); }

::selection { background: var(--clay); color: var(--paper); }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }

/* Layout */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: var(--section); }
.lead { font-size: var(--fs-lead); line-height: 1.4; color: var(--umber); max-width: 30ch; }
.prose { max-width: var(--measure); }
.prose p { color: var(--soft); }
.prose p + p { margin-top: 1.1em; }

.eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-eyebrow); text-transform: uppercase;
  letter-spacing: 0.16em; font-weight: 600; color: var(--clay);
  display: inline-block;
}
.divider { border: 0; border-top: 1px solid var(--line); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.85em 1.6em;
  background: var(--clay); color: var(--paper);
  text-decoration: none; border: 1px solid var(--clay);
  border-radius: var(--radius); font-size: 0.9rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  transition: background .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover { background: var(--clay-deep); border-color: var(--clay-deep); }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--umber); border-color: var(--umber); }
.btn--ghost:hover { background: var(--umber); color: var(--paper); }

.link-arrow {
  display: inline-flex; align-items: baseline; gap: 0.4em;
  text-decoration: none; font-weight: 600; font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--umber);
  border-bottom: 1px solid var(--line-strong); padding-bottom: 3px;
  transition: border-color .25s var(--ease);
}
.link-arrow::after { content: "\2192"; color: var(--clay); transition: transform .25s var(--ease); }
.link-arrow:hover { border-color: var(--clay); }
.link-arrow:hover::after { transform: translateX(4px); }

/* Header / nav */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
/* Full-width header: edge to edge, only side padding (no centered wrap). */
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); padding-block: 1rem; padding-inline: var(--pad); }
.brand { text-decoration: none; line-height: 1; position: relative; z-index: 2; }
.brand-mark { display: block; font-family: var(--display); font-weight: 700; letter-spacing: 0.26em; font-size: 1.05rem; color: var(--umber); }

/* Right cluster: BOOK button + hamburger toggle */
.header-actions { display: flex; align-items: center; gap: clamp(0.6rem, 1.6vw, 1.1rem); position: relative; z-index: 2; }
.book-btn {
  font-family: var(--mono); text-decoration: none; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
  color: var(--umber); border: 1px solid var(--umber); border-radius: var(--radius);
  padding: 0.62em 1.2em; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.book-btn:hover { background: var(--clay); color: var(--paper); border-color: var(--clay); }

/* Hamburger that morphs into a cross */
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; background: none; border: 0;
}
.nav-toggle-bars { display: block; position: relative; width: 26px; height: 14px; }
.nav-toggle-bars span {
  position: absolute; left: 0; width: 100%; height: 2px; background: var(--umber);
  transition: transform .3s var(--ease), top .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { top: 6px; transform: rotate(-45deg); }

/* Full-window overlay menu */
.site-nav {
  position: fixed; inset: 0; z-index: 90;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  padding: var(--pad);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .4s var(--ease), visibility 0s linear .4s;
}
.site-nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .4s var(--ease), visibility 0s; }
.site-nav-inner { display: flex; flex-direction: column; align-items: center; gap: clamp(0.6rem, 2.4vw, 1.4rem); text-align: center; }
.site-nav a {
  text-decoration: none; font-family: var(--display); font-weight: 400; letter-spacing: -0.02em;
  font-size: clamp(2rem, 7vw, 4rem); line-height: 1; color: var(--umber);
  position: relative; opacity: 0; transform: translateY(14px);
  transition: color .2s var(--ease);
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--clay); }
/* Stagger the links in once the overlay opens */
.site-nav.is-open a { animation: navItemIn .5s var(--ease) forwards; }
.site-nav.is-open a:nth-child(1) { animation-delay: .08s; }
.site-nav.is-open a:nth-child(2) { animation-delay: .14s; }
.site-nav.is-open a:nth-child(3) { animation-delay: .20s; }
.site-nav.is-open a:nth-child(4) { animation-delay: .26s; }
.site-nav.is-open a:nth-child(5) { animation-delay: .32s; }
@keyframes navItemIn { to { opacity: 1; transform: translateY(0); } }
/* Lock background scroll while the overlay is open */
body.nav-open { overflow: hidden; }

/* Hero */
.hero { padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 7vw, 6rem); }
.hero .eyebrow { margin-bottom: 1.5rem; }
.hero-deck { font-size: var(--fs-lead); line-height: 1.4; color: var(--soft); max-width: 36ch; margin-top: 1.5rem; }
.hero-actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* Image placeholders */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,205,188,.06) 18px 19px),
    rgba(255,205,188,.05);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  display: grid; place-items: center; text-align: center;
  color: var(--soft); padding: 1.5rem; min-height: 220px; aspect-ratio: 4/3;
}
.ph span { font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; max-width: 26ch; }
.ph--tall { aspect-ratio: 3/4; }
.ph--wide { aspect-ratio: 16/9; }
.ph--portrait { aspect-ratio: 4/5; }

/* Grids */
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 820px) { .split { grid-template-columns: 1fr 1fr; } .split--media-first > :first-child { order: -1; } }

.gateways { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
@media (min-width: 760px) { .gateways { grid-template-columns: repeat(3, 1fr); } }
.gateway { padding: clamp(2rem,4vw,3.25rem) clamp(1.5rem,3vw,2.5rem); background: var(--paper); text-decoration: none; display: flex; flex-direction: column; min-height: 320px; transition: background .35s var(--ease); }
.gateway[data-body]:hover   { background: var(--body-bg); }
.gateway[data-breath]:hover { background: var(--breath-bg); }
.gateway[data-mind]:hover   { background: var(--mind-bg); }
.gateway .num { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--clay); }
.gateway h3 { margin-top: 0.75rem; }
.gateway p { color: var(--soft); margin-top: 1rem; font-size: 1rem; flex: 1; }
.gateway .link-arrow { margin-top: 1.5rem; align-self: flex-start; }

.cards { display: grid; gap: clamp(1.5rem,3vw,2.5rem); grid-template-columns: 1fr; }
@media (min-width: 680px) { .cards { grid-template-columns: 1fr 1fr; } }
.card { border: 1px solid var(--line-strong); border-radius: var(--radius); padding: clamp(1.5rem,3vw,2.25rem); background: var(--paper-2); display: flex; flex-direction: column; }
.card h3 { font-size: var(--fs-h3); }
.card p { color: var(--soft); margin-top: 0.75rem; flex: 1; }
.card .link-arrow { margin-top: 1.5rem; align-self: flex-start; }

/* Practice sub-nav */
.subnav { border-bottom: 1px solid var(--line); background: var(--paper-2); }
.subnav-inner { display: flex; flex-wrap: wrap; gap: clamp(1rem,3vw,2.5rem); padding-block: 0.9rem; align-items: center; }
.subnav .label { font-family: var(--mono); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.16em; color: var(--soft); font-weight: 600; }
.subnav a { text-decoration: none; font-size: 0.92rem; padding-block: 0.2em; border-bottom: 1px solid transparent; color: var(--umber); }
.subnav a[aria-current="page"] { border-color: var(--clay); color: var(--clay); }
.subnav a:hover { border-color: var(--clay); }

/* Lists */
.tick-list { list-style: none; padding: 0; display: grid; gap: 0.7rem; max-width: var(--measure); }
.tick-list li { position: relative; padding-left: 1.6em; color: var(--soft); }
.tick-list li::before { content: "\2014"; position: absolute; left: 0; color: var(--clay); font-weight: 700; }
.tick-list li strong { color: var(--umber); }

.practical { display: grid; gap: 0.4rem 2rem; grid-template-columns: 1fr; }
.practical dt { font-weight: 600; color: var(--umber); }
.practical dd { color: var(--soft); margin: 0 0 0.6rem; }
@media (min-width: 560px) { .practical { grid-template-columns: max-content 1fr; } .practical dd { margin-bottom: 0; } }

/* Tonal grounds */
.tone-body   { background: var(--body-bg); }
.tone-breath { background: var(--breath-bg); }
.tone-mind   { background: var(--mind-bg); }
.tone-panel  { background: var(--paper-2); }
.tone-deep   { background: var(--paper-3); }

/* Olive feature band (newsletter / CTA / footer) — the one grounding colour */
.tone-olive { background: var(--olive); color: var(--umber); }
.tone-olive h1, .tone-olive h2, .tone-olive h3 { color: var(--umber); }
.tone-olive p { color: color-mix(in srgb, var(--umber) 88%, transparent); }
.tone-olive .eyebrow { color: var(--olive-300); }
.tone-olive .btn { background: var(--clay); color: var(--paper); border-color: var(--clay); }
.tone-olive .btn:hover { background: var(--clay-deep); color: var(--paper); border-color: var(--clay-deep); }
.tone-olive .btn--ghost { background: transparent; color: var(--umber); border-color: color-mix(in srgb, var(--umber) 50%, transparent); }
.tone-olive .btn--ghost:hover { background: var(--umber); color: var(--paper); }
.tone-olive input, .tone-olive textarea { background: color-mix(in srgb, var(--umber) 10%, transparent); border-color: color-mix(in srgb, var(--umber) 40%, transparent); color: var(--umber); }
.tone-olive input::placeholder { color: color-mix(in srgb, var(--umber) 60%, transparent); }
.tone-olive .form-note { color: color-mix(in srgb, var(--umber) 75%, transparent); }

/* Forms */
.newsletter { display: grid; gap: 0.75rem; max-width: 30rem; }
.field-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Site-wide newsletter band (footer.php) — compact and centred. */
.newsletter-section { padding-block: calc(var(--section) / 2); text-align: center; }
.newsletter-section h2 { margin-inline: auto; max-width: 32ch; }
.newsletter-section .newsletter { max-width: 46rem; margin-inline: auto; }
.newsletter-section .field-row { justify-content: center; }
input[type="email"], input[type="text"], textarea {
  font: inherit; color: var(--umber);
  background: var(--paper);
  border: 1px solid var(--umber);
  border-radius: var(--radius); padding: 0.8em 1em; flex: 1 1 14rem; min-width: 0;
}
input::placeholder, textarea::placeholder { color: var(--soft); opacity: .75; }
textarea { width: 100%; min-height: 8rem; resize: vertical; }
.form-grid { display: grid; gap: 1rem; max-width: 36rem; }
label { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--umber); }
.form-note { font-size: 0.8rem; color: var(--soft); }

/* Journal */
.post-list { display: grid; gap: clamp(1.5rem,3vw,2.5rem); grid-template-columns: 1fr; }
@media (min-width: 720px) { .post-list { grid-template-columns: 1fr 1fr; } }
.post { text-decoration: none; display: flex; flex-direction: column; }
.post .ph { aspect-ratio: 3/2; margin-bottom: 1.1rem; }
.post .meta { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clay); font-weight: 600; }
.post h3 { font-size: var(--fs-h3); margin-top: 0.5rem; }
.post p { color: var(--soft); margin-top: 0.6rem; font-size: 1rem; }
.article { max-width: 70ch; margin-inline: auto; }
.article p, .article h2, .article h3 { max-width: none; }
.article h2 { font-size: var(--fs-h3); margin-top: 2.5rem; }
.article p + p { margin-top: 1.1em; }

/* Footer — olive grounding */
.site-footer { background: var(--olive); color: var(--umber); padding-block: clamp(3rem,6vw,5rem); }
.footer-inner { padding-inline: var(--pad); text-align: center; }
.footer-nav { margin-bottom: 1.5rem; }
.footer-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.6rem; }
.footer-contact { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.6rem; }
.footer-menu a, .footer-contact a { text-decoration: none; font-family: var(--mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: color-mix(in srgb, var(--umber) 88%, transparent); transition: color .25s var(--ease); }
.footer-menu a:hover, .footer-menu .current-menu-item > a, .footer-contact a:hover { color: var(--clay-300); }
.footer-legal { max-width: none; margin-inline: auto; font-size: 0.8rem; color: color-mix(in srgb, var(--umber) 70%, transparent); }
.footer-credit { max-width: none; margin-top: 0.5rem; font-size: 0.75rem; color: color-mix(in srgb, var(--umber) 55%, transparent); }
.footer-credit a { text-decoration: none; color: color-mix(in srgb, var(--umber) 80%, transparent); transition: color .25s var(--ease); }
.footer-credit a:hover { color: var(--clay-300); }

/* Motion */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* Header tweaks on narrow viewports — overlay menu itself is identical everywhere */
@media (max-width: 880px) {
  .book-btn { padding: 0.55em 1em; }
}

/* =========================================================================
   HOME — reworked modules (front-page.php)
   1 slideshow · 2 headline · 3 buttons · 4 tiles · 5 book · 6 carousel
   7 text · 8 tiles · 9 fading gallery · 10 statement · 11 events
   12/13 feature banners · 14 newsletter
   ========================================================================= */

/* Vertical rhythm — give the stacked modules more breathing room so the page
   feels open rather than crammed. Scoped to .home-main, so the larger
   `--section` lifts every `.section` module (and the fade-gallery margin-top)
   on the home page without touching the rest of the site. */
.home-main { --section: clamp(5.5rem, 11vw, 11rem); }

/* Full-width home — drop the centred 1240px cap so every module fills the
   viewport (text keeps comfortable edge padding; image grids go edge-to-edge).
   Scoped to .home-main so the header, footer and other pages are untouched. */
.home-main .wrap { max-width: none; }

/* The parent theme (BlankSlate) caps `.section` (margin: 0 auto; max-width).
   On the home page every section must run edge-to-edge — higher specificity
   than the parent's bare `.section` rule, so this wins regardless of order. */
.home-main .section { max-width: none; margin-inline: 0; }

/* Text + form modules span the full width too (no narrow centred reading
   column / capped form), left-aligned like the reference intro. */
.home-main .home-headline,
.home-main .big-text,
.home-main .text-block-prose,
.home-main .text-block-prose p,
.home-main .lead,
.home-main p,
.home-main .newsletter { max-width: none; }

/* 1 · Video slideshow — tall hero, but short of full height so the next
   section peeks and the page reads as scrollable. */
.hero-slideshow { position: relative; width: 100%; height: 90vh; height: 90svh; min-height: 480px; background: var(--paper-3); overflow: hidden; }
/* Slides cross-fade: the outgoing one fades out while the next fades in, both
   sitting in the same place. Same treatment as the fading gallery below, a
   touch quicker so it stays well inside the 7s the rotator waits. */
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease); }
.hero-slide.is-active { opacity: 1; }
.hero-media { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-slide--empty { opacity: 1; display: grid; place-items: center; text-align: center; padding: 1.5rem;
  background: repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,205,188,.06) 18px 19px), rgba(255,205,188,.05); }
.hero-slide--empty span { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); }

/* 2 · Headline · 3 · Buttons */
.home-intro { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3.75rem); }
.home-intro .hero-actions { margin-top: 2rem; }

/* 4 · Three image tiles */
.tiles-3 { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); grid-template-columns: 1fr; }
@media (min-width: 700px) { .tiles-3 { grid-template-columns: repeat(3, 1fr); } }
.tile { position: relative; display: grid; place-items: center; text-decoration: none; overflow: hidden; background: var(--paper-2); }
.tile--media { aspect-ratio: 1 / 1; }
.tile .tile-img, .tile .tile-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile .tile-ph { background: repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,205,188,.06) 18px 19px), rgba(255,205,188,.05); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,15,15,.6), rgba(15,15,15,.05) 55%); opacity: .85; transition: opacity .35s var(--ease); }
.tile .tile-img { transition: transform .6s var(--ease); }
.tile:hover .tile-img { transform: scale(1.04); }
.tile-title { position: relative; z-index: 1; font-family: var(--display); font-weight: 400; font-size: calc(var(--fs-h3) * 2); letter-spacing: -0.01em; color: var(--umber); text-align: center; padding: 1rem; }

/* 5 · Book your class */
.book-cta { text-align: center; padding-block: clamp(3rem, 7vw, 6.5rem); padding-bottom: clamp(1.5rem, 3.5vw, 3rem); }

/* The large pill button. Defined unscoped so it can be used anywhere — the
   home page's book CTA and the Button row on an event page share it. */
.btn--lg {
  font-family: var(--display);
  font-size: clamp(1.5rem, 0.9rem + 2.6vw, 3.1rem);
  font-weight: 700; line-height: 1; letter-spacing: -0.02em; text-transform: none;
  padding: 0.66em 1.25em; border-radius: 999px; gap: 0.4em;
  transition: background .25s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease), border-color .25s var(--ease);
}
.btn--lg::after { content: "\2192"; font-size: 0.86em; transition: transform .3s var(--ease); }
.btn--lg:hover { transform: translateY(-3px) scale(1.03); }
.btn--lg:hover::after { transform: translateX(9px); }
.btn--lg:active { transform: translateY(-1px) scale(1.01); }

/* 6 · Image carousel */
.carousel-section { overflow: hidden; padding-block: clamp(1.5rem, 3vw, 2.75rem); }
.carousel-track { display: flex; gap: clamp(0.75rem, 2vw, 1.5rem); overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--pad);
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-item { flex: 0 0 86%; scroll-snap-align: center; }
@media (min-width: 700px) { .carousel-item { flex-basis: 56%; } }
@media (min-width: 1100px) { .carousel-item { flex-basis: 42%; } }
.carousel-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); display: block; }
.carousel-item .ph { aspect-ratio: 4/3; }
.carousel-nav { display: flex; gap: 1rem; justify-content: space-between; align-items: center; margin-top: 1.25rem; }
.carousel-dots { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.carousel-dot { width: 0.5rem; height: 0.5rem; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--umber) 38%, transparent);
  cursor: pointer; transition: background .25s var(--ease), transform .25s var(--ease); }
.carousel-dot.is-active { background: var(--umber); transform: scale(1.3); }
.carousel-buttons { display: flex; gap: 0.6rem; }
.carousel-btn { width: 2.8rem; height: 2.8rem; border: 1px solid var(--umber); background: transparent; color: var(--umber);
  border-radius: 50%; font-size: 1.1rem; line-height: 1; display: grid; place-items: center; transition: background .25s var(--ease), color .25s var(--ease); }
.carousel-btn:hover { background: var(--umber); color: var(--paper); }
.carousel-btn[disabled] { opacity: .3; cursor: default; }

/* 7 · Text block — full-width, left-aligned like the intro */
.text-block { text-align: left; padding-top: clamp(2.5rem, 5vw, 5rem); }
.text-block .eyebrow { margin-bottom: 1.5rem; }
/* Module 7 reads at the same scale as the headline (module 2). */
.text-block-prose, .text-block-prose p {
  font-family: var(--display); font-size: var(--fs-h1); font-weight: 400;
  line-height: 1.0; letter-spacing: -0.028em; color: var(--umber);
}
.text-block-prose p + p { margin-top: 0.2em; }

/* 8 · Six tiles — edge-to-edge, up to a single full-width row on desktop */
.tiles-6 { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px)  { .tiles-6 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .tiles-6 { grid-template-columns: repeat(6, 1fr); } }
.tile--small { aspect-ratio: 1 / 1; background: var(--paper-2); color: var(--umber); }
.tile--small::after { display: none; }
.tile--small.tile--media::after { display: block; }
.tile--small .tile-title { font-size: clamp(2rem, 1.8rem + 1.2vw, 2.8rem); color: var(--umber); }
.tile--small.tile--media .tile-title { color: var(--umber); }
.tile--small:hover { background: var(--paper-3); }

/* 9 · Fading image gallery */
.fade-gallery { position: relative; width: 100%; height: clamp(75vh, 92vh, 1100px); background: var(--paper-3); overflow: hidden; margin-top: var(--section); }
.fade-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--ease); }
.fade-slide.is-active { opacity: 1; }
.fade-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fade-slide--empty { opacity: 1; display: grid; place-items: center; text-align: center; padding: 1.5rem;
  background: repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,205,188,.06) 18px 19px), rgba(255,205,188,.05); }
.fade-slide--empty span { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); }

/* 10 · Big statement — full-width, left-aligned */
.big-text-section { text-align: left; }
.big-text { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 1.2rem + 3.4vw, 4.4rem); line-height: 1.06;
  letter-spacing: -0.02em; color: var(--umber); }

/* 11 · Image + list of events */
.events-feature .split { align-items: start; }
.event-list { display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.event-row { display: grid; gap: 0.15rem 1.25rem; grid-template-columns: 1fr; align-items: baseline;
  padding-block: 1.1rem; border-bottom: 1px solid var(--line-strong); text-decoration: none; transition: padding-left .25s var(--ease); }
.event-row:hover { padding-left: 0.5rem; }
@media (min-width: 480px) { .event-row { grid-template-columns: 8.5rem 1fr; } .event-row .event-loc { grid-column: 2; } }
.event-date { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--clay); font-weight: 600; }
.event-title { font-family: var(--display); font-weight: 400; font-size: var(--fs-h3); line-height: 1.1; color: var(--umber); }
.event-loc { font-size: 0.85rem; color: var(--soft); }

/* 12/13 · Full-width feature banners — title centred on the image */
.feature-banner { position: relative; display: flex; align-items: center; justify-content: center; min-height: clamp(65vh, 80vh, 840px);
  background-size: cover; background-position: center; text-decoration: none; overflow: hidden; }
.feature-banner::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,15,15,.6), rgba(15,15,15,.25)); transition: opacity .4s var(--ease); }
.feature-banner:hover::after { opacity: .85; }
.feature-banner--empty { background: var(--olive); }
.feature-inner { position: relative; z-index: 1; width: 100%; text-align: center; padding-block: clamp(2rem, 5vw, 4rem); }
.feature-inner .eyebrow { color: var(--olive-300); margin-bottom: 0.75rem; }
.feature-title { display: block; font-family: var(--display); font-weight: 400; font-size: var(--fs-h1); line-height: 1;
  letter-spacing: -0.028em; color: var(--umber); }

/* =========================================================================
   PRACTICE PAGE  ·  home-style landing
   1 title slideshow · 2 category rows (Body/Breath/Mind) · 3 newsletter
   ========================================================================= */

/* Full-width treatment, mirroring .home-main: generous rhythm, no centred cap
   so the slideshow and category bands run edge-to-edge. Scoped to the page. */
.practice-main { --section: clamp(5.5rem, 11vw, 11rem); }
.practice-main .wrap { max-width: none; }
.practice-main .section { max-width: none; margin-inline: 0; }
.practice-main .newsletter { max-width: none; }

/* 1 · Title slideshow — the shared .hero-slideshow with a centred page title.
   A scrim above the slides keeps the title legible over any image/video. */
.hero-slideshow--titled::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(15,15,15,.6), rgba(15,15,15,.22));
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center; text-align: center;
  padding: var(--pad); pointer-events: none;
}
.hero-overlay-title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(3.6rem, 1.4rem + 9vw, 10rem);
  line-height: 0.92; letter-spacing: -0.04em; color: var(--umber);
}

/* 2 · Category rows — title on the category image beside its text + button.
   Rows alternate the image left / right via .cat-row--reverse. */
.cat-section { padding-block: clamp(2.5rem, 5vw, 5rem); }
.cat-row { align-items: start; }
.cat-media {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: clamp(460px, 66vh, 820px);
  background-color: var(--paper-3); background-size: cover; background-position: center;
  text-decoration: none; overflow: hidden; border-radius: var(--radius);
}
.cat-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,15,15,.6), rgba(15,15,15,.2));
  transition: opacity .4s var(--ease);
}
.cat-media:hover::after { opacity: .85; }
.cat-media-title {
  position: relative; z-index: 1;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(3rem, 1.6rem + 5vw, 6.6rem);
  line-height: 0.92; letter-spacing: -0.04em; color: var(--umber);
  text-align: center; padding: 1rem;
}
.cat-text { display: flex; flex-direction: column; align-items: flex-start; }
.cat-intro {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.2rem);
  line-height: 1.05; letter-spacing: -0.025em; color: var(--umber); max-width: none;
}
.cat-desc { margin-top: 1.5rem; max-width: none; }
.practice-main .cat-desc p { font-size: var(--fs-lead); line-height: 1.45; max-width: none; }
.cat-cta { margin-top: 2rem; font-size: 1rem; }
@media (min-width: 820px) {
  .cat-row--reverse .cat-media { order: 2; }
}

/* Category pages (Body / Breath / Mind) — service rows: title + text + Book
   button on the left, the service image alongside on the right. */
.service-section { padding-block: clamp(2.5rem, 5vw, 5rem); scroll-margin-top: clamp(4.5rem, 6vw, 6rem); }
.service-row { align-items: start; }
.service-text { display: flex; flex-direction: column; align-items: flex-start; }
.service-title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.6rem);
  line-height: 1.0; letter-spacing: -0.03em; color: var(--umber);
}
.service-desc { margin-top: 1.25rem; max-width: none; }
.practice-main .service-desc p { font-size: var(--fs-lead); line-height: 1.45; max-width: none; }
.service-cta { margin-top: 1.75rem; font-size: 1rem; }
.service-media {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background: var(--paper-3); min-height: clamp(460px, 66vh, 820px);
}
.service-media .service-img,
.service-media-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.service-media-ph { background: repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,205,188,.06) 18px 19px), rgba(255,205,188,.05); }

/* =========================================================================
   ABOUT PAGE  ·  page-about.php
   1 title slideshow · 2 intro · 3 two-column text · 4 video
   5 statement · 6 image gallery · (7 newsletter — site-wide footer)
   ========================================================================= */

/* Full-width treatment, mirroring .home-main / .practice-main: generous
   rhythm and NO centred / measure cap, so every module — slideshow, text,
   video and gallery — runs the full width like the other pages. Scoped to the
   page so the header, footer and other pages are untouched. */
.about-main { --section: clamp(5.5rem, 11vw, 11rem); }
.about-main .wrap { max-width: none; }
.about-main .section { max-width: none; margin-inline: 0; }
.about-main p,
.about-main .prose,
.about-main .prose p { max-width: none; }

/* 1 · Title slideshow — the page title is overlaid on the slideshow using the
   shared .hero-slideshow--titled / .hero-overlay / .hero-overlay-title styles
   (defined with the Practice page). No About-specific rules needed here. */

/* 2 · Intro & 5 · Statement — large, left-aligned display text */
.about-display, .about-display p {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2rem, 1.2rem + 3.4vw, 4.4rem); line-height: 1.06;
  letter-spacing: -0.02em; color: var(--umber); max-width: none;
}
.about-display p + p { margin-top: 0.2em; }

/* 3 · Two-column text — heading, then body flowing into two columns */
.about-cols-heading { font-size: var(--fs-h2); }
.about-cols-body { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.about-cols-body p { color: var(--soft); max-width: none; }
.about-cols-body p + p { margin-top: 1.1em; }
@media (min-width: 760px) {
  .about-cols-body { columns: 2; column-gap: clamp(2rem, 5vw, 4.5rem); }
  .about-cols-body p:first-child { margin-top: 0; }
}

/* 4 · Video — full-width 16:9 media box (embed iframe or uploaded file) */
.about-video-media {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: var(--paper-3); overflow: hidden;
}
.about-video-media video,
.about-video-media iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; display: block; object-fit: cover;
}
.about-video--empty { display: grid; place-items: center; text-align: center; padding: 1.5rem;
  background: repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,205,188,.06) 18px 19px), rgba(255,205,188,.05); }
.about-video--empty span { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); }

/* =========================================================================
   CONTACT PAGE  ·  page-contact.php
   1 title slideshow · 2 contact form (CF7) · 3 collabs + location
   4 feature banners · (5 newsletter — site-wide footer)
   ========================================================================= */

/* Full-width treatment, mirroring .home-main / .about-main: generous rhythm
   and NO centred / measure cap, so every module runs the full width like the
   other pages. Scoped to the page so the rest of the site is untouched. */
.contact-main { --section: clamp(5.5rem, 11vw, 11rem); }
.contact-main .wrap { max-width: none; }
.contact-main .section { max-width: none; margin-inline: 0; }
.contact-main p,
.contact-main .prose,
.contact-main .prose p { max-width: none; }

/* 1 · Title slideshow — the page title is overlaid on the slideshow using the
   shared .hero-slideshow--titled / .hero-overlay / .hero-overlay-title styles
   (defined with the Practice page). No Contact-specific rules needed here. */

/* 2 · Contact form (Contact Form 7) — full-width, labels to the LEFT of each
   underlined line (wireframe). CF7 builds its own markup, so this styles the
   common elements; the exact fields live in the Contact Form 7 form editor. */
.contact-form-section .wpcf7 { max-width: none; }
.contact-form-section .wpcf7-form p { max-width: none; margin: 0; }
.contact-form-section .wpcf7-form > p + p { margin-top: clamp(1.25rem, 2.5vw, 2rem); }
/* The CF7 form is built with a custom .form-grid wrapper whose general utility
   rule caps it at 36rem — lift that cap so the lines span the full column.
   Each field also sits in an inline-block .wpcf7-form-control-wrap, which would
   otherwise collapse a width:100% input to its size-attribute width (~430px). */
.contact-form-section .form-grid { max-width: none; gap: clamp(1.25rem, 2.5vw, 2rem); }
.contact-form-section .wpcf7-form-control-wrap { display: block; width: 100%; }
.contact-form-section .wpcf7-form label {
  display: block; font-family: var(--mono); font-size: var(--fs-eyebrow);
  text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: var(--soft);
}
.contact-form-section .wpcf7-form input[type="text"],
.contact-form-section .wpcf7-form input[type="email"],
.contact-form-section .wpcf7-form input[type="tel"],
.contact-form-section .wpcf7-form input[type="url"],
.contact-form-section .wpcf7-form textarea {
  width: 100%; background: transparent; border: 0;
  border-bottom: 1px solid var(--line-strong); border-radius: 0;
  padding: 0.55em 0; color: var(--umber); margin-top: 0.4rem;
}
.contact-form-section .wpcf7-form input:focus,
.contact-form-section .wpcf7-form textarea:focus { outline: none; border-bottom-color: var(--clay); }
.contact-form-section .wpcf7-form textarea { min-height: 7rem; resize: vertical; }
.contact-form-section .wpcf7-submit {
  margin-top: 1.25rem; display: inline-flex; align-items: center;
  background: var(--clay); color: var(--paper); border: 1px solid var(--clay);
  border-radius: var(--radius); padding: 0.85em 1.6em; cursor: pointer;
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.contact-form-section .wpcf7-submit:hover { background: var(--clay-deep); border-color: var(--clay-deep); }

/* Labels beside the line from the medium breakpoint up (stacked on mobile).
   In this form the <label> and the field-wrap are siblings inside each <p>, so
   the <p> is the grid: label text in column 1, the underlined line in column 2.
   The submit <p> has no label, so :has() leaves it as a normal left button. */
.contact-form-section .form-grid > div > p > br { display: none; }
@media (min-width: 720px) {
  .contact-form-section .form-grid > div > p:has(> label) {
    display: grid;
    grid-template-columns: minmax(8rem, 16rem) 1fr;
    align-items: baseline;
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
  }
  /* Message row: align the label to the top of the textarea, not its baseline. */
  .contact-form-section .form-grid > div > p:has(textarea) { align-items: start; }
  .contact-form-section .form-grid > div > p:has(> label) > label { margin: 0; }
  .contact-form-section .form-grid > div > p:has(> label) input,
  .contact-form-section .form-grid > div > p:has(> label) textarea { margin-top: 0; }
}

/* 3 · Collabs + Location — two big-headed text columns */
.contact-cols .split { align-items: start; }
.contact-col-heading {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2.2rem, 1.4rem + 3vw, 4rem);
  line-height: 1; letter-spacing: -0.03em; color: var(--umber);
}
.contact-col-text { margin-top: clamp(1.25rem, 2.5vw, 2rem); }
.contact-col-text p { color: var(--soft); }
.contact-col-text p + p { margin-top: 1.1em; }

/* 4 · Feature banners — reuse the shared .feature-banner styles (home 12/13). */

/* =========================================================================
   EVENTS PAGE  ·  archive-event.php
   1 title slideshow · 2 upcoming banners · 3 past events grid + pagination
   (4 newsletter — site-wide footer)
   ========================================================================= */

/* Full-width treatment, mirroring the other pages. */
.events-main { --section: clamp(5.5rem, 11vw, 11rem); }
.events-main .wrap { max-width: none; }
.events-main .section { max-width: none; margin-inline: 0; }
.events-main p { max-width: none; }

/* 1 · Title slideshow — shared .hero-slideshow--titled / .hero-overlay. */

/* 2 · Upcoming events — full-width banners, a little shorter than the hero so
   several stack comfortably, with a thin gap between them. Reuses
   .feature-banner; the date / location use the gold .feature-inner .eyebrow. */
.events-main .event-banner { min-height: clamp(38vh, 50vh, 560px); margin-top: clamp(0.75rem, 2vw, 1.5rem); }

/* 3 · Past events */
.events-past { padding-top: clamp(3rem, 6vw, 6rem); }
.events-past-head {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  line-height: 1; letter-spacing: -0.03em; color: var(--umber);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.events-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .events-grid { grid-template-columns: repeat(4, 1fr); } }
/* Smaller titles than the home tiles, to suit the 4-up grid. */
.events-grid .tile-title { font-size: clamp(1.1rem, 0.85rem + 1vw, 1.65rem); }
/* Past events read as archived: the image sits faded back and comes up to
   full on hover / focus. */
.events-grid .tile-img { opacity: 0.45; transition: opacity .5s var(--ease), transform .6s var(--ease); }
.events-grid .tile:hover .tile-img,
.events-grid .tile:focus-visible .tile-img { opacity: 1; }

/* Pagination — subtle, right-aligned prev / next + page numbers.
   Shared by the events and insights archives. */
.events-past .pagination,
.insights-main .pagination { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.events-past .nav-links,
.insights-main .nav-links { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.events-past .page-numbers,
.insights-main .page-numbers {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; color: var(--soft); padding: 0.55em 0.85em;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.events-past .page-numbers:hover,
.insights-main .page-numbers:hover { color: var(--umber); border-color: var(--umber); }
.events-past .page-numbers.current,
.insights-main .page-numbers.current { color: var(--paper); background: var(--clay); border-color: var(--clay); }
.events-past .page-numbers.dots,
.insights-main .page-numbers.dots { border: 0; padding-inline: 0.25em; }

/* =========================================================================
   INSIGHTS PAGE  ·  archive-journal.php (public slug /insights/)
   1 title · 2 grid of insight tiles · 3 About banner · (4 newsletter — footer)
   ========================================================================= */

/* Full-width treatment, mirroring the other pages. */
.insights-main { --section: clamp(5.5rem, 11vw, 11rem); }
.insights-main .wrap { max-width: none; }
.insights-main .section { max-width: none; margin-inline: 0; }
.insights-main p { max-width: none; }

/* 1 · Title — centred heading at the top (no slideshow). */
.insights-main .insights-head { text-align: center; padding-block: clamp(2.5rem, 6vw, 6rem) clamp(1.5rem, 3vw, 2.5rem); }
.insights-title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(3rem, 1.6rem + 6vw, 7rem);
  line-height: 0.95; letter-spacing: -0.04em; color: var(--umber);
}

/* 2 · Grid — insight tiles (featured image + title), 3-up on desktop. */
.insights-grid-section { padding-bottom: clamp(3rem, 6vw, 6rem); }
.insights-grid { display: grid; gap: clamp(0.75rem, 2vw, 1.25rem); grid-template-columns: 1fr; }
@media (min-width: 560px) { .insights-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .insights-grid { grid-template-columns: repeat(3, 1fr); } }
.insights-grid .tile { aspect-ratio: 4 / 3; }
/* Article titles need a smaller, calmer size than the home tiles. */
.insights-grid .tile-title { font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem); line-height: 1.15; }

/* 3 · About banner — reuse the shared .feature-banner styles. */

/* =========================================================================
   EVENT PAGE  ·  single-event.php
   1 title hero · 2 body · 3 statement · 4 image · (5 newsletter — footer)
   ========================================================================= */

/* Full-width treatment, mirroring the other pages: the hero, the statement and
   the closing image run edge to edge. The body is the exception — see below. */
/* Tighter vertical rhythm than the landing pages: an event is a stack of many
   rows, so the page-scale spacing would push them far apart. */
.event-main { --section: clamp(3rem, 5.5vw, 5rem); }

/* Two padded rows in a row would otherwise stack their padding and leave a
   double gap. Collapsing the second one's top padding makes every seam the
   same height — including after a media row, which carries no padding of its
   own and so keeps the next row's full top padding. */
.event-main .erow.section + .erow.section { padding-top: 0; }

/* The closing statement is a moment, so it keeps a little more air than a row
   seam — but not the full double gap it would get on its own padding. */
.event-main .erow.section + .event-cta { padding-top: clamp(1rem, 2vw, 2rem); }
.event-main .wrap { max-width: none; }
.event-main .section { max-width: none; margin-inline: 0; }
.event-main p { max-width: none; }

/* 1 · Title hero — shared .hero-slideshow--titled / .hero-overlay. Event titles
   are sentences, not one-word page names, so they take a smaller scale and a
   wrapping cap instead of the 10rem page-title size. The date / location sits
   above the title (light, for legibility over the photo scrim). */
.event-main .hero-overlay-title {
  font-size: clamp(2.4rem, 1.2rem + 4.6vw, 5.5rem);
  line-height: 0.98;
  max-width: 18ch;
}
.event-main .event-hero-meta { color: var(--umber); margin-bottom: 1.1rem; }

/* Optional logo / icon above the title (ACF event_logo). Sized by height so
   any aspect ratio lands at the same optical weight; never wider than the
   title block on a phone. */
.hero-overlay-inner { display: flex; flex-direction: column; align-items: center; }
.event-hero-logo {
  width: auto; height: clamp(3rem, 7vw, 6rem);
  max-width: min(72vw, 340px); object-fit: contain;
  margin-bottom: clamp(1.25rem, 3vw, 2.25rem);
}

/* 2 · Practical — the key facts as labelled cells, plus the booking buttons.
   A lifted band between the hero and the body, on the same spine (and the same
   width) as the body text below it, so the page keeps one column. */
.event-practical {
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
/* Full width, and the buttons sit beside the facts rather than under them —
   they drop below only when there is no room for both. */
.event-practical-inner {
  max-width: none; margin-inline: 0;
  display: grid; gap: clamp(1.75rem, 3.5vw, 3.5rem);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 960px) { .event-practical-inner { grid-template-columns: minmax(0, 1fr) auto; } }
.event-facts { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.event-fact dt {
  font-family: var(--mono); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--clay);
}
.event-fact dd {
  margin: 0.7rem 0 0; color: var(--umber);
  font-size: clamp(1.2rem, 1.02rem + 0.75vw, 1.7rem); line-height: 1.25;
  letter-spacing: -0.01em;
}
.event-practical .event-actions { margin-top: 0; }

/* -------------------------------------------------------------------------
   3 · Content rows.
   text_image / media / text / big_text reuse the insight article's .jrow-*
   rows, so an event reads in the same language as the rest of the site. The
   three below are event-specific. Rows that are columns of reading text sit on
   the same centred spine as the practical strip; media rows stay full-bleed.
   ------------------------------------------------------------------------- */
.event-main .jrow-prose,
.event-main .jrow-prose p { max-width: none; }

/* Width — set per row under its own "Width" field, so the page can alternate
   between full-screen rows and a narrower reading column instead of committing
   to one or the other. Every row type carries .erow-inner, so one pair of
   rules covers all of them. */
.erow-inner { width: 100%; }
.erow--full > .wrap > .erow-inner { max-width: none; margin-inline: 0; }
.erow--contained > .wrap > .erow-inner { max-width: min(74ch, 100%); margin-inline: auto; }
/* A two-column split needs more room than a single reading column. */
.erow-text-image.erow--contained > .wrap > .erow-inner { max-width: min(100ch, 100%); }
/* Full-width media is the one row that goes truly edge to edge: no side
   padding, so the image bleeds off the screen like the hero. */
.jrow-media.erow--full > .wrap { padding-inline: 0; }

.erow-heading {
  font-family: var(--display); font-weight: 400; letter-spacing: -0.02em;
  font-size: clamp(1.9rem, 1.35rem + 2.2vw, 3rem); line-height: 1.05;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

/* Programme — the day, as a schedule. Hairline rows, the time in mono on the
   left, top-aligned against its description. */
.programme { list-style: none; padding: 0; display: grid; border-top: 1px solid var(--line); }
.programme-item {
  display: grid; gap: 0.25rem 1.5rem; grid-template-columns: 1fr;
  padding-block: clamp(1rem, 2vw, 1.4rem); border-bottom: 1px solid var(--line);
}
@media (min-width: 560px) { .programme-item { grid-template-columns: 5.5rem 1fr; } }
.programme-time { font-family: var(--mono); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; color: var(--clay); padding-top: 0.2em; }
.programme-title { font-size: 1.08rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; font-family: var(--sans); color: var(--umber); }
.programme-text { margin-top: 0.35rem; color: var(--soft); }

/* Lists — up to three columns side by side (Included / Not included / …),
   reusing the shared .tick-list dashes. */
/* Columns are capped rather than stretched: on a full-width row an uncapped
   track runs to ~650px, which leaves a short item stranded beside a lot of
   empty space. */
.list-cols { display: grid; gap: clamp(1.75rem, 4vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 620px) { .list-cols { grid-template-columns: repeat(auto-fit, minmax(13rem, 24rem)); } }
.list-col-title {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--clay);
  margin-bottom: 1.1rem;
}
.list-col .tick-list { max-width: none; }

/* Points — title on the left, the list beside it on the right. The points run
   at display scale by default, so the row reads as a statement rather than a
   paragraph; "Normal" drops them back to body size. */
.points-row { display: grid; gap: clamp(1.25rem, 3.5vw, 4rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 820px) { .points-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); } }
.points-title {
  font-family: var(--display); font-weight: 400; letter-spacing: -0.02em;
  font-size: clamp(1.7rem, 1.25rem + 1.8vw, 2.6rem); line-height: 1.08;
  color: var(--umber);
}
.points-list { list-style: none; padding: 0; margin: 0; }
.points-list li {
  position: relative; padding-left: 1.3em; color: var(--umber);
  font-family: var(--display); font-weight: 400; letter-spacing: -0.02em;
  font-size: clamp(1.35rem, 1.05rem + 1.35vw, 2.3rem); line-height: 1.22;
}
.points-list li::before { content: "\2014"; position: absolute; left: 0; color: var(--clay); }
.points-list li + li { margin-top: 0.5em; }
/* Normal size falls back to the reading scale and the softer body colour. */
.points--normal .points-list li {
  font-family: var(--sans); font-size: var(--fs-body); line-height: 1.5;
  letter-spacing: 0; color: var(--soft);
}
.points--normal .points-list li + li { margin-top: 0.6em; }

/* Button — the large pill (.btn .btn--lg, same as the home page's book CTA),
   placed anywhere in the stack. Align is relative to whatever width the row
   is set to, so a centred button in a reading column centres on that column. */
/* Highlight panel — a light block with black copy, so the one thing that has
   to be found on the page breaks out of the dark ground around it. Everything
   inside inverts: the panel's own colour becomes the ink for the buttons. */
.highlight-panel {
  background: var(--umber); color: var(--paper);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 3.5rem);
}
.highlight-panel--coral { background: var(--clay); }
.highlight-panel--amber { background: var(--clay-deep); }
.highlight-heading {
  font-family: var(--display); font-weight: 400; letter-spacing: -0.02em;
  font-size: clamp(1.9rem, 1.35rem + 2.2vw, 3rem); line-height: 1.05;
  color: var(--paper);
}
.highlight-text { margin-top: clamp(1rem, 2vw, 1.5rem); max-width: none; }
.highlight-text p,
.highlight-text li { color: color-mix(in srgb, var(--paper) 82%, transparent); }
.highlight-text p + p { margin-top: 1.1em; }
.highlight-text strong,
.highlight-text h2,
.highlight-text h3 { color: var(--paper); }
.highlight-text ul { padding-left: 1.4em; list-style: disc; margin-top: 1.1em; }
.highlight-text li + li { margin-top: 0.4em; }
.highlight-text li::marker { color: color-mix(in srgb, var(--paper) 55%, transparent); }
.highlight-text a { color: var(--paper); text-decoration: underline; text-underline-offset: 0.2em; }

.highlight-facts {
  display: grid; gap: clamp(1.25rem, 3vw, 2.25rem);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.highlight-fact dt {
  font-family: var(--mono); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 68%, transparent);
}
.highlight-fact dd {
  margin: 0.5rem 0 0; color: var(--paper);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); line-height: 1.2; letter-spacing: -0.01em;
}

.highlight-actions { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.highlight-panel .btn { background: var(--paper); color: var(--umber); border-color: var(--paper); }
.highlight-panel .btn:hover { background: transparent; color: var(--paper); border-color: var(--paper); }
.highlight-panel .btn--ghost { background: transparent; color: var(--paper); border-color: color-mix(in srgb, var(--paper) 40%, transparent); }
.highlight-panel .btn--ghost:hover { background: var(--paper); color: var(--umber); border-color: var(--paper); }

/* Image gallery — either the shared swipe carousel (same component as the home
   page, picked up by [data-carousel] in site.js) or a plain grid. */
.erow-gallery .carousel-section,
.erow-gallery .carousel { margin-top: clamp(1rem, 2vw, 1.75rem); }
.erow-gallery .carousel-track { padding-inline: var(--pad); }
/* In a reading column the carousel items match that measure rather than the
   full-bleed 42% of the viewport they take on the home page. */
.erow-gallery.erow--contained .carousel-item { flex-basis: min(74ch, 100%); }
.erow-gallery.erow--contained .carousel-nav { max-width: min(74ch, 100%); margin-inline: auto; }

.gallery-grid { display: grid; gap: clamp(0.75rem, 2vw, 1.25rem); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
.gallery-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); display: block; }

/* People — photo, name, role, a short text and icon links out. */
/* Columns are capped rather than stretched, and the block of them is centred
   in the row — otherwise two or three people pack to the left and leave the
   whole right-hand side empty. */
.people-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; justify-content: center; }
@media (min-width: 620px) { .people-grid { grid-template-columns: repeat(auto-fit, minmax(15rem, 24rem)); } }
.person-photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.person-name {
  font-family: var(--display); font-weight: 400; letter-spacing: -0.02em;
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.8rem); line-height: 1.1; color: var(--umber);
}
.person-role {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--clay);
  margin-top: 0.6rem;
}
.person-text { margin-top: 0.9rem; max-width: none; }
/* Clamped to four lines by site.js, which also adds the toggle — without
   JavaScript the bio is simply shown in full. */
.person-text-wrap.is-clamped .person-text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
.readmore {
  margin-top: 0.8rem; padding: 0; background: none; border: 0;
  font-family: var(--mono); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--clay);
  border-bottom: 1px solid transparent; cursor: pointer;
  transition: border-color .25s var(--ease);
}
.readmore:hover { border-bottom-color: var(--clay); }
.person-text p { color: var(--soft); }
.person-text p + p { margin-top: 1.1em; }
.person-links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: clamp(1rem, 2vw, 1.4rem); }
.person-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; flex: none;
  border: 1px solid var(--line-strong); border-radius: 50%;
  color: var(--umber); text-decoration: none;
  transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.person-link:hover { color: var(--paper); background: var(--clay); border-color: var(--clay); }

/* The pill is scaled down on an event: the home page uses it once, as the whole
   point of its section, while here it punctuates a stack of rows. Scoped to
   .event-main so the home CTA keeps its size. The padding and the arrow are in
   em, so they follow the smaller type on their own. */
.event-main .btn--lg { font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.4rem); }

/* Two large buttons sit side by side and wrap together when there is no room. */
.erow-button-inner { display: flex; flex-wrap: wrap; gap: clamp(0.75rem, 1.6vw, 1.25rem); align-items: center; }
.erow-button-inner.is-left { justify-content: flex-start; }
.erow-button-inner.is-center { justify-content: center; }
.erow-button-inner.is-right { justify-content: flex-end; }
/* No padding of its own: the button row rides the standard rhythm, so it gets
   the same seam above and below. Giving it tighter padding made it hang closer
   to the row below than the row above, because the seam above comes from the
   previous row's bottom padding, not from this one's top. */

/* Questions — real accordions, one hairline row each. */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  list-style: none; cursor: pointer; display: flex; gap: 1.5rem;
  align-items: baseline; justify-content: space-between;
  padding-block: clamp(1rem, 2vw, 1.4rem);
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem); font-weight: 600; line-height: 1.35;
  color: var(--umber); transition: color .25s var(--ease);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after { content: "+"; font-family: var(--mono); font-size: 1.2rem; color: var(--clay); transition: transform .3s var(--ease); flex: none; }
.faq-item[open] .faq-q::after { transform: rotate(45deg); }
.faq-q:hover { color: var(--clay); }
.faq-a { padding-bottom: clamp(1rem, 2vw, 1.5rem); max-width: none; }
.faq-a p { color: var(--soft); }
.faq-a p + p { margin-top: 1.1em; }

/* -------------------------------------------------------------------------
   Fallback body — the WordPress editor content.
   Everything the client writes lands here as plain editor markup (headings,
   lists, tables, rules, embeds), so it needs its own set of editorial styles:
   none of the theme's classes reach this HTML. It also gets a centred reading
   column — a full-bleed 1400px line length is unreadable at this length.
   ------------------------------------------------------------------------- */
.event-body { padding-block: clamp(3rem, 5.5vw, 5rem); }
.event-body-text { max-width: min(74ch, 100%); margin-inline: auto; }

/* Vertical rhythm. Every block gets air; the first block in any container
   never does, so sections start flush. Headings override this below. */
.event-body-text p,
.event-body-text ul,
.event-body-text ol,
.event-body-text dl,
.event-body-text table,
.event-body-text blockquote,
.event-body-text figure,
.event-body-text pre,
.event-body-text article,
.event-body-text section,
.event-body-text div { margin-top: 1.15em; }

/* Headings bind to the text they introduce: much more space above than below.
   The editor's h1 is a section heading inside the article — it must not
   compete with the event title in the hero. */
.event-body-text h1,
.event-body-text h2,
.event-body-text h3,
.event-body-text h4,
.event-body-text h5,
.event-body-text h6 {
  font-family: var(--display); font-weight: 400; letter-spacing: -0.02em;
  color: var(--umber);
}
.event-body-text h1 { font-size: clamp(1.9rem, 1.35rem + 2.2vw, 3rem);    line-height: 1.05; margin-top: clamp(2.75rem, 5.5vw, 4.5rem); margin-bottom: 0.6rem; }
.event-body-text h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.15rem);  line-height: 1.1;  margin-top: clamp(2.25rem, 4.5vw, 3.5rem);  margin-bottom: 0.5rem; }
.event-body-text h3 { font-size: clamp(1.2rem, 1.08rem + 0.6vw, 1.5rem);  line-height: 1.2;  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);  margin-bottom: 0.4rem; }
.event-body-text h4,
.event-body-text h5,
.event-body-text h6 { font-size: 1.02rem; line-height: 1.3; font-weight: 600; letter-spacing: 0; margin-top: clamp(1.5rem, 3vw, 2rem); margin-bottom: 0.3rem; }

/* Running text */
.event-body-text p { color: var(--soft); }
.event-body-text strong,
.event-body-text b { color: var(--umber); font-weight: 600; }
.event-body-text em, .event-body-text i { font-style: italic; }
.event-body-text a { color: var(--clay); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.event-body-text a:hover { color: var(--clay-deep); }

/* Lists — the global `* { margin: 0 }` reset strips the browser defaults, so
   the indent, markers and item spacing are all set here. */
.event-body-text ul,
.event-body-text ol { padding-left: 1.4em; color: var(--soft); }
.event-body-text ul { list-style: disc; }
.event-body-text ol { list-style: decimal; }
.event-body-text li::marker { color: var(--clay); }
.event-body-text li + li { margin-top: 0.45em; }
.event-body-text li > p { margin-top: 0; }
.event-body-text li > ul,
.event-body-text li > ol { margin-top: 0.45em; }

/* Tables — used for schedules. Hairline rows, real cell padding and top-aligned
   cells so a time never floats halfway down its description. `.event-table` is
   the scroll wrapper added by tanatana_wrap_event_tables(). */
.event-body-text .event-table { margin-top: clamp(1.5rem, 3vw, 2.25rem); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.event-body-text table { width: 100%; min-width: 20rem; border-collapse: collapse; margin-top: 0; }
.event-body-text th,
.event-body-text td {
  text-align: left; vertical-align: top; color: var(--soft);
  padding: 0.95rem 1.25rem 0.95rem 0;
  border-bottom: 1px solid var(--line);
}
.event-body-text th {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--clay);
  padding-bottom: 0.7rem; border-bottom-color: var(--line-strong);
}
.event-body-text td:first-child { color: var(--umber); }
.event-body-text tr:last-child td { border-bottom: 0; }
.event-body-text th:last-child,
.event-body-text td:last-child { padding-right: 0; }

/* Rules, quotes and media */
.event-body-text hr { border: 0; border-top: 1px solid var(--line); margin-block: clamp(2rem, 4vw, 3rem); }
.event-body-text blockquote {
  border-left: 2px solid var(--clay); padding-left: clamp(1rem, 2.5vw, 1.75rem);
  font-size: var(--fs-lead); line-height: 1.4; color: var(--umber);
  margin-block: clamp(2rem, 4vw, 3rem);
}
.event-body-text blockquote p { color: inherit; font-size: inherit; }
.event-body-text img,
.event-body-text video { width: 100%; height: auto; border-radius: var(--radius); }
.event-body-text figure { margin-block: clamp(2rem, 4vw, 3rem); }
.event-body-text figcaption { margin-top: 0.75rem; font-size: 0.85rem; color: var(--soft); }
.event-body-text iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; display: block; }

/* Nothing gets a leading gap at the top of its container. Last in the block so
   it beats every margin-top set above, whatever the element. */
.event-body-text :first-child { margin-top: 0; }

/* 4 · Statement — large, centred "Come join" (reuses .big-text), with the
   booking buttons centred under it. */
.event-cta { text-align: center; padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.event-cta .event-actions { justify-content: center; margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }

/* 5 · Image — full-width, capped so a portrait photo never fills the screen. */
.event-image-media { width: 100%; height: auto; max-height: 82vh; object-fit: cover; display: block; }

/* =========================================================================
   INSIGHT ARTICLE  ·  single-journal.php
   Header (full-width cover + title / standfirst) + Flexible Content rows:
   text+image (image left/right) · full-width media · text-only (left/right)
   · big centred text.
   ========================================================================= */

.insight-main { --section: clamp(4rem, 8vw, 7rem); }
.insight-main .wrap { max-width: none; }
.insight-main .section { max-width: none; margin-inline: 0; }
.insight-main p { max-width: none; }

/* Header */
.insight-cover { width: 100%; }
.insight-cover-img { width: 100%; height: auto; max-height: 82vh; object-fit: cover; display: block; }
.insight-head { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.insight-head .eyebrow { margin-bottom: 1rem; }
.insight-title { font-size: var(--fs-h1); }
.insight-standfirst { font-size: var(--fs-lead); line-height: 1.4; color: var(--soft); margin-top: 1.5rem; }

/* Shared row prose */
.insight-main .jrow-prose,
.insight-main .jrow-prose p { max-width: none; }
.jrow-prose p { color: var(--soft); }
.jrow-prose p + p { margin-top: 1.1em; }
.jrow-heading { font-size: var(--fs-h2); margin-bottom: 1rem; }

/* Text + image — two columns; the image can sit on either side. */
.jrow-split { align-items: center; }
.jrow-split--img-left .jrow-media-col { order: -1; }
.jrow-img { width: 100%; height: auto; display: block; border-radius: var(--radius); }

/* Full-width media — image (natural ratio) or video (16:9 frame), full-bleed. */
.jrow-media { width: 100%; }
.jrow-media-img { width: 100%; height: auto; display: block; }
.jrow-media-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--paper-3); overflow: hidden; }
.jrow-media-frame iframe,
.jrow-media-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; object-fit: cover; }

/* Text only — full width; left-, centre- or right-aligned. Buttons inside are
   inline-level, so they follow the alignment without a rule of their own. */
.jrow-textonly--center { text-align: center; }
.jrow-textonly--right { text-align: right; }

/* Big text — large centred statement. */
.insight-main .big-text { max-width: none; }
.jrow-bigtext { text-align: center; }

/* Back link */
.insight-back { padding-block: clamp(2rem, 4vw, 3.5rem); }

/* =========================================================================
   BOOK PAGE  ·  page-book.php
   1 title slideshow · 2 practice tiles · 3 events tiles · (4 newsletter footer)
   ========================================================================= */

/* Full-width treatment, mirroring the other pages: generous rhythm and NO
   centred / measure cap, so the slideshow and tile grids run edge-to-edge. */
.book-main { --section: clamp(5.5rem, 11vw, 11rem); }
.book-main .wrap { max-width: none; }
.book-main .section { max-width: none; margin-inline: 0; }
.book-main p { max-width: none; }

/* 1 · Title slideshow — shared .hero-slideshow--titled / .hero-overlay. */

/* 2 / 3 · Section heading + edge-to-edge image-tile grid (shared .tile). */
.book-head {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  line-height: 1; letter-spacing: -0.03em; color: var(--umber);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.book-grid {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px) { .book-grid { grid-template-columns: repeat(3, 1fr); } }
/* Large title in the booking tiles. */
.book-grid .tile-title { font-size: clamp(1.7rem, 1.2rem + 2vw, 3rem); }

/* Service tiles stack their title + a "Book" pill (events tiles do not). The
   whole tile is the link; the pill is a visual cue for the same destination. */
.book-grid .tile-cap { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; padding: 1.25rem; text-align: center; }
.book-grid .tile-cap .tile-title { padding: 0; }
.tile-pill {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--mono); font-size: clamp(0.82rem, 0.74rem + 0.3vw, 0.98rem); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--paper); background: var(--clay);
  border-radius: 999px; padding: 0.72em 1.5em;
  transition: background .25s var(--ease);
}
.tile-pill::after { content: "\2192"; transition: transform .25s var(--ease); }
.tile:hover .tile-pill { background: var(--clay-deep); }
.tile:hover .tile-pill::after { transform: translateX(3px); }