/* ==========================================================================
   Focus on Women Magazine — "Heritage Editorial" (Option A)
   Ported from FOWM-Redesign/option-a/*.html and extended for the live site.
   Tokens, header, nav, bands, buttons and footer are copied verbatim from the
   approved mockup; everything below "site additions" is new for the CMS/shop.
   ========================================================================== */

:root{
  --white:#FFFFFF;
  --cream:#FAF6F1;
  --mist:#F3ECF5;
  --mist-deep:#E9DDEC;
  --purple:#9D489D;
  --purple-deep:#7C3A7C;
  --aubergine:#38203C;
  --ink:#1A1A1A;
  --ink-soft:#584D57;
  --line:#E4DAE6;
  --sale:#9B2C2C;
  --serif:"Lora",Georgia,"Times New Roman",serif;
  --sans:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --pad-x:clamp(1.25rem,5vw,4.5rem);
  --band-y:clamp(4rem,8.5vw,7.25rem);
  --wrap:1180px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  font-weight:300;
  font-size:1rem;
  letter-spacing:.03em;
  line-height:1.75;
  color:var(--ink);
  background:var(--white);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
/* body copy is 300, so the UA's "bolder" only reaches 400 — name the weight outright */
b,strong{font-weight:600}
a{color:var(--purple-deep);text-decoration:none;transition:color .25s ease}
a:hover{color:var(--purple)}
::selection{background:var(--mist-deep);color:var(--aubergine)}
:focus-visible{outline:2px solid var(--purple-deep);outline-offset:3px}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--aubergine);color:#fff;padding:.8em 1.4em;
  font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
}
.skip-link:focus{left:0;color:#fff}
.wrap{max-width:var(--wrap);margin-inline:auto}
.wrap-narrow{max-width:800px;margin-inline:auto}
#subscribe,#crisis-help{scroll-margin-top:1.5rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hide{display:none !important}

/* ---------- type ---------- */
h1,h2,h3,.serif{font-family:var(--serif);font-weight:400;letter-spacing:.02em}
h1{font-size:clamp(2.3rem,4.6vw,3.75rem);line-height:1.22;font-weight:500}
h2{font-size:clamp(1.75rem,3.1vw,2.55rem);line-height:1.28;font-weight:500;letter-spacing:.04em}
h3{font-size:clamp(1.2rem,1.7vw,1.45rem);line-height:1.35;font-weight:500;letter-spacing:.04em}
.lede{font-size:clamp(1rem,1.25vw,1.125rem);color:var(--ink-soft);line-height:1.8}
.eyebrow{
  display:block;font-family:var(--sans);font-weight:600;
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--purple-deep);margin-bottom:1.4rem;
}
.band-dark .eyebrow{color:#D9BFDF}
.center{text-align:center}
.center .eyebrow{margin-inline:auto}
.small{font-size:.84rem;color:var(--ink-soft);line-height:1.7}

/* ---------- bands ---------- */
.band{padding:var(--band-y) var(--pad-x)}
.band-cream{background:var(--cream)}
.band-mist{background:var(--mist)}
.band-dark{background:var(--aubergine);color:#F4EDF0}
.band-dark h2,.band-dark h3{color:#fff}
.band-quiet{padding:clamp(2.2rem,4vw,3.25rem) var(--pad-x)}
.band-tight{padding-top:clamp(2.4rem,4vw,3.5rem);padding-bottom:clamp(2.4rem,4vw,3.5rem)}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:var(--sans);font-weight:600;
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  padding:1.1em 2.4em;background:var(--purple);color:#fff;
  border:1px solid var(--purple);cursor:pointer;text-align:center;
  transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.btn:hover{background:var(--purple-deep);border-color:var(--purple-deep);color:#fff}
.btn-big{font-size:.9rem;padding:1.25em 3.4em}
.btn-sm{padding:.75em 1.6em;font-size:.7rem}
.btn-outline{background:transparent;color:var(--purple-deep);border:1px solid var(--purple-deep)}
.btn-outline:hover{background:var(--purple-deep);color:#fff}
.btn-light{background:#fff;color:var(--aubergine);border-color:#fff}
.btn-light:hover{background:var(--mist);border-color:var(--mist);color:var(--aubergine)}
.btn-block{display:block;width:100%}
.btn.is-disabled{opacity:.55;pointer-events:none}
.cta-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.4rem}
.cta-center{justify-content:center}
.text-link{
  display:inline-block;font-weight:600;font-size:.78rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--purple-deep);
}
.text-link:hover{color:var(--purple)}

/* ---------- header — faithful replica of the live site's top ---------- */
.site-top{background:var(--white);padding:clamp(1.2rem,2.5vw,1.8rem) var(--pad-x)}
.site-top-inner{
  max-width:var(--wrap);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem 2.5rem;flex-wrap:wrap;
}
.site-top .logo{flex:0 1 auto;min-width:0}
.site-top .logo img{height:clamp(70px,9vw,100px);width:auto}
.head-stack{
  margin-left:auto;display:flex;flex-direction:column;
  align-items:flex-end;gap:.6rem;text-align:right;
}
.crisis-pill{
  display:inline-block;border:1px solid var(--purple);border-radius:999px;
  color:var(--purple-deep);font-size:.78rem;font-weight:600;letter-spacing:.04em;
  padding:.55em 1.5em;line-height:1.4;
  transition:background .25s ease,color .25s ease;
}
.crisis-pill:hover{background:var(--purple);color:#fff}
.head-phone{
  font-size:clamp(1.4rem,2.2vw,1.8rem);font-weight:600;
  color:var(--purple);line-height:1.2;letter-spacing:.02em;
}
.head-phone:hover{color:var(--purple-deep)}
.head-sub{font-size:.85rem;font-weight:400;color:var(--purple-deep)}
.head-sub:hover{color:var(--purple);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.head-links{display:flex;align-items:center;gap:1.2rem}
.head-cart{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);
}
.head-cart:hover{color:var(--purple-deep)}
.head-cart svg{flex:none}
.cart-dot{
  display:inline-grid;place-items:center;min-width:1.5em;height:1.5em;padding:0 .35em;
  border-radius:999px;background:var(--purple);color:#fff;
  font-size:.68rem;font-weight:600;letter-spacing:0;line-height:1;
}
.head-stack form{margin-top:.2rem}
.donate{cursor:pointer;border:0;background:none}
.nav-bar{background:var(--purple)}
.nav-bar ul{
  list-style:none;max-width:var(--wrap);margin-inline:auto;
  display:flex;flex-wrap:wrap;justify-content:center;
}
.nav-bar a{
  display:block;color:#fff;font-size:.78rem;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;
  padding:1em clamp(.9em,1.6vw,1.6em);white-space:nowrap;
  transition:background .25s ease;
}
.nav-bar a:hover{background:var(--purple-deep);color:#fff}
.nav-bar a:focus-visible{outline-offset:-3px;outline-color:#fff}
.nav-bar a[aria-current="page"]{background:var(--purple-deep);color:#fff;font-weight:600}
@media (max-width:760px){
  .site-top-inner{flex-direction:column;align-items:center}
  .head-stack{margin-left:0;align-items:center;text-align:center}
}

/* ---------- flash messages ---------- */
/* flash types match includes/functions.php: ok | error | warn | info */
.flash{padding:.95rem var(--pad-x);font-size:.86rem;letter-spacing:.04em;text-align:center}
.flash-ok,.flash-success{background:var(--mist);color:var(--aubergine)}
.flash-info{background:var(--cream);color:var(--ink-soft)}
.flash-warn{background:#FBF3E4;color:#7A5A16}
.flash-error{background:#F7E7E7;color:var(--sale)}

/* ---------- hero photo (home) ---------- */
.hero-photo{margin:0}
.hero-photo img{width:100%;aspect-ratio:2160/747;object-fit:cover;min-height:240px}
.hero-caption{
  background:var(--cream);text-align:center;
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1rem,1.5vw,1.25rem);color:var(--aubergine);
  letter-spacing:.05em;padding:1.1rem var(--pad-x);
}

/* ---------- latest issue ---------- */
.latest-grid{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,4rem);align-items:center;
}
/* The two calls to action span the whole band rather than sitting in the copy
   column: side by side they need about 400px, which that column never has. */
.latest-grid .cta-row{grid-column:1/-1;justify-content:center;margin-top:.6rem}
.cover-stage{position:relative;max-width:560px;margin-inline:auto;width:100%;padding:clamp(2rem,3.5vw,3rem) clamp(1.6rem,3vw,2.6rem) 12px}
.cover-stage::before{
  content:"";position:absolute;z-index:0;
  top:0;right:0;bottom:clamp(.9rem,1.6vw,1.4rem);left:clamp(3rem,5.5vw,4.75rem);
  background:var(--mist);
}
.cover-stage::after{
  content:"";position:absolute;z-index:2;
  left:clamp(.4rem,1vw,.9rem);right:clamp(2.2rem,4vw,3.4rem);bottom:0;height:12px;
  background:var(--mist-deep);
}
.cover-stage img{
  position:relative;z-index:1;width:100%;
  box-shadow:0 26px 48px -32px rgba(56,32,60,.38);
}
.latest .lede{max-width:52ch;margin-top:1.4rem}
.toc-label{
  font-weight:600;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:2.1rem;
}
.toc{list-style:none;margin-top:.9rem;display:grid;gap:.55rem;max-width:54ch}
.toc li{
  font-family:var(--serif);font-size:1.02rem;line-height:1.55;
  padding-left:1.5rem;position:relative;
}
.toc li::before{
  content:"";position:absolute;left:0;top:.75em;
  width:.8rem;height:1px;background:var(--purple);
}
.toc a{color:var(--ink)}
.toc a:hover{color:var(--purple-deep)}

/* ---------- page body grid + announcement rails ---------- */
.page-body{
  display:grid;
  /* One column of adverts, down the right, running the whole length of the
     editorial. They were split across two narrow rails before, which made every
     flyer too small to read — a single wider column is legible and keeps the
     writing to the left where the eye starts. */
  grid-template-columns:minmax(0,1fr) clamp(280px,25vw,380px);
  gap:0 clamp(1.4rem,3vw,3rem);
  background:var(--white);
  padding-inline:clamp(.9rem,1.5vw,1.5rem);
  align-items:start;
}
.page-center{min-width:0}
/* The tinted sections used to span the whole page. Now that they sit in the
   left column their colour would stop dead against the advert column, leaving a
   pale stripe down the right of every one. A box-shadow offset to the right
   paints the same colour across the gap and the advert column — and unlike an
   absolutely-positioned pseudo-element it can never add a scrollbar, so the
   page needs no overflow clipping and `position:sticky` on the rail is safe. */
@media (min-width:1150px){
  .page-center > .band-mist{
    box-shadow:calc(clamp(280px,25vw,380px) + clamp(1.4rem,3vw,3rem) + clamp(.9rem,1.5vw,1.5rem)) 0 0 var(--mist);
  }
  .page-center > .band-cream{
    box-shadow:calc(clamp(280px,25vw,380px) + clamp(1.4rem,3vw,3rem) + clamp(.9rem,1.5vw,1.5rem)) 0 0 var(--cream);
  }
}
.ad-rail{
  display:flex;flex-direction:column;
  padding-block:clamp(2.4rem,4vw,3.75rem);
  align-self:stretch;
}
.rail-track{display:flex;flex-direction:column;gap:2.2rem}

/* The adverts are stacked, and the column they sit in is taller than the stack.
   Pin the panel to the viewport for the length of the editorial run and let the
   stack creep through it as the reader scrolls, so every advert is seen without
   any of them racing past. main.js drives it and adds .is-pinned; without
   JavaScript, or for a reader who has asked for less motion, the stack simply
   sits at the top of the column as it always did. */
@media (min-width:1150px){
  .ad-rail.is-pinned{
    position:sticky;top:clamp(1rem,2vh,1.5rem);
    height:calc(100vh - clamp(2rem,4vh,3rem));
    overflow:hidden;padding-block:0;
  }
  .ad-rail.is-pinned .rail-track{will-change:transform}
}
@media (prefers-reduced-motion:reduce){
  .ad-rail.is-pinned .rail-track{transform:none !important}
}
.rail-slot{flex:0 0 auto;min-width:0}
.rail-label{
  font-family:var(--sans);font-weight:600;font-size:.7rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft);text-align:center;
}
.rail-card{
  display:block;background:var(--white);padding:.55rem;
  box-shadow:0 16px 30px -22px rgba(56,32,60,.35);
  transition:box-shadow .25s ease;
}
.rail-card:hover{box-shadow:0 20px 38px -22px rgba(56,32,60,.5)}
.rail-card img{width:100%;height:auto}
.rail-caption{
  display:block;padding:.85rem .4rem .35rem;
  font-size:.8rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);line-height:1.6;text-align:center;
}
.rail-title{
  display:block;padding:.85rem .5rem 0;
  font-family:var(--serif);font-size:.98rem;font-weight:500;
  line-height:1.5;color:var(--ink);text-align:center;
}
.rail-desc{
  display:block;padding:.55rem .55rem .25rem;
  font-size:.8rem;font-weight:300;letter-spacing:.02em;line-height:1.7;
  color:var(--ink-soft);text-align:center;
}
.rail-more{
  display:block;padding:.45rem .5rem .35rem;
  font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--purple-deep);text-align:center;
}
/* A dense one-page flyer cannot be read at rail width — see includes/ad-pbbs.php.
   That advertiser's notice is set as real text instead, and these rules dress it
   to match the picture cards beside it. */
.rail-ad{padding:.95rem .9rem 1.05rem;text-align:center}
.rail-card.rail-ad:hover{box-shadow:0 16px 30px -22px rgba(56,32,60,.35)}
.rail-card img.rail-portrait{
  width:108px;height:auto;margin:0 auto .65rem;
  box-shadow:0 8px 18px -12px rgba(56,32,60,.55);
}
.rail-ad .rail-title{padding:0}
.rail-byline{
  display:block;margin-top:.35rem;
  font-size:.68rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);
}
/* Headings and contact details stay centred like every other card, but the body
   copy is ranged left — a five-line paragraph centred is ragged on both edges and
   measurably harder to read, and legibility is the entire point of this card. */
.rail-ad .rail-desc{padding:.75rem 0 0;font-size:.84rem;text-align:left}
.rail-list{
  margin:.75rem 0 0;padding:0;list-style:none;text-align:left;
  font-size:.78rem;font-weight:300;line-height:1.6;color:var(--ink-soft);
}
.rail-list li{position:relative;padding-left:.95rem;margin-top:.35rem}
.rail-list li::before{
  content:"";position:absolute;left:0;top:.6em;
  width:4px;height:4px;border-radius:50%;background:var(--purple-deep);
}
/* Used under a text advert and under a picture advert alike, so it centres
   itself rather than relying on a centred parent. */
.rail-contact{margin-top:.9rem;line-height:1.7;text-align:center}
.rail-contact a{
  display:block;font-size:.84rem;font-weight:500;
  color:var(--purple-deep);text-decoration:none;overflow-wrap:anywhere;
}
.rail-contact a:hover{text-decoration:underline}
.rail-contact .rail-email{font-size:.74rem;letter-spacing:0}
.rail-fineprint{margin-top:.75rem;font-size:.7rem;line-height:1.7;color:var(--ink-soft)}
.rail-fineprint a{color:var(--ink-soft);text-decoration:underline}
.rail-fineprint a:hover{color:var(--purple-deep)}

.announce-band{display:none}
.announce-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.4rem,2.4vw,2.2rem);align-items:start;
}

/* ---------- events ---------- */
.event-cards{
  display:grid;grid-template-columns:minmax(0,.72fr) 1fr 1fr;
  gap:clamp(1.6rem,2.5vw,2.5rem);margin-top:clamp(2.5rem,4vw,3.5rem);
}
.event-media{margin:0;position:relative}
.event-media img{width:100%;height:100%;object-fit:cover;box-shadow:0 22px 44px -30px rgba(56,32,60,.3)}
.event-card{background:var(--white);padding:clamp(2rem,3.5vw,3rem);text-align:left}
.event-card h3{max-width:22ch}
.event-meta{
  margin-top:1.2rem;font-size:.76rem;font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;color:var(--purple-deep);line-height:2;
}
.event-honorees{margin-top:.9rem;font-size:.8rem;font-weight:300;line-height:1.7;color:var(--ink-soft);letter-spacing:.02em}
.event-flyer{
  display:inline-block;margin-top:.8rem;
  font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--purple-deep);
}
.event-flyer:hover{color:var(--ink)}
.proceeds{margin-top:clamp(2.2rem,3.5vw,3rem);font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--ink-soft)}

/* ---------- home article cards ---------- */
.section-head{max-width:640px;margin:0 auto clamp(2.8rem,5vw,4.25rem)}
.feature-story{
  display:grid;grid-template-columns:1.1fr .9fr;
  gap:clamp(2.5rem,5vw,5rem);align-items:center;
  margin-bottom:clamp(3rem,5.5vw,4.5rem);
}
.feature-story>*{min-width:0}
/* The publisher uploads whatever shape her photograph happens to be — a 3:2 press
   photo one week, an upright book cover the next — so index.php measures it and
   adds .is-tall to anything squarer than 1.45. The frame then follows the picture
   instead of cropping the picture into the frame. Nothing here is constrained on
   both axes, so the box is always exactly the image: the drop shadow hugs the
   cover itself, with no empty letterbox bars beside it. A wide picture cannot run
   away with the page either — the column caps at ~605px, so at 1.45 it is 417px
   tall at the very most. */
.feature-media{margin:0;display:block}
.feature-story img{
  display:block;margin-inline:auto;
  width:100%;height:auto;
  background:var(--white);
  box-shadow:0 22px 44px -30px rgba(56,32,60,.3);
}
.feature-media.is-tall img{width:auto;max-width:100%;max-height:min(52vh,470px)}
.card-grid{
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:clamp(1.8rem,3vw,3rem) clamp(1.6rem,2.5vw,2.5rem);
}
.card{grid-column:span 2;padding-top:.2rem}
.card-grid .card:nth-last-child(2){grid-column:2 / span 2}
.card-grid .card:last-child{grid-column:4 / span 2}
.card h3 a,.feature-story h3 a{color:var(--ink)}
.card h3 a:hover,.feature-story h3 a:hover{color:var(--purple-deep)}
.card p{margin-top:.7rem;font-size:.92rem;color:var(--ink-soft)}
.card time,.card .undated,.feature-story time{
  display:block;margin-top:.9rem;font-size:.7rem;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
}

/* ---------- podcast + shop duo ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,5rem)}
.duo-cell{min-width:0}
.duo-cell h2{font-size:clamp(1.5rem,2.3vw,1.95rem)}
.duo-media{margin:0 0 1.8rem;position:relative}
.duo-media>img{width:100%;aspect-ratio:3/2;object-fit:cover;box-shadow:0 22px 44px -30px rgba(56,32,60,.3)}
.duo-shelf{
  background:var(--mist);aspect-ratio:3/2;
  display:flex;justify-content:center;align-items:flex-end;
  gap:clamp(1.2rem,2.5vw,2rem);padding:clamp(1.6rem,3vw,2.4rem);
}
.duo-shelf img{flex:none;height:78%;width:auto;aspect-ratio:3/4;object-fit:cover;box-shadow:0 18px 34px -24px rgba(56,32,60,.4)}
.duo-cell .lede{margin-top:1.2rem;max-width:46ch}

/* ---------- publisher statement ---------- */
.publisher-photo{
  width:min(240px,55vw);aspect-ratio:1;object-fit:cover;border-radius:50%;
  margin:2.4rem auto;box-shadow:0 24px 44px -28px rgba(56,32,60,.45);
}
.publisher-body{max-width:60ch;margin-inline:auto;text-align:left;color:var(--ink-soft);font-size:.97rem;line-height:1.9}
.publisher-sign{margin-top:2.6rem;font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--ink-soft)}
.publisher-sign strong{display:block;font-style:normal;font-weight:500;font-size:1.35rem;letter-spacing:.02em;color:var(--ink);margin-top:.4rem}
.publisher-sign span{display:block;font-family:var(--sans);font-style:normal;font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--purple-deep);margin-top:.55rem}

/* ---------- partners ---------- */
.partner-row{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:1.1rem 3rem;margin-top:clamp(2.4rem,4vw,3.4rem);
  max-width:900px;margin-inline:auto;
}
.partner-row span{font-size:.76rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.advertise{margin-top:2.6rem}

/* ---------- quiet + footer ---------- */
.quiet{
  background:var(--cream);text-align:center;
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1rem,1.4vw,1.2rem);color:var(--ink-soft);letter-spacing:.04em;
}
.mission-band{
  background:var(--mist);text-align:center;
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.1rem,1.7vw,1.4rem);color:var(--aubergine);letter-spacing:.03em;
}
.mission-band p{max-width:44ch;margin-inline:auto}
/* ---------- footer — light, matching the approved Option A mockup (Round 26) ---------- */
.site-foot{background:#fff;color:var(--ink-soft);padding:var(--band-y) var(--pad-x) 2.5rem}
.crisis-foot{
  background:var(--mist);
  max-width:var(--wrap);margin:0 auto clamp(3rem,5vw,4.5rem);
  padding:clamp(1.8rem,3.2vw,2.8rem);text-align:center;
}
.crisis-foot h2{font-size:clamp(1.35rem,2.1vw,1.75rem);color:var(--ink);font-style:italic}
.crisis-foot ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 2.6rem;margin-top:1.3rem}
.crisis-foot li{font-size:.86rem;color:var(--ink-soft)}
.crisis-foot a{color:var(--purple-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.crisis-foot a:hover{color:var(--ink)}
.foot-brand .foot-logo{width:min(220px,60vw);height:auto}
.foot-mission{max-width:34ch;margin-top:1.6rem;font-size:.86rem;line-height:1.8}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:clamp(2.2rem,4vw,4rem)}
.foot-col h3{
  font-family:var(--sans);font-size:.78rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink);margin-bottom:1.4rem;
}
.foot-col ul{list-style:none;display:grid;gap:.75rem}
.foot-col a{
  color:var(--ink);font-size:.9rem;font-weight:400;
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;
}
.foot-col a:hover{color:var(--purple-deep);text-decoration-color:var(--purple-deep)}
.foot-col p{font-size:.9rem;line-height:1.9;color:var(--ink)}
.foot-col .foot-social{
  list-style:none;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;
  gap:1.15rem;margin-top:1.2rem;
}
.foot-col .foot-social a{display:inline-flex;text-decoration:none}
.foot-social svg{width:1.35rem;height:1.35rem;display:block;fill:currentColor}
.foot-events li{font-size:.85rem;line-height:1.7;margin-bottom:.9rem}
.foot-events .serif{color:var(--ink);font-size:.98rem;display:block}
.foot-events span:not(.serif){display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--purple-deep);margin-top:.25rem}
/* Each event now opens its ticket pop-up. The whole two-line block is the target,
   so it stays easy to hit on a phone, and it underlines on hover rather than
   permanently — the date line beneath must not look like a second link. */
.foot-events li > a{display:block;text-decoration:none;color:inherit}
.foot-events li > a:hover .serif,
.foot-events li > a:focus-visible .serif{color:var(--purple-deep);text-decoration:underline;text-underline-offset:3px}
.foot-events .foot-events-cta{
  display:inline-block;color:var(--ink);text-decoration:underline;
  text-underline-offset:4px;text-decoration-thickness:1px;
}
.foot-events .foot-events-cta:hover{color:var(--purple-deep)}
.foot-base{
  margin-top:clamp(2.6rem,4.5vw,3.6rem);padding-top:1.7rem;
  border-top:1px solid var(--mist-deep);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2.5rem;
  font-size:.74rem;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
}
.foot-base a{
  color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;
}
.foot-base a:hover{color:var(--purple-deep)}
.bbb-badge{
  display:block;width:min(220px,60vw);margin-top:2rem;
  text-align:center;color:inherit;
}
.bbb-badge img{width:84px;height:auto;display:block;margin-inline:auto}
.bbb-badge .bbb-cap{display:block;margin-top:.65rem;font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.9}
.bbb-badge:hover .bbb-cap{opacity:1}

/* newsletter sign-up in the footer — CMS-only, styled with the mockup's light tokens */
.news-form{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;max-width:320px}
.news-form input{
  flex:1 1 10rem;min-width:0;background:var(--white);border:1px solid var(--line);
  color:var(--ink);font-family:var(--sans);font-size:.85rem;font-weight:300;padding:.7em .9em;
}
.news-form input::placeholder{color:var(--ink-soft)}
.news-form input:focus{outline:2px solid var(--purple-deep);outline-offset:1px}
.news-form button{
  flex:none;background:var(--purple);color:#fff;border:1px solid var(--purple);cursor:pointer;
  font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;padding:.75em 1.2em;transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.news-form button:hover{background:var(--purple-deep);border-color:var(--purple-deep);color:#fff}
.news-form .news-msg{flex:1 0 100%;font-size:.78rem;line-height:1.6;color:var(--purple-deep);min-height:1.2em;margin-top:.2rem}

/* ==========================================================================
   Site additions — pages that did not exist in the static mockups
   ========================================================================== */

/* ---------- page hero (articles, shop, cart, checkout…) ---------- */
.page-hero{padding-top:clamp(3.2rem,6vw,5.2rem);padding-bottom:clamp(3.2rem,6vw,5.2rem)}
.page-hero .lede{max-width:56ch;margin:1.5rem auto 0}
.page-hero.left .lede{margin-inline:0}
.breadcrumb{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
  margin-bottom:1.4rem;
}
.breadcrumb a{color:var(--ink-soft)}
.breadcrumb a:hover{color:var(--purple-deep)}
.breadcrumb span{margin:0 .55em;opacity:.55}

/* ---------- search + filter chips ---------- */
.searchbar{display:flex;flex-wrap:wrap;gap:.6rem;max-width:520px;margin:2rem auto 0}
.page-hero.left .searchbar{margin-inline:0}
.searchbar input{
  flex:1 1 14rem;min-width:0;font-family:var(--sans);font-size:.9rem;font-weight:300;
  letter-spacing:.03em;color:var(--ink);background:var(--white);
  border:1px solid var(--line);padding:.85em 1.1em;
}
.searchbar input::placeholder{color:#9A8C9C}
.searchbar input:focus{outline:2px solid var(--purple-deep);outline-offset:1px}
.active-filters{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-bottom:clamp(1.8rem,3vw,2.6rem)}
.chip{
  display:inline-flex;align-items:center;gap:.6rem;background:var(--mist);
  color:var(--aubergine);font-size:.72rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;padding:.55em 1.1em;
}
.chip a{color:var(--purple-deep);font-size:1rem;line-height:1}
.chip-reset{background:none;border:1px solid var(--line);color:var(--ink-soft);font-weight:400}
.chip-reset:hover{border-color:var(--purple-deep);color:var(--purple-deep)}

/* ============================================================
   ARTICLES PAGE — two-column body (main article rows + category
   rail), per the live site's col-lg-8 / col-lg-4 split.
   Replaces the rejected chip-row + category-card-grid treatment.

   .articles-split  — grid: fluid main column + fixed 300px rail
   .arows / .arow   — horizontal article rows, thumb left (fixed
                      200x140 frame, squared corners), text right;
                      no rules or borders between rows
   .side-cats       — sticky "Categories" rail, name left / count
                      right; collapses to a wrapping chip row ABOVE
                      the articles below 900px
   ============================================================ */
.articles-split{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(2.4rem,5vw,4.5rem);align-items:start}
.articles-main{min-width:0}

/* --- article rows --- */
.arows{display:flex;flex-direction:column;gap:clamp(2rem,3.4vw,2.8rem)}
.arow{display:flex;gap:clamp(1.1rem,2vw,1.6rem);align-items:flex-start}
.arow-media{flex:0 0 200px;width:200px;height:140px;display:block;overflow:hidden;background:var(--mist)}
.arow-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.arow:hover .arow-media img{transform:scale(1.04)}
.arow-type{
  width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;
  align-items:center;gap:.5rem;padding:.9rem;text-align:center;
}
.arow-type .tt-eyebrow{font-size:.56rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;opacity:.85}
.arow-type .tt-title{font-family:var(--serif);font-weight:500;font-style:italic;font-size:.92rem;line-height:1.4;max-width:17ch}
.arow-text{min-width:0}
.arow-cat{
  display:inline-block;font-size:.64rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--purple-deep);
}
.arow-title{margin-top:.35rem;font-size:clamp(1.12rem,1.6vw,1.34rem);line-height:1.35}
.arow-title a{color:var(--ink)}
.arow-title a:hover{color:var(--purple-deep)}
.arow-excerpt{margin-top:.5rem;font-size:.9rem;color:var(--ink-soft);line-height:1.7}
.arow-text time{
  display:block;margin-top:.7rem;font-size:.68rem;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
}

/* --- category rail --- */
.side-cats{position:sticky;top:1.5rem}
.side-heading{font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--purple-deep)}
.side-cat-list{list-style:none;margin:1rem 0 0;padding:0}
.side-cat{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.48rem 0;font-size:.86rem;line-height:1.4;color:var(--ink-soft);
}
.side-cat .name{min-width:0}
.side-cat .n{flex:none;font-size:.68rem;letter-spacing:.08em;color:#9A8C9C}
.side-cat:hover{color:var(--purple-deep)}
.side-cat:hover .n{color:var(--purple-deep)}
.side-cat.is-on{
  color:var(--purple-deep);font-weight:600;
  padding-left:.85rem;border-left:2px solid var(--purple);
}
.side-cat.is-on .n{color:var(--purple-deep)}

/* --- below 900px: rail becomes a wrapping chip row above the rows --- */
@media (max-width:900px){
  .articles-split{display:flex;flex-direction:column;gap:2rem}
  .articles-side{order:-1;width:100%}
  .side-cats{position:static}
  .side-cat-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
  .side-cat{
    background:var(--mist);color:var(--aubergine);gap:.5rem;
    padding:.5em .95em;font-size:.72rem;font-weight:600;
    letter-spacing:.1em;text-transform:uppercase;
  }
  .side-cat .n{font-size:.66rem;color:inherit;opacity:.65}
  .side-cat.is-on{background:var(--purple);color:#fff;border-left:0;padding-left:.95em}
  .side-cat.is-on .n{color:#fff}
  .arow-media{flex-basis:150px;width:150px;height:105px}
  .arow-type .tt-title{font-size:.8rem}
}
@media (max-width:480px){
  .arow{flex-direction:column;gap:.9rem}
  .arow-media{width:100%;flex-basis:auto;height:auto;aspect-ratio:16/9}
}

/* ---------- article list (related grid on article.php + 404) ---------- */
.article-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(2.2rem,3.6vw,3.2rem) clamp(1.6rem,2.6vw,2.4rem)}
.acard{display:flex;flex-direction:column}
.acard-media{display:block;position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--mist)}
.acard-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.acard:hover .acard-media img{transform:scale(1.03)}
.acard-type{
  width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;
  align-items:center;gap:.85rem;padding:1.5rem;text-align:center;
}
.tile-purple{background:var(--purple);color:#fff}
.tile-aubergine{background:var(--aubergine);color:#F4EDF0}
.tile-mist{background:var(--mist);color:var(--aubergine)}
.tile-cream{background:var(--cream);color:var(--aubergine)}
.acard-type .tt-eyebrow,.tile-type .tt-eyebrow{font-size:.62rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;opacity:.85}
.acard-type .tt-title,.tile-type .tt-title{font-family:var(--serif);font-weight:500;font-style:italic;font-size:clamp(1.05rem,1.5vw,1.35rem);line-height:1.4;max-width:18ch}
.acard-type .tt-meta,.tile-type .tt-meta{font-size:.66rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;opacity:.85}
.acard-cat{
  display:inline-block;margin-top:1.2rem;font-size:.66rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--purple-deep);
}
.acard h3{margin-top:.5rem;font-size:clamp(1.08rem,1.5vw,1.28rem)}
.acard h3 a{color:var(--ink)}
.acard h3 a:hover{color:var(--purple-deep)}
.acard p{margin-top:.65rem;font-size:.9rem;color:var(--ink-soft);line-height:1.75}
.acard time{
  display:block;margin-top:auto;padding-top:1rem;font-size:.68rem;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
}

/* ---------- pagination ---------- */
.pagination{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.4rem;
  margin-top:clamp(3rem,5vw,4.5rem);
}
.pagination a,.pagination span{
  min-width:2.6rem;padding:.6em .85em;text-align:center;
  font-size:.78rem;letter-spacing:.1em;color:var(--ink-soft);border:1px solid transparent;
}
.pagination a:hover{color:var(--purple-deep);border-color:var(--line);background:var(--cream)}
.pagination .on{background:var(--purple);border-color:var(--purple);color:#fff;font-weight:600}
.pagination .gap{min-width:auto;padding:.6em .3em}

/* ---------- empty state ---------- */
.empty{
  max-width:560px;margin-inline:auto;text-align:center;
  padding:clamp(2.6rem,5vw,4rem) clamp(1.4rem,3vw,2.4rem);background:var(--cream);
}
.empty h3{font-size:clamp(1.3rem,2.2vw,1.7rem)}
.empty p{margin-top:.9rem;color:var(--ink-soft);font-size:.94rem}
.empty .btn{margin-top:1.8rem}

/* ---------- single article ---------- */
.article-head{max-width:760px;margin-inline:auto;text-align:center}
.article-head h1{margin-top:.4rem}
.article-meta{
  margin-top:1.6rem;font-size:.72rem;font-weight:400;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);
}
.article-lead{margin:clamp(2.4rem,4vw,3.4rem) auto 0;max-width:960px;text-align:center}
/* An article's own picture is never cropped — a book jacket or a portrait must
   be shown whole, and cutting the top off one is worse than showing it small.
   Capping the HEIGHT is what stops a tall picture filling the screen; capping
   only the width, as a fixed 3:2 frame does, either crops or towers. */
.article-lead img{
  width:auto;max-width:100%;max-height:min(48vh,420px);
  height:auto;object-fit:contain;display:block;margin-inline:auto;
  box-shadow:0 24px 46px -32px rgba(56,32,60,.35);
}
.article-lead figcaption{margin-top:.8rem;font-size:.76rem;color:var(--ink-soft);text-align:center;letter-spacing:.06em}
.article-body{
  max-width:65ch;margin:clamp(2.6rem,4.5vw,3.6rem) auto 0;
  font-family:var(--serif);font-size:1.06rem;line-height:1.75;color:var(--ink);letter-spacing:.005em;
}
.article-body>*+*{margin-top:1.35em}
.article-body p{font-size:1.06rem}
.article-body h2{font-size:clamp(1.4rem,2.2vw,1.85rem);margin-top:2em;line-height:1.3}
.article-body h3{font-size:clamp(1.15rem,1.7vw,1.4rem);margin-top:1.8em}
.article-body h4{font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--purple-deep);margin-top:1.8em}
.article-body a{color:var(--purple-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.article-body a:hover{color:var(--purple)}
.article-body strong,.article-body b{font-weight:600}
.article-body em,.article-body i{font-style:italic}
.article-body ul,.article-body ol{padding-left:1.4em}
.article-body li+li{margin-top:.5em}
.article-body ul li::marker{color:var(--purple)}
.article-body blockquote{
  border-left:2px solid var(--purple);padding:.2em 0 .2em 1.4em;margin-left:0;
  font-style:italic;color:var(--ink-soft);font-size:1.12rem;line-height:1.65;
}
/* A picture the publisher drops into the text is capped by height as well as
   width, so a tall photograph straight off a phone does not push a page of
   writing off the screen. Never cropped — the whole picture is shown. */
.article-body img{
  max-width:100%;width:auto;height:auto;max-height:min(55vh,460px);
  object-fit:contain;display:block;margin-inline:auto;
}
.article-body figure{margin-block:2em}
.article-body figcaption{
  margin-top:.7rem;font-family:var(--sans);font-size:.78rem;font-weight:300;
  color:var(--ink-soft);text-align:center;letter-spacing:.04em;
}
.article-body table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:.9rem}
.article-body td,.article-body th{border-bottom:1px solid var(--line);padding:.6em .4em;text-align:left}
.article-body iframe{max-width:100%;aspect-ratio:16/9;height:auto;width:100%;border:0}
.article-body hr{border:0;border-top:1px solid var(--line);margin-block:2.4em}

.share-row{
  max-width:65ch;margin:clamp(2.6rem,4.5vw,3.6rem) auto 0;
  display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.4rem;
  padding-top:1.6rem;border-top:1px solid var(--line);
}
.share-row .share-label{font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
.share-row a,.share-row button{
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--purple-deep);background:none;border:0;
  border-bottom:1px solid var(--line);padding:.25em 0;cursor:pointer;
}
.share-row a:hover,.share-row button:hover{color:var(--purple);border-color:var(--purple)}
.back-link{display:block;max-width:65ch;margin:2.2rem auto 0}

/* ---------- shop ---------- */
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem 2.4rem;padding:clamp(2rem,3.5vw,3rem) var(--pad-x) 0}
.filters a{font-size:.74rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);padding:.3em 0}
.filters a:hover{color:var(--purple-deep)}
.filters a[aria-current="true"]{
  color:var(--purple-deep);font-weight:600;
  text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px;
}
.shop-band{padding-top:clamp(1.6rem,2.6vw,2.4rem)}
.shop-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem 1.5rem;margin-bottom:clamp(1.8rem,3vw,2.6rem);
}
.result-count{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.sort-wrap{display:flex;align-items:center;gap:.7rem}
.sort-wrap label{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
select.sort{
  font-family:var(--sans);font-size:.8rem;font-weight:300;color:var(--ink);
  background:var(--white);border:1px solid var(--line);padding:.6em 2em .6em .8em;
}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(2.4rem,4vw,3.4rem) clamp(1.2rem,2vw,1.8rem)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.product{text-align:center;position:relative}
.product a{color:var(--ink);display:block}
.tile{aspect-ratio:3/4;background:var(--cream);overflow:hidden;display:grid;place-items:center;position:relative}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.product a:hover .tile img{transform:scale(1.025)}
.tile-type{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem;padding:1.6rem;text-align:center;transition:opacity .3s ease}
.product a:hover .tile-type{opacity:.92}
.product h3{font-family:var(--sans);font-weight:400;font-size:.88rem;letter-spacing:.06em;line-height:1.5;margin-top:1.3rem}
.product a:hover h3{color:var(--purple-deep)}
.price{display:block;margin-top:.35rem;font-size:.82rem;font-weight:300;letter-spacing:.08em;color:var(--ink-soft)}
.price-was{margin-left:.5em;text-decoration:line-through;opacity:.6}
.badge{
  position:absolute;top:.8rem;left:.8rem;z-index:3;
  font-size:.6rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  padding:.45em .9em;background:var(--aubergine);color:#fff;
}
.badge-sale{background:var(--sale)}
.badge-new{background:var(--purple)}
.product.is-sold .tile img{opacity:.62;filter:saturate(.4)}
.grid-note{margin-top:clamp(2.6rem,4vw,3.6rem);text-align:center;font-size:.74rem;letter-spacing:.1em;color:var(--ink-soft)}

/* ---------- product detail ---------- */
.product-layout{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2.4rem,5vw,4.5rem);padding:clamp(2rem,4vw,3.4rem) var(--pad-x) clamp(3rem,6vw,5rem);
  max-width:calc(var(--wrap) + 2 * 4.5rem);margin-inline:auto;
}
.gallery{display:grid;grid-template-columns:82px minmax(0,1fr);gap:1rem;align-items:start}
.gallery-single{grid-template-columns:minmax(0,1fr)}
.thumbs{display:flex;flex-direction:column;gap:.7rem}
.thumbs button{border:1px solid var(--line);background:none;padding:0;cursor:pointer;aspect-ratio:3/4;overflow:hidden}
.thumbs button.on{border-color:var(--purple)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.stage{background:var(--cream);overflow:hidden;position:relative}
.stage img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:opacity .3s ease}
.stage-nav{position:absolute;inset:auto 0 1rem;display:flex;justify-content:space-between;padding:0 1rem}
.stage-nav button{background:rgba(255,255,255,.9);border:0;width:2.4rem;height:2.4rem;cursor:pointer;display:grid;place-items:center;color:var(--aubergine)}
.stage-nav button:hover{background:#fff}
.pd-cat{display:inline-block;font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--purple-deep);margin-bottom:.9rem}
.pd h1{font-size:clamp(1.8rem,3vw,2.6rem)}
.pd-price-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:.9rem;margin-top:1.2rem}
.pd-price{font-family:var(--serif);font-size:1.6rem;font-weight:500;color:var(--ink)}
.pd-was{text-decoration:line-through;color:var(--ink-soft);font-size:1rem}
.pd-save{font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sale)}
.pd-avail{margin-top:.9rem;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);display:flex;align-items:center;gap:.6rem}
.pd-avail .dot{width:.5rem;height:.5rem;border-radius:50%;background:#3E8A5B;flex:none}
.pd-avail.sold .dot{background:var(--sale)}
.pd-desc{margin-top:1.6rem;color:var(--ink-soft);font-size:.96rem;line-height:1.85}
.pd-specs{display:grid;grid-template-columns:auto 1fr;gap:.55rem 1.4rem;margin-top:1.8rem;font-size:.86rem}
.pd-specs dt{font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);padding-top:.15em}
.pd-specs dd{color:var(--ink)}
.buybox{margin-top:2.2rem;padding:clamp(1.4rem,2.5vw,2rem);background:var(--cream)}
.qty-row{display:flex;flex-wrap:wrap;gap:.8rem;align-items:stretch}
.qty{display:flex;align-items:center;border:1px solid var(--line);background:#fff}
.qty button{width:2.6rem;background:none;border:0;cursor:pointer;font-size:1rem;color:var(--ink-soft)}
.qty button:hover{color:var(--purple-deep)}
.qty input{width:3rem;text-align:center;border:0;background:none;font-family:var(--sans);font-size:.9rem;color:var(--ink);-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.btn-add{flex:1 1 12rem}
.pp-note{margin-top:.9rem;font-size:.78rem;line-height:1.6;color:var(--ink-soft)}
#paypal-container{margin-top:1.1rem}
.pd-assurance{display:grid;gap:.9rem;margin-top:1.6rem}
.pd-assurance>div{display:flex;gap:.7rem;align-items:flex-start;font-size:.82rem;line-height:1.65;color:var(--ink-soft)}
.pd-assurance svg{flex:none;margin-top:.25em;color:var(--purple-deep)}
.sold-banner{margin-top:2.2rem;padding:clamp(1.4rem,2.5vw,2rem);background:var(--mist)}
.sold-banner p{margin-top:.7rem;font-size:.9rem;color:var(--ink-soft)}
.accordion{border-top:1px solid var(--line)}
.accordion summary{
  cursor:pointer;list-style:none;padding:1.05em 0;
  font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--aubergine);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.accordion summary::-webkit-details-marker{display:none}
.accordion summary::after{content:"+";font-weight:400;font-size:1rem}
.accordion[open] summary::after{content:"\2013"}
.acc-body{padding-bottom:1.4em;font-size:.92rem;line-height:1.85;color:var(--ink-soft)}

/* ---------- cart + checkout ---------- */
.cart-layout,.checkout-layout{
  display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,30%,380px);
  gap:clamp(2rem,4vw,3.5rem);
  padding:clamp(2.4rem,4vw,3.6rem) var(--pad-x) clamp(3.4rem,6vw,5.5rem);
  max-width:calc(var(--wrap) + 2 * 4.5rem);margin-inline:auto;align-items:start;
}
.cart-line{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:1.2rem;padding:1.4rem 0;border-bottom:1px solid var(--line)}
.cart-line:first-child{padding-top:0}
.cart-line-img{display:block;aspect-ratio:3/4;background:var(--cream);overflow:hidden}
.cart-line-img img{width:100%;height:100%;object-fit:cover}
.cart-line h3{font-family:var(--sans);font-size:.95rem;font-weight:400;letter-spacing:.04em;line-height:1.5}
.cart-line h3 a{color:var(--ink)}
.cart-line h3 a:hover{color:var(--purple-deep)}
.cart-line .meta{margin-top:.35rem;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.cart-line-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:.9rem}
.cart-line-price{font-family:var(--serif);font-size:1.05rem;white-space:nowrap}
.remove-link{background:none;border:0;border-bottom:1px solid var(--line);cursor:pointer;font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);padding:.2em 0}
.remove-link:hover{color:var(--sale);border-color:var(--sale)}
.summary{background:var(--cream);padding:clamp(1.4rem,2.5vw,2rem);position:sticky;top:1.5rem}
.summary h3{font-size:1.15rem;margin-bottom:1.2rem}
.sum-row{display:flex;justify-content:space-between;gap:1rem;font-size:.88rem;padding:.4rem 0;color:var(--ink-soft)}
.sum-row.total{border-top:1px solid var(--line);margin-top:.6rem;padding-top:.9rem;font-family:var(--serif);font-size:1.1rem;color:var(--ink)}
.sum-note{margin-top:1.1rem;font-size:.76rem;line-height:1.65;color:var(--ink-soft)}
.mini-line{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:.8rem;align-items:center;padding:.6rem 0;border-bottom:1px solid var(--line);font-size:.85rem}
.mini-line img{width:52px;height:66px;object-fit:cover;background:var(--mist)}
.mini-line .t{line-height:1.4}
.mini-line .t em{display:block;font-style:normal;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-top:.2rem}
.fulfill{display:grid;gap:.7rem;margin-bottom:1.2rem}
.fulfill label{display:flex;gap:.6rem;align-items:flex-start;font-size:.85rem;cursor:pointer}
.fulfill em{display:block;font-style:normal;font-size:.74rem;color:var(--ink-soft);line-height:1.55;margin-top:.15rem}
.form-card{background:var(--cream);padding:clamp(1.4rem,2.5vw,2rem);margin-bottom:1.4rem}
.form-card h3{font-size:1.1rem}
.form-card .sub{margin-top:.4rem;margin-bottom:1.2rem;font-size:.82rem;color:var(--ink-soft)}
.field{margin-bottom:1rem}
.field label{display:block;font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.45rem}
.field input,.field textarea{
  width:100%;font-family:var(--sans);font-size:.92rem;font-weight:300;color:var(--ink);
  background:var(--white);border:1px solid var(--line);padding:.8em 1em;
}
.field textarea{min-height:6.5rem;resize:vertical}
.field input:focus,.field textarea:focus{outline:2px solid var(--purple-deep);outline-offset:1px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.field-row-3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:0 1rem}
.nojs-note{margin-top:1rem;padding:1rem;background:var(--mist);font-size:.82rem;line-height:1.65;color:var(--aubergine)}

/* ---------- order confirmation / 404 ---------- */
.confirm{max-width:720px;margin-inline:auto;text-align:center;padding:clamp(3rem,6vw,5rem) var(--pad-x)}
.confirm .tick{
  width:3.6rem;height:3.6rem;border-radius:50%;background:var(--mist);color:var(--purple-deep);
  display:grid;place-items:center;margin:0 auto 1.6rem;
}
.order-no{
  display:inline-block;margin-top:1.4rem;font-size:.72rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--purple-deep);
}
.confirm-card{margin-top:2.4rem;padding:clamp(1.4rem,2.5vw,2rem);background:var(--cream);text-align:left}

/* ---------- responsive ---------- */
@media (min-width:1150px) and (max-width:1649.98px){
  .event-cards{grid-template-columns:1fr}
  .event-media img{height:auto;aspect-ratio:3/2}
}
@media (max-width:1149.98px){
  .page-body{display:block;padding-inline:0}
  .ad-rail{display:none}
  .announce-band{display:block}
}
@media (max-width:980px){
  .grid,.grid-3{grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3rem) clamp(1rem,2.5vw,1.6rem)}
  .article-list{grid-template-columns:1fr 1fr}
  .product-layout,.cart-layout,.checkout-layout{grid-template-columns:1fr}
  .summary{position:static}
}
@media (max-width:900px){
  .latest-grid,.duo,.feature-story{grid-template-columns:1fr}
  .event-cards{grid-template-columns:1fr}
  .event-media img{height:auto;aspect-ratio:3/2}
  .card-grid{grid-template-columns:1fr 1fr}
  .card,.card-grid .card:nth-last-child(2),.card-grid .card:last-child{grid-column:auto}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .announce-grid{grid-template-columns:1fr 1fr;gap:1.2rem}
  .gallery{grid-template-columns:1fr}
  .thumbs{flex-direction:row;flex-wrap:wrap}
  .thumbs button{width:64px}
  .field-row,.field-row-3{grid-template-columns:1fr}
}
@media (max-width:560px){
  .card-grid,.foot-grid,.article-list{grid-template-columns:1fr}
  .cta-row .btn{width:100%}
  .cart-line{grid-template-columns:72px minmax(0,1fr);grid-template-areas:"img body" "price price"}
  .cart-line-img{grid-area:img}
  .cart-line-price{grid-area:price;text-align:right}
  .btn-sm{padding:.65em 1.1em}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ==========================================================================
   Static-page additions — authors.php · podcast.php · subscribe.php · contact.php
   Ported from the approved mockups (FOWM-Redesign/option-a/authors.html and
   podcast.html) plus the few pieces those four pages need that the sections
   above do not provide. Nothing above this line was changed.
   ========================================================================== */

/* ---------- page-body variant: content + a single right-hand rail ---------- */
.page-body-right{grid-template-columns:minmax(0,1fr) clamp(215px,20vw,325px)}

/* ---------- authors hero — full-bleed book photo, white wording ---------- */
.books-hero{
  position:relative;
  min-height:clamp(340px,29vw,420px);
  display:flex;align-items:center;
  padding:clamp(3.25rem,6vw,4.75rem) var(--pad-x);
  background:var(--aubergine) url("../img/books-hero.png") right center/cover no-repeat;
  border-bottom:5px solid var(--purple);
}
.books-hero::before{ /* left-to-right scrim: text sits in the strong zone; the open book stays clear on the right */
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(20,10,25,.78) 0%,
    rgba(20,10,25,.64) 50%,
    rgba(20,10,25,.15) 80%,
    rgba(20,10,25,0) 100%);
}
.books-hero-inner{position:relative;max-width:var(--wrap);margin-inline:auto;width:100%}
.books-hero .eyebrow{color:var(--mist)}
.books-hero h1{color:#fff}
.books-hero .lede{color:#fff;max-width:52ch;margin-top:1.5rem}
.books-hero .text-link{
  display:inline-block;margin-top:2.2rem;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.65);padding-bottom:.25em;
  transition:color .25s ease,border-color .25s ease;
}
.books-hero .text-link:hover{color:var(--mist);border-color:var(--mist)}

/* ---------- book grid ---------- */
#books{scroll-margin-top:1.5rem}
.book-grid{
  list-style:none;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(2.4rem,4vw,3.4rem) clamp(1.4rem,2.4vw,2.2rem);
}
.bcard-link{display:block;color:var(--ink)}
.bcard-cover{
  display:block;position:relative;aspect-ratio:3/4;overflow:hidden;
  background:var(--mist);padding:.75rem;
  box-shadow:0 22px 40px -28px rgba(56,32,60,.42);
  transition:box-shadow .3s ease,transform .3s ease;
}
.bcard-cover img{width:100%;height:100%;object-fit:contain;transition:transform .45s ease}
.bcard-link:hover .bcard-cover{box-shadow:0 30px 52px -30px rgba(56,32,60,.55);transform:translateY(-4px)}
.bcard-link:hover .bcard-cover img{transform:scale(1.03)}
.bcard-title{
  display:block;font-family:var(--serif);font-weight:500;letter-spacing:.02em;
  font-size:clamp(.98rem,1.35vw,1.14rem);line-height:1.4;
  margin-top:1.3rem;
  transition:color .25s ease;
}
.bcard-link:hover .bcard-title{color:var(--purple-deep)}
.bcard-author{
  display:block;margin-top:.5rem;
  font-size:.72rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);
}
.bcard-more{
  display:inline-block;margin-top:.85rem;
  font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--purple-deep);
  border-bottom:1px solid var(--mist-deep);padding-bottom:.2em;
  transition:color .25s ease,border-color .25s ease;
}
.bcard-link:hover .bcard-more{color:var(--purple);border-color:var(--purple)}

/* ---------- book popups — pure CSS :target, no JavaScript required ---------- */
.bmodal{
  display:none;position:fixed;inset:0;z-index:150;
  padding:clamp(1rem,3vw,2.5rem) var(--pad-x);
}
.bmodal:target{display:grid;place-items:center}
.bmodal-backdrop{
  position:absolute;inset:0;background:rgba(56,32,60,.62);
  cursor:pointer;
}
.bmodal-shell{
  position:relative;z-index:1;width:min(920px,100%);
  animation:bmodal-in .35s ease both;
}
@keyframes bmodal-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.bmodal-close{
  position:absolute;top:0;right:0;z-index:2;
  width:2.9rem;height:2.9rem;
  display:flex;align-items:center;justify-content:center;
  background:var(--aubergine);color:#fff;
  font-family:var(--sans);font-weight:300;font-size:1.35rem;line-height:1;
  transition:background .25s ease;
}
.bmodal-close:hover{background:var(--purple);color:#fff}
.bmodal-close:focus-visible{outline-color:#fff;outline-offset:-4px}
.bmodal-card{
  background:var(--white);
  max-height:85vh;overflow:auto;overscroll-behavior:contain;
  box-shadow:0 40px 80px -40px rgba(26,26,26,.55);
  display:grid;grid-template-columns:minmax(230px,300px) 1fr;
  gap:clamp(1.8rem,3vw,2.8rem);
  padding:clamp(1.8rem,3.5vw,3rem);
}
.bmodal-media{display:grid;gap:1.1rem;align-content:start}
.bmodal-frame{
  display:flex;align-items:center;justify-content:center;
  background:var(--mist);padding:.9rem;
  box-shadow:0 18px 34px -26px rgba(56,32,60,.4);
}
.bmodal-frame img{max-height:100%;width:auto;max-width:100%;object-fit:contain;margin:auto}
.bmodal-frame-cover{aspect-ratio:3/4}
.bmodal-frame-author{aspect-ratio:1/1}
.bmodal-thumbs{display:flex;flex-wrap:wrap;gap:.7rem}
.bmodal-thumbs .bmodal-frame{padding:.45rem;height:5.4rem;flex:0 1 auto;box-shadow:none;border:1px solid var(--mist-deep)}
.bmodal-thumbs img{max-height:4.5rem}
.bmodal-body h2{font-size:clamp(1.35rem,2.2vw,1.85rem);line-height:1.32;padding-right:2.2rem}
.bmodal-byline{
  margin-top:.9rem;
  font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--purple-deep);
}
.bmodal-desc{
  margin-top:1.5rem;max-width:65ch;
  font-size:.95rem;line-height:1.85;color:var(--ink-soft);
}
.bmodal-return{display:inline-block;margin-top:2rem}

/* ---------- podcast hero + episode list ---------- */
.pod-hero{padding-top:clamp(3.5rem,7vw,6rem)}
.pod-hero-grid{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(2.5rem,6vw,6rem);align-items:center;
}
.pod-hero h1{max-width:16ch}
.pod-hero .lede{max-width:46ch;margin-top:1.6rem}
.pod-hero-media{position:relative;padding:clamp(1.6rem,3vw,2.6rem) clamp(1.6rem,3vw,2.6rem) 0 0;margin:0}
.pod-hero-media::before{
  content:"";position:absolute;top:0;right:0;bottom:clamp(1.6rem,3vw,2.6rem);left:clamp(2rem,3.5vw,3rem);
  background:var(--mist);
}
.pod-hero-media img{
  position:relative;width:100%;aspect-ratio:4/3;object-fit:cover;
  box-shadow:0 26px 48px -32px rgba(56,32,60,.35);
}
.listen-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.8rem;margin-top:2.4rem;
}
.listen-label{
  font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);
}
.listen-row a{
  font-size:.76rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--purple-deep);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;
}
.listen-row a:hover{color:var(--purple)}
.featured{max-width:820px;margin-inline:auto}
.featured .serif-title{
  font-family:var(--serif);font-weight:500;font-style:italic;
  font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.35;
}
.featured p{margin-top:1.6rem}
.episodes{max-width:860px;margin-inline:auto}
.episodes ol{list-style:none;counter-reset:ep;margin-top:clamp(2.6rem,4.5vw,4rem)}
.episode{
  counter-increment:ep;
  display:grid;grid-template-columns:4.5rem 1fr;gap:1.2rem 2rem;align-items:baseline;
  padding:clamp(1.4rem,2.4vw,2rem) clamp(1rem,2vw,1.8rem);
  transition:background .3s ease;
}
.episode:hover{background:var(--cream)}
.episode::before{
  content:counter(ep,decimal-leading-zero);
  font-family:var(--serif);font-size:clamp(1.3rem,2vw,1.7rem);
  color:#C9AECF;letter-spacing:.05em;
}
.episode h3 a{color:var(--ink)}
.episode h3 a:hover{color:var(--purple-deep)}
.episode .guest{
  margin-top:.45rem;font-size:.74rem;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
}
.episode .guest time{letter-spacing:inherit}

/* ---------- subscribe + contact page scaffolding ---------- */
.subscribe-layout{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2.5rem,5vw,5rem);align-items:start;
  max-width:var(--wrap);margin-inline:auto;
}
.contact-layout{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2.5rem,5vw,4.5rem);align-items:start;
  max-width:var(--wrap);margin-inline:auto;
}
.price-tag{
  margin-top:1.6rem;font-family:var(--serif);font-size:clamp(1.5rem,2.4vw,2rem);
  font-weight:500;color:var(--aubergine);
}
.price-tag span{
  display:block;font-family:var(--sans);font-size:.7rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--purple-deep);margin-top:.4rem;
}
.perk-list{list-style:none;margin-top:1.4rem;display:grid;gap:.55rem;max-width:54ch}
.perk-list li{
  font-family:var(--serif);font-size:1.02rem;line-height:1.55;
  padding-left:1.5rem;position:relative;
}
.perk-list li::before{
  content:"";position:absolute;left:0;top:.75em;
  width:.8rem;height:1px;background:var(--purple);
}
.field select{
  width:100%;font-family:var(--sans);font-size:.92rem;font-weight:300;color:var(--ink);
  background:var(--white);border:1px solid var(--line);padding:.8em 1em;
}
.field select:focus{outline:2px solid var(--purple-deep);outline-offset:1px}
/* Honeypot: parked far off-screen (display:none would spare the bots too) */
.hp-field{position:absolute !important;left:-9999px !important;top:auto;width:1px;height:1px;overflow:hidden}
.form-errors{
  background:#F7E7E7;color:var(--sale);
  padding:1rem 1.2rem;margin-bottom:1.4rem;font-size:.86rem;line-height:1.7;
}
.form-errors ul{margin-top:.3rem;padding-left:1.2em}
.contact-line{display:flex;align-items:baseline;gap:.9rem;padding:.55rem 0;font-size:.92rem}
.contact-line .t{flex:none;font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);min-width:5.5rem}
/* Crisis hotlines on a light page (the footer keeps its dark copy) */
.crisis-block{
  background:var(--mist);
  padding:clamp(1.8rem,3.2vw,2.8rem);text-align:center;
  max-width:var(--wrap);margin-inline:auto;
}
.crisis-block h2{font-size:clamp(1.35rem,2.1vw,1.75rem);font-style:italic;color:var(--aubergine)}
.crisis-block ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 2.6rem;margin-top:1.3rem}
.crisis-block li{font-size:.88rem;color:var(--ink-soft)}
.crisis-block a{color:var(--purple-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.crisis-block a:hover{color:var(--aubergine)}
.crisis-block .small{margin-top:1.1rem}

/* ---------- responsive for the additions ---------- */
/* Rail visible (>=1150px): the books column is narrower, so hold 3 columns.
   Between 1025–1149px the rail is hidden and the grid breathes at 4. */
@media (min-width:1150px){
  .book-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1024px){
  .book-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .books-hero::before{background:rgba(20,10,25,.65)} /* uniform scrim once text fills the band */
  .pod-hero-grid{grid-template-columns:1fr}
  .subscribe-layout,.contact-layout{grid-template-columns:1fr}
}
@media (max-width:760px){
  .bmodal{padding:clamp(.8rem,2.5vw,1.5rem)}
  .bmodal-card{grid-template-columns:1fr;max-height:88vh}
  .bmodal-media{grid-template-columns:1fr 1fr;align-items:start}
  .bmodal-thumbs{grid-column:1/-1}
  .bmodal-body h2{padding-right:2.6rem}
}
@media (max-width:680px){
  .book-grid{grid-template-columns:repeat(2,1fr);gap:2.2rem 1.1rem}
}
@media (max-width:560px){
  .episode{grid-template-columns:2.8rem 1fr;gap:.8rem 1rem}
}

/* ================= Articles hero — live site's banner, compact (Round 15) =================
   Replaces the cream page-hero on articles.php only. */
.articles-hero{
  position:relative;
  min-height:clamp(240px,22vw,310px);
  display:flex;align-items:center;
  padding:clamp(2.2rem,4vw,3rem) var(--pad-x,clamp(1.25rem,4vw,3rem));
  background:#38203C url("../img/articles-hero.png") right center/cover no-repeat;
  border-bottom:5px solid #9D489D;
}
.articles-hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(20,10,25,.8) 0%,
    rgba(20,10,25,.62) 52%,
    rgba(20,10,25,.18) 82%,
    rgba(20,10,25,.05) 100%);
}
.articles-hero .wrap{position:relative}
.articles-hero .eyebrow{color:#F3ECF5}
.articles-hero h1{color:#fff;font-size:clamp(1.6rem,2.6vw,2.2rem);max-width:26ch}
.articles-hero .lede{color:#fff;max-width:64ch;margin-top:1rem;font-size:.95rem;line-height:1.75}
/* The search sits above the list rather than in the hero, so it runs the width of
   the article column and needs no light-on-dark treatment. */
.articles-main .searchbar{
  margin:0 0 clamp(1.7rem,2.8vw,2.4rem);max-width:none;
}
.articles-main .active-filters{margin-top:-.6rem}
@media (max-width:900px){
  .articles-hero::before{background:rgba(20,10,25,.68)}
}

/* ================= About page (Round 16) — hero, story bands, pull-quote, =================
   team cards + popups, trust grid. The hero repeats the compact Round-15
   banner pattern from articles.php; the popups reuse the .bmodal system from
   authors.php unchanged (only the square team frame is new). */
.about-hero{
  position:relative;
  min-height:clamp(240px,22vw,310px);
  display:flex;align-items:center;
  padding:clamp(2.2rem,4vw,3rem) var(--pad-x);
  background:#38203C url("../img/about-hero.png") right center/cover no-repeat;
  border-bottom:5px solid #9D489D;
}
.about-hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(20,10,25,.8) 0%,
    rgba(20,10,25,.62) 52%,
    rgba(20,10,25,.18) 82%,
    rgba(20,10,25,.05) 100%);
}
.about-hero .wrap{position:relative}
.about-hero .eyebrow{color:#F3ECF5}
.about-hero h1{color:#fff;font-size:clamp(1.6rem,2.6vw,2.2rem);max-width:26ch}
.about-hero .lede{color:#fff;max-width:64ch;margin-top:1rem;font-size:.95rem;line-height:1.75}

/* Story copy — one comfortable-measure column */
.about-copy{max-width:70ch;margin-inline:auto}
.about-copy p{font-size:.98rem;line-height:1.85;color:var(--ink-soft)}
.about-copy p + p{margin-top:1.5rem}

/* The vision line as a display quote */
.about-quote{border-block:1px solid rgba(255,255,255,.08)}
.pullquote{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(1.55rem,3vw,2.35rem);line-height:1.35;letter-spacing:.02em;
  color:#fff;max-width:24ch;margin-inline:auto;
}
.pullquote-src{
  margin-top:1.3rem;
  font-size:.68rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:#D9BFDF;
}

/* Team cards — the book-card rhythm, square photographs */
#team{scroll-margin-top:1.5rem}
.team-grid{
  list-style:none;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(2.4rem,4vw,3.4rem) clamp(1.4rem,2.4vw,2.2rem);
}
.tcard-link{display:block;color:var(--ink)}
.tcard-photo{
  display:block;position:relative;aspect-ratio:1/1;overflow:hidden;
  background:var(--mist);
  box-shadow:0 22px 40px -28px rgba(56,32,60,.42);
  transition:box-shadow .3s ease,transform .3s ease;
}
.tcard-photo img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.tcard-link:hover .tcard-photo{box-shadow:0 30px 52px -30px rgba(56,32,60,.55);transform:translateY(-4px)}
.tcard-link:hover .tcard-photo img{transform:scale(1.03)}
.tcard-name{
  display:block;font-family:var(--serif);font-weight:500;letter-spacing:.02em;
  font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.4;
  margin-top:1.3rem;
  transition:color .25s ease;
}
.tcard-link:hover .tcard-name{color:var(--purple-deep)}
.tcard-role{
  display:block;margin-top:.5rem;
  font-size:.72rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);
}
.tcard-more{
  display:inline-block;margin-top:.85rem;
  font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--purple-deep);
  border-bottom:1px solid var(--mist-deep);padding-bottom:.2em;
  transition:color .25s ease,border-color .25s ease;
}
.tcard-link:hover .tcard-more{color:var(--purple);border-color:var(--purple)}
/* Popup: square team frame — the mockup's mist matte around a cover-cropped
   photograph (the shared .bmodal-frame img rule is "contain", for book covers) */
.bmodal-frame-team{padding:.9rem;background:var(--mist)}
.bmodal-frame-team img{width:100%;height:100%;object-fit:cover;max-height:none}
.bmodal-desc + .bmodal-desc{margin-top:1.05rem}

/* Trust grid — the magazine's own facts, quietly */
.trust-grid{
  max-width:var(--wrap);margin-inline:auto;text-align:center;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(1.6rem,3vw,2.6rem);
}
.trust-item .t-fig{
  font-family:var(--serif);font-weight:500;letter-spacing:.02em;
  font-size:clamp(1.3rem,2.1vw,1.7rem);line-height:1.3;color:var(--aubergine);
}
.trust-item .t-cap{
  margin-top:.55rem;
  font-size:.72rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;
  line-height:1.7;color:var(--ink-soft);
}

/* Responsive for the About additions */
@media (max-width:900px){
  .about-hero::before{background:rgba(20,10,25,.68)}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
  .team-grid{grid-template-columns:1fr;max-width:340px;margin-inline:auto}
  .trust-grid{grid-template-columns:1fr;gap:1.6rem}
}

/* ==== ported from the approved Option A mockup ==================== */

/* footer typography — matches the approved mockup (Round 32/33/38/50) */
b,strong{font-weight:600}
.foot-mission{display:none}
.foot-col h3{font-size:.78rem;font-weight:700;letter-spacing:.07em;color:var(--ink)}
.foot-col ul{gap:.75rem}
.foot-col a{
  color:var(--ink);font-size:.9rem;font-weight:400;
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;
}
.foot-col a:hover{color:var(--purple-deep);text-decoration-color:var(--purple-deep)}
.foot-col p{font-size:.9rem;line-height:1.9;color:var(--ink)}
.foot-base{
  padding-top:1.7rem;border-top:1px solid var(--mist-deep);
  font-size:.74rem;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
}
.foot-base a{color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.bbb-badge{display:block;width:min(220px,60vw);margin-top:2rem;text-align:center;color:inherit}
.bbb-badge img{margin-inline:auto}
.bbb-badge .bbb-cap{font-size:.66rem;font-weight:600;letter-spacing:.08em;opacity:.9}
.foot-col .foot-social{
  list-style:none;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;
  gap:1.15rem;margin-top:1.2rem;
}
.foot-col .foot-social a{display:inline-flex;text-decoration:none}
.foot-social svg{width:1.35rem;height:1.35rem;display:block;fill:currentColor}

/* --- 1. split hero: full-bleed photograph | flat cream panel ---
   The resets below neutralise the earlier, pre-redesign .pod-hero band rules
   (section padding, the offset mist rectangle behind the photo) so the hero is
   genuinely full-bleed. */
.pod-hero{
  display:grid;grid-template-columns:minmax(0,47fr) minmax(0,53fr);
  min-height:clamp(300px,33vw,460px);background:var(--cream);padding:0;
}
.pod-hero-media{position:relative;overflow:hidden;padding:0;margin:0}
.pod-hero-media::before{content:none}
.pod-hero-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  aspect-ratio:auto;box-shadow:none;
}
.pod-hero-panel{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(2rem,4.5vw,3.6rem) clamp(1.5rem,4.5vw,4.2rem);
}
.pod-hero-panel h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.7rem,2.9vw,2.55rem);line-height:1.28;letter-spacing:.05em;
  max-width:20ch;color:var(--ink);
}
.pod-hero-panel .pod-hero-sub{
  margin-top:clamp(1.2rem,2.2vw,1.7rem);max-width:40ch;
  font-size:.92rem;line-height:1.95;color:var(--ink-soft);
}
.pod-hero-meta{
  margin-top:1.15rem;font-size:.68rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--purple-deep);
}

/* --- 2. featured episode --- */
.pod-featured{max-width:820px;margin-inline:auto}
.pod-featured .eyebrow{margin-bottom:1.1rem}
.pod-featured h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.55rem,2.9vw,2.35rem);line-height:1.32;letter-spacing:.02em;
}
.pod-player{
  margin-top:clamp(2rem,3.4vw,2.8rem);
  border:1px solid var(--mist-deep);border-radius:6px;background:#fff;
  padding:.55rem;overflow:hidden;
}
.pod-player iframe{display:block;width:100%;height:152px;border:0;border-radius:4px}
.pod-links{
  display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;margin-top:1.1rem;padding:0 .3rem;
}
.pod-links a{
  font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);
}
.pod-links a:hover{color:var(--purple-deep)}
.pod-lead{
  margin-top:clamp(2.4rem,4vw,3.4rem);
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.15rem,1.9vw,1.45rem);line-height:1.55;color:var(--ink);
}
.pod-body{margin-top:1.6rem;max-width:68ch;font-size:.95rem;line-height:1.95;color:var(--ink-soft)}
.pod-body + .pod-body{margin-top:1.2rem}
.pod-mark{
  margin-top:clamp(2.2rem,3.6vw,3rem);
  font-family:var(--serif);font-size:clamp(1.1rem,1.8vw,1.35rem);line-height:1.7;
}
.pod-mark span{background:var(--mist-deep);padding:.14em .3em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.pod-hear{margin-top:clamp(2.2rem,3.6vw,3rem);max-width:68ch;font-size:.95rem;line-height:1.95;color:var(--ink-soft)}
.pod-hear ul{list-style:none;margin-top:.8rem}
.pod-hear li{position:relative;padding-left:1.2rem;margin-top:.35rem}
.pod-hear li::before{content:"\2022";position:absolute;left:0;color:var(--purple)}

/* --- 3. subscribe band --- */
.pod-sub{background:var(--mist);padding:clamp(3rem,6vw,5.5rem) var(--pad-x)}
.pod-sub-grid{
  max-width:var(--wrap);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.pod-sub-cover img{
  width:100%;height:auto;display:block;
  box-shadow:0 26px 52px -30px rgba(56,32,60,.5);
}
.pod-sub h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.4rem,2.6vw,2.15rem);line-height:1.4;letter-spacing:.02em;
  margin-top:.9rem;max-width:22ch;
}
.pod-sub h2 em{font-style:italic}
.pod-platforms{display:flex;flex-wrap:wrap;gap:1rem;margin-top:clamp(1.6rem,2.8vw,2.2rem)}
.pod-platform{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.9rem;height:2.9rem;border-radius:9px;background:var(--ink);color:#fff;
  transition:background .25s ease,transform .25s ease;
}
.pod-platform:hover{background:var(--purple-deep);transform:translateY(-2px)}
.pod-platform svg{width:1.55rem;height:1.55rem;display:block;fill:currentColor}
.pod-hero-platforms{margin-top:clamp(1.4rem,2.4vw,1.9rem);gap:.7rem}
.pod-hero-platforms .pod-platform{width:2.6rem;height:2.6rem;border-radius:8px}
.pod-hero-platforms .pod-platform svg{width:1.35rem;height:1.35rem}

/* --- 7. compact closing bands (Round 40) — same content, less air --- */
.pod-tight{padding-block:clamp(2.2rem,4vw,3.2rem)}
.pod-tight .pod-arch h2{font-size:clamp(1.2rem,1.9vw,1.5rem)}
.pod-tight .pod-arch-note{margin-top:.7rem;line-height:1.75}
.pod-tight .pod-arch-list{margin-top:1.2rem;gap:.55rem}
.pod-tight .pod-arch-list li{padding-bottom:.6rem}
.pod-arch-note-2{margin-top:1.5rem}
.pod-tight .pod-featured-in{margin-top:.9rem;gap:.55rem .7rem}
.pod-tight .pod-featured-in a{padding:.5em .95em;font-size:.76rem}
.pod-pitch .eyebrow{margin-bottom:.8rem}
.pod-pitch h2{font-size:clamp(1.4rem,2.4vw,1.95rem)}
.pod-pitch .cta-row{margin-top:1.4rem}
.pod-pitch .btn{padding:.9em 2rem}

/* --- 4. episode grid --- */
.pod-grid-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1rem}
.pod-grid-head h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:.02em;
}
.pod-grid-head .pod-total{
  font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
}
.pod-grid{
  list-style:none;margin-top:clamp(2.2rem,3.8vw,3.2rem);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(2.2rem,3.6vw,3rem) clamp(1.4rem,2.4vw,2rem);
}
.pod-card a{display:block;color:var(--ink)}
.pod-card-art{
  display:block;position:relative;overflow:hidden;background:var(--mist);
  aspect-ratio:1/1;box-shadow:0 20px 38px -30px rgba(56,32,60,.5);
  transition:box-shadow .3s ease,transform .3s ease;
}
.pod-card-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.pod-card a:hover .pod-card-art{transform:translateY(-4px);box-shadow:0 28px 48px -30px rgba(56,32,60,.6)}
.pod-card a:hover .pod-card-art img{transform:scale(1.04)}
.pod-card-title{
  display:block;margin-top:1rem;font-size:.95rem;line-height:1.45;font-weight:400;color:var(--ink);
}
.pod-card a:hover .pod-card-title{color:var(--purple-deep)}
.pod-card-meta{
  display:block;margin-top:.5rem;font-size:.72rem;letter-spacing:.04em;color:var(--ink-soft);
}

/* --- 5. earlier broadcasts + featured links --- */
.pod-arch{max-width:var(--wrap);margin-inline:auto}
.pod-arch h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2.2vw,1.75rem)}
.pod-arch-note{margin-top:.9rem;max-width:62ch;font-size:.88rem;line-height:1.9;color:var(--ink-soft)}
.pod-arch-list{list-style:none;margin-top:1.8rem;display:grid;gap:.9rem}
.pod-arch-list li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;
  padding-bottom:.9rem;border-bottom:1px solid var(--mist-deep);
  font-size:.92rem;color:var(--ink);
}
.pod-arch-list .pod-arch-when{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
}
.pod-featured-in{
  display:flex;flex-wrap:wrap;gap:.7rem 1rem;margin-top:1.6rem;
}
.pod-featured-in a{
  font-size:.78rem;letter-spacing:.04em;color:var(--purple-deep);
  border:1px solid var(--mist-deep);padding:.6em 1.1em;
}
.pod-featured-in a:hover{border-color:var(--purple-deep);background:#fff}

/* --- 7. compact closing bands (Round 40) — same content, less air --- */
.pod-tight{padding-block:clamp(2.2rem,4vw,3.2rem)}
.pod-tight .pod-arch h2{font-size:clamp(1.2rem,1.9vw,1.5rem)}
.pod-tight .pod-arch-note{margin-top:.7rem;line-height:1.75}
.pod-tight .pod-arch-list{margin-top:1.2rem;gap:.55rem}
.pod-tight .pod-arch-list li{padding-bottom:.6rem}
.pod-arch-note-2{margin-top:1.5rem}
.pod-tight .pod-featured-in{margin-top:.9rem;gap:.55rem .7rem}
.pod-tight .pod-featured-in a{padding:.5em .95em;font-size:.76rem}
.pod-pitch .eyebrow{margin-bottom:.8rem}
.pod-pitch h2{font-size:clamp(1.4rem,2.4vw,1.95rem)}
.pod-pitch .cta-row{margin-top:1.4rem}
.pod-pitch .btn{padding:.9em 2rem}

/* --- 4. episode grid --- */
.pod-grid-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1rem}
.pod-grid-head h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:.02em;
}
.pod-grid-head .pod-total{
  font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
}
.pod-grid{
  list-style:none;margin-top:clamp(2.2rem,3.8vw,3.2rem);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(2.2rem,3.6vw,3rem) clamp(1.4rem,2.4vw,2rem);
}
.pod-card a{display:block;color:var(--ink)}
.pod-card-art{
  display:block;position:relative;overflow:hidden;background:var(--mist);
  aspect-ratio:1/1;box-shadow:0 20px 38px -30px rgba(56,32,60,.5);
  transition:box-shadow .3s ease,transform .3s ease;
}
.pod-card-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.pod-card a:hover .pod-card-art{transform:translateY(-4px);box-shadow:0 28px 48px -30px rgba(56,32,60,.6)}
.pod-card a:hover .pod-card-art img{transform:scale(1.04)}
.pod-card-title{
  display:block;margin-top:1rem;font-size:.95rem;line-height:1.45;font-weight:400;color:var(--ink);
}
.pod-card a:hover .pod-card-title{color:var(--purple-deep)}
.pod-card-meta{
  display:block;margin-top:.5rem;font-size:.72rem;letter-spacing:.04em;color:var(--ink-soft);
}

/* --- 5. earlier broadcasts + featured links --- */
.pod-arch{max-width:var(--wrap);margin-inline:auto}
.pod-arch h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2.2vw,1.75rem)}
.pod-arch-note{margin-top:.9rem;max-width:62ch;font-size:.88rem;line-height:1.9;color:var(--ink-soft)}
.pod-arch-list{list-style:none;margin-top:1.8rem;display:grid;gap:.9rem}
.pod-arch-list li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;
  padding-bottom:.9rem;border-bottom:1px solid var(--mist-deep);
  font-size:.92rem;color:var(--ink);
}
.pod-arch-list .pod-arch-when{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
}
.pod-featured-in{
  display:flex;flex-wrap:wrap;gap:.7rem 1rem;margin-top:1.6rem;
}
.pod-featured-in a{
  font-size:.78rem;letter-spacing:.04em;color:var(--purple-deep);
  border:1px solid var(--mist-deep);padding:.6em 1.1em;
}
.pod-featured-in a:hover{border-color:var(--purple-deep);background:#fff}

/* --- 6. pager (matches the articles page) --- */
.pod-card[hidden]{display:none !important}
.pager{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.45rem;
  margin-top:clamp(2.6rem,4.5vw,3.6rem);padding-top:clamp(1.8rem,3vw,2.4rem);
  border-top:1px solid var(--mist-deep);
}
.pg-nums{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.pg-num,.pg-arrow{
  font-family:var(--sans);font-size:.82rem;font-weight:600;letter-spacing:.06em;
  min-width:2.4rem;height:2.4rem;padding:0 .55rem;
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;color:var(--purple-deep);border:1px solid var(--mist-deep);
  cursor:pointer;transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.pg-num:hover,.pg-arrow:not([disabled]):hover{background:var(--mist);border-color:var(--purple-deep)}
.pg-num[aria-current="page"]{background:var(--purple);border-color:var(--purple);color:#fff;cursor:default}
.pg-arrow{font-size:1.15rem;line-height:1}
.pg-arrow[disabled]{opacity:.3;cursor:default}
.pg-gap{padding:0 .15rem;font-size:.82rem;color:var(--ink-soft)}
.pg-count{
  flex:1 0 100%;text-align:center;margin-top:1rem;
  font-family:var(--sans);font-size:.7rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
}

.ev-intro{
  margin-top:1.1rem;font-family:var(--serif);font-style:italic;
  font-size:clamp(1rem,1.3vw,1.15rem);color:var(--ink-soft);
}
.ev-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.8rem,3.2vw,3rem);margin-top:clamp(2.4rem,4vw,3.4rem);
}
.ev-card{
  background:var(--white);display:flex;flex-direction:column;text-align:left;
  padding-top:clamp(1.5rem,2.6vw,2.2rem);
}
.ev-flyer{
  display:block;position:relative;width:min(100%,330px);margin-inline:auto;
  background:var(--mist);color:inherit;
  box-shadow:0 22px 44px -30px rgba(56,32,60,.45);
}
.ev-flyer img{
  width:100%;height:auto;display:block;
  transition:opacity .3s ease;
}
.ev-flyer:hover img{opacity:.92}
.ev-flyer-cue{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(to top,rgba(26,26,26,.8),rgba(26,26,26,0));
  color:#fff;padding:1.9rem .9rem .7rem;text-align:center;
  font-family:var(--sans);font-size:.62rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
}
.ev-body{padding:clamp(1.5rem,2.6vw,2.2rem);display:flex;flex-direction:column;flex:1 1 auto}
.ev-body h3{font-size:clamp(1.1rem,1.6vw,1.35rem);line-height:1.35}
.ev-when{
  margin-top:.9rem;font-size:.74rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--purple-deep);line-height:1.7;
}
.ev-where{
  margin-top:.25rem;font-size:.74rem;font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);line-height:1.7;
}
.ev-times{list-style:none;margin-top:.85rem;display:grid;gap:.3rem}
.ev-times li{font-size:.84rem;line-height:1.6;color:var(--ink-soft)}
.ev-times span{
  display:inline-block;min-width:9.5em;font-weight:600;color:var(--ink);
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
}
.ev-lead{
  margin-top:1.3rem;font-size:.68rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);
}
.ev-honorees{list-style:none;margin-top:.7rem;display:grid;gap:.55rem}
.ev-honorees li{
  position:relative;padding-left:.95rem;
  font-size:.85rem;line-height:1.65;color:var(--ink-soft);
}
.ev-honorees li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:.34rem;height:.34rem;border-radius:50%;background:var(--purple);
}
.ev-honorees b{color:var(--ink);font-weight:600}
.ev-also{margin-top:1rem;font-size:.85rem;line-height:1.7;color:var(--ink-soft)}
.ev-body .btn{align-self:flex-start;margin-top:auto;padding-top:1.5rem}
.ev-body .btn{margin-top:1.6rem}

/* The ticket row at the foot of an event card: PayPal's button, then the
   enquiry link beside it. margin-top:auto keeps both cards' rows on the same
   line however unequal the honouree lists are. The two resets undo .ev-body .btn
   above, which is written for a lone button sitting on its own. */
/* flex-start, not center: the PayPal form is a stack (button, card logos, the
   PayPal mark), and centring the enquiry button against all three drops it below
   the line of the button it sits beside. */
.ev-buy{
  margin-top:auto;padding-top:1.6rem;
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:.55rem .9rem;
}
.ev-buy .btn{margin-top:0;padding-top:.75em}
.ev-buy .pp-form{margin-bottom:0}

/* A shop card whose ticket is bought through PayPal rather than the basket.
   Sits outside the card's anchor, so the form is never nested in a link. */
/* The card becomes a column so the Buy button can be pinned to its foot: the two
   ticket cards have captions of different lengths, and without this their buttons
   sit at different heights side by side. */
.product{display:flex;flex-direction:column}
.product .prod-buy{margin-top:auto;padding-top:.7rem}
.product .prod-buy .pp-form{margin-bottom:0;justify-items:start}
.product .prod-buy .pp-btn{min-width:0;width:100%;padding:0 1rem;height:2.4rem;font-size:.92rem}


@media (max-width:520px){
  .ev-buy{gap:.9rem}
  .ev-buy .pp-form,.ev-buy .btn{width:100%}
  .ev-buy .pp-btn{width:100%}
}
/* the approved home page has no .btn-sm rule, so the events CTA is full .btn size;
   style.css consolidated .btn-sm from the shop/partnerships mockups, which shrank it. */
.ev-body .btn-sm{font-size:.78rem;padding-bottom:1.1em;padding-left:2.4em;padding-right:2.4em}

.proceeds{
  margin-top:clamp(2rem,3.2vw,2.8rem);text-align:center;
  font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--ink-soft);
}

/* ---------- ticket enquiry modals (Round 43) ---------- */
.tmodal{display:none;position:fixed;inset:0;z-index:150;padding:clamp(1rem,3vw,2.5rem) var(--pad-x)}
.tmodal:target{display:grid;place-items:center}
.tmodal-backdrop{position:absolute;inset:0;background:rgba(56,32,60,.62);cursor:pointer}
.tmodal-shell{position:relative;z-index:1;width:min(560px,100%);animation:tmodal-in .3s ease both}
@keyframes tmodal-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.tmodal-close{
  position:absolute;top:0;right:0;z-index:2;width:2.7rem;height:2.7rem;
  display:flex;align-items:center;justify-content:center;
  background:var(--aubergine);color:#fff;font-family:var(--sans);font-size:1.3rem;line-height:1;
  transition:background .25s ease;
}
.tmodal-close:hover{background:var(--purple);color:#fff}
.tmodal-card{
  background:var(--white);max-height:88vh;overflow:auto;overscroll-behavior:contain;
  box-shadow:0 40px 80px -40px rgba(26,26,26,.55);padding:clamp(1.6rem,3.2vw,2.6rem);
}
.tmodal-card .eyebrow{margin-bottom:.7rem}
.tmodal-card h2{font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.3;padding-right:2.4rem}
.tmodal-when{
  margin-top:.6rem;font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--purple-deep);
}
.tform{margin-top:1.5rem;display:grid;gap:.95rem}
.tform-row{display:grid;grid-template-columns:1fr 1fr;gap:.95rem}
.tfield label{
  display:block;margin-bottom:.35rem;font-family:var(--sans);font-size:.68rem;
  font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);
}
.tfield label .req{color:var(--purple);margin-left:.15em}
.tfield input,.tfield select,.tfield textarea{
  width:100%;font-family:var(--sans);font-size:.9rem;font-weight:300;color:var(--ink);
  background:#fff;border:1px solid var(--mist-deep);padding:.62em .8em;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.tfield textarea{resize:vertical;min-height:5.5rem;line-height:1.6}
.tfield input:focus,.tfield select:focus,.tfield textarea:focus{
  outline:none;border-color:var(--purple-deep);box-shadow:0 0 0 3px rgba(157,72,157,.12);
}
.tform-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.tform button{
  margin-top:.3rem;cursor:pointer;font-family:var(--sans);font-size:.76rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;background:var(--purple);color:#fff;
  border:1px solid var(--purple);padding:1em 1.4em;transition:background .25s ease,border-color .25s ease;
}
.tform button:hover{background:var(--purple-deep);border-color:var(--purple-deep)}
.tmodal-alt{
  margin-top:1.1rem;font-size:.78rem;line-height:1.7;color:var(--ink-soft);text-align:center;
}
@media (max-width:520px){.tform-row{grid-template-columns:1fr}}

/* ---------- ticket enquiry modals (Round 43) ---------- */
.tmodal{display:none;position:fixed;inset:0;z-index:150;padding:clamp(1rem,3vw,2.5rem) var(--pad-x)}
.tmodal:target{display:grid;place-items:center}
.tmodal-backdrop{position:absolute;inset:0;background:rgba(56,32,60,.62);cursor:pointer}
.tmodal-shell{position:relative;z-index:1;width:min(560px,100%);animation:tmodal-in .3s ease both}
@keyframes tmodal-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.tmodal-close{
  position:absolute;top:0;right:0;z-index:2;width:2.7rem;height:2.7rem;
  display:flex;align-items:center;justify-content:center;
  background:var(--aubergine);color:#fff;font-family:var(--sans);font-size:1.3rem;line-height:1;
  transition:background .25s ease;
}
.tmodal-close:hover{background:var(--purple);color:#fff}
.tmodal-card{
  background:var(--white);max-height:88vh;overflow:auto;overscroll-behavior:contain;
  box-shadow:0 40px 80px -40px rgba(26,26,26,.55);padding:clamp(1.6rem,3.2vw,2.6rem);
}
.tmodal-card .eyebrow{margin-bottom:.7rem}
.tmodal-card h2{font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.3;padding-right:2.4rem}
.tmodal-when{
  margin-top:.6rem;font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--purple-deep);
}
.tform{margin-top:1.5rem;display:grid;gap:.95rem}
.tform-row{display:grid;grid-template-columns:1fr 1fr;gap:.95rem}
.tfield label{
  display:block;margin-bottom:.35rem;font-family:var(--sans);font-size:.68rem;
  font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);
}
.tfield label .req{color:var(--purple);margin-left:.15em}
.tfield input,.tfield select,.tfield textarea{
  width:100%;font-family:var(--sans);font-size:.9rem;font-weight:300;color:var(--ink);
  background:#fff;border:1px solid var(--mist-deep);padding:.62em .8em;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.tfield textarea{resize:vertical;min-height:5.5rem;line-height:1.6}
.tfield input:focus,.tfield select:focus,.tfield textarea:focus{
  outline:none;border-color:var(--purple-deep);box-shadow:0 0 0 3px rgba(157,72,157,.12);
}
.tform-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.tform button{
  margin-top:.3rem;cursor:pointer;font-family:var(--sans);font-size:.76rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;background:var(--purple);color:#fff;
  border:1px solid var(--purple);padding:1em 1.4em;transition:background .25s ease,border-color .25s ease;
}
.tform button:hover{background:var(--purple-deep);border-color:var(--purple-deep)}
.tmodal-alt{
  margin-top:1.1rem;font-size:.78rem;line-height:1.7;color:var(--ink-soft);text-align:center;
}
@media (max-width:520px){.tform-row{grid-template-columns:1fr}}

/* ---------- publisher beside the archive (Round 44) ---------- */
/* The announcement rails now close after the latest issue, so the events band,
   the archive and everything below them are full-width bands in their own right.
   They used to escape the centre column with a negative margin; that reached
   across the rail columns and, on a wide screen where the rail's adverts run
   longer than the latest-issue band, painted over the bottom of an advert. */
.arch-split{
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(2.2rem,4.5vw,4rem);align-items:start;
}
.arch-pub{
  background:var(--white);padding:clamp(1.6rem,2.8vw,2.4rem);
  text-align:center;position:sticky;top:1.5rem;
}
.arch-pub .eyebrow{margin-bottom:.6rem}
.arch-pub h2{font-size:clamp(1.3rem,2.1vw,1.7rem)}
.arch-pub .publisher-photo{width:min(170px,45vw);margin:1.4rem auto}
.arch-pub .publisher-body{
  max-width:none;font-size:.88rem;line-height:1.85;text-align:left;
}
.arch-pub .publisher-sign{margin-top:1.6rem;font-size:.95rem}
.arch-pub .publisher-sign strong{font-size:1.15rem}
.arch-main .archive-head{max-width:none;margin:0 0 clamp(1.8rem,3vw,2.6rem)}
.arch-main .archive-head h2{font-size:clamp(1.5rem,2.5vw,2.05rem)}
.arch-main .archive-head .lede{margin-top:.9rem;font-size:.95rem}
.arch-main .year-tabs{justify-content:flex-start;margin-bottom:clamp(1.8rem,3vw,2.6rem)}
.arch-main .issue-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){
  .arch-main .issue-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .arch-split{grid-template-columns:1fr;gap:2.6rem}
  .arch-pub{position:static}
}

/* ================= subscribe page (Round 34) ================= */
.sub-grid{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(2.4rem,5vw,4.5rem);align-items:start;
}
.sub-card{
  background:#fff;border:1px solid var(--mist-deep);
  padding:clamp(1.8rem,3.6vw,3rem);
}
.sub-card h1{
  font-family:var(--serif);font-weight:400;text-align:center;
  font-size:clamp(1.5rem,2.6vw,2.05rem);letter-spacing:.02em;
}
.sub-price{
  text-align:center;margin-top:.7rem;
  font-family:var(--sans);font-size:1.05rem;font-weight:600;letter-spacing:.04em;color:var(--purple);
}
.sub-price span{display:block;margin-top:.45rem;font-size:.7rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft)}
.sub-form{margin-top:clamp(1.8rem,3vw,2.4rem)}
.sub-row{display:grid;gap:1.1rem 1.4rem;margin-bottom:1.1rem}
.sub-row.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.sub-row.three{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,.9fr)}
.sub-field label{
  display:block;margin-bottom:.45rem;
  font-family:var(--sans);font-size:.72rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink);
}
.sub-field label .req{color:var(--purple);margin-left:.15em}
.sub-field input,.sub-field select{
  width:100%;font-family:var(--sans);font-size:.92rem;font-weight:300;color:var(--ink);
  background:#fff;border:1px solid var(--mist-deep);padding:.72em .85em;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.sub-field input:focus,.sub-field select:focus{
  outline:none;border-color:var(--purple-deep);box-shadow:0 0 0 3px rgba(157,72,157,.12);
}
.sub-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sub-submit{
  display:block;width:100%;margin-top:1.8rem;cursor:pointer;
  font-family:var(--sans);font-size:.82rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  background:var(--purple);color:#fff;border:1px solid var(--purple);padding:1.05em 1.4em;
  transition:background .25s ease,border-color .25s ease;
}
.sub-submit:hover{background:var(--purple-deep);border-color:var(--purple-deep)}
.sub-cards{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.9rem;
  margin-top:clamp(1.6rem,2.8vw,2.2rem);
}
.sub-cards img{height:44px;width:auto;display:block}
.sub-next{
  margin-top:1.1rem;text-align:center;
  font-size:.82rem;line-height:1.75;color:var(--ink-soft);
}
.sub-next strong{color:var(--ink);font-weight:600}
.sub-secure{
  margin-top:1rem;text-align:center;
  font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
}
.sub-aside h3{
  font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink);margin-bottom:1.1rem;
}
.sub-aside + .sub-aside{margin-top:clamp(2rem,3.4vw,2.8rem)}
.sub-list{list-style:none;display:grid;gap:.85rem}
.sub-list li{position:relative;padding-left:1.5rem;font-size:.92rem;line-height:1.7;color:var(--ink-soft)}
.sub-list li::before{
  content:"";position:absolute;left:0;top:.62em;width:.5rem;height:.5rem;
  background:var(--purple);border-radius:50%;
}
.sub-cover{margin-top:1.2rem;box-shadow:0 24px 44px -30px rgba(56,32,60,.5)}
.sub-cover img{width:100%;height:auto;display:block}
@media (max-width:860px){
  .sub-grid{grid-template-columns:1fr}
  .sub-row.three{grid-template-columns:1fr}
  .sub-row.two{grid-template-columns:1fr}
}

/* ================= partnerships (Round 47) ================= */
.pt-eyebrow{
  font-size:clamp(.86rem,1.4vw,1rem);letter-spacing:.2em;
  margin-bottom:1.1rem;color:var(--purple-deep);
}
.pt-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(2rem,3.4vw,3rem) clamp(1.4rem,2.4vw,2rem);
  margin-top:clamp(2.4rem,4vw,3.4rem);
}
.pt-card{display:flex;flex-direction:column}
.pt-shot{
  display:block;background:var(--mist);aspect-ratio:4/3;overflow:hidden;
  box-shadow:0 18px 34px -28px rgba(56,32,60,.45);
}
.pt-shot img{width:100%;height:100%;object-fit:contain;background:#fff;transition:transform .45s ease}
a.pt-shot:hover img{transform:scale(1.03)}
.pt-card h3{
  margin-top:1rem;font-family:var(--serif);font-weight:500;
  font-size:1.02rem;line-height:1.35;letter-spacing:.02em;color:var(--ink);
}
.pt-card p{margin-top:.5rem;font-size:.85rem;line-height:1.7;color:var(--ink-soft)}
.pt-link{
  margin-top:.7rem;align-self:flex-start;
  font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--purple-deep);
}
.pt-link:hover{color:var(--ink)}
@media (max-width:900px){.pt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pt-grid{grid-template-columns:1fr}}

.prod-meta{
  margin-top:.45rem;font-size:.76rem;line-height:1.6;color:var(--ink-soft);
}
.price .was{
  margin-left:.5rem;font-size:.82em;color:var(--ink-soft);text-decoration-thickness:1px;
}
.tile-flyer{background:var(--mist);display:grid;place-items:center}
.tile-flyer img{width:100%;height:100%;object-fit:cover;object-position:top center}

.art-row[hidden]{display:none !important}
.pager{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.45rem;
  margin-top:clamp(2.6rem,4.5vw,3.6rem);padding-top:clamp(1.8rem,3vw,2.4rem);
  border-top:1px solid var(--mist-deep);
}
.pg-nums{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.pg-num,.pg-arrow{
  font-family:var(--sans);font-size:.82rem;font-weight:600;letter-spacing:.06em;
  min-width:2.4rem;height:2.4rem;padding:0 .55rem;
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;color:var(--purple-deep);border:1px solid var(--mist-deep);
  cursor:pointer;transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.pg-num:hover,.pg-arrow:not([disabled]):hover{background:var(--mist);border-color:var(--purple-deep)}
.pg-num[aria-current="page"]{background:var(--purple);border-color:var(--purple);color:#fff;cursor:default}
.pg-arrow{font-size:1.15rem;line-height:1}
.pg-arrow[disabled]{opacity:.3;cursor:default}
.pg-gap{padding:0 .15rem;font-size:.82rem;color:var(--ink-soft)}
.pg-count{
  flex:1 0 100%;text-align:center;margin-top:1rem;
  font-family:var(--sans);font-size:.7rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
}

.foot-social{
  list-style:none;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;
  gap:1.15rem;margin-top:1.2rem;
}
.foot-col .foot-social a{display:inline-flex;text-decoration:none}
.foot-social svg{width:1.35rem;height:1.35rem;display:block;fill:currentColor}

/* ---------- hero subscribe call-to-action (articles hero) ---------- */
.hero-cta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.4rem;
  margin-top:clamp(1.6rem,2.6vw,2.2rem);
}
.hero-cta-note{
  font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
}

/* ================= home: reader testimonial + issue archive browser =================
   Copied from the approved mockup (option-a). The .arch-* wrapper rules above
   restyle these inside the two-column archive band. */
#archive,#events{scroll-margin-top:1.5rem}

.testimonial{
  display:flex;gap:1.8rem;align-items:center;justify-content:center;
  max-width:680px;margin:clamp(3.2rem,5.5vw,5rem) auto 0;text-align:left;
}
.testimonial img{width:88px;height:88px;object-fit:cover;border-radius:50%;flex:none;box-shadow:0 14px 28px -18px rgba(56,32,60,.4)}
.testimonial blockquote{font-family:var(--serif);font-style:italic;font-size:1.02rem;line-height:1.7;color:var(--ink-soft)}
.testimonial cite{display:block;margin-top:.7rem;font-family:var(--sans);font-style:normal;font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--purple-deep)}

.archive-head{max-width:680px;margin:0 auto clamp(2.4rem,4vw,3.4rem)}
.archive-head .lede{margin-top:1.2rem}
.year-radio{position:absolute;width:1px;height:1px;opacity:0;margin:-1px;pointer-events:none}
.year-tabs{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem;
  margin-bottom:clamp(2.4rem,4vw,3.4rem);
}
.year-tabs label{
  cursor:pointer;font-size:.8rem;font-weight:400;letter-spacing:.12em;
  padding:.5em 1.05em;color:var(--ink-soft);border-radius:999px;
  transition:color .2s ease,background .2s ease;
}
.year-tabs label:hover{color:var(--purple-deep);background:var(--mist)}
.year-panel{display:none}
.panel-year{
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:2rem;text-align:center;
}
.issue-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(2rem,3.4vw,3rem) clamp(1.2rem,2vw,1.8rem);
}
.issue-card{display:flex;flex-direction:column}
.issue-cover{
  display:block;aspect-ratio:3/4;background:var(--mist);overflow:hidden;
  box-shadow:0 16px 30px -22px rgba(56,32,60,.35);
}
.issue-cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.issue-card:hover .issue-cover img{transform:scale(1.025)}
.issue-card h4{font-size:1.02rem;line-height:1.4;margin-top:1.1rem}
.issue-desc{font-size:.84rem;color:var(--ink-soft);line-height:1.65;margin-top:.45rem}
.issue-cta{
  margin-top:auto;padding-top:.85rem;
  font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--purple-deep);
}
.issue-cta:hover{color:var(--purple)}
#yr-2026:checked~.year-tabs label[for="yr-2026"]{background:var(--purple);color:#fff;font-weight:600}
#yr-2026:checked~#panel-2026{display:block}
#yr-2026:focus-visible~.year-tabs label[for="yr-2026"]{outline:2px solid var(--purple-deep);outline-offset:3px}
#yr-2024:checked~.year-tabs label[for="yr-2024"]{background:var(--purple);color:#fff;font-weight:600}
#yr-2024:checked~#panel-2024{display:block}
#yr-2024:focus-visible~.year-tabs label[for="yr-2024"]{outline:2px solid var(--purple-deep);outline-offset:3px}
#yr-2023:checked~.year-tabs label[for="yr-2023"]{background:var(--purple);color:#fff;font-weight:600}
#yr-2023:checked~#panel-2023{display:block}
#yr-2023:focus-visible~.year-tabs label[for="yr-2023"]{outline:2px solid var(--purple-deep);outline-offset:3px}
#yr-2022:checked~.year-tabs label[for="yr-2022"]{background:var(--purple);color:#fff;font-weight:600}
#yr-2022:checked~#panel-2022{display:block}
#yr-2022:focus-visible~.year-tabs label[for="yr-2022"]{outline:2px solid var(--purple-deep);outline-offset:3px}
#yr-2021:checked~.year-tabs label[for="yr-2021"]{background:var(--purple);color:#fff;font-weight:600}
#yr-2021:checked~#panel-2021{display:block}
#yr-2021:focus-visible~.year-tabs label[for="yr-2021"]{outline:2px solid var(--purple-deep);outline-offset:3px}
#yr-2020:checked~.year-tabs label[for="yr-2020"]{background:var(--purple);color:#fff;font-weight:600}
#yr-2020:checked~#panel-2020{display:block}
#yr-2020:focus-visible~.year-tabs label[for="yr-2020"]{outline:2px solid var(--purple-deep);outline-offset:3px}
#yr-2019:checked~.year-tabs label[for="yr-2019"]{background:var(--purple);color:#fff;font-weight:600}
#yr-2019:checked~#panel-2019{display:block}
#yr-2019:focus-visible~.year-tabs label[for="yr-2019"]{outline:2px solid var(--purple-deep);outline-offset:3px}
#yr-2018:checked~.year-tabs label[for="yr-2018"]{background:var(--purple);color:#fff;font-weight:600}
#yr-2018:checked~#panel-2018{display:block}
#yr-2018:focus-visible~.year-tabs label[for="yr-2018"]{outline:2px solid var(--purple-deep);outline-offset:3px}
#yr-2017:checked~.year-tabs label[for="yr-2017"]{background:var(--purple);color:#fff;font-weight:600}
#yr-2017:checked~#panel-2017{display:block}
#yr-2017:focus-visible~.year-tabs label[for="yr-2017"]{outline:2px solid var(--purple-deep);outline-offset:3px}
#yr-2016:checked~.year-tabs label[for="yr-2016"]{background:var(--purple);color:#fff;font-weight:600}
#yr-2016:checked~#panel-2016{display:block}
#yr-2016:focus-visible~.year-tabs label[for="yr-2016"]{outline:2px solid var(--purple-deep);outline-offset:3px}
#yr-2015:checked~.year-tabs label[for="yr-2015"]{background:var(--purple);color:#fff;font-weight:600}
#yr-2015:checked~#panel-2015{display:block}
#yr-2015:focus-visible~.year-tabs label[for="yr-2015"]{outline:2px solid var(--purple-deep);outline-offset:3px}
#yr-2014:checked~.year-tabs label[for="yr-2014"]{background:var(--purple);color:#fff;font-weight:600}
#yr-2014:checked~#panel-2014{display:block}
#yr-2014:focus-visible~.year-tabs label[for="yr-2014"]{outline:2px solid var(--purple-deep);outline-offset:3px}
#yr-2013:checked~.year-tabs label[for="yr-2013"]{background:var(--purple);color:#fff;font-weight:600}
#yr-2013:checked~#panel-2013{display:block}
#yr-2013:focus-visible~.year-tabs label[for="yr-2013"]{outline:2px solid var(--purple-deep);outline-offset:3px}
#yr-2012:checked~.year-tabs label[for="yr-2012"]{background:var(--purple);color:#fff;font-weight:600}
#yr-2012:checked~#panel-2012{display:block}
#yr-2012:focus-visible~.year-tabs label[for="yr-2012"]{outline:2px solid var(--purple-deep);outline-offset:3px}
#yr-2011:checked~.year-tabs label[for="yr-2011"]{background:var(--purple);color:#fff;font-weight:600}
#yr-2011:checked~#panel-2011{display:block}
#yr-2011:focus-visible~.year-tabs label[for="yr-2011"]{outline:2px solid var(--purple-deep);outline-offset:3px}
#yr-2010:checked~.year-tabs label[for="yr-2010"]{background:var(--purple);color:#fff;font-weight:600}
#yr-2010:checked~#panel-2010{display:block}
#yr-2010:focus-visible~.year-tabs label[for="yr-2010"]{outline:2px solid var(--purple-deep);outline-offset:3px}
#yr-2009:checked~.year-tabs label[for="yr-2009"]{background:var(--purple);color:#fff;font-weight:600}
#yr-2009:checked~#panel-2009{display:block}
#yr-2009:focus-visible~.year-tabs label[for="yr-2009"]{outline:2px solid var(--purple-deep);outline-offset:3px}

@media (min-width:1150px) and (max-width:1649.98px){
  .issue-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* the events band spans the full page width now, so the two cards stay paired */
}
@media (max-width:900px){
  .ev-grid{grid-template-columns:1fr}
  .issue-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .issue-grid{grid-template-columns:1fr 1fr;gap:1.8rem 1rem}
  .issue-card h4{font-size:.94rem}
}
@media (max-width:560px){
  .testimonial{flex-direction:column;text-align:center}
  .testimonial blockquote{text-align:center}
}

/* ================= About page (Rounds 18–25) — ported from the approved
   Option A mockup: bare photo hero, the About Us / Our Story duo with the
   GGA award card and the accreditation row, then the publisher's literature
   beside the team grid. ==================================================== */

/* the banner, carrying no wording of its own */
.about-hero.hero-bare{min-height:clamp(220px,20vw,290px);padding:0}
.about-hero.hero-bare::before{display:none}

/* About Us + Our Story, side by side */
.about-copy.about-duo{max-width:none}
.about-copy p strong{color:var(--ink)}
.duo-cols{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2.5rem,6vw,5rem);align-items:stretch;
}
.duo-col{min-width:0}
.duo-cols > .duo-col:first-of-type{display:flex;flex-direction:column;align-items:stretch}
.duo-cols > .duo-col:first-of-type > p{flex:0 0 auto}
.duo-h{font-size:clamp(1.6rem,2.6vw,2.2rem);max-width:24ch;margin-bottom:1.8rem}
.duo-col > p:first-of-type::first-letter{
  font-family:var(--serif);float:left;
  font-size:3.1em;line-height:.82;
  padding:.08em .14em 0 0;color:var(--purple-deep);
}

/* the GGA award card — a printed certificate, recreated.
   Every rule is prefixed .gga-card so the section's generic .about-copy p
   styles (colour/measure) can never wash the card out. */
.gga-card{
  background:#0E0C09;
  border:1px solid #C9A227;
  outline:1px solid #C9A227;outline-offset:-7px;
  padding:clamp(1.6rem,3vw,2.4rem) clamp(1.3rem,2.6vw,2.2rem);
  margin-bottom:clamp(2rem,3.6vw,2.8rem);
}
.gga-card p{margin:0;max-width:none}
.gga-card .gga-head{text-align:center}
.gga-card .gga-name{
  font-family:var(--sans);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:#E9C654;font-size:clamp(1.2rem,2vw,1.55rem);
}
.gga-card .gga-title{
  font-family:var(--sans);font-weight:500;color:#E9C654;
  font-size:clamp(.92rem,1.4vw,1.1rem);margin-top:.45rem;
}
.gga-card .gga-place{
  font-family:var(--sans);font-weight:500;color:#E9C654;
  font-size:clamp(.84rem,1.25vw,1rem);margin-top:.25rem;
}
.gga-card .gga-body{
  display:grid;
  grid-template-columns:minmax(112px,138px) minmax(0,1fr) minmax(80px,104px);
  gap:clamp(1rem,2.2vw,1.7rem);
  align-items:start;
  margin-top:clamp(1.3rem,2.4vw,1.9rem);
}
.gga-card .gga-photo{margin:0;align-self:center}
.gga-card .gga-photo img{
  width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;border-radius:50%;
}
.gga-card .gga-desc{
  font-size:.92rem;line-height:1.75;color:#FFFFFF;font-weight:400;letter-spacing:.01em;
}
.gga-card .gga-side{
  align-self:stretch;min-height:100%;
  display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;
  gap:1rem;
}
.gga-card .gga-flag{width:100%;max-width:104px;height:auto;display:block}
.gga-card .gga-logo{width:100%;max-width:96px;height:auto;display:block}
.gga-card .gga-logo[hidden]{display:none}
.gga-card .gga-credit{
  font-family:var(--sans);font-weight:600;color:#E9C654;font-size:.78rem;letter-spacing:.04em;
  margin-top:clamp(1.3rem,2.4vw,1.9rem);
}

/* the publisher block nested in the left column */
.pub-block{margin-top:clamp(2.4rem,4.5vw,3.6rem);flex:1 1 auto;display:flex;flex-direction:column}
.pub-block .gga-card{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between;margin-bottom:0}
.pub-block .gga-body{
  flex:1 1 auto;align-content:center;
  grid-template-columns:minmax(104px,126px) minmax(0,1fr) minmax(72px,92px);
  gap:clamp(.9rem,1.8vw,1.3rem);
}
.pub-block .eyebrow{display:block;margin-bottom:1.2rem}
.pub-block .gga-desc{font-size:.9rem}

/* accreditations and memberships */
.accred-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1.2rem,2.5vw,2rem);
  margin-top:clamp(2rem,3.6vw,2.8rem);
}
.accred-bbb{display:inline-flex;align-items:center;gap:1rem}
.accred-bbb img{height:100px;width:auto;display:block}
.accred-bbb .accred-aplus{height:64px}
.ire-mark{
  display:inline-flex;align-items:center;gap:.9rem;
  background:var(--ink);color:#fff;padding:.9rem 1.3rem;
}
.ire-mark b{
  font-family:var(--serif);font-weight:500;font-size:1.35rem;letter-spacing:.06em;
  border:2px solid #fff;padding:.25em .5em;line-height:1;
}
.ire-mark span{
  font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  line-height:1.5;max-width:12em;
}

/* the publisher's literature with the team alongside */
.grid-head{margin-bottom:clamp(2.6rem,4.5vw,4rem)}
.team-split{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2.5rem,6vw,5rem);align-items:start;
}
.team-split > *{min-width:0}
.team-split .split-team{padding-top:.35rem}
.team-split .grid-head{margin-bottom:clamp(1.8rem,3vw,2.6rem)}
.team-split .grid-head h2{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.team-split .team-grid{grid-template-columns:repeat(2,1fr)}
.tcard{text-align:center}
.tcard-photo{
  width:min(100%,206px);margin-inline:auto;
  background:var(--mist-deep);
}

/* responsive for the About additions */
@media (max-width:900px){
  .team-split{grid-template-columns:1fr;gap:2.8rem}
  .team-split .split-team{padding-top:0}
}
@media (max-width:860px){
  .duo-cols{grid-template-columns:1fr;gap:2.4rem}
  .duo-cols > .duo-col:first-of-type{display:block}
  .pub-block{display:block}
  .pub-block .gga-card{display:block}
}
@media (max-width:560px){
  .gga-card .gga-body{grid-template-columns:1fr;justify-items:center;text-align:center}
  .gga-card .gga-photo{width:min(160px,55%)}
  .gga-card .gga-side{flex-direction:row;justify-content:center;align-items:center;min-height:0}
}

/* ================= shop — compact hero and filter row, so the four products
   sit on the first screen exactly as in the approved Option A shop ========= */
.shop-hero{padding-top:clamp(2rem,3.4vw,2.9rem);padding-bottom:clamp(1.6rem,2.8vw,2.4rem)}
.shop-hero .eyebrow{margin-bottom:.75rem}
.shop-hero h1{font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.2}
.shop-hero .lede{max-width:52ch;margin:.85rem auto 0;font-size:.95rem;line-height:1.7}
.shop-hero .searchbar{margin-top:1.3rem}
.filters.shop-filters{padding:clamp(1.1rem,1.8vw,1.5rem) var(--pad-x) 0}

/* ================= podcast page — the mockup's responsive rules, which were
   missing from the appended component CSS. Without them the split hero stays
   two columns and the episode grid stays 4-up on a phone. ================== */
@media (max-width:1100px){
  .pod-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .pod-hero{grid-template-columns:1fr;min-height:0}
  .pod-hero-media{aspect-ratio:2/1}
  .pod-sub-grid{grid-template-columns:1fr;gap:2.2rem}
  .pod-sub-cover{max-width:320px}
}
@media (max-width:680px){
  .pod-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pod-player iframe{height:232px}
}
@media (max-width:430px){
  .pg-num,.pg-arrow{min-width:2.1rem;height:2.1rem;padding:0 .4rem;font-size:.76rem}
}
@media (max-width:400px){
  /* the Spotify embed will not render below 280px — give it the full width */
  .pod-player{padding:0;border:0}
}

/* Quill 2 writes every list as <ol> and marks the bulleted ones with
   data-list="bullet", so without this a bulleted list the publisher typed comes
   out numbered on the page. */
.article-body li[data-list="bullet"]{list-style-type:disc}
.article-body li[data-list="ordered"]{list-style-type:decimal}

/* ---------- byline and pull-quote inside an article ----------
   The sanitiser allows no class attributes, so these are matched structurally:
   the FIRST figure in the body is the byline, and any figure holding a
   blockquote is a pull-quote. Where :has() is unsupported the pull-quote simply
   stacks — portrait, quote, name — which still reads correctly. */
.article-body > figure:first-child{
  display:flex;align-items:center;gap:1rem;
  margin:0 0 2.2rem;padding-bottom:1.3rem;
  border-bottom:1px solid var(--mist-deep);
}
.article-body > figure:first-child img{
  width:60px;height:60px;max-height:none;flex:0 0 auto;
  border-radius:50%;object-fit:cover;margin:0;
}
.article-body > figure:first-child figcaption{
  margin:0;text-align:left;font-size:.85rem;line-height:1.6;color:var(--ink-soft);
}
.article-body > figure:first-child figcaption strong{color:var(--ink)}

.article-body figure:has(blockquote){
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:.4rem clamp(1rem,2.5vw,1.7rem);align-items:start;
  margin-block:2.2rem;padding-block:1.5rem;
  border-top:1px solid var(--mist-deep);border-bottom:1px solid var(--mist-deep);
}
.article-body figure:has(blockquote) img{
  grid-column:1;grid-row:1 / span 2;align-self:center;
  width:96px;height:96px;max-height:none;border-radius:50%;object-fit:cover;margin:0;
}
.article-body figure:has(blockquote) blockquote{
  grid-column:2;grid-row:1;margin:0;border-left:0;padding:0;
  font-style:normal;font-family:var(--serif);font-size:1.02rem;
  line-height:1.62;color:var(--ink);
}
.article-body figure:has(blockquote) blockquote p{margin:0}
.article-body figure:has(blockquote) figcaption{
  grid-column:2;grid-row:2;margin:0;text-align:left;
  font-family:var(--sans);font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--purple-deep);
}
@media (max-width:520px){
  .article-body figure:has(blockquote){grid-template-columns:1fr}
  .article-body figure:has(blockquote) img{grid-column:1;grid-row:1;margin-inline:auto}
  .article-body figure:has(blockquote) blockquote,
  .article-body figure:has(blockquote) figcaption{grid-column:1}
  .article-body figure:has(blockquote) blockquote{grid-row:2}
  .article-body figure:has(blockquote) figcaption{grid-row:3;text-align:center}
}

/* ---------- data tables inside an article ----------
   A ranking table is wider than the measure on a phone, so it scrolls inside
   its own figure rather than forcing the whole page sideways. Numbers are
   tabular-lined so the columns of digits stack properly. */
.article-body figure{max-width:100%;overflow-x:auto}
.article-body table{
  width:100%;border-collapse:collapse;margin:1.6rem 0;
  font-family:var(--sans);font-size:.86rem;line-height:1.5;
  font-variant-numeric:tabular-nums;
}
.article-body caption{
  caption-side:top;text-align:left;padding-bottom:.8rem;
  font-family:var(--sans);font-size:.7rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
}
/* Headings wrap onto two lines rather than running wide: "Education & Employment
   Rank" on one line pushes the last column out of the measure and forces the
   whole table into a sideways scroll it does not need. */
.article-body thead th{
  background:var(--aubergine);color:#fff;font-weight:600;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.85rem .7rem;text-align:left;line-height:1.35;
}
.article-body tbody td,.article-body tbody th{
  padding:.68rem .7rem;border-bottom:1px solid var(--mist-deep);
  color:var(--ink);font-weight:300;text-align:left;
}
.article-body tbody th{font-weight:600}
.article-body tbody tr:nth-child(even){background:var(--mist)}
.article-body tbody tr:hover{background:var(--cream)}
/* Only the third column onwards is numeric in the ranking table, so that is all
   that ranges right. The two-column metric tables have no such column and keep
   their natural left alignment rather than being centred by a rule meant for a
   rank number. */
.article-body thead th:nth-child(n+3),
.article-body tbody td:nth-child(n+3){text-align:right}
@media (max-width:600px){
  .article-body table{font-size:.78rem}
  .article-body thead th,.article-body tbody td{padding:.55rem .45rem}
}

/* ---------- event tickets panel ----------
   Two events side by side needs more room than the single-event enquiry modals,
   so the shell widens. The width override is deliberately scoped through .tmodal
   rather than left as a bare class: .tmodal-shell is declared twice in this file
   (see the repeated "Round 43" block), so matching its specificity would leave
   the winner depending on source order. */
.tmodal .tmodal-shell-wide{width:min(880px,100%)}
.et-intro{margin-top:1rem;font-size:.88rem;line-height:1.7;color:var(--ink-soft)}
.et-event{
  display:grid;grid-template-columns:minmax(0,275px) minmax(0,1fr);
  gap:clamp(1.1rem,2.5vw,1.9rem);align-items:start;
  margin-top:1.6rem;padding-top:1.6rem;border-top:1px solid var(--mist-deep);
}
.et-flyer{display:block}
.et-flyer img{
  width:100%;height:auto;display:block;
  box-shadow:0 16px 34px -18px rgba(56,32,60,.7);
  transition:transform .25s ease,box-shadow .25s ease;
}
.et-flyer:hover img{transform:translateY(-3px);box-shadow:0 22px 42px -18px rgba(56,32,60,.8)}
.et-flyer-cue{
  display:block;margin-top:.6rem;text-align:center;
  font-family:var(--sans);font-size:.64rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--purple-deep);
}
.et-flyer:hover .et-flyer-cue{text-decoration:underline}
.et-body h3{font-family:var(--serif);font-size:1.05rem;font-weight:500;line-height:1.35;color:var(--ink)}
.et-when{
  margin-top:.45rem;font-family:var(--sans);font-size:.66rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--purple-deep);
}
.et-where{margin-top:.3rem;font-size:.8rem;color:var(--ink-soft)}
.et-times{margin:.7rem 0 0;padding:0;list-style:none;font-size:.82rem;line-height:1.7;color:var(--ink-soft)}
.et-times span{display:inline-block;min-width:9.5em;font-weight:600;color:var(--ink)}
.et-note{margin-top:.7rem;font-size:.84rem;line-height:1.7;color:var(--ink-soft)}
.et-buy{margin-top:1rem}

/* ---------- PayPal hosted button ----------
   Lifted out of the snippet PayPal supplies, which ships its own <style> block:
   the button appears more than once on this page, so keeping the rules here
   stops the same CSS being repeated inside <body>. The yellow, the typeface and
   the proportions are PayPal's own and are left as they came — a payment button
   that looks like every other payment button is one people trust. */
.pp-form{display:inline-grid;justify-items:start;gap:.45rem;margin:0 0 .75rem}
.pp-btn{
  min-width:11.625rem;padding:0 2rem;height:2.625rem;
  border:none;border-radius:.25rem;cursor:pointer;
  background:#FFD140;color:#000;font-weight:700;
  font-family:"Helvetica Neue",Arial,sans-serif;font-size:1rem;line-height:1.25rem;
  transition:filter .2s ease;
}
.pp-btn:hover{filter:brightness(.95)}
.pp-btn:focus-visible{outline:2px solid var(--purple-deep);outline-offset:2px}
.pp-cards{height:1.45rem;width:auto;max-width:100%;display:block}
.pp-mark{font-size:.72rem;color:var(--ink-soft);line-height:1}
.pp-mark img{height:.85rem;width:auto;vertical-align:middle;display:inline}
.pp-note{margin-top:.4rem;font-size:.76rem;line-height:1.6;color:var(--ink-soft)}
/* the enquiry link sits under the button rather than beside it, so the paid
   route is unmistakably the primary one */
.et-buy .btn{display:inline-block}
.et-paypal-note{
  margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid var(--mist-deep);
  font-size:.79rem;line-height:1.7;color:var(--ink-soft);text-align:center;
}
@media (max-width:560px){
  .et-event{grid-template-columns:1fr}
  .et-flyer{max-width:260px;margin-inline:auto}
  .et-times span{min-width:0;margin-right:.4em}
}