: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);
    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; }
  }

  .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); }


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


/* --- 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; }
  .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; }
  }
  .bar__nav{
    display:flex; align-items:center;
    gap:clamp(14px,2.2vw,26px);
    list-style:none; margin:0; padding:0;
  }
  .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;
    white-space:nowrap;
    transition:color .2s ease, border-color .2s ease;
  }
  .bar__nav a:hover,
  .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{
    color:var(--paper-hi); border-bottom-color:rgba(228,226,223,.6);
  }

  /* 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; }



  .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; }
  }

/* ─────────── phones and tablets ───────────
   Appended when base.css is written, never to the source file: the
   extraction matches the source character for character, and editing it
   would stop every page's copy being recognised. */

/* iOS Safari inflates text when a phone is turned to landscape — a
   paragraph set at 16px comes back at 20-something and the layout it was
   measured for is gone. This turns that off and leaves the user's own text
   size alone, which is a different setting and must keep working. */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

/* 1vh is a hundredth of the *largest* viewport, so on a phone it counts the
   space behind the address bar. A map at 52vh therefore runs off the bottom
   of the screen until the bar retracts. dvh is the viewport actually
   visible; the vh line stays first as the fallback for anything that does
   not know dvh. */
@media (max-width:600px){
  .mapwrap svg{ height:58vh; height:58dvh; }
  .cmap svg{ height:52vh; height:52dvh; }
}

/* A notched phone in landscape puts the camera cutout over the left edge of
   a full-width fixed bar, and the home indicator over the foot of the page.
   Both take the safe-area insets; on any screen without them the value is
   zero and nothing moves. */
.topbar, .bar{
  padding-left:max(var(--gut), env(safe-area-inset-left));
  padding-right:max(var(--gut), env(safe-area-inset-right));
}
.foot{ padding-bottom:max(34px, env(safe-area-inset-bottom)); }

/* A row that is a link should look pressed when it is pressed. Touch has no
   hover, so the hover tint on the tables never appears on a phone and a tap
   gives no acknowledgement at all until the page changes. */
@media (hover: none){
  .ledger tbody tr:active, .rledger tbody tr:active{
    background:rgba(13,12,12,.10);
  }
  .rledger tbody tr:hover, .ledger tbody tr:hover{ background:transparent; }
}

/* The three-column subdivision table on a narrow screen: the type is the
   least useful of the three and the one that wraps worst — "Autonomous
   Community" beside a name already set in the display face. It comes out
   below 460px, where the name and the code are what a reader is scanning
   for. */
@media (max-width:460px){
  .rledger th:nth-child(2), .rledger td:nth-child(2){ display:none; }
}

/* Long region names must be allowed to break rather than push the table
   wider than the screen. */
.rledger .c-name, .ledger .c-title, .chead__name{ overflow-wrap:anywhere; }