/*
Theme Name: Cercle des Amis du Monténégro
Author: Cercle des Amis du Monténégro
Description: A quiet, editorial block theme for Cercle des Amis du Monténégro — a European circle around Montenegro.
Version: 1.1.1
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cercle
Tags: full-site-editing, one-column, editor-style, custom-colors
*/

/* =========================================================
   CERCLE DES AMIS DU MONTÉNÉGRO
   Brand: Midnight Navy / Adriatic Blue / Soft Gold /
          Warm Ivory / Stone Grey
   Tone:  European · Contemporary · Connected ·
          Cultured · Discreet
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* Brand palette */
  --navy:#0E1B2A;
  --blue:#244F6B;
  --gold:#C6A15B;
  --ivory:#F6F2EA;
  --stone:#B8B5AE;

  /* Derived surfaces */
  --paper:#FBF9F5;
  --paper-deep:var(--ivory);
  --line:rgba(14,27,42,.14);
  --line-soft:rgba(14,27,42,.08);
  --line-gold:rgba(198,161,91,.45);
  --ink:var(--navy);
  --ink-soft:rgba(14,27,42,.66);
  --ink-faint:rgba(14,27,42,.42);

  /* On dark */
  --on-dark:var(--ivory);
  --on-dark-soft:rgba(246,242,234,.68);
  --on-dark-faint:rgba(246,242,234,.40);
  --line-dark:rgba(246,242,234,.16);

  /* Type */
  --serif:"Cormorant Garamond",Canela,"Times New Roman",serif;
  --sans:"Inter","Neue Haas Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;

  /* Rhythm */
  --gutter:clamp(1.25rem,5vw,5rem);
  --maxw:1320px;
  --readw:62ch;
  --section:clamp(5rem,11vw,9.5rem);

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --slow:.9s;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,.94rem + .22vw,1.0625rem);
  line-height:1.72;
  font-weight:330;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
::selection{background:var(--gold);color:var(--navy)}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px}

/* ---------- 3. Typography ---------- */
.display{
  font-family:var(--serif);
  font-weight:300;
  line-height:.98;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.h1{font-size:clamp(2.6rem,7.6vw,6rem)}
.h2{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(1.9rem,4.1vw,3.5rem);
  line-height:1.08;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.h3{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(1.4rem,2.5vw,2.1rem);
  line-height:1.16;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.h4{
  font-family:var(--sans);
  font-weight:500;
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  line-height:1.5;
}

/* Eyebrow / section label */
.eyebrow{
  display:flex;
  align-items:center;
  gap:.9rem;
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:clamp(1.5rem,3vw,2.5rem);
}
.eyebrow::before{
  content:"";
  width:clamp(28px,4vw,56px);
  height:1px;
  background:var(--gold);
  flex:none;
}
.on-navy .eyebrow{color:var(--on-dark-faint)}

.lede{
  font-size:clamp(1.12rem,1.02rem + .5vw,1.4rem);
  line-height:1.6;
  font-weight:300;
  color:var(--ink-soft);
  max-width:var(--readw);
}
.on-navy .lede{color:var(--on-dark-soft)}

.prose > * + *{margin-top:1.35em}
.prose{max-width:var(--readw);color:var(--ink-soft)}
.on-navy .prose{color:var(--on-dark-soft)}
.prose strong{font-weight:500;color:var(--ink)}
.on-navy .prose strong{color:var(--on-dark)}

/* A stack of short declarative lines (used heavily in the copy) */
.verse{
  font-family:var(--serif);
  font-size:clamp(1.25rem,1rem + 1.1vw,1.85rem);
  line-height:1.55;
  font-weight:300;
  letter-spacing:.02em;
  color:var(--ink);
}
.on-navy .verse{color:var(--on-dark)}
.verse li + li{margin-top:.15em}

.statement{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(1.7rem,3.4vw,3rem);
  line-height:1.14;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.gold{color:var(--gold)}
.muted{color:var(--ink-faint)}

/* ---------- 4. Layout ---------- */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.wrap--narrow{max-width:940px}
.section{padding-block:var(--section)}
.section--tight{padding-block:clamp(3.5rem,7vw,6rem)}
.section + .section{padding-top:0}
.section--edge + .section--edge{padding-top:var(--section)}
/* A section that introduces its own background must never sit flush against
   its heading — and neither must the section that follows a coloured one. */
.section.on-navy,
.section.on-ivory,
.section.on-blue,
.section.on-navy + .section,
.section.on-ivory + .section,
.section.on-blue + .section{padding-top:var(--section)}

.on-navy{background:var(--navy);color:var(--on-dark)}
.on-ivory{background:var(--ivory)}
.on-blue{background:var(--blue);color:var(--on-dark)}

.rule{height:1px;background:var(--line);border:0;margin:0}
.on-navy .rule{background:var(--line-dark)}

.grid{display:grid;gap:clamp(2rem,4vw,4.5rem)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}
.grid--split-rev{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center}
.grid--aside{grid-template-columns:minmax(0,.62fr) minmax(0,1fr);align-items:start}
@media (max-width:900px){
  .grid--2,.grid--3,.grid--split,.grid--split-rev,.grid--aside{grid-template-columns:1fr}
  .grid--split .media{order:-1}
}

/* ---------- 5. Buttons ---------- */
.btn{
  --bg:transparent;
  --fg:var(--ink);
  --bd:var(--ink);
  display:inline-flex;
  align-items:center;
  gap:.85em;
  padding:1.05em 2.1em;
  border:1px solid var(--bd);
  background:var(--bg);
  color:var(--fg);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  position:relative;
  overflow:hidden;
  transition:color .5s var(--ease),border-color .5s var(--ease);
}
.btn::before{
  content:"";
  position:absolute;inset:0;
  background:var(--ink);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .55s var(--ease);
}
.btn:hover::before{transform:scaleX(1)}
.btn > *{position:relative;z-index:1}
.btn span{position:relative;z-index:1}
.btn:hover{color:var(--ivory)}

.btn--gold{--bd:var(--gold);--fg:var(--gold)}
.btn--gold::before{background:var(--gold)}
.btn--gold:hover{color:var(--navy)}

.btn--solid{--bg:var(--navy);--fg:var(--ivory);--bd:var(--navy)}
.btn--solid::before{background:var(--gold)}
.btn--solid:hover{color:var(--navy);border-color:var(--gold)}

.on-navy .btn{--bd:var(--on-dark-faint);--fg:var(--on-dark)}
.on-navy .btn::before{background:var(--ivory)}
.on-navy .btn:hover{color:var(--navy);border-color:var(--ivory)}
.on-navy .btn--gold{--bd:var(--gold);--fg:var(--gold)}
.on-navy .btn--gold::before{background:var(--gold)}
.on-navy .btn--gold:hover{color:var(--navy)}

.btn-row{display:flex;flex-wrap:wrap;gap:1rem}

/* Text link with gold underline sweep */
.link{
  display:inline-flex;
  align-items:center;
  gap:.7em;
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  padding-bottom:.55em;
  border-bottom:1px solid var(--line-gold);
  transition:border-color .4s var(--ease),gap .4s var(--ease);
}
.link .arw{transition:transform .4s var(--ease)}
.link:hover{border-color:var(--gold)}
.link:hover .arw{transform:translateX(5px)}
.on-navy .link{color:var(--on-dark)}

/* ---------- 6. Header ---------- */
.header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  transition:background .5s var(--ease),border-color .5s var(--ease),transform .45s var(--ease);
  border-bottom:1px solid transparent;
}
.header__in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  height:var(--hh,104px);
  transition:height .5s var(--ease);
}
.header.is-stuck{
  background:rgba(251,249,245,.93);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line-soft);
}
.header.is-stuck .header__in{--hh:80px}
.header.is-hidden{transform:translateY(-100%)}

.brand{display:flex;align-items:center;gap:.9rem}
.brand__mark{width:52px;height:52px;flex:none;transition:width .5s var(--ease),height .5s var(--ease)}
.brand__mark img{width:100%;height:100%;object-fit:contain}
.header.is-stuck .brand__mark{width:44px;height:44px}
.brand__txt{
  display:none;
  font-family:var(--serif);
  font-size:.82rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  line-height:1.35;
  color:var(--ink);
}
@media (min-width:1120px){.brand__txt{display:block}}
.brand__txt em{display:block;font-style:normal;font-size:.56rem;letter-spacing:.28em;color:var(--ink-faint);font-family:var(--sans)}

/* Header over dark hero */
.header--over:not(.is-stuck) .brand__txt{color:var(--on-dark)}
.header--over:not(.is-stuck) .brand__txt em{color:var(--on-dark-faint)}
.header--over:not(.is-stuck) .nav a:not(.nav__cta){color:var(--on-dark-soft)}
.header--over:not(.is-stuck) .nav a:not(.nav__cta):hover,
.header--over:not(.is-stuck) .nav a[aria-current]:not(.nav__cta){color:var(--on-dark)}
.header--over:not(.is-stuck) .nav .nav__cta{color:var(--gold);border-color:var(--line-gold)}
.header--over:not(.is-stuck) .nav .nav__cta:hover{color:var(--navy);background:var(--gold);border-color:var(--gold)}
.header--over:not(.is-stuck) .burger span{background:var(--on-dark)}
.header--over:not(.is-stuck) .brand__mark .lg-navy{opacity:0}
.header--over:not(.is-stuck) .brand__mark .lg-ivory{opacity:1}

.brand__mark{position:relative}
.brand__mark img{position:absolute;inset:0;transition:opacity .5s var(--ease)}
.brand__mark .lg-ivory{opacity:0}

.nav{display:none;align-items:center;gap:clamp(1.1rem,2vw,2.05rem)}
@media (min-width:1024px){.nav{display:flex}}
.nav a{
  font-size:.68rem;
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-soft);
  position:relative;
  padding-block:.4rem;
  transition:color .35s var(--ease);
}
.nav a::after{
  content:"";
  position:absolute;left:0;bottom:0;
  width:100%;height:1px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.nav .nav__cta{
  border:1px solid var(--line-gold);
  color:var(--gold);
  padding:.85em 1.5em;
  margin-left:.6rem;
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease);
}
.nav .nav__cta::after{display:none}
.nav .nav__cta:hover{background:var(--gold);color:var(--navy);border-color:var(--gold)}

.burger{
  display:grid;
  gap:6px;
  width:34px;
  padding:6px 0;
  z-index:120;
}
@media (min-width:1024px){.burger{display:none}}
.burger span{
  display:block;height:1px;width:100%;
  background:var(--ink);
  transition:transform .45s var(--ease),opacity .3s var(--ease),background .4s var(--ease);
}
body.menu-open .burger span{background:var(--on-dark)}
body.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- 7. Mobile drawer ---------- */
.drawer{
  position:fixed;inset:0;z-index:110;
  background:var(--navy);
  color:var(--on-dark);
  display:flex;flex-direction:column;justify-content:center;
  padding:6rem var(--gutter) 3rem;
  clip-path:circle(0% at calc(100% - 40px) 52px);
  transition:clip-path .8s var(--ease);
  overflow-y:auto;
}
body.menu-open .drawer{clip-path:circle(160% at calc(100% - 40px) 52px)}
.drawer nav a{
  display:block;
  font-family:var(--serif);
  font-size:clamp(1.6rem,7vw,2.6rem);
  text-transform:uppercase;
  letter-spacing:.07em;
  font-weight:300;
  padding:.28em 0;
  border-bottom:1px solid var(--line-dark);
  opacity:0;transform:translateY(18px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s var(--ease);
}
body.menu-open .drawer nav a{opacity:1;transform:none}
.drawer nav a:hover{color:var(--gold)}
.drawer__meta{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:1.4rem;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-faint)}

/* ---------- 8. Hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  align-items:end;
  background:var(--navy);
  color:var(--on-dark);
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg .ph__inner{position:absolute;right:var(--gutter);top:22%;max-width:22ch;opacity:.5}
.hero__bg .ph{width:100%;height:100%;aspect-ratio:auto;border:0;background:#0B1621}
.hero::after{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(14,27,42,.72) 0%,rgba(14,27,42,.42) 38%,rgba(14,27,42,.92) 100%);
}
.hero__in{padding-block:clamp(7rem,16vh,10rem) clamp(3.5rem,9vh,6rem);width:100%}
.hero__mark{width:clamp(96px,12vw,140px);margin-bottom:clamp(1.6rem,4vw,2.6rem);opacity:.92}
.hero__title{font-size:clamp(3rem,12.5vw,9.5rem);letter-spacing:.1em;margin-left:-.05em}
.hero__sub{
  font-family:var(--serif);
  font-size:clamp(.95rem,2.4vw,1.5rem);
  letter-spacing:.42em;
  text-transform:uppercase;
  font-weight:300;
  color:var(--gold);
  margin-top:clamp(.8rem,2vw,1.4rem);
}
.hero__line{width:100%;height:1px;background:var(--line-dark);margin-block:clamp(2.2rem,5vw,3.4rem)}
.hero__foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2.5rem;align-items:end}
@media (max-width:880px){.hero__foot{grid-template-columns:1fr}}
.hero__scroll{
  display:flex;align-items:center;gap:.8rem;
  font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--on-dark-faint);
}
.hero__scroll i{display:block;width:1px;height:44px;background:linear-gradient(var(--gold),transparent);animation:drop 2.4s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* Page hero (interior) */
.phero{
  position:relative;
  background:var(--navy);
  color:var(--on-dark);
  padding-block:clamp(9rem,20vh,13rem) clamp(3.5rem,8vw,6rem);
  overflow:hidden;
}
.phero .circles{position:absolute;right:-8%;top:50%;transform:translateY(-50%);width:min(52vw,620px);opacity:.16;pointer-events:none}
.phero__kicker{font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin-bottom:1.6rem}
.phero__title{font-size:clamp(2.4rem,7vw,5.2rem)}
.phero__lede{margin-top:clamp(1.6rem,3vw,2.4rem);max-width:56ch;color:var(--on-dark-soft);font-family:var(--serif);font-size:clamp(1.15rem,1rem + .8vw,1.6rem);line-height:1.5;font-weight:300}

/* ---------- 9. Image placeholders ---------- */
.ph{
  position:relative;
  display:grid;
  place-items:center;
  background:
    linear-gradient(135deg,rgba(184,181,174,.16),rgba(36,79,107,.08));
  border:1px solid var(--line);
  color:var(--ink-faint);
  overflow:hidden;
  text-align:center;
  padding:1.5rem;
}
.ph::before{
  content:"";
  position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(45deg,rgba(14,27,42,.035) 0 1px,transparent 1px 11px);
  pointer-events:none;
}
.on-navy .ph{
  background:linear-gradient(135deg,rgba(36,79,107,.55),rgba(36,79,107,.16));
  border-color:rgba(246,242,234,.24);
  color:var(--on-dark-faint);
}
.hero__bg .ph{
  background:linear-gradient(135deg,rgba(36,79,107,.34),rgba(14,27,42,.94));
  border-color:transparent;
  color:var(--on-dark-faint);
}
.on-navy .ph::before{background-image:repeating-linear-gradient(45deg,rgba(246,242,234,.035) 0 1px,transparent 1px 11px)}
.ph__inner{position:relative;display:grid;justify-items:center;gap:1rem;max-width:26ch}
.ph__ring{width:clamp(38px,5vw,58px);height:clamp(38px,5vw,58px);border:1px solid var(--line-gold);border-radius:50%;display:grid;place-items:center}
.ph__ring::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);opacity:.8}
.ph__label{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;line-height:1.9}
.ph__label b{display:block;font-weight:500;color:var(--ink-soft)}
.on-navy .ph__label b,.hero__bg .ph__label b{color:var(--on-dark-soft)}

/* Real photography, sharing the placeholder ratio classes */
.ph-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:rgba(184,181,174,.18);
}
.hero__bg .ph-img{aspect-ratio:auto;height:100%}

.ph--21x9{aspect-ratio:21/9}
.ph--16x9{aspect-ratio:16/9}
.ph--4x3{aspect-ratio:4/3}
.ph--1x1{aspect-ratio:1/1}
.ph--3x4{aspect-ratio:3/4}
.ph--2x3{aspect-ratio:2/3}
.ph--tall{aspect-ratio:9/13}
@media (max-width:640px){
  .ph--2x3,.ph--tall,.ph--3x4{aspect-ratio:4/5}
}

.media{position:relative}
.media__cap{
  margin-top:1rem;
  font-size:.62rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.on-navy .media__cap{color:var(--on-dark-faint)}
/* gold corner accent on featured media */
.media--framed::after{
  content:"";
  position:absolute;
  right:-14px;bottom:-14px;
  width:38%;height:46%;
  border-right:1px solid var(--line-gold);
  border-bottom:1px solid var(--line-gold);
  pointer-events:none;
}

/* ---------- 10. Cards & lists ---------- */
.card{
  position:relative;
  padding:clamp(1.8rem,3vw,2.8rem);
  border:1px solid var(--line);
  background:rgba(255,255,255,.42);
  display:flex;flex-direction:column;gap:1rem;
  transition:border-color .5s var(--ease),transform .5s var(--ease),background .5s var(--ease);
}
.card:hover{border-color:var(--line-gold);transform:translateY(-4px)}
.on-navy .card{background:rgba(246,242,234,.03);border-color:var(--line-dark)}
.on-navy .card:hover{border-color:var(--line-gold)}
.card__num{
  font-family:var(--serif);
  font-size:.9rem;
  letter-spacing:.2em;
  color:var(--gold);
}
.card p{color:var(--ink-soft);font-size:.96rem}
.on-navy .card p{color:var(--on-dark-soft)}

/* Numbered / ruled list rows */
.rows{border-top:1px solid var(--line)}
.on-navy .rows{border-color:var(--line-dark)}
.row{
  display:grid;
  grid-template-columns:minmax(0,.34fr) minmax(0,1fr);
  gap:clamp(1rem,4vw,3rem);
  padding-block:clamp(1.8rem,3.4vw,2.9rem);
  border-bottom:1px solid var(--line);
  align-items:start;
}
.on-navy .row{border-color:var(--line-dark)}
@media (max-width:760px){.row{grid-template-columns:1fr;gap:.9rem}}
.row__k{display:flex;gap:1rem;align-items:baseline}
.row__i{font-family:var(--serif);font-size:.8rem;letter-spacing:.18em;color:var(--gold);flex:none}
.row p{color:var(--ink-soft)}
.on-navy .row p{color:var(--on-dark-soft)}
.row--link{transition:background .5s var(--ease)}
.row--link:hover{background:rgba(198,161,91,.05)}

/* Bullet list with gold circle markers */
.dots li{
  position:relative;
  padding-left:1.9rem;
  color:var(--ink-soft);
}
.dots li + li{margin-top:.7rem}
.dots li::before{
  content:"";
  position:absolute;
  left:0;top:.66em;
  width:8px;height:8px;
  border:1px solid var(--gold);
  border-radius:50%;
}
.on-navy .dots li{color:var(--on-dark-soft)}
.dots--cols{columns:2;column-gap:clamp(2rem,5vw,4rem)}
.dots--cols li{break-inside:avoid}
@media (max-width:720px){.dots--cols{columns:1}}

/* Tag / chip */
.chips{display:flex;flex-wrap:wrap;gap:.6rem}
.chip{
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.6em 1.15em;border:1px solid var(--line);color:var(--ink-soft);
}
.on-navy .chip{border-color:var(--line-dark);color:var(--on-dark-soft)}

/* Pull quote */
.pull{
  position:relative;
  padding-left:clamp(1.5rem,4vw,3rem);
  border-left:1px solid var(--line-gold);
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(1.3rem,2.6vw,2rem);
  line-height:1.35;
  letter-spacing:.02em;
}

/* Big centred statement band */
.band{text-align:center;padding-block:clamp(5rem,11vw,8.5rem)}
.band .statement{max-width:22ch;margin-inline:auto}
.band__ring{width:clamp(54px,7vw,84px);height:clamp(54px,7vw,84px);border:1px solid var(--line-gold);border-radius:50%;margin:0 auto clamp(2rem,4vw,3rem)}

/* ---------- 11. Forms ---------- */
.form{display:grid;gap:clamp(1.4rem,2.6vw,2rem)}
.field{display:grid;gap:.6rem}
.field label,.legend{
  font-size:.63rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint);
}
.on-navy .field label,.on-navy .legend{color:var(--on-dark-faint)}
.field input,.field select,.field textarea{
  font:inherit;
  font-size:1rem;
  font-weight:300;
  color:var(--ink);
  background:transparent;
  border:0;border-bottom:1px solid var(--line);
  padding:.75rem 0;
  border-radius:0;
  transition:border-color .4s var(--ease);
  width:100%;
}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-bottom-color:var(--gold)}
.on-navy .field input,.on-navy .field select,.on-navy .field textarea{color:var(--on-dark);border-bottom-color:var(--line-dark)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint)}
.on-navy input::placeholder,.on-navy textarea::placeholder{color:var(--on-dark-faint)}
.form__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,2.6vw,2rem)}
@media (max-width:640px){.form__cols{grid-template-columns:1fr}}

fieldset{border:0;padding:0;margin:0;display:block;min-inline-size:0}
.legend{
  display:block;
  width:100%;
  max-width:100%;
  float:none;
  padding:0;
  margin:0 0 1.5rem;
  line-height:1.7;
}
.legend .muted{
  display:block;
  letter-spacing:.2em;
  text-transform:none;
  font-size:.68rem;
  margin-top:.35rem;
}
.opts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.15rem 2.2rem;
  align-items:start;
}
.opt{display:flex;align-items:flex-start;gap:.75rem;cursor:pointer;font-size:.9rem;line-height:1.45;color:var(--ink-soft)}
.on-navy .opt{color:var(--on-dark-soft)}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt i{
  width:14px;height:14px;flex:none;margin-top:.28em;
  border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;
  transition:border-color .35s var(--ease);
}
.on-navy .opt i{border-color:var(--line-dark)}
.opt i::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);transform:scale(0);transition:transform .35s var(--ease)}
.opt input:checked + i{border-color:var(--gold)}
.opt input:checked + i::after{transform:scale(1)}
.opt input:focus-visible + i{outline:1px solid var(--gold);outline-offset:3px}
.opt:hover i{border-color:var(--line-gold)}
.consent{display:flex;gap:.85rem;align-items:flex-start;font-size:.8rem;color:var(--ink-faint);line-height:1.6}
.on-navy .consent{color:var(--on-dark-faint)}
.consent i{border-radius:0;margin-top:.35em}
.consent i::after{border-radius:0}
.form__note{font-size:.72rem;letter-spacing:.02em;color:var(--ink-faint);max-width:52ch}
.on-navy .form__note{color:var(--on-dark-faint)}
.form__ok{
  display:none;
  align-items:center;gap:.8rem;
  border:1px solid var(--line-gold);
  padding:1rem 1.4rem;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
}
.form__ok.is-on{display:flex}

/* Newsletter inline form */
.sub{display:flex;gap:1rem;align-items:flex-end;flex-wrap:wrap;max-width:620px}
.sub .field{flex:1 1 260px}

/* ---------- 12. Events & stories ---------- */
.evt{
  display:grid;
  grid-template-columns:minmax(0,.3fr) minmax(0,1fr) auto;
  gap:clamp(1rem,3vw,2.5rem);
  align-items:center;
  padding-block:clamp(1.6rem,3vw,2.4rem);
  border-bottom:1px solid var(--line);
}
.on-navy .evt{border-color:var(--line-dark)}
@media (max-width:820px){.evt{grid-template-columns:1fr;gap:.8rem;align-items:start}}
.evt__date{font-family:var(--serif);font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.evt__meta{font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);margin-top:.5rem}
.on-navy .evt__meta{color:var(--on-dark-faint)}
.evt__status{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;border:1px solid var(--line);padding:.55em 1.1em;color:var(--ink-faint);white-space:nowrap;justify-self:start}
.on-navy .evt__status{border-color:var(--line-dark);color:var(--on-dark-faint)}

.story{display:grid;gap:1.2rem;align-content:start}
.story__cat{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.story__t{font-family:var(--serif);font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.22;font-weight:300;letter-spacing:.02em}
.story a.story__t:hover{color:var(--blue)}
.story p{color:var(--ink-soft);font-size:.94rem}

/* People grid (patron / founding circle) */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:clamp(1.6rem,3vw,3rem)}
.person{display:grid;gap:1rem}
.person__n{font-family:var(--serif);font-size:1.2rem;letter-spacing:.06em;text-transform:uppercase;font-weight:300}
.person__r{font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
.on-navy .person__r{color:var(--on-dark-faint)}
.person__q{font-family:var(--serif);font-size:1rem;line-height:1.5;color:var(--ink-soft);font-style:italic}
.on-navy .person__q{color:var(--on-dark-soft)}

/* ---------- 13. Decorative circles ---------- */
.circles{display:block}
.circles circle{fill:none;stroke:currentColor;stroke-width:1}
.deco{position:relative}
.deco__ring{
  position:absolute;
  border:1px solid var(--line-gold);
  border-radius:50%;
  pointer-events:none;
  opacity:.55;
}

/* ---------- 14. Footer ---------- */
.footer{background:var(--navy);color:var(--on-dark);padding-block:clamp(4rem,8vw,6.5rem) 2.5rem}
.footer__top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.6fr);gap:clamp(2.5rem,6vw,6rem)}
@media (max-width:900px){.footer__top{grid-template-columns:1fr}}
.footer__mark{width:104px;margin-bottom:1.8rem}
.footer__tag{font-family:var(--serif);font-size:1.15rem;line-height:1.55;font-weight:300;letter-spacing:.03em;max-width:34ch;color:var(--on-dark)}
.footer__tag span{color:var(--on-dark-faint);display:block;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;font-family:var(--sans);margin-top:1.1rem;line-height:2}
.footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,3rem)}
@media (max-width:640px){.footer__cols{grid-template-columns:1fr 1fr}}
.footer h4{font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--on-dark-faint);margin-bottom:1.4rem;font-weight:500}
.footer li + li{margin-top:.75rem}
.footer__cols a{font-size:.83rem;color:var(--on-dark-soft);transition:color .35s var(--ease)}
.footer__cols a:hover{color:var(--gold)}
/* Newsletter, sitting inside the footer above the bottom bar */
.footer__news{
  margin-top:clamp(3rem,6vw,4.5rem);
  padding-top:clamp(2.4rem,4vw,3.2rem);
  border-top:1px solid var(--line-dark);
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1.6fr);
  gap:clamp(1.8rem,5vw,6rem);
  align-items:start;
}
@media (max-width:900px){.footer__news{grid-template-columns:1fr;gap:1.8rem}}
.footer__news h4{margin-bottom:.9rem}
.footer__news-lede{
  font-family:var(--serif);
  font-size:1.02rem;
  line-height:1.6;
  font-weight:300;
  letter-spacing:.02em;
  color:var(--on-dark-soft);
  max-width:44ch;
}
.footer__news-form{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:1rem 1.4rem;
}
.footer__news-form .field{flex:1 1 240px;gap:.5rem}
.footer__news-form .field label{color:var(--on-dark-faint)}
.footer__news-form .field input{
  color:var(--on-dark);
  border-bottom-color:var(--line-dark);
}
.footer__news-form .field input::placeholder{color:var(--on-dark-faint)}
.footer__news-form .field input:focus{border-bottom-color:var(--gold)}
.footer__news-form .btn{flex:none}
.footer__news-form .form__ok{flex:1 0 100%}
.footer__news + .footer__bar{margin-top:clamp(2.2rem,4vw,3.2rem)}

.footer__bar{
  margin-top:clamp(3rem,6vw,5rem);
  padding-top:2rem;
  border-top:1px solid var(--line-dark);
  display:flex;flex-wrap:wrap;gap:1.2rem 2rem;justify-content:space-between;align-items:center;
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--on-dark-faint);
}
.footer__bar a:hover{color:var(--gold)}
.footer__soc{display:flex;gap:1.6rem}

/* ---------- 15. Reveal animation ---------- */
.js [data-reveal],
.js .is-reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease);
  transition-delay:var(--d,0ms);
}
.js [data-reveal].in,
.js .is-reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .js [data-reveal],
  .js .is-reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}
/* Reduced motion, explicit: no reveal travel, no scroll cue, no smooth scrolling. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto !important}
  .js [data-reveal],
  .js .is-reveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    transition-delay:0ms !important;
  }
  .hero__scroll i{animation:none !important;transform:none !important}
  .drawer nav a{opacity:1;transform:none;transition:none !important;transition-delay:0ms !important}
}

/* ---------- 16. Utilities ---------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--navy);color:var(--ivory);padding:1rem 1.5rem;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
}
.skip:focus{left:0}
.center{text-align:center}
.mt-s{margin-top:clamp(1.2rem,2vw,1.8rem)}
.mt-m{margin-top:clamp(2rem,4vw,3.2rem)}
.mt-l{margin-top:clamp(3rem,6vw,5rem)}
.sticky{position:sticky;top:calc(var(--hh,104px) + 2.5rem)}
@media (max-width:900px){.sticky{position:static}}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* =========================================================
   17. WORDPRESS BLOCK BRIDGE
   ---------------------------------------------------------
   Everything above this line is the original site stylesheet.
   The rules below exist only so that CORE BLOCK MARKUP renders
   identically to the hand-written markup it replaces.
   They are ADDITIVE: no value above is changed, only re-stated
   on the extra selectors WordPress introduces.
   ========================================================= */

/* ---- 17.1 Neutralise core block wrappers ---------------- */
/* Core ships default margins/gaps on these wrappers. Our layout is
   driven by .section / .wrap / .grid / .mt-*, so the wrappers must
   be transparent to layout. */
.wp-block-group,
.wp-block-buttons,
.wp-block-image,
.wp-block-columns,
.wp-block-column,
.wp-block-list,
.wp-block-heading,
.wp-block-post-content{margin-block:0}
.wp-block-image{margin:0}
.wp-block-image figcaption{margin:0}
.wp-block-columns{margin-bottom:0;gap:0}
.wp-block-buttons{margin:0}
.wp-block-template-part{display:contents}

/* core/image must never fight .ph-img. WordPress wraps the <img> in
   a <figure>, and core sets height:auto on .wp-block-image img. */
.wp-block-image.ph-img,
.wp-block-image.ph--21x9,
.wp-block-image.ph--16x9,
.wp-block-image.ph--4x3,
.wp-block-image.ph--1x1,
.wp-block-image.ph--3x4,
.wp-block-image.ph--2x3,
.wp-block-image.ph--tall{display:block;width:100%;margin:0}
.wp-block-image img.ph-img,
.wp-block-image.ph-img > img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:rgba(184,181,174,.18);
}
/* Ratio classes bite whether they sit on the <figure> or the <img>. */
.wp-block-image.ph--21x9 img,img.ph-img.ph--21x9{aspect-ratio:21/9}
.wp-block-image.ph--16x9 img,img.ph-img.ph--16x9{aspect-ratio:16/9}
.wp-block-image.ph--4x3  img,img.ph-img.ph--4x3 {aspect-ratio:4/3}
.wp-block-image.ph--1x1  img,img.ph-img.ph--1x1 {aspect-ratio:1/1}
.wp-block-image.ph--3x4  img,img.ph-img.ph--3x4 {aspect-ratio:3/4}
.wp-block-image.ph--2x3  img,img.ph-img.ph--2x3 {aspect-ratio:2/3}
.wp-block-image.ph--tall img,img.ph-img.ph--tall{aspect-ratio:9/13}
@media (max-width:640px){
  .wp-block-image.ph--2x3 img,
  .wp-block-image.ph--tall img,
  .wp-block-image.ph--3x4 img{aspect-ratio:4/5}
}
.hero__bg .wp-block-image,
.hero__bg .wp-block-image img{height:100%;aspect-ratio:auto}
.wp-block-image.footer__mark{width:104px}
.wp-block-image.footer__mark img,
.wp-block-image.hero__mark img{height:auto;object-fit:contain;background:none}

/* ---- 17.1b restore design margins outranked by 17.1 ------ */
/* 17.1 neutralises core wrapper margins at single-class specificity, and it is
   declared AFTER the design rules — so at equal specificity it was silently
   winning against the site's own spacing utilities wherever they landed on a
   core block (verified: the hero lost ~109px of rhythm). These restate the
   ORIGINAL values with a doubled class so design beats the neutraliser while
   the neutraliser still beats core. No value here is new — each is copied
   verbatim from the rule of the same name above. */
.mt-s.mt-s{margin-top:clamp(1.2rem,2vw,1.8rem)}
.mt-m.mt-m{margin-top:clamp(2rem,4vw,3.2rem)}
.mt-l.mt-l{margin-top:clamp(3rem,6vw,5rem)}
.prose.prose > * + *{margin-top:1.35em}
.hero__line.hero__line{margin-block:clamp(2.2rem,5vw,3.4rem)}
.hero__mark.hero__mark{margin-bottom:clamp(1.6rem,4vw,2.6rem)}
.band__ring.band__ring{margin:0 auto clamp(2rem,4vw,3rem)}
.footer__mark.footer__mark{margin-bottom:1.8rem}
.drawer__meta.drawer__meta{margin-top:2.5rem}
.footer__news.footer__news{margin-top:clamp(3rem,6vw,4.5rem)}
.footer__news.footer__news + .footer__bar{margin-top:clamp(2.2rem,4vw,3.2rem)}

/* ---- 17.2 core/navigation inside .nav ------------------- */
/* Core renders: <nav class="wp-block-navigation">
                   <ul class="wp-block-navigation__container">
                     <li class="wp-block-navigation-item">
                       <a class="wp-block-navigation-item__content"> */
.nav .wp-block-navigation{display:flex;align-items:center}
.nav ul.wp-block-navigation__container{
  display:flex;
  align-items:center;
  gap:clamp(1.1rem,2vw,2.05rem);
  list-style:none;
  margin:0;
  padding:0;
}
.nav .wp-block-navigation-item{display:block;margin:0;padding:0}
.nav .wp-block-navigation-item__content{
  font-size:.68rem;
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-soft);
  position:relative;
  display:inline-block;
  padding-block:.4rem;
  text-decoration:none;
  transition:color .35s var(--ease);
}
.nav .wp-block-navigation-item__content::after{
  content:"";
  position:absolute;left:0;bottom:0;
  width:100%;height:1px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav .wp-block-navigation-item__content:hover::after,
.nav .wp-block-navigation-item__content[aria-current]::after{transform:scaleX(1);transform-origin:left}
.nav .wp-block-navigation-item__content:hover,
.nav .wp-block-navigation-item__content[aria-current]{color:var(--ink)}
/* We ship our own .burger; core's responsive overlay stays out of the way. */
.nav .wp-block-navigation__responsive-container-open,
.nav .wp-block-navigation__responsive-container-close{display:none}

/* The nav__cta class lands on the <li> when set on a navigation item.
   Move the pill onto the anchor and blank the list item's own box. */
.nav li.nav__cta{border:0;padding:0;margin-left:.6rem;background:none}
.nav li.nav__cta::after{display:none}
.nav li.nav__cta > .wp-block-navigation-item__content{
  border:1px solid var(--line-gold);
  color:var(--gold);
  padding:.85em 1.5em;
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease);
}
.nav li.nav__cta > .wp-block-navigation-item__content::after{display:none}
.nav li.nav__cta > .wp-block-navigation-item__content:hover,
.nav li.nav__cta > .wp-block-navigation-item__content[aria-current]{background:var(--gold);color:var(--navy);border-color:var(--gold)}

/* Transparent-over-hero variant, restated for the core anchor. */
.header--over:not(.is-stuck) .nav li:not(.nav__cta) > .wp-block-navigation-item__content{color:var(--on-dark-soft)}
.header--over:not(.is-stuck) .nav li:not(.nav__cta) > .wp-block-navigation-item__content:hover,
.header--over:not(.is-stuck) .nav li:not(.nav__cta) > .wp-block-navigation-item__content[aria-current]{color:var(--on-dark)}
.header--over:not(.is-stuck) .nav li.nav__cta > .wp-block-navigation-item__content{color:var(--gold);border-color:var(--line-gold)}
.header--over:not(.is-stuck) .nav li.nav__cta > .wp-block-navigation-item__content:hover{color:var(--navy);background:var(--gold);border-color:var(--gold)}

/* ---- 17.2b nav robustness & responsiveness --------------- */
/* The first deployment shipped a header that listed every published page,
   wrapped each label onto three lines and ran off the right edge. Two causes:
   the navigation block fell back to a Page List (fixed in parts/header.html by
   giving it explicit inner links), and these rules were missing, so flex items
   shrank below their text width. Both are guarded here so the header degrades
   sanely even if the block ever falls back again. */

/* 1. A nav label must never break across lines. */
.nav .wp-block-navigation-item__content,
.nav .wp-block-pages-list__item__link,
.nav .wp-block-navigation-item,
.nav .wp-block-pages-list__item{white-space:nowrap}

/* 2. Items keep their natural width instead of being squeezed. */
.nav .wp-block-navigation-item,
.nav .wp-block-pages-list__item{flex:0 0 auto}

/* 3. The row never wraps and never stretches the header. */
.nav .wp-block-navigation,
.nav ul.wp-block-navigation__container{flex-wrap:nowrap;min-width:0}
.nav{min-width:0;flex:0 1 auto}
.header__in{min-width:0}
/* A fixed-position header can widen the page; belt and braces. */
.header,.header__in{max-width:100vw}

/* 4. Page List fallback: inherit the same treatment as real menu items so a
      missing menu is merely wrong content, never a broken layout. */
.nav .wp-block-page-list{display:flex;align-items:center;gap:inherit;list-style:none;margin:0;padding:0}
.nav .wp-block-pages-list__item__link{
  font-size:.68rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none;transition:color .35s var(--ease);
}
.header--over:not(.is-stuck) .nav .wp-block-pages-list__item__link{color:var(--on-dark-soft)}

/* 5. Tighten the gap on smaller desktops so seven items fit before the burger
      breakpoint, without touching the roomy spacing on wide screens. */
@media (min-width:1024px) and (max-width:1279px){
  .nav ul.wp-block-navigation__container{gap:1.05rem}
  .nav .wp-block-navigation-item__content{font-size:.645rem;letter-spacing:.16em}
}

/* ---- 17.3 core/navigation inside .drawer nav ------------ */
/* .drawer nav a already matches core's anchors; the flex container
   and core's own colour rule are what need neutralising. */
.drawer .wp-block-navigation{display:block;width:100%}
.drawer ul.wp-block-navigation__container{display:block;gap:0;list-style:none;margin:0;padding:0}
.drawer .wp-block-navigation-item{display:block;margin:0;padding:0}
.drawer nav .wp-block-navigation-item__content{
  display:block;
  font-family:var(--serif);
  font-size:clamp(1.6rem,7vw,2.6rem);
  text-transform:uppercase;
  letter-spacing:.07em;
  font-weight:300;
  color:var(--on-dark);
  text-decoration:none;
  padding:.28em 0;
  border-bottom:1px solid var(--line-dark);
  opacity:0;transform:translateY(18px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s var(--ease);
}
body.menu-open .drawer nav .wp-block-navigation-item__content{opacity:1;transform:none}
.drawer nav .wp-block-navigation-item__content:hover{color:var(--gold)}
.drawer .wp-block-navigation__responsive-container-open,
.drawer .wp-block-navigation__responsive-container-close{display:none}

/* ---- 17.3a classes replacing stripped inline styles ------ */
/* core/group and core/list cannot serialize an inline style attribute, so a few
   one-off inline rules from the static markup become classes here. Values are
   copied verbatim from the source pages — nothing new is introduced. */
.rows--flush{border-top:0}          /* events #upcoming had style="border-top:0" */
.chips .chip{display:inline-block}  /* .chip now sits on an inline <a> inside a list item */
.row__k > p{margin:0}               /* defensive: <p> replaces <span> inside the flex row key */

/* ---- 17.3b single-column rows ---------------------------- */
/* Four contact rows and five membership rows carried an inline
   style="grid-template-columns:1fr". core/group strips inline styles, so the
   inline rule becomes a class and the rows stay editable core blocks instead
   of raw HTML — which matters because those rows hold the contact details. */
.row--single{grid-template-columns:1fr}

/* ---- 17.4 footer link columns --------------------------- */
/* The footer columns are plain core/list blocks, not navigation menus, so
   they emit the same <ul><li><a> the static site used and the existing
   .footer__cols rules already style them. Only the list reset is needed.
   (Deliberate: a core/navigation here could be converted to a real menu by
   the owner, and the header's unbound navigation block would then resolve to
   that newer menu instead of Primary.) */
.footer__cols .wp-block-list{list-style:none;padding:0}

/* ---- 17.5 core/button ----------------------------------- */
/* Core renders: <div class="wp-block-button btn btn--gold">
                   <a class="wp-block-button__link"> </a></div>
   The custom class lands on the WRAPPER, so the .btn treatment has to
   be re-pointed at the inner anchor and the wrapper blanked out. */
.wp-block-button.btn{
  border:0;
  padding:0;
  background:none;
  overflow:visible;
  transition:none;
}
.wp-block-button.btn::before{display:none}
.wp-block-button.btn > .wp-block-button__link{
  display:inline-flex;
  align-items:center;
  gap:.85em;
  padding:1.05em 2.1em;
  border:1px solid var(--bd);
  border-radius:0;
  background:var(--bg);
  color:var(--fg);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:color .5s var(--ease),border-color .5s var(--ease);
}
.wp-block-button.btn > .wp-block-button__link::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:var(--ink);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .55s var(--ease);
}
.wp-block-button.btn > .wp-block-button__link:hover::before{transform:scaleX(1)}
.wp-block-button.btn > .wp-block-button__link > *,
.wp-block-button.btn > .wp-block-button__link > span{position:relative;z-index:1}
.wp-block-button.btn > .wp-block-button__link:hover{color:var(--ivory)}
.wp-block-button.btn--gold > .wp-block-button__link::before{background:var(--gold)}
.wp-block-button.btn--gold > .wp-block-button__link:hover{color:var(--navy)}
.wp-block-button.btn--solid > .wp-block-button__link::before{background:var(--gold)}
.wp-block-button.btn--solid > .wp-block-button__link:hover{color:var(--navy);border-color:var(--gold)}
.on-navy .wp-block-button.btn > .wp-block-button__link::before{background:var(--ivory)}
.on-navy .wp-block-button.btn > .wp-block-button__link:hover{color:var(--navy);border-color:var(--ivory)}
.on-navy .wp-block-button.btn--gold > .wp-block-button__link::before{background:var(--gold)}
.on-navy .wp-block-button.btn--gold > .wp-block-button__link:hover{color:var(--navy)}
.wp-block-buttons.btn-row{display:flex;flex-wrap:wrap;gap:1rem}

/* ---- 17.6 core/list ------------------------------------- */
.wp-block-list.verse,
.wp-block-list.dots,
.wp-block-list.dots--cols{list-style:none;padding:0}  /* margin omitted: the ul reset covers it, and margin:0 here outranked .mt-* */
.wp-block-list.dots--cols{columns:2;column-gap:clamp(2rem,5vw,4rem)}
@media (max-width:720px){.wp-block-list.dots--cols{columns:1}}

/* ---- 17.7 Editorial text blocks ------------------------- */
/* Nothing to restate: the reset already zeroes ul/h1-h4 margins, and
   .prose.prose > * + * (17.1b) supplies the 1.35em flow for every child,
   list and heading included. An explicit margin here outranked that rule
   and collapsed the editorial rhythm, so it was removed. */

/* ---- 17.8 Honest form notice ---------------------------- */
/* Companion to .form__ok, deliberately NOT celebratory. Revealed by
   main.js when a disconnected form is submitted. */
.form__notice{
  display:none;
  align-items:flex-start;
  gap:.8rem;
  border:1px solid var(--line-gold);
  padding:1rem 1.4rem;
  font-size:.78rem;
  letter-spacing:.02em;
  line-height:1.6;
  color:var(--ink-soft);
}
.form__notice.is-on{display:flex}
.form__notice a{color:var(--gold);border-bottom:1px solid var(--line-gold)}
.on-navy .form__notice,
.footer__news-form .form__notice{color:var(--on-dark-soft)}
.footer__news-form .form__notice{flex:1 0 100%}
