/* ============================================================
   Self-hosted faces. Previously these came from Google Fonts with
   display=swap, so every page painted the header in a fallback and then
   snapped to Cinzel a moment later — the font change in the top-left mark.
   Served same-origin and preloaded, they arrive before first paint.
   Latin subsets only: 116 KB for all three.
   ============================================================ */
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400 900;
  font-display:swap;src:url('fonts/cinzel-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 600;
  font-display:swap;src:url('fonts/ebgaramond-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400 500;
  font-display:swap;src:url('fonts/ebgaramond-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ============================================================
   JEZREEL INTERNATIONAL — design system
   Roman inscription. Black stone, gilded letters,
   imperial purple drawn from the JZRL mark.
   Display face: Cinzel, cut from the same imperial capitals
   that Trajan is based on.
   ============================================================ */
:root{
  /* The warm cream that used to sit behind the contact strip is now the
     ground. Bands lift ABOVE it rather than sinking below, which keeps the
     page feeling open instead of muddy. */
  --void:#EFE8DA; --stone:#F3EDE1; --stone-2:#E5DBC6; --stone-3:#DCD1BB;
  /* deep punctuation. A page with no dark note anywhere has nothing to push
     against — this is what the black build had and the first light pass lost.
     Gold returns here only: it sings on dark and goes muddy on cream. */
  /* Deep grounds follow the ink into mahogany. The dark cyan was the one
     note that never belonged, and gold sits far better on brown than teal. */
  --deep:#241512; --deep-2:#1B0F0C; --gold:#C9A45C; --gold-25:rgba(201,164,92,.32);
  /* ink, softened off pure black and cooled slightly so cream stays warm */
  /* Mahogany, and warm enough that the brown is visible at text size. The
     first mahogany was numerically lighter than the footer yet read as
     near-black: thin marks on cream lose their hue, where a large dark field
     keeps it. Lifting lightness 17.5% -> 25% and saturation 33% -> 40% fixes
     that. Alphas re-solved so the warmer ink costs no legibility. */
  --ivory:#593026;
  --ivory-70:rgba(89,48,38,.85); --ivory-50:rgba(89,48,38,.74);
  --ivory-35:rgba(89,48,38,.64);
  /* accent: deep teal reads clearly on cream where gold would go muddy */
  --brass:#186470; --brass-lt:#0D4650;
  --brass-25:rgba(24,100,112,.34); --brass-15:rgba(24,100,112,.20);
  /* the mark's own purple, kept for the logo and rare emphasis */
  --imperial:#4A1B64; --imperial-lt:#6E2E90;
  --oxblood:#A63C2B;
  --rule:rgba(31,39,43,.15);
  --display:"Cinzel","Trajan Pro",Georgia,"Times New Roman",serif;
  --prose:"EB Garamond","Adobe Garamond Pro",Garamond,Georgia,serif;
  --wrap:1160px; --gut:clamp(20px,5vw,56px); --band:clamp(70px,8.5vw,124px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--void);color:var(--ivory);
  font-family:var(--prose);font-size:18.5px;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.band{padding-block:var(--band)}
.narrow{max-width:780px;margin-inline:auto}
.center{text-align:center}

.label{font-family:var(--display);font-weight:500;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.34em;color:var(--brass)}
.prose p{margin:0 0 1.15em;color:var(--ivory-70)}
.prose p:last-child{margin-bottom:0}
.prose em,.prose i{font-style:italic;color:var(--ivory)}
.prose strong{color:var(--ivory);font-weight:600}
.prose h3{font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:13px;letter-spacing:.22em;color:var(--brass);margin:2.4em 0 1em}

.shead{margin-bottom:clamp(42px,5.5vw,70px)}
.shead .label{display:block;margin-bottom:20px}
.shead h2{font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(23px,3.5vw,41px);letter-spacing:.13em;line-height:1.16;margin:0}
.shead .sub{margin:20px auto 0;max-width:58ch;color:var(--ivory-50);
  font-size:17.5px;line-height:1.65;font-style:italic}
.diamond{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:26px}
.diamond::before,.diamond::after{content:"";height:1px;width:min(150px,18vw);
  background:linear-gradient(90deg,transparent,var(--brass-25))}
.diamond::after{background:linear-gradient(90deg,var(--brass-25),transparent)}
.diamond i{width:5px;height:5px;background:var(--brass);transform:rotate(45deg);flex:none}

.btn{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.24em;text-decoration:none;padding:16px 30px;
  border:1px solid var(--brass-25);background:transparent;color:var(--brass-lt);
  transition:background .25s ease,color .25s ease,border-color .25s ease}
.btn:hover{border-color:var(--brass);background:var(--brass);color:var(--void)}
.btn-fill{background:var(--brass);color:var(--void);border-color:var(--brass)}
.btn-fill:hover{background:var(--brass-lt);border-color:var(--brass-lt);color:var(--void)}
.btn-plain{color:var(--ivory-70);border-color:var(--rule)}
.btn-plain:hover{background:transparent;border-color:var(--ivory);color:var(--ivory)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.skip{position:absolute;left:-9999px;background:var(--brass);color:var(--void);
  padding:12px 18px;z-index:200;font-family:var(--display);font-size:11px;letter-spacing:.2em}
.skip:focus{left:12px;top:12px}

/* ---- header ---- */
.head{position:sticky;top:0;z-index:100;background:rgba(0,0,0,.93);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.head .wrap{display:flex;align-items:center;gap:22px;padding-block:12px}
.brand{display:flex;align-items:center;gap:18px;text-decoration:none;margin-right:auto}
/* Reversed JZRL mark: the letterforms knocked out to ivory, the bar kept in the
   brand purple. Same artwork, recoloured for a dark ground, so it needs no
   plate. jzrl-logo.png is the original for light backgrounds. */
.brand-plate{display:flex;align-items:center;flex:none}
.brand-plate img{height:54px;width:auto}
.brand-txt{display:flex;flex-direction:column;line-height:1}
/* Two-line lockup, both lines set to the same measure. JEZREEL is 7 characters
   and INTERNATIONAL is 13, so matching them means a size step plus tracking:
   20px/.30em over 11px/.28em comes out flush at 133px. */
.brand-txt .wm b,.brand-txt .wm i{display:block;font-family:var(--display);
  font-weight:600;font-style:normal;text-transform:uppercase;color:var(--ivory)}
.brand-txt .wm b{font-size:20px;letter-spacing:.30em;margin-right:-.30em}
.brand-txt .wm i{font-size:11px;letter-spacing:.28em;margin-right:-.28em;margin-top:3px}
.brand-txt .tag{font-family:var(--display);font-size:8.5px;font-weight:400;
  letter-spacing:.37em;margin-right:-.37em;text-transform:uppercase;
  color:var(--brass);margin-top:5px}
.nav{display:flex;gap:26px;align-items:center}
.nav a{font-family:var(--display);font-size:10.5px;font-weight:500;letter-spacing:.20em;
  text-transform:uppercase;text-decoration:none;color:var(--ivory-50);
  padding-bottom:5px;border-bottom:1px solid transparent;transition:.22s}
.nav a:hover{color:var(--ivory);border-color:var(--brass)}
.nav a.here{color:var(--ivory);border-color:var(--brass)}
.head .btn{padding:12px 22px;font-size:10px}
.menu-btn{display:none;background:none;border:1px solid var(--brass);
  color:var(--brass);font-family:var(--display);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;padding:11px 15px 11px 34px;cursor:pointer;position:relative}
/* three rules for the hamburger: the outline alone was a hairline in low
   contrast, easy to miss entirely on a phone */
.menu-btn::before,.menu-btn::after{content:"";position:absolute;left:14px;width:13px;
  height:1.5px;background:var(--brass)}
.menu-btn::before{top:calc(50% - 5px);box-shadow:0 5px 0 var(--brass)}
.menu-btn::after{top:calc(50% + 5px)}
.menu-btn[aria-expanded="true"]{background:var(--brass);color:var(--void)}
.menu-btn[aria-expanded="true"]::before,.menu-btn[aria-expanded="true"]::after{
  background:var(--void);box-shadow:0 5px 0 var(--void)}

/* The banding stays. Wide slow gradients over near-black run out of 8-bit
   steps and separate into visible arcs — technically a defect, kept on
   purpose because it looks better. The dither layer that removed it lived
   here; see README if it ever needs to come back. */

/* ---- home hero ---- */
.hero{position:relative;background:var(--void);overflow:hidden;
  border-bottom:1px solid var(--brass-15)}
.hero-bg{position:absolute;inset:0;background-image:url('img/hero.jpg?v=7');background-size:cover;background-position:center 42%;
  filter:grayscale(.62) contrast(1.05) brightness(.95);opacity:.85}
.hero-veil{position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 40%,rgba(74,27,100,.16),transparent 66%),
             linear-gradient(180deg,rgba(0,0,0,.80),rgba(0,0,0,.34) 26%,rgba(0,0,0,.52) 66%,rgba(0,0,0,.94))}
.hero .wrap{position:relative;z-index:2;padding-block:clamp(76px,10.5vw,146px);text-align:center}
/* scrim sits behind the copy only, so the photograph stays readable */
.hero-copy{position:relative}
.hero-copy::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(920px,84%);height:132%;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.80),rgba(0,0,0,.55) 48%,transparent 76%)}
.hero .label{display:block;margin-bottom:30px;text-shadow:0 1px 14px rgba(0,0,0,.8)}
.hero h1{font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(30px,6.2vw,74px);letter-spacing:.05em;line-height:.95;
  margin:0 auto 34px;max-width:13ch;text-shadow:0 2px 26px rgba(0,0,0,.6)}
.hero h1 span{color:var(--brass);display:block;white-space:nowrap;
  font-size:clamp(14px,2.5vw,31px);letter-spacing:.15em;line-height:1.2;
  margin-top:.75em}
@media (max-width:360px){.hero h1 span{white-space:normal}}
.hero-sub{font-size:clamp(17.5px,2vw,21px);line-height:1.72;max-width:60ch;
  margin:0 auto 42px;color:var(--ivory-70);text-shadow:0 1px 16px rgba(0,0,0,.75)}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.inscription{margin-top:clamp(52px,7vw,84px);border-block:1px solid rgba(194,161,90,.46);
  background:rgba(0,0,0,.32);backdrop-filter:blur(1.5px);
  display:grid;grid-template-columns:repeat(4,1fr)}
.inscription div{padding:26px 18px;border-right:1px solid rgba(194,161,90,.28)}
.inscription div:last-child{border-right:0}
.inscription dt{font-family:var(--display);font-size:9.5px;font-weight:400;
  letter-spacing:.30em;text-transform:uppercase;color:var(--ivory-35);margin-bottom:14px}
.inscription dd{margin:0;font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(16px,2vw,24px);letter-spacing:.10em;line-height:1.1;color:var(--ivory)}
.inscription dd small{display:block;font-family:var(--prose);font-size:14px;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--brass);margin-top:11px;font-style:italic}

/* ---- subpage banner ---- */
.pagehead{position:relative;background:var(--void);border-bottom:1px solid var(--brass-15);
  overflow:hidden}
.pagehead::before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(74,27,100,.42),transparent 62%)}
.pagehead .wrap{position:relative;z-index:2;padding-block:clamp(56px,7vw,96px);text-align:center}
.pagehead .label{display:block;margin-bottom:22px}
.pagehead h1{font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(26px,4.8vw,54px);letter-spacing:.11em;line-height:1.15;margin:0}
.pagehead p{margin:24px auto 0;max-width:60ch;color:var(--ivory-50);
  font-size:18px;font-style:italic;line-height:1.65}

/* ---- urgent ---- */
.urgent{background:var(--oxblood)}
.urgent .wrap{display:flex;align-items:center;justify-content:center;gap:12px 26px;
  flex-wrap:wrap;padding-block:19px;text-align:center}
.urgent .label{color:#F2DCD9;letter-spacing:.30em}
.urgent p{margin:0;font-size:17px;line-height:1.5;color:#FBF3F1}
.urgent a{font-family:var(--display);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  text-decoration:none;color:#fff;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:4px}
.urgent a:hover{border-color:#fff}

/* ---- programs: carved, not photographic ----
   Four snapshots at thumbnail size read as clip art. At this scale the words
   carry more weight than the pictures, so the pictures are gone and the
   photography is concentrated in the full-bleed plate below. */
.programs{background:var(--stone)}
/* Equal columns via gap, not padding. Padding on the articles plus a zeroed
   outer edge made the first and last content boxes 30px wider than the middle
   two — invisible with text, obvious the moment images fill the box. The rule
   now floats in the gap as a pseudo-element instead. */
.creed{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 60px}
.creed article{position:relative;padding:8px 0 4px}



.creed h3 a{color:inherit;text-decoration:none;transition:color .25s ease}
/* stretched link: the heading is the accessible link, the whole card is the
   target. Four cards pointing at one page, so the heading carries the label
   rather than four identical "read more" links. */
.creed h3 a::after{content:"";position:absolute;inset:0;z-index:2}
.creed article:has(a){cursor:pointer}
.creed article:hover h3 a,.creed h3 a:focus-visible{color:var(--brass)}


/* Image, then a solid mahogany plate carrying the name in cream, then the
   description on the page ground. The plate does the work the little diamond
   and hairline were doing, and does it at a glance. */
.creed figure{margin:0;overflow:hidden;background:var(--stone-3);
  width:100%;aspect-ratio:10/7}
/* Two of the four names wrap and two do not, so the plates are given room for
   two lines either way and the text is centred in them. Without this the body
   copy starts at a different height in each column. */
.creed h3{margin:0;background:var(--deep);display:flex;align-items:center;
  font-family:var(--display);font-weight:500;text-transform:uppercase;
  font-size:clamp(13px,1.35vw,16px);letter-spacing:.18em;line-height:1.4;
  padding:clamp(16px,1.7vw,22px) clamp(14px,1.5vw,20px);
  min-height:calc(2.8em + 2 * clamp(16px,1.7vw,22px));
  transition:background .3s ease}
.creed h3 a{color:#F4EFE4;text-decoration:none;transition:color .3s ease}
.creed article:hover h3{background:#33201A}
.creed article:hover h3 a,.creed h3 a:focus-visible{color:var(--gold)}
.creed p{margin:clamp(18px,2vw,24px) 0 0;font-size:16.5px;line-height:1.66;color:var(--ivory-50)}
/* Optional photographic variant. These rules do nothing unless a <figure>
   is present, so the stylesheet serves both versions of the page. */

.creed figure img{width:100%;height:100%;object-fit:cover;
  display:block;filter:brightness(.90);transition:filter .55s ease,transform .7s ease}
.creed article:hover figure img{filter:brightness(1.05);transform:scale(1.03)}
.creed article:has(figure){padding-top:0}
/* Dormant. Not in use — kept so an AI-image credit can be switched back on
   with one line of HTML and no stylesheet change:
   <p class="disclosure">Illustrative images, AI-generated</p> */
.disclosure{margin:18px 0 0;text-align:right;font-family:var(--display);
  font-size:10px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(237,233,223,.40)}

/* ---- full-bleed documentary plate ---- */
.plate{position:relative;background:var(--void);overflow:hidden}
.plate img{width:100%;height:clamp(300px,42vw,540px);object-fit:cover;
  object-position:center 46%;display:block}
.plate::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.05) 34%,rgba(0,0,0,.88))}
.plate-cap{position:absolute;left:0;right:0;bottom:0;z-index:2}
.plate-cap .wrap{padding-block:clamp(24px,3.5vw,40px)}
.plate-cap .label{display:block;margin-bottom:14px}
.plate-more{margin-top:26px}
.plate-cap p{margin:0;font-family:var(--display);font-weight:600;
  text-transform:uppercase;font-size:clamp(16px,2.4vw,30px);letter-spacing:.11em;
  line-height:1.25;color:var(--ivory);max-width:22ch;
  text-shadow:0 2px 22px rgba(0,0,0,.7)}

/* ---- roll of nations ---- */
.roll{background:var(--void);position:relative;overflow:hidden}
/* Atmospheric band behind the nations list. This is the one place on the site
   where licensed stock earns its keep — a container ship or a port at dusk
   illustrates the journey without claiming to depict anyone's beneficiaries.
   Swap assets/img/passage.jpg and nothing else needs to change. */
.roll-bg{position:absolute;inset:0;background-size:cover;background-position:center 55%;
  filter:grayscale(.72) contrast(1.06) brightness(.62);opacity:.40}
.roll-veil{position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 50%,rgba(74,27,100,.20),rgba(0,0,0,.72) 62%,rgba(0,0,0,.94)),
             linear-gradient(180deg,rgba(0,0,0,.92),rgba(0,0,0,.34) 26%,rgba(0,0,0,.34) 74%,rgba(0,0,0,.92))}
.roll .wrap{text-align:center;position:relative;z-index:2}
.roll-list span{text-shadow:0 2px 18px rgba(0,0,0,.8)}
.roll-list{font-family:var(--display);font-weight:500;text-transform:uppercase;
  font-size:clamp(15px,2.3vw,28px);letter-spacing:.15em;line-height:2.05;color:var(--ivory);
  margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;column-gap:.5em}
.roll-list span{white-space:nowrap;transition:color .3s ease}
.roll-list span:hover{color:var(--brass-lt)}
.roll-list i{color:var(--brass);font-style:normal;opacity:.65;
  transform:translateY(-.12em);display:inline-block}
.roll-more{margin-top:38px;font-size:17px;font-style:italic;color:var(--ivory-50)}
.roll-more b{font-family:var(--display);font-style:normal;font-weight:600;
  letter-spacing:.14em;font-size:14px;color:var(--brass)}

/* ---- ledger ---- */
.ledger{background:var(--stone)}
.lg-table{width:100%;border-collapse:collapse}
.lg-table caption{position:absolute;left:-9999px}
.lg-table th{text-align:left;font-family:var(--display);font-size:9.5px;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;color:var(--ivory-35);
  padding:0 20px 16px 0;border-bottom:1px solid var(--brass-25);white-space:nowrap}
.lg-table td{padding:22px 20px 22px 0;border-bottom:1px solid var(--rule);
  font-size:16.5px;vertical-align:middle;color:var(--ivory-50)}
.lg-table tbody tr{transition:background .25s ease}
.lg-table tbody tr:hover{background:rgba(194,161,90,.045)}
.lg-dest{font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:15px;letter-spacing:.14em;color:var(--ivory);white-space:nowrap}
.lg-ref{font-family:var(--display);font-size:11.5px;letter-spacing:.16em;
  color:var(--brass);white-space:nowrap}
.lg-when{font-family:var(--display);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ivory-35);white-space:nowrap}
.lg-status{white-space:nowrap;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-size:10px;letter-spacing:.20em;text-transform:uppercase}
.pip{width:5px;height:5px;transform:rotate(45deg);flex:none}
.pip-done{background:var(--ivory-35)}
.pip-live{background:var(--brass);box-shadow:0 0 0 0 rgba(194,161,90,.55);animation:pulse 2.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(194,161,90,0)}100%{box-shadow:0 0 0 0 rgba(194,161,90,0)}}
.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

.feature{background:var(--stone);border-bottom:1px solid var(--brass-15)}
.feature-frame{position:relative;aspect-ratio:16/9;background:var(--stone-3);
  border:1px solid var(--rule);overflow:hidden;max-width:980px;margin:0 auto;
  transition:border-color .3s ease}
.feature-frame:hover{border-color:var(--brass-25)}
.feature-frame img,.feature-frame iframe{width:100%;height:100%;display:block;border:0}
.feature-frame img{object-fit:cover}
.yt-play{position:absolute;inset:0;width:100%;height:100%;border:0;background:none;
  cursor:pointer;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:16px;padding:0}
.yt-play span{width:66px;height:66px;border:1px solid var(--brass);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.30);transition:background .25s ease,transform .25s ease}
.yt-play span::after{content:"";width:0;height:0;margin-left:5px;
  border-left:17px solid var(--brass);border-block:10px solid transparent}
.yt-play:hover span{background:var(--brass);transform:scale(1.06)}
.yt-play:hover span::after{border-left-color:var(--void)}
.yt-play small{font-family:var(--display);font-size:9.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ivory-70)}
.feature-frame video{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.30) brightness(.96);transition:filter .5s ease}
/* the shared fallback wash is tuned for small cards; at this size it just
   makes the poster look purple */
.feature-frame .film-fallback{background:linear-gradient(180deg,
  rgba(0,0,0,.22),rgba(0,0,0,.10) 40%,rgba(0,0,0,.55))}
.feature-frame:hover video{filter:grayscale(.15) brightness(1)}
.feature-frame.playable video{filter:none}
.feature-cap{max-width:760px;margin:30px auto 0;text-align:center;
  font-size:17px;line-height:1.65;color:var(--ivory-50);font-style:italic}
.feature-cta{text-align:center;margin-top:30px}
.feature-frame video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
/* shown when a self-hosted video finishes playing */
/* The video draws its own call to action at 2:00 — "Click here to donate
   safely online" — and holds it to the end at 2:31. Measured off the frame,
   those words occupy x 0.231-0.772, y 0.655-0.846. This region covers them
   with a little padding and stops short of the scrubber at 0.873, so seeking
   still works. Nothing is drawn over the words: the video already supplies
   the affordance, so a button here would only compete with it. */
/* Reels sit in a portrait frame matching Instagram's own aspect, so nothing
   jumps when the embed replaces the card. */
.reel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,34px);
  align-items:stretch}
.reel{margin:0;display:flex}
.reel-frame{flex:1}
/* The card sizes to its own text until someone plays it; only then does it
   take Instagram's portrait aspect. Sitting at 400x620 while holding two
   lines of text left most of each card empty. */
.reel-frame{position:relative;background:var(--stone-2);
  border:1px solid var(--rule);overflow:hidden;min-height:260px}
.reel-frame.playing{aspect-ratio:400/620;min-height:0}
.reel-frame iframe{width:100%;height:100%;border:0;display:block;background:#fff}
.reel-face{display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;min-height:260px;
  padding:clamp(22px,2.6vw,32px);gap:16px}
.reel-face .label{color:var(--brass)}
.reel-face p{margin:0;font-size:16px;line-height:1.62;color:var(--ivory-70)}
.reel-play{margin-top:6px}
.reel-more{margin:clamp(28px,3vw,40px) 0 0;text-align:center;font-family:var(--display);
  font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.reel-more a{color:var(--brass);text-decoration:none}
.reel-more a:hover{color:var(--brass-lt)}
@media (max-width:900px){.reel-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.reel-grid{grid-template-columns:1fr;max-width:400px;margin:0 auto}}

.video-cue{position:absolute;left:20%;right:20%;top:62%;bottom:14.5%;
  z-index:3;display:block;cursor:pointer;opacity:0;transition:opacity .35s ease;
  border-radius:4px}
.video-cue.in{opacity:1}
.video-cue::after{content:"";position:absolute;inset:0;border-radius:4px;
  background:rgba(24,100,112,0);box-shadow:inset 0 0 0 0 rgba(24,100,112,0);
  transition:background .22s ease, box-shadow .22s ease}
/* a light touch on hover, so a mouse user can tell the words are live */
.video-cue:hover::after,.video-cue:focus-visible::after{
  background:rgba(24,100,112,.07);box-shadow:inset 0 0 0 2px rgba(24,100,112,.45)}
.video-cue b{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}

/* stops short of the control bar so the player can still be scrubbed and
   replayed while this is up */
.video-end{position:absolute;left:0;right:0;top:0;bottom:14.5%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:20px;text-align:center;padding:28px;
  background:linear-gradient(180deg,rgba(27,15,12,.82),rgba(27,15,12,.94))}
.video-again{background:none;border:0;padding:4px 6px;cursor:pointer;
  font-family:var(--display);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(244,239,228,.62);
  border-bottom:1px solid rgba(244,239,228,.28)}
.video-again:hover{color:var(--gold);border-bottom-color:var(--gold)}
.video-end p{margin:0;font-family:var(--display);text-transform:uppercase;
  font-size:clamp(13px,1.7vw,19px);letter-spacing:.13em;line-height:1.5;
  color:#F4EFE4;max-width:24ch}
.feature-cap cite{display:block;margin-top:16px;font-family:var(--display);
  font-style:normal;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--brass)}

/* ---- video / newsroom ---- */
.films{background:var(--void);border-top:1px solid var(--brass-15)}
.film-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(22px,3vw,40px)}
.film{border:1px solid var(--rule);background:var(--stone-2);
  transition:border-color .3s ease}
.film:hover{border-color:var(--brass-25)}
.film-frame{position:relative;aspect-ratio:16/9;background:var(--stone-3);overflow:hidden}
.film-frame video{width:100%;height:100%;object-fit:cover;display:block;background:var(--stone-3);
  filter:grayscale(.85) contrast(1.06) brightness(.82);transition:filter .5s ease}
.film:hover .film-frame video{filter:grayscale(.2) contrast(1.03) brightness(.95)}
.film-frame.playable video{filter:none}
.film-fallback{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;text-align:center;padding:24px;
  background:linear-gradient(180deg,rgba(74,27,100,.30),rgba(0,0,0,.86));pointer-events:none}
.film-frame.playable .film-fallback{display:none}
.film-fallback .play{width:58px;height:58px;border:1px solid var(--brass);border-radius:50%;
  display:flex;align-items:center;justify-content:center}
.film-fallback .play::after{content:"";width:0;height:0;margin-left:4px;
  border-left:15px solid var(--brass);border-block:9px solid transparent}
.film-fallback small{font-family:var(--display);font-size:9.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ivory-50);line-height:2}
.film-body{padding:26px 26px 30px}
.film-body .label{display:block;margin-bottom:14px}
.film-body h3{font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:14.5px;letter-spacing:.16em;line-height:1.4;margin:0 0 16px;color:var(--ivory)}
.film-body p{margin:0;font-size:16.5px;line-height:1.62;color:var(--ivory-50)}
.film-body cite{display:block;margin-top:18px;font-family:var(--display);font-style:normal;
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--brass)}

/* ---- about ---- */
.about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(40px,6vw,80px);align-items:start}
.lede{font-size:clamp(21px,2.6vw,29px);line-height:1.45;margin:0 0 32px;color:var(--ivory)}
.lede i{font-style:italic;color:var(--brass-lt)}
.sig{margin-top:38px;padding-top:24px;border-top:1px solid var(--brass-15)}
.sig b{font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:15px;letter-spacing:.18em;display:block;color:var(--ivory)}
.sig span{font-family:var(--display);font-size:9.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ivory-35);display:block;margin-top:10px}
.panel{border:1px solid var(--rule);padding:32px 30px;background:var(--stone-2)}
.panel h3{font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:11px;letter-spacing:.28em;margin:42px 0 20px;color:var(--brass)}
.panel h3:first-child{margin-top:0}
.panel h3+ul{margin-top:0}
.panel ul+h3{padding-top:38px;margin-top:4px;border-top:1px solid var(--rule)}
.facts{list-style:none;margin:0;padding:0}
.facts li{font-size:16.5px;line-height:1.5;padding:15px 0;border-bottom:1px solid var(--rule);
  color:var(--ivory-70)}
.facts li:first-child{border-top:1px solid var(--rule)}
.facts li:last-child{border-bottom:0}
.facts b{display:block;font-family:var(--display);font-size:9.5px;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ivory-35);margin-bottom:7px}
.roster{list-style:none;margin:0;padding:0}
.roster li{font-size:16.5px;line-height:1.9;color:var(--ivory-70)}
.roster li span{font-family:var(--display);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass);margin-left:8px}

/* ---- checklists ---- */
.check{columns:3;column-gap:44px;list-style:none;margin:0 auto;padding:0;text-align:left}
.check.two{columns:2}
.check li{break-inside:avoid;font-size:16.5px;line-height:1.45;padding:13px 0 13px 32px;
  position:relative;border-bottom:1px solid var(--rule);color:var(--ivory-70)}
.check li::before{content:"";position:absolute;left:0;top:19px;width:6px;height:6px;
  border:1px solid var(--brass);transform:rotate(45deg);transition:background .25s ease}
.check li:hover::before{background:var(--brass)}
/* The page banner already says Current Needs; a second heading under it read
   as an empty section with a canyon of cream between the two. The list now
   follows the banner directly, with only a lead line. */
.needs-list{padding-top:clamp(34px,4vw,56px)}
.list-lead{margin:0 auto clamp(30px,3.5vw,48px);max-width:56ch;text-align:center;
  font-size:17.5px;line-height:1.65;font-style:italic;color:var(--ivory-50)}

.needs-aside{max-width:56ch;margin:22px 0 0;font-size:15.5px;line-height:1.65;
  color:var(--ivory-50);font-style:italic}
.needs-foot{display:flex;gap:20px;flex-wrap:wrap;align-items:center;justify-content:center;
  text-align:center;margin-top:46px}
.needs-foot p{margin:0;font-size:16px;color:var(--ivory-35);line-height:1.65;font-style:italic}

/* ---- cards ---- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,34px)}
.card{border:1px solid var(--rule);padding:38px 32px 36px;display:flex;flex-direction:column;
  text-align:center;transition:border-color .3s ease,background .3s ease}
.card:hover{border-color:var(--brass-25);background:var(--stone-2)}
.card .label{display:block;margin-bottom:20px}
.card h3{font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(15px,1.8vw,20px);letter-spacing:.14em;line-height:1.3;margin:0 0 20px}
.card p{margin:0 0 30px;color:var(--ivory-50);font-size:16.5px;line-height:1.62;flex:1}

/* ---- letters / testimonies ---- */
.letter{border-left:1px solid var(--brass-25);padding:6px 0 6px 34px;margin-bottom:64px}
.letter .label{display:block;margin-bottom:20px}
/* headline was styled inline; it belongs here now that stories carry an
   editorial intro above the quote */
.letter h3{font-family:var(--display);font-weight:500;text-transform:uppercase;
  font-size:14px;letter-spacing:.16em;line-height:1.45;margin:0 0 20px;color:var(--ivory)}
.letter-intro{margin:0 0 24px;font-size:17px;line-height:1.7;color:var(--ivory-70);
  font-style:italic;padding-left:20px;border-left:2px solid var(--brass-25)}

.letter blockquote{margin:0;font-size:18.5px;line-height:1.75;color:var(--ivory-70);font-style:italic}
.letter blockquote p{margin:0 0 1.1em}
.letter blockquote p:last-child{margin-bottom:0}
.letter footer{margin-top:24px;padding-top:18px;border-top:1px solid var(--rule)}
.letter footer b{font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:12.5px;letter-spacing:.18em;color:var(--ivory);display:block}
.letter footer span{font-family:var(--display);font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--brass);display:block;margin-top:8px}

/* ---- donate ---- */
.give-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:stretch}
/* text-wrap:balance evens the line lengths on short centred blocks. Without
   it these strand a single word on the last line — at 1024px the give line
   ended with "port." alone, 61px wide against a 348px line. */
.give-intro{max-width:60ch;margin:0 auto clamp(46px,5vw,70px);text-align:center}
.give-lead{margin:0 0 20px;font-family:var(--display);font-weight:500;
  font-size:clamp(18px,2.1vw,25px);line-height:1.45;letter-spacing:.01em;
  color:var(--ivory);text-wrap:balance}
.give-intro p+p{margin:0;font-size:17.5px;line-height:1.7;color:var(--ivory-70);
  text-wrap:balance}
.give-intro .diamond{margin-top:clamp(30px,3.2vw,42px)}
.give-fine{margin:18px 0 0;font-size:14.5px;line-height:1.5;color:var(--ivory-50);
  text-wrap:balance}
/* Two different jobs. balance evens the line lengths of a short centred
   block; pretty stops a body paragraph dropping one or two words onto a line
   of their own. These are type selectors, so the class rules keep winning
   wherever a block wants balancing instead. */
p,li,blockquote,figcaption,dd{text-wrap:pretty}
.hero-sub,.pagehead p,.shead .sub,.feature-cap,.list-lead,
.give-line,.give-sub,.give-fine{text-wrap:balance}
.give-panel{border:1px solid var(--brass-25);padding:clamp(30px,4vw,50px);text-align:center;
  background:linear-gradient(180deg,rgba(74,27,100,.22),transparent 70%);
  display:flex;flex-direction:column;justify-content:center}
.give-panel h2{font-family:var(--display);font-weight:600;text-transform:uppercase;
  font-size:clamp(19px,2.4vw,27px);letter-spacing:.13em;margin:0 0 20px;line-height:1.25}
.give-panel p{margin:0 0 30px;color:var(--ivory-50);font-size:16.5px}
/* Impact tiers are a reading aid, not links. Zeffy has no URL parameter for
   prefilling an amount, so a clickable "$100" would land on an unset form.
   The matching four amounts are configured in the Zeffy form editor. */
.tiers{margin:0 0 34px;border-top:1px solid var(--brass-15);text-align:left}
.tier{display:flex;align-items:baseline;gap:20px;padding:15px 2px;
  border-bottom:1px solid var(--brass-15)}
.tier b{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:.06em;
  color:var(--brass);flex:none;min-width:70px}
.tier span{font-size:16.5px;line-height:1.5;color:var(--ivory-70)}
@media (max-width:420px){.tier{gap:14px}.tier b{min-width:58px;font-size:17px}}

/* ---- contact form ---- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:9px}
.field.full{grid-column:1/-1}
.field label{font-family:var(--display);font-size:9.5px;font-weight:500;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ivory-35)}
.form-note{margin:16px 0 0;font-size:15.5px;line-height:1.5;min-height:1.2em}
.form-note.good{color:var(--brass)}
.form-note.bad{color:var(--oxblood)}
.field input,.field textarea{background:var(--stone-2);border:1px solid var(--rule);
  color:var(--ivory);font-family:var(--prose);font-size:17px;padding:14px 16px;
  border-radius:0;transition:border-color .25s ease}
.field input:focus,.field textarea:focus{border-color:var(--brass);outline:none}
.field textarea{min-height:150px;resize:vertical}
.hp{position:absolute;left:-9999px}

/* ---- trust ---- */
.trust{background:var(--stone-2);border-top:1px solid var(--rule)}
.trust .wrap{padding-block:clamp(46px,5.5vw,66px)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,44px)}
.trust-item{text-align:center}
.trust-item .label{display:block;margin-bottom:14px;color:var(--ivory-35)}
.trust-item p{margin:0;font-size:16px;line-height:1.6;color:var(--ivory-70)}
.trust-item a{color:var(--brass-lt);text-decoration-color:var(--brass-25);text-underline-offset:4px}
.trust-item a:hover{text-decoration-color:var(--brass)}

/* ---- footer ---- */
.foot{background:var(--void);border-top:1px solid var(--brass-15)}
.foot .wrap{padding-block:clamp(52px,6.5vw,80px)}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:46px}
.foot .brand-plate{display:inline-flex;margin-bottom:28px}
.foot .brand-plate img{height:58px}
.foot address{font-style:normal;font-size:16.5px;line-height:2;color:var(--ivory-50)}
.foot address a{text-decoration:none}
.foot address a:hover{color:var(--brass)}
/* Inline SVG so there is no extra request and the marks take the theme's
   colour. 44px hit areas, which is the minimum a thumb can reliably land on. */
.social{list-style:none;margin:26px 0 0;padding:0;display:flex;gap:4px}
.social li{margin:0}
.social a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  color:var(--ivory-35);transition:color .25s ease,transform .25s ease}
.social svg{width:19px;height:19px;fill:currentColor;display:block}
.social a:hover,.social a:focus-visible{color:var(--brass);transform:translateY(-2px)}
.foot h4{font-family:var(--display);font-size:9.5px;font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;color:var(--brass);margin:0 0 22px;padding-bottom:14px;
  border-bottom:1px solid var(--rule)}
.foot ul{list-style:none;margin:0;padding:0}
.foot ul li{margin-bottom:13px}
.foot ul a{font-size:16.5px;text-decoration:none;color:var(--ivory-50)}
.foot ul a:hover{color:var(--brass-lt)}
.hours{font-size:16.5px;line-height:1.9;color:var(--ivory-50);margin:0}
.hours b{font-family:var(--display);font-size:10px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ivory);display:block;margin-top:14px}
.hours b:first-child{margin-top:0}
.foot-bar{border-top:1px solid var(--rule);margin-top:52px;padding-top:26px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--display);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ivory-35)}

/* ---- responsive ---- */
@media (max-width:1000px){
  .creed{grid-template-columns:repeat(2,minmax(0,1fr));gap:46px 50px}
  
  .about-grid,.give-grid,.film-grid{grid-template-columns:1fr}
  .check{columns:2}
  .trio{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .inscription{grid-template-columns:repeat(2,1fr)}
  .inscription div:nth-child(2){border-right:0}
  .inscription div:nth-child(1),.inscription div:nth-child(2){border-bottom:1px solid rgba(194,161,90,.28)}
}
/* The desktop nav stops fitting beside the wordmark well before the phone
   breakpoint, so it collapses on its own schedule. */
@media (max-width:1060px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:#000;
    flex-direction:column;gap:0;padding:6px 0 16px;border-bottom:1px solid var(--rule)}
  .nav.open{display:flex}
  .nav a{padding:14px var(--gut);width:100%;border-bottom:0}
  .nav a:hover{background:var(--stone-2)}
  .menu-btn{display:block;order:2;margin-left:auto}
  .head .wrap{position:relative;flex-wrap:wrap;row-gap:12px}
  .head .btn{order:3}
}
@media (max-width:760px){
  body{font-size:17px}
  .brand-txt .wm b{font-size:16px;letter-spacing:.30em;margin-right:-.30em}
  .brand-txt .wm i{font-size:9px;letter-spacing:.28em;margin-right:-.28em;margin-top:2px}
  .brand-txt .tag{font-size:7px;letter-spacing:.37em;margin-right:-.37em}
  .brand-plate img{height:34px}
  .creed{grid-template-columns:minmax(0,1fr);gap:42px}
  .creed article{padding:0}
  
  .check,.check.two{columns:1}
  .trust-grid,.foot-grid,.form-grid{grid-template-columns:1fr}
  .inscription{grid-template-columns:1fr}
  .inscription div{border-right:0;border-bottom:1px solid rgba(194,161,90,.28)}
  .inscription div:last-child{border-bottom:0}
  .roll-list{font-size:15px;letter-spacing:.12em;line-height:1.9}
  .lg-table thead{display:none}
  .lg-table tr{display:block;border-bottom:1px solid var(--rule);padding:22px 0}
  .lg-table td{display:block;border:0;padding:4px 0}
  .lg-table td[data-l]::before{content:attr(data-l);display:block;font-family:var(--display);
    font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--ivory-35);margin-bottom:7px}
  .letter{padding-left:22px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   Daylight overrides. Everything below replaces a rule that assumed a black
   ground — mostly scrims, which have to invert rather than recolour.
   ============================================================ */

body{-webkit-font-smoothing:auto}

/* ---- header ---- */
.head{background:rgba(247,243,234,.95);border-bottom:1px solid var(--rule)}
/* the supplied mark is purple on transparent, which sits on cream unaided */
.brand-plate{background:none;border:0;padding:0}

/* ---- hero: lighten the photograph instead of darkening it ---- */
.hero{background:var(--stone)}
.hero-bg{filter:grayscale(.16) contrast(1.02) brightness(1.02);opacity:.86;
  background-position:center 34%}
.hero-veil{background:
  radial-gradient(ellipse at 50% 40%,rgba(90,48,34,.05),transparent 66%),
  linear-gradient(180deg,rgba(239,232,218,.74),rgba(239,232,218,.16) 28%,
                  rgba(239,232,218,.30) 64%,rgba(239,232,218,.90))}
.hero-copy::before{background:radial-gradient(ellipse at center,
  rgba(239,232,218,.90),rgba(239,232,218,.70) 44%,transparent 76%)}
.hero .label,.hero h1,.hero-sub{text-shadow:none}
.inscription{background:rgba(239,232,218,.60);backdrop-filter:blur(2px)}
.inscription{border-block:1px solid rgba(27,108,120,.34)}
.inscription div{border-right:1px solid rgba(27,108,120,.20)}

/* Subpage atmosphere. A single strong purple radial went lilac and flat over
   cream. Two overlapping fields instead — brand violet drifting in from the
   upper left, teal from the upper right — over a paper fall. Reads as light in
   a room rather than a tint laid on top. */
.pagehead{background:
  radial-gradient(115% 95% at 16% -12%,rgba(90,48,34,.20),transparent 60%),
  radial-gradient(95% 85% at 90% 4%,rgba(24,100,112,.15),transparent 58%),
  radial-gradient(70% 60% at 52% 108%,rgba(90,48,34,.07),transparent 62%),
  linear-gradient(180deg,var(--stone) 0%,var(--void) 84%);
  border-bottom:1px solid var(--brass-15)}
.pagehead::before{background:radial-gradient(ellipse at 50% -8%,
  rgba(90,48,34,.12),transparent 54%)}

/* ---- urgent ---- */
.urgent{background:var(--oxblood)}
.urgent .label{color:#F6DED8}
.urgent p{color:#FFF6F3}

/* ---- programmes ---- */
.creed figure img{filter:brightness(1.02) saturate(1.02)}
.creed article:hover figure img{filter:brightness(1.06) saturate(1.06)}

/* ---- full-bleed plate ---- */
.plate{background:var(--deep)}
.plate img{filter:brightness(.86) contrast(1.06) saturate(1.0)}
.plate::after{background:linear-gradient(180deg,rgba(27,15,12,.32),
  rgba(27,15,12,.02) 26%,rgba(27,15,12,.56) 60%,rgba(27,15,12,.95))}
.plate-cap p{color:#F4EFE4;text-shadow:0 2px 20px rgba(20,10,8,.75)}
.plate-cap .label{color:var(--gold);text-shadow:0 1px 14px rgba(20,10,8,.8)}


/* ---- roll of nations ---- */
.roll{background:var(--deep-2)}
.roll-bg{filter:grayscale(.7) contrast(1.05) brightness(.62);opacity:.42}
.roll-veil{background:
  radial-gradient(ellipse at 50% 44%,rgba(201,164,92,.13),rgba(27,15,12,.74) 58%,rgba(27,15,12,.95)),
  linear-gradient(180deg,rgba(27,15,12,.93),rgba(27,15,12,.34) 26%,
                  rgba(27,15,12,.34) 74%,rgba(27,15,12,.93))}
.roll .shead h2{color:#F4EFE4}
.roll .shead .label{color:var(--gold)}
.roll .diamond i{background:var(--gold)}
.roll .diamond::before{background:linear-gradient(90deg,transparent,var(--gold-25))}
.roll .diamond::after{background:linear-gradient(90deg,var(--gold-25),transparent)}
.roll-list{color:#F4EFE4}
.roll-list span{text-shadow:0 2px 18px rgba(20,10,8,.6)}
.roll-list span:hover{color:var(--gold)}
.roll-list i{color:var(--gold);opacity:.8}
.roll-more{color:rgba(244,239,228,.62)}
.roll-more b{color:var(--gold)}

/* ---- ledger ---- */
.lg-table tbody tr:hover{background:rgba(24,100,112,.06)}
.pip-done{background:var(--ivory-35)}
.pip-live{background:var(--brass);box-shadow:0 0 0 0 rgba(24,100,112,.5);
  animation:pulseL 2.6s infinite}
@keyframes pulseL{70%{box-shadow:0 0 0 10px rgba(24,100,112,0)}
  100%{box-shadow:0 0 0 0 rgba(24,100,112,0)}}

/* ---- film ---- */
.yt-play span{background:rgba(239,232,218,.62)}
.yt-play small{color:var(--ivory);text-shadow:0 1px 12px rgba(239,232,218,.95)}
.yt-play:hover span::after{border-left-color:#FDFAF3}
.feature-frame video,.film-frame video{filter:grayscale(.20) brightness(1.04)}
.feature-frame:hover video,.film:hover .film-frame video{filter:none}
.film-fallback{background:linear-gradient(180deg,rgba(239,232,218,.30),
  rgba(239,232,218,.62))}
.feature-frame .film-fallback{background:linear-gradient(180deg,
  rgba(239,232,218,.22),rgba(239,232,218,.10) 40%,rgba(239,232,218,.50))}
.film-fallback .play{border-color:var(--brass);background:rgba(239,232,218,.72)}
.film-fallback .play::after{border-left-color:var(--brass)}
.film-fallback small{color:var(--ivory-50)}

/* ---- panels and cards ---- */
.panel,.about-side{background:var(--stone-2);border-color:var(--rule)}
.card:hover{background:var(--stone-2);border-color:var(--brass-25)}
.give-panel{background:linear-gradient(180deg,rgba(24,100,112,.08),transparent 70%);
  border-color:var(--brass-25)}
.trust{background:var(--stone-2)}
.field input,.field textarea{background:#FBF8F1;border-color:var(--rule);
  color:var(--ivory)}
.field input:focus,.field textarea:focus{background:#FFFDF8;border-color:var(--brass)}
.prog,.film{background:var(--stone-2)}

/* ---- buttons ---- */
.btn{color:var(--brass);border-color:var(--brass-25)}
.btn:hover{background:var(--brass);color:#FDFAF3;border-color:var(--brass)}
.btn-fill{background:var(--brass);color:#FDFAF3;border-color:var(--brass)}
.btn-fill:hover{background:var(--brass-lt);border-color:var(--brass-lt);color:#FDFAF3}
.btn-plain{color:var(--ivory-70);border-color:var(--rule)}
.btn-plain:hover{border-color:var(--ivory);color:var(--ivory);background:transparent}
.btn-solid-dark{background:var(--brass);color:#FDFAF3;border-color:var(--brass)}
.btn-solid-dark:hover{background:var(--brass-lt);border-color:var(--brass-lt)}
.skip{background:var(--brass);color:#FDFAF3}

/* gold CTA on the deep bands, declared after .btn-fill so it wins */
.plate-cap .plate-more{background:var(--gold);border-color:var(--gold);color:#241512}
.plate-cap .plate-more:hover{background:#E0C085;border-color:#E0C085;color:#241512}

/* Footer goes deep so the page ends with weight instead of fading out. With
   the dark band mid-page this bookends it: cream, dark centre, cream, dark
   close. The reversed mark is used here since purple will not read on this. */
.foot{background:var(--deep);border-top:0}
.foot address,.foot ul a,.hours{color:rgba(244,239,228,.60)}
.foot address a:hover,.foot ul a:hover{color:var(--gold)}
.hours b{color:#F4EFE4}
.foot h4{color:var(--gold);border-bottom:1px solid rgba(244,239,228,.16)}
.foot-bar{color:rgba(244,239,228,.40);border-top:1px solid rgba(244,239,228,.16)}
.foot .btn-fill{background:var(--gold);border-color:var(--gold);color:#241512}
.foot .btn-fill:hover{background:#E0C085;border-color:#E0C085;color:#241512}
.social a{color:rgba(244,239,228,.46)}
.social a:hover,.social a:focus-visible{color:var(--gold)}
.trust{background:var(--stone-2);border-top:1px solid var(--rule)}

/* ---- mobile nav ---- */
@media (max-width:1060px){
  .nav{background:var(--void);border-bottom:1px solid var(--rule)}
  .nav a:hover{background:var(--stone-2)}
}
/* The hero faces sit at the outer thirds so the centred headline has open
   ground between them. A portrait viewport crops straight through that gap
   and shows only blur, and no background-position fixes it — both faces
   cannot survive a 0.56 ratio. Narrow screens get their own framing. */
/* Which hero crop to use depends on the SHAPE of the hero box, not the width
   of the window. A 1086px tablet in landscape is a wide box and needs the wide
   photograph; switching on width alone handed it the portrait crop, which
   cover then enlarged until only an ear was visible. Narrow phones and any
   portrait window get the tall crop; everything landscape gets the wide one. */
@media (max-width:1000px), (max-aspect-ratio:1/1){
  .hero-bg{background-image:url('img/hero-narrow.jpg?v=7');background-position:center 24%}
}

/* Cinzel dropped from 600 to 500 on the display sizes. At 600 on cream it
   read blocky; 500 keeps the inscriptional cut without the mass. */
.hero h1,.pagehead h1,.shead h2,.creed h3,.panel h3,.card h3,
.film-body h3,.plate-cap p,.sig b,.lg-dest,
.brand-txt .wm b,.brand-txt .wm i{font-weight:500}
.roll-list{font-weight:400}

/* One long heading was fitting on a single line by 5px of 1048 — any
   rendering variance broke it. It gets its own step down rather than
   shrinking every section heading to suit the longest one. */
.shead h2.wide{font-size:clamp(20px,3.05vw,36px);letter-spacing:.115em}

/* Touch screens keep the last :hover state after a tap or a scroll, so a
   decorative hover reads as a permanent highlight — one country in the roll
   turning gold, or a checklist item that looks already ticked. Neutralised
   wherever there is nothing to click. Buttons, links and cards keep theirs,
   since a moment of feedback on tap is wanted there. */
@media (hover: none){
  .roll-list span:hover{color:#F4EFE4}
  .check li:hover::before{background:transparent}
  .film:hover{border-color:var(--rule)}
  .film:hover .film-frame video{filter:grayscale(.20) brightness(1.04)}
  .feature-frame:hover{border-color:var(--rule)}
  .feature-frame:hover video{filter:grayscale(.20) brightness(1.04)}
  .card:hover{background:transparent;border-color:var(--rule)}
}

/* The donate panel is the point of the whole site, and it was reading as an
   admin box. It now carries a photograph of the thing a gift actually pays
   for, on the deep ground the rest of the site reserves for its moments,
   with the gold CTA that goes with it. */
.give-grid{align-items:stretch}
.give-grid > .panel{display:flex;flex-direction:column}
.give-grid > .panel .facts{flex:1;display:flex;flex-direction:column;
  justify-content:space-between}
.give-panel{background:var(--deep);border:0;padding:0;overflow:hidden;
  display:flex;flex-direction:column}
.give-figure{margin:0;overflow:hidden;aspect-ratio:1400/620;background:var(--deep-2)}
.give-figure img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s cubic-bezier(.2,.6,.2,1)}
.give-panel:hover .give-figure img{transform:scale(1.035)}
.give-body{padding:clamp(28px,3.4vw,44px) clamp(24px,3vw,40px) clamp(32px,3.6vw,46px);
  text-align:center;display:flex;flex-direction:column;flex:1}
.give-panel h2{color:#F4EFE4}
.give-panel > .give-body > p{color:rgba(244,239,228,.62)}
.give-line{margin:20px 0 10px;font-family:var(--display);font-weight:500;
  font-size:clamp(19px,2.3vw,27px);line-height:1.3;letter-spacing:.03em;
  color:#F4EFE4 !important}
.give-sub{margin:0 0 28px;max-width:34ch;align-self:center;
  font-size:16.5px;line-height:1.6}
.give-panel .btn-fill{background:var(--gold);border-color:var(--gold);color:#241512;
  padding:17px 34px}
.give-panel .btn-fill:hover{background:#E0C085;border-color:#E0C085;color:#241512}
.give-fine{margin:18px 0 0;font-size:14px;line-height:1.5;
  color:rgba(244,239,228,.45) !important}
@media (max-width:860px){.give-figure{aspect-ratio:16/7}}