/* ==========================================================================
   FONTS: self-hosted so the site has no third-party dependency at runtime.
   Barlow Condensed (display) + Poppins (body), latin subset, woff2.
   ========================================================================== */
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/barlow-condensed-latin-600-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Barlow Condensed';
  font-style:italic;
  font-weight:600;
  font-display:swap;
  src:url('fonts/barlow-condensed-latin-600-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('fonts/barlow-condensed-latin-700-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Barlow Condensed';
  font-style:italic;
  font-weight:700;
  font-display:swap;
  src:url('fonts/barlow-condensed-latin-700-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:900;
  font-display:swap;
  src:url('fonts/barlow-condensed-latin-900-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Barlow Condensed';
  font-style:italic;
  font-weight:900;
  font-display:swap;
  src:url('fonts/barlow-condensed-latin-900-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('fonts/poppins-latin-300-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('fonts/poppins-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('fonts/poppins-latin-500-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('fonts/poppins-latin-600-normal.woff2') format('woff2');
}

/* ==========================================================================
   Downtown Inglewood Association: shared stylesheet
   Palette and treatment sampled from the DIA launch page.
   ========================================================================== */

:root{
  /* --- surfaces, sampled from the launch page --- */
  --green:      #0F3737;   /* upper sections */
  --green-deep: #0C2D2D;   /* lower sections */
  --green-dark: #092020;   /* footer */
  --crimson:    #8C1928;   /* stats band */
  --indigo:     #1D326B;   /* sign-up band */
  --panel:      #163334;   /* card fill */
  --grid-line:  #124249;

  /* --- ink --- */
  --cream:      #F3ECCE;
  --gold:       #C9A62D;
  --orange:     #C85B1A;
  --body-green: #B1B7A2;   /* body copy on green */
  --mute-green: #99A493;   /* secondary copy on green */
  --mute-card:  #8A9683;   /* card body copy */
  --mute-crim:  #C68C83;   /* labels on crimson */
  --mute-ind:   #5E6C89;   /* fine print on indigo */
  --field:      #2C4073;
  --field-line: #526183;
  --field-ph:   #737D93;

  /* --- mosaic tiles, from the logo (accents and corner flags) --- */
  --t-red:    #B8232F;
  --t-flame:  #C95A1A;
  --t-teal:   #1A7872;
  --t-forest: #246232;
  --t-azure:  #1A4A96;
  --t-ox:     #5A1020;
  --t-amber:  #C48222;
  --t-olive:  #697A2B;

  /* --- type ---
     --font-display is the poster face used for all headings, stats, and
     buttons. Swap this one line for the licensed webfont when you have it;
     nothing else needs to change. */
  --font-display: 'Barlow Condensed', 'Arial Narrow', Haettenschweiler, sans-serif;
  --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Barlow Condensed is a static family, so no variable axes are applied.
     If you later swap in a variable display face, put its axis settings here
     (e.g. "'wdth' 86, 'wght' 900") and they will apply everywhere at once. */
  --display-vf: normal;

  --t--1: clamp(.72rem, .69rem + .14vw, .8rem);
  --t-0:  clamp(1rem, .97rem + .15vw, 1.0625rem);
  --t-1:  clamp(1.05rem, 1rem + .3vw, 1.2rem);
  --t-2:  clamp(1.5rem, 1.2rem + 1.5vw, 2.4rem);
  --t-3:  clamp(2.2rem, 1.6rem + 3.2vw, 4.4rem);
  --t-4:  clamp(3.4rem, 1.9rem + 9vw, 10.5rem);

  --gap:   clamp(1rem, .7rem + 1.4vw, 1.75rem);
  --block: clamp(3.5rem, 2.4rem + 4.6vw, 7rem);
  --radius: 2px;
  --member-ratio: 125%;   /* board portrait shape: 100% square, 125% 4:5, 133% 3:4 */

  --ease-wipe: cubic-bezier(.76,0,.24,1);
  --ease-out:  cubic-bezier(.22,1,.36,1);
  --wipe-ms: 1000ms;

  --accent: var(--gold);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--green); }

body{
  font-family:var(--font-body);
  font-size:var(--t-0); font-weight:300; line-height:1.75;
  color:var(--body-green); background:var(--green);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---- headings: heavy poster caps, gold italic accent word ---- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-variation-settings:var(--display-vf);
  font-weight:900; text-transform:uppercase;
  color:var(--cream); line-height:.98; letter-spacing:-.004em;
}
h1 em, h2 em, h3 em, .accent{
  font-style:italic; color:var(--accent);
  font-variation-settings:var(--display-vf);
}

a{ color:var(--gold); }
img,svg,video{ display:block; max-width:100%; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.container{ width:min(100% - 2.5rem, 1180px); margin-inline:auto; }
@media (max-width:600px){ .container{ width:min(100% - 2rem, 1180px); } }
.container--narrow{ width:min(100% - 2.5rem, 880px); margin-inline:auto; }

/* ---- eyebrow: gold letterspaced caps with a trailing rule ---- */
.eyebrow{
  display:flex; align-items:center; gap:16px;
  font-family:var(--font-body); font-size:var(--t--1); font-weight:600;
  letter-spacing:.26em; text-transform:uppercase; color:var(--gold);
}
.eyebrow::after{ content:""; width:52px; height:1px; background:currentColor; opacity:.7; flex:none; }
.eyebrow--center{ justify-content:center; }
.eyebrow--center::before{ content:""; width:52px; height:1px; background:currentColor; opacity:.7; flex:none; }

.ico{ width:1.15em; height:1.15em; flex:none; stroke:currentColor; fill:none;
      stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---- atmosphere: paper grain + surveyor's grid ---- */
.grain::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.22;
  mix-blend-mode:overlay; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.gridlines::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    repeating-linear-gradient(to right, var(--grid-line) 0 1px, transparent 1px 250px),
    repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px 250px);
  opacity:.55;
}
.band{ position:relative; overflow:hidden; }
.band > .container, .band > .container--narrow{ position:relative; z-index:1; }

/* mosaic flags across the very top of the page */
.tile-strip{ display:flex; height:7px; position:relative; z-index:300; }
.tile-strip span{ flex:1; }
.tile-strip span:nth-child(1){ background:var(--t-red);    flex:1.3; }
.tile-strip span:nth-child(2){ background:var(--t-amber);  flex:.6; }
.tile-strip span:nth-child(3){ background:var(--t-flame);  flex:1.9; }
.tile-strip span:nth-child(4){ background:var(--t-azure);  flex:1.2; }
.tile-strip span:nth-child(5){ background:var(--t-teal);   flex:1; }
.tile-strip span:nth-child(6){ background:var(--t-forest); flex:.7; }
.tile-strip span:nth-child(7){ background:var(--t-ox);     flex:1.3; }
.tile-strip span:nth-child(8){ background:var(--t-olive);  flex:.5; }

/* corner flags */
.corner{ position:absolute; width:120px; height:120px; z-index:1; pointer-events:none; }
.corner--tl{ top:0; left:0; background:linear-gradient(to bottom right, var(--t-red) 0 50%, transparent 50%); }
.corner--tr{ top:0; right:0; background:linear-gradient(to bottom left, var(--t-amber) 0 50%, transparent 50%); }
.corner--bl{ bottom:0; left:0; background:linear-gradient(to top right, var(--t-azure) 0 50%, transparent 50%); }
.corner--br{ bottom:0; right:0; background:linear-gradient(to top left, var(--t-olive) 0 50%, transparent 50%); }
@media (max-width:700px){ .corner{ width:64px; height:64px; } }

/* vertical MARKET ST rail */
.rail{
  position:absolute; right:0; bottom:clamp(1.5rem,6vh,3.5rem);
  display:flex; align-items:center; gap:14px; z-index:2; pointer-events:none;
  font-size:var(--t--1); font-weight:600; letter-spacing:.34em;
  text-transform:uppercase; color:var(--gold); opacity:.75;
}
.rail::after{ content:""; width:clamp(40px,7vw,120px); height:1px; background:currentColor; }
@media (max-width:900px){ .rail{ display:none; } }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-display); font-variation-settings:var(--display-vf);
  font-weight:900; font-size:1rem; text-transform:uppercase; letter-spacing:.12em;
  padding:16px 34px; border-radius:var(--radius); border:2px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .15s var(--ease-out);
}
.btn:active{ transform:translateY(1px); }
.btn--gold{ background:var(--gold); color:var(--green-deep); }
.btn--gold:hover{ background:var(--cream); }
.btn--outline{ border-color:var(--cream); color:var(--cream); }
.btn--outline:hover{ background:var(--cream); color:var(--green-deep); }
.btn--block{ width:100%; }

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.site-nav{
  position:sticky; top:0; z-index:200;
  background:color-mix(in srgb, var(--green-deep) 94%, transparent);
  border-bottom:1px solid rgba(243,236,206,.12);
  padding-block:12px;
  transition:background .5s ease, box-shadow .35s ease, padding .3s ease;
}
@supports (backdrop-filter:blur(1px)){ .site-nav{ backdrop-filter:blur(14px) saturate(140%); } }
.site-nav.is-scrolled{ padding-block:8px; box-shadow:0 12px 34px rgba(0,0,0,.38); }
body.intro-active .site-nav{
  background:linear-gradient(to bottom, rgba(9,32,32,.6), rgba(9,32,32,0));
  border-bottom-color:rgba(243,236,206,.14); box-shadow:none;
}
/* On desktop the video sits below the header, so the bar is solid and gives it
   a clean edge instead of bleeding underneath a translucent strip. */
@media (min-width:769px){
  body.intro-active .site-nav{
    background:var(--green-deep);
    backdrop-filter:none;
    border-bottom-color:rgba(243,236,206,.16);
  }
}
.site-nav .container{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }

.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand__mark{ width:38px; height:38px; flex:none; object-fit:contain; }
.brand__name{
  font-family:var(--font-display); font-variation-settings:var(--display-vf);
  font-weight:900; font-size:1rem; line-height:1.05; color:var(--cream);
  text-transform:uppercase; letter-spacing:.02em;
}
.brand__sub{
  display:block; font-family:var(--font-body); font-size:.56rem; font-weight:600;
  letter-spacing:.3em; color:var(--gold); margin-top:3px;
}

.nav-links{ display:flex; align-items:center; gap:clamp(12px,1.9vw,26px); list-style:none; }
.nav-links a{
  font-family:var(--font-body); color:var(--body-green); text-decoration:none;
  font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  padding:7px 2px; position:relative; transition:color .2s ease;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--ease-out);
}
.nav-links a:hover{ color:var(--cream); }
.nav-links a:hover::after{ transform:scaleX(1); }
.nav-links a[aria-current="page"]{ color:var(--gold); }
.nav-links a[aria-current="page"]::after{ transform:scaleX(1); }

.nav-toggle{
  display:none; align-items:center; gap:8px; cursor:pointer;
  background:transparent; border:1px solid rgba(243,236,206,.28);
  color:var(--cream); border-radius:var(--radius); padding:9px 12px;
  font-family:var(--font-body); font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
}
.nav-toggle .ico{ width:20px; height:20px; }
.nav-toggle__close{ display:none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open{ display:none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close{ display:block; }

@media (max-width:900px){
  .nav-toggle{ display:inline-flex; }
  .nav-links{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--green-deep); border-bottom:3px solid var(--gold);
    padding:6px 0 12px;
    transform:translateY(-12px); opacity:0; visibility:hidden; pointer-events:none;
    transition:transform .3s var(--ease-out), opacity .25s ease, visibility .3s;
    box-shadow:0 22px 44px rgba(0,0,0,.45);
  }
  .nav-links.is-open{ transform:none; opacity:1; visibility:visible; pointer-events:auto; }
  .nav-links li{ border-top:1px solid rgba(243,236,206,.08); }
  .nav-links a{ display:block; padding:15px clamp(1rem,5vw,2rem); font-size:.86rem; }
  .nav-links a::after{ display:none; }
}

/* ==========================================================================
   INTRO OVERLAY
   ========================================================================== */
/* Hidden until the controller decides to run it. The overlay is part of the
   HTML, so without this it paints during page load and is then torn out by
   JavaScript on any skip path, which reads as a flicker. Also means that if
   the script fails entirely, the site is simply usable rather than blocked. */
.intro{ visibility:hidden; }
.intro.is-live{ visibility:visible; }

.intro{
  position:fixed; top:0; left:0; width:100%;
  height:100vh; height:100dvh; z-index:100; overflow:hidden;
  background:var(--green-deep);
  transform:translateY(0);
  transition:transform var(--wipe-ms) var(--ease-wipe);
  will-change:transform; touch-action:none; overscroll-behavior:none;
}
/* Mobile keeps the original treatment: the portrait edit fills the screen
   edge to edge, which is what it was framed for. */
.intro__media{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; transform:translateY(0);
  background:var(--green-deep);
  transition:transform var(--wipe-ms) var(--ease-wipe); will-change:transform;
}

/* Desktop only. Two changes, both because the landscape edit carries its own
   titles and logo:
     1. it starts below the header, so the nav never covers the top of a title
     2. it is contained rather than cropped, so the designed frame is whole
   --intro-top is measured at runtime from the bottom of the nav bar. */
@media (min-width:769px){
  .intro__media{
    inset:auto; top:var(--intro-top, 0px); left:0;
    width:100%; height:calc(100% - var(--intro-top, 0px));
    object-fit:contain;
  }
}
@media (max-width:768px){ .intro__media{ object-position:50% 32%; } }

.intro__standin{
  position:absolute; inset:0; display:none;
  background:
    radial-gradient(120% 90% at 18% 16%, rgba(201,166,45,.30), transparent 56%),
    radial-gradient(110% 85% at 82% 78%, rgba(29,50,107,.55), transparent 60%),
    linear-gradient(150deg, #0F3737 0%, #0C2D2D 55%, #092020 100%);
  background-size:180% 180%, 180% 180%, 100% 100%;
  animation:driftBg 13s ease-in-out infinite alternate;
}
.intro.is-standin .intro__standin{ display:block; }
.intro.is-standin .intro__media{ display:none; }
@keyframes driftBg{ to{ background-position:100% 100%, 0% 100%, 0 0; } }

.intro__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(9,32,32,.9) 0%, rgba(9,32,32,.34) 46%, rgba(9,32,32,.55) 100%);
}
/* Vertical position of the overlay text. Increase the value to lift the block,
   decrease it to push the text further down the frame. One place to tune. */
.intro__copy{
  position:absolute; left:0; right:0;
  bottom:var(--intro-copy-bottom, clamp(2.5rem, 9vh, 6rem));
  transition:opacity .7s ease, transform .5s var(--ease-out);
}
/* .intro__logo retired: the logo now appears in the video itself. */
.intro__title{ font-size:clamp(2.4rem,7vw,5rem); margin-bottom:.9rem; max-width:15ch; }
.intro__lede{ color:var(--mute-green); max-width:44ch; font-size:var(--t-1); }
.intro__cue{
  display:inline-flex; align-items:center; gap:9px; margin-top:clamp(1.2rem,3.5vh,2rem);
  color:rgba(243,236,206,.55); font-size:var(--t--1); letter-spacing:.1em; text-transform:uppercase;
}
.intro__cue .ico{ width:18px; height:18px; animation:nudge 2.2s ease-in-out infinite; }
@keyframes nudge{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }

.intro__skip{
  position:absolute; top:clamp(80px,12vh,120px); right:clamp(1rem,4vw,2.5rem);
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; border:1px solid rgba(243,236,206,.35); color:var(--cream);
  font-family:var(--font-body); font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  padding:10px 18px; border-radius:var(--radius); cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.intro__skip:hover{ background:var(--cream); color:var(--green-deep); }

.intro__play{
  position:absolute; inset:0; margin:auto; width:88px; height:88px; border-radius:50%;
  display:none; place-items:center; background:rgba(243,236,206,.12);
  border:1px solid rgba(243,236,206,.45); color:var(--cream); cursor:pointer;
  backdrop-filter:blur(8px);
  transition:transform .25s var(--ease-out), background .25s ease;
}
.intro__play .ico{ width:34px; height:34px; margin-left:4px; }
.intro__play:hover{ transform:scale(1.06); background:rgba(243,236,206,.24); }
.intro.is-blocked .intro__play{ display:grid; }

/* Desktop presentation of the film.
   No scrim: it exists to keep the overlay headline readable, and that headline
   is hidden here, so it was only dulling the picture and casting it green.
   Black surround: with the whole frame shown, a wide monitor leaves bars at
   the sides. Filling them with black lets the film's own dark frame run to
   the edges instead of showing the site's green through. */
@media (min-width:769px){
  .intro{ background:#000; }
  .intro__scrim{ display:none; }
  .intro__media{ background:#000; }
}

/* Desktop: the landscape edit carries its own headline and logo, so the
   overlay copy is hidden and the film is left to speak for itself. Mobile
   keeps the copy, where the portrait edit has room for it.

   To bring the desktop copy back, delete this block and instead set
   copyHoldMs in dia.js to fade it out a few seconds in. */
@media (min-width:769px){
  .intro__copy{ display:none; }
}

/* The headline holds over the opening, then fades so the rest of the film
   plays clean. Hold duration is CONFIG.copyHoldMs in dia.js. */
.intro.is-copy-out .intro__copy{ opacity:0; transform:translateY(-8px); }
.intro.is-copy-out .intro__cue{ opacity:0; }
.intro.is-leaving .intro__copy{ opacity:0; transform:translateY(-14px); }
.intro.is-leaving .intro__skip{ opacity:0; transition:opacity .3s ease; }
.intro.is-wiped{ transform:translateY(-100%); }
.intro.is-wiped .intro__media,
.intro.is-wiped .intro__standin{ transform:translateY(15%); }
.intro.is-done{ visibility:hidden; pointer-events:none; }
html.intro-lock, body.intro-lock{ overflow:hidden; height:100%; }

/* ==========================================================================
   HOME HERO: stacked solid / outline / gold headline
   ========================================================================== */
.hero{
  background:var(--green); text-align:center;
  padding:clamp(3rem,9vh,6rem) 0 clamp(3.5rem,10vh,7rem);
  position:relative; overflow:hidden;
}
.hero__beam{
  position:absolute; top:-10%; left:52%; width:34%; height:130%;
  background:linear-gradient(180deg, rgba(243,236,206,.05), rgba(243,236,206,0));
  transform:rotate(9deg); pointer-events:none; z-index:0;
}
.hero__beam--2{ left:8%; width:16%; transform:rotate(-7deg); opacity:.7; }
.hero__logo{ width:clamp(150px,20vw,240px); margin:0 auto clamp(1.75rem,4vw,2.5rem); }
.hero__stack{ margin:clamp(1.5rem,4vw,2.5rem) 0 clamp(1.5rem,3vw,2rem); }
.hero__line{
  font-family:var(--font-display); font-variation-settings:var(--display-vf);
  font-weight:900; text-transform:uppercase; font-size:var(--t-4);
  line-height:.92; letter-spacing:.01em; display:block;
}
.hero__line--solid{ color:var(--cream); display:inline-block; border-bottom:6px solid var(--orange); padding-bottom:.04em; }
.hero__line--outline{
  color:transparent; -webkit-text-stroke:2px var(--cream);
  paint-order:stroke fill;
}
@supports not ((-webkit-text-stroke: 1px black)){ .hero__line--outline{ color:var(--cream); opacity:.45; } }
.hero__line--gold{ color:var(--gold); font-style:italic; }
.hero__lede{ color:var(--mute-green); max-width:46ch; margin:0 auto; font-size:var(--t-1); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:2.25rem; }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.band--green{ background:var(--green); }
.band--deep{ background:var(--green-deep); }
.band--crimson{ background:var(--crimson); }
.band--indigo{ background:var(--indigo); }
.section{ padding-block:var(--block); }
.section--tight{ padding-block:clamp(2.5rem,5vw,4rem); }

.section__head{ max-width:62ch; margin-bottom:clamp(2rem,4vw,3rem); }
.section__head h2{ font-size:var(--t-3); margin:1.1rem 0 1rem; }
.section__head p{ color:var(--body-green); }
.section__head--center{ margin-inline:auto; text-align:center; }
.section__head--center .eyebrow{ justify-content:center; }
.section__head--center .eyebrow::before{ content:""; width:52px; height:1px; background:currentColor; opacity:.7; flex:none; }

.prose p{ margin-bottom:1.25rem; }
.prose--justify p{ text-align:justify; text-wrap:pretty; hyphens:auto; }

/* ---- stats band ---- */
.stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(50%,180px),1fr)); }
.stats > div{ padding:clamp(2rem,4vw,3rem) 1rem; text-align:center; position:relative; }
.stats > div + div::before{
  content:""; position:absolute; left:0; top:22%; bottom:22%; width:1px;
  background:rgba(243,236,206,.28);
}
@media (max-width:640px){ .stats > div:nth-child(odd)::before{ display:none; } }
.stats dt{
  font-family:var(--font-display); font-variation-settings:var(--display-vf);
  font-weight:900; font-size:clamp(2.6rem,6vw,4.2rem); line-height:1; color:var(--cream);
}
.stats dt sup{ font-size:.4em; vertical-align:super; }
.stats dd{
  margin-top:.9rem; font-size:var(--t--1); font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--mute-crim); line-height:1.6;
}

/* ---- focus / pillar cards ---- */
.pillars{ display:grid; gap:1px; grid-template-columns:repeat(auto-fit, minmax(min(100%,280px),1fr)); }
.pillar{
  background:var(--panel); border-left:4px solid var(--pt,var(--gold));
  padding:clamp(1.5rem,3vw,2rem);
}
.pillar:nth-child(1){ --pt:var(--gold); }
.pillar:nth-child(2){ --pt:var(--t-teal); }
.pillar:nth-child(3){ --pt:var(--t-azure); }
.pillar:nth-child(4){ --pt:var(--t-flame); }
.pillar:nth-child(5){ --pt:var(--t-red); }
.pillar:nth-child(6){ --pt:var(--t-olive); }
.pillar__kicker{
  font-size:var(--t--1); font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold);
}
.pillar h3{ font-size:var(--t-2); margin:.9rem 0 .8rem; }
.pillar p{ color:var(--mute-card); font-size:.95rem; line-height:1.7; }
.pillar a{
  display:inline-flex; align-items:center; gap:8px; margin-top:1.25rem;
  font-family:var(--font-body); font-size:.74rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold); text-decoration:none;
}
.pillar a:hover{ color:var(--cream); }

/* ---- centered call-out ---- */
.callout{ text-align:center; }
.callout p{ max-width:72ch; margin:0 auto; color:var(--body-green); font-size:var(--t-1); }
.callout strong{
  font-family:var(--font-display); font-variation-settings:var(--display-vf);
  font-weight:900; text-transform:uppercase; color:var(--cream); letter-spacing:.02em;
}
.callout .btn{ margin-top:clamp(2rem,4vw,2.75rem); }

/* ---- sign-up ---- */
.signup{ text-align:center; }
.signup h2{ font-size:var(--t-3); margin:1.1rem 0 1.25rem; }
.signup > .container--narrow > p{ color:var(--body-green); max-width:60ch; margin:0 auto; }
.form-grid{ display:grid; gap:1.25rem 1.5rem; margin-top:clamp(2rem,4vw,3rem); text-align:left;
  grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (max-width:560px){ .form-grid{ grid-template-columns:1fr; } }
.field--full{ grid-column:1 / -1; }
.field{ display:flex; flex-direction:column; gap:10px; }
.field label{
  font-size:var(--t--1); font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--cream); opacity:.85;
}
.field input, .field select{
  font-family:var(--font-body); font-size:1rem; font-weight:300; color:var(--cream);
  background:var(--field); border:1px solid var(--field-line);
  border-radius:var(--radius); padding:16px 18px;
}
.field input::placeholder{ color:var(--field-ph); }
.field select{ appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' stroke='%23F3ECCE' stroke-width='1.6'%3E%3Cpath d='M5 8l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
}
.field select option{ color:#111; }
.field input:focus-visible, .field select:focus-visible{ outline-color:var(--gold); }
.form-foot{ margin-top:1.75rem; }
.form-note{ margin-top:1.25rem; font-size:.85rem; color:var(--mute-ind); }
.form-status{ margin-top:1rem; font-size:.9rem; color:var(--gold); min-height:1.4em; }
.band--indigo .field label{ color:var(--cream); opacity:.8; }

/* ==========================================================================
   PAGE HEADERS (interior pages)
   ========================================================================== */
.page-head{ padding:clamp(3rem,7vw,5rem) 0 clamp(2.5rem,5vw,4rem); position:relative; overflow:hidden; }
.breadcrumb{
  font-size:var(--t--1); font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mute-green); margin-bottom:1.5rem;
}
.breadcrumb a{ color:var(--mute-green); text-decoration:none; }
.breadcrumb a:hover{ color:var(--gold); }
.breadcrumb span{ margin-inline:.6rem; opacity:.5; }
.page-head h1{ font-size:var(--t-3); max-width:18ch; margin-bottom:1.25rem; }
.page-head p{ max-width:58ch; color:var(--body-green); font-size:var(--t-1); }

/* ==========================================================================
   CARD GRID (listings, events, board)
   ========================================================================== */
.grid{ display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.grid--wide{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

.card{
  background:var(--panel); border-left:4px solid var(--ct,var(--gold));
  padding:22px; display:flex; flex-direction:column;
  transition:transform .35s var(--ease-out), background .3s ease;
}
@media (hover:hover){ .card:hover{ transform:translateY(-4px); background:#1B3B3B; } }
.card__tag{ font-size:var(--t--1); font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold); }
.card h3{ font-size:var(--t-2); margin:.7rem 0 .6rem; }
.card p{ font-size:.93rem; color:var(--mute-card); line-height:1.7; }
.card__meta{
  margin-top:auto; padding-top:16px; border-top:1px solid rgba(243,236,206,.12);
  font-size:var(--t--1); letter-spacing:.14em; text-transform:uppercase;
  color:var(--mute-green); display:flex; align-items:center; gap:9px;
}
.card__meta .ico{ color:var(--ct,var(--gold)); }
.grid > *:nth-child(6n+1){ --ct:var(--gold); }
.grid > *:nth-child(6n+2){ --ct:var(--t-teal); }
.grid > *:nth-child(6n+3){ --ct:var(--t-azure); }
.grid > *:nth-child(6n+4){ --ct:var(--t-flame); }
.grid > *:nth-child(6n+5){ --ct:var(--t-red); }
.grid > *:nth-child(6n+6){ --ct:var(--t-olive); }

/* ---- board members ---- */
.tier{ margin-bottom:clamp(2.5rem,5vw,4rem); }
.tier:last-child{ margin-bottom:0; }
.tier__label{
  display:flex; align-items:center; gap:16px; margin-bottom:1.75rem;
  font-family:var(--font-body); font-size:var(--t--1); font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
}
.tier__label::after{ content:""; flex:1; height:1px; background:rgba(243,236,206,.16); }

.member{
  background:var(--panel); border-left:4px solid var(--mt,var(--gold));
  padding:20px; display:flex; flex-direction:column;
  transition:transform .35s var(--ease-out), background .3s ease;
}
@media (hover:hover){ .member:hover{ transform:translateY(-4px); background:#1B3B3B; } }
.member__mono{
  aspect-ratio:4/5; margin-bottom:18px; display:grid; place-items:center;
  background:var(--mt,var(--gold)); color:var(--cream);
  font-family:var(--font-display); font-variation-settings:var(--display-vf);
  font-size:clamp(2rem,6vw,2.8rem); font-weight:900; letter-spacing:.02em; overflow:hidden;
}
/* Portrait frame.
   The padding-top ratio box works in every browser and does not depend on
   aspect-ratio support, nor on the img's width/height attributes, so the
   photo can never be stretched. Change --member-ratio to reshape all
   portraits at once:  100% = square, 125% = 4:5, 133% = 3:4. */
.member__frame{
  position:relative; width:100%; padding-top:var(--member-ratio, 125%);
  overflow:hidden; margin-bottom:18px; background:var(--green-deep);
}
.member__photo{
  position:absolute; top:0; left:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 16%;
  display:block; filter:saturate(.96);
  transition:transform .45s var(--ease-out);
}
@media (hover:hover){ .member:hover .member__photo{ transform:scale(1.03); } }

.board-grid > *:nth-child(4n+1){ --mt:var(--t-red); }
.board-grid > *:nth-child(4n+2){ --mt:var(--t-azure); }
.board-grid > *:nth-child(4n+3){ --mt:var(--t-teal); }
.board-grid > *:nth-child(4n+4){ --mt:var(--t-forest); }
/* Board rows hold at most three cards and keep empty columns, so a row with
   one or two people keeps the same card width as a full row instead of
   stretching. Narrow screens still drop to two columns, then one. */
.board-grid{
  grid-template-columns:repeat(auto-fill,
    minmax(min(100%, max(250px, (100% - 2 * var(--gap)) / 3)), 1fr));
}
.member__name{ font-size:var(--t-2); }
.member__role{ font-size:var(--t--1); font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold); margin:.6rem 0 .35rem; }
.member__org{ font-size:.93rem; color:var(--body-green); }
.member__focus{
  display:flex; align-items:flex-start; gap:10px; margin-top:auto; padding-top:16px;
  border-top:1px solid rgba(243,236,206,.12); font-size:.88rem; color:var(--mute-card); line-height:1.6;
}
.member__focus .ico{ margin-top:.25em; color:var(--gold); }
.member__focus strong{
  display:block; font-size:var(--t--1); letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); font-weight:600; margin-bottom:3px;
}
.member--open{ background:transparent; border:1px dashed rgba(243,236,206,.3); border-left:4px solid var(--mt); }
.member--open .member__mono{
  background:repeating-linear-gradient(135deg, rgba(243,236,206,.07) 0 10px, transparent 10px 20px);
  color:var(--gold);
}
.member--open .member__mono .ico{ width:38px; height:38px; }

/* ---- events ---- */
.event{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:clamp(1rem,3vw,2rem);
  align-items:center; padding:26px 0; border-bottom:1px solid rgba(243,236,206,.14);
}
@media (max-width:760px){
  .event{ grid-template-columns:auto minmax(0,1fr); }
  .event__action{ grid-column:1 / -1; }
}
.event__date{ width:80px; text-align:center; background:var(--et,var(--gold)); color:var(--cream); padding:10px 4px; }
.event__date b{ display:block; font-family:var(--font-display);
  font-variation-settings:var(--display-vf); font-size:1.8rem; font-weight:900; line-height:1; }
.event__date span{ font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; }
.event:nth-child(4n+1){ --et:var(--t-flame); }
.event:nth-child(4n+2){ --et:var(--t-teal); }
.event:nth-child(4n+3){ --et:var(--t-azure); }
.event:nth-child(4n+4){ --et:var(--t-ox); }
.event h3{ font-size:var(--t-2); }
.event p{ font-size:.93rem; color:var(--mute-card); margin-top:.35rem; }
.event__where{ font-size:var(--t--1); font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold); margin-bottom:.4rem; }

/* ---- split + aside ---- */
.split{ display:grid; gap:clamp(1.75rem,4vw,3.5rem);
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); align-items:start; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; } }
.aside-box{ background:var(--panel); border-top:4px solid var(--gold); padding:26px; }
.aside-box h3{ font-size:var(--t-2); margin-bottom:1rem; }
.aside-box ul{ list-style:none; display:grid; gap:.9rem; font-size:.92rem; }
.aside-box li{ display:flex; gap:11px; align-items:flex-start; color:var(--mute-card); }
.aside-box li .ico{ margin-top:.3em; color:var(--gold); }

/* ---- mission ---- */
.mission{ position:relative; padding-left:clamp(1.5rem,4vw,3rem); }
.mission__strip{
  position:absolute; left:0; top:0; bottom:0; width:8px;
  background:linear-gradient(to bottom,
    var(--t-red) 0 18%, var(--t-amber) 18% 30%, var(--t-flame) 30% 52%,
    var(--t-azure) 52% 68%, var(--t-teal) 68% 86%, var(--t-forest) 86% 100%);
}
.mission p{
  margin-top:1.25rem; max-width:44ch; color:var(--cream);
  font-size:var(--t-2); font-weight:300; line-height:1.42;
  font-family:var(--font-body); text-transform:none;
}
.mission p b{ color:var(--gold); font-weight:400; }

/* ---- contact ---- */
.contact__grid{ display:grid; gap:var(--gap); margin-top:2.5rem;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.contact__item{ background:var(--panel); border-top:4px solid var(--cit,var(--gold)); padding:24px; }
.contact__grid > *:nth-child(1){ --cit:var(--t-teal); }
.contact__grid > *:nth-child(2){ --cit:var(--t-azure); }
.contact__grid > *:nth-child(3){ --cit:var(--t-flame); }
.contact__item h3{
  display:flex; align-items:center; gap:11px; margin-bottom:1rem;
  font-family:var(--font-body); font-size:var(--t--1); font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
}
.contact__item h3 .ico{ color:var(--cit); }
.contact__item p{ font-size:.95rem; color:var(--body-green); }
.contact__item a{ color:var(--gold); text-decoration:none; border-bottom:1px solid transparent; }
.contact__item a:hover{ border-bottom-color:currentColor; }
.contact__item .dot{ opacity:.4; margin-inline:.4rem; }

/* ---- placeholder ---- */
.placeholder{
  border:1px dashed rgba(243,236,206,.28); padding:clamp(2rem,5vw,3.5rem); text-align:center;
  background:repeating-linear-gradient(135deg, rgba(243,236,206,.03) 0 12px, transparent 12px 24px);
}
.placeholder .ico{ width:34px; height:34px; color:var(--gold); margin:0 auto 1rem; }
.placeholder h3{ font-size:var(--t-2); }
.placeholder p{ color:var(--mute-card); margin-top:.6rem; font-size:.93rem; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background:var(--green-dark); padding-block:clamp(2.5rem,5vw,3.5rem); position:relative; }
.site-footer__grid{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem; }
.site-footer__brand{ display:flex; align-items:center; gap:14px; }
.site-footer__brand img{ width:56px; flex:none; }
.site-footer__name{
  font-family:var(--font-display); font-variation-settings:var(--display-vf);
  font-weight:900; font-size:1.05rem; text-transform:uppercase; color:var(--cream); line-height:1.1;
}
.site-footer__name span{
  display:block; font-family:var(--font-body); font-size:.62rem; font-weight:600;
  letter-spacing:.24em; color:var(--mute-green); margin-top:4px;
}
.site-footer nav{ display:flex; flex-wrap:wrap; gap:10px clamp(16px,2.5vw,28px); }
.site-footer nav a{
  font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--body-green); text-decoration:none;
}
.site-footer nav a:hover{ color:var(--gold); }
.site-footer__legal{
  margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid rgba(243,236,206,.1);
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1rem;
  font-size:.8rem; color:var(--mute-green);
}
.site-footer__legal a{ color:var(--gold); text-decoration:none; }
.site-footer__legal a:hover{ text-decoration:underline; }

/* ==========================================================================
   REVEALS
   ========================================================================== */
html.js [data-reveal]{
  opacity:0; transform:translateY(20px);
  transition:opacity .8s ease, transform .8s var(--ease-out);
  transition-delay:calc(var(--i, 0) * 70ms);
}
html.js [data-reveal].is-revealed{ opacity:1; transform:none; }

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

/* ==========================================================================
   FORM STATUS + EVENT SUBMISSION
   ========================================================================== */
[data-status]{ margin-top:1rem; font-size:.9rem; min-height:1.4em; }
[data-status][data-tone="ok"]{ color:var(--gold); }
[data-status][data-tone="err"]{ color:#E8927C; }

/* honeypot: hidden from people, visible to bots */
.hp{
  position:absolute !important; left:-9999px !important;
  width:1px; height:1px; overflow:hidden;
}

.field textarea{
  font-family:var(--font-body); font-size:1rem; font-weight:300; color:var(--cream);
  background:var(--panel); border:1px solid rgba(243,236,206,.22);
  border-radius:var(--radius); padding:14px 16px; resize:vertical; min-height:120px;
}
.field textarea::placeholder{ color:var(--mute-card); }
.field textarea:focus-visible{ outline-color:var(--gold); }
.band--green .field input, .band--green .field select, .band--deep .field input,
.band--deep .field select, .band--deep .field textarea{
  background:var(--panel); border-color:rgba(243,236,206,.22); color:var(--cream);
}
.band--green .field label, .band--deep .field label{ color:var(--gold); opacity:1; }
.field__hint{ font-size:.78rem; color:var(--mute-card); }
.form-card{
  background:var(--panel); border-left:4px solid var(--gold);
  padding:clamp(1.5rem,4vw,2.5rem);
}
.form-card h3{ font-size:var(--t-2); margin-bottom:.6rem; }
.form-card > p{ color:var(--mute-card); font-size:.95rem; margin-bottom:1.5rem; }