:root{
    --ink:#15110f;
    --ink-soft:#403a36;
    --paper:#fbf9f6;
    --paper-2:#f3efe9;
    --line:#e2dcd3;
    --line-strong:#cfc7ba;
    --crimson:#9b1b22;
    --crimson-deep:#7e151b;
    --gold:#c9a962;
    --gold-deep:#a8863f;
    --white:#ffffff;
    --shadow-sm:0 1px 2px rgba(20,15,12,.05), 0 8px 24px rgba(20,15,12,.06);
    --shadow-md:0 2px 6px rgba(20,15,12,.07), 0 24px 60px rgba(20,15,12,.10);
    --serif:'Fraunces', Georgia, 'Times New Roman', serif;
    --sans:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    --maxw:1460px;
    --ease:cubic-bezier(.2,.7,.2,1);
    --ease-mono:cubic-bezier(.16,1,.3,1);
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth;scroll-padding-top:84px}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    font-size:17px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  img{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}
  h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1.08;text-wrap:balance}

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

  /* ---------- Kicker / labels ---------- */
  .kicker{
    font-family:var(--sans);
    font-size:12px;
    font-weight:600;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--crimson);
    display:inline-flex;
    align-items:center;
    gap:12px;
  }
  .kicker::before{
    content:"";
    width:34px;height:1px;background:var(--crimson);
    display:inline-block;
  }
  .kicker.center::before{display:none}
  .eyebrow{
    font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);
  }

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:.04em;
    padding:15px 28px;border-radius:2px;border:1px solid transparent;
    cursor:pointer;transition:all .35s var(--ease);text-transform:uppercase;
  }
  .btn .arr{transition:transform .35s var(--ease)}
  .btn:hover .arr{transform:translateX(5px)}
  .btn-primary{background:var(--crimson);color:#fff;border-color:var(--crimson)}
  .btn-primary:hover{background:var(--crimson-deep);border-color:var(--crimson-deep);box-shadow:0 12px 30px rgba(155,27,34,.28)}
  .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
  .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
  .btn-dark{background:var(--ink);color:#fff;border-color:var(--ink)}
  .btn-dark:hover{background:#000;box-shadow:var(--shadow-sm)}
  .btn-outline{background:transparent;color:var(--ink);border-color:var(--line-strong)}
  .btn-outline:hover{border-color:var(--ink);background:var(--ink);color:#fff}

  .textlink{
    font-size:13.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
    color:var(--crimson);display:inline-flex;align-items:center;gap:9px;
    border-bottom:1px solid transparent;padding-bottom:2px;transition:.3s var(--ease);
  }
  .textlink .arr{transition:transform .3s var(--ease)}
  .textlink:hover{border-color:var(--crimson)}
  .textlink:hover .arr{transform:translateX(4px)}

  :focus-visible{outline:2px solid var(--crimson);outline-offset:3px;border-radius:2px}
  /* A crimson ring disappears on dark heroes and on crimson buttons — go white */
  .hero :focus-visible,.page-hero :focus-visible,.home-hero :focus-visible,.btn-primary:focus-visible{outline-color:#fff}

  /* ---------- Nav ---------- */
  header.nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    transition:background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
    border-bottom:1px solid transparent;
  }
  header.nav .nav-inner{
    max-width:var(--maxw);margin:0 auto;padding:20px 28px;
    display:flex;align-items:center;justify-content:space-between;gap:24px;
    transition:padding .4s var(--ease);
  }
  .brand{display:flex;align-items:center;gap:13px;flex-shrink:0;color:#fff;transition:color .4s var(--ease)}
  .brand .mark{
    font-family:var(--serif);font-size:25px;font-weight:500;letter-spacing:-.02em;line-height:1;
  }
  .brand .mark .amp{color:var(--crimson);font-style:italic}
  .navlinks{display:flex;align-items:center;gap:30px}
  .navlinks a{
    font-size:13.5px;font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.88);
    transition:color .3s var(--ease);position:relative;padding:4px 0;
  }
  .navlinks a::after{
    content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:currentColor;transition:width .3s var(--ease);
  }
  .navlinks a:hover::after{width:100%}
  .nav-cta{
    font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
    color:#fff;border:1px solid rgba(255,255,255,.55);padding:11px 20px;border-radius:2px;
    transition:.35s var(--ease);
  }
  .nav-cta:hover{background:#fff;color:var(--ink);border-color:#fff}

  /* scrolled state */
  header.nav.scrolled{
    background:rgba(251,249,246,.86);
    backdrop-filter:saturate(180%) blur(14px);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    border-bottom-color:var(--line);
    box-shadow:0 2px 24px rgba(20,15,12,.05);
  }
  header.nav.scrolled .nav-inner{padding:14px 28px}
  header.nav.scrolled .brand{color:var(--ink)}
  header.nav.scrolled .navlinks a{color:var(--ink-soft)}
  header.nav.scrolled .navlinks a:hover{color:var(--crimson)}
  header.nav.scrolled .nav-cta{color:var(--crimson);border-color:var(--line-strong)}
  header.nav.scrolled .nav-cta:hover{background:var(--crimson);color:#fff;border-color:var(--crimson)}
  header.nav.scrolled .burger span{background:var(--ink)}

  .burger{display:none;background:none;border:0;cursor:pointer;width:34px;height:26px;position:relative;padding:0;flex:0 0 auto}
  /* 44x44 tap target without enlarging the visible icon */
  .burger::before{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
  .burger span{position:absolute;left:0;right:0;height:2px;background:#fff;transition:.3s var(--ease)}
  .burger span:nth-child(1){top:3px}
  .burger span:nth-child(2){top:12px}
  .burger span:nth-child(3){top:21px}

  /* mobile menu */
  .mobile-menu{
    position:fixed;inset:0;z-index:99;background:var(--paper);
    transform:translateY(-100%);transition:transform .5s var(--ease);
    display:flex;flex-direction:column;justify-content:flex-start;
    padding:88px 32px calc(32px + env(safe-area-inset-bottom));
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    visibility:hidden;
  }
  .mobile-menu.open{transform:translateY(0);visibility:visible}
  /* Compact the items on short viewports so all links + the CTA fit; overflow
     still scrolls if needed so nothing is ever unreachable. */
  .mobile-menu a{
    font-family:var(--serif);font-size:30px;color:var(--ink);padding:11px 0;border-bottom:1px solid var(--line);
  }
  .mobile-menu a:last-of-type{border-bottom:0}
  .mobile-menu a.btn-primary{color:#fff}
  .mobile-menu a.btn-primary:hover{color:#fff}
  .mobile-menu .btn{margin-top:24px;align-self:flex-start}
  /* Compact the items on short viewports so all links + the CTA fit; overflow
     still scrolls if needed so nothing is ever unreachable. */
  @media (max-height:720px){
    .mobile-menu{padding-top:76px}
    .mobile-menu a{font-size:24px;padding:9px 0}
    .mobile-menu .brand-logo{margin-bottom:4px}
    .mobile-menu .btn{margin-top:16px}
  }

  /* Menu open at the top of the page: the fixed header sits over the cream
     panel, but its controls are white there. Force them to ink so the close
     control stays visible, hide the duplicate ghost logo/search, and morph the
     burger into an X. */
  body.menu-open header.nav .brand-logo{visibility:hidden}
  body.menu-open header.nav .nav-search{visibility:hidden;pointer-events:none}
  body.menu-open header.nav .burger span{background:var(--ink)}
  body.menu-open .burger span:nth-child(1){transform:translateY(9px) rotate(45deg)}
  body.menu-open .burger span:nth-child(2){opacity:0}
  body.menu-open .burger span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

  /* ---------- Hero ---------- */
  .hero{
    position:relative;min-height:100vh;display:flex;align-items:flex-end;
    color:#fff;overflow:hidden;
  }
  .hero-bg{position:absolute;inset:0;z-index:0}
  .hero-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:heroZoom 18s ease-out forwards}
  /* Hero photos fill their (clipped) container; cap the layout box at 100% so a
     stray intrinsic width can never spill past the viewport into a horizontal
     scroll. Covers every hero variant (home/page/ph/gx/sg heroes are defined in
     per-page inline sheets that set width but not max-width, so this holds). */
  .hero-bg img,.home-hero-bg img,.page-hero-bg img,.ph-bg img,.gx-hero-bg img,.sg-hero-bg img,.sg-hero img{max-width:100%}
  @keyframes heroZoom{to{transform:scale(1)}}
  .hero-bg::after{
    content:"";position:absolute;inset:0;
    background:
      linear-gradient(180deg, rgba(15,11,9,.55) 0%, rgba(15,11,9,.10) 30%, rgba(15,11,9,.25) 62%, rgba(12,8,6,.92) 100%),
      linear-gradient(90deg, rgba(12,8,6,.62) 0%, rgba(12,8,6,.12) 55%, rgba(12,8,6,0) 100%);
  }
  .hero-inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px 88px}
  .hero-content{max-width:880px}
  .hero h1{
    font-size:clamp(2.7rem, 6.2vw, 5.4rem);
    font-weight:400;letter-spacing:-.02em;line-height:1.02;margin:22px 0 26px;
    text-wrap:balance;
  }
  .hero h1 em{font-style:italic;color:#fff}
  .hero .sub{
    font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.6;color:rgba(255,255,255,.9);
    max-width:640px;font-weight:300;
  }
  .hero-cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:38px}
  .hero .kicker{color:#fff}
  .hero .kicker::before{background:var(--crimson);width:42px}

  .scroll-hint{
    position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:3;
    display:flex;flex-direction:column;align-items:center;gap:9px;color:rgba(255,255,255,.7);
    font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
  }
  .scroll-hint .dot{width:1px;height:46px;background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0));animation:scrollPulse 2.4s var(--ease) infinite}
  @keyframes scrollPulse{0%{transform:scaleY(.2);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.2);transform-origin:bottom;opacity:.4}}

  /* ---------- Marquee / trust ---------- */
  .trust{
    background:var(--ink);color:#fff;padding:22px 0;overflow:hidden;
  }
  .trust .wrap{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;text-align:center}
  .trust p{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,2vw,1.45rem);font-weight:300;color:rgba(255,255,255,.92)}
  .trust .star{color:var(--crimson);font-style:normal}

  /* ---------- Section scaffolding ---------- */
  section{position:relative}
  .pad{padding:164px 0}
  .pad-sm{padding:110px 0}
  .sec-head{max-width:760px}
  .sec-head h2{
    font-size:clamp(2rem,3.8vw,3.2rem);line-height:1.05;margin:18px 0 0;letter-spacing:-.02em;
  }
  .sec-head h2 em{font-style:italic;color:var(--crimson)}
  .sec-head .lead{margin-top:22px;font-size:1.12rem;color:var(--ink-soft);font-weight:300;line-height:1.7;max-width:620px}
  .center{text-align:center}
  .center .sec-head{margin:0 auto}
  .center .kicker{justify-content:center}

  .hr{height:1px;background:var(--line);border:0;margin:0}

  /* ---------- Story / pull-quote module (mx-story) ----------
     Reusable human-voice module. Hairline white card by default, or a soft
     paper-2 band with .mx-story--band. Optional round photo slot. Example-tagged
     placeholders use .mx-story-tag. Used on index, accelerator, donate, about. */
  .mx-story{
    display:flex;gap:32px;align-items:flex-start;
    background:var(--white);border:1px solid var(--line);border-radius:4px;
    padding:42px 46px 40px;position:relative;box-shadow:var(--shadow-sm);overflow:hidden;
  }
  .mx-story--band{background:var(--paper-2);box-shadow:none;border-color:var(--line)}
  .mx-story::before{
    content:"\201C";position:absolute;top:-6px;left:26px;
    font-family:var(--serif);font-size:6rem;line-height:1;color:var(--crimson);
    opacity:.13;pointer-events:none;
  }
  .mx-story-photo{
    width:78px;height:78px;border-radius:50%;object-fit:cover;flex:none;
    border:1px solid var(--line-strong);margin-top:4px;
  }
  .mx-story-photo.ph{
    display:flex;align-items:center;justify-content:center;
    background:var(--paper-2);color:var(--line-strong);
    font-family:var(--serif);font-size:1.9rem;font-style:italic;
  }
  .mx-story-body{min-width:0;position:relative;z-index:1}
  .mx-story-tag{
    display:inline-block;font-family:var(--sans);font-size:10px;font-weight:700;
    letter-spacing:.2em;text-transform:uppercase;color:var(--crimson);
    border:1px solid rgba(155,27,34,.32);border-radius:999px;
    padding:3px 11px;margin-bottom:16px;
  }
  .mx-story-q{
    font-family:var(--serif);font-style:italic;font-weight:400;
    font-size:clamp(1.25rem,2.1vw,1.7rem);line-height:1.44;color:var(--ink);
    letter-spacing:-.01em;margin:0;
  }
  .mx-story-attr{
    margin-top:22px;display:flex;flex-wrap:wrap;align-items:baseline;
    gap:4px 10px;font-size:14px;line-height:1.5;
  }
  .mx-story-attr .nm{font-weight:600;color:var(--ink);letter-spacing:.01em}
  .mx-story-attr .ctx{color:var(--ink-soft);font-weight:300}

  /* slim inline giving band that follows a story on a program page */
  .mx-give-band{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
    gap:18px 28px;background:var(--ink);color:#fff;border-radius:4px;
    padding:22px 32px;margin-top:22px;
  }
  .mx-give-band p{
    margin:0;font-family:var(--serif);font-style:italic;font-weight:300;
    font-size:1.15rem;line-height:1.4;color:#fff;max-width:52ch;
  }
  .mx-give-band .btn{flex:none}
  @media(max-width:760px){
    .mx-story{flex-direction:column;gap:22px;padding:32px 26px 30px}
    .mx-story::before{font-size:4.6rem;left:18px}
    .mx-give-band{padding:22px 24px}
    .mx-give-band p{font-size:1.05rem}
  }

  /* ---------- Mission split ---------- */
  .mission{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .mission .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:center}
  .mission .copy h2{font-size:clamp(1.9rem,3.4vw,2.9rem);margin-top:18px}
  .mission .copy p{color:var(--ink-soft);font-weight:300;font-size:1.1rem;margin:22px 0 0}
  .mission .copy .big{font-family:var(--serif);font-size:1.5rem;line-height:1.45;color:var(--ink);font-weight:400;margin-top:24px}
  .mission .copy .big em{font-style:italic;color:var(--crimson)}
  .mission-figure{position:relative}
  .mission-figure img{width:100%;height:560px;object-fit:cover;border-radius:3px;box-shadow:var(--shadow-md)}
  .mission-figure .tag{
    position:absolute;left:-26px;bottom:42px;background:var(--paper);border:1px solid var(--line);
    padding:22px 26px;border-radius:3px;box-shadow:var(--shadow-sm);max-width:240px;
  }
  .mission-figure .tag .num{font-family:var(--serif);font-size:2.6rem;color:var(--crimson);line-height:1}
  .mission-figure .tag .lbl{font-size:13px;color:var(--ink-soft);margin-top:6px}

  /* ---------- Programs ---------- */
  .programs{background:var(--paper)}
  .prog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:60px}
  .prog-card{
    background:var(--white);border:1px solid var(--line);border-radius:3px;padding:36px 30px 32px;
    display:flex;flex-direction:column;min-height:330px;
    transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
    position:relative;overflow:hidden;
  }
  .prog-card::before{
    content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--crimson);transition:width .45s var(--ease);
  }
  .prog-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}
  .prog-card:hover::before{width:100%}
  .prog-card .idx{font-family:var(--serif);font-size:14px;color:var(--crimson);letter-spacing:.05em}
  .prog-card .new{
    display:inline-block;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    color:#fff;background:var(--crimson);padding:4px 9px;border-radius:2px;margin-left:8px;vertical-align:middle;
  }
  .prog-card h3{font-size:1.5rem;margin:18px 0 0;line-height:1.12}
  .prog-card p{font-size:.97rem;color:var(--ink-soft);font-weight:300;margin:14px 0 0;flex:1}
  .prog-card .more{margin-top:22px;font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--crimson);display:inline-flex;align-items:center;gap:8px}
  .prog-card .more .arr{transition:transform .3s var(--ease)}
  .prog-card:hover .more .arr{transform:translateX(5px)}

  /* ---------- Events ---------- */
  .events{background:var(--ink);color:#fff}
  .events .sec-head h2{color:#fff}
  .events .sec-head h2 em{color:#e8a4a8}
  .events .kicker{color:#e8a4a8}
  .events .kicker::before{background:#e8a4a8}
  .events .lead{color:rgba(255,255,255,.72)}
  .ev-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:60px}
  .ev-card{
    position:relative;border-radius:4px;overflow:hidden;min-height:480px;display:flex;align-items:flex-end;
    border:1px solid rgba(255,255,255,.12);
  }
  .ev-card .ev-img{position:absolute;inset:0;z-index:0}
  .ev-card .ev-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
  .ev-card:hover .ev-img img{transform:scale(1.07)}
  .ev-card .ev-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,7,5,.15) 0%,rgba(10,7,5,.35) 45%,rgba(8,5,4,.93) 100%)}
  .ev-card .ev-body{position:relative;z-index:2;padding:40px 38px 38px;width:100%}
  .ev-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.82)}
  .ev-meta .pill{border:1px solid rgba(255,255,255,.4);padding:5px 12px;border-radius:40px}
  .ev-meta .pill.accent{background:var(--crimson);border-color:var(--crimson);color:#fff}
  .ev-card h3{font-size:2.05rem;margin:20px 0 0;color:#fff;line-height:1.06}
  .ev-card p{color:rgba(255,255,255,.82);font-weight:300;margin:14px 0 26px;max-width:430px}
  .ev-date{font-family:var(--serif);font-style:italic;font-size:1.15rem;color:#fff;margin-bottom:4px}
  .ev-date .ex{font-style:normal;font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#e8a4a8;border:1px solid rgba(232,164,168,.5);padding:3px 7px;border-radius:3px;margin-left:8px;vertical-align:middle}

  /* ---------- Stats ---------- */
  .stats{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:54px}
  .stat{padding:14px 28px;text-align:center;border-left:1px solid var(--line)}
  .stat:first-child{border-left:0}
  .stat .n{font-family:var(--serif);font-size:clamp(3rem,5vw,4.4rem);font-weight:400;color:var(--ink);line-height:1;letter-spacing:-.02em}
  .stat .n .suf{color:var(--crimson)}
  .stat .lbl{margin-top:14px;font-size:.92rem;color:var(--ink-soft);font-weight:400;letter-spacing:.01em}

  /* ---------- Speakers ---------- */
  .speakers{background:var(--paper)}
  .sp-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;margin-top:58px}
  .sp-card{position:relative}
  .sp-photo{position:relative;overflow:hidden;border-radius:3px;aspect-ratio:3/4;background:var(--paper-2);box-shadow:var(--shadow-sm)}
  .sp-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(.12) contrast(1.02);transition:transform .9s var(--ease), filter .6s var(--ease)}
  .sp-card:hover .sp-photo img{transform:scale(1.06);filter:grayscale(0) contrast(1.04)}
  .sp-photo .nobel{
    position:absolute;top:14px;left:14px;z-index:2;
    background:var(--crimson);color:#fff;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    padding:6px 11px;border-radius:2px;display:flex;align-items:center;gap:6px;box-shadow:0 6px 18px rgba(155,27,34,.4);
  }
  .sp-photo .nobel svg{width:11px;height:11px}
  .sp-meta{margin-top:16px}
  .sp-meta .nm{font-family:var(--serif);font-size:1.18rem;line-height:1.15}
  .sp-meta .ti{font-size:.86rem;color:var(--ink-soft);margin-top:5px;letter-spacing:.01em}
  .sp-meta .ti.gold{color:var(--crimson);font-weight:500}

  /* ---------- Gallery ---------- */
  .gallery{background:var(--white);border-top:1px solid var(--line)}
  .gal-grid{
    display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:200px;gap:16px;margin-top:54px;
  }
  .gal-item{position:relative;overflow:hidden;border-radius:3px;background:var(--paper-2)}
  .gal-item img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
  .gal-item:hover img{transform:scale(1.09)}
  .gal-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,7,5,.35));opacity:0;transition:opacity .5s var(--ease)}
  .gal-item:hover::after{opacity:1}
  .gal-a{grid-column:span 3;grid-row:span 2}
  .gal-b{grid-column:span 3;grid-row:span 1}
  .gal-c{grid-column:span 3;grid-row:span 1}

  /* ---------- Partners ---------- */
  .partners{background:var(--paper)}
  .logo-wall{
    display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:52px;
    border-top:1px solid var(--line);border-left:1px solid var(--line);
  }
  .logo-cell{
    border-right:1px solid var(--line);border-bottom:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;text-align:center;
    padding:42px 24px;min-height:118px;transition:background .4s var(--ease);
  }
  .logo-cell:hover{background:var(--white)}
  .logo-cell span{
    font-family:var(--serif);font-size:1.18rem;color:var(--ink-soft);letter-spacing:-.01em;line-height:1.2;
    transition:color .4s var(--ease);
  }
  .logo-cell:hover span{color:var(--ink)}

  /* ---------- Forum CTA band ---------- */
  .forum{
    background:linear-gradient(135deg, var(--crimson-deep), var(--crimson));color:#fff;
    position:relative;overflow:hidden;
  }
  .forum::before{
    content:"";position:absolute;inset:0;opacity:.16;
    background:radial-gradient(120% 120% at 85% 10%, rgba(255,255,255,.5), transparent 45%);
  }
  .forum .grid{display:grid;grid-template-columns:1.3fr .7fr;gap:60px;align-items:center;position:relative;z-index:2}
  .forum h2{font-size:clamp(2rem,3.6vw,3rem);color:#fff;line-height:1.06}
  .forum h2 em{font-style:italic}
  .forum p{color:rgba(255,255,255,.86);font-weight:300;margin:20px 0 0;font-size:1.1rem;max-width:520px}
  .forum .kicker{color:#fff}
  .forum .kicker::before{background:rgba(255,255,255,.7)}
  .forum .act{display:flex;justify-content:flex-end}
  .btn-light{background:#fff;color:var(--crimson-deep);border-color:#fff}
  .btn-light:hover{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 14px 36px rgba(0,0,0,.25)}

  /* ---------- Leadership ---------- */
  .lead-sec{background:var(--white);border-top:1px solid var(--line)}
  .lead-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:58px}
  .lead-card{
    background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:38px 34px;
    transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  }
  .lead-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-sm)}
  .lead-card .ini{
    width:64px;height:64px;border-radius:50%;background:var(--white);border:1px solid var(--line-strong);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--serif);font-size:1.4rem;color:var(--crimson);margin-bottom:22px;
  }
  .lead-card .nm{font-family:var(--serif);font-size:1.45rem;line-height:1.12}
  .lead-card .role{margin-top:9px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--crimson)}
  .lead-card .aff{margin-top:8px;font-size:.95rem;color:var(--ink-soft);font-weight:300}

  /* ---------- Support band ---------- */
  .support{background:var(--ink);color:#fff;text-align:center}
  .support h2{font-size:clamp(2rem,4vw,3.3rem);color:#fff;max-width:840px;margin:18px auto 0;line-height:1.1}
  .support h2 em{font-style:italic;color:#e8a4a8}
  .support p{color:rgba(255,255,255,.74);font-weight:300;max-width:560px;margin:22px auto 0;font-size:1.1rem}
  .support .kicker{color:#e8a4a8;justify-content:center}
  .support .kicker::before{display:none}
  .support .act{margin-top:36px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

  /* ---------- Footer ---------- */
  footer{background:#100c0a;color:rgba(255,255,255,.7);padding:54px 0 30px}
  .foot-grid{display:grid;grid-template-columns:1.7fr .85fr .85fr 1fr 1.15fr;gap:40px}
  /* Let footer columns shrink to their track: without this the newsletter
     column's min-content (the wide translated "PRETPLATITE SE" subscribe
     button) forced the grid item past the track and pushed a ~2px horizontal
     scroll on narrow HR pages. The form keeps its own overflow:hidden. */
  .foot-grid > *{min-width:0}
  .foot-brand .mark{font-family:var(--serif);font-size:1.9rem;color:#fff;letter-spacing:-.02em}
  .foot-brand .mark .amp{color:var(--crimson);font-style:italic}
  .foot-brand .foot-logo{height:30px;width:auto;filter:brightness(0) invert(1);transform-origin:center}
  .foot-brand p{margin:18px 0 0;font-weight:300;font-size:.95rem;line-height:1.7;max-width:320px}
  .foot-col h4{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:18px}
  .foot-col a, .foot-col p{display:block;font-size:.95rem;color:rgba(255,255,255,.72);font-weight:300;margin-bottom:11px;transition:color .3s var(--ease)}
  .foot-col a:hover{color:#fff}
  .news p{margin:0 0 14px;font-size:.95rem;color:rgba(255,255,255,.72);font-weight:300}
  .news form{display:flex;border:1px solid rgba(255,255,255,.2);border-radius:3px;overflow:hidden;max-width:340px;transition:border-color .3s var(--ease)}
  .news form:focus-within{border-color:rgba(255,255,255,.5)}
  .news input{flex:1;background:transparent;border:0;color:#fff;padding:13px 15px;font-size:16px;font-family:var(--sans);outline:none}
  .news input::placeholder{color:rgba(255,255,255,.4)}
  .news button{background:var(--crimson);border:0;color:#fff;padding:0 20px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background .3s var(--ease)}
  .news button:hover{background:var(--crimson-deep)}
  .news .hint{margin-top:10px;font-size:.8rem;color:rgba(255,255,255,.45)}
  .socials{display:flex;gap:12px;margin-top:22px}
  .socials a{width:40px;height:40px;border:1px solid rgba(255,255,255,.18);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.3s var(--ease)}
  .socials a:hover{background:var(--crimson);border-color:var(--crimson)}
  .socials svg{width:16px;height:16px;fill:rgba(255,255,255,.8)}
  .socials a:hover svg{fill:#fff}
  .foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);font-size:.85rem;color:rgba(255,255,255,.45)}
  .foot-legal a{color:rgba(255,255,255,.6);border-bottom:1px solid rgba(255,255,255,.22);transition:color .3s var(--ease),border-color .3s var(--ease)}
  .foot-legal a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.6)}

  /* ---------- Reveal animations ---------- */
  /* Hidden state only under html.js (set by site.js) so no-JS visitors see
     everything; JS visitors get the animated reveal. */
  .reveal{transition:opacity 1.1s var(--ease-mono), transform 1.1s var(--ease-mono)}
  html.js .reveal{opacity:0;transform:translateY(38px)}
  html.js .reveal.in{opacity:1;transform:none}
  .reveal.d1{transition-delay:.10s}
  .reveal.d2{transition-delay:.20s}
  .reveal.d3{transition-delay:.30s}
  .reveal.d4{transition-delay:.40s}

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important;transition:none !important}
    .reveal{opacity:1;transform:none}
    .hero-bg img{transform:none}
  }

  /* ---------- Responsive ---------- */
  @media (max-width:1080px){
    .prog-grid{grid-template-columns:1fr 1fr}
    .sp-grid{grid-template-columns:repeat(3,1fr)}
    .stat-grid{grid-template-columns:1fr 1fr}
    .stat{border-left:0;padding:30px 20px;border-bottom:1px solid var(--line)}
    .stat:nth-child(2n){border-left:1px solid var(--line)}
    .logo-wall{grid-template-columns:1fr 1fr}
    .foot-grid{grid-template-columns:1fr 1fr}
  }
  @media (max-width:860px){
    .navlinks,.nav-cta{display:none}
    .burger{display:block}
    .mission .grid{grid-template-columns:1fr;gap:40px}
    .mission-figure img{height:420px}
    .mission-figure .tag{left:16px}
    .ev-grid{grid-template-columns:1fr}
    .forum .grid{grid-template-columns:1fr;gap:32px}
    .forum .act{justify-content:flex-start}
    .lead-grid{grid-template-columns:1fr}
    .gal-grid{grid-template-columns:1fr 1fr;grid-auto-rows:180px}
    .gal-a{grid-column:span 2;grid-row:span 2}
    .gal-b,.gal-c{grid-column:span 2}
  }
  @media (max-width:620px){
    body{font-size:16px}
    .pad{padding:92px 0}
    .pad-sm{padding:66px 0}
    .wrap{padding:0 20px}
    .prog-grid,.sp-grid{grid-template-columns:1fr}
    .stat-grid{grid-template-columns:1fr}
    .stat{border-left:0 !important}
    .logo-wall{grid-template-columns:1fr 1fr}
    .foot-grid{grid-template-columns:1fr}
    .hero-inner{padding-bottom:64px}
    .gal-grid{grid-template-columns:1fr;grid-auto-rows:220px}
    .gal-a,.gal-b,.gal-c{grid-column:span 1;grid-row:span 1}
  }
/* ---- Real Med&X logo in nav (premium treatment) ---- */
.brand-logo{height:32px;width:auto;flex-shrink:0;object-fit:contain;display:block;transition:filter .4s var(--ease)}
header.nav:not(.scrolled) .brand-logo{filter:brightness(0) invert(1)}      /* white over dark hero */
header.nav.scrolled .brand-logo{filter:none}                                /* full colour on light nav */
.mobile-menu .brand-logo{filter:none;height:30px;margin-bottom:8px}
@media (max-width:860px){ .brand-logo{height:28px} }

/* ---- shared lightbox + countdown ---- */
.lb-overlay{position:fixed;inset:0;background:rgba(15,17,20,.93);z-index:300;display:flex;align-items:center;justify-content:center;padding:5vh 4vw;cursor:zoom-out;animation:lbIn .25s var(--ease)}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb-overlay img{max-width:92vw;max-height:90vh;border-radius:3px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lb-close{position:fixed;top:22px;right:28px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.3);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.lb-close:hover{background:rgba(255,255,255,.15)}
[data-lightbox]{cursor:zoom-in}
.cd-n{font-family:var(--serif);font-size:2.2rem;font-weight:500;color:var(--crimson);margin:0 .15em 0 .5em}
.cd-u{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}

/* ---- Programs dropdown (nav mega-menu) ---- */
.nav-dd{position:relative}
.nav-dd::after{content:"";position:absolute;top:100%;left:-24px;right:-24px;height:22px}
.nav-dd-toggle{background:none;border:0;font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:500;letter-spacing:.02em;padding:4px 0;color:inherit}
header.nav .nav-dd-toggle{color:rgba(255,255,255,.88)}
header.nav.scrolled .nav-dd-toggle{color:var(--ink-soft)}
header.nav.scrolled .nav-dd-toggle:hover{color:var(--crimson)}
.nav-dd-toggle .caret{font-size:.78em;transition:transform .3s var(--ease)}
.nav-dd:hover .nav-dd-toggle .caret,.nav-dd:focus-within .nav-dd-toggle .caret{transform:rotate(180deg)}
.nav-dd-menu{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(8px);min-width:236px;background:var(--white);border:1px solid var(--line);border-radius:5px;box-shadow:var(--shadow-md);padding:8px;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .22s var(--ease),transform .22s var(--ease);z-index:20}
.nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu,.nav-dd.open .nav-dd-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-dd.open .nav-dd-toggle .caret{transform:rotate(180deg)}
.nav-dd-menu::before{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(45deg);width:12px;height:12px;background:var(--white);border-left:1px solid var(--line);border-top:1px solid var(--line)}
.nav-dd-menu a{color:var(--ink-soft) !important;padding:11px 15px;border-radius:4px;font-size:14px;font-weight:500;white-space:nowrap;transition:background .18s,color .18s}
.nav-dd-menu a::after{display:none !important}
.nav-dd-menu a:hover{background:var(--paper-2);color:var(--crimson) !important}
.nav-dd-toggle.is-active{color:#fff}
header.nav.scrolled .nav-dd-toggle.is-active{color:var(--crimson)}
@media (max-width:860px){ .nav-dd{display:none} }

/* ---- Sign in link in nav ---- */
.nav-signin{font-size:13.5px;font-weight:500;letter-spacing:.02em;padding:4px 2px;align-self:center;white-space:nowrap}
header.nav .nav-signin{color:rgba(255,255,255,.9)}
header.nav .nav-signin:hover{color:#fff}
header.nav.scrolled .nav-signin{color:var(--ink-soft)}
header.nav.scrolled .nav-signin:hover{color:var(--crimson)}
@media (max-width:860px){ .nav-signin{display:none} }

/* ---- Portal access in nav: highlighted "Member portal" + subtle "Admin" ---- */
.nav-admin{font-size:12px;font-weight:500;letter-spacing:.02em;align-self:center;white-space:nowrap}
header.nav .nav-admin{color:rgba(255,255,255,.6)}
header.nav .nav-admin:hover{color:#fff}
header.nav.scrolled .nav-admin{color:var(--ink-soft)}
header.nav.scrolled .nav-admin:hover{color:var(--crimson)}
.nav-portal{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;letter-spacing:.03em;padding:11px 20px;border-radius:2px;white-space:nowrap;transition:.35s var(--ease)}
.nav-portal-ico{flex:none}
header.nav .nav-portal{color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.42)}
header.nav .nav-portal:hover{background:#fff;color:var(--ink);border-color:#fff}
header.nav.scrolled .nav-portal{color:var(--ink);background:var(--paper-2);border:1px solid var(--line-strong)}
header.nav.scrolled .nav-portal:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
/* Grouped right-side actions so Admin/Member portal/Support sit together (no floating) */
.nav-actions{display:flex;align-items:center;gap:16px}
/* Always-visible search icon (stays on mobile, next to the burger) */
.nav-search{background:none;border:0;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:7px;border-radius:50%;transition:color .3s var(--ease),background .3s var(--ease)}
.nav-search svg{width:19px;height:19px;display:block}
header.nav .nav-search{color:rgba(255,255,255,.9)}
header.nav .nav-search:hover{color:#fff;background:rgba(255,255,255,.12)}
header.nav.scrolled .nav-search{color:var(--ink-soft)}
header.nav.scrolled .nav-search:hover{color:var(--crimson);background:var(--paper-2)}
@media (max-width:860px){ .nav-actions{display:none} .nav-search{margin-left:auto} }
/* Mobile-menu portal links: make Member portal stand out */
.mobile-menu .mm-portal{display:inline-flex;align-items:center;gap:9px;font-weight:600;color:var(--crimson)}
.mobile-menu .mm-admin{font-size:.95rem;color:var(--ink-soft)}

/* ---- Skip-to-content link (a11y) ---- */
.skip-link{position:fixed;top:-100px;left:16px;z-index:200;background:var(--crimson);color:#fff;padding:12px 18px;border-radius:3px;font-size:14px;font-weight:600;letter-spacing:.02em;transition:top .2s var(--ease)}
.skip-link:focus-visible{top:16px;outline:2px solid #fff;outline-offset:2px}

/* ---- Hero text legibility (targeted, not a full-hero darken) ----
   The light weight-300 lead can sit over the brightest band of a hero photo;
   a soft text-shadow guarantees contrast without dimming the whole image. */
.hero h1,.page-hero h1,.home-hero h1,
.hero .sub,.hero .lead,.page-hero .lead,.home-hero .lead,.page-hero .kicker,.home-hero .kicker{
  text-shadow:0 1px 18px rgba(12,8,6,.45),0 1px 3px rgba(12,8,6,.35);
}

/* ====================== PWA: "Get the app" (footer button + help modal) ====================== */
.foot-app{display:inline-flex;align-items:center;gap:9px;margin-top:20px;background:none;color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:3px;padding:11px 18px;font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.03em;cursor:pointer;transition:.3s var(--ease)}
.foot-app svg{width:16px;height:16px}
.foot-app:hover{background:#fff;color:var(--ink);border-color:#fff}
.app-help-overlay{position:fixed;inset:0;z-index:320;background:rgba(15,17,20,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:5vh 20px;animation:searchIn .2s var(--ease)}
.app-help-card{position:relative;width:100%;max-width:420px;background:var(--paper);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow-md);padding:34px 32px 30px;text-align:center}
.app-help-icon{border-radius:14px;margin:0 auto 16px;display:block;box-shadow:var(--shadow-sm)}
.app-help-card h3{font-size:1.5rem;line-height:1.15}
.app-help-card>p{color:var(--ink-soft);font-weight:300;font-size:1rem;line-height:1.6;margin:12px 0 18px}
.app-help-card ol{text-align:left;margin:0;padding-left:22px;color:var(--ink-soft);font-weight:300;font-size:.98rem;line-height:1.5;display:flex;flex-direction:column;gap:10px}
.app-help-card ol strong{color:var(--ink);font-weight:600}
.app-help-x{position:absolute;top:12px;right:14px;background:none;border:0;font-size:24px;line-height:1;color:var(--ink-soft);cursor:pointer}
.app-help-x:hover{color:var(--crimson)}

/* ====================== Site search overlay (see site.js) ====================== */
.search-overlay{position:fixed;inset:0;z-index:300;background:rgba(15,17,20,.55);backdrop-filter:saturate(160%) blur(5px);-webkit-backdrop-filter:saturate(160%) blur(5px);display:none;align-items:flex-start;justify-content:center;padding:12vh 20px}
.search-overlay.open{display:flex;animation:searchIn .2s var(--ease)}
@keyframes searchIn{from{opacity:0}to{opacity:1}}
.search-box{width:100%;max-width:620px;background:var(--paper);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow-md);overflow:hidden}
.search-input-wrap{display:flex;align-items:center;gap:13px;padding:18px 22px;border-bottom:1px solid var(--line);color:var(--ink-soft)}
.search-input-wrap svg{width:20px;height:20px;flex:none}
.search-input{flex:1;border:0;background:none;font-family:var(--serif);font-size:1.2rem;color:var(--ink);outline:none}
.search-input::placeholder{color:var(--ink-soft);opacity:.6}
.search-results{max-height:52vh;overflow-y:auto;padding:8px}
.search-result{display:flex;flex-direction:column;gap:2px;padding:13px 16px;border-radius:5px;cursor:pointer;text-decoration:none}
.search-result.sel{background:var(--paper-2)}
.search-result .r-t{font-family:var(--serif);font-size:1.06rem;color:var(--ink);line-height:1.2}
.search-result .r-d{font-size:.85rem;color:var(--ink-soft);font-weight:300}
.search-empty{padding:28px 20px;text-align:center;color:var(--ink-soft);font-weight:300}
.search-hint{display:flex;gap:18px;padding:11px 22px;border-top:1px solid var(--line);font-size:.74rem;color:var(--ink-soft)}
.search-hint kbd{font-family:var(--sans);background:var(--paper-2);border:1px solid var(--line);border-radius:3px;padding:1px 6px;font-size:.72rem}
@media (max-width:520px){ .search-overlay{padding:8vh 12px} .search-hint{display:none} }

/* ====================== Easter eggs (see site.js) ====================== */
/* 2) Laureate salute — fixed, centered-bottom, never shifts layout */
.egg-laurel{position:fixed;left:50%;bottom:46px;transform:translateX(-50%);z-index:240;cursor:pointer;animation:eggFadeIn .5s var(--ease)}
.egg-laurel-card{display:flex;flex-direction:column;align-items:center;gap:12px;background:rgba(251,249,246,.97);border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow-md);padding:24px 30px;max-width:340px;text-align:center}
.egg-laurel-svg{width:88px;height:auto}
.egg-laurel-svg path{stroke-dasharray:120;stroke-dashoffset:120;animation:eggDraw 1.2s var(--ease) forwards}
.egg-laurel-text{margin:0;font-family:var(--serif);font-style:italic;font-size:1.02rem;line-height:1.45;color:var(--ink)}
.egg-laurel-text span{display:block;font-style:normal;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--crimson);margin-top:10px}
@keyframes eggDraw{to{stroke-dashoffset:0}}
@keyframes eggFadeIn{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.egg-laurel.egg-static{animation:none}
.egg-laurel.egg-static path{animation:none;stroke-dashoffset:0}
/* 3) Footer X bow */
.egg-x{display:inline-block;transform-origin:center}
.egg-x--spin{animation:eggXSpin 1.1s var(--ease)}
@keyframes eggXSpin{0%{transform:rotate(0);text-shadow:none}45%{text-shadow:0 0 16px rgba(155,27,34,.6)}100%{transform:rotate(360deg);text-shadow:none}}
.egg-x-cap{display:block;max-height:0;overflow:hidden;opacity:0;font-family:var(--serif);font-style:italic;font-size:.92rem;color:var(--crimson);transition:opacity .5s var(--ease),max-height .5s var(--ease),margin .5s var(--ease)}
.egg-x-cap.show{opacity:1;max-height:60px;margin-top:10px}
/* 4) Plexus live toast */
.egg-toast{position:fixed;top:84px;right:24px;z-index:240;width:280px;background:var(--ink);color:#fff;border-radius:6px;box-shadow:var(--shadow-md);padding:20px 22px 18px;animation:eggToastIn .55s var(--ease)}
.egg-toast.egg-static{animation:none}
@keyframes eggToastIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.egg-toast-k{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#e8a4a8;display:inline-flex;align-items:center;gap:9px}
.egg-toast-k::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--crimson);box-shadow:0 0 0 4px rgba(155,27,34,.28)}
.egg-toast p{margin:10px 0 0;font-family:var(--serif);font-size:1.12rem;line-height:1.3}
.egg-toast a{display:inline-block;margin-top:12px;font-size:12.5px;font-weight:600;letter-spacing:.04em;color:#fff;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px}
.egg-toast-x{position:absolute;top:10px;right:12px;background:none;border:0;color:rgba(255,255,255,.6);font-size:20px;line-height:1;cursor:pointer}
.egg-toast-x:hover{color:#fff}
@media (max-width:520px){ .egg-toast{right:12px;left:12px;width:auto} }

/* ---- Print / PDF (used when exporting the sponsorship brochures) ---- */
@media print{
  *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important }
  header.nav, .mobile-menu, .burger, .lb-overlay, [data-print-hide]{ display:none !important }
  .reveal{ opacity:1 !important; transform:none !important }
  /* heros are full-screen on the web; on paper let them collapse to a cover band */
  .page-hero, .home-hero, .hero{ min-height:0 !important; height:auto !important }
  .page-hero-inner{ padding-top:30px !important; padding-bottom:30px !important }
  /* tighten the web's generous vertical rhythm so a brochure stays a few pages */
  .pad{ padding:26px 0 !important }
  .pad-sm{ padding:18px 0 !important }
  /* keep individual tier / a-la-carte cards from splitting across a page break */
  .tier-card, .tcard, .t-card, .ala-card, .inkard, .inkind, .ph{ break-inside:avoid }
}

/* ============================================================
   Med&X portal bridge — website-native sign-in + notifications
   (matches the site: crimson #9b1b22, ink, cream, Fraunces)
   ============================================================ */
.medx-acct{display:inline-flex;align-items:center;gap:10px;position:relative}
.medx-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;border:1px solid #e2dcd3;background:#fff;color:#15110f;cursor:pointer;transition:background .15s,border-color .15s}
.medx-bell:hover{background:#f3efe9;border-color:#cfc7ba}
.medx-bell-badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#9b1b22;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}
.medx-welcome{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:10px;border:1px solid #e2dcd3;background:#fff;color:#15110f;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
.medx-welcome:hover{background:#f3efe9}
.medx-acct-menu{position:absolute;top:48px;left:0;min-width:200px;background:#fff;border:1px solid #e2dcd3;border-radius:12px;box-shadow:0 12px 40px rgba(20,15,12,.16);padding:6px;z-index:1200;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease, transform .18s ease, visibility .18s}
.medx-acct-menu.open{opacity:1;visibility:visible;transform:none}
.medx-acct-menu a,.medx-acct-menu button{display:flex;align-items:center;gap:9px;width:100%;min-height:44px;text-align:left;padding:9px 12px;border:0;background:none;color:#15110f;font:inherit;font-size:14px;border-radius:8px;cursor:pointer;text-decoration:none}
.medx-acct-menu svg{flex-shrink:0;color:#9b1b22}
.medx-welcome-caret{color:inherit;opacity:.6;margin-left:2px}
.medx-acct-menu a:hover,.medx-acct-menu button:hover{background:#f3efe9}
.medx-acct-menu button[data-mx-signout]{color:#b3261e}
/* notifications panel */
.medx-notif-panel{position:fixed;width:368px;max-width:93vw;max-height:74vh;overflow:auto;background:#fff;border:1px solid #e2dcd3;border-radius:16px;box-shadow:0 18px 56px rgba(20,15,12,.22);z-index:1300;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease, transform .18s ease, visibility .18s}
.medx-notif-panel.open{opacity:1;visibility:visible;transform:none}
.medx-notif-head{font-family:'Fraunces',Georgia,serif;font-size:18px;font-weight:600;color:#15110f;padding:16px 18px 14px;border-bottom:1px solid #eee6db}
.medx-notif-list{padding:6px}
.medx-notif-item{position:relative;padding:14px 16px;border-radius:12px;cursor:pointer;transition:background .15s;border-bottom:1px solid #f4eee4}
.medx-notif-item:last-child{border-bottom:0}
.medx-notif-item:hover{background:#faf7f2}
.medx-notif-item:focus-visible{outline:2px solid #9b1b22;outline-offset:-2px}
.medx-notif-item.unread{background:#fcf5f5}
.medx-notif-item.unread::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:#9b1b22}
.medx-notif-row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.medx-notif-title{font-size:14.5px;font-weight:600;color:#15110f;line-height:1.3}
.medx-notif-dot{flex-shrink:0;width:8px;height:8px;margin-top:5px;border-radius:50%;background:#9b1b22}
.medx-notif-msg{font-size:13px;color:#6b6258;margin-top:4px;line-height:1.5}
.medx-notif-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px}
.medx-notif-time{font-size:11px;color:#6b6258}
/* Mobile: keep the notification bell visible in the nav bar (the widget moved out of the
   hidden .nav-actions); hide the welcome chip to save room — Open app + Sign out live in the menu/burger */
@media(max-width:860px){.medx-welcome{display:none !important;}.medx-acct{margin-left:6px}}
.medx-notif-snooze{background:none;border:0;color:#9b1b22;font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;padding:4px 6px;border-radius:6px}
.medx-notif-snooze:hover{background:#f3e7e7}
.medx-notif-empty{padding:30px 16px;text-align:center;color:#6b6258;font-size:13px}
@media(prefers-reduced-motion:reduce){.medx-auth-overlay,.medx-auth-card,.medx-acct-menu,.medx-notif-panel{transition:none!important}.medx-auth-card{transform:none!important}}
/* website sign-in modal */
.medx-auth-overlay{position:fixed;inset:0;background:rgba(18,15,13,.55);backdrop-filter:saturate(1.1) blur(2px);z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease, visibility .28s}
.medx-auth-overlay.open{opacity:1;visibility:visible;pointer-events:auto}
.medx-auth-card{position:relative;width:100%;max-width:400px;background:#fff;border-radius:16px;box-shadow:0 24px 70px rgba(20,15,12,.3);padding:30px 26px 26px;transform:translateY(14px) scale(.97);opacity:0;transition:transform .34s cubic-bezier(.2,.8,.2,1), opacity .34s}
.medx-auth-overlay.open .medx-auth-card{transform:none;opacity:1}
.medx-auth-x{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;border:0;background:#f3efe9;color:#6b6258;font-size:20px;line-height:1;cursor:pointer}
.medx-auth-title{font-family:'Fraunces',Georgia,serif;font-size:26px;font-weight:600;color:#15110f;text-align:center;margin:4px 0 4px}
.medx-auth-sub{text-align:center;color:#6b6258;font-size:14px;margin:0 0 18px}
.medx-auth-err{color:#b3261e;font-size:13px;min-height:18px;text-align:center;margin-bottom:6px}
.medx-auth-lab{display:block;font-size:13px;font-weight:600;color:#403a36;margin:10px 0 6px}
.medx-auth-in{width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid #cfc7ba;border-radius:10px;background:#f3efe9;color:#15110f;font:inherit;font-size:15px}
.medx-auth-in:focus{outline:none;border-color:#9b1b22;box-shadow:0 0 0 3px rgba(155,27,34,.15);background:#fff}
.medx-auth-go{width:100%;margin-top:18px;padding:13px;border:0;border-radius:10px;background:#9b1b22;color:#fff;font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.medx-auth-go:hover{background:#7e151b}
.medx-auth-go:disabled{opacity:.6;cursor:default}
.medx-auth-foot{text-align:center;font-size:13px;color:#6b6258;margin:16px 0 0}
.medx-auth-foot a{color:#9b1b22;font-weight:600;text-decoration:none}
@media(max-width:760px){.medx-welcome{padding:8px 10px;font-size:13px}}

/* ---- Tap-target comfort for two page-local controls. These are defined in
   faq.html / donate.html inline <style> blocks (which load after this file), so
   they are overridden here with a higher-specificity type+class selector. Pure
   padding — visual text style is unchanged; donate CTAs are plain links, no
   checkout logic touched. ---- */
button.faq-toolbtn{padding:12px 0}
a.way-link{padding-block:13px}

/* =====================================================================
   Portal warming splash — free-tier cold-start guard.
   Shown when a visitor clicks a portal-bound CTA while the Render free
   instance may be asleep, so they never stare at a 30-50s blank tab.
   (Injected + driven by site.js. See the "Portal warming splash" block.)
   ===================================================================== */
.mx-warm-overlay{
  position:fixed; inset:0; z-index:10000;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(21,17,15,.62); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .18s ease;
}
.mx-warm-overlay.open{opacity:1}
.mx-warm-card{
  background:var(--paper); color:var(--ink);
  border:1px solid var(--line); border-radius:8px;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  width:100%; max-width:360px; padding:34px 30px 26px; text-align:center;
}
.mx-warm-spin{
  width:34px; height:34px; margin:0 auto 20px; border-radius:50%;
  border:3px solid rgba(155,27,34,.18); border-top-color:var(--crimson);
  animation:mxWarmSpin .8s linear infinite;
}
.mx-warm-title{font-family:var(--serif); font-size:1.22rem; line-height:1.32; color:var(--ink); margin:0 0 8px}
.mx-warm-sub{font-size:.9rem; color:var(--ink-soft); line-height:1.5; margin:0 0 20px}
.mx-warm-cancel{
  -webkit-appearance:none; appearance:none; cursor:pointer; font:inherit;
  background:transparent; border:1px solid var(--line-strong); color:var(--ink-soft);
  font-size:.82rem; font-weight:600; letter-spacing:.02em; padding:8px 18px; border-radius:999px;
}
.mx-warm-cancel:hover{border-color:var(--ink); color:var(--ink)}
@keyframes mxWarmSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
  .mx-warm-overlay{transition:none}
  .mx-warm-spin{animation-duration:1.8s}
}

/* =====================================================================
   DIRECTION A — EDITORIAL MONUMENT (shared elevation layer)
   A cultural-institution system: monumental Fraunces, numbered chapters,
   broadsheet hairlines, oversized serif numerals, big-left-margin grids,
   crimson reserved to numbers + one rule + one button, gold as the quiet
   accent. Loaded last so it re-sets the baseline with conviction.
   ===================================================================== */

/* --- Designed selection + refined global rhythm --- */
::selection{background:var(--crimson);color:#fff}
::-moz-selection{background:var(--crimson);color:#fff}
body{font-size:17.5px;letter-spacing:.001em}
h1,h2,h3,h4{letter-spacing:-.022em}

/* Monument measure: a slightly wider canvas reads more institutional */
:root{--maxw:1280px}
.wrap{padding:0 40px}
@media (max-width:620px){ .wrap{padding:0 22px} }

/* --- Kicker re-set as a hairline small-caps label --- */
.kicker{font-size:11px;letter-spacing:.30em;gap:14px;font-weight:600}
.kicker::before{width:40px;height:1px}

/* --- Buttons: crisper, quieter, more confident --- */
.btn{font-size:12px;letter-spacing:.14em;padding:16px 30px;border-radius:1px}
.btn-outline{border-color:var(--ink)}
.textlink{font-size:12px;letter-spacing:.14em}

/* --- Nav: smaller, more assured --- */
header.nav .nav-inner{padding:22px 40px}
header.nav.scrolled .nav-inner{padding:14px 40px}
.navlinks{gap:34px}
.navlinks a{font-size:13px;letter-spacing:.03em}
.nav-cta{font-size:11.5px;letter-spacing:.12em;padding:11px 18px;border-radius:1px}

/* =====================================================================
   Chapter head — the signature broadsheet device.
   Full-width ink rule, an oversized crimson serif numeral in the left
   gutter, the label + headline set in a narrow measure to the right.
   ===================================================================== */
.ch-head{
  display:grid;grid-template-columns:minmax(120px,1.5fr) minmax(0,8.5fr);
  gap:clamp(32px,5vw,72px);align-items:start;
  border-top:1px solid var(--ink);padding-top:34px;
}
.ch-mark{position:relative}
.ch-mark .num{
  font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,3.4vw,3.6rem);
  line-height:.82;color:var(--crimson);letter-spacing:-.01em;display:block;
}
.ch-mark .lbl{
  display:block;margin-top:18px;font-family:var(--sans);
  font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-soft);line-height:1.5;max-width:15ch;
}
.ch-body{max-width:none}
.ch-body h2{
  font-size:clamp(2.1rem,4.6vw,4rem);line-height:1.0;letter-spacing:-.028em;
  font-weight:400;max-width:19ch;
}
.ch-body h2 em{font-style:italic;color:var(--crimson)}
.ch-body .lead{
  margin-top:26px;font-size:clamp(1.08rem,1.35vw,1.24rem);color:var(--ink-soft);
  font-weight:300;line-height:1.66;max-width:58ch;
}
/* dark-band variant */
.ch-head.on-ink{border-top-color:rgba(255,255,255,.28)}
.ch-head.on-ink .ch-mark .num{color:var(--gold)}
.ch-head.on-ink .ch-mark .lbl{color:rgba(255,255,255,.6)}
.ch-head.on-ink .ch-body h2{color:#fff}
.ch-head.on-ink .ch-body h2 em{color:var(--gold)}
.ch-head.on-ink .ch-body .lead{color:rgba(255,255,255,.74)}
@media (max-width:760px){
  .ch-head{grid-template-columns:1fr;gap:20px;padding-top:26px}
  .ch-mark{display:flex;align-items:baseline;gap:16px}
  .ch-mark .num{font-size:2.4rem}
  .ch-mark .lbl{margin-top:0;max-width:none}
}

/* =====================================================================
   Footer as a colophon — a huge wordmark artifact over the columns.
   ===================================================================== */
footer{padding:0 0 34px}
.foot-monument{
  border-bottom:1px solid rgba(255,255,255,.14);
  padding:70px 0 46px;margin-bottom:52px;
  display:flex;flex-direction:column;align-items:flex-start;gap:22px;
}
.foot-monument .fm-word{
  font-family:var(--serif);font-weight:400;line-height:.86;letter-spacing:-.04em;
  font-size:clamp(4.5rem,15vw,13rem);color:#fff;
}
.foot-monument .fm-word .amp{color:var(--crimson);font-style:italic}
.foot-monument .fm-logo{
  display:block;width:clamp(180px,22vw,320px);height:auto;
  filter:brightness(0) invert(1);
}
.foot-monument .fm-tag{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.05rem,1.5vw,1.4rem);color:rgba(255,255,255,.62);
  max-width:none;line-height:1.4;text-align:left;white-space:nowrap;padding-bottom:0;
}
@media (max-width:560px){.foot-monument .fm-tag{white-space:normal}}
footer .wrap{padding-top:44px}
.foot-brand .foot-logo{display:none}
.foot-brand .mark{font-size:1.5rem}
@media (max-width:760px){
  .foot-monument{padding:44px 0 30px;margin-bottom:36px}
  .foot-monument .fm-tag{text-align:left;padding-bottom:0}
}

/* =====================================================================
   Motion with manners — reveal masks (clip wipes) on media, guarded.
   Only under html.js; reduced-motion neutralises so images never hide.
   ===================================================================== */
html.js .mono-mask{clip-path:inset(0 100% 0 0);transition:clip-path 1.15s var(--ease-mono)}
html.js .reveal.in .mono-mask,html.js .mono-mask.reveal.in{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){
  .mono-mask{clip-path:none !important}
}

/* =====================================================================
   SITEWIDE EXTENSIONS — the Monument system carried to every page
   (unified photographic grade, interior hero register, serif numerals,
   quieter text reveals). Appended last so it wins ties in this sheet.
   ===================================================================== */

/* --- One warm cinematic grade across the whole photo library (vB/vC graft).
   Targets the photo + people folders by src, never the logos. Page-level
   :hover rules (higher specificity) still win, so hover pops survive. --- */
:root{
  --grade:contrast(1.05) saturate(.88) sepia(.10) brightness(1.0);
  --grade-hero:grayscale(.32) contrast(1.05) brightness(.92) sepia(.16) saturate(.74);
}
img[src*="assets/photos/"]:not([src*="logo"]),
img[src*="assets/people/"]{filter:var(--grade)}

/* --- Interior page heroes: the same committed register as the cover.
   body-prefixed so these outrank each page's own inline hero styles. --- */
body .page-hero h1,body .gx-hero h1,body .sg-hero h1,body .hero h1{
  font-size:clamp(2.7rem,6.8vw,5.9rem);line-height:.98;letter-spacing:-.032em;font-weight:400;
}
body .page-hero .kicker,body .gx-hero .kicker,body .sg-hero .kicker,body .hero .kicker{
  color:#fff;letter-spacing:.32em;
}
body .page-hero .kicker::before,body .gx-hero .kicker::before,
body .sg-hero .kicker::before,body .hero .kicker::before{background:var(--gold);width:48px}
body .page-hero .ph-bg img,body .gx-hero .gx-hero-bg img,body .sg-hero img{filter:var(--grade-hero)}
@media (max-width:620px){
  body .page-hero h1,body .gx-hero h1,body .sg-hero h1,body .hero h1{
    font-size:clamp(2.15rem,8.8vw,2.9rem);line-height:1.02;
  }
}

/* Homepage hero: a touch smaller than the interior register, with the closing word in crimson */
body #home-hero-h{font-size:clamp(2.6rem,6.3vw,5.45rem)}
body #home-hero-h em{color:var(--crimson);font-style:italic}
@media (max-width:620px){
  body #home-hero-h{font-size:clamp(2.05rem,8.4vw,2.8rem)}
}

/* --- Stats: oversized LIGHT serif numerals, italic suffix (vC graft) --- */
.stat .n{font-weight:300;letter-spacing:-.03em}
.stat .n .suf{color:var(--crimson);font-style:italic}

/* --- Chapter heads never inherit a parent .center or page-level lead
   centering (page inline sheets load after this one, so outrank them) --- */
.ch-head,.ch-head .ch-body,.ch-head .ch-mark{text-align:left}
.ch-head .ch-body .lead{text-align:left;margin-left:0;margin-right:0}

/* --- Nav gutters on small screens follow the 22px page gutter,
   and the scroll hint yields to the taller hero content --- */
@media (max-width:620px){
  /* Mobile header squeeze fix. The brand wordmark + language pill + search +
     burger were overflowing the flex row; the burger was the only shrinkable
     item (its bars are position:absolute, so its min-content is 0), so flexbox
     collapsed it to 0px and pushed it off the right edge (invisible at 390,
     off-screen at 360). Trim the gutters, gap and logo, drop the redundant
     search left-margin, and the pinned .burger (flex:0 0 auto) now stays on. */
  header.nav .nav-inner{padding:18px 14px;gap:10px}
  header.nav.scrolled .nav-inner{padding:12px 14px}
  .scroll-hint{display:none}
  .brand-logo{height:24px}
  header#nav .nav-search{margin-left:0}
}

/* --- Footer colophon never prints into the brochure PDFs --- */
@media print{ .foot-monument{display:none !important} }

/* Desktop app download buttons in the install modal */
.app-help-card .app-dl{display:inline-block;background:var(--crimson);color:#fff;border-radius:3px;padding:12px 22px;font-weight:600;font-size:.95rem;margin:10px 0 4px;text-decoration:none}
.app-help-card .app-dl:hover{background:var(--crimson-deep)}
.app-help-card .app-dl-note{font-size:.85rem;color:var(--muted);margin:4px 0 14px;line-height:1.5}
.app-help-card h4{font-family:var(--serif);font-weight:500;margin:18px 0 6px}

/* ===================================================================
   Member portal nav — the single login pill becomes a small dropdown
   offering BOTH the promo page ("Explore the portal") and a direct
   log in. The toggle uses .nav-portal-btn (NOT .nav-portal) so the
   MedXBridge session layer in site.js keeps owning the real .nav-portal
   login element (now the menu's log-in item) for its auth modal +
   logged-in account widget. Reuses the accessible .nav-dd component.
   =================================================================== */
.nav-portal-dd{position:relative}
/* toggle styled as the pill (mirrors .nav-portal, but a distinct class) */
.nav-portal-btn{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;letter-spacing:.03em;padding:11px 20px;border-radius:2px;white-space:nowrap;transition:.35s var(--ease)}
header.nav .nav-portal-btn{color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.42)}
header.nav .nav-portal-btn:hover,header.nav .nav-portal-dd.open .nav-portal-btn{background:#fff;color:var(--ink);border-color:#fff}
header.nav.scrolled .nav-portal-btn{color:var(--ink);background:var(--paper-2);border:1px solid var(--line-strong)}
header.nav.scrolled .nav-portal-btn:hover,header.nav.scrolled .nav-portal-dd.open .nav-portal-btn{background:var(--ink);color:#fff;border-color:var(--ink)}
.nav-portal-btn .caret{margin-left:1px;font-size:.72em;opacity:.9;line-height:1;transition:transform .3s var(--ease)}
.nav-portal-dd:hover .nav-portal-btn .caret,.nav-portal-dd:focus-within .nav-portal-btn .caret,.nav-portal-dd.open .nav-portal-btn .caret{transform:rotate(180deg)}
/* right-align the menu under the far-right pill instead of centering it */
.nav-portal-menu{left:auto;right:0;transform:translateX(0) translateY(8px);min-width:226px}
.nav-portal-dd:hover .nav-portal-menu,
.nav-portal-dd:focus-within .nav-portal-menu,
.nav-portal-dd.open .nav-portal-menu{transform:translateX(0) translateY(0)}
.nav-portal-menu::before{left:auto;right:26px;transform:rotate(45deg)}
.nav-portal-menu a{display:block}
/* the log-in item carries .nav-portal for MedXBridge — neutralise the pill
   styling so it reads as a normal menu row inside the dropdown */
.nav-portal-menu a.nav-portal{display:block;background:none;border:0;border-radius:4px;padding:11px 15px;font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;white-space:nowrap}
header.nav .nav-portal-menu a.nav-portal,
header.nav.scrolled .nav-portal-menu a.nav-portal{background:none;border:0}
header.nav .nav-portal-menu a.nav-portal:hover,
header.nav.scrolled .nav-portal-menu a.nav-portal:hover{background:var(--paper-2)}
/* mobile menu: a promo link plus the MedXBridge-owned log-in link */
.mobile-menu .mm-portal-explore{display:inline-flex;align-items:center;gap:9px;font-weight:600;color:var(--crimson)}
.mobile-menu .mm-portal-explore::before{content:"";width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='3.4'/%3E%3Cpath d='M5.5 20c0-3.6 3-5.4 6.5-5.4s6.5 1.8 6.5 5.4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='3.4'/%3E%3Cpath d='M5.5 20c0-3.6 3-5.4 6.5-5.4s6.5 1.8 6.5 5.4'/%3E%3C/svg%3E") center/contain no-repeat}

/* ===== Add-to-calendar affordance (shared) =====
   A subtle dual link — a small calendar glyph, a label, then
   "Google · Apple/Outlook". Inherits the surrounding text colour, so it
   reads correctly on both the dark hero art and the pale content cards. */
.medx-cal{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;font-family:var(--sans,'Inter',system-ui,sans-serif);font-size:.8rem;font-weight:500;line-height:1.35;color:inherit}
.medx-cal .medx-cal-ico{flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.72}
.medx-cal .medx-cal-lbl{opacity:.62;letter-spacing:.01em}
.medx-cal .medx-cal-links{display:inline-flex;align-items:center;gap:7px}
.medx-cal .medx-cal-sep{opacity:.4}
.medx-cal a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px;opacity:.8;transition:opacity .18s ease}
.medx-cal a:hover,.medx-cal a:focus-visible{opacity:1}

/* ===================== AS FEATURED IN — press strip ===================== */
.press-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
.press-strip .wrap{padding:32px 24px}
.ps-inner{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.ps-label{margin:0;font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);opacity:.6}
.ps-names{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 34px;margin:0;padding:0;list-style:none}
.ps-name{font-family:var(--serif);font-size:1.06rem;font-weight:600;letter-spacing:.005em;color:var(--ink);opacity:.52;filter:grayscale(1);text-decoration:none;transition:opacity .28s var(--ease-mono,ease),color .28s ease}
.ps-name:hover,.ps-name:focus-visible{opacity:1;color:var(--crimson)}
.ps-logo{display:inline-flex;align-items:center;opacity:.52;filter:grayscale(1);transition:opacity .28s var(--ease-mono,ease),filter .28s ease}
.ps-logo img{display:block;height:24px;width:auto}
.ps-logo--tportal img{height:22px}
.ps-logo--slobodna img{height:27px}
.ps-logo--poslovni img{height:25px}
.ps-logo:hover,.ps-logo:focus-visible{opacity:1;filter:grayscale(0)}
@media (max-width:640px){.press-strip .wrap{padding:26px 20px}.ps-names{gap:13px 22px}.ps-name{font-size:.97rem}.ps-logo img{height:21px}.ps-logo--tportal img{height:19px}.ps-logo--slobodna img{height:24px}.ps-logo--poslovni img{height:22px}}

/* ===================== LEGAL / TRUST CARD (donate) ===================== */
.legal-sec{background:var(--paper)}
.legal-card{max-width:720px;margin:0 auto;border:1px solid var(--line);border-radius:16px;background:#fff;padding:34px 36px;box-shadow:var(--shadow-sm)}
.legal-card .kicker{margin-bottom:2px}
.legal-card h3{font-family:var(--serif);font-size:1.34rem;line-height:1.2;color:var(--ink);font-weight:500;margin:12px 0 10px}
.legal-card p{font-family:var(--sans);color:var(--ink-soft);font-weight:300;line-height:1.65;margin:0 0 12px}
.legal-card .lc-id{font-size:.92rem;color:var(--ink);font-weight:400;letter-spacing:.01em;margin:0 0 4px}
.legal-card .lc-id:last-of-type{margin-bottom:16px}
.legal-card .lc-receipt{color:var(--ink);font-weight:400}
.legal-card .lc-receipt strong{font-weight:600}
.legal-card .lc-contact{margin-bottom:0;font-size:.94rem}
.legal-card a{color:var(--crimson);text-decoration:none;border-bottom:1px solid rgba(155,27,34,.3)}
.legal-card a:hover,.legal-card a:focus-visible{border-color:var(--crimson)}
@media (max-width:640px){.legal-card{padding:26px 22px}}

/* ============ THE GOLDEN LINE — heritage teaser band (home) ============ */
  .gl-band{position:relative;overflow:hidden;color:#fbf9f6;padding:108px 0;
    background:radial-gradient(125% 150% at 84% -25%, #1c3454 0%, #14263f 42%, #0e1c30 100%);
    border-top:1px solid rgba(201,169,98,.22);border-bottom:1px solid rgba(201,169,98,.22)}
  .gl-band::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
    background:radial-gradient(52% 62% at 6% 104%, rgba(201,169,98,.12), transparent 60%),
               radial-gradient(40% 50% at 98% 4%, rgba(201,169,98,.08), transparent 62%)}
  .gl-inner{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:0 28px;
    display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(28px,5vw,84px);align-items:center;text-align:left}
  .gl-copy{min-width:0}
  .gl-croatia{width:min(100%,340px);height:auto;display:block;margin:0 auto;
    filter:drop-shadow(0 10px 34px rgba(201,169,98,.18))}
  .gl-croatia .gl-land{fill:rgba(201,169,98,.06);stroke:none;transition:fill 1.1s ease}
  .gl-side.mo-done .gl-land{fill:rgba(201,169,98,.13)}
  .gl-croatia .gl-track{fill:none;stroke:rgba(201,169,98,.16);stroke-width:1.1;vector-effect:non-scaling-stroke}
  .gl-croatia .gl-fill{fill:none;stroke:url(#glgrad);stroke-width:1.7;stroke-linecap:round;
    vector-effect:non-scaling-stroke;transition:stroke-dashoffset .12s linear,filter 1.2s ease}
  .gl-side.mo-done .gl-fill{filter:drop-shadow(0 0 7px rgba(201,169,98,.6)) drop-shadow(0 0 2px rgba(228,207,156,.8))}
  @media (max-width:860px){.gl-inner{grid-template-columns:1fr;text-align:center}
    .gl-croatia{width:min(60%,220px);order:-1;margin-bottom:6px}
    .gl-band h2,.gl-sub{margin-left:auto;margin-right:auto}}
  .gl-eyebrow{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;
    color:var(--gold);display:inline-flex;align-items:center;gap:14px}
  .gl-eyebrow::before,.gl-eyebrow::after{content:"";width:28px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-deep))}
  .gl-eyebrow::after{background:linear-gradient(90deg,var(--gold-deep),transparent)}
  .gl-band h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4vw,3.15rem);line-height:1.07;
    letter-spacing:-.02em;margin:20px 0 0;max-width:none}
  .gl-band h2 em{font-style:italic;color:#e4cf9c}
  .gl-sub{margin:18px 0 0;max-width:62ch;color:rgba(251,246,236,.78);font-weight:300;font-size:1.14rem;line-height:1.6}
  .gl-cta{display:inline-flex;align-items:center;gap:10px;margin-top:36px;padding:15px 32px;border-radius:999px;
    font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;
    color:#0e1c30;background:linear-gradient(180deg,#e4cf9c,#c9a962);border:1px solid #c9a962;
    transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease)}
  .gl-cta:hover,.gl-cta:focus-visible{transform:translateY(-2px);box-shadow:0 16px 42px rgba(201,169,98,.30);
    background:linear-gradient(180deg,#eeddb0,#d4b877)}
  .gl-cta .arr{transition:transform .35s var(--ease)}
  .gl-cta:hover .arr,.gl-cta:focus-visible .arr{transform:translateX(4px)}
  @media (max-width:760px){.gl-band{padding:78px 0}.gl-sub{font-size:1.06rem}}

/* founder note — part of a photo moment, not a standalone card */
.mx-founder{position:relative;overflow:hidden;padding:clamp(56px,9vw,96px) 0}
.mxf-bg{position:absolute;inset:0}
.mxf-bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.mxf-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(15,11,9,.9) 0%,rgba(15,11,9,.74) 46%,rgba(15,11,9,.52) 100%)}
.mxf-inner{position:relative;z-index:1}
.mxf-quote{max-width:580px}
.mxf-tag{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.mxf-quote blockquote{font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.15rem,1.8vw,1.55rem);line-height:1.55;color:rgba(255,252,246,.95);margin:14px 0 0;border:0;padding:0}
.mxf-attr{display:flex;align-items:center;gap:13px;margin-top:20px}
.mxf-attr img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:1px solid rgba(201,169,98,.55)}
.mxf-attr b{display:block;color:#fff;font-size:.95rem;font-weight:600}
.mxf-attr .mxa-ctx{font-size:.84rem;color:rgba(255,255,255,.66)}
.mxf-attr .mxa-ctx a{color:var(--gold);text-decoration:none}
.mxf-attr .mxa-ctx a:hover{text-decoration:underline}

/* ---- language toggle: visible pills in both header states ---- */
.nav-lang{display:inline-flex;align-items:center;gap:6px}
.nav-lang .sep{display:none}
.nav-lang a{display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:600;
  letter-spacing:.06em;border:1px solid rgba(255,255,255,.55);color:#fff;text-decoration:none;
  transition:background .25s,color .25s,border-color .25s}
.nav-lang a.is-active{background:#fff;color:var(--ink);border-color:#fff}
.nav-lang a:not(.is-active):hover{background:rgba(255,255,255,.18)}
header.nav.scrolled .nav-lang a{border-color:var(--line-strong);color:var(--ink-soft)}
header.nav.scrolled .nav-lang a.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
header.nav.scrolled .nav-lang a:not(.is-active):hover{background:var(--paper-2)}
/* footer links must never clip descenders */
footer a{line-height:1.5;overflow:visible}

/* nav items never wrap at the wider layout */
header.nav nav a, header.nav .nav-dd-toggle{white-space:nowrap}