:root {
    --navy: #002B80;
    --navy-2: #001a52;
    --navy-3: #0a3aa8;
    --red: #C30017;
    --red-2: #e51a30;
    --gold: #c9a227;

    --ink: #0a0e1c;
    --ink-2: #2a3142;
    --ink-3: #5a6378;
    --ink-4: #8b94a8;
    --ink-a: #0E1726;
    --ink-2a: #3D4757;
    --ink-3a: #6F7A8C;
    --line: #e5e8f0;
    --line-2: #c8d0de;

    --paper: #fbfcfe;
    --paper-2: #ffffff;
    --paper-3: #f3f5fb;

    --grad-hero: linear-gradient(135deg, #002B80 0%, #1248c0 50%, #002B80 100%);
    --grad-hero-soft: linear-gradient(135deg, rgba(0,43,128,0.06) 0%, rgba(18,72,192,0.10) 100%);
    --grad-red: linear-gradient(135deg, #C30017 0%, #e51a30 100%);
    --grad-gold: linear-gradient(135deg, #c9a227 0%, #f3c953 100%);

    --shadow-1: 0 1px 0 rgba(10,14,28,0.04), 0 2px 8px rgba(10,14,28,0.05);
    --shadow-2: 0 4px 24px rgba(10,14,28,0.08), 0 1px 4px rgba(10,14,28,0.04);
    --shadow-3: 0 16px 48px rgba(0,43,128,0.18), 0 4px 12px rgba(10,14,28,0.06);

    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 22px;
    --r-xl: 28px;

    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'cv11', 'ss01', 'ss03';
    overflow-x: hidden;
  }
  ::selection { background: rgba(0,43,128,0.15); }

  /* ======= Top nav (monday-vibe) ======= */
  nav.top {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(251,252,254,0.85);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border-bottom: 1px solid var(--line);
  }
  nav.top .wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-decoration: none;
  }
  .crest {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--grad-hero);
    display: grid;
    place-items: center;
    color: white;
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.04em;
    box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,0.18);
    position: relative;
  }
  .crest::after {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 6px;
  }
  .crest .star {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--red);
    transform: rotate(45deg);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.4);
  }
  .brand-text { display: flex; flex-direction: column; line-height: 1.05; }
  .brand-text .b1 { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
  .brand-text .b2 { font-size: 11px; font-weight: 500; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; }

  .nav-signin {
    display: inline-flex;
    align-items: center;
    color: var(--navy);
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--paper-3);
    white-space: nowrap;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease), box-shadow 180ms var(--ease);
  }
  .nav-signin:hover {
    background: var(--navy);
    color: white;
    border-color: var(--navy);
    box-shadow: var(--shadow-1);
  }

  /* Sign-out icon button shown only when a member is logged in.
     Compact (44x44 tap target per WCAG 2.5.5) so it sits next to the
     member-name chip without elongating the nav. Tooltip + aria-label
     carry the meaning for sighted and AT users alike. flex-shrink:0
     prevents the nav's flex layout from squashing the width below 44px
     when the row is tight, which would render the round button as an
     ellipse. */
  .nav-signout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    aspect-ratio: 1 / 1;
    margin-left: 4px;
    color: var(--ink-3);
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
    text-decoration: none;
    transition: color 180ms var(--ease), background 180ms var(--ease), border-color 180ms var(--ease);
  }
  .nav-signout:hover {
    color: white;
    background: var(--red);
    border-color: var(--red);
  }
  .nav-signout svg { display: block; }

  .nav-admin {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--navy);
    background: rgba(0, 43, 128, 0.08);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 999px;
    white-space: nowrap;
    letter-spacing: 0.04em;
    transition: background 180ms var(--ease), color 180ms var(--ease);
  }
  .nav-admin:hover { background: var(--navy); color: white; }
  .nav-admin svg { flex-shrink: 0; }
  nav.top ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 4px;
    align-items: center;
  }
  nav.top a.link {
    color: var(--ink-2);
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    padding: 8px 14px;
    border-radius: 999px;
    transition: background 180ms var(--ease), color 180ms var(--ease);
  }
  nav.top a.link:hover { background: var(--paper-3); color: var(--ink); }
  /* Use the brand navy directly (not var(--ink)) so the active tab keeps
     dark navy background + white text in BOTH themes. var(--ink) flips to
     near-white in dark mode, which made the text invisible on the pill. */
  nav.top a.link.active { background: var(--navy); color: #FFFFFF; }
  nav.top .spacer { flex: 1; }

  /* Inline socials in the primary nav, sitting after "Skenk" */
  nav.top .nav-socials {
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: 8px;
    padding-left: 12px;
    border-left: 1px solid var(--line);
  }
  nav.top .nav-social {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: 999px;
    color: var(--ink-2);
    transition: background 180ms var(--ease), color 180ms var(--ease), transform 120ms var(--ease);
  }
  nav.top .nav-social svg { width: 20px; height: 20px; }
  nav.top .nav-social:hover { background: var(--paper-3); color: var(--ink); transform: translateY(-1px); }
  nav.top .nav-social.fb:hover { color: #1877F2; }
  nav.top .nav-social.ig:hover { color: #E4405F; }
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 12px 20px;
    min-height: 44px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform 220ms var(--spring), background 200ms var(--ease), box-shadow 200ms var(--ease), color 200ms var(--ease);
    line-height: 1;
    white-space: nowrap;
  }
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(0); }
  .btn-ghost { color: var(--ink-2); border-color: var(--line-2); background: transparent; }
  .btn-ghost:hover { background: var(--paper-3); color: var(--ink); }
  .btn-primary { background: var(--ink); color: white; }
  .btn-primary:hover { background: #1a1f33; box-shadow: var(--shadow-2); }
  .btn-cta {
    background: var(--grad-red);
    color: white;
    box-shadow: 0 6px 18px rgba(195,0,23,0.30), inset 0 1px 0 rgba(255,255,255,0.18);
  }
  .btn-cta:hover {
    box-shadow: 0 10px 28px rgba(195,0,23,0.42), inset 0 1px 0 rgba(255,255,255,0.20);
  }
  .btn-lg { padding: 14px 24px; font-size: 15px; }
  .btn .arrow {
    display: inline-block;
    transition: transform 240ms var(--spring);
  }
  .btn:hover .arrow { transform: translateX(3px); }

  /* ======= Hero ======= */
  .hero {
    position: relative;
    overflow: hidden;
    padding: 80px 24px 56px;
    background:
      radial-gradient(ellipse at 80% 0%, rgba(195,0,23,0.08), transparent 55%),
      radial-gradient(ellipse at 10% 100%, rgba(0,43,128,0.10), transparent 60%),
      var(--paper);
  }
  .hero .wrap {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    align-items: center;
  }
  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 14px 6px 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2);
    letter-spacing: 0.01em;
    margin-bottom: 22px;
    box-shadow: var(--shadow-1);
  }
  .hero-eyebrow .dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--red);
    box-shadow: 0 0 0 4px rgba(195,0,23,0.12);
    animation: pulse 2.4s ease-in-out infinite;
  }
  @keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(195,0,23,0.12); }
    50% { box-shadow: 0 0 0 8px rgba(195,0,23,0.04); }
  }
  .hero h1 {
    font-family: 'Fraunces', 'Inter', serif;
    font-size: clamp(40px, 5.4vw, 68px);
    line-height: 0.98;
    letter-spacing: -0.035em;
    font-weight: 600;
    margin: 0 0 20px;
    color: var(--ink);
  }
  .hero h1 .grad {
    background: linear-gradient(90deg, #002B80 0%, #1248c0 50%, #C30017 110%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-style: italic;
    padding-right: 0.08em;
    margin-right: -0.04em;
  }
  .hero p.lede {
    font-size: 18px;
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 540px;
    margin: 0 0 28px;
  }
  .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
  .hero-trust {
    margin-top: 36px;
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    align-items: center;
  }
  .hero-trust .t {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .hero-trust .t-num {
    font-family: 'Fraunces', serif;
    font-size: 26px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .hero-trust .t-lab {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-3);
    font-weight: 600;
  }
  .hero-trust .sep {
    width: 1px;
    height: 32px;
    background: var(--line);
  }

  /* ======= Hero barometer card ======= */
  .barometer {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 28px;
    box-shadow: var(--shadow-3);
    position: relative;
    overflow: hidden;
  }
  .barometer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top right, rgba(195,0,23,0.06), transparent 60%);
    pointer-events: none;
  }
  .barometer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    position: relative;
  }
  .barometer-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  .pill-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(0,200,90,0.12), rgba(0,200,90,0.06));
    color: #057a3a;
    border: 1px solid rgba(0,200,90,0.30);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
  }
  .pill-live::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #2bb866;
    box-shadow: 0 0 0 3px rgba(43,184,102,0.20);
    animation: pulse-green 2s ease-in-out infinite;
  }
  @keyframes pulse-green {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.4); }
  }
  .baro-stat {
    margin-top: 22px;
    display: flex;
    align-items: baseline;
    gap: 12px;
    position: relative;
  }
  .baro-num {
    font-family: 'Fraunces', serif;
    font-size: 72px;
    font-weight: 600;
    line-height: 0.9;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .baro-suffix {
    font-size: 16px;
    color: var(--ink-3);
    font-weight: 500;
  }
  .baro-delta {
    margin-top: 4px;
    font-size: 14px;
    color: #057a3a;
    font-weight: 600;
  }
  .baro-bar {
    margin-top: 22px;
    height: 12px;
    background: var(--paper-3);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
  }
  .baro-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--navy) 0%, var(--navy-3) 60%, var(--red) 100%);
    border-radius: 999px;
    width: 0%;
    transition: width 1400ms var(--ease);
    position: relative;
    box-shadow: 0 2px 8px rgba(0,43,128,0.30);
  }
  .baro-fill::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 18px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6));
    border-radius: 999px;
  }
  .baro-meta {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--ink-3);
    font-weight: 500;
  }
  .baro-meta b { color: var(--ink); font-weight: 700; }

  .baro-tiers {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin-top: 22px;
  }
  .baro-tier-mini {
    background: var(--paper-3);
    border-radius: var(--r-sm);
    padding: 10px 8px;
    text-align: center;
    border: 1px solid transparent;
    transition: transform 220ms var(--spring), border-color 200ms var(--ease);
  }
  .baro-tier-mini:hover { transform: translateY(-2px); border-color: var(--line-2); }
  .baro-tier-mini .bt-name {
    font-size: 10px;
    font-weight: 700;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .baro-tier-mini .bt-count {
    margin-top: 2px;
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    font-family: 'Fraunces', serif;
    letter-spacing: -0.02em;
  }

  /* Per-allocation breakdown beneath the tier counts */
  .baro-lanes {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px dashed var(--line);
  }
  .baro-lanes-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px; flex-wrap: wrap;
    margin-bottom: 8px;
  }
  .baro-lanes-title {
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--ink-3);
  }
  .baro-lanes-total {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 18px; font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .baro-lanes-bar {
    display: flex; height: 10px;
    background: var(--paper-3);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 14px;
    position: relative;
  }
  .baro-lanes-bar > span {
    height: 100%;
    transition: width 600ms var(--ease);
  }
  .baro-lanes-bar-empty {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: var(--ink-3);
    font-style: italic;
  }
  .baro-lanes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .baro-lane {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper-2);
    position: relative;
  }
  .baro-lane-head {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--ink-3);
  }
  .baro-lane-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--lane-c, var(--ink));
  }
  .baro-lane-received {
    margin-top: 4px;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 22px; font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1.1;
  }
  .baro-lane-meta {
    margin-top: 3px;
    font-size: 12px; color: var(--ink-3);
  }
  @media (max-width: 560px) {
    .baro-lanes-grid { grid-template-columns: 1fr; }
  }

  /* ======= Section frame ======= */
  section.app {
    max-width: 1240px;
    margin: 0 auto;
    padding: 80px 24px;
  }
  .sec-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: var(--red);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin-bottom: 12px;
  }
  .sec-h2 {
    font-family: 'Fraunces', serif;
    font-size: clamp(32px, 3.8vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    font-weight: 600;
    margin: 0 0 14px;
    max-width: 720px;
  }
  .sec-sub {
    font-size: 17px;
    color: var(--ink-2);
    max-width: 640px;
    margin: 0;
  }

  /* ======= Recognition tier showcase ======= */
  .tiers-grid {
    margin-top: 48px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
  }
  .tier {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 26px 22px;
    transition: transform 280ms var(--spring), box-shadow 240ms var(--ease), border-color 200ms var(--ease);
    position: relative;
    overflow: hidden;
  }
  .tier:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-2);
  }
  .tier .tier-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--r-md);
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 4px 14px rgba(10,14,28,0.10);
    position: relative;
  }
  .tier .tier-icon svg { width: 28px; height: 28px; }
  .tier .tier-amount {
    font-family: 'Fraunces', serif;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1;
    color: var(--ink);
  }
  .tier .tier-amount .per { font-size: 14px; color: var(--ink-3); font-weight: 500; }
  .tier .tier-name {
    margin-top: 6px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .tier .tier-desc {
    margin-top: 10px;
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.5;
    min-height: 56px;
  }
  .tier .tier-count {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--ink-3);
  }
  .tier .tier-count b { color: var(--ink); font-size: 14px; font-weight: 700; }
  .tier[data-tier="geen"]   .tier-icon { background: linear-gradient(135deg, #e5e8f0, #c8d0de); }
  .tier[data-tier="bb"]     .tier-icon { background: linear-gradient(135deg, #5a7ad6, #002B80); }
  .tier[data-tier="balkie"] .tier-icon { background: linear-gradient(135deg, #1248c0, #002B80); }
  .tier[data-tier="hk"]     .tier-icon { background: linear-gradient(135deg, #C30017, #8a000f); }
  .tier[data-tier="ek"]     .tier-icon { background: var(--grad-gold); }
  .tier[data-tier="ek"] {
    background: linear-gradient(180deg, rgba(201,162,39,0.06), var(--paper-2) 60%);
    border-color: rgba(201,162,39,0.30);
  }
  .tier[data-tier="ek"] .tier-amount { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .tier .ribbon {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--grad-gold);
    color: #4a3a06;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(201,162,39,0.40);
  }

  /* ======= Member directory ======= */
  .directory {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 32px;
    box-shadow: var(--shadow-2);
    margin-top: 48px;
  }
  .dir-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 24px;
  }
  .dir-head h3 {
    font-family: 'Fraunces', serif;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 4px;
  }
  .dir-head p { color: var(--ink-3); margin: 0; font-size: 14px; }
  .dir-filter {
    display: flex;
    gap: 6px;
    background: var(--paper-3);
    padding: 4px;
    border-radius: 999px;
  }
  .dir-filter button {
    background: transparent;
    border: 0;
    padding: 11px 16px;
    min-height: 44px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-3);
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: background 200ms var(--ease), color 200ms var(--ease);
  }
  .dir-filter button.on {
    background: var(--ink);
    color: white;
    box-shadow: var(--shadow-1);
  }
  .dir-filter button:not(.on):hover { color: var(--ink); }
  .members,
  .member-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
  }
  .member {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 18px;
    display: flex;
    gap: 14px;
    transition: transform 240ms var(--spring), border-color 200ms var(--ease), box-shadow 240ms var(--ease);
    position: relative;
  }
  .member:hover {
    transform: translateY(-2px);
    border-color: var(--line-2);
    box-shadow: var(--shadow-1);
  }
  .avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: white;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.02em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.20);
  }
  .avatar.c0 { background: linear-gradient(135deg, #5a7ad6, #002B80); }
  .avatar.c1 { background: linear-gradient(135deg, #C30017, #8a000f); }
  .avatar.c2 { background: linear-gradient(135deg, #c9a227, #8a6c10); }
  .avatar.c3 { background: linear-gradient(135deg, #1248c0, #001a52); }
  .avatar.c4 { background: linear-gradient(135deg, #5b3a8a, #2d1c4d); }
  .avatar.c5 { background: linear-gradient(135deg, #057a3a, #024020); }
  .member-info { min-width: 0; flex: 1; }
  .member-name {
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.01em;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .member-meta { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
  .member-tier {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
  }
  .member-tier.geen   { background: var(--paper-3); color: var(--ink-3); }
  .member-tier.bb     { background: rgba(0,43,128,0.10); color: var(--navy); }
  .member-tier.balkie { background: rgba(0,43,128,0.16); color: var(--navy-2); }
  .member-tier.hk     { background: rgba(195,0,23,0.10); color: var(--red); }
  .member-tier.ek     { background: linear-gradient(135deg, rgba(201,162,39,0.16), rgba(201,162,39,0.30)); color: #6b4a06; border: 1px solid rgba(201,162,39,0.40); }
  .member-tier .dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
  }
  .member-tier.geen .dot { background: var(--ink-4); }
  .member-tier.bb .dot { background: var(--navy); }
  .member-tier.balkie .dot { background: var(--navy-2); }
  .member-tier.hk .dot { background: var(--red); }
  .member-tier.ek .dot { background: var(--gold); }

  /* ======= Donation flow ======= */
  .donate {
    background:
      radial-gradient(ellipse at 90% 10%, rgba(195,0,23,0.07), transparent 50%),
      radial-gradient(ellipse at 10% 90%, rgba(0,43,128,0.10), transparent 50%),
      var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 40px;
    margin-top: 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-2);
  }
  .donate-copy h3 {
    font-family: 'Fraunces', serif;
    font-size: 34px;
    font-weight: 600;
    letter-spacing: -0.025em;
    margin: 0 0 10px;
    line-height: 1.05;
  }
  .donate-copy h3 .grad {
    background: var(--grad-red);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-style: italic;
    padding-right: 0.08em;
    margin-right: -0.04em;
  }
  .donate-copy p {
    color: var(--ink-2);
    font-size: 15px;
    margin: 0 0 22px;
    max-width: 460px;
  }
  .donate-bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .donate-bullets li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px;
    color: var(--ink-2);
  }
  .donate-bullets li svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--navy);
    margin-top: 2px;
  }
  .donate-bullets li b { color: var(--ink); font-weight: 700; }

  /* Donation form mockup */
  .form {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 26px;
    box-shadow: var(--shadow-1);
  }
  .form-step {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--red);
    margin-bottom: 8px;
  }
  .form h4 {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 0 0 18px;
  }
  .amounts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 18px;
  }
  .amounts button {
    background: var(--paper-2);
    border: 1.5px solid var(--line);
    border-radius: var(--r-md);
    padding: 16px 8px;
    min-height: 86px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    cursor: pointer;
    transition: transform 220ms var(--spring), border-color 200ms var(--ease), background 200ms var(--ease);
    text-align: center;
  }
  .amounts button:hover { transform: translateY(-2px); border-color: var(--line-2); }
  .amounts button.on {
    border-color: var(--navy);
    background: linear-gradient(180deg, rgba(0,43,128,0.06), rgba(0,43,128,0.02));
    box-shadow: inset 0 0 0 1.5px var(--navy);
  }
  .amounts .amt {
    font-family: 'Fraunces', serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1;
  }
  .amounts .tier {
    font-size: 10px;
    font-weight: 700;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 6px;
    text-wrap: balance;
    line-height: 1.25;
  }
  .amounts button.on .tier { color: var(--navy); }
  .amounts .input-amt {
    background: var(--paper-2);
    border: 1.5px solid var(--line);
    border-radius: var(--r-md);
    padding: 14px 10px;
    font-family: 'Fraunces', serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    text-align: center;
    width: 100%;
    transition: border-color 200ms var(--ease);
  }
  .amounts .input-amt:focus { outline: none; border-color: var(--navy); }

  /* "Ander bedrag" / Other amount — sits below the preset grid and matches
     the preset buttons' visual weight (same height, padding, radius, border,
     font scale). Feedback #18: previously a small inline input that felt
     out of place next to the chunky preset buttons. */
  .amount-other {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--paper-2);
    border: 1.5px solid var(--line);
    border-radius: var(--r-md);
    padding: 16px 8px;
    min-height: 86px;
    margin: 8px 0 18px;
    transition: border-color 200ms var(--ease), background 200ms var(--ease);
  }
  .amount-other:focus-within {
    border-color: var(--navy);
    box-shadow: inset 0 0 0 1.5px var(--navy);
    background: linear-gradient(180deg, rgba(0,43,128,0.06), rgba(0,43,128,0.02));
  }
  .amount-other-label {
    font-size: 10px; font-weight: 700; color: var(--ink-3);
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-bottom: 6px;
  }
  .amount-other-row {
    display: flex; align-items: baseline; gap: 4px;
    font-family: 'Fraunces', serif;
  }
  .amount-other-currency {
    font-size: 22px; font-weight: 600; color: var(--ink-3);
    line-height: 1;
  }
  .amount-other-input {
    border: 0; background: transparent;
    font-family: 'Fraunces', serif;
    font-size: 22px; font-weight: 600;
    color: var(--ink);
    width: 140px; text-align: center;
    letter-spacing: -0.02em;
    outline: none;
    line-height: 1;
    padding: 0;
  }
  .amount-other-input::placeholder { color: var(--ink-3); font-weight: 400; }
  .amount-other-input::-webkit-outer-spin-button,
  .amount-other-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .amount-other-input[type=number] { -moz-appearance: textfield; }
  .frequency {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    background: var(--paper-3);
    padding: 4px;
    border-radius: 999px;
  }
  .frequency button {
    flex: 1;
    background: transparent;
    border: 0;
    padding: 13px 10px;
    min-height: 44px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-3);
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: background 200ms var(--ease), color 200ms var(--ease);
  }
  .frequency button.on {
    background: var(--ink);
    color: white;
    box-shadow: var(--shadow-1);
  }
  .pay-methods {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 18px;
  }
  .pay-methods button {
    background: var(--paper-2);
    border: 1.5px solid var(--line);
    border-radius: var(--r-md);
    padding: 14px 12px;
    font-family: inherit;
    cursor: pointer;
    transition: transform 220ms var(--spring), border-color 200ms var(--ease);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-align: left;
  }
  .pay-methods button:hover { transform: translateY(-1px); border-color: var(--line-2); }
  .pay-methods button.on {
    border-color: var(--navy);
    background: linear-gradient(180deg, rgba(0,43,128,0.06), rgba(0,43,128,0.02));
    box-shadow: inset 0 0 0 1.5px var(--navy);
  }
  .pay-methods .pm-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
  }
  .pay-methods .pm-sub { font-size: 11px; color: var(--ink-3); }
  .allocation {
    margin-bottom: 22px;
  }
  .allocation-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
  }
  .alloc-chips { display: flex; gap: 6px; flex-wrap: wrap; }
  .alloc-chip {
    background: var(--paper-3);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 11px 14px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2);
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    line-height: 1;
    transition: background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
  }
  .alloc-chip:hover { background: var(--paper); border-color: var(--line-2); }
  .alloc-chip.on {
    background: rgba(0,43,128,0.10);
    color: var(--navy);
    border-color: rgba(0,43,128,0.30);
  }
  .donate-cta {
    width: 100%;
    background: var(--grad-red);
    color: white;
    padding: 16px;
    border: 0;
    border-radius: var(--r-md);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.005em;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(195,0,23,0.32), inset 0 1px 0 rgba(255,255,255,0.18);
    transition: transform 240ms var(--spring), box-shadow 240ms var(--ease);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .donate-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(195,0,23,0.42), inset 0 1px 0 rgba(255,255,255,0.20);
  }
  .donate-cta .arrow { transition: transform 240ms var(--spring); }
  .donate-cta:hover .arrow { transform: translateX(4px); }

  /* ======= Footer ======= */
  footer.foot {
    border-top: 1px solid var(--line);
    background: var(--paper);
    padding: 56px 24px 28px;
    margin-top: 80px;
  }
  footer.foot .wrap {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 48px;
  }
  footer.foot h5 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-3);
    font-weight: 700;
    margin: 0 0 14px;
  }
  footer.foot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
  footer.foot a { color: var(--ink-2); text-decoration: none; font-size: 14px; }
  footer.foot a:hover { color: var(--ink); }
  footer.foot .legal {
    margin-top: 40px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--ink-3);
  }
  footer.foot .legal a { font-size: 12px; color: var(--ink-3); }
  footer.foot .legal-by {
    font-size: 12px;
    color: var(--ink-3);
    line-height: 1.7;
    max-width: 360px;
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  footer.foot .legal-by > div { line-height: 1.6; }
  footer.foot .legal-by-eyebrow {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-3);
    font-weight: 600;
    margin-bottom: 4px;
  }
  footer.foot .legal-by strong { color: var(--ink-2); font-weight: 600; }
  footer.foot .legal-by a { font-weight: 600; color: var(--ink-2); border-bottom: 1px dotted var(--line); }
  footer.foot .legal-by a:hover { color: var(--navy); border-bottom-color: var(--navy); }
  @media (max-width: 780px) {
    footer.foot .legal-by { text-align: left; max-width: 100%; }
  }

  /* Design notes overlay (helps Stephan walk through visual rationale) */
  .notes {
    position: fixed;
    right: 22px;
    bottom: 22px;
    background: var(--ink);
    color: white;
    border-radius: var(--r-md);
    padding: 14px 16px 14px 14px;
    box-shadow: var(--shadow-3);
    max-width: 320px;
    font-size: 12px;
    line-height: 1.5;
    z-index: 100;
    animation: slide-in 600ms var(--spring) 400ms backwards;
  }
  @keyframes slide-in {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
  .notes b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.7; margin-bottom: 6px; }
  .notes button {
    position: absolute;
    top: 6px;
    right: 8px;
    background: transparent;
    border: 0;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    font-size: 14px;
  }

  /* ====== Language toggle ====== */
  .lang-toggle {
    display: flex;
    background: var(--paper-3);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
    border: 1px solid var(--line);
  }
  .lang-toggle a,
  .lang-toggle button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 6px 12px;
    min-height: 44px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-3);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
    transition: background 200ms var(--ease), color 200ms var(--ease);
    letter-spacing: 0.06em;
  }
  .lang-toggle a:hover,
  .lang-toggle button:hover { color: var(--ink); }
  .lang-toggle a.on,
  .lang-toggle button.on {
    background: var(--navy);
    color: white;
    box-shadow: var(--shadow-1);
  }

  /* ====== Social icons ====== */
  .social {
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .social-link {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--paper-3);
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    color: var(--ink-2);
    text-decoration: none;
    transition: transform 220ms var(--spring), background 220ms var(--ease), color 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
  }
  .social-link:hover { transform: translateY(-2px); border-color: transparent; }
  .social-link.fb:hover {
    background: #1877f2;
    color: white;
    box-shadow: 0 6px 16px rgba(24,119,242,0.40);
  }
  .social-link.ig:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: white;
    box-shadow: 0 6px 16px rgba(220,39,67,0.30);
  }
  .social-link svg { width: 18px; height: 18px; }
  .social-foot {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 14px;
  }
  .social-foot-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-3);
    font-weight: 700;
    margin-right: 4px;
  }

  @media (max-width: 900px) {
    .hero { padding: 56px 20px 36px; }
    .hero .wrap { grid-template-columns: 1fr; gap: 36px; }
    .tiers-grid { grid-template-columns: 1fr 1fr; }
    .tiers-grid .tier:nth-child(5) { grid-column: 1 / 3; }
    .donate { grid-template-columns: 1fr; padding: 28px; gap: 28px; }
    .baro-tiers { grid-template-columns: repeat(2, 1fr); }
    footer.foot .wrap { grid-template-columns: 1fr 1fr; gap: 32px; }
    nav.top ul.nav-links { display: none; }
    nav.top .nav-signin { display: none; }
  }

  /* Phone breakpoint */
  @media (max-width: 640px) {
    html, body { overflow-x: hidden; }

    /* Nav: tight, brand subline hidden, sign-in hidden, join shrinks */
    nav.top .wrap { padding: 10px 14px; gap: 8px; }
    .brand { gap: 8px; font-size: 15px; }
    .crest { width: 32px; height: 32px; font-size: 14px; }
    .brand-text .b1 { font-size: 14px; }
    .brand-text .b2 { display: none; }
    .lang-toggle { padding: 2px; }
    .lang-toggle a,
    .lang-toggle button { padding: 5px 10px; font-size: 11px; }
    nav.top .nav-signin { display: none; }
    nav.top .btn-cta { padding: 8px 14px; font-size: 13px; min-height: 36px; }
    nav.top .btn-cta .arrow { display: none; }

    /* Section padding */
    section.app { padding: 56px 16px; }

    /* Hero */
    .hero { padding: 44px 16px 28px; }
    .hero h1 { font-size: clamp(34px, 9vw, 44px); line-height: 1.05; }
    .hero .lede { font-size: 15px; }
    .hero-actions { flex-wrap: wrap; }
    .hero-actions .btn { width: 100%; justify-content: center; }
    .hero-trust { gap: 18px 22px; }
    .hero-trust .t-num { font-size: 28px; }
    .barometer { padding: 22px 20px; }
    .baro-num { font-size: 56px; }
    .baro-tiers { grid-template-columns: repeat(2, 1fr); gap: 6px; }

    /* Tiers single column */
    .tiers-grid { grid-template-columns: 1fr; gap: 14px; }
    .tiers-grid .tier:nth-child(5) { grid-column: auto; }
    .sec-h2 { font-size: 26px; }

    /* Donate panel: tighter, 2-up amount grid, looser labels */
    .donate { padding: 20px; gap: 22px; border-radius: 18px; }
    .donate-copy h3 { font-size: 26px; }
    .donate-copy p { font-size: 14px; }
    .form { padding: 18px; }
    .form-step { font-size: 11px; }
    .form h4 { font-size: 17px; }
    .amounts { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .amounts button { padding: 14px 6px; }
    .amounts .amt { font-size: 20px; }
    .amounts .tier { font-size: 11px; letter-spacing: 0.02em; word-spacing: 0; }
    .pay-methods { grid-template-columns: 1fr; }
    .donate-cta { font-size: 14px; padding: 14px; }

    /* Directory header stacks; chips wrap */
    .dir-head { flex-direction: column; align-items: flex-start; gap: 14px; }
    .dir-filter { flex-wrap: wrap; }

    /* Footer single column */
    footer.foot .wrap { grid-template-columns: 1fr; gap: 28px; padding: 40px 16px; }
    footer.foot .legal { flex-direction: column; align-items: flex-start; gap: 10px; }

    /* Floating notes: shrink, sit out of the way */
    .notes { left: 12px; right: 12px; bottom: 12px; max-width: none; padding: 10px 30px 10px 12px; font-size: 11px; line-height: 1.45; }
  }

  /* Very small phones (iPhone SE width) */
  @media (max-width: 380px) {
    nav.top .wrap { padding: 9px 12px; }
    nav.top .btn-cta { padding: 7px 12px; font-size: 12px; }
    .lang-toggle a,
    .lang-toggle button { padding: 4px 8px; font-size: 10px; }
    .hero h1 { font-size: clamp(30px, 9vw, 38px); }
    .amounts .tier { font-size: 10px; letter-spacing: 0.02em; }
  }

/* ===== Real school crest replaces the CSS-OR badge ===== */
.crest-img {
  width: 44px; height: 44px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

/* ===== Mobile: burger + drop-down sheet ===== */
.burger {
  display: none;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--ink-soft, #E4E8EF);
  border-radius: 10px;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
}
.burger span {
  display: block;
  width: 18px; height: 2px;
  background: var(--ink-1, #0E1726);
  border-radius: 2px;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-sheet {
  display: none;
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: white;
  border-bottom: 1px solid var(--ink-soft, #E4E8EF);
  box-shadow: 0 12px 28px rgba(14,23,38,0.08);
  padding: 12px 0;
  z-index: 50;
}
.mobile-sheet:not([hidden]) { display: flex; flex-direction: column; }
.mobile-sheet a {
  display: block;
  padding: 12px 24px;
  color: var(--ink-1, #0E1726);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  border-bottom: 1px solid #F2F4F7;
}
.mobile-sheet a:last-child { border-bottom: none; }
.mobile-sheet a:hover, .mobile-sheet a:focus-visible { background: var(--paper-3); }
.mobile-sheet .mob-cta {
  background: linear-gradient(135deg, #002B80, #1248c0);
  color: white;
  margin: 8px 24px;
  border-radius: 999px;
  text-align: center;
  font-weight: 600;
  border-bottom: none;
}

@media (max-width: 900px) {
  nav.top .nav-links,
  nav.top .lang-toggle,
  nav.top .nav-signin,
  nav.top .btn-cta { display: none; }
  .burger { display: flex; }
  .crest-img { width: 36px; height: 36px; }
  nav.top .b1 { font-size: 14px; }
  nav.top .b2 { font-size: 10.5px; }
}

/* ===== Page primitives reused by every module ===== */
.section {
  padding: clamp(36px, 6vw, 72px) 0;
}
.section > .wrap,
.page-hero > .wrap {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
.page-hero {
  position: relative;
  padding: clamp(48px, 8vw, 96px) 0 clamp(28px, 4vw, 48px);
  background: linear-gradient(180deg, var(--paper-3) 0%, var(--paper) 100%);
  border-bottom: 1px solid var(--line);
}
.page-hero h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: clamp(32px, 5vw, 48px);
  margin: 0 0 12px;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.page-hero p {
  color: var(--ink-2);
  font-size: clamp(15px, 1.6vw, 17px);
  max-width: 640px;
  line-height: 1.55;
  margin: 0;
}
.page-hero.with-image {
  background-size: cover;
  background-position: center;
  color: white;
  border-bottom: none;
  min-height: 240px;
  display: flex;
  align-items: center;
}
.page-hero.with-image::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,43,128,0.65) 0%, rgba(14,23,38,0.85) 100%);
  z-index: 1;
}
.page-hero.with-image > .wrap { position: relative; z-index: 2; }
.page-hero.with-image h1 { color: white; }
.page-hero.with-image p  { color: rgba(255,255,255,0.85); }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(14,23,38,0.06); }
/* Card hero media. Works for both <div class="card-img"> (gradient
   fallback when no image) and <img class="card-img"> (real photo).
   The width:100%, display:block, object-fit:cover trio makes <img>
   variants fill the aspect-ratio box cleanly on mobile — previously
   we set background-image inline on a div, which renders fine on
   desktop but is fragile on iOS Safari at narrow viewports because
   the URL is parsed inside an attribute (single-quote escaping +
   pointer-events quirks both bit us). Switching to a real <img>
   element gets intrinsic dimensions and the browser-native loading
   pipeline; the div remains for the no-image case so the gradient
   placeholder still shows up. */
.card-img {
  aspect-ratio: 16/9;
  width: 100%;
  display: block;
  object-fit: cover;
  background: linear-gradient(135deg, #002B80 0%, #1248c0 60%, #C30017 100%);
  background-size: cover;
  background-position: center;
}
.card-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.card-meta {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3a);
  margin-bottom: 6px;
}
.card-body h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 19px;
  margin: 0 0 8px;
  color: var(--ink-a);
  line-height: 1.25;
}
.card-body p {
  color: var(--ink-2a);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 14px;
  flex-grow: 1;
}
.card-cta {
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 0;
}
.card-cta:hover { text-decoration: underline; }

.stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.stack > * { width: 100%; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 720px) {
  .form-row { grid-template-columns: 1fr; }
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2a);
  letter-spacing: 0.01em;
}
.field input, .field select, .field textarea {
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  /* Theme-aware: var(--paper) is white in light mode, near-black in
     dark mode. Was previously hard-coded "white" -- in dark mode the
     ink-a token resolves to near-white so the text became invisible
     on the unswitched white background. The css [type="text"] dark-
     mode override doesn't catch inputs that lack an explicit type
     attribute (most of the join form), so the cleanest fix is to
     theme the .field rule itself. */
  background: var(--paper);
  color: var(--ink-a);
  transition: border-color 150ms var(--ease);
}
.field input::placeholder, .field textarea::placeholder {
  color: var(--ink-3);
  opacity: 1;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0;
  border-color: #002B80;
  box-shadow: 0 0 0 3px rgba(0,43,128,0.12);
}
.field textarea { resize: vertical; min-height: 110px; }

.alert {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  margin-bottom: 18px;
}
.alert.ok    { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.alert.warn  { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }
.alert.err   { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }

.tag {
  display: inline-block;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  background: #EDF1F7;
  color: var(--ink-2a);
}
.tag.success { background: #D1FAE5; color: #065F46; }
.tag.warn    { background: #FEF3C7; color: #92400E; }
.tag.err     { background: #FEE2E2; color: #991B1B; }

/* ===== Admin layout ===== */
.admin-shell {
  display: grid;
  grid-template-columns: 230px 1fr;
  min-height: calc(100vh - 80px);
  gap: 0;
}
.admin-sidebar {
  background: #0E1726;
  color: rgba(255,255,255,0.85);
  padding: 24px 16px;
  /* Stay pinned to the viewport regardless of how far the main column
     scrolls. position:fixed was chosen over position:sticky because
     `body { overflow-x: hidden }` (set elsewhere for layout safety)
     makes the body a scroll container, which breaks sticky's reference
     to the viewport in some browsers. The .admin-shell grid still
     reserves the 230px column so .admin-main sits in the right place.
     Internal overflow-y:auto keeps very long nav lists reachable on
     short viewports.
  */
  position: fixed;
  top: 65px;        /* clears the public-site sticky top nav */
  bottom: 0;
  left: 0;
  width: 230px;
  overflow-y: auto;
  z-index: 5;
}
.admin-sidebar h4 {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin: 18px 8px 8px;
}
.admin-sidebar a {
  display: block;
  padding: 9px 12px;
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  border-radius: 8px;
}
.admin-sidebar a:hover { background: rgba(255,255,255,0.06); }
.admin-sidebar a.active { background: rgba(255,255,255,0.1); color: white; font-weight: 600; }
.admin-main {
  /* position:fixed on .admin-sidebar removes it from grid auto-placement,
     so .admin-main would otherwise fall into column 1 and render under
     the sidebar. Pin to column 2 explicitly so it occupies the 1fr track. */
  grid-column: 2;
  padding: clamp(20px, 3vw, 36px);
  background: var(--paper-3);
  min-width: 0;
}
.admin-h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(24px, 3vw, 32px);
  margin: 0 0 18px;
  color: var(--ink-a);
}
.admin-card {
  /* Theme-aware via --paper. Was previously hard-coded white; the
     dark-mode bulk-override at the bottom of this file repins it via
     --paper-2, but routing through the token here makes the rule
     self-consistent and avoids dependency on the override ordering. */
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 18px;
}
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th, .admin-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid #F2F4F7;
}
.admin-table th { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3a); }
.admin-table tr:hover td { background: #FAFBFC; }

@media (max-width: 720px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-main { grid-column: 1; }
  .admin-sidebar {
    /* On mobile, revert to in-flow horizontal chip layout — the
       fixed-positioned column doesn't make sense when the viewport
       is too narrow to host a 230px sidebar AND content. */
    position: static;
    top: auto; bottom: auto; left: auto;
    width: auto;
    display: flex; flex-wrap: wrap; gap: 4px;
    padding: 14px 16px;
    overflow-y: visible;
  }
  .admin-sidebar h4 { display: none; }
  .admin-sidebar a {
    flex: 1 1 auto; padding: 8px 12px; font-size: 12px; text-align: center;
    background: rgba(255,255,255,0.06);
  }
  .admin-table thead { display: none; }
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; }
  .admin-table tr {
    border: 1px solid var(--line); border-radius: 10px;
    padding: 12px; margin-bottom: 10px; background: white;
  }
  .admin-table td { border: none; padding: 4px 0; }
  .admin-table td::before {
    content: attr(data-label);
    display: block; font-size: 11px; color: var(--ink-3a);
    text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px;
  }
}

/* ===== Global keyboard focus ring (a11y) =====
   Only renders for keyboard nav, not mouse clicks — :focus-visible. */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===== Card resting elevation (subtle) ===== */
.card { box-shadow: var(--shadow-1); }

/* ===== Join page: sign-in nudge ===== */
.join-signin-nudge {
  text-align: right;
  margin: -6px 0 18px;
  color: var(--ink-3a);
  font-size: 14px;
}
.join-signin-nudge a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}
.join-signin-nudge a:hover { text-decoration: underline; }

/* ===== Join page tier grid — 5 cards, balanced on mobile ===== */
.join-tier-grid { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) {
  .join-tier-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .join-tier-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Friendly empty state for lists with no data yet ===== */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  background: var(--paper-2);
  border: 1px dashed var(--line);
  border-radius: 16px;
  margin-top: 18px;
}
.empty-state h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  color: var(--ink);
  margin: 0 0 10px;
}
.empty-state p {
  color: var(--ink-3);
  max-width: 480px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.6;
}
@media (max-width: 720px) {
  .empty-state { padding: 32px 16px; }
  .empty-state h4 { font-size: 18px; }
}

/* ===== Skip-to-content link (a11y, only visible on focus) ===== */
.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  background: var(--navy);
  color: white;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  z-index: 9999;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 12px;
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ===== Two-column layouts that collapse on mobile ===== */
.split-2 {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 24px;
}
.split-2.equal { grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) {
  .split-2,
  .split-2.equal { grid-template-columns: 1fr; gap: 16px; }
}

/* ===== School-image hero overlays for module pages ===== */
.hero-events { background-image: url('/static/img/kultuur.jpg'); }
.hero-stories { background-image: url('/static/img/akademie.jpg'); }
.hero-shop { background-image: url('/static/img/sport.jpg'); }
.hero-honour { background-image: url('/static/img/alumni-hero.jpg'); }
.hero-mentor { background-image: url('/static/img/matriek-seuns.webp'); }
.hero-join { background-image: url('/static/img/matriek-dogters.webp'); }
.hero-contact { background-image: url('/static/img/alumni-hero.jpg'); }

/* =============================================================
   HERO CONCEPTS — admin-selectable via /admin/hero-concepts
   Design language: deep navy base, crest in original colours inside a
   cream medallion, red as thin structural accent only, gold for premium
   glints. NEVER use cream as a full-page background.
   ============================================================= */

:root {
  --hero-navy:      #002B80;
  --hero-navy-deep: #001a4f;
  --hero-red:       #C30017;
  --hero-gold:      #E5C46B;
  --hero-cream:     #F7F1E0;
  --hero-ink:       #ffffff;
  --hero-ink-soft:  rgba(255,255,255,0.78);
}

/* --- Shared chrome (used by all hero-rb concepts) --- */
.hero-rb {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  display: flex; align-items: center;
  color: var(--hero-ink);
  isolation: isolate;
  background: var(--hero-navy-deep);
}
.hero-rb-bg { position: absolute; inset: 0; z-index: 0; }
.hero-rb-bg svg { width: 100%; height: 100%; display: block; }
.hero-rb-content {
  position: relative; z-index: 2;
  margin: 0 auto; padding: 80px 24px;
  max-width: 1120px; width: 100%;
  display: flex; flex-direction: column; align-items: flex-start;
}
.hero-rb-eyebrow {
  display: inline-block;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--hero-gold);
  font-weight: 700;
  margin-bottom: 18px;
}
.hero-rb-headline,
.hero-rb-monolith {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  color: var(--hero-ink);
  margin: 0 0 16px;
  letter-spacing: -0.015em;
}
.hero-rb-headline { font-size: clamp(34px, 4.8vw, 56px); line-height: 1.05; }
/* "Eens 'n Randjie. Vir altyd Alumni." — middle phrase in the school's
   brand crimson (#C30017) with a soft brighter halo so the edges feather
   and the type remains legible against the deep-navy hero. Brand-faithful
   fill, lift from the glow only. */
.hero-rb-headline-split { letter-spacing: -0.015em; }
.hero-rb-headline-split > span { color: var(--hero-ink); }
.hero-rb-headline-split > span.grad-dark {
  color: #E63347;
  font-style: italic;
  text-shadow:
    0 0 32px rgba(255, 99, 122, 0.55),
    0 0 12px rgba(255, 99, 122, 0.30),
    0 1px 0 rgba(195, 0, 23, 0.40);
  padding-right: 0.04em;
}
.hero-rb-monolith {
  font-size: clamp(60px, 12vw, 168px);
  line-height: 0.92;
  letter-spacing: -0.025em;
}
.hero-rb-rule {
  width: 80px; height: 3px;
  background: var(--hero-red);
  border-radius: 2px;
  margin: 22px 0 22px;
  box-shadow: 0 0 0 1px rgba(229,196,107,0.35);
}
.hero-rb-lede {
  font-size: 17px; line-height: 1.55;
  color: var(--hero-ink-soft);
  margin: 0 0 28px;
  max-width: 560px;
}
.hero-rb-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* --- White medallion: pure neutral so the crest's navy star reads crisp ---
   Earlier passes used a warm cream gradient + a gold ring. The cream-on-navy
   simultaneous-contrast effect was making the star perceptually purple-cast.
   Pure white interior + neutral grey edge + a single hairline (no gold) kills
   that effect. The medallion still reads "premium frame" via the drop
   shadow + the subtle inner shading, but the crest's original colours
   finally render true. */
.hero-crest-medallion {
  position: relative;
  width: clamp(190px, 24vw, 280px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #FFFFFF 0%, #FAFAFA 90%, #ECECEC 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.7),
    0 0 24px rgba(255,255,255,0.18),
    0 20px 50px -20px rgba(0,0,0,0.55);
  margin-bottom: 24px;
}
.hero-crest-medallion img {
  width: 84%; height: 84%; object-fit: contain;
  /* No drop-shadow on the image — it muddied the navy regions of the crest. */
}
.hero-crest-medallion-sm {
  width: clamp(110px, 12vw, 150px);
  height: clamp(110px, 12vw, 150px);
  margin-bottom: 18px;
}

/* --- 1. Embleem Sentraal: centred shield-page composition --- */
.hero-embleem-content { align-items: center; text-align: center; }
.hero-embleem-content .hero-rb-lede { text-align: center; }
.hero-embleem-content .hero-rb-actions { justify-content: center; }

/* --- 2. Skild: 60/40 asymmetric, navy left + parchment-card right --- */
.hero-skild { min-height: 600px; }
.hero-skild-wrap {
  position: relative; z-index: 2;
  margin: 0 auto; padding: 80px 24px;
  max-width: 1240px; width: 100%;
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 48px; align-items: center;
}
.hero-skild-left { display: flex; flex-direction: column; align-items: flex-start; }
.hero-skild-right { display: flex; justify-content: center; }
.skild-card {
  width: 100%; max-width: 380px;
  background: var(--hero-cream);
  border-radius: 18px;
  padding: 28px 26px;
  box-shadow:
    0 0 0 1px rgba(229,196,107,0.5),
    0 30px 60px -20px rgba(0,0,0,0.45);
  color: var(--hero-navy-deep);
  position: relative;
}
.skild-card::before {
  content: ""; position: absolute; left: 20px; right: 20px; top: 0; height: 3px;
  background: var(--hero-red); border-radius: 0 0 3px 3px;
}
.skild-card-eyebrow {
  display: inline-block;
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--hero-red); font-weight: 800;
  margin-bottom: 14px;
}
.skild-card-num { font-family: 'Fraunces', Georgia, serif; line-height: 1; margin-bottom: 6px; }
.skild-num { font-size: 64px; font-weight: 600; color: var(--hero-navy-deep); }
.skild-den { font-size: 22px; font-weight: 500; color: rgba(0,26,79,0.55); margin-left: 6px; }
.skild-card-suffix { display: block; font-size: 13px; color: rgba(0,26,79,0.7); margin-bottom: 16px; }
.skild-bar { height: 8px; background: rgba(0,43,128,0.12); border-radius: 999px; overflow: hidden; margin-bottom: 18px; }
.skild-bar-fill { height: 100%; background: linear-gradient(90deg, var(--hero-red), var(--hero-gold)); }
.skild-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  padding-top: 14px; border-top: 1px solid rgba(0,43,128,0.12);
}
.skild-stats .ss-num { font-family: 'Fraunces', Georgia, serif; font-size: 22px; font-weight: 600; color: var(--hero-navy-deep); }
.skild-stats .ss-lab { font-size: 11px; color: rgba(0,26,79,0.6); letter-spacing: 0.04em; }
@media (max-width: 900px) { .hero-skild-wrap { grid-template-columns: 1fr; gap: 36px; } }

/* --- 3. Konstellasie: alumni network, crest is the brightest node ---
   Layering inside .hero-konst:
     z=0  svg gradient + halo (.hero-rb-bg)
     z=1  animated canvas (dots + lines + cursor pull)
     z=2  crest image + content text
   On narrow viewports we hide the canvas and use a much cheaper static
   SVG dot pattern (.hero-konst-static) instead. Saves battery + sidesteps
   "you can't hover on a touchscreen" — the cursor-pull is the whole point. */
.hero-konst-canvas {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;  /* the host section captures mousemove */
  display: block;
}
/* Static SVG fallback inside .hero-rb-bg — shown only when the canvas
   hasn't initialised (no-JS, very slow first paint). Once JS adds the
   .konst-live class to the host, hide the fallback so it doesn't ghost
   behind the animated particles on the left half. */
.hero-konst.konst-live .konst-static-fallback { display: none; }
/* Konstellasie crest backdrop — pure white disc behind the crest so the
   shield's dark star has a light ground to read against. NOT a framed
   medallion (no rings, no gold edge) — just a clean white circle sized
   to the crest so the eye reads "crest on white" rather than "crest with
   ring". The animation canvas draws BELOW (z=1); the medallion sits at
   z=2 so particles flow around the crest, not over it. */
.hero-konst-medallion {
  position: absolute;
  /* Pulled left vs the previous clamp(20px, 12vw, 220px) so the disc
     reads as anchored to the hero rather than floating off the right
     edge. */
  right: clamp(20px, 14vw, 280px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(180px, 26vw, 300px);
  aspect-ratio: 1 / 1;
  z-index: 2;
  /* Flat white disc -- the previous radial gradient (#FFFFFF -> #FAFAFA
     -> #ECECEC) made the square JPEG's white edges visible as faint
     square corners against the gradient ring. overflow:hidden also
     guards against any img bleed if the inner badge ever overflows. */
  background: #FFFFFF;
  border-radius: 50%;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.55);
  pointer-events: none;
}
.hero-konst-medallion img {
  /* Bumped from 84% so Thiart's badge dominates the disc instead of
     swimming inside a wide white ring. */
  width: 96%; height: 96%; object-fit: contain;
}
/* Keep the headline + lede clear of the right-side medallion at desktop
   widths. The medallion is 300px wide with clamp(20,12vw,220)px right
   offset, so we cap the content at the viewport-minus-medallion-zone
   to prevent the italic "Vir altyd Alumni" headline from running into
   the crest disc. The 380px reserve covers medallion width + gap. */
.hero-konst-content {
  max-width: min(620px, calc(100vw - 380px));
  position: relative; z-index: 2;
}
.hero-konst-content .hero-rb-headline {
  /* Cap top-end size so the italic tracking doesn't overflow the
     content column on large desktop viewports. */
  font-size: clamp(34px, 5vw, 64px);
}
@media (max-width: 760px) {
  .hero-konst-content { max-width: 100%; }
  .hero-konst-content .hero-rb-headline { font-size: clamp(28px, 7vw, 44px); }
}
/* Class-year cluster — small SVG floating on the upper-left, balancing the
   crest on the right. Hidden under 1000px so the headline gets the full row. */
.hero-konst-cluster {
  position: absolute;
  left: clamp(40px, 6vw, 120px);
  top: clamp(50px, 8vh, 90px);
  width: clamp(220px, 22vw, 320px);
  height: auto;
  z-index: 2;
  opacity: 0.85;
  pointer-events: none;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.4));
}
@media (max-width: 1000px) { .hero-konst-cluster { display: none; } }

/* Narrow viewport: drop the canvas animation, stack the crest above text. */
@media (max-width: 760px) {
  .hero-konst-canvas { display: none; }
  .hero-konst-medallion {
    position: relative; right: auto; top: auto; transform: none;
    margin: 0 auto 24px;
    width: clamp(140px, 38vw, 200px);
    height: clamp(140px, 38vw, 200px);
  }
  .hero-konst-content { padding-top: 20px; }
}
/* Reduced-motion: also drop the animation; the JS additionally renders a
   single frame and stops. Hiding via CSS makes it disappear entirely so
   nothing draws to the canvas at all. */
@media (prefers-reduced-motion: reduce) {
  .hero-konst-canvas { opacity: 0.5; }
}

/* --- 4. Erekleur: navy top + red band + navy bottom (book-cover plaque) --- */
.hero-erekleur { min-height: 600px; display: block; padding: 0; }
.hero-erekleur-top, .hero-erekleur-bot {
  position: relative; z-index: 2;
  max-width: 1120px; margin: 0 auto;
  padding: 0 24px; width: 100%;
}
.hero-erekleur-top {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding-top: 56px; padding-bottom: 56px;
  height: 280px; justify-content: center;
}
.hero-erekleur-bot {
  display: flex; flex-direction: column; align-items: flex-start;
  padding-top: 50px; padding-bottom: 50px;
}
.hero-erekleur-name {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: 0.02em;
  color: var(--hero-ink);
  margin-top: 10px;
}
.hero-erekleur-est {
  display: block;
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--hero-gold);
  margin-top: 6px;
}
@media (max-width: 700px) { .hero-erekleur-top { height: 220px; } }

/* --- Watermark (deprecated; kept for any future photo concept) --- */
.hero-watermark {
  position: absolute; top: 14px; left: 14px; z-index: 4;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(0,0,0,0.55); color: #fff;
  padding: 4px 10px; border-radius: 999px;
}

/* --- Ghost button on dark backgrounds --- */
.btn-ghost-light {
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.6);
  color: #fff;
}
.btn-ghost-light:hover { background: rgba(255,255,255,0.16); }

/* --- Detached barometer (shown beneath non-classic concepts) --- */
.section-barometer { padding-top: 36px; padding-bottom: 0; }
.barometer-detached {
  max-width: 720px; margin: 0 auto;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 22px 26px; box-shadow: var(--shadow-1);
}

/* =============================================================
   Hero-concept gallery (/admin/hero-concepts)
   ============================================================= */
.hero-gallery {
  display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 16px;
}
@media (min-width: 1100px) {
  .hero-gallery { grid-template-columns: 1fr 1fr; }
}
.hero-gallery-card {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 18px 18px 22px; box-shadow: var(--shadow-1);
  position: relative; overflow: hidden;
}
.hero-gallery-card.is-current { border-color: #1E9C57; box-shadow: 0 0 0 2px rgba(30,156,87,0.18); }
.hero-gallery-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.hero-gallery-head h3 { font-family: 'Fraunces', Georgia, serif; margin: 0; font-size: 18px; }
.hero-gallery-tone { color: var(--ink-3); font-size: 13px; margin: 0 0 14px; line-height: 1.5; }
.hero-gallery-preview {
  background: #001a4f; border-radius: 12px; overflow: hidden;
  height: 280px; position: relative;
  isolation: isolate;
}
.hero-gallery-scale {
  position: absolute; inset: 0;
  transform: scale(0.42); transform-origin: top left;
  width: 238%; height: 238%;
  pointer-events: none;  /* preview only — buttons inside are demonstrative */
}
.hero-gallery-scale .hero { min-height: 600px; }
.hero-gallery-scale .barometer-detached, .hero-gallery-scale .section-barometer { display: none; }
.hero-gallery-form {
  display: flex; align-items: center; gap: 14px;
  margin-top: 14px; flex-wrap: wrap;
}
.hero-gallery-meta {
  font-size: 12px; color: var(--ink-3); letter-spacing: 0.04em;
}

/* =============================================================
   PayFast trust strip (_trust_payfast.html include)
   ============================================================= */
.trust-payfast {
  margin-top: 16px;
  padding: 14px 16px;
  background: #FAF7F1;
  border: 1px solid #E8DFCD;
  border-radius: 12px;
  font-size: 13px;
  color: var(--ink-2);
}
.trust-payfast-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.trust-lock {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: #1E9C57; color: #fff;
}
.trust-text { font-weight: 600; color: var(--ink-1); }
.trust-payfast-wordmark {
  display: inline-flex; align-items: center; gap: 0;
  font-weight: 800; font-size: 14px; letter-spacing: -0.01em;
  color: #0E2438;
}
.trust-sandbox-pill {
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em;
  padding: 4px 9px; border-radius: 5px;
  background: #FF6B00;
  color: #fff;
  text-transform: uppercase;
  margin-left: 4px;
}
.trust-payfast-wordmark .trust-payfast-glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: #FF6B00;
  color: #fff;
  border-radius: 5px;
  margin-right: 6px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14px;
  font-weight: 700;
}
.trust-methods {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px;
  align-items: center;
}
.trust-method {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.01em;
  padding: 5px 10px 5px 8px; border-radius: 6px;
  /* var(--paper) is theme-aware: white in light mode, dark in dark mode. */
  border: 1px solid var(--line); background: var(--paper); color: var(--ink-2);
  text-transform: none;
  min-height: 28px;
}
html[data-theme="dark"] .trust-method { color: var(--ink); }
html[data-theme="dark"] .trust-method.trust-apple { color: var(--ink); }
.trust-method.trust-apple { color: #000; }
.trust-mark { display: block; flex-shrink: 0; }
/* Visa wordmark dimensions chosen to match the SVG viewBox ratio EXACTLY
   (64/22 = 2.909). 52x18 = 2.889, within 1% — close enough that the
   browser's pixel snapping doesn't crush the curves. The previous 38x13
   was too small for the "isa" detail and aspect-ratio CSS got overridden
   by the inline width/height attrs on the SVG element. Mastercard's two
   overlapping circles read fine even tight, so it stays compact. */
.trust-method.trust-visa .trust-mark { width: 52px !important; height: 17px !important; }
.trust-method.trust-mc   .trust-mark { width: 32px !important; height: 20px !important; }
.trust-fine {
  font-size: 12px; line-height: 1.5; color: var(--ink-3);
  margin: 0;
}

/* =============================================================
   About-us section — homepage "Wie is ons / Who we are"
   Calm, dignified panel on the brand navy with a parchment serif
   block of body text. Same design DNA as the hero concepts so the
   page reads as one composition top-to-bottom.
   ============================================================= */
.section-about {
  position: relative;
  background: linear-gradient(180deg, #001a4f 0%, #002B80 100%);
  color: var(--hero-ink);
  padding: clamp(72px, 9vw, 110px) 24px;
  overflow: hidden;
}
.section-about-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
.about-wrap { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; text-align: center; }
.about-badge {
  display: block;
  width: 200px;
  height: 200px;
  aspect-ratio: 1 / 1;
  margin: 0 auto 30px;
  object-fit: cover;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow:
    0 0 0 4px #FFFFFF,
    0 0 0 5px rgba(229, 196, 107, 0.55),
    0 12px 30px rgba(0, 43, 128, 0.30);
  animation: aboutBadgeFloat 6s ease-in-out infinite;
}
@media (max-width: 560px) {
  .about-badge { width: 150px; height: 150px; margin-bottom: 22px; }
}
@keyframes aboutBadgeFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .about-badge { animation: none; }
}
.about-eyebrow {
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--hero-gold); font-weight: 700; margin-bottom: 14px;
}
.about-h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(30px, 4.2vw, 46px); line-height: 1.1;
  font-weight: 600; letter-spacing: -0.015em;
  color: var(--hero-ink);
  margin: 0 0 24px;
}
.about-body {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.65;
  color: rgba(255,255,255,0.88);
  max-width: 720px; margin: 0 auto 32px;
  font-weight: 400;
  font-style: italic;
}
.about-rule {
  width: 64px; height: 2px; background: var(--hero-red);
  margin: 0 auto 40px; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(229,196,107,0.4);
}
.about-pillars {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  max-width: 760px; margin: 0 auto;
  padding-top: 28px;
}
.about-pillars-thread {
  position: absolute;
  left: 0; right: 0; top: 0;
  width: 100%; height: 30px;
  pointer-events: none;
}
.pillar {
  position: relative;
  text-align: center;
  padding: 22px 6px 14px;
}
.pillar-dot {
  position: absolute;
  top: -5px; left: 50%; transform: translateX(-50%);
  width: 9px; height: 9px;
  background: var(--hero-gold);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(229,196,107,0.18);
}
.pillar-num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px; font-weight: 600;
  color: var(--hero-gold);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.pillar-title {
  font-size: 12px; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.82); font-weight: 600;
}
@media (max-width: 720px) {
  .about-pillars { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .about-pillars-thread { display: none; }
}

/* ============================================================
   Per-section feedback widget
   ============================================================
   Live during pre-launch testing only. A small navy-tinted pill
   sits in the corner of each meaningful section; tapping it opens
   a single shared modal. Toast confirms send. All chrome is gated
   by the `feedback_mode` feature flag in templating, so the moment
   admin flips it off after launch the buttons + modal vanish.
*/
.feedback-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px;
  background: #E5C46B;
  border: 1px solid #C9A647;
  color: #002B80;
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
  font-family: 'Inter', system-ui, sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(229, 196, 107, 0.35);
  transition: background 160ms var(--ease), border-color 160ms var(--ease), transform 120ms var(--ease), box-shadow 160ms var(--ease);
  min-height: 44px;  /* WCAG/Apple HIG tap-target minimum */
}
.feedback-trigger:hover {
  background: #F0D58A;
  border-color: #B89236;
  box-shadow: 0 4px 10px rgba(229, 196, 107, 0.5);
}
.feedback-trigger:active { transform: translateY(1px); }
.feedback-trigger svg { opacity: 0.9; }

/* On dark hero/navy sections — keep the gold pill (it's the point: visible),
   but bump the contrast against the dark background. */
.feedback-trigger.on-dark {
  background: #E5C46B;
  border-color: #F0D58A;
  color: #001A4F;
  box-shadow: 0 4px 14px rgba(229, 196, 107, 0.55);
}
.feedback-trigger.on-dark:hover {
  background: #F0D58A;
  box-shadow: 0 6px 18px rgba(229, 196, 107, 0.65);
}

/* Floating placement helper — sits in section's top-right when the
   parent section is `position: relative`. */
.feedback-trigger-pin {
  position: absolute; top: 12px; right: 14px;
  z-index: 5;
}

/* Section-foot — right-aligned strip at the bottom of a section,
   carries the inline trigger button in normal flow. */
.feedback-section-foot {
  display: flex; justify-content: flex-end;
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px dashed rgba(0, 43, 128, 0.10);
}

/* Modal */
.feedback-modal {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 9000;
  animation: fbFade 160ms ease-out;
}
.feedback-modal[hidden] { display: none; }
.feedback-backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 14, 28, 0.55);
  backdrop-filter: blur(2px);
}
.feedback-panel {
  position: relative;
  background: #fff;
  width: min(540px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  border-radius: 14px;
  padding: 28px 28px 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
  font-family: 'Inter', system-ui, sans-serif;
  animation: fbRise 220ms var(--ease);
}
.feedback-close {
  position: absolute; top: 10px; right: 12px;
  background: none; border: 0;
  font-size: 24px; line-height: 1;
  color: var(--ink-3);
  cursor: pointer;
  padding: 4px 8px;
}
.feedback-close:hover { color: var(--ink); }
.feedback-title {
  font-family: 'Fraunces', Georgia, serif;
  margin: 0 0 4px;
  font-size: 22px;
  color: var(--ink);
}
.feedback-sub {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--ink-3);
}
.feedback-sub code {
  font-size: 12px;
  background: var(--paper-3);
  padding: 2px 7px;
  border-radius: 5px;
  color: var(--ink-2);
}
.feedback-label {
  display: block;
  font-size: 12px; font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.feedback-modal textarea,
.feedback-modal input[type="email"] {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line-2, #DCE2EE);
  color: var(--ink);
  background: #fff;
  resize: vertical;
  box-sizing: border-box;
}
.feedback-modal textarea:focus,
.feedback-modal input[type="email"]:focus {
  outline: none;
  border-color: #002B80;
  box-shadow: 0 0 0 3px rgba(0, 43, 128, 0.14);
}
.feedback-actions {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 16px;
}

/* Toast */
.feedback-toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px; font-weight: 500;
  padding: 10px 18px;
  border-radius: 999px;
  z-index: 9100;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  animation: fbRise 200ms var(--ease);
  max-width: calc(100vw - 32px);
}
.feedback-toast[hidden] { display: none; }
.feedback-toast.ok { background: #1E9C57; }
.feedback-toast.err { background: #B0263A; }

@keyframes fbFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fbRise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .feedback-modal, .feedback-panel, .feedback-toast { animation: none; }
}

@media (max-width: 560px) {
  .feedback-panel { padding: 22px 18px 18px; border-radius: 12px; }
  .feedback-trigger-pin { top: 8px; right: 10px; }
}

/* ============================================================
   Page-hero (inner tabs) — shared chrome, per-tab motif
   ============================================================
   Slimmer cousin of the homepage konstellasie hero. Used by every
   non-home tab (events / stories / donate / etc.). Carries the same
   navy gradient, gold-dot language, italic emphasis text and
   Fraunces serif headlines so the site reads as one composition.
   Each tab swaps the motif SVG via _pagehero_motif_<id>.html.
*/
.pagehero-rb {
  position: relative;
  min-height: clamp(360px, 48vh, 480px);
  display: grid; align-items: center;
  overflow: hidden;
  color: #F5F2E8;
  isolation: isolate;
  padding: clamp(40px, 6vw, 80px) 0 clamp(40px, 5vw, 64px);
  border-bottom: 1px solid rgba(229, 196, 107, 0.18);
}
.pagehero-rb-bg {
  position: absolute; inset: 0; z-index: 0;
}
.pagehero-rb-bg svg { width: 100%; height: 100%; display: block; }
.pagehero-rb-content {
  position: relative; z-index: 2;
  width: 100%; max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex; flex-direction: column; align-items: flex-start;
  max-width: min(620px, calc(100vw - 420px));
}
.pagehero-rb-content .hero-rb-eyebrow { color: #E5C46B; margin-bottom: 14px; }
.pagehero-rb-content .hero-rb-headline {
  color: #FFFFFF;
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.05;
  margin: 0 0 16px;
}
.pagehero-rb-content .hero-rb-headline > span { color: #FFFFFF; }
.pagehero-rb-content .hero-rb-headline > span.grad-dark {
  color: #E63347;
  font-style: italic;
  text-shadow:
    0 0 28px rgba(255, 99, 122, 0.5),
    0 0 10px rgba(255, 99, 122, 0.3);
}
.pagehero-rb-content .hero-rb-lede {
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.55;
  margin: 0 0 22px;
  max-width: 560px;
}
.pagehero-rb-content .hero-rb-actions {
  display: flex; gap: 12px; flex-wrap: wrap;
}

/* Canvas animation layer — sits between bg (z=0) and content (z=2).
   pointer-events:auto on the donate variant enables click-to-ripple;
   the content layer at z=2 naturally intercepts clicks over CTAs/text. */
.pagehero-canvas {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  display: block;
}
.pagehero-canvas-donate {
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .pagehero-canvas { opacity: 0; pointer-events: none; }
}
@media (max-width: 760px) {
  .pagehero-canvas { display: none; }
}

/* Alumni badge — consistent brand mark on every inner-page hero. Top-right,
   above the motif. Same float animation as the homepage .about-badge so the
   brand mark feels unified across the site. aspect-ratio: 1/1 guarantees a
   perfect circle regardless of any flex/grid pressure in the parent chain. */
.pagehero-badge {
  position: absolute;
  top: clamp(18px, 3vw, 28px);
  right: clamp(18px, 4vw, 48px);
  width: clamp(64px, 8vw, 96px);
  height: clamp(64px, 8vw, 96px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  background: #FFFFFF;
  box-shadow:
    0 0 0 3px #FFFFFF,
    0 0 0 4px rgba(229, 196, 107, 0.55),
    0 8px 20px rgba(0, 0, 0, 0.35);
  z-index: 3;
  pointer-events: none;
  animation: pageheroBadgeFloat 6s ease-in-out infinite;
}
@keyframes pageheroBadgeFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .pagehero-badge { animation: none; }
}
@media (max-width: 560px) {
  .pagehero-badge { width: 56px; height: 56px; top: 14px; right: 14px; }
}

/* ===== Events page: month toggle + calendar-subscribe toolbar ===== */
.events-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.events-month-toggle { display: flex; align-items: center; gap: 8px; }
@media (max-width: 640px) {
  /* When the toolbar wraps onto multiple rows, centre both rows so the
     month controls + the subscribe button each sit balanced on their
     own line (previously they hugged the left edge). */
  .events-toolbar { justify-content: center; }
  .events-month-toggle { justify-content: center; flex-wrap: wrap; }
}

/* Motif — sits absolute on the right, capped so it never crowds the copy.
   Right-offset is wide enough to clear the .pagehero-badge column above it,
   so the badge never sits over the motif at the top-right. */
.pagehero-rb-motif {
  position: absolute;
  right: clamp(110px, 14vw, 170px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(200px, 28vw, 380px);
  aspect-ratio: 1 / 1;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.35));
}
@media (max-width: 720px) {
  /* On narrow viewports both the badge and the motif compete for the right
     column — let the motif fall back to the right edge again since the badge
     shrinks to 56px and stays comfortably above the motif top. */
  .pagehero-rb-motif { right: clamp(8px, 4vw, 24px); }
}
.pagehero-motif-svg { width: 100%; height: 100%; }

/* Subtle pulse for the calendar "next event" ring */
.pagehero-motif-pulse {
  transform-origin: center;
  animation: pageheroPulse 3.2s ease-in-out infinite;
}
@keyframes pageheroPulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%      { transform: scale(1.15); opacity: 0.3; }
}
@media (prefers-reduced-motion: reduce) {
  .pagehero-motif-pulse { animation: none; }
}

/* Donate motif — animated ripples expanding from the coin edge */
.dn-ripple {
  animation: dnRipple 4s ease-out infinite;
  opacity: 0;
  transform-origin: center;
}
@keyframes dnRipple {
  0%   { r: 46;  opacity: 0; }
  20%  { opacity: 0.5; }
  100% { r: 240; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dn-ripple { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .card:hover, .tier:hover, .baro-tier-mini:hover {
    transform: none;
  }
}



/* Mobile: stack motif above copy, smaller min-height */
@media (max-width: 760px) {
  .pagehero-rb {
    min-height: auto;
    padding: 36px 0 32px;
  }
  .pagehero-rb-motif {
    position: relative; right: auto; top: auto; transform: none;
    margin: 0 auto 18px;
    width: clamp(180px, 56vw, 280px);
    height: clamp(180px, 56vw, 280px);
    display: block;
  }
  .pagehero-rb-content {
    max-width: 100%;
    align-items: flex-start;
  }
  .pagehero-rb-content .hero-rb-headline {
    font-size: clamp(26px, 8vw, 40px);
  }
}

/* ==========================================================================
   Dark mode
   --------------------------------------------------------------------------
   `[data-theme="dark"]` is applied on <html> by the inline bootstrap in
   base.html, so the theme is locked in before first paint. We only flip
   semantic tokens (ink / paper / line) — brand colours (navy, red, gold)
   stay constant across themes because they ARE the identity.
   ========================================================================== */
html[data-theme="dark"] {
  /* Crisper text on dark — earlier values (#e8eaf0 / #c0c5d2 / #8b94a8)
     met WCAG but read as "grey-on-dark" rather than "white-on-dark".
     Bumped main text toward near-white, secondary toward bright grey,
     tertiary kept dim for de-emphasis. */
  --ink:       #f4f6fb;
  --ink-2:     #dbe0eb;
  --ink-3:     #a8b0c4;
  --ink-4:     #6b7488;
  --ink-a:     #f4f6fb;
  --ink-2a:    #dbe0eb;
  --ink-3a:    #a8b0c4;
  --line:      #1d2235;
  --line-2:    #2d344d;
  --paper:     #0a0e1c;
  --paper-2:   #0e1426;
  --paper-3:   #131a30;
  --shadow-1:  0 1px 0 rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.35);
  --shadow-2:  0 4px 24px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.30);
  --shadow-3:  0 16px 48px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.35);
  --grad-hero-soft: linear-gradient(135deg, rgba(120,150,220,0.10) 0%, rgba(180,200,255,0.14) 100%);
  color-scheme: dark;
}

/* Dark-mode safety net for surfaces that hard-code a white background
   via inline style="background:white" / "background:#fff" in templates
   (auth/donate/event-rsvp cards, member profile sidebars, project cards,
   donate_eft, donate_thanks, etc.). The inline style wins specificity so
   those cards stay white in dark mode — but their descendants inherit
   the dark-theme --ink (#f4f6fb) which is white-on-white = unreadable.

   Fix: re-scope the ink tokens to their LIGHT-theme values inside any
   element whose inline style contains a white background. CSS custom
   properties cascade, so every descendant resolving var(--ink),
   var(--ink-2), var(--ink-3) automatically becomes navy/grey instead
   of near-white. No markup changes needed in any template. */
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#FFFFFF"],
html[data-theme="dark"] [style*="background: #FFFFFF"] {
  /* Re-pin every semantic token to its LIGHT-theme value inside white
     surfaces, so inputs/borders/secondary panels inside the card also
     render as if we were in light mode. Just resetting --ink wasn't
     enough -- the dark-mode form-input rule uses --paper-2 for input
     backgrounds, so without overriding --paper-2 the input was dark
     while its text was navy = invisible (see screenshot 2026-05-12). */
  --ink:       #002B80;
  --ink-2:     #2a3142;
  --ink-3:     #5a6378;
  --ink-a:     #002B80;
  --ink-2a:    #2a3142;
  --ink-3a:    #5a6378;
  --line:      #e5e8f0;
  --line-2:    #d2d6e0;
  --paper:     #ffffff;
  --paper-2:   #f8f9fb;
  --paper-3:   #f3f5fb;
  /* !important to beat inline `color:inherit` on cards (e.g. project-card)
     which would otherwise inherit the dark-theme body color into the card
     and render the title as near-white on white. */
  color: var(--ink) !important;
}
html[data-theme="dark"] [style*="background:white"] *,
html[data-theme="dark"] [style*="background: white"] *,
html[data-theme="dark"] [style*="background:#fff"] *,
html[data-theme="dark"] [style*="background: #fff"] *,
html[data-theme="dark"] [style*="background:#FFFFFF"] *,
html[data-theme="dark"] [style*="background: #FFFFFF"] * {
  /* Descendants explicitly inherit so the !important color above cascades
     into every child element including ones with their own inline styles
     that don't set a color. Without this rule, an inline-styled child can
     compute its own color via inherit from the document root (still dark
     theme white) rather than from the rescued card. */
  color: inherit;
}

/* Tiny tweaks for surfaces that hard-code white in the light theme. */
html[data-theme="dark"] .admin-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] section.section .wrap > .card-body,
html[data-theme="dark"] .form input,
html[data-theme="dark"] .form select,
html[data-theme="dark"] .form textarea,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: var(--paper-2);
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"] nav.top { background: rgba(10,14,28,0.92); border-bottom-color: var(--line); }
html[data-theme="dark"] footer.foot { background: var(--paper-2); border-top-color: var(--line); }
html[data-theme="dark"] .alert.warn { background: rgba(229,196,107,0.10); color: var(--gold); }
html[data-theme="dark"] .alert.err  { background: rgba(195,0,23,0.18); color: #ff8794; }
html[data-theme="dark"] .alert.ok   { background: rgba(20,160,90,0.18); color: #6be5a4; }
html[data-theme="dark"] .tag.success { background: rgba(20,160,90,0.18); color: #6be5a4; }
html[data-theme="dark"] .tag.warn    { background: rgba(229,196,107,0.16); color: var(--gold); }
html[data-theme="dark"] .tag.err     { background: rgba(195,0,23,0.20); color: #ff8794; }

/* Smooth crossfade when the user clicks the toggle. Skip on initial load
   to avoid a fade between SSR and the bootstrap. */
html.theme-ready,
html.theme-ready body,
html.theme-ready * {
  transition: background-color 0.22s ease, color 0.22s ease,
              border-color 0.22s ease, box-shadow 0.22s ease;
}

/* The toggle button itself. Lives in the top nav between the social
   icons and the language switcher. Uses currentColor so it inherits
   the nav's link colour and adapts to dark mode without an override. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  /* Visual size 32px; min tap target 44px per WCAG 2.5.5. flex-shrink:0
     prevents the nav's flex layout from compressing the width below
     44px on tight rows, which renders the round button as an ellipse.
     aspect-ratio is a belt-and-braces guard against any other parent
     pressure that might squash a single dimension. */
  flex-shrink: 0;
  width: 44px; aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  padding: 0;
  margin-right: 8px;
  transition: color 180ms var(--ease), background 180ms var(--ease), border-color 180ms var(--ease);
}
.theme-toggle:hover {
  color: var(--ink);
  background: var(--paper-3);
  border-color: var(--line-2);
}
.theme-toggle svg { display: block; }
/* Show the inverse icon — sun in light mode (means "go dark"), moon in
   dark mode (means "go light"). */
html[data-theme="light"] .theme-toggle .t-sun  { display: none; }
html[data-theme="light"] .theme-toggle .t-moon { display: block; }
html[data-theme="dark"]  .theme-toggle .t-sun  { display: block; }
html[data-theme="dark"]  .theme-toggle .t-moon { display: none; }
/* When the bootstrap hasn't set a theme yet (very rare — only if JS is
   disabled), default the icon shown to the moon (so users see "go dark"). */
html:not([data-theme]) .theme-toggle .t-sun  { display: none; }
html:not([data-theme]) .theme-toggle .t-moon { display: block; }


/* ==========================================================================
   Mobile polish (from the 375×812 audit)
   --------------------------------------------------------------------------
   - iOS Safari auto-zooms the viewport when a form field with font-size
     below 16px is focused. Lift every form input to 16px on mobile only.
   - The konstellasie canvas was hidden under 760px; surface it again so
     mobile visitors see the signature animation. Particle count is
     already modest (70) and the loop draws on transform/opacity only.
   - When the hamburger sheet opens, body scroll-lock removes the
     scrollbar, narrowing the viewport by ~15px and leaving a bare gap.
   ========================================================================== */
@media (max-width: 760px) {
  input, select, textarea {
    font-size: 16px !important;
  }
  /* Re-enable the konstellasie canvas — earlier we hid it for battery
     reasons; the static-fallback fix already ensured the SVG dots
     vanish once the canvas is live, so this no longer creates the
     "frozen dots on the left" bug. */
  .hero-konst-canvas { display: block !important; }
}

/* Reserve scrollbar gutter at the html root so opening the burger sheet
   (or any future modal) doesn't shift the layout by ~15px when the
   scrollbar disappears. Falls back gracefully in browsers without
   scrollbar-gutter support. */
html { scrollbar-gutter: stable; }