/* ==========================================================================
   Global Peace for Israel — one stylesheet.
   Tokens, base, then components. Change a token here and it changes globally.
   ========================================================================== */

:root {
  --navy-900:#060f22; --navy-800:#0a1e42; --navy-700:#12305e; --navy-600:#164081;
  --blue-700:#083a80; --blue-600:#0b4aa2; --blue-500:#1f74d0;
  --blue-300:#7fb2ee; --blue-200:#9cc6f5; --blue-50:#e8f0fb; --blue-25:#eef4fb;
  --gold-800:#8a6d24; --gold-500:#c6a052; --gold-400:#e9c877; --gold-50:#f3ead4;
  --gray-50:#f4f6f9; --gray-100:#eef2f7; --gray-150:#e8edf4;
  --line:#e6e9ef; --line-hover:#c6d3e6; --line-input:#d3dae5;
  --ink:#1a2540; --ink-body:#33415c; --ink-muted:#4b5772; --ink-soft:#55627a;
  --ink-faint:#677080; --ink-lightest:#6f7683;
  --pod-neon:#8fa8ff;
  --display:Montserrat,system-ui,sans-serif;
  --sans:Inter,system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);

  /* radii — buttons share one value so a donate button and a
     secondary action never sit side by side with different corners */
  --r-btn:6px;
  --r-field:9px;
  --r-card:14px;
  --r-pill:99px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--blue-600);text-decoration:none}
a:hover{color:var(--blue-700)}
h1,h2,h3,h4{text-wrap:balance}
p{text-wrap:pretty}
img{max-width:100%}
:focus-visible{outline:3px solid var(--blue-500);outline-offset:2px;border-radius:3px}
::selection{background:var(--blue-600);color:#fff}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;z-index:100}
.skip:focus{left:16px;top:16px;background:#fff;color:var(--navy-800);padding:12px 18px;border-radius:6px;font-weight:600}

/* ==========================================================================
   Reveal — pure CSS.

   `both` fill means the END state is what persists, so content is always
   visible. Where scroll-driven animations are supported, elements animate as
   they enter the viewport; elsewhere they animate once on load. No JavaScript
   is involved, so no script failure can leave anything hidden.
   ========================================================================== */

@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

[data-reveal]{animation:rise .7s var(--ease) both;animation-delay:var(--d,0ms)}

/* Sibling stagger, done in CSS so nothing has to touch inline style
   attributes at runtime. */
[data-reveal]:nth-child(2){--d:80ms}
[data-reveal]:nth-child(3){--d:160ms}
[data-reveal]:nth-child(4){--d:240ms}
[data-reveal]:nth-child(5){--d:320ms}
[data-reveal]:nth-child(6){--d:400ms}
[data-reveal]:nth-child(n+7){--d:480ms}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    [data-reveal]{animation:rise 1s var(--ease) both;animation-delay:0s;animation-timeline:view();animation-range:entry 5% cover 26%}
  }
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-reveal]{opacity:1!important;transform:none!important}
}

/* ==========================================================================
   Layout
   ========================================================================== */

.shell{max-width:1280px;margin:0 auto}
.wrap-cards{max-width:1120px;margin:0 auto}
.wrap-split{max-width:1080px;margin:0 auto}
.wrap-hero{max-width:900px;margin:0 auto}
.wrap-prose{max-width:768px;margin:0 auto}

.section{padding:84px 32px}
.section-sm{padding:64px 32px}
.section-lg{padding:96px 32px}
.bg-alt{background:var(--gray-50);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.eyebrow{font:700 12.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--blue-600);margin-bottom:16px}
.eyebrow-light{color:var(--blue-300)}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header{position:sticky;top:0;z-index:50;background:rgba(7,17,36,.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.09);transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.site-header[data-stuck]{background:rgba(5,12,26,.96);box-shadow:0 10px 34px -18px rgba(0,0,0,.8)}
.site-header[data-stuck] .header-row{padding-top:9px;padding-bottom:9px}
.site-header[data-stuck] .brand img{transform:scale(.86)}

.header-row{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 32px;transition:padding .3s var(--ease)}

.brand{display:flex;align-items:center;gap:13px;flex-shrink:0}
.brand img{width:46px;height:46px;object-fit:contain;transition:transform .3s var(--ease)}
.brand-name{font:800 15px/1.05 var(--display);letter-spacing:.02em;color:#fff}
.brand-name span{font-weight:600;font-size:10.5px;letter-spacing:.34em;color:var(--blue-300)}

.nav{display:flex;align-items:center;justify-content:flex-end;flex-wrap:nowrap;gap:14px;font:600 13px/1 var(--sans)}
.nav a{position:relative;white-space:nowrap;color:rgba(255,255,255,.86);transition:color .2s var(--ease)}
.nav a:not(.btn-donate){padding:2px 0}
.nav a:hover,.nav a[aria-current=page]{color:#fff}
.nav a:not(.btn-donate)::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:100%;background:var(--gold-400);transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease)}
.nav a:not(.btn-donate):hover::after{transform:scaleX(1)}

.btn-donate,
.nav a.btn-donate,
.nav-mobile a.btn-donate{display:inline-flex;align-items:center;justify-content:center;padding:10px 20px;background:var(--gold-500);color:#1a1200!important;border-radius:var(--r-btn);font-weight:700;letter-spacing:.02em;white-space:nowrap;line-height:1;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.btn-donate:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(198,160,82,.85)}

.nav-toggle{display:none;width:44px;height:44px;flex-shrink:0;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.2);border-radius:7px;background:none;color:#fff;cursor:pointer}
.nav-mobile{display:none}

/* The full nav measures ~990px with the logo block. Below 1060px it becomes a
   drawer rather than wrapping onto two lines. */
@media (max-width:1059px){
  .nav{display:none}
  .nav-toggle{display:flex}
  .nav-mobile{display:none;border-top:1px solid rgba(255,255,255,.1);background:rgba(5,12,26,.98);padding:20px 32px 28px}
  .nav-mobile[data-open]{display:block}
  .nav-mobile ul{list-style:none;margin:0;padding:0}
  .nav-mobile a{display:block;padding:11px 0;font:600 15px/1 var(--sans);color:rgba(255,255,255,.8)}
  .nav-mobile a:hover{color:#fff}
  .nav-mobile a.btn-donate{display:flex;margin-top:16px;padding:14px}
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:16px 32px;border-radius:var(--r-btn);font:700 15px/1 var(--sans);letter-spacing:.02em;border:0;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--gold-500);color:#1a1200!important}
.btn-gold:hover{box-shadow:0 14px 30px -14px rgba(198,160,82,.85)}
.btn-outline{border:1.5px solid rgba(255,255,255,.45);color:#fff!important}
.btn-outline:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.75)}
.btn-solid{background:var(--blue-600);color:#fff!important}
.btn-solid:hover{background:var(--blue-700)}
.btn-quiet{border:1.5px solid var(--line-hover);color:var(--blue-600)!important;background:#fff}
.btn-quiet:hover{border-color:var(--blue-600)}
.btn-dark{background:var(--navy-800);color:#fff!important}
.link-arrow{font:700 15px/1 var(--sans);color:var(--blue-600)}

/* ==========================================================================
   Cards
   ========================================================================== */

.card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.card:hover{transform:translateY(-5px);box-shadow:0 22px 44px -22px rgba(10,30,66,.35);border-color:var(--line-hover)}
.card img{transition:transform .55s var(--ease)}
.card:hover img{transform:scale(1.055)}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media (max-width:1000px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.grid-3,.grid-4{grid-template-columns:1fr}}

/* ==========================================================================
   Page hero
   ========================================================================== */

.page-hero{position:relative;overflow:hidden;background:radial-gradient(130% 130% at 76% -22%,var(--navy-600),var(--navy-800) 56%,var(--navy-900));padding:84px 32px 74px}
.page-hero canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.75}
.page-hero .watermark{position:absolute;right:-150px;top:-110px;width:600px;height:600px;object-fit:contain;opacity:.07;mix-blend-mode:screen;pointer-events:none}
.page-hero .inner{position:relative}
.page-hero h1{font:800 clamp(34px,6vw,54px)/1.06 var(--display);color:#fff;margin:0 0 24px;letter-spacing:-.02em}
.page-hero .lede{font:400 17.5px/1.7 var(--sans);color:rgba(255,255,255,.85);margin:0 auto;max-width:720px}
.page-hero .eyebrow{color:var(--blue-300);margin-bottom:22px;letter-spacing:.3em}
@media (max-width:760px){.page-hero .watermark{display:none}}

/* ==========================================================================
   Prose
   ========================================================================== */

.prose{color:var(--ink-body);font-size:17.5px;line-height:1.85}
.prose p{margin:0 0 24px}
.prose h2{font:700 25px/1.25 var(--display);color:var(--navy-800);margin:46px 0 16px}
.prose h3{font:700 19px/1.3 var(--display);color:var(--navy-800);margin:34px 0 12px}
.prose ul,.prose ol{margin:0 0 24px;padding-left:22px}
.prose li{margin-bottom:10px}
.prose strong{color:var(--navy-800);font-weight:600}
.prose em{color:var(--navy-800)}
.prose a{text-decoration:underline;text-underline-offset:2px}

.callout{background:var(--gray-50);border-left:4px solid var(--gold-500);border-radius:0 12px 12px 0;padding:28px 32px;margin-bottom:44px}
.callout-label{font:700 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-800);margin-bottom:14px}

/* ==========================================================================
   Forms
   ========================================================================== */

.form-panel{background:var(--gray-50);border:1px solid var(--line);border-radius:18px;padding:42px}
.field{display:block;margin-bottom:18px}
.field>span{display:block;font:600 13px/1 var(--sans);color:#334;margin-bottom:9px}
.field input,.field select,.field textarea{width:100%;padding:14px 15px;border:1px solid var(--line-input);border-radius:9px;font:400 15px/1.4 var(--sans);background:#fff;color:var(--ink);transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(31,116,208,.14)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:560px){.field-row{grid-template-columns:1fr}}

.form-submit{width:100%;padding:17px;background:var(--blue-600);color:#fff;border:0;border-radius:var(--r-field);font:700 15px/1 var(--sans);cursor:pointer;transition:background .2s var(--ease)}
.form-submit:hover{background:var(--blue-700)}
.form-submit[disabled]{opacity:.6;cursor:default}

.form-note{margin:18px 0 0;padding:16px;border-radius:9px;font:600 14px/1.5 var(--sans);text-align:center}
.form-ok{background:#e7f4ec;color:#1a7a3c}
.form-err{background:#fdecec;color:#a52121}

/* honeypot */
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer{background:var(--navy-900);color:rgba(255,255,255,.7);padding:60px 32px 30px}
.footer-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.1)}
.site-footer h4{font:700 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#fff;margin:0 0 16px}
.footer-col-links{display:flex;flex-direction:column;gap:11px;font:500 13.5px/1 var(--sans)}
.site-footer a{color:rgba(255,255,255,.7);transition:color .2s var(--ease),translate .2s var(--ease)}
.site-footer a:hover{color:#fff;translate:3px 0}
.site-footer p{font:400 13.5px/1.7 var(--sans);margin:0 0 12px}
.footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.footer-brand img{width:44px;height:44px;object-fit:contain}
.footer-brand span{font:800 14px/1.1 var(--display);color:#fff}
.footer-brand span span{font-weight:600;font-size:10px;letter-spacing:.3em;color:var(--blue-300)}
.social{display:flex;gap:12px}
.social a{width:38px;height:38px;border:1px solid rgba(255,255,255,.2);border-radius:9px;display:flex;align-items:center;justify-content:center}
.social a:hover{translate:none;border-color:var(--blue-300)}
.footer-donate{color:var(--gold-400)!important;font-weight:600}
.footer-legal{max-width:1280px;margin:0 auto;padding-top:24px;font:400 12.5px/1.5 var(--sans);color:rgba(255,255,255,.62)}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}

/* ==========================================================================
   Chrome
   ========================================================================== */

#progress{position:fixed;inset:0 auto auto 0;height:3px;width:0;z-index:60;pointer-events:none;background:linear-gradient(90deg,var(--blue-600),var(--blue-300) 45%,var(--gold-400));transition:width .15s linear}

#to-top{position:fixed;right:26px;bottom:26px;width:48px;height:48px;border-radius:50%;border:0;background:var(--blue-600);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;box-shadow:0 16px 34px -16px rgba(10,30,66,.9);transition:opacity .3s var(--ease),transform .3s var(--ease),background .2s var(--ease);z-index:55}
#to-top[data-on]{opacity:1;transform:none;pointer-events:auto}
#to-top:hover{background:var(--gold-500);color:#1a1200}

@media (max-width:900px){
  .section,.section-lg{padding:64px 24px}
  .section-sm{padding:48px 24px}
  .page-hero{padding:64px 24px 56px}
  .header-row{padding:14px 24px}
  .site-footer{padding:48px 24px 24px}
  .form-panel{padding:30px 24px}
}


/* ==========================================================================
   REFINEMENT LAYER
   Contrast and responsive corrections applied on top of the base rules above.
   Nothing here changes a layout's structure — it corrects colour contrast and
   makes the inline-styled grids on the content pages responsive, which plain
   media queries cannot reach.
   ========================================================================== */

/* ---------- contrast ---------- */

/* Gold CTA band: body copy was 4.3:1 on the gold field. */
.final p { color: rgba(26, 18, 0, .84); }

/* Stat bar sits over a photograph, so its labels need more weight. */
.stat span { color: rgba(255, 255, 255, .86); }

/* Muted copy on dark grounds, raised to a comfortable reading contrast. */
.pod-lede { color: rgba(255, 255, 255, .84); }
.pod-chips span { color: rgba(255, 255, 255, .82); }

/* Hero and page-hero ledes. */
.page-hero .lede { color: rgba(255, 255, 255, .88); }

/* ---------- responsive grids on the content pages ----------
   These pages carry their column counts as inline styles, so an ordinary
   media query is powerless against them. Matching on the inline value and
   forcing it is the surgical fix: no markup changes, no restructuring. */

/* Each selector is written twice: once for the authored inline value and once
   for the form a browser produces if anything ever normalises that attribute. */

@media (max-width: 1080px) {
  [style*="repeat(5,1fr)"], [style*="repeat(5, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
  [style*="repeat(4,1fr)"], [style*="repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 960px) {
  [style*="repeat(3,1fr)"], [style*="repeat(3, 1fr)"],
  [style*="repeat(5,1fr)"], [style*="repeat(5, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }

  [style*="1fr 1.15fr"], [style*="1fr 1.25fr"], [style*="1fr 1.05fr"],
  [style*="1.05fr 1fr"], [style*="1.15fr 1fr"] { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
  [style*="repeat(2,1fr)"], [style*="repeat(2, 1fr)"],
  [style*="repeat(3,1fr)"], [style*="repeat(3, 1fr)"],
  [style*="repeat(4,1fr)"], [style*="repeat(4, 1fr)"],
  [style*="repeat(5,1fr)"], [style*="repeat(5, 1fr)"] { grid-template-columns: 1fr !important; }

  /* City / state and similar paired fields. */
  [style*="1.4fr 1fr"] { grid-template-columns: 1fr !important; }
}

/* ---------- mobile type and rhythm ---------- */

@media (max-width: 760px) {
  .page-hero h1 { font-size: clamp(27px, 7.4vw, 44px); }
  .prose { font-size: 16.5px; line-height: 1.78; }
  .prose h2 { font-size: 22px; margin-top: 38px; }
  .prose h3 { font-size: 18px; }
  .callout { padding: 22px 24px; }
  .pull { padding-left: 18px; }
  #to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }

  /* The content pages carry their section padding inline. Target them
     structurally so the rule cannot be defeated by style normalisation. */
  main > section { padding-left: 22px !important; padding-right: 22px !important; }
}

@media (max-width: 480px) {
  .section, .section-lg { padding: 52px 18px; }
  .section-sm { padding: 40px 18px; }
  .page-hero { padding: 52px 18px 46px; }
  .header-row { padding: 12px 18px; gap: 12px; }
  .site-footer { padding: 40px 18px 22px; }
  .form-panel { padding: 26px 20px; }
  .brand img { width: 40px; height: 40px; }
  .brand-name { font-size: 13.5px; }
  .btn { padding: 15px 24px; font-size: 14.5px; }
  .stat b { font-size: 33px; }
  .final h2 { font-size: 27px; }
}

/* Long words and URLs must never force a horizontal scrollbar. */
@media (max-width: 640px) {
  h1, h2, h3, p, li, .prose a { overflow-wrap: break-word; }
}

/* ---------- Our Team: the roster cards are inline flex rows with a fixed
   320px photo column, which leaves the bio crushed on a phone. Stack them. */

@media (max-width: 860px) {
  [data-people] > div { flex-direction: column !important; }
  [data-people] > div > div:first-child { flex: 0 0 auto !important; min-height: 0 !important; }
  [data-people] > div > div:last-child { padding: 30px 26px !important; }
}

@media (max-width: 480px) {
  [data-people] > div > div:last-child { padding: 24px 20px !important; }
}

/* ---------- Publication and news cards: the inline cover band is a fixed
   height, which crops hard once the card goes full width on a phone. */

@media (max-width: 640px) {
  [data-card] > div:first-child { min-height: 230px; }
}

/* ---------- Anything inline-styled as a nowrap row of actions should wrap
   before it overflows the viewport. */

@media (max-width: 560px) {
  main [style*="display:flex"], main [style*="display: flex"] { flex-wrap: wrap; }
}


/* ==========================================================================
   CRAFT LAYER
   Hero depth, button mechanics, and motion detail. Additive only — no
   layout, colour, or type decision above is changed.
   ========================================================================== */

/* ---------- Hero depth ----------
   Three additions, all behind the content: a fine grid that reads as
   structure rather than decoration, a soft vignette that focuses the centre,
   and a hairline gradient rule that seats the hero against the next section. */

.page-hero::before,
.art-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.016) 0 1px, transparent 1px 72px);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%);
}

.page-hero::after,
.art-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(90deg,
    transparent,
    rgba(127,178,238,.32) 22%,
    rgba(233,200,119,.5) 50%,
    rgba(127,178,238,.32) 78%,
    transparent);
}

/* Inline-styled heroes on the content pages get the same seating rule. */
main > section:first-child { position: relative; }

/* Hero content always sits above the texture. */
.page-hero .inner,
.art-hero .inner { z-index: 1; }

/* Eyebrow: a short gold rule earns the label its own tier. */
.page-hero .eyebrow,
.art-hero .art-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.page-hero .eyebrow::before,
.art-hero .art-kicker::before {
  content: "";
  width: 26px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-500), rgba(198,160,82,.15));
  flex: 0 0 auto;
}

/* Headline entrance: a touch more travel and a slower curve than body copy,
   so the hero resolves last. */
@keyframes heroRise {
  from { opacity: 0; transform: translateY(20px); letter-spacing: .01em; }
  to   { opacity: 1; transform: none; letter-spacing: -.02em; }
}
.page-hero h1,
.art-hero h1 { animation: heroRise 1.1s var(--ease) both; }

/* ---------- Buttons ----------
   A real pressed state, a light sweep on the primary action, and focus rings
   that read on both grounds. */

.btn,
.btn-donate {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  will-change: transform;
}

.btn::after,
.btn-donate::after {
  content: "";
  position: absolute;
  top: -50%; bottom: -50%;
  width: 34%;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  transform: translateX(-140%) skewX(-16deg);
}

@keyframes btnSweep {
  from { transform: translateX(-140%) skewX(-16deg); }
  to   { transform: translateX(340%) skewX(-16deg); }
}

.btn-gold:hover::after,
.btn-donate:hover::after,
.btn-solid:hover::after,
.btn-dark:hover::after {
  opacity: 1;
  animation: btnSweep .85s var(--ease);
}

.btn:active,
.btn-donate:active { transform: translateY(0) scale(.985); }

.btn-gold:hover   { box-shadow: 0 16px 34px -14px rgba(198,160,82,.9); }
.btn-solid:hover  { box-shadow: 0 16px 34px -16px rgba(11,74,162,.75); }
.btn-dark:hover   { box-shadow: 0 16px 34px -16px rgba(10,30,66,.85); }
.btn-quiet:hover  { box-shadow: 0 12px 26px -16px rgba(10,30,66,.35); }

/* Arrow links: the arrow leads on hover. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap .25s var(--ease), color .2s var(--ease);
}
.link-arrow:hover { gap: 13px; }

/* Focus rings tuned per ground. */
.btn-outline:focus-visible,
.btn-donate:focus-visible { outline-color: var(--gold-400); }

/* ---------- Cards ----------
   A slightly quicker lift with a gold hairline at the top edge, so hover
   feels mechanical rather than floaty. */

.card, .tank, [data-card] {
  position: relative;
}
.card::before,
.tank::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue-500), var(--gold-500));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
  z-index: 1;
}
.card:hover::before,
.tank:hover::before { transform: scaleX(1); }

.tank-icon { transition: border-color .3s var(--ease), background .3s var(--ease); }
.tank:hover .tank-icon { border-color: var(--gold-500); background: rgba(198,160,82,.08); }

/* ---------- Section headings ----------
   A gold rule draws in under section headings as they arrive. */

@keyframes ruleIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.section > .shell h2::after,
.section-lg h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: 18px;
  background: linear-gradient(90deg, var(--gold-500), rgba(198,160,82,0));
  transform-origin: left;
  animation: ruleIn .9s var(--ease) both;
}
.section > .shell > div[style*="text-align:center"] h2::after,
.section-lg div[style*="text-align:center"] h2::after { margin-left: auto; margin-right: auto; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section > .shell h2::after,
    .section-lg h2::after {
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }
  }
}

/* ---------- Stat bar ----------
   A single slow pass of light, and digits that settle rather than snap. */

@keyframes statSweep {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(340%); }
}
.stats { overflow: hidden; }
.stats::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 30%;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(90deg,
    transparent,
    rgba(233,200,119,.12),
    rgba(255,255,255,.05),
    rgba(233,200,119,.12),
    transparent);
  animation: statSweep 16s ease-in-out infinite 2s;
}
.stat { transition: background .3s var(--ease); }
.stat:hover { background: rgba(255,255,255,.04); }

/* ---------- Header ----------
   A hairline of brand colour under the header once it is stuck. */

.site-header[data-stuck]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(233,200,119,.4), transparent);
}
.site-header { position: sticky; }

/* ---------- Footer ---------- */

.social a { transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease); }
.social a:hover { background: rgba(127,178,238,.1); transform: translateY(-2px); }

/* ---------- Images ----------
   Photographs settle in rather than appearing flatly. */

.person-card img,
[data-people] img,
[data-card] img { transition: transform .6s var(--ease), filter .6s var(--ease); }
.person-card:hover img { transform: scale(1.04); }

/* ---------- Respect the motion preference for everything above ---------- */

@media (prefers-reduced-motion: reduce) {
  .page-hero h1, .art-hero h1,
  .stats::after,
  .section > .shell h2::after,
  .section-lg h2::after { animation: none !important; }
  .btn::after, .btn-donate::after { display: none; }
}

/* Mobile: drop the decorative extras that cost more than they add. */
@media (max-width: 640px) {
  .page-hero::before, .art-hero::before { display: none; }
  .section > .shell h2::after,
  .section-lg h2::after { width: 48px; margin-top: 14px; }
}


/* ==========================================================================
   ENTRANCE LAYER
   Richer, more varied content entrances. Still pure CSS: every animation ends
   in the visible state via `both` fill, so nothing can be left hidden if
   JavaScript fails. Scroll-driven where the browser supports it.
   ========================================================================== */

/* ---------- the vocabulary ---------- */

@keyframes riseIn   { from { opacity:0; transform: translateY(34px); }                 to { opacity:1; transform:none; } }
@keyframes liftIn   { from { opacity:0; transform: translateY(40px) scale(.965); }     to { opacity:1; transform:none; } }
@keyframes slideL   { from { opacity:0; transform: translateX(-42px); }                to { opacity:1; transform:none; } }
@keyframes slideR   { from { opacity:0; transform: translateX(42px); }                 to { opacity:1; transform:none; } }
@keyframes unmask   { from { opacity:0; clip-path: inset(0 0 100% 0); }                to { opacity:1; clip-path: inset(0 0 0 0); } }
@keyframes tiltIn   { from { opacity:0; transform: perspective(900px) rotateX(9deg) translateY(30px); } to { opacity:1; transform:none; } }
@keyframes zoomSoft { from { opacity:0; transform: scale(1.06); }                      to { opacity:1; transform:none; } }
@keyframes ruleWipe { from { transform: scaleX(0); }                                   to { transform: scaleX(1); } }

/* Cards lift with a hint of scale rather than a flat fade. */
.card[data-reveal],
.tank[data-reveal],
[data-card][data-reveal] { animation-name: liftIn; animation-duration: .85s; }

/* Team roster: alternating sides, so scrolling the page has a rhythm. */
[data-people] > div:nth-child(odd)  { animation: slideL .9s var(--ease) both; }
[data-people] > div:nth-child(even) { animation: slideR .9s var(--ease) both; }

/* Portraits and covers reveal upward behind their frame. */
[data-people] > div > div:first-child img,
[data-card] > div:first-child img { animation: zoomSoft 1.1s var(--ease) both; }

/* Leading editorial blocks unmask from the top edge. */
.callout[data-reveal] { animation-name: unmask; animation-duration: 1s; }

/* Pull quotes arrive with a slight tilt. */
.pull { animation: tiltIn 1s var(--ease) both; }

/* Stat strips inside articles count in as a group. */
.stat-strip { animation: liftIn .9s var(--ease) both; }
.stat-strip div:nth-child(1) { animation: riseIn .7s var(--ease) .05s both; }
.stat-strip div:nth-child(2) { animation: riseIn .7s var(--ease) .17s both; }
.stat-strip div:nth-child(3) { animation: riseIn .7s var(--ease) .29s both; }

/* Prose: paragraphs and headings settle in as you read down a long article. */
.prose > p,
.prose > h2,
.prose > h3,
.prose > ul,
.prose > ol { animation: riseIn .75s var(--ease) both; }

/* Section heading rules wipe in. */
.section > .shell h2::after,
.section-lg h2::after { animation-name: ruleWipe; }

/* ---------- scroll-driven, where supported ----------
   Each element animates across its own entry into the viewport, which reads
   far better than a single timed cascade on load. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    .card[data-reveal],
    .tank[data-reveal],
    [data-card][data-reveal],
    .callout[data-reveal] {
      animation-timeline: view();
      animation-range: entry 4% cover 30%;
      animation-delay: 0s;
    }

    [data-people] > div:nth-child(odd),
    [data-people] > div:nth-child(even) {
      animation-timeline: view();
      animation-range: entry 2% cover 34%;
    }

    [data-people] > div > div:first-child img,
    [data-card] > div:first-child img {
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }

    .pull,
    .stat-strip,
    .stat-strip div {
      animation-timeline: view();
      animation-range: entry 6% cover 32%;
    }

    .prose > p,
    .prose > h2,
    .prose > h3,
    .prose > ul,
    .prose > ol {
      animation-timeline: view();
      animation-range: entry 2% entry 55%;
    }

    /* Photographs drift a little as they pass, for depth. */
    .person-card img,
    [data-card] > div:first-child img {
      animation-timeline: view();
    }
  }
}

/* ==========================================================================
   GALLERY ENTRANCE
   Tiles arrive on a diagonal: column offset plus row offset, so the grid
   assembles rather than appearing all at once.
   ========================================================================== */

@keyframes tileIn {
  from { opacity: 0; transform: translateY(40px) scale(.94); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

.gtile[data-reveal] { animation: tileIn .95s var(--ease) both; }

/* Column offset: three columns, each a beat behind the last. */
.gcol:nth-child(1) .gtile { animation-delay: 0ms; }
.gcol:nth-child(2) .gtile { animation-delay: 110ms; }
.gcol:nth-child(3) .gtile { animation-delay: 220ms; }

/* Row offset within each column. */
.gcol .gtile:nth-child(1) { --row: 0ms; }
.gcol .gtile:nth-child(2) { --row: 70ms; }
.gcol .gtile:nth-child(3) { --row: 140ms; }
.gcol .gtile:nth-child(4) { --row: 210ms; }
.gcol .gtile:nth-child(n+5) { --row: 280ms; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .gtile[data-reveal] {
      animation-timeline: view();
      animation-range: entry 2% cover 26%;
      animation-delay: 0s;
    }
    /* Keep the diagonal by varying the range instead of the delay. */
    .gcol:nth-child(2) .gtile { animation-range: entry 0% cover 30%; }
    .gcol:nth-child(3) .gtile { animation-range: entry -2% cover 34%; }
  }
}

/* The lightbox image scales up from the grid rather than cutting in. */
@keyframes lbIn { from { opacity:0; transform: scale(.94); } to { opacity:1; transform:none; } }
.lightbox:not([hidden]) .lb-img { animation: lbIn .4s var(--ease) both; }
.lightbox:not([hidden]) { animation: lbFade .3s ease both; }
@keyframes lbFade { from { opacity:0; } to { opacity:1; } }

/* ==========================================================================
   HERO ENTRANCE
   The hero resolves in a deliberate order: label, headline, lede, actions,
   then the stat bar underneath.
   ========================================================================== */

.hero-eyebrow           { animation: riseIn .8s var(--ease) .05s both; }
.hero h1                { animation: riseIn .95s var(--ease) .18s both; }
.hero-lede              { animation: riseIn .9s var(--ease) .34s both; }
.hero-cta               { animation: riseIn .9s var(--ease) .48s both; }
.stats                  { animation: unmask 1s var(--ease) .62s both; }
.stats .stat:nth-child(1) b { animation: riseIn .7s var(--ease) .72s both; }
.stats .stat:nth-child(2) b { animation: riseIn .7s var(--ease) .80s both; }
.stats .stat:nth-child(3) b { animation: riseIn .7s var(--ease) .88s both; }
.stats .stat:nth-child(4) b { animation: riseIn .7s var(--ease) .96s both; }

.page-hero .eyebrow,
.art-hero .art-kicker   { animation: riseIn .8s var(--ease) .05s both; }
.page-hero .lede        { animation: riseIn .9s var(--ease) .3s both; }

/* ==========================================================================
   Never let motion cost accessibility or performance.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  [data-people] > div,
  [data-people] > div > div:first-child img,
  [data-card] > div:first-child img,
  .callout[data-reveal],
  .pull,
  .stat-strip,
  .stat-strip div,
  .prose > p, .prose > h2, .prose > h3, .prose > ul, .prose > ol,
  .gtile[data-reveal],
  .hero-eyebrow, .hero h1, .hero-lede, .hero-cta, .stats, .stats b,
  .page-hero .eyebrow, .page-hero .lede, .art-hero .art-kicker,
  .lightbox .lb-img {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
  }
}

/* On phones, keep the entrances but drop the expensive blur. */
@media (max-width: 640px) {
  @keyframes tileIn {
    from { opacity: 0; transform: translateY(26px) scale(.97); }
    to   { opacity: 1; transform: none; }
  }
  .prose > p, .prose > ul, .prose > ol { animation-duration: .55s; }
}


/* ==========================================================================
   PAGE LOAD ORCHESTRATION
   The first second of a page is choreographed: a gold sweep crosses the top,
   the header settles, its nav items cascade, and the hero resolves in order.
   Every animation uses `both` fill, so the end state is the visible state.
   ========================================================================== */

/* A single gold pass across the top edge as the page arrives. */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 70;
  pointer-events: none;
  transform-origin: left;
  background: linear-gradient(90deg, var(--blue-600), var(--blue-300) 40%, var(--gold-400));
  animation: loadSweep 1.15s var(--ease) both;
}
@keyframes loadSweep {
  0%   { transform: scaleX(0); opacity: 1; }
  62%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* Header settles down from above. */
@keyframes headerIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.site-header { animation: headerIn .7s var(--ease) both; }

/* Brand and nav items cascade left to right. */
@keyframes navItemIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.brand { animation: navItemIn .6s var(--ease) .12s both; }
.nav > a:nth-child(1)  { animation: navItemIn .5s var(--ease) .26s both; }
.nav > a:nth-child(2)  { animation: navItemIn .5s var(--ease) .31s both; }
.nav > a:nth-child(3)  { animation: navItemIn .5s var(--ease) .36s both; }
.nav > a:nth-child(4)  { animation: navItemIn .5s var(--ease) .41s both; }
.nav > a:nth-child(5)  { animation: navItemIn .5s var(--ease) .46s both; }
.nav > a:nth-child(6)  { animation: navItemIn .5s var(--ease) .51s both; }
.nav > a:nth-child(7)  { animation: navItemIn .5s var(--ease) .56s both; }
.nav > a:nth-child(8)  { animation: navItemIn .5s var(--ease) .61s both; }
.nav > a:nth-child(9)  { animation: navItemIn .5s var(--ease) .66s both; }
.nav > a:nth-child(10) { animation: navItemIn .55s var(--ease) .72s both; }
.nav-toggle { animation: navItemIn .5s var(--ease) .3s both; }

/* The hero background photograph settles rather than snapping in. */
@keyframes photoIn { from { opacity: 0; transform: scale(1.055); } to { opacity: 1; transform: none; } }
.hero-photo { animation: photoIn 1.5s var(--ease) both; }
.hero-scrim-a, .hero-scrim-b { animation: fadeOnly 1.2s ease .2s both; }
@keyframes fadeOnly { from { opacity: 0; } to { opacity: 1; } }

/* Inner-page hero grounds fade up under their content. Each needs its own
   keyframe: a generic fade to opacity 1 would override the low opacity these
   layers are designed to sit at. */
@keyframes canvasIn    { from { opacity: 0; } to { opacity: .75; } }
@keyframes watermarkIn { from { opacity: 0; } to { opacity: .07; } }

.page-hero > canvas,
.art-hero > canvas,
main > section:first-child > canvas { animation: canvasIn 1.6s ease .25s both; }
.page-hero .watermark { animation: watermarkIn 1.8s ease .4s both; }

/* Inline-styled hero content on the content pages: resolve in reading order. */
main > section:first-child > div > *:nth-child(1) { animation: riseIn .8s var(--ease) .1s both; }
main > section:first-child > div > *:nth-child(2) { animation: riseIn .85s var(--ease) .24s both; }
main > section:first-child > div > *:nth-child(3) { animation: riseIn .85s var(--ease) .38s both; }
main > section:first-child > div > *:nth-child(4) { animation: riseIn .85s var(--ease) .5s both; }

@media (prefers-reduced-motion: reduce) {
  body::before { display: none; }
  .site-header, .brand, .nav > a, .nav-toggle,
  .hero-photo, .hero-scrim-a, .hero-scrim-b,
  .page-hero > canvas, .art-hero > canvas, .page-hero .watermark,
  main > section:first-child > canvas,
  main > section:first-child > div > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ==========================================================================
   HERO MARK
   Every hero carries the emblem. Large, low-opacity, screen-blended so it
   reads as watermarked light on the navy ground rather than a pasted logo.
   ========================================================================== */

@keyframes markDrift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-16px) rotate(2.5deg); }
}
@keyframes markIn { from { opacity: 0; transform: scale(.9); } to { opacity: .085; transform: none; } }

.hero-mark {
  position: absolute;
  right: -110px;
  top: 50%;
  width: clamp(300px, 34vw, 520px);
  aspect-ratio: 1;
  margin-top: calc(clamp(300px, 34vw, 520px) / -2);
  object-fit: contain;
  pointer-events: none;
  z-index: 0;
  opacity: .085;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 60px rgba(127, 178, 238, .5));
  animation: markIn 1.4s var(--ease) .3s both, markDrift 16s ease-in-out 1.7s infinite;
}

/* A faint halo seats the mark in the gradient. */
.hero-mark-halo {
  position: absolute;
  right: -110px;
  top: 50%;
  width: clamp(300px, 34vw, 520px);
  aspect-ratio: 1;
  margin-top: calc(clamp(300px, 34vw, 520px) / -2);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle, rgba(127,178,238,.16), rgba(31,116,208,.05) 55%, transparent 72%);
  filter: blur(22px);
  animation: fadeOnly 1.8s ease .5s both;
}

@media (max-width: 860px) {
  .hero-mark, .hero-mark-halo { right: -22%; width: clamp(260px, 62vw, 420px); margin-top: calc(clamp(260px, 62vw, 420px) / -2); opacity: .06; }
}
@media (max-width: 560px) {
  .hero-mark, .hero-mark-halo { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-mark { animation: none !important; opacity: .085 !important; transform: none !important; }
  .hero-mark-halo { animation: none !important; }
}


/* ==========================================================================
   HOVER LAYER
   Every interactive element answers the cursor, and a few non-interactive
   ones acknowledge it. Transitions only — nothing here affects load state.
   ========================================================================== */

/* ---------- links in body copy: underline grows from the left ---------- */

.prose a,
main p a:not(.btn):not(.link-arrow),
main li a:not(.btn) {
  position: relative;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size .3s var(--ease), color .2s var(--ease);
}
main p a:not(.btn):not(.link-arrow):hover,
main li a:not(.btn):hover,
.prose a:hover { background-size: 100% 2px; color: var(--blue-700); }

/* ---------- back links: the arrow leads ---------- */

main a[href="publications.html"],
main a[href="news.html"],
main a[href="index.html"] { transition: color .2s var(--ease); }

/* ---------- header brand ---------- */

.brand { transition: opacity .25s var(--ease); }
.brand:hover { opacity: .86; }
.brand img { transition: transform .45s var(--ease), filter .45s var(--ease); }
.brand:hover img { transform: rotate(-8deg) scale(1.06); filter: drop-shadow(0 0 14px rgba(127,178,238,.55)); }

/* ---------- hamburger ---------- */

.nav-toggle { transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); }
.nav-toggle:hover { background: rgba(255,255,255,.08); border-color: rgba(233,200,119,.55); transform: scale(1.05); }

/* ---------- team roster cards ---------- */

[data-people] > div {
  transition: box-shadow .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
[data-people] > div:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 52px -26px rgba(10,30,66,.4);
  border-color: var(--line-hover) !important;
}
[data-people] > div > div:first-child img { transition: transform .7s var(--ease); }
[data-people] > div:hover > div:first-child img { transform: scale(1.05); }
/* the gold bar under each portrait grows */
[data-people] > div > div:first-child > div:last-child {
  transition: height .35s var(--ease), background .35s var(--ease);
}
[data-people] > div:hover > div:first-child > div:last-child { height: 8px !important; }

/* ---------- coalition desk cards ---------- */

[data-desks] > div { transition: background .3s var(--ease), transform .3s var(--ease); }
[data-desks] > div:hover { transform: translateY(-3px); }

/* ---------- publication and news cards ---------- */

[data-card] { transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
[data-card]:hover { border-color: var(--line-hover) !important; }
[data-card]:hover span[style*="Read"] { color: var(--blue-700); }

/* ---------- gallery tiles: a zoom affordance appears ---------- */

.gtile::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(6,15,34,.34), transparent 62%),
    linear-gradient(0deg, rgba(6,15,34,.28), transparent 55%);
  transition: opacity .35s var(--ease);
}
.gtile:hover::after { opacity: 1; }

.gtile .zoom {
  position: absolute;
  right: 12px; bottom: 12px;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.92);
  color: var(--navy-800);
  opacity: 0;
  transform: translateY(8px) scale(.9);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events: none;
  z-index: 2;
}
.gtile:hover .zoom { opacity: 1; transform: none; }

/* ---------- lightbox controls ---------- */

.lightbox button { transition: background .2s ease, transform .2s var(--ease), border-color .2s ease; }
.lightbox button:hover { transform: scale(1.08); border-color: rgba(233,200,119,.6); }
.lightbox button:active { transform: scale(.96); }

/* ---------- forms ---------- */

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--line-hover); }
.field > span { transition: color .2s var(--ease); }
.field:hover > span { color: var(--navy-800); }
.form-submit { transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .25s var(--ease); }
.form-submit:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -16px rgba(11,74,162,.7); }
.form-submit:active { transform: translateY(0) scale(.99); }

/* ---------- article stat strips ---------- */

.stat-strip div { transition: background .3s var(--ease), transform .3s var(--ease); }
.stat-strip div:hover { background: var(--blue-25); transform: translateY(-2px); }

/* ---------- callouts and pull quotes acknowledge the cursor ---------- */

.callout { transition: border-left-color .3s var(--ease), background .3s var(--ease); }
.callout:hover { border-left-color: var(--gold-400); background: #fff; }
.pull { transition: border-left-color .3s var(--ease), padding-left .3s var(--ease); }
.pull:hover { border-left-color: var(--gold-400); padding-left: 32px; }

/* ---------- podcast art ---------- */

.pod-art img { transition: filter .45s var(--ease); }
.pod-art:hover img { filter: drop-shadow(0 0 60px rgba(120,110,255,.85)); }

/* ---------- footer ---------- */

.footer-brand { transition: opacity .25s var(--ease); }
.footer-brand:hover { opacity: .85; }
.footer-brand img { transition: transform .45s var(--ease); }
.footer-brand:hover img { transform: rotate(-8deg) scale(1.05); }

/* ---------- honour the motion preference ---------- */

@media (prefers-reduced-motion: reduce) {
  *:hover { transition: none !important; }
  .brand:hover img, .footer-brand:hover img,
  [data-people] > div:hover, [data-card]:hover,
  .stat-strip div:hover, .form-submit:hover,
  .lightbox button:hover, .nav-toggle:hover { transform: none !important; }
}

/* Touch devices get no hover lift — it fires on tap and feels broken. */
@media (hover: none) {
  [data-people] > div:hover,
  [data-card]:hover,
  .card:hover,
  .tank:hover,
  .gtile:hover,
  .stat-strip div:hover,
  .btn:hover,
  .form-submit:hover { transform: none !important; box-shadow: none !important; }
  .gtile:hover::after { opacity: 0; }
  .gtile .zoom { display: none; }
}


/* ==========================================================================
   OUR TEAM — HOVER
   The roster is the page people linger on, so each card gets a richer
   response: the portrait warms and pushes in, a gold seam runs the join, the
   name shifts, and a light sweep crosses the panel once.
   ========================================================================== */

[data-people] > div {
  position: relative;
  isolation: isolate;
  transition:
    transform .45s var(--ease),
    box-shadow .45s var(--ease),
    border-color .45s var(--ease),
    background .45s var(--ease);
}

[data-people] > div:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 64px -30px rgba(10, 30, 66, .48);
  border-color: var(--line-hover) !important;
  background: #fff !important;
}

/* ---------- the portrait ---------- */

[data-people] > div > div:first-child {
  position: relative;
  overflow: hidden;
}

[data-people] > div > div:first-child img {
  transition: transform .8s var(--ease), filter .6s var(--ease);
  filter: saturate(.92) contrast(1.02);
}

[data-people] > div:hover > div:first-child img {
  transform: scale(1.07);
  filter: saturate(1.08) contrast(1.05);
}

/* A navy-to-clear veil lifts off the portrait on hover. */
[data-people] > div > div:first-child::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 15, 34, .26), rgba(6, 15, 34, .05) 55%, transparent);
  opacity: 1;
  transition: opacity .5s var(--ease);
}
[data-people] > div:hover > div:first-child::before { opacity: 0; }

/* A single diagonal glint crosses the portrait. */
@keyframes portraitGlint {
  from { transform: translateX(-120%) skewX(-18deg); }
  to   { transform: translateX(260%) skewX(-18deg); }
}
[data-people] > div > div:first-child::after {
  content: "";
  position: absolute;
  top: -30%; bottom: -30%;
  width: 40%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .34), transparent);
  transform: translateX(-120%) skewX(-18deg);
}
[data-people] > div:hover > div:first-child::after {
  opacity: 1;
  animation: portraitGlint 1.05s var(--ease);
}

/* The gold bar at the foot of the portrait grows into a seam. */
[data-people] > div > div:first-child > div:last-child {
  z-index: 3;
  transition: height .45s var(--ease), box-shadow .45s var(--ease);
}
[data-people] > div:hover > div:first-child > div:last-child {
  height: 9px !important;
  box-shadow: 0 0 22px 2px rgba(198, 160, 82, .55);
}

/* ---------- the panel ---------- */

/* A gold hairline traces the top edge of the whole card. */
[data-people] > div::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  z-index: 4;
  background: linear-gradient(90deg, var(--blue-500), var(--gold-500), rgba(198, 160, 82, 0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--ease);
  pointer-events: none;
}
[data-people] > div:hover::before { transform: scaleX(1); }

/* Name and role shift a little, as if the card leans toward the cursor. */
[data-people] > div > div:last-child > h2,
[data-people] > div > div:last-child > h3 {
  transition: transform .45s var(--ease), color .3s var(--ease);
}
[data-people] > div:hover > div:last-child > h2,
[data-people] > div:hover > div:last-child > h3 { transform: translateX(6px); }

[data-people] > div > div:last-child > div:first-of-type {
  transition: transform .45s var(--ease) .04s, color .3s var(--ease);
}
[data-people] > div:hover > div:last-child > div:first-of-type { transform: translateX(6px); }

/* The bio brightens from muted to full ink. */
[data-people] > div > div:last-child p {
  transition: color .35s var(--ease);
}
[data-people] > div:hover > div:last-child p { color: var(--ink-body) !important; }

/* ---------- reduced motion and touch ---------- */

@media (prefers-reduced-motion: reduce) {
  [data-people] > div:hover { transform: none !important; }
  [data-people] > div:hover > div:first-child img { transform: none !important; }
  [data-people] > div:hover > div:first-child::after { animation: none !important; opacity: 0 !important; }
  [data-people] > div:hover > div:last-child > h2,
  [data-people] > div:hover > div:last-child > h3,
  [data-people] > div:hover > div:last-child > div:first-of-type { transform: none !important; }
}

@media (hover: none) {
  [data-people] > div > div:first-child::before { opacity: .12; }
  [data-people] > div > div:first-child::after { display: none; }
  [data-people] > div::before { transform: scaleX(1); }
}


/* ==========================================================================
   SITEWIDE HOVER — INLINE-STYLED BLOCKS
   The content pages build their cards with inline styles and no classes, so
   these rules key off the inline values themselves. Every effect uses only
   transform, box-shadow, border-colour and background, which are safe on an
   element of unknown structure — no pseudo-elements are introduced where the
   positioning context is unknown.
   ========================================================================== */

/* ---------- bordered cards: About value tiles, Projects, article panels ---------- */

main [style*="border:1px solid #e6e9ef"],
main [style*="border:1px solid var(--line)"],
main [style*="border:1px solid #e6e9ef"] {
  transition:
    transform .35s var(--ease),
    box-shadow .35s var(--ease),
    border-color .35s var(--ease),
    background .35s var(--ease);
}

main [style*="border:1px solid #e6e9ef"]:hover,
main [style*="border:1px solid var(--line)"]:hover {
  transform: translateY(-5px);
  border-color: var(--line-hover) !important;
  box-shadow:
    0 24px 46px -24px rgba(10, 30, 66, .38),
    inset 0 2px 0 0 var(--gold-500);
  background: #fff !important;
}

/* Headings inside a hovered card shift toward the cursor. */
main [style*="border:1px solid #e6e9ef"] > div:first-child,
main [style*="border:1px solid var(--line)"] h3 {
  transition: transform .35s var(--ease), color .3s var(--ease);
}
main [style*="border:1px solid #e6e9ef"]:hover > div:first-child { transform: translateY(-2px); }

/* ---------- panels on the tinted ground ---------- */

main [style*="background:#f4f6f9"] {
  transition: background .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
main [style*="background:#f4f6f9"]:hover {
  background: #fff !important;
  box-shadow: 0 22px 44px -24px rgba(10, 30, 66, .3);
}

/* ---------- accent-bar blocks: callouts, numbered items, summaries ---------- */

main [style*="border-left:4px solid"] {
  transition: border-left-color .35s var(--ease), background .35s var(--ease), padding-left .35s var(--ease);
}
main [style*="border-left:4px solid"]:hover {
  border-left-color: var(--gold-400) !important;
  background: #fff !important;
}

/* ---------- big numerals: the 01–09 markers on Projects ---------- */

main [style*="font:800 44px"],
main [style*="font:800 40px"],
main [style*="font:800 38px"] {
  transition: color .35s var(--ease), transform .35s var(--ease);
}
main [style*="border:1px solid #e6e9ef"]:hover [style*="font:800 44px"],
main [style*="background:#f4f6f9"]:hover [style*="font:800 44px"] {
  color: var(--gold-500) !important;
  transform: scale(1.06);
}

/* ---------- outline icon tiles ---------- */

main [style*="border:1.5px solid #1f74d0"],
main [style*="border:1.5px solid var(--blue-500)"] {
  transition: border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
}
main [style*="border:1px solid #e6e9ef"]:hover [style*="border:1.5px solid #1f74d0"],
main [style*="background:#f4f6f9"]:hover [style*="border:1.5px solid #1f74d0"] {
  border-color: var(--gold-500) !important;
  background: rgba(198, 160, 82, .09) !important;
  transform: translateY(-2px) rotate(-4deg);
}

/* ---------- desk portraits on Projects ---------- */

[data-desks] > div {
  transition: background .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
[data-desks] > div:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 48px -26px rgba(10, 30, 66, .42);
  z-index: 2;
}
[data-desks] img { transition: transform .7s var(--ease), filter .5s var(--ease); }
[data-desks] > div:hover img { transform: scale(1.06); filter: saturate(1.1); }

/* ---------- inline lists: threat points, findings, recommendations ---------- */

main ul li, main ol li { transition: color .3s var(--ease), transform .3s var(--ease); }
main ul li:hover, main ol li:hover { color: var(--navy-800); transform: translateX(3px); }

/* ---------- contact blocks and footnotes ---------- */

.fn { transition: color .3s var(--ease), background .3s var(--ease); }
.fn:hover { color: var(--ink-body); }

/* ---------- headings answer the cursor with their rule ---------- */

.section > .shell h2::after,
.section-lg h2::after { transition: width .4s var(--ease); }
.section > .shell h2:hover::after,
.section-lg h2:hover::after { width: 96px; }

/* ---------- tinted stat and status rows ---------- */

main [style*="background:#eef4fb"],
main [style*="background:var(--blue-25)"] {
  transition: background .35s var(--ease);
}
main [style*="background:#eef4fb"]:hover { background: var(--blue-50) !important; }

/* ---------- reduced motion and touch ---------- */

@media (prefers-reduced-motion: reduce) {
  main [style*="border:1px solid #e6e9ef"]:hover,
  main [style*="border:1px solid var(--line)"]:hover,
  main [style*="background:#f4f6f9"]:hover,
  [data-desks] > div:hover,
  main ul li:hover, main ol li:hover { transform: none !important; }
  [data-desks] > div:hover img { transform: none !important; }
}

@media (hover: none) {
  main [style*="border:1px solid #e6e9ef"]:hover,
  main [style*="border:1px solid var(--line)"]:hover,
  main [style*="background:#f4f6f9"]:hover,
  [data-desks] > div:hover,
  main ul li:hover, main ol li:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}


/* ==========================================================================
   FEATURE ROWS — HOVER
   Contact, Join, Events and Partner list their features as an icon tile beside
   a block of text, with no card wrapper. :has() lets the whole row become the
   hover target, so the icon responds when the cursor is anywhere on the line.
   ========================================================================== */

main div:has(> [style*="border:1.5px solid #1f74d0"]) {
  border-radius: 12px;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
main div:has(> [style*="border:1.5px solid #1f74d0"]):hover {
  background: var(--gray-50);
  transform: translateX(4px);
}

/* The tile itself: gold, lifted, and slightly rotated. */
main [style*="border:1.5px solid #1f74d0"] {
  transition:
    border-color .35s var(--ease),
    background .35s var(--ease),
    transform .4s var(--ease),
    box-shadow .35s var(--ease);
}
main div:has(> [style*="border:1.5px solid #1f74d0"]):hover > [style*="border:1.5px solid #1f74d0"],
main [style*="border:1.5px solid #1f74d0"]:hover {
  border-color: var(--gold-500) !important;
  background: rgba(198, 160, 82, .1) !important;
  transform: translateY(-2px) rotate(-5deg) scale(1.05);
  box-shadow: 0 12px 26px -12px rgba(198, 160, 82, .6);
}

/* The icon stroke warms with it. */
main [style*="border:1.5px solid #1f74d0"] svg { transition: stroke .35s var(--ease); }
main div:has(> [style*="border:1.5px solid #1f74d0"]):hover [style*="border:1.5px solid #1f74d0"] svg,
main [style*="border:1.5px solid #1f74d0"]:hover svg { stroke: var(--gold-500); }

/* The row's own heading nudges forward. */
main div:has(> [style*="border:1.5px solid #1f74d0"]) > div > div:first-child {
  transition: color .3s var(--ease);
}
main div:has(> [style*="border:1.5px solid #1f74d0"]):hover > div > div:first-child {
  color: var(--blue-700);
}

/* ---------- the featured lead article on News ---------- */

[data-lead] > a {
  transition: box-shadow .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
[data-lead] > a:hover { transform: translateY(-4px); }
[data-lead] img { transition: transform .8s var(--ease); }
[data-lead] > a:hover img { transform: scale(1.05); }

/* ---------- publication category headers ---------- */

[data-cats] h2 { transition: color .3s var(--ease); }

/* ---------- reduced motion and touch ---------- */

@media (prefers-reduced-motion: reduce) {
  main div:has(> [style*="border:1.5px solid #1f74d0"]):hover,
  main [style*="border:1.5px solid #1f74d0"]:hover,
  [data-lead] > a:hover { transform: none !important; }
  [data-lead] > a:hover img { transform: none !important; }
}

@media (hover: none) {
  main div:has(> [style*="border:1.5px solid #1f74d0"]):hover,
  main [style*="border:1.5px solid #1f74d0"]:hover,
  [data-lead] > a:hover {
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}




/* ==========================================================================
   PUBLICATION CARD HEADERS
   Each card leads with an image from its own publication where one exists;
   otherwise a branded Global Peace for Israel header carrying the category
   and title. Photographs are cropped to fill; designed headers are shown
   whole, since their type must stay legible.
   ========================================================================== */

.pub-head {
  position: relative;
  overflow: hidden;
  background: var(--navy-800);
  isolation: isolate;
}

.pub-head img {
  width: 100%;
  display: block;
  transition: transform .7s var(--ease), filter .5s var(--ease);
}

/* Designed headers are 5:3 and must not be cropped — the title is in them. */
.pub-head--design { aspect-ratio: 5 / 3; }
.pub-head--design img { height: 100%; object-fit: contain; }

/* Photographs fill the same band, cropped from the top where faces sit. */
.pub-head--photo { aspect-ratio: 5 / 3; }
.pub-head--photo img { height: 100%; object-fit: cover; object-position: center 28%; }

/* A hairline of brand colour seats the header against the card body. */
.pub-head::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(127,178,238,.5) 30%, rgba(233,200,119,.85) 70%, transparent);
  opacity: .85;
  transition: opacity .35s var(--ease);
}

[data-card]:hover .pub-head img { transform: scale(1.045); filter: saturate(1.06); }
[data-card]:hover .pub-head::after { opacity: 1; }

/* Entrance: the header resolves from a slight scale as the card arrives. */
@keyframes headIn { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
.pub-head img { animation: headIn 1s var(--ease) both; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pub-head img {
      animation-timeline: view();
      animation-range: entry 2% cover 26%;
      animation-delay: 0s;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .pub-head img { animation: none !important; opacity: 1 !important; transform: none !important; }
  [data-card]:hover .pub-head img { transform: none !important; }
}


/* ==========================================================================
   PUBLICATIONS — CATEGORY JUMP NAV
   Replaces a vestigial legend bar. Ten publications across five categories is
   more than one screen, so the taxonomy doubles as navigation.
   ========================================================================== */

.cat-bar{
  position:sticky; top:74px; z-index:40;
  background:rgba(244,246,249,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  padding:0 32px;
}
.cat-bar-inner{
  max-width:1120px; margin:0 auto;
  display:flex; align-items:center; gap:18px;
  padding:13px 0; flex-wrap:wrap;
}
.cat-bar-label{
  font:700 10.5px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint); flex:0 0 auto;
}
.cat-bar ul{
  display:flex; gap:8px; flex-wrap:wrap;
  list-style:none; margin:0; padding:0;
}
.cat-bar a{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border-radius:99px;
  border:1px solid transparent;
  background:#fff;
  font:600 12.5px/1 var(--sans); color:var(--ink-soft);
  white-space:nowrap;
  transition:color .2s var(--ease), border-color .2s var(--ease),
             background .2s var(--ease), transform .2s var(--ease),
             box-shadow .2s var(--ease);
}
.cat-bar a b{
  font:700 10.5px/1 var(--sans);
  color:var(--ink-lightest);
  background:var(--gray-100);
  border-radius:4px; padding:3px 6px;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.cat-bar a:hover{
  color:var(--blue-700);
  border-color:var(--line-hover);
  transform:translateY(-1px);
  box-shadow:0 8px 18px -10px rgba(10,30,66,.3);
}
.cat-bar a:hover b{ background:var(--blue-50); color:var(--blue-600); }

/* The section the reader has jumped to announces itself briefly. */
@keyframes catFlash{
  from{ box-shadow:inset 3px 0 0 0 var(--gold-500); }
  to  { box-shadow:inset 3px 0 0 0 rgba(198,160,82,0); }
}
[data-cat-sec]:target{ animation:catFlash 2.4s ease .2s both; padding-left:18px; margin-left:-18px; }

/* Anchor offset so a jumped-to heading clears both sticky bars. */
[data-cat-sec]{ scroll-margin-top:148px; }

/* ---------- compact empty state ---------- */

.cat-empty{
  display:flex; align-items:center; gap:10px;
  margin:0; padding:16px 20px;
  border:1px dashed #dbe1ea; border-radius:11px;
  background:var(--gray-50);
  font:500 14px/1.5 var(--sans); color:var(--ink-faint);
}
.cat-empty svg{ flex:0 0 auto; color:var(--ink-lightest); }

@media (max-width:760px){
  .cat-bar{ top:70px; padding:0 22px; }
  .cat-bar-inner{ padding:11px 0; gap:12px; }
  .cat-bar-label{ display:none; }
  .cat-bar a{ padding:7px 12px; font-size:12px; }
  [data-cat-sec]{ scroll-margin-top:132px; }
}
@media (prefers-reduced-motion:reduce){
  .cat-bar a:hover{ transform:none; }
  [data-cat-sec]:target{ animation:none; }
}


/* ==========================================================================
   BUTTON STATES
   Disabled, focus and loading states so every action behaves predictably.
   ========================================================================== */

.btn[aria-disabled="true"],
.btn:disabled,
.btn-donate[aria-disabled="true"]{
  opacity:.55; cursor:not-allowed; transform:none!important; box-shadow:none!important;
}
.btn[aria-disabled="true"]::after,
.btn:disabled::after{ display:none; }

/* Focus rings read on both light and dark grounds. */
.btn:focus-visible,
.btn-donate:focus-visible,
.form-submit:focus-visible,
.cat-bar a:focus-visible,
.link-arrow:focus-visible{
  outline:3px solid var(--blue-500);
  outline-offset:3px;
}
.btn-gold:focus-visible,
.btn-donate:focus-visible,
.btn-outline:focus-visible{
  outline-color:var(--gold-400);
}

/* The submit button while a form is in flight. */
.form-submit[disabled]{
  opacity:.62; cursor:progress; transform:none!important; box-shadow:none!important;
}

/* Hit targets: never below 44px on touch. */
@media (hover:none){
  .btn, .btn-donate, .form-submit{ min-height:46px; }
  .nav-mobile a{ min-height:44px; display:flex; align-items:center; }
  .cat-bar a{ min-height:38px; }
}


/* ==========================================================================
   PORTRAIT FRAMES
   The roster photographs arrive in ratios from 0.80 (landscape) to 1.48
   (tall portrait). Any single fixed frame therefore crops some of them
   badly — at mobile widths the tall portraits were losing up to 39% of
   their height, cutting people off.

   Each portrait now sits CONTAINED inside its frame, over a blurred,
   over-scaled copy of itself. Nothing is ever cropped at any width or any
   source ratio, and the frame still reads as a filled panel rather than a
   letterboxed image.
   ========================================================================== */

.pf {
  position: relative;
  overflow: hidden;
  background: #dbe4f0;
  isolation: isolate;
  /* The frame is pinned to its own ratio and aligned to the top of the card.
     Previously it stretched to the card's full height, which is driven by bio
     length — Dr. Jacobs' 700px+ frame left a square portrait floating in a
     field of blur. */
  align-self: flex-start;
  aspect-ratio: 4 / 5;
  min-height: 0 !important;
  height: auto !important;
}

.pf-bg {
  position: absolute;
  inset: -12%;
  z-index: 0;
  background-size: cover;
  background-position: center 28%;
  filter: blur(22px) saturate(1.15) brightness(.92);
  transform: scale(1.04);
  transition: transform 1s var(--ease), filter .6s var(--ease);
}

/* A soft wash keeps the blurred ground from competing with the portrait. */
.pf::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 30, 66, .1), rgba(10, 30, 66, .22));
}

.pf-art {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: transform .7s var(--ease);
}

/* Hover: the whole portrait pushes in, the ground drifts behind it. */
[data-people] > div:hover .pf-art { transform: scale(1.04); }
[data-people] > div:hover .pf-bg { transform: scale(1.12); filter: blur(18px) saturate(1.3) brightness(.96); }

/* The gold seam at the foot of the portrait stays on top. */
.pf > div:last-child { position: relative; z-index: 3; }

/* ---------- mobile ----------
   Stacked cards get a 4:3 frame, which comfortably fits both the landscape
   and the tall portraits without a fixed pixel height. */

/* Stacked: the frame keeps its 4:5 ratio and spans the card. A wider frame
   would shrink the tall portraits to a third of the panel. */
@media (max-width: 860px) {
  [data-people] > div > .pf {
    flex: 0 0 auto !important;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
  }
}

/* ---------- home preview cards ---------- */

.person-card { isolation: isolate; }
.person-card .pf-bg { position: absolute; inset: -12%; z-index: 0; }
.person-card .pf-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center 40%;
}
.person-card .veil { z-index: 2; }
.person-card .meta { z-index: 3; }
.person-card:hover .pf-art { transform: scale(1.04); }
.person-card:hover .pf-bg { transform: scale(1.12); }

@media (prefers-reduced-motion: reduce) {
  .pf-art, .pf-bg,
  [data-people] > div:hover .pf-art,
  [data-people] > div:hover .pf-bg,
  .person-card:hover .pf-art,
  .person-card:hover .pf-bg { transform: none !important; }
}