/* ─────────── the site's own fonts ───────────
   Served from this theme, not from a third party. Nothing is requested from
   Google when a page opens, which matters on pages that take a gift or an
   accreditation. All three families are OFL; see assets/fonts/OFL.txt.
   swap: text is readable in a fallback face immediately and reflows when the
   real one arrives, rather than being invisible while it loads. */

@font-face{
  font-family:"Big Shoulders Display";
  src:url("../fonts/big-shoulders-display.woff2") format("woff2-variations"),
      url("../fonts/big-shoulders-display.woff2") format("woff2");
  font-weight:500 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Spectral";
  src:url("../fonts/spectral-300.woff2") format("woff2");
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Spectral";
  src:url("../fonts/spectral-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Spectral";
  src:url("../fonts/spectral-300-italic.woff2") format("woff2");
  font-weight:300; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("../fonts/plex-mono-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("../fonts/plex-mono-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}

/* Roarcry — shared */

  :root{
    --paper:      #d5d3d0;
    --paper-hi:   #e4e2df;
    --paper-lo:   #bcb9b5;
    --paper-deep: #a6a29e;
    --ink:        #0d0c0c;
    --ink-soft:   #35322f;
    --ink-faint:  #6d6864;
    --rule:       rgba(13,12,12,.22);
    --display: "Big Shoulders Display", "Haettenschweiler", "Arial Narrow", sans-serif;
    --body: "Spectral", Georgia, serif;
    --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
    --gut: clamp(20px, 5vw, 72px);
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }

  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--body);
    font-weight:300;
    font-size:clamp(16px,1.05vw,18px);
    line-height:1.62;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  body::after{
    content:"";
    position:fixed; inset:0; z-index:9;
    pointer-events:none;
    opacity:.4;
    mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  }

  img{ display:block; max-width:100%; }
  a{ color:inherit; }
  ::selection{ background:var(--ink); color:var(--paper-hi); }
  :focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

  .label{
    font-family:var(--mono);
    font-size:11px; font-weight:500;
    letter-spacing:.24em; text-transform:uppercase;
    color:var(--ink-faint);
  }

  .shell{
    max-width:1240px; margin:0 auto;
    padding-left:var(--gut); padding-right:var(--gut);   /* explicit: some minifiers drop padding-inline */
    padding-inline:var(--gut);
  }

  /* ─────────── top bar ─────────── */
  .bar{
    position:fixed; top:0; left:0; right:0; z-index:20;
    display:flex; align-items:center; justify-content:space-between;
    gap:16px; padding:15px var(--gut);
    background:var(--ink); color:var(--paper-hi);
    border-top:1px solid rgba(228,226,223,.16);
    transition:padding .3s ease, box-shadow .3s ease;
  }
  .bar.is-stuck{ box-shadow:0 2px 0 rgba(13,12,12,.28); padding-block:11px; }
  .bar__mark{
    font-family:var(--display); font-weight:900;
    font-size:21px; letter-spacing:.16em; text-transform:uppercase;
    text-decoration:none; line-height:1;
    color:var(--paper-hi);
  }
  .bar__mark em{
    font-style:normal;
    -webkit-text-stroke:1px var(--paper-hi);
    color:transparent;
  }
  .bar__nav{ display:flex; gap:clamp(14px,2.2vw,26px); align-items:center; }
  .bar__nav a{
    font-family:var(--mono); font-size:12px; font-weight:500;
    letter-spacing:.14em; text-transform:uppercase;
    text-decoration:none; color:rgba(228,226,223,.72);
    padding-bottom:3px; border-bottom:1px solid transparent;
    transition:color .2s ease, border-color .2s ease;
  }
  .bar__nav a:hover, .bar__nav a:focus-visible{ color:var(--paper-hi); border-bottom-color:var(--paper-hi); }
  .bar__nav a.is-cta{ color:var(--paper-hi); border-bottom-color:rgba(228,226,223,.55); }
  .bar :focus-visible{ outline-color:var(--paper-hi); }
    .bar__nav a[aria-current="page"]{ color:var(--paper-hi); border-bottom-color:var(--paper-hi); }
  @media (max-width:680px){
    .bar{ gap:12px; }
    .bar__nav{ overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
    .bar__nav::-webkit-scrollbar{ display:none; }
    .bar__nav a{ white-space:nowrap; }
  }

  /* ─────────── full-bleed hero ─────────── */
  .hero{
    position:relative;
    min-height:100vh;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;   /* not align-items:flex-end — tall content
                                   would overflow off the TOP and be clipped */
    overflow:hidden;
    isolation:isolate;
  }
  .hero__bg{
    position:absolute; inset:0; z-index:-2;
    background:var(--paper);
  }
  .hero__bg img{
    width:100%; height:100%;
    object-fit:cover;
    object-position:52% 26%;
    mix-blend-mode:multiply;
  }
  .hero__scrim{
    position:absolute; inset:0; z-index:-1;
    background:
      linear-gradient(to top, var(--paper) 0%, rgba(213,211,208,.94) 16%, rgba(213,211,208,.55) 40%, rgba(213,211,208,0) 68%),
      linear-gradient(to right, rgba(213,211,208,.92) 0%, rgba(213,211,208,.55) 34%, rgba(213,211,208,0) 62%),
      linear-gradient(to bottom, rgba(213,211,208,.85) 0%, rgba(213,211,208,0) 22%);
  }

  .hero__inner{
    width:100%;
    margin-top:auto;            /* holds it to the bottom, but lets it grow */
    padding-top:132px;
    padding-bottom:clamp(60px,9vw,120px);
  }
  .hero__eyebrow{
    display:inline-block;
    margin:0 0 clamp(16px,2.6vw,26px);
    background:var(--ink);
    color:var(--paper-hi);
    padding:8px 13px 7px;
  }
  .hero__title{
    font-family:var(--display); font-weight:800; text-transform:uppercase;
    font-size:clamp(3.1rem,9.6vw,8.6rem);
    line-height:.79; letter-spacing:-.015em;
    margin:0; max-width:14ch;
  }
  .hero__title .ln{ display:block; overflow:hidden; padding-bottom:.05em; }
  .hero__title .ln > span{
    display:inline-block;
    background:var(--ink);
    color:var(--paper-hi);
    padding:.07em .18em .15em;
    box-decoration-break:clone;
    -webkit-box-decoration-break:clone;
  }
  .hero__title em{ font-style:normal; -webkit-text-stroke:0; color:inherit; }
  .hero__body{
    max-width:44ch;
    margin:clamp(20px,3vw,32px) 0 0;
    font-size:1.06em; color:var(--ink-soft);
  }
  .hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(22px,3vw,32px); }

  .btn{
    font-family:var(--mono); font-size:11px;
    letter-spacing:.2em; text-transform:uppercase; text-decoration:none;
    padding:14px 22px; border:1px solid var(--ink);
    transition:background .22s ease, color .22s ease, transform .22s ease;
  }
  .btn--solid{ background:var(--ink); color:var(--paper-hi); }
  .btn--solid:hover{ background:transparent; color:var(--ink); }
  .btn--ghost:hover{ background:var(--ink); color:var(--paper-hi); }
  .btn:active{ transform:translateY(1px); }

  .tear{
    display:block;
    position:absolute; left:0; right:0; bottom:-1px;
    width:100%; height:clamp(30px,3.6vw,54px);
    fill:var(--paper-deep);
    z-index:2;
  }

  /* ─────────── times strip ─────────── */
  .strip{
    background:var(--paper-deep);
    border-block:1px solid rgba(13,12,12,.14);
    overflow:hidden; padding:13px 0;
  }
  .strip__track{
    display:flex; width:max-content;
    animation:slide 44s linear infinite;
  }
  .strip__track span{
    font-family:var(--mono); font-size:11px;
    letter-spacing:.26em; text-transform:uppercase;
    white-space:nowrap; padding-right:38px;
  }

  /* scripture band: reference set tight and small, the verse left in
     sentence case — long passages in all-caps are unreadable in motion */
  .strip__verse{
    display:inline-flex; align-items:baseline; gap:14px;
    white-space:nowrap;
    padding-right:clamp(56px,7vw,110px);
    text-transform:none; letter-spacing:0;
  }
  .strip__ref{
    font-family:var(--mono); font-weight:500; font-size:10px;
    letter-spacing:.2em; text-transform:uppercase;
    opacity:.62; flex:0 0 auto;
  }
  .strip__text{
    font-family:var(--body); font-style:normal; font-weight:300;
    font-size:14px; letter-spacing:.01em;
  }

  @keyframes slide{ to{ transform:translateX(-50%); } }
  .strip:hover .strip__track{ animation-play-state:paused; }

  /* ─────────── bands ─────────── */
  .band{ padding:clamp(64px,9vw,128px) 0; }

  /* Two stacked bands double their padding — up to 256px of nothing between
     them. Where one follows another directly, one gap is enough. */
  .band + .band{ padding-top:clamp(30px,4vw,58px); }
  /* unless the background changes, where the full gap reads as intended */
  .band + .band--dark,
  .band--dark + .band{ padding-top:clamp(48px,6vw,88px); }
  .band--dark{ background:var(--paper-lo); }

  .band__head{
    display:flex; align-items:baseline; justify-content:space-between;
    gap:24px; flex-wrap:wrap; margin-bottom:clamp(30px,4vw,52px);
  }
  .band__title{
    font-family:var(--display); font-weight:800; text-transform:uppercase;
    font-size:clamp(2.1rem,5vw,3.8rem);
    line-height:.9; letter-spacing:-.01em; margin:0;
  }
  .band__note{ max-width:36ch; margin:0; color:var(--ink-soft); font-size:.96em; }

  /* ─────────── verse feature ─────────── */
  .verse{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(20px,3.4vw,48px);
    align-items:center;
    padding-bottom:clamp(34px,4vw,54px);
    margin-bottom:clamp(30px,4vw,48px);
    border-bottom:1px solid var(--rule);
  }
  .verse__img{ margin:0; }
  .verse__img img{ width:100%; mix-blend-mode:multiply; }
  .verse__img figcaption{ margin-top:10px; }
  .verse blockquote{
    margin:0;
    font-family:var(--display); font-weight:700; text-transform:uppercase;
    font-size:clamp(1.7rem,3.4vw,2.9rem);
    line-height:.98; letter-spacing:-.005em;
  }
  .verse cite{ display:block; margin-top:16px; font-style:normal; }
  .verse p{ margin:20px 0 0; color:var(--ink-soft); max-width:42ch; }

  /* ─────────── common table ─────────── */
  .ledger{ width:100%; border-collapse:collapse; }
  .ledger caption{ text-align:left; padding-bottom:14px; }
  .ledger th{
    font-family:var(--mono); font-size:10.5px; font-weight:500;
    letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint);
    text-align:left; padding:0 14px 10px 0; border-bottom:1px solid var(--rule);
  }
  .ledger td{
    padding:15px 14px 15px 0;
    border-bottom:1px solid rgba(13,12,12,.12);
    vertical-align:baseline;
  }
  .ledger tbody tr{ transition:background .2s ease; }
  .ledger tbody tr:hover{ background:rgba(13,12,12,.045); }
  .ledger .c-no{ font-family:var(--mono); font-size:12px; color:var(--ink-faint); width:1%; white-space:nowrap; }
  .ledger .c-title{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:1.35rem; }
  .ledger .c-num{ font-family:var(--mono); font-size:12.5px; white-space:nowrap; }
  .ledger .c-state{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; }
  .ledger .c-state span{ border-bottom:1px solid var(--ink); padding-bottom:2px; }
  .ledger .is-open span{ background:var(--ink); color:var(--paper-hi); padding:3px 7px; border:0; }
  @media (max-width:760px){ .ledger .hide-sm{ display:none; } }

  /* ─────────── steps ─────────── */
  /* Four steps, so the columns go 4 → 2 → 1. auto-fit would settle on three at
     mid widths and strand the fourth beside an empty cell. */
  .steps{
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
    gap:1px; background:var(--rule); border:1px solid var(--rule);
  }
  @media (max-width:1080px){ .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
  @media (max-width:560px){  .steps{ grid-template-columns:1fr; } }

  .step{ background:var(--paper-lo); padding:clamp(18px,2.6vw,32px); }
  .step__no{
    font-family:var(--display); font-weight:900;
    font-size:clamp(1.9rem,3.4vw,2.6rem); line-height:1; margin:0 0 14px;
    -webkit-text-stroke:1.2px var(--ink); color:transparent;
  }
  .step h3{
    font-family:var(--display); font-weight:800; text-transform:uppercase;
    font-size:clamp(1.15rem,1.9vw,1.4rem); line-height:1.02; margin:0 0 10px;
    overflow-wrap:break-word;
  }
  .step p{ margin:0; font-size:clamp(.9rem,1.1vw,.98rem); color:var(--ink-soft); }
  .step__meta{ display:block; margin-top:12px; }

  /* ─────────── confession cards ─────────── */
  .creed{
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
    gap:clamp(18px,2.4vw,30px);
  }
  @media (max-width:1080px){ .creed{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
  @media (max-width:560px){  .creed{ grid-template-columns:1fr; } }
  .creed__card{
    border:1px solid var(--ink);
    padding:clamp(22px,2.6vw,32px);
    display:flex; flex-direction:column; gap:10px;
  }
  /* the centre article keeps a heavier rule rather than a permanent fill,
     so black now means "you are pointing at this" */
  .creed__card--fill{ border-width:2px; }

  .creed__card{
    background:transparent;
    transition:background .18s ease, color .18s ease;
    cursor:default;
  }
  .creed__card:hover,
  .creed__card:focus-within,
  .creed__card.is-open{
    background:var(--ink); color:var(--paper-hi);
  }
  .creed__card:hover .label,
  .creed__card:focus-within .label,
  .creed__card.is-open .label{ color:rgba(228,226,223,.62); }
  .creed__card:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

  /* citations stay out of the way until asked for — but only where hovering
     is possible. On a touch screen they are simply always there. */
  @media (hover: hover) and (pointer: fine){
    .creed__card ul{
      opacity:0; max-height:0; overflow:hidden; margin-top:0;
      transition:opacity .18s ease, max-height .22s ease, margin-top .22s ease;
    }
    .creed__card:hover ul,
    .creed__card:focus-within ul,
    .creed__card.is-open ul{
      opacity:1; max-height:12em; margin-top:6px;
    }
  }
  .creed__card h3{
    font-family:var(--display); font-weight:800; text-transform:uppercase;
    font-size:1.55rem; line-height:1; margin:6px 0 0;
  }
  /* the body grows to fill the card so every citation list starts at the same
     height — otherwise the rules sit wherever the prose happens to end */
  .creed__card p{ margin:0; font-size:.94em; opacity:.88; flex:1 1 auto; }
  .creed__card ul{ margin-top:auto; }
  .creed__card ul{ margin:6px 0 0; padding:0; list-style:none; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
  .creed__card li{ padding:7px 0; border-top:1px solid currentColor; opacity:.7; }

  .terms{
    margin-top:clamp(26px,3vw,38px);
    display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    gap:20px 30px;
  }
  .terms p{ margin:6px 0 0; font-size:.92em; color:var(--ink-soft); }

  /* ─────────── visit ─────────── */
  .visit{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
    gap:clamp(24px,4vw,56px); align-items:start;
  }
  .visit__title{
    font-family:var(--display); font-weight:800; text-transform:uppercase;
    font-size:clamp(2.6rem,7vw,5.4rem); line-height:.82; letter-spacing:-.015em;
    margin:12px 0 0;
  }
  .visit__lines{ margin-top:clamp(20px,2.6vw,30px); }
  .visit__line{
    display:flex; justify-content:space-between; gap:18px;
    padding:14px 0; border-top:1px solid var(--rule); font-size:.96em;
  }
  .visit__line:last-child{ border-bottom:1px solid var(--rule); }
  .visit__line a{ text-decoration:none; border-bottom:1px solid var(--ink); }

  .foot{
    border-top:1px solid var(--rule);
    padding:26px var(--gut) 34px;
    display:flex; justify-content:space-between; gap:16px 32px; flex-wrap:wrap;
  }

  /* ─────────── motion ─────────── */
  .rise{ opacity:0; transform:translateY(22px); }
  .rise.in{ opacity:1; transform:none; transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1); }
  .rise.d1{ transition-delay:.09s; }

  .hero__title .ln > span{ transform:translateY(102%); animation:drop .95s cubic-bezier(.16,.9,.28,1) forwards; }
  .hero__title .ln:nth-child(2) > span{ animation-delay:.1s; }
  .hero__title .ln:nth-child(3) > span{ animation-delay:.2s; }
  @keyframes drop{ to{ transform:translateY(0); } }

  .hero__bg{ animation:tearIn 1.6s cubic-bezier(.2,.7,.3,1) forwards; }
  @keyframes tearIn{ from{ opacity:0; transform:scale(1.05); } to{ opacity:1; transform:none; } }

  .hero__eyebrow,.hero__body,.hero__actions{ opacity:0; animation:fadeUp .9s .5s ease forwards; }
  .hero__body{ animation-delay:.62s; } .hero__actions{ animation-delay:.72s; }
  @keyframes fadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

  @media (prefers-reduced-motion:reduce){
    html{ scroll-behavior:auto; }
    *,*::before,*::after{ animation:none !important; transition:none !important; }
    .rise{ opacity:1; transform:none; }
    .hero__title .ln > span,.hero__bg,.hero__eyebrow,.hero__body,.hero__actions{ opacity:1; transform:none; }
  }

  @media (max-width:900px){
    .hero__bg img{ object-position:54% 22%; }
    .hero__scrim{
      background:
        linear-gradient(to top, var(--paper) 0%, rgba(213,211,208,.95) 26%, rgba(213,211,208,.5) 52%, rgba(213,211,208,0) 76%),
        linear-gradient(to bottom, rgba(213,211,208,.8) 0%, rgba(213,211,208,0) 20%);
    }
    .verse{ grid-template-columns:1fr; }
    .visit{ grid-template-columns:1fr; }
  }


/* --- common --- */
.hero--inner{ min-height:72vh; min-height:72svh; }
  .hero--inner .hero__inner{ padding-top:150px; padding-bottom:clamp(44px,6vw,76px); }
  .hero--inner .hero__title{ font-size:clamp(2.8rem,7.8vw,6.6rem); max-width:12ch; }

  /* ─────────── holdings ─────────── */
  .holdings{ display:grid; gap:clamp(18px,2.4vw,28px); }
  .holding{ border:1px solid var(--ink); background:var(--paper-hi); }
  .holding__bar{
    display:flex; align-items:center; gap:clamp(10px,2vw,20px);
    background:var(--ink); color:var(--paper-hi);
    padding:11px clamp(16px,2vw,24px);
    font-family:var(--mono); font-size:10.5px;
    letter-spacing:.18em; text-transform:uppercase;
  }
  .holding__no{ font-weight:500; }
  .holding__stamp{
    margin-left:auto;
    border:1px solid rgba(228,226,223,.6);
    padding:4px 9px; white-space:nowrap;
  }
  .holding__stamp.is-open{ background:var(--paper-hi); color:var(--ink); border-color:var(--paper-hi); }
  .holding__body{
    display:grid;
    grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
    gap:clamp(16px,3vw,44px);
    padding:clamp(20px,2.8vw,34px) clamp(16px,2vw,24px);
  }
  .holding h3{
    font-family:var(--display); font-weight:800; text-transform:uppercase;
    font-size:clamp(1.7rem,3.2vw,2.4rem); line-height:.94; margin:0 0 14px;
  }
  .holding p{ margin:0 0 12px; color:var(--ink-soft); }
  .holding p:last-child{ margin-bottom:0; }
  .facts{ margin:0; }
  .facts div{
    display:flex; justify-content:space-between; gap:14px;
    padding:10px 0; border-top:1px solid rgba(13,12,12,.16);
    font-size:.9em;
  }
  .facts div:last-child{ border-bottom:1px solid rgba(13,12,12,.16); }
  .facts dt{ margin:0; }
  .facts dd{ margin:0; text-align:right; }
  @media (max-width:760px){ .holding__body{ grid-template-columns:1fr; } }

  /* ─────────── rules of use ─────────── */
  .rules{ counter-reset:rule; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
  .rule{ background:var(--paper-lo); padding:clamp(20px,2.4vw,30px); }
  .rule h3{
    font-family:var(--display); font-weight:800; text-transform:uppercase;
    font-size:1.3rem; line-height:1; margin:10px 0 10px;
  }
  .rule p{ margin:0; font-size:.93em; color:var(--ink-soft); }

  .plain{ columns:2; column-gap:clamp(28px,4vw,64px); }
  .plain p{ margin:0 0 16px; break-inside:avoid; color:var(--ink-soft); font-size:.95em; }
  .plain p strong{ font-weight:400; color:var(--ink); }
  @media (max-width:760px){ .plain{ columns:1; } }

  .fineprint{ background:var(--ink); color:var(--paper-hi); }
  .fineprint .band__title{ color:var(--paper-hi); }
  .fineprint .band__note{ color:rgba(228,226,223,.72); }
  .fineprint .label{ color:rgba(228,226,223,.55); }
  .fineprint .plain p{ color:rgba(228,226,223,.82); }
  .fineprint .plain p strong{ color:var(--paper-hi); }

/* --- believe --- */
.hero--inner{ min-height:70vh; min-height:70svh; }
  .hero--inner .hero__inner{ padding-top:150px; padding-bottom:clamp(44px,6vw,76px); }
  .hero--inner .hero__title{ font-size:clamp(2.8rem,7.6vw,6.4rem); max-width:12ch; }

  /* ─────────── the creed ─────────── */
  .creedblock{ max-width:900px; }
  .creedblock__text{
    font-family:var(--display); font-weight:700; text-transform:uppercase;
    font-size:clamp(1.5rem,3.1vw,2.6rem); line-height:1.04; letter-spacing:-.004em;
    margin:0;
  }
  .creedblock__text span{ color:var(--ink-faint); }
  .creedblock__foot{ margin-top:22px; }

  /* ─────────── articles ─────────── */
  .article{
    display:grid;
    grid-template-columns:clamp(56px,7vw,110px) minmax(0,1fr) minmax(0,.55fr);
    gap:clamp(14px,2.6vw,40px);
    padding:clamp(22px,3vw,34px) 0;
    border-top:1px solid var(--rule);
    align-items:start;
  }
  .articles > .article:last-child{ border-bottom:1px solid var(--rule); }
  .article__no{
    font-family:var(--display); font-weight:900;
    font-size:clamp(2.2rem,4.4vw,3.6rem); line-height:.8;
    -webkit-text-stroke:1.2px var(--ink); color:transparent;
    margin:0;
  }
  .article h3{
    font-family:var(--display); font-weight:800; text-transform:uppercase;
    font-size:clamp(1.45rem,2.6vw,2rem); line-height:.95; margin:0 0 12px;
  }
  .article p{ margin:0 0 10px; color:var(--ink-soft); }
  .article p:last-child{ margin-bottom:0; }
  .refs{ margin:0; padding:0; list-style:none; }
  .refs li{
    font-family:var(--mono); font-size:10.5px;
    letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
    padding:6px 0; border-top:1px solid rgba(13,12,12,.14);
  }
  .refs li:first-child{ border-top:0; padding-top:0; }
  @media (max-width:820px){
    .article{ grid-template-columns:clamp(44px,12vw,64px) minmax(0,1fr); }
    .article .refs{ grid-column:2; margin-top:12px; }
  }

  /* ─────────── triage ─────────── */
  .triage{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:clamp(18px,2.4vw,30px);
  }
  .triage__card{ border:1px solid var(--ink); padding:clamp(22px,2.6vw,32px); display:flex; flex-direction:column; gap:12px; }
  .triage__card--fill{ background:var(--ink); color:var(--paper-hi); }
  .triage__card--fill .label{ color:rgba(228,226,223,.6); }
  .triage__card h3{
    font-family:var(--display); font-weight:800; text-transform:uppercase;
    font-size:1.55rem; line-height:1; margin:4px 0 0;
  }
  .triage__card p{ margin:0; font-size:.94em; opacity:.88; }
  .triage__card ul{ margin:4px 0 0; padding:0; list-style:none; font-size:.92em; }
  .triage__card li{ padding:8px 0; border-top:1px solid currentColor; opacity:.75; }

  /* ─────────── liberty / errors ─────────── */
  .plain{ columns:2; column-gap:clamp(28px,4vw,64px); }
  .plain p{ margin:0 0 16px; break-inside:avoid; color:var(--ink-soft); font-size:.95em; }
  .plain p strong{ font-weight:400; color:var(--ink); }
  @media (max-width:760px){ .plain{ columns:1; } }

/* --- give --- */
/* ─────────── shorter hero for interior pages ─────────── */
  .hero--inner{ min-height:66vh; min-height:66svh; }
  .hero--inner .hero__inner{ padding-top:140px; padding-bottom:clamp(48px,6vw,80px); }
  .hero--inner .hero__bg img{ object-position:52% 22%; }
  .hero--inner .hero__title{ font-size:clamp(2.9rem,8vw,7rem); max-width:11ch; }

  /* ─────────── the giving form ─────────── */
  .give{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,.78fr);
    gap:clamp(24px,4vw,64px);
    align-items:start;
  }
  .give__panel{
    border:1px solid var(--ink);
    padding:clamp(22px,3vw,38px);
    background:var(--paper-hi);
  }
  .field{ margin-bottom:clamp(22px,2.6vw,30px); }
  .field:last-of-type{ margin-bottom:0; }
  .field > .label{ display:block; margin-bottom:12px; }

  .chips{ display:flex; flex-wrap:wrap; gap:8px; }
  .chip{
    font-family:var(--mono); font-size:11px;
    letter-spacing:.16em; text-transform:uppercase;
    background:transparent; color:var(--ink);
    border:1px solid var(--rule);
    padding:11px 16px; cursor:pointer;
    transition:background .18s ease, color .18s ease, border-color .18s ease;
  }
  .chip:hover{ border-color:var(--ink); }
  .chip[aria-pressed="true"]{ background:var(--ink); color:var(--paper-hi); border-color:var(--ink); }
  .chip--wide{ flex:1 1 130px; text-align:center; }

  .amount{ display:flex; align-items:center; gap:10px; margin-top:12px; }
  .amount input{
    font-family:var(--display); font-weight:800;
    font-size:2.2rem; line-height:1;
    width:100%; max-width:220px;
    background:transparent; color:var(--ink);
    border:0; border-bottom:1px solid var(--ink);
    padding:4px 0 6px;
  }
  .amount input::placeholder{ color:var(--ink-faint); }
  .amount input:focus{ outline:0; border-bottom-width:2px; }
  .amount span{ font-family:var(--display); font-weight:800; font-size:2.2rem; line-height:1; }

  .summary{
    margin-top:clamp(24px,3vw,34px);
    padding-top:20px;
    border-top:1px solid var(--rule);
  }
  .summary__line{
    font-family:var(--display); font-weight:800; text-transform:uppercase;
    font-size:clamp(1.5rem,3vw,2.3rem); line-height:1.02;
    margin:8px 0 0;
  }
  .summary__note{ margin:14px 0 0; font-size:.9em; color:var(--ink-faint); }

  .aside__block{ padding:18px 0; border-top:1px solid var(--rule); }
  .aside__block:last-child{ border-bottom:1px solid var(--rule); }
  .aside__block h3{
    font-family:var(--display); font-weight:800; text-transform:uppercase;
    font-size:1.25rem; line-height:1; margin:8px 0 8px;
  }
  .aside__block p{ margin:0; font-size:.93em; color:var(--ink-soft); }

  /* ─────────── allocation bars ─────────── */
  .bars{ margin:0; }
  .bar-row{
    display:grid;
    grid-template-columns:minmax(140px,1.1fr) minmax(0,3fr) auto;
    gap:clamp(12px,2vw,26px);
    align-items:center;
    padding:16px 0;
    border-bottom:1px solid rgba(13,12,12,.12);
  }
  .bar-row:first-child{ border-top:1px solid var(--rule); }
  .bar-row dt{
    font-family:var(--display); font-weight:700; text-transform:uppercase;
    font-size:1.2rem; line-height:1;
  }
  .bar-row dd{ margin:0; }
  .bar-track{ height:10px; background:rgba(13,12,12,.12); }
  .bar-fill{
    height:100%; background:var(--ink);
    width:0; transition:width 1.1s cubic-bezier(.2,.7,.3,1);
  }
  .in .bar-fill{ width:var(--w); }
  .bar-pct{ font-family:var(--mono); font-size:12.5px; white-space:nowrap; }
  .bar-note{
    font-size:.9em; color:var(--ink-faint);
    grid-column:1 / -1; margin:6px 0 0;
  }
  @media (max-width:700px){
    .bar-row{ grid-template-columns:1fr auto; }
    .bar-row dd:first-of-type{ grid-column:1 / -1; }
  }

  /* ─────────── other ways ─────────── */
  .ways{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:1px; background:var(--rule); border:1px solid var(--rule);
  }
  .way{ background:var(--paper-lo); padding:clamp(22px,2.6vw,32px); }
  .way h3{
    font-family:var(--display); font-weight:800; text-transform:uppercase;
    font-size:1.4rem; line-height:1; margin:10px 0 10px;
  }
  .way p{ margin:0; font-size:.94em; color:var(--ink-soft); }

  @media (max-width:900px){
    .give{ grid-template-columns:1fr; }
  }

/* --- invest --- */
/* ─────────── standing legend ─────────── */
  .legend{
    position:fixed; top:0; left:0; right:0; z-index:30;
    background:var(--ink); color:var(--paper-hi);
    padding:8px var(--gut);
    font-family:var(--mono); font-size:10.5px;
    letter-spacing:.16em; text-transform:uppercase;
    text-align:center;
  }

  .hero--inner{ min-height:74vh; min-height:74svh; }
  .hero--inner .hero__inner{ padding-top:170px; padding-bottom:clamp(48px,6vw,80px); }
  .hero--inner .hero__bg img{ object-position:52% 22%; }
  .hero--inner .hero__title{ font-size:clamp(2.7rem,7.4vw,6.4rem); max-width:13ch; }

  /* ─────────── gate ─────────── */
  .gate{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
    gap:clamp(24px,4vw,60px); align-items:start;
  }
  .gate__panel{ border:1px solid var(--ink); padding:clamp(22px,3vw,38px); background:var(--paper-hi); }
  .check{
    display:flex; gap:14px; align-items:flex-start;
    padding:15px 0; border-bottom:1px solid rgba(13,12,12,.14);
    cursor:pointer; font-size:.95em;
  }
  .check:first-of-type{ border-top:1px solid var(--rule); }
  .check input{
    appearance:none; -webkit-appearance:none;
    width:17px; height:17px; flex:0 0 17px; margin:5px 0 0;
    border:1px solid var(--ink); background:transparent; cursor:pointer;
  }
  .check input:checked{ background:var(--ink); box-shadow:inset 0 0 0 3px var(--paper-hi); }
  .check span b{ font-weight:400; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; display:block; color:var(--ink-faint); margin-bottom:3px; }

  .verdict{ margin-top:26px; padding-top:20px; border-top:1px solid var(--rule); }
  .verdict__line{
    font-family:var(--display); font-weight:800; text-transform:uppercase;
    font-size:clamp(1.4rem,2.8vw,2.1rem); line-height:1.02; margin:8px 0 0;
  }
  .verdict__note{ margin:14px 0 0; font-size:.9em; color:var(--ink-faint); max-width:52ch; }

  /* ─────────── terms sheet ─────────── */
  .terms-sheet{ width:100%; border-collapse:collapse; }
  .terms-sheet caption{ text-align:left; padding-bottom:14px; }
  .terms-sheet th{
    font-family:var(--mono); font-size:10.5px; font-weight:500;
    letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint);
    text-align:left; width:32%; padding:16px 20px 16px 0;
    border-bottom:1px solid rgba(13,12,12,.12); vertical-align:baseline;
  }
  .terms-sheet td{
    padding:16px 0; border-bottom:1px solid rgba(13,12,12,.12); vertical-align:baseline;
  }
  .terms-sheet tr:first-child th, .terms-sheet tr:first-child td{ border-top:1px solid var(--rule); }
  .terms-sheet .fig{ font-family:var(--display); font-weight:800; font-size:1.6rem; line-height:1; display:block; margin-bottom:4px; }

  /* ─────────── bars ─────────── */
  .bars{ margin:0; }
  .bar-row{
    display:grid; grid-template-columns:minmax(150px,1.1fr) minmax(0,3fr) auto;
    gap:clamp(12px,2vw,26px); align-items:center;
    padding:16px 0; border-bottom:1px solid rgba(13,12,12,.12);
  }
  .bar-row:first-child{ border-top:1px solid var(--rule); }
  .bar-row dt{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:1.2rem; line-height:1; }
  .bar-row dd{ margin:0; }
  .bar-track{ height:10px; background:rgba(13,12,12,.12); }
  .bar-fill{ height:100%; background:var(--ink); width:0; transition:width 1.1s cubic-bezier(.2,.7,.3,1); }
  .in .bar-fill{ width:var(--w); }
  .bar-pct{ font-family:var(--mono); font-size:12.5px; white-space:nowrap; }
  .bar-note{ font-size:.9em; color:var(--ink-faint); grid-column:1 / -1; margin:6px 0 0; }
  @media (max-width:700px){
    .bar-row{ grid-template-columns:1fr auto; }
    .bar-row dd:first-of-type{ grid-column:1 / -1; }
  }

  /* ─────────── risks ─────────── */
  .risks{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule); }
  .risk{ background:var(--paper-lo); padding:clamp(20px,2.4vw,30px); }
  .risk h3{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:1.25rem; line-height:1; margin:10px 0 10px; }
  .risk p{ margin:0; font-size:.93em; color:var(--ink-soft); }

  /* ─────────── ink block ─────────── */
  .fineprint{ background:var(--ink); color:var(--paper-hi); }
  .fineprint .band__title{ color:var(--paper-hi); }
  .fineprint .label{ color:rgba(228,226,223,.55); }
  .fineprint .band__note{ color:rgba(228,226,223,.72); }
  .fineprint__cols{ columns:2; column-gap:clamp(28px,4vw,64px); }
  .fineprint__cols p{ margin:0 0 16px; font-size:.88em; line-height:1.66; color:rgba(228,226,223,.82); break-inside:avoid; }
  .fineprint__cols p strong{ font-weight:400; color:var(--paper-hi); }
  @media (max-width:820px){ .fineprint__cols{ columns:1; } }
  .fineprint .btn{ border-color:var(--paper-hi); color:var(--paper-hi); }
  .fineprint .btn:hover{ background:var(--paper-hi); color:var(--ink); }

  /* ─────────── separation notice ─────────── */
  .split{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:1px; background:var(--rule); border:1px solid var(--rule);
  }
  .split > div{ background:var(--paper); padding:clamp(22px,2.6vw,32px); }
  .split h3{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:1.5rem; line-height:1; margin:10px 0 10px; }
  .split p{ margin:0 0 10px; font-size:.94em; color:var(--ink-soft); }
  .split p:last-child{ margin-bottom:0; }

  @media (max-width:900px){ .gate{ grid-template-columns:1fr; } }

/* --- where --- */
/* The compliance line sits at the foot of the page now rather than pinned
     above the header. Still on every fund page, still unmissable, but it no
     longer competes with the navigation for the top of the screen. */
  .legend-bar{
    position:static;
    background:var(--ink); color:var(--paper-hi);
    padding:14px var(--gut);
    font-family:var(--mono); font-size:10.5px;
    letter-spacing:.16em; text-transform:uppercase; text-align:center;
  }

  .hero--band{ min-height:56vh; min-height:56svh; }
  .hero--band .hero__inner{ padding-top:150px; padding-bottom:clamp(40px,5vw,64px); }
  .hero--band .hero__bg img{ object-position:50% 50%; }
  .hero--band .hero__title{ font-size:clamp(2.6rem,7.2vw,5.8rem); max-width:12ch; }

  /* ─────────── atlas ─────────── */
  .atlas{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(300px,.46fr);
    gap:clamp(20px,3vw,44px);
    align-items:start;
  }

  .atlas__tools{
    display:flex; flex-wrap:wrap; gap:10px; align-items:center;
    margin-bottom:16px;
  }
  .find{
    flex:1 1 220px;
    display:flex; align-items:center; gap:10px;
    border:1px solid var(--ink); background:var(--paper-hi);
    padding:9px 14px;
  }
  .find input{
    flex:1; border:0; background:transparent; color:var(--ink);
    font-family:var(--mono); font-size:12px; letter-spacing:.08em;
    text-transform:uppercase; padding:2px 0;
  }
  .find input:focus{ outline:0; }
  .find input::placeholder{ color:var(--ink-faint); letter-spacing:.16em; }
  .zoombtn{
    font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
    background:transparent; color:var(--ink); border:1px solid var(--rule);
    padding:10px 13px; cursor:pointer;
  }
  .zoombtn:hover{ border-color:var(--ink); }

  .mapwrap{
    border:1px solid var(--rule);
    background:var(--paper-hi);
    touch-action:none;
    overflow:hidden;
  }
  .mapwrap svg{ display:block; width:100%; height:auto; cursor:grab; }
  .mapwrap.is-drag svg{ cursor:grabbing; }

  .cty{
    stroke:var(--paper-hi); stroke-width:.5;
    vector-effect:non-scaling-stroke;
    cursor:pointer;
    transition:fill .15s ease, opacity .2s ease;
  }
  .cty{ fill:#8e8a86; }        /* opaque: shared borders would otherwise stack */
  .cty:hover, .cty:focus{ fill:#2a2725; outline:none; }
  .cty.is-sel{ fill:#0d0c0c; stroke:var(--paper-hi); stroke-width:2; }
  .cty.dot{ stroke-width:.8; }
  .cty.is-dim{ opacity:.16; }
  .cty.is-hit{ fill:#0d0c0c; }

  /* Surrounding countries: scenery, not buttons. A lighter grey than the
     subject's own regions, no pointer events, and skipped by the keyboard. */
  /* Opaque, not translucent: neighbouring countries overlap along every shared
     border, and stacked alpha turns a continent into one flat mass with no
     visible frontiers. A solid fill cannot accumulate. */
  .ctx{
    fill:#c4c1bd;
    stroke:rgba(13,12,12,.38); stroke-width:.5; stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
    pointer-events:none;
  }
  .band--dark .ctx{ fill:#bcb9b5; }

  /* the national border, drawn over everything and never interactive */
  /* Rivers and lakes. Water is the one thing on this map allowed a colour. */
  .river{
    fill:none; stroke:#7d97a8; stroke-width:.55;
    stroke-linecap:round; stroke-linejoin:round;
    vector-effect:non-scaling-stroke; pointer-events:none; opacity:.75;
  }
  .lake{
    fill:#aebfca; stroke:#7d97a8; stroke-width:.3;
    vector-effect:non-scaling-stroke; pointer-events:none;
  }

  /* The national border, drawn as a stroke beneath the regions. Whatever the
     regions cover is hidden again by their own fills, so only their outer edge
     survives — the border and the states agree exactly. */
  .cast{
    fill:rgba(13,12,12,.82);
    stroke:rgba(13,12,12,.82); stroke-width:2.1;
    stroke-linejoin:round; stroke-linecap:round;
    vector-effect:non-scaling-stroke;
    pointer-events:none;
  }

  /* A compass. North is up everywhere on this projection, so this states the
     orientation rather than pretending to be a navigation instrument. */
  .compass circle{
    /* an opaque plate: on a landlocked country every corner of the frame is
       land, so the compass has to read over it */
    fill:#e7e5e2;
    stroke:rgba(13,12,12,.34); stroke-width:.8;
    vector-effect:non-scaling-stroke;
  }
  .compass__needle{ fill:rgba(13,12,12,.62); }
  .compass__n, .compass__t{
    font-family:var(--mono); font-weight:500;
    letter-spacing:.06em;
    text-anchor:middle; dominant-baseline:middle;
    fill:rgba(13,12,12,.62);
  }
  .compass__t{ fill:rgba(13,12,12,.38); }
  .compass{ pointer-events:none; user-select:none; }

  .border{
    fill:none;
    stroke:rgba(13,12,12,.82); stroke-width:1.05;
    stroke-linejoin:miter; stroke-miterlimit:2; stroke-linecap:butt;
    vector-effect:non-scaling-stroke;
    pointer-events:none;
  }

  /* Neighbour names: quiet, and not interactive. */
  .ctxlbl{
    fill:rgba(13,12,12,.42);
    font-family:var(--mono); letter-spacing:.14em; text-transform:uppercase;
    text-anchor:middle; dominant-baseline:middle;
    paint-order:stroke; stroke:var(--paper); stroke-width:.06;
    pointer-events:none; user-select:none;
  }
  .band--dark .ctxlbl{ stroke:var(--paper-lo); }

  /* Water: a flat tint behind the land, and names in the italic a printed
     atlas uses for anything wet. Not interactive. */
  .sea{ fill:rgba(94,116,132,.13); }
  .band--dark .sea{ fill:rgba(94,116,132,.11); }
  .water{
    fill:rgba(60,82,99,.62);
    font-family:var(--body); font-style:italic; font-weight:300;
    letter-spacing:.06em;
    text-anchor:middle; dominant-baseline:middle;
    pointer-events:none; user-select:none;
  }
  /* One type for all water. Oceans are simply larger and paler than seas —
     the older treatment set them in spaced capitals, which read as a different
     kind of thing entirely. */
  .water--1{ opacity:.58; letter-spacing:.10em; }
  .water--3{ opacity:.80; }



  /* A clear hierarchy: the subject country is the darkest thing on the map,
     its internal borders are hairlines, its national border is heavy, and the
     neighbours are pale enough that the edge between them is unmistakable. */
  .rgn{
    fill:#8e8a86;                      /* opaque, for the same reason as .ctx */
    stroke:var(--paper-hi); stroke-width:.5; stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
    cursor:pointer;
    transition:fill .15s ease;
  }
  .rgn:hover, .rgn:focus{ fill:#4a4744; outline:none; }
  .rgn.is-sel{ fill:#0d0c0c; stroke-width:1.6; }
  #lands.is-back .cty{ opacity:.30; pointer-events:none; }
  #lands.is-back .cty.is-open{ opacity:1; }

  .lbl{
    font-family:var(--mono); font-weight:500;
    fill:var(--ink); paint-order:stroke fill;
    stroke:var(--paper-hi); stroke-linejoin:round;
    text-anchor:middle; dominant-baseline:middle;
    pointer-events:none; letter-spacing:.06em;
    text-transform:uppercase;
  }
  .lbl--rgn{ fill:var(--ink); }
  .lbl{ opacity:0; transition:opacity .12s ease; }
  .lbl.is-on{ opacity:1; }

  .cmapkey{
    display:flex; flex-wrap:wrap; gap:16px; align-items:center;
    margin-top:12px;
  }
  .cmapkey span{
    display:flex; align-items:center; gap:8px;
    font-family:var(--mono); font-size:10.5px;
    letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
  }
  .cmapkey i{ display:block; width:18px; height:0; border-top:1px solid var(--ink); }
  .cmapkey i.k-rgn{ border-top:1px solid rgba(13,12,12,.35); }
  .cmapkey i.k-sel{ width:13px; height:13px; border:0; background:var(--ink); }

  .azbar{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:clamp(18px,2.4vw,26px); }
  .azbar button{
    font-family:var(--mono); font-size:11px; letter-spacing:.1em;
    background:transparent; color:var(--ink); border:1px solid var(--rule);
    padding:7px 10px; cursor:pointer; min-width:32px;
  }
  .azbar button:hover{ border-color:var(--ink); }
  .azbar button[aria-pressed="true"]{ background:var(--ink); color:var(--paper-hi); border-color:var(--ink); }
  .azbar button:disabled{ opacity:.3; cursor:default; }

  .azlist{ columns:4; column-gap:clamp(18px,2.4vw,34px); }
  .azlist a{
    display:flex; align-items:center; gap:9px; width:100%;
    text-align:left; background:transparent; border:0;
    border-bottom:1px solid rgba(13,12,12,.10);
    padding:7px 4px; cursor:pointer; break-inside:avoid;
    font-family:var(--body); font-weight:300; font-size:.93em; color:var(--ink);
  }
  .azlist a:hover{ background:rgba(13,12,12,.07); }
  @media (max-width:900px){ .azlist{ columns:2; } }
  @media (max-width:520px){ .azlist{ columns:1; } }

  .profile{ margin-top:clamp(26px,3vw,40px); }
  .profile__bg{
    font-size:1.04em; line-height:1.7; color:var(--ink-soft);
    max-width:74ch; margin:0 0 clamp(20px,2.6vw,30px);
  }
  .profile__bg::first-letter{
    font-family:var(--display); font-weight:900;
    font-size:3.1em; line-height:.78; float:left;
    margin:.06em .12em 0 0; color:var(--ink);
  }
  .facts{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:1px; background:var(--rule); border:1px solid var(--rule);
  }
  .facts div{ background:var(--paper-lo); padding:16px 18px; }
  .facts dt{
    font-family:var(--mono); font-size:10px; font-weight:500;
    letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint);
    margin:0 0 7px;
  }
  .facts dd{ margin:0; font-size:.94em; }
  .source{ margin-top:16px; }

  /* country detail */
  .cbody{
    display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.9fr);
    gap:clamp(20px,3vw,44px); align-items:start;
  }
  @media (max-width:900px){ .cbody{ grid-template-columns:1fr; } }

  .status{ border:1px solid var(--ink); background:var(--paper-hi); padding:clamp(20px,2.6vw,30px); }
  .status__badge{
    display:inline-block; background:var(--ink); color:var(--paper-hi);
    font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
    text-transform:uppercase; padding:7px 11px;
  }
  .status h3{
    font-family:var(--display); font-weight:800; text-transform:uppercase;
    font-size:1.7rem; line-height:1; margin:16px 0 0;
  }
  .status__rows{ margin:16px 0 0; }
  .status__row{
    display:flex; justify-content:space-between; gap:14px;
    padding:12px 0; border-top:1px solid var(--rule); font-size:.93em;
  }
  .status__row:last-of-type{ border-bottom:1px solid var(--rule); }
  .status p{ margin:16px 0 0; font-size:.92em; color:var(--ink-soft); }

  .video{ border:1px solid var(--ink); background:var(--paper-hi); }
  .video__frame{ position:relative; aspect-ratio:16/9; width:100%; background:var(--ink); overflow:hidden; }
  .video__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
  .video__facade{
    position:absolute; inset:0; width:100%; border:0; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
    background:var(--ink); color:var(--paper-hi);
  }
  .video__facade:hover .video__play{ background:var(--paper-hi); color:var(--ink); }
  .video__play{
    width:62px; height:62px; border:1px solid var(--paper-hi); border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:19px;
    transition:background .2s ease, color .2s ease;
  }
  .video__facade span{
    font-family:var(--mono); font-size:11px; letter-spacing:.2em;
    text-transform:uppercase; color:rgba(228,226,223,.7);
  }
  .video__empty{
    position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:16px; padding:24px; text-align:center;
    background:var(--ink); color:var(--paper-hi);
  }
  .video__empty p{ margin:0; max-width:44ch; font-size:.9em; color:rgba(228,226,223,.72); }
  .paste{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; width:100%; }
  .paste input{
    flex:1 1 240px; max-width:360px; background:transparent; color:var(--paper-hi);
    border:0; border-bottom:1px solid rgba(228,226,223,.5); padding:9px 2px;
    font-family:var(--mono); font-size:12px;
  }
  .paste input::placeholder{ color:rgba(228,226,223,.45); }
  .paste input:focus{ outline:0; border-bottom-color:var(--paper-hi); }
  .paste button{
    font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
    background:transparent; color:var(--paper-hi); border:1px solid var(--paper-hi);
    padding:10px 16px; cursor:pointer;
  }
  .paste button:hover{ background:var(--paper-hi); color:var(--ink); }
  .video__meta{ display:flex; justify-content:space-between; gap:16px; padding:13px clamp(14px,2vw,20px); }

  .rledger{ width:100%; border-collapse:collapse; margin-top:clamp(26px,3vw,40px); }
  .rledger th{
    font-family:var(--mono); font-size:10.5px; font-weight:500;
    letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint);
    text-align:left; padding:0 14px 10px 0; border-bottom:1px solid var(--rule);
  }
  .rledger td{ padding:12px 14px 12px 0; border-bottom:1px solid rgba(13,12,12,.12); }
  .rledger tbody tr{ cursor:pointer; transition:background .18s ease; }
  .rledger tbody tr:hover, .rledger tbody tr.is-sel{ background:rgba(13,12,12,.07); }
  .rledger .c-name{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:1.15rem; }
  .rledger .c-code{ font-family:var(--mono); font-size:12px; color:var(--ink-faint); white-space:nowrap; }

  .subs{ margin-top:16px; padding-top:14px; border-top:1px solid var(--rule); }
  .subs__list{
    max-height:240px; overflow:auto; margin-top:10px;
    border:1px solid var(--rule);
  }
  .subs__list button{
    display:block; width:100%; text-align:left;
    background:transparent; border:0;
    border-bottom:1px solid rgba(13,12,12,.12);
    padding:9px 12px; cursor:pointer;
    font-family:var(--body); font-weight:300; font-size:.9em; color:var(--ink);
  }
  .subs__list button:last-child{ border-bottom:0; }
  .subs__list button:hover{ background:rgba(13,12,12,.07); }
  .subs__list button[aria-pressed="true"]{ background:var(--ink); color:var(--paper-hi); }
  .subs__list b{ font-weight:400; }
  .subs__list em{
    font-style:normal; float:right;
    font-family:var(--mono); font-size:10px; letter-spacing:.1em;
    text-transform:uppercase; opacity:.6;
  }

  .key{ display:none; }
  .key button{
    display:flex; align-items:center; gap:8px;
    font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
    background:transparent; border:1px solid var(--rule); color:var(--ink);
    padding:8px 12px; cursor:pointer;
  }
  .key button:hover{ border-color:var(--ink); }
  .key button[aria-pressed="true"]{ border-color:var(--ink); background:rgba(13,12,12,.07); }
  .key i{ width:13px; height:13px; display:block; border:1px solid rgba(13,12,12,.35); }
  .key .k-home{ background:#0d0c0c; }
  .key .k-eea{ background:rgba(13,12,12,.60); }
  .key .k-review{ background:rgba(13,12,12,.32); }
  .key .k-closed{ background:rgba(13,12,12,.12); }
  .key .k-blocked{
    background-image:repeating-linear-gradient(45deg,#0d0c0c 0 2px,transparent 2px 5px);
  }
  .key em{ font-style:normal; color:var(--ink-faint); }

  /* ─────────── country panel ─────────── */
  .panel{
    position:sticky; top:96px;
    border:1px solid var(--ink);
    background:var(--paper-hi);
    padding:clamp(20px,2.6vw,30px);
  }
  .panel__name{
    font-family:var(--display); font-weight:800; text-transform:uppercase;
    font-size:clamp(1.9rem,3.6vw,2.8rem); line-height:.92;
    margin:8px 0 0;
  }
  .panel__status{
    display:inline-block; margin:16px 0 0;
    background:var(--ink); color:var(--paper-hi);
    font-family:var(--mono); font-size:10.5px;
    letter-spacing:.18em; text-transform:uppercase;
    padding:7px 11px;
  }
  .panel__rows{ margin:18px 0 0; }
  .panel__row{
    padding:12px 0; border-top:1px solid var(--rule);
    display:flex; justify-content:space-between; gap:14px; font-size:.93em;
  }
  .panel__row:last-of-type{ border-bottom:1px solid var(--rule); }
  .panel__body{ margin:16px 0 0; font-size:.93em; color:var(--ink-soft); }
  .panel__foot{ margin:18px 0 0; font-size:.84em; color:var(--ink-faint); }
  @media (max-width:960px){
    .atlas{ grid-template-columns:1fr; }
    .panel{ position:static; }
  }

/* --- scripture --- */
  .passages{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:1px;
    background:var(--rule);
    border:1px solid var(--rule);
  }
  .passage{ background:var(--paper-lo); padding:clamp(18px,2.2vw,26px); }
  .band--dark .passage{ background:var(--paper); }
  .passage__ref{ margin:0 0 10px; color:var(--ink); }
  .passage__text{ margin:0; font-size:.97em; line-height:1.6; color:var(--ink-soft); }


/* --- WordPress admin bar ---------------------------------------
   WordPress pushes the page down 32px for logged-in users, but a
   fixed element ignores that, so the bar would sit under the admin
   bar and content would appear above it. Offset both fixed strips. */
  /* pages with a compliance strip sit the header below it */

  /* logged-in users get WordPress's 32px admin bar on top of all that */
  body.admin-bar .bar{ top:32px; }

  @media screen and (max-width:782px){
    body.admin-bar .bar{ top:46px; }
  }

  /* anchor links should not land under the fixed bar */
  html{ scroll-padding-top:124px; }
  body.admin-bar{ scroll-padding-top:156px; }


/* the WordPress admin bar steals 32px, so the hero needs to start lower */
  body.admin-bar .hero__inner{ padding-top:164px; }
  @media screen and (max-width:782px){
    body.admin-bar .hero__inner{ padding-top:178px; }
  }


/* --- two ways to take part --- */
  .two{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:1px; background:var(--rule); border:1px solid var(--rule);
  }
  .two__card{ background:var(--paper); padding:clamp(22px,3vw,34px); }
  .band--dark .two__card{ background:var(--paper-hi); }
  .two__card h3{
    font-family:var(--display); font-weight:800;
    font-size:clamp(22px,2.6vw,30px); letter-spacing:-.01em;
    margin:8px 0 12px; text-transform:uppercase;
  }
  .two__card p{ margin:0 0 12px; color:var(--ink-soft); font-size:.97em; line-height:1.6; }
  .two__card .hero__actions{ margin-top:18px; }


  .amount--wide{ width:100%; }
  .amount--wide input{
    width:100%; max-width:none; min-width:0;
    font-size:clamp(20px,2.4vw,28px);
  }
  .amount--wide input::-webkit-calendar-picker-indicator{ opacity:.45; cursor:pointer; }
  .field__note{
    margin:10px 0 0; font-size:.9em; line-height:1.55;
    color:var(--ink-faint); max-width:56ch;
  }


/* --- country map: surrounding countries, zoom controls --- */
  #cmap{ touch-action:none; cursor:grab; }
  .cmap__tools{
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    margin-bottom:12px;
  }
  .cmap__tools .chip{ min-width:44px; }
  .cmap__tools .label{ margin-left:4px; }


/* ─────────── phones and touch screens ─────────── */

  /* iOS zooms the whole page when a focused input is under 16px. Every field
     goes to 16px on small screens; the visual size is set by padding instead. */
  @media (max-width:600px){
    input, select, textarea{ font-size:16px; }
    .find input{ font-size:16px; letter-spacing:.04em; }
    .amount input{ font-size:1.7rem; }
    .amount--wide input{ font-size:16px; }
  }

  /* A finger is not a mouse pointer: 44px is the smallest reliable target. */
  @media (pointer: coarse){
    .chip, .zoombtn{ min-height:44px; padding:12px 16px; }
    .bar__nav a{ padding-block:10px; }
    .azlist a{ padding-block:12px; }
    .near a{ min-height:44px; display:inline-flex; align-items:center; }
  }

  /* The maps capture drags to pan. With touch-action:none the page cannot be
     scrolled while a finger is over them — and on a phone the map is most of
     the screen. Let vertical scrolling through; pinch still zooms the map. */
  @media (pointer: coarse){
    .mapwrap, #cmap{ touch-action:pan-y pinch-zoom; }
  }

  /* The world map is 2:1, so on a narrow screen it collapses to a strip.
     Give it real height and let it letterbox rather than shrink. */
  @media (max-width:600px){
    .mapwrap svg{ height:58vh; max-height:520px; }
    .cmap svg{ height:52vh; max-height:480px; }
  }

  /* The navigation scrolls sideways on a phone. Fade the right edge so it is
     visible that there is more of it. */
  @media (max-width:680px){
    .bar{ position:relative; }
    .bar::after{
      content:""; position:absolute; right:0; top:0; bottom:0; width:34px;
      background:linear-gradient(to right, rgba(13,12,12,0), var(--ink));
      pointer-events:none;
    }
  }


/* ─────────── globe ─────────── */
  .globe{
    display:grid; grid-template-columns:minmax(0,1.1fr) minmax(240px,.7fr);
    gap:clamp(22px,3vw,46px); align-items:center;
  }
  .globe__stage{
    position:relative; width:100%; aspect-ratio:1/1;
    max-height:min(70vh,620px); margin-inline:auto;
  }
  .globe__canvas{ display:block; cursor:grab; touch-action:none; border-radius:50%; }
  .globe__canvas:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; }
  .globe__name{
    font-family:var(--display); font-weight:800; text-transform:uppercase;
    font-size:clamp(1.5rem,3.2vw,2.4rem); line-height:1; margin:8px 0 0;
    overflow-wrap:break-word;
  }
  .globe__note{
    margin:18px 0 0; font-size:.88em; color:var(--ink-faint); max-width:44ch;
  }
  @media (max-width:900px){
    .globe{ grid-template-columns:1fr; }
    .globe__stage{ max-width:min(88vw,520px); }
  }
  /* on a phone the globe must not swallow the page scroll */
  @media (pointer: coarse){
    .globe__canvas{ touch-action:pan-y; }
  }


/* ─────────── social marks ─────────── */
/* Grayscale tiles: the mark knocked out of a solid shape, so the four read as
   one set rather than four brands. No platform colours anywhere. */
  .social{ display:flex; align-items:center; gap:10px; }
  .social__link{
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px;
    background:var(--ink-soft); color:var(--paper-hi);
    border-radius:9px;
    transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
  }
  .social__link svg{ width:19px; height:19px; fill:currentColor; display:block; }
  .social__link:hover,
  .social__link:focus-visible{
    background:var(--ink);
    transform:translateY(-1px);
    outline:none;
    box-shadow:0 2px 0 0 var(--ink);
  }
  /* on the dark bands the tile lifts out of the paper instead */
  .band--dark .social__link{ background:var(--ink); }

  @media (pointer: coarse){
    .social__link{ width:44px; height:44px; border-radius:12px; }
    .social__link svg{ width:22px; height:22px; }
  }
  @media (max-width:680px){
    .foot{ justify-content:center; text-align:center; }
    .social{ order:-1; width:100%; justify-content:center; margin-bottom:8px; }
  }

/* ─────────── the mark: globe over wordmark ─────────── */
  .bar__mark{
    display:flex; flex-direction:column; align-items:flex-start; gap:3px;
    line-height:1;
  }
  .bar__globe{
    display:block; width:34px; height:34px;
    flex:0 0 auto;
  }
  .bar__globe canvas{ display:block; }
  .bar__word{
    font-family:var(--display); font-weight:900;
    font-size:16px; letter-spacing:.2em; text-transform:uppercase;
    line-height:1;
  }
  .bar__word em{ font-style:normal; color:rgba(228,226,223,.55); }

  /* If a page still carries the older mark — a bare text node and an <em> —
     keep it on one line rather than stacking it into two rows. */
  .bar__mark > em{ display:inline; }
  .bar__mark:not(:has(.bar__word)){ flex-direction:row; align-items:center; gap:0; }


  /* the bar grows to hold it; the fixed offsets follow */
  .bar{ padding-block:10px; }
  @media (max-width:680px){
    .bar__globe{ width:28px; height:28px; }
    .bar__word{ font-size:13px; letter-spacing:.16em; }
  }


/* ─────────── navigation: assigned WordPress menus ───────────
   wp_nav_menu() outputs a list, the built-in fallback outputs bare links.
   These rules cover both so an assigned menu does not fall back to browser
   defaults. */
  .bar__nav,
  ul.bar__nav{
    display:flex; align-items:center;
    gap:clamp(14px,2.2vw,26px);
    list-style:none; margin:0; padding:0;
  }
  .bar__nav li{ list-style:none; margin:0; padding:0; }
  .bar__nav li::marker{ content:none; }
  .bar__nav a,
  .bar__nav li > a{
    font-family:var(--mono); font-size:12px; font-weight:500;
    letter-spacing:.14em; text-transform:uppercase;
    text-decoration:none; color:rgba(228,226,223,.72);
    padding-bottom:3px; border-bottom:1px solid transparent;
    white-space:nowrap;
    transition:color .2s ease, border-color .2s ease;
  }
  .bar__nav a:hover,
  .bar__nav li > a:hover,
  .bar__nav .current-menu-item > a,
  .bar__nav [aria-current="page"]{
    color:var(--paper-hi); border-bottom-color:var(--paper-hi);
  }
  /* the last item reads as the call to action, assigned menu or not */
  .bar__nav .is-cta,
  .bar__nav li:last-child > a{
    color:var(--paper-hi); border-bottom-color:rgba(228,226,223,.6);
  }

  .near__type{
    font-family:var(--mono); font-size:10px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--ink-faint); margin-left:8px;
  }

/* ─────────── ambient globe ─────────── */
/* Decoration: it sits behind everything, half off the edge, and cannot be
   touched. pointer-events off on the wrapper as well as the canvas, so it
   never intercepts a click meant for the page. */
  /* The whole sphere, in view, behind the page. Nothing is cropped: the point
     is to see the globe, and the markers on it, not a sliver of one. */
  .ambient{
    position:absolute; inset:0;
    overflow:hidden; pointer-events:none;
    z-index:0;
  }
  .ambient__stage{
    position:absolute;
    left:50%; top:clamp(70px,12vh,160px);
    transform:translateX(-50%);
    width:min(74vw,760px); aspect-ratio:1/1;
    opacity:.22;
    pointer-events:none;
  }
  .ambient__stage canvas{ pointer-events:none; }
  main#top{ position:relative; }
  main#top > section{ position:relative; z-index:1; }

  @media (max-width:900px){
    .ambient__stage{ width:min(92vw,560px); top:clamp(60px,9vh,120px); opacity:.18; }
  }
  @media (prefers-reduced-motion:reduce){
    .ambient__stage{ opacity:.10; }
  }

  .tally{
    font-family:var(--display); font-weight:900;
    font-size:clamp(2rem,5vw,3.4rem); line-height:1;
    margin:6px 0 0;
  }

/* ─────────── account ─────────── */
  .acct{ max-width:34rem; margin-top:clamp(20px,3vw,34px); }
  .acct .field{ margin-bottom:18px; }
  .acct input[type=text], .acct input[type=email], .acct input[type=password]{
    width:100%; font-family:var(--body); font-size:16px;
    background:transparent; color:var(--ink);
    border:0; border-bottom:1px solid var(--ink);
    padding:8px 0 9px;
  }
  .acct__code{
    font-family:var(--mono); font-size:2rem !important; letter-spacing:.4em;
    text-align:center; width:100%; max-width:12ch;
    border:0; border-bottom:1px solid var(--ink); background:transparent;
  }
  .acct__name{
    font-family:var(--display); font-weight:800; text-transform:uppercase;
    font-size:clamp(1.8rem,4vw,2.6rem); line-height:1; margin:6px 0 18px;
  }
  .acct__remember{ display:flex; align-items:center; gap:9px; margin:4px 0 6px; font-size:.94em; }
  .acct__note, .acct__err{
    font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
    padding:12px 14px; margin:18px 0 0; max-width:56ch;
  }
  .acct__note{ background:var(--ink); color:var(--paper-hi); }
  .acct__err{ border:1px solid var(--ink); }