/* =====================================================================
   DESIGN TOKENS. Two layers, after the structure proven on
   lacaribenanews.com: BRAND PRIMITIVES first (what the client's colours
   actually are), then SEMANTIC ROLES that consume them (what each colour
   is for). One layer alone is why this theme could only ever offer three
   fixed looks: there was nowhere to put a client's own colour.

   Everything below is overridable per client from Ghost admin, as DATA.
   Never fork this file for a client. Defaults reproduce the 'Forest and
   gold' rendering exactly, byte for byte, so the live site is unchanged
   until somebody deliberately changes a setting.
   ===================================================================== */
:root{
  /* --- Layer 1: brand primitives. Set per client; these are the only
         values a client's identity actually dictates. --- */
  --brand-dark:#0A1A14;      /* deepest brand colour, grounds dark sections */
  --brand-light:#F7F5EF;     /* lightest brand colour, the page ground      */
  --brand-primary:#C9A227;   /* the accent that carries actions            */
  --brand-secondary:#157A4E; /* the supporting hue                          */

  /* --- Layer 2: semantic roles. Derived from the primitives. Rules in
         this stylesheet consume THESE, never the primitives directly. --- */
  --ink:var(--brand-dark); --ink-2:#122A21; --ink-3:#1C3B2F;
  --paper:var(--brand-light); --paper-2:#EFEBE0; --line:#D8D2C4;
  --gold:var(--brand-primary); --gold-deep:#7A6114; --gold-soft:#E8D9A4;
  --green:var(--brand-secondary); --text:#1A241F; --muted:#5C6B63;

  /* --- Typography. Ghost's admin font picker overrides these, and EVERY
         font-family in this file routes through them, so a change applies
         to the whole page rather than to body and h1-h6 only. --- */
  --gh-font-heading:"Source Serif 4",Georgia,serif;
  --gh-font-body:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* --- Radius scale. Defaults are the values already in use. --- */
  --r-xs:2px; --r-sm:3px; --r-md:6px; --r-lg:8px; --r-pill:100px;

  /* --- Elevation. Default is FLAT because this theme shipped with zero
         box-shadows; turning them on is opt-in so nothing shifts. --- */
  --shadow-sm:none; --shadow-md:none; --shadow-lg:none;

  /* --- Density. Multiplies section rhythm. --- */
  --density:1;
}

/* Corner style. Pill and circle never change: a pill that is not a pill is
   a different component, not a softer one. */
html[data-corners="sharp"]{--r-xs:0; --r-sm:0; --r-md:2px; --r-lg:3px}
html[data-corners="round"]{--r-xs:4px; --r-sm:8px; --r-md:14px; --r-lg:18px}

/* Elevation. Values follow the three-step scale used on lacaribenanews.com. */
html[data-elevation="subtle"]{
  --shadow-sm:0 1px 3px rgba(10,26,20,.10);
  --shadow-md:0 4px 6px rgba(10,26,20,.12);
  --shadow-lg:0 10px 25px rgba(10,26,20,.16)}
html[data-elevation="lifted"]{
  --shadow-sm:0 2px 6px rgba(10,26,20,.16);
  --shadow-md:0 8px 18px rgba(10,26,20,.20);
  --shadow-lg:0 18px 40px rgba(10,26,20,.26)}

html[data-density="compact"]{--density:.78}
html[data-density="spacious"]{--density:1.28}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);
  font-family:var(--gh-font-body);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:var(--gh-font-heading);font-weight:600;line-height:1.15;margin:0}
a{color:inherit}
img{max-width:100%;display:block}
body{overflow-wrap:break-word}
.wrap{width:min(1120px,92vw);margin-inline:auto}
.eyebrow{font-family:var(--gh-font-body);font-size:.72rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-deep)}

.prov{background:var(--ink);color:var(--gold-soft);font-size:.76rem;line-height:1.5;
  padding:.6rem 0;border-bottom:1px solid rgba(201,162,39,.28)}
.prov strong{color:#fff;font-weight:600}

.site-nav{position:sticky;top:0;z-index:50;background:rgba(247,245,239,.93);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-nav .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.7rem;padding:.85rem 0}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;min-width:0}
.brand .mark{width:38px;height:38px;flex:none;border-radius:var(--r-md);background:var(--ink);
  display:grid;place-items:center;color:var(--gold);
  font-family:var(--gh-font-heading);font-weight:700;font-size:.95rem}
.brand b{font-family:var(--gh-font-heading);font-size:1rem;font-weight:600;letter-spacing:-.01em}
.brand span{display:block;font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:600;white-space:normal}
/* NAVIGATION IS VISIBLE AT EVERY WIDTH. This was `display:none`, revealed only at
   min-width:961px, with no hamburger, no toggle and no aria-expanded anywhere in the theme.
   On every phone and most tablets the site had NO navigation at all and no way to reach it.
   It was masked while Ghost's default two-item nav was in place and became obvious the moment
   the real section links went back into the header.
   No JS was added: `.site-nav .wrap` is already flex-wrap and `.navlinks` already carries
   row-gap, so the links simply take their own row below the brand. Five short labels do not
   need a disclosure widget, and a hamburger would have meant a toggle, an expanded state and
   focus management, all to hide five words. */
.navlinks{display:flex;flex-wrap:wrap;row-gap:.4rem;gap:1.7rem;font-size:.9rem;font-weight:500}
/* Its own full row under the brand, and a 24px target: WCAG 2.2 AA 2.5.8 Target Size (Minimum)
   is 24 CSS px, and a bare .9rem link sits under that. */
@media(max-width:960px){
  /* Order on a phone is identity, then navigation, then the action. Wrapping alone put the
     CTA between the brand and the links, so the reader met "Get in touch" before knowing what
     the site contained. */
  .navlinks{order:2;flex-basis:100%;gap:1.2rem;padding-top:.1rem}
  .site-nav .btn{order:3}
  .navlinks a{display:inline-flex;align-items:center;min-height:24px}
}
.navlinks a{text-decoration:none;color:var(--muted)}
.navlinks a:hover{color:var(--ink)}
.btn{display:inline-block;background:var(--ink);color:var(--paper);text-decoration:none;
  padding:.7rem 1.3rem;border-radius:var(--r-sm);font-size:.88rem;font-weight:600;
  border:1px solid var(--ink);transition:background .15s}
.btn:hover{background:var(--ink-3)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-gold{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn-gold:hover{background:var(--gold-soft);border-color:var(--gold-soft)}
.site-nav .btn{padding:.6rem .8rem;font-size:.8rem;flex:none}

/* hero */
.hero{background:var(--ink);color:var(--paper);padding:2.75rem 0 0;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 420px at 82% -10%,rgba(21,122,78,.28),transparent 70%),
             radial-gradient(620px 320px at 6% 106%,rgba(201,162,39,.12),transparent 70%)}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center;padding-bottom:2.5rem}

.hero h1{font-size:clamp(2.4rem,5vw,3.9rem);letter-spacing:-.025em;max-width:16ch;margin:1.1rem 0 0}
.hero .lede{font-size:clamp(1.04rem,1.8vw,1.22rem);color:#CFDCD4;max-width:56ch;margin:1.4rem 0 0}
.hero .lede b{color:#fff;font-weight:600}
.hero-cta{display:flex;gap:.85rem;flex-wrap:wrap;margin:2.1rem 0 0}
.hero .btn-ghost{color:var(--paper);border-color:rgba(247,245,239,.45)}
.hero .btn-ghost:hover{background:var(--paper);color:var(--ink)}

.portrait-frame{position:relative}
.portrait-frame img{border-radius:var(--r-lg);border:1px solid rgba(201,162,39,.4);width:100%;
  height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%;
  filter:saturate(.96) contrast(1.02)}
.portrait-cap{margin-top:.9rem;font-size:.82rem;color:#A9BBB2;line-height:1.5}
.portrait-cap b{color:#fff;display:block;font-family:var(--gh-font-heading);font-size:1.02rem;font-weight:600}

/* her voice quote under hero */
.voicebar{background:var(--ink-2);border-top:1px solid rgba(255,255,255,.09);padding:2.6rem 0}
.voicebar blockquote{margin:0;font-family:var(--gh-font-heading);
  font-size:clamp(1.3rem,2.6vw,1.85rem);line-height:1.35;color:#fff;max-width:34ch}
.voicebar .attrib{margin-top:1rem;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.voicebar .wrap{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:end}

.voicebar .qmark{font-family:var(--gh-font-heading);font-size:6rem;color:rgba(201,162,39,.22);line-height:.6}

/* authority band */
.authority{background:var(--paper-2);padding:4.5rem 0;border-bottom:1px solid var(--line)}
.auth-grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}

.auth-grid img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 22%;
  border-radius:var(--r-lg);border:1px solid var(--line)}
.auth-cap{margin-top:.8rem;font-size:.8rem;color:var(--muted);line-height:1.5}
.creds{display:grid;grid-template-columns:1fr;gap:1.3rem;margin-top:1.8rem}

.cred-item{border-left:3px solid var(--gold);padding-left:1.1rem}
.cred-item b{display:block;font-family:var(--gh-font-heading);font-size:1.22rem;color:var(--ink);line-height:1.25}
.cred-item span{font-size:.87rem;color:var(--muted)}

/* photo strip */
.strip{display:grid;grid-template-columns:1fr;gap:1.2rem;margin-top:2.5rem}

.strip figure{margin:0}
.strip img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-md);border:1px solid var(--line)}
.strip figcaption{margin-top:.6rem;font-size:.8rem;color:var(--muted);line-height:1.45}

/* proof strip */
.proof{background:var(--ink);border-top:1px solid rgba(255,255,255,.09)}
.proof .wrap{display:grid;grid-template-columns:1fr 1fr}
.proof div{padding:1.85rem 1.2rem 1.85rem 0;border-right:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.09)}
.proof div:last-child{border-right:0}
.proof dt{font-family:var(--gh-font-heading);font-size:1.7rem;color:var(--gold);line-height:1.05;font-weight:600}
.proof dd{margin:.55rem 0 0;font-size:.82rem;color:#A9BBB2;line-height:1.45}

section{padding:3.5rem 0}
.alt{background:var(--paper-2)}
.sec-head{max-width:62ch;margin-bottom:3rem}
.sec-head h2{font-size:clamp(1.9rem,3.6vw,2.7rem);letter-spacing:-.02em;margin:.9rem 0 0}
.sec-head p{color:var(--muted);font-size:1.05rem;margin:1.1rem 0 0}
.cols{display:grid;grid-template-columns:1fr;gap:2.2rem;align-items:start}

.stat-block{border-left:3px solid var(--gold);padding-left:1.4rem;margin:2rem 0}
.stat-block b{font-family:var(--gh-font-heading);font-size:1.45rem;display:block;color:var(--ink)}
.stat-block span{font-size:.9rem;color:var(--muted)}

.grid3{display:grid;grid-template-columns:1fr;gap:1.5rem}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:1.9rem 1.7rem;
  display:flex;flex-direction:column;gap:.85rem;transition:border-color .16s,transform .16s}
.card:hover{border-color:var(--green);transform:translateY(-2px)}
.card.dark .num,.card.dark .code{color:var(--gold)}
.card .num{font-family:var(--gh-font-heading);font-size:.85rem;color:var(--gold-deep);font-weight:700;letter-spacing:.08em}
.card h3{font-size:1.26rem;letter-spacing:-.01em}
.card p{margin:0;font-size:.94rem;color:var(--muted)}
.card ul{margin:.2rem 0 0;padding-left:1.05rem;font-size:.88rem;color:var(--muted)}
.card li{margin:.3rem 0}

.std{display:grid;grid-template-columns:1fr;gap:1.5rem}

.std-card{background:var(--ink);color:var(--paper);border-radius:var(--r-md);padding:2rem 1.9rem;border:1px solid var(--ink-3)}
.std-card .code{font-family:var(--gh-font-heading);font-size:2rem;color:var(--gold);line-height:1;font-weight:600}
.std-card h3{margin:.6rem 0 0;font-size:1.16rem;color:#fff}
.std-card p{margin:.7rem 0 0;font-size:.92rem;color:#A9BBB2}
.std-more{border:1px dashed var(--line);border-radius:var(--r-md);padding:1.6rem 1.8rem;margin-top:1.5rem;
  font-size:.94rem;color:var(--muted);background:#fff}

/* principal */
.principal{display:grid;grid-template-columns:1fr;gap:2rem;align-items:start}

.principal img{border-radius:var(--r-lg);border:1px solid var(--line);width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%}
.pcap{margin-top:.85rem;font-size:.82rem;color:var(--muted);line-height:1.5}
.pcap b{display:block;color:var(--ink);font-family:var(--gh-font-heading);font-size:1.05rem;font-weight:600}
.pullquote{font-family:var(--gh-font-heading);font-size:1.28rem;line-height:1.45;color:var(--ink);
  border-top:2px solid var(--gold);border-bottom:2px solid var(--gold);padding:1.45rem 0;margin:2rem 0}
.pullquote cite{display:block;font-family:var(--gh-font-body);font-size:.76rem;font-style:normal;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:1rem}
.timeline{margin:2rem 0 0;padding:0;list-style:none}
.timeline li{display:grid;grid-template-columns:5.5rem 1fr;gap:1.2rem;padding:.85rem 0;border-top:1px solid var(--line);font-size:.94rem}
.timeline b{font-family:var(--gh-font-heading);color:var(--gold-deep);font-size:.95rem}
.timeline span{color:var(--muted)}

/* quotes grid */
.qgrid{display:grid;grid-template-columns:1fr;gap:1.5rem}

.qcard{background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:0 var(--r-md) var(--r-md) 0;padding:1.7rem}
.qcard p{margin:0;font-family:var(--gh-font-heading);font-size:1.08rem;line-height:1.45;color:var(--ink)}
.qcard cite{display:block;font-style:normal;font-size:.76rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-top:1.1rem;line-height:1.5}

/* press strip */
.pressstrip{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}
.pressstrip span{border:1px solid var(--line);background:#fff;border-radius:var(--r-pill);
  padding:.45rem 1rem;font-size:.8rem;color:var(--muted);font-weight:500}

.sectors{display:grid;grid-template-columns:1fr;gap:1.2rem}
.sectors>*{min-width:0}
.sector{border:1px solid var(--line);border-radius:var(--r-md);padding:1.5rem;background:#fff}
.sector h3{font-size:1.05rem;margin-bottom:.5rem}
.sector p{margin:0;font-size:.88rem;color:var(--muted)}

.steps{counter-reset:s}
.step{display:grid;grid-template-columns:auto 1fr;gap:1rem;padding:1.85rem 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step .n{counter-increment:s;font-family:var(--gh-font-heading);font-size:1.02rem;color:var(--gold-deep);
  font-weight:700;width:2.6rem;height:2.6rem;border:1px solid var(--gold-deep);border-radius:50%;
  display:grid;place-items:center;flex:none}
.step .n::before{content:counter(s,decimal-leading-zero)}
.step h3{font-size:1.2rem}
.step p{margin:.5rem 0 0;color:var(--muted);font-size:.95rem;max-width:64ch}

.cta{background:var(--ink);color:var(--paper);text-align:center}
.cta h2{font-size:clamp(2rem,4.2vw,3rem);max-width:20ch;margin-inline:auto;letter-spacing:-.02em}
.cta p{color:#CFDCD4;max-width:54ch;margin:1.3rem auto 0}
.cta-row{display:flex;gap:.85rem;justify-content:center;flex-wrap:wrap;margin-top:2.2rem}
.contact-line{margin-top:2.6rem;font-size:.9rem;color:#A9BBB2}
.contact-line a{color:var(--gold-soft)}

footer{background:var(--ink-2);color:#A9BBB2;font-size:.85rem;padding:3rem 0 2.5rem}
.foot-grid{display:grid;grid-template-columns:1fr;gap:1.6rem;margin-bottom:2.5rem}

footer h2{color:#fff;font-family:var(--gh-font-body);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 .85rem;font-weight:600}
footer a{color:#A9BBB2;text-decoration:none;display:block;margin:.35rem 0;padding:.2rem 0}
footer a:hover{color:var(--gold-soft)}
.foot-note{border-top:1px solid rgba(255,255,255,.1);padding-top:1.6rem;font-size:.78rem;line-height:1.6}
.hero .eyebrow,.head .eyebrow,.cta .eyebrow{color:var(--gold)}

/* ---- Accessibility remediation (WCAG 2.2 AA gate, 2026-08-24) ---- */
/* 2.4.1 Bypass Blocks */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--paper);
  padding:.8rem 1.2rem;font-size:.9rem;font-weight:600;text-decoration:none;border-radius:0 0 4px 0}
.skip:focus,.skip:focus-visible{left:0}
main:focus{outline:none}
/* 2.4.7 / 2.4.11 author-defined focus indicator, no longer UA-dependent */
:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:var(--r-xs)}
.hero :focus-visible,.head :focus-visible,.cta :focus-visible,.proof :focus-visible,
.voicebar :focus-visible,.summary :focus-visible,.side.dark :focus-visible,
.std-card :focus-visible,footer :focus-visible{outline-color:var(--gold)}
/* 2.3.3 Animation from Interactions */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;transition-delay:0s !important;scroll-behavior:auto !important}
  .card:hover,.post:hover,.side:hover{transform:none !important}
}
/* Base (320px) values. These sit at the top level deliberately: this file is
   mobile-first and the min-width blocks below enhance them. Until 2026-09-06 a
   stray closing brace followed them, orphaned when a media-query opener was removed at
   some point; browsers discarded it silently, so the stylesheet had been
   unbalanced (297 open / 298 close) without visible symptom. */
  .brand b{font-size:1rem}
  .site-nav .btn{padding:.65rem .9rem;font-size:.82rem}

/* ---- Mobile-first enhancement layer (base styles above are the 320px case) ---- */
@media(min-width:561px){
  .site-nav .wrap{gap:2rem}
  .brand{gap:.7rem}
  .brand b{font-size:1.12rem}
  .brand span{white-space:nowrap}
  .site-nav .btn{padding:.7rem 1.3rem;font-size:.88rem}
  .sectors{grid-template-columns:1fr 1fr}
}
@media(min-width:641px){ .creds{grid-template-columns:1fr 1fr} .grid3{grid-template-columns:1fr 1fr} }
@media(min-width:761px){
  section{padding:5.25rem 0}
  .hero{padding:4.5rem 0 0}
  .std{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem}
  .step{gap:1.8rem}
}
@media(min-width:821px){
  .voicebar .wrap{grid-template-columns:1fr auto}
  .strip{grid-template-columns:repeat(3,1fr)}
  .proof .wrap{grid-template-columns:repeat(4,1fr)}
  .proof div{padding:1.85rem 1.4rem 1.85rem 0;border-bottom:0}
}
@media(min-width:861px){ .cols{grid-template-columns:1fr 1fr;gap:3.5rem} }
@media(min-width:901px){
  .hero-grid{grid-template-columns:1.25fr .75fr;gap:3.5rem;padding-bottom:3.5rem}
  .auth-grid{grid-template-columns:.62fr 1.38fr;gap:3.2rem}
  .principal{grid-template-columns:.8fr 1.2fr;gap:3.5rem}
  .sectors{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:961px){
  .navlinks{display:flex}
  .grid3{grid-template-columns:repeat(3,1fr)}
  .qgrid{grid-template-columns:repeat(3,1fr)}
}

/* ---- Motion layer (EDEN for Sites, 2026-08-24) -------------------------
   Three effects, each one gated on frequency/purpose/speed/function before
   it was written. Reduced-motion handling is inline with each effect, not
   bolted on afterwards. Everything animates transform and opacity only. */
:root{--ease-out:cubic-bezier(.23,1,.32,1)}

/* 1. Press feedback. The site had :hover and no :active anywhere, so on
      touch (most of our traffic) buttons gave no press feedback at all. */
.btn{transition:background .15s var(--ease-out),border-color .15s var(--ease-out),color .15s var(--ease-out),transform .16s var(--ease-out)}
.btn:active{transform:scale(.97)}


/* 3. Section reveal — MOVED to assets/css/motion.css on 27 August 2026.
      One source of truth, because the transform-only rule was being restated per build
      and a fade is a WCAG 1.4.3 failure by construction. See motion.css for the full
      reasoning and the other presets. Loaded from default.hbs. */


/* ---- from accreditation.html ---- */
.head-grid{display:grid;grid-template-columns:1fr;gap:2.2rem;align-items:center}
.head-portrait img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 22%;
  border-radius:var(--r-lg);border:1px solid rgba(201,162,39,.4)}
.head-portrait figcaption{margin-top:.75rem;font-size:.79rem;color:#A9BBB2;line-height:1.5}
.head-portrait b{display:block;color:#fff;font-family:var(--gh-font-heading);font-size:1rem;font-weight:600}
/* the distinction */
.split{display:grid;grid-template-columns:1fr;gap:1.5rem}
.side .who{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--gold-deep)}
.side.dark .who{color:var(--gold)}
.note{background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:0 var(--r-md) var(--r-md) 0;padding:1.6rem 1.8rem;font-size:.94rem;color:var(--muted);margin-top:2rem}
.note b{color:var(--ink)}
.faq details{border-bottom:1px solid var(--line);padding:1.2rem 0}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;font-family:var(--gh-font-heading);font-size:1.14rem;font-weight:600;color:var(--ink);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--gold-deep);font-weight:700;margin-right:.7rem}
.faq details[open] summary::before{content:"–"}
.faq p{color:var(--muted);margin:.9rem 0 0;font-size:.95rem;max-width:72ch}

/* ---- from insights.html ---- */
.feature{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-bottom:2.5rem}
.feature img{width:100%;height:100%;min-height:260px;object-fit:cover}
.feature .body{padding:2.2rem}
.feature h3{font-size:clamp(1.4rem,2.6vw,1.85rem);letter-spacing:-.015em;margin:.6rem 0 .8rem}
.feature p{color:var(--muted);margin:0 0 1.2rem;font-size:.97rem}
.date{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.grid{display:grid;grid-template-columns:1fr;gap:1.6rem}
.post .thumb{aspect-ratio:16/10;width:100%;height:auto;object-fit:cover;background:var(--paper-2)}
.post .noimg{aspect-ratio:16/10;background:linear-gradient(150deg,var(--ink),var(--ink-3));
  display:grid;place-items:center;color:var(--gold);font-family:var(--gh-font-heading);font-size:1.7rem}
.post .body{padding:1.4rem 1.4rem 1.6rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.post .more{margin-top:auto;font-size:.8rem;font-weight:600;color:var(--green)}
.note{background:var(--paper-2);border-left:3px solid var(--gold);padding:1.5rem 1.7rem;
  border-radius:0 var(--r-md) var(--r-md) 0;font-size:.93rem;color:var(--muted);margin-top:2.5rem}
/* ISO 22000 panel — replaces a bitmap infographic with real text, closing
   WCAG 1.4.5. Mobile-first: single column base, no fixed widths, nothing that
   can overflow 320. Paper on ink and gold on ink are the two combinations the
   accessibility gate measured as safe on a dark ground. */
.fsms{background:var(--ink);color:var(--paper);padding:1.6rem 1.3rem;display:flex;flex-direction:column;gap:.55rem}
.fsms .fsms-eyebrow{margin:0;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.fsms .fsms-title{margin:0 0 .2rem;font-family:var(--gh-font-heading);font-size:1.32rem;font-weight:700;line-height:1.2;letter-spacing:normal;color:var(--paper)}
.fsms .fsms-lede{margin:0 0 .5rem;font-size:.88rem;line-height:1.5;color:var(--paper)}
.fsms .fsms-label{margin:.5rem 0 .1rem;font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
.fsms-chain{margin:0;padding:0;list-style:none;counter-reset:s;display:flex;flex-wrap:wrap;gap:.3rem .55rem}
.fsms .fsms-chain li{counter-increment:s;font-size:.8rem;line-height:1.4;color:var(--paper);flex:1 1 auto;min-width:0}
.fsms-chain li::before{content:counter(s);color:var(--gold);font-weight:700;margin-right:.35rem}
.fsms-benefits{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.4rem}
.fsms .fsms-benefits li{font-size:.82rem;line-height:1.45;color:var(--paper);padding-left:.85rem;position:relative;min-width:0}
.fsms-benefits li::before{content:"";position:absolute;left:0;top:.55em;width:.3rem;height:.3rem;background:var(--gold);border-radius:50%}
.fsms-benefits b{font-weight:700;color:var(--paper)}
.fsms .fsms-note{margin:.6rem 0 0;padding-top:.7rem;border-top:1px solid rgba(247,245,239,.25);font-size:.76rem;line-height:1.5;color:var(--paper)}
/* Registration facts as real text on the card, so the certificate image is
   supplementary rather than the sole carrier of the information (WCAG 1.4.5). */
.post .reg{margin:.6rem 0 0;font-size:.86rem;line-height:1.5;color:var(--text);border-top:1px solid var(--line);padding-top:.6rem}
.post .reg b{color:var(--ink);font-weight:700}

/* ---- from press.html ---- */
.head-grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
.head-portrait img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%;
  border-radius:var(--r-lg);border:1px solid rgba(201,162,39,.4)}
.head-portrait figcaption{margin-top:.8rem;font-size:.8rem;color:#A9BBB2;line-height:1.5}
.entry{border-top:1px solid var(--line);padding:2.2rem 0;display:grid;
  grid-template-columns:1fr;gap:.9rem}
.entry:last-child{border-bottom:1px solid var(--line)}
.entry .meta .pub{font-family:var(--gh-font-heading);font-size:1.05rem;color:var(--ink);font-weight:600}
.entry .meta .date{font-size:.83rem;color:var(--muted);margin-top:.2rem}
.entry .meta .tag{display:inline-block;margin-top:.7rem;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:600;color:var(--green);border:1px solid var(--green);
  border-radius:var(--r-pill);padding:.2rem .6rem}
.entry h3{font-size:1.32rem;letter-spacing:-.01em;margin-bottom:.7rem}
.entry h3 a{text-decoration:none;background-image:linear-gradient(var(--gold),var(--gold));
  background-size:0 2px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .2s}
.entry h3 a:hover{background-size:100% 2px}
.entry p{margin:0 0 .8rem;color:var(--muted);font-size:.96rem}
.entry blockquote{margin:1rem 0 0;padding:1rem 0 1rem 1.3rem;border-left:3px solid var(--gold);
  font-family:var(--gh-font-heading);font-size:1.08rem;line-height:1.45;color:var(--ink)}
.entry .src{font-size:.8rem;color:var(--muted);margin-top:.6rem}
.further{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:1.7rem 1.9rem}
.further h3{font-size:1.1rem;margin-bottom:.9rem}
.further ul{margin:0;padding-left:1.1rem;color:var(--muted);font-size:.92rem}
.further li{margin:.5rem 0}
.further .note{margin-top:1.1rem;font-size:.85rem;color:var(--muted);font-style:italic}
.faq{border-top:1px solid var(--line)}
.faq p{color:var(--muted);margin:.9rem 0 0;font-size:.96rem;max-width:70ch}

/* ---- from policies.html ---- */
.narrow{width:min(760px,92vw);margin-inline:auto}
.toc{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}
.toc a{border:1px solid rgba(247,245,239,.35);border-radius:var(--r-pill);padding:.42rem 1rem;
  font-size:.83rem;text-decoration:none;color:var(--gold-soft)}
.toc a:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.meta{font-size:.85rem;color:var(--muted);margin-top:.5rem}
.source{background:var(--paper-2);border-left:3px solid var(--green);padding:1rem 1.3rem;
  border-radius:0 5px 5px 0;font-size:.88rem;color:var(--muted);margin:1.4rem 0}
.source b{color:var(--ink)}
.flag{background:#FFF6EC;border:1px solid #E8C9A6;border-left:4px solid var(--flag);
  border-radius:0 var(--r-md) var(--r-md) 0;padding:1.5rem 1.7rem;margin:1.5rem 0}
.flag b{color:var(--flag);display:block;margin-bottom:.5rem;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}
.flag p{margin:.5rem 0;font-size:.94rem;color:var(--text)}
.todo{display:inline-block;background:#FDEBD8;border:1px dashed var(--flag);color:var(--flag);
  border-radius:var(--r-sm);padding:.1rem .5rem;font-size:.85rem;font-weight:600;font-family:var(--gh-font-body)}

/* =====================================================================
   PALETTES. Shipped as namedselect options, never as a colour picker.
   A client with a colour picker can reproduce the 2.03:1 gold failure this
   build already had to fix. Every palette below was measured before shipping;
   ratios are recorded so the next person can re-check rather than re-derive.
   Base 'Forest and gold' lives in :root above and is unchanged.
   ===================================================================== */

/* Navy and copper — measured text on paper=15.1; muted on paper=5.71; muted on paper-2=5.08; gold-deep on paper=7.04; gold-deep on paper-2=6.26; paper on ink=16.11; accent on ink=5.48
   Lowest pair: 5.08. AA body text requires 4.5. */
.theme-navy{
  --ink:#0B1A2A;
  --ink-2:#132638;
  --ink-3:#1D3550;
  --paper:#F6F5F2;
  --paper-2:#EAE8E2;
  --line:#D6D2C9;
  --gold:#C87F3C;
  --gold-deep:#7A4712;
  --gold-soft:#EBD3B8;
  --green:#1C6E8C;
  --text:#16202B;
  --muted:#57626D;
}

/* Slate and teal — measured text on paper=15.19; muted on paper=5.69; muted on paper-2=5.09; gold-deep on paper=6.94; gold-deep on paper-2=6.21; paper on ink=15.48; accent on ink=5.27
   Lowest pair: 5.09. AA body text requires 4.5. */
.theme-slate{
  --ink:#12201F;
  --ink-2:#1B2E2C;
  --ink-3:#264240;
  --paper:#F5F6F5;
  --paper-2:#E7EAE9;
  --line:#D2D8D6;
  --gold:#35A093;
  --gold-deep:#1E5E57;
  --gold-soft:#BFE0DB;
  --green:#2F7D6E;
  --text:#18211F;
  --muted:#586460;
}



/* Burgundy and sand - measured text on paper=16.02; muted on paper=5.93; muted on paper-2=5.73; gold-deep on paper=5.12; gold-deep on paper-2=4.95; paper on ink=18.56; accent on ink=4.83
   Lowest pair: 4.83. AA body text requires 4.5.    focus ring (SC 1.4.11, needs 3:1): 3.21 on paper, 5.79 on ink -> pass
   Minted 6 Sep 2026 from seed #8C2F39 via Radix 'red'. */
.theme-burgundy{
  --brand-dark:#111110; --brand-light:#fdfdfc; --brand-primary:#e5484d;
  --ink-2:#191918; --ink-3:#222221;
  --paper-2:#f9f9f8; --line:#dad9d6;
  --gold-deep:#ce2c31; --gold-soft:#500f1c;
  --green:#0090ff; --text:#21201c; --muted:#63635e;
}

/* Plum and sand - measured text on paper=16.02; muted on paper=5.93; muted on paper-2=5.73; gold-deep on paper=5.9; gold-deep on paper-2=5.7; paper on ink=18.56; accent on ink=4.84
   Lowest pair: 4.84. AA body text requires 4.5.    focus ring (SC 1.4.11, needs 3:1): 3.44 on paper, 5.4 on ink -> pass
   Minted 6 Sep 2026 from seed #7A2E8C via Radix 'plum'. */
.theme-plum{
  --brand-dark:#111110; --brand-light:#fdfdfc; --brand-primary:#B55FC2;
  --ink-2:#191918; --ink-3:#222221;
  --paper-2:#f9f9f8; --line:#dad9d6;
  --gold-deep:#953ea3; --gold-soft:#451d47;
  --green:#3e9b4f; --text:#21201c; --muted:#63635e;
}

/* Clay and sand - minted 6 September 2026 with tools/measure-palette.js from seed #A34A1F,
   derived from Radix scale 'brown' with neutral 'sand' (hue match 0.06 in OKLab).
   measured text on paper=16.02; muted on paper=5.93; muted on paper-2=5.73;
   gold-deep on paper=5.69; gold-deep on paper-2=5.5; paper on ink=18.56; accent on ink=5.36
   Lowest pair: 5.36. AA body text requires 4.5.
   Focus ring (SC 1.4.11, needs 3:1): 3.21 on paper, 5.79 on ink.
   The ring is deliberately a different hue from the accent, as in the three above. */
.theme-clay{
  --brand-dark:#111110; --brand-light:#fdfdfc; --brand-primary:#ad7f58;
  --ink-2:#191918; --ink-3:#222221;
  --paper-2:#f9f9f8; --line:#dad9d6;
  --gold-deep:#815e46; --gold-soft:#322922;
  --green:#0090ff; --text:#21201c; --muted:#63635e;
}

/* =====================================================================
   Koenig editor cards. Required by Ghost: content the client creates in
   the editor must render correctly, and wide/full images are the two
   widths the editor offers. Without these the client can produce layouts
   the theme silently ignores.
   ===================================================================== */
.post .body{max-width:68ch;margin-inline:auto}
.kg-card{margin:2rem 0}
.kg-width-wide{position:relative;width:min(1120px,92vw);margin-inline:calc(50% - min(560px,46vw))}
.kg-width-full{position:relative;width:100vw;margin-inline:calc(50% - 50vw);max-width:100vw}
.kg-width-full img{width:100%;height:auto}
.kg-image{margin-inline:auto;height:auto}
.kg-image-card figcaption,.kg-embed-card figcaption,.kg-gallery-card figcaption{
  margin-top:.6rem;font-size:.8rem;color:var(--muted);line-height:1.45;text-align:center}
.kg-gallery-row{display:flex;gap:.6rem}
.kg-gallery-image img{width:100%;height:auto}
.kg-bookmark-card a.kg-bookmark-container{display:flex;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--paper-2)}
.kg-bookmark-content{padding:1rem 1.1rem}
.kg-bookmark-title{font-family:var(--gh-font-heading);font-weight:600;color:var(--ink)}
.kg-bookmark-description{font-size:.88rem;color:var(--muted)}
.kg-bookmark-thumbnail img{width:100%;height:100%;object-fit:cover}
blockquote.kg-blockquote-alt{font-family:var(--gh-font-heading);font-size:1.25rem}
.kg-callout-card{display:flex;gap:.8rem;padding:1rem 1.2rem;border-radius:var(--r-md);
  background:var(--paper-2);border:1px solid var(--line)}
.kg-toggle-card{border:1px solid var(--line);border-radius:var(--r-md);padding:1rem 1.2rem}
.kg-button-card a{display:inline-block;background:var(--ink);color:var(--paper);
  text-decoration:none;padding:.7rem 1.3rem;border-radius:var(--r-sm);font-weight:600}

/* Custom font support: the declarations now live in the :root block at the
   top of this file, so the variables exist before any rule consumes them.
   Every font-family in this stylesheet routes through them (verified: 0
   hardcoded families remain), so Ghost's admin font picker changes the WHOLE
   page rather than only body and h1-h6. Before 2026-09-06 it changed two rules
   and left 20+ elements on the built-in pair, which made the setting look
   broken to the client. */
h5,h6{font-family:var(--gh-font-heading)}


/* Ghost's {{navigation}} helper emits <ul class="nav"> with <li class="nav-*">.
   That collided with the ported header rule and put a light background inside the
   dark footer, measured at 1.85:1. Namespaced the header to .site-nav and reset
   Ghost's list explicitly so the collision cannot recur silently. */
ul.nav{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:1.1rem;background:none}
ul.nav a{color:inherit;text-decoration:none}
.dark ul.nav a{color:var(--paper)}
.dark ul.nav a:hover{color:var(--gold-soft)}

/* ============================================================================
   SCROLL-CINEMATIC BEAT  (partials/cine.hbs + assets/js/scrollcine.js)
   Added 1 September 2026.

   The section is deliberately TALLER than the viewport and the canvas is sticky
   inside it: the scrub runtime maps scroll progress across that extra height onto
   the frame sequence, so the distance the reader travels IS the shot. Without the
   extra height there is no range to scrub over and the sequence collapses to one
   frame.

   `data-motion="hold"` is on the section in the markup: the entrance rise must not
   fight the scrub. One move per element is the rule and the scrub is the move.

   ON A PHONE, ON A METERED CONNECTION, AND UNDER REDUCED MOTION the runtime paints
   frame 0 and stops. That is its own decision, not ours, but the height has to
   collapse too or those readers scroll a viewport and a half of nothing. Hence the
   media queries below: they mirror the runtime's own gates exactly, and if the
   runtime's thresholds ever move these must move with them.
   ============================================================================ */
.cine{ position:relative; height:220vh; }
.cine-stage{ position:sticky; top:0; height:100vh; overflow:hidden; }
.cine-canvas{ display:block; width:100%; height:100%; background:var(--ink, #0d1712); }
.cine-cap{
  margin:0; padding:1rem 0 0;
  font-size:.875rem; line-height:1.5; color:var(--muted, #5a6b60);
}

/* Mirrors scrollcine.js: narrow viewport -> static frame, so the scrub height is dead space. */
@media(max-width:767px){
  .cine{ height:auto; }
  .cine-stage{ position:static; height:56vh; }
}
/* Mirrors scrollcine.js: reduced motion -> static frame, same reasoning. */
@media(prefers-reduced-motion:reduce){
  .cine{ height:auto; }
  .cine-stage{ position:static; height:60vh; }
}
/* No scroll-driven animation support -> the rest of the page shows content in place, and this
   beat must not become a tall empty column either. */
@supports not (animation-timeline:view()){
  .cine{ height:auto; }
  .cine-stage{ position:static; height:60vh; }
}