/* ==========================================================================
   Buddies Helping Buddies
   Design system + components. Self-hosted fonts, no external requests.
   ========================================================================== */

/* ----------------------------------------------------------------- fonts  */
@font-face{font-family:Fraunces;src:url(../fonts/Fraunces-latin-0.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Fraunces;src:url(../fonts/Fraunces-latin-1.woff2)format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Fraunces;src:url(../fonts/Fraunces-latin-2.woff2)format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Fraunces;src:url(../fonts/Fraunces-latin-3.woff2)format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Fraunces;src:url(../fonts/Fraunces-latin-4.woff2)format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(../fonts/Archivo-latin-0.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(../fonts/Archivo-latin-1.woff2)format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(../fonts/Archivo-latin-2.woff2)format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Archivo;src:url(../fonts/Archivo-latin-3.woff2)format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo Expanded";src:url(../fonts/ArchivoExp-latin-0.woff2)format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo Expanded";src:url(../fonts/ArchivoExp-latin-1.woff2)format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---------------------------------------------------------------- tokens  */
:root{
  /* Ink ramp: the dark half stays neutral and faintly cool so it sits under
     blue and violet without reading brown. From 400 up it warms toward cream,
     which is the warm-light-on-near-black pairing that gives the page its
     temperature. Cool shadows, warm type. */
  --ink-900:#0A0B0D; --ink-850:#0E1014; --ink-800:#14171B; --ink-750:#191D22;
  --ink-700:#1F242A; --ink-600:#2A2F37; --ink-500:#3B424B; --ink-400:#5A6067;
  --ink-300:#8A8C88; --ink-200:#B6B4A9; --ink-150:#D3CFC2; --ink-100:#E8E3D6;
  --paper:#F7F4EA; --paper-2:#EBE7DB; --paper-3:#DAD5C7;

  /* Every accent is sampled from the organization's own logo. The base tone
     doubles as a solid button fill and clears WCAG AA against white text; the
     -hi tone is for text and hairlines on the dark ink background only. */
  --brand:#216AC6; --brand-hi:#5FA0EE; --brand-tint:#BBD9FF;  /* white on brand 5.3:1 */
  --oxide:#B21B1E; --oxide-hi:#F08A82; --oxide-tint:#FFC9C4;  /* VRT badge red, 6.8:1 */
  --violet:#7540BC; --violet-hi:#5FC3D4; --violet-tint:#C9B4EC; /* SPC purple 6.5:1, teal accent */
  --amber:#E0A040;

  /* semantic (re-themed per page via [data-org]) */
  --accent:var(--brand); --accent-hi:var(--brand-hi); --accent-tint:var(--brand-tint);
  --accent-ink:#FFF3EC;

  /* surfaces on dark */
  --bg:var(--ink-900); --fg:var(--paper); --fg-dim:var(--ink-150); --fg-mute:var(--ink-200);
  --surface:var(--ink-800); --surface-2:var(--ink-700);
  --rule:#232830; --rule-soft:#181C22; --rule-strong:#333B45;

  /* Functional data only: phone numbers, addresses, dates, the directory.
     Never body prose. A system stack, so nothing new is downloaded. */
  --font-mono:ui-monospace,"Cascadia Mono","Segoe UI Mono",Menlo,Consolas,monospace;

  /* type scale ... fluid, optically tuned. Display sizes trust scale and
     tracking for hierarchy rather than reaching for more weight. */
  --t-hero:clamp(3.2rem,1.2rem + 8.6vw,10.5rem);
  --t-d1:clamp(2.5rem,1.35rem + 5.2vw,6.2rem);
  --t-d2:clamp(1.95rem,1.25rem + 3.2vw,4rem);
  --t-h3:clamp(1.5rem,1.18rem + 1.25vw,2.2rem);
  --t-h4:clamp(1.2rem,1.08rem + .5vw,1.5rem);
  --t-lead:clamp(1.15rem,1.05rem + .45vw,1.42rem);
  --t-body:1.125rem;
  --t-sm:1rem; --t-xs:.9375rem;
  --t-eyebrow:.84rem;

  /* spacing ... 4px base */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem;
  --s7:3rem; --s8:4rem; --s9:6rem; --s10:8rem;
  --sec:clamp(4.5rem,3rem + 7vw,9.5rem);
  --gut:clamp(1.25rem,.6rem + 2.6vw,3.25rem);
  --maxw:78rem; --readw:38rem;

  --r-sm:6px; --r:12px; --r-lg:20px; --r-xl:30px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.62s;
}

[data-org="vrt"]{--accent:var(--oxide);--accent-hi:var(--oxide-hi);--accent-tint:var(--oxide-tint);--accent-ink:#FFF1EC}
[data-org="spc"]{--accent:var(--violet);--accent-hi:var(--violet-hi);--accent-tint:var(--violet-tint);--accent-ink:#F3EDFB}

/* ==========================================================================
   Colour as taxonomy
   Three organizations that outsiders constantly confuse. The colour is not
   decoration: it belongs to the organization and follows its NAME wherever
   the name appears ... nav, footer, body copy, cards. Learn it once on the
   home page and every later mention is already labelled.
     Buddies Helping Buddies  blue    #216AC6
     Veteran Response Team    oxide   #B21B1E
     Suicide Prevention       violet  #7540BC
   ========================================================================== */
/* The mark colour is deliberately its own token rather than the page accent.
   A page re-themes; an organization's identity must not. The Coalition is the
   purple one everywhere, including on pages themed to something else.
   Its base purple #7540BC is only 3:1 on this ground, so the mark carries a
   lighter tone of the same purple. Reaching for its teal --violet-hi instead
   would teach one colour in the nav and a different one on its own card. */
.on,.on-mark{--oc:#5FA0EE}
.on[data-o="vrt"],.on-mark[data-o="vrt"]{--oc:#F08A82}
.on[data-o="spc"],.on-mark[data-o="spc"]{--oc:#A98CE8}

/* .on ... the name itself takes the colour. For body copy. */
.on{color:var(--oc);font-weight:600}

/* .on-mark ... a coloured dot, the label stays cream. For navigation and
   link lists, where seven coloured labels would be noise. */
.on-mark{display:inline-flex;align-items:baseline;gap:.52em}
.on-mark::before{
  content:"";width:.42em;height:.42em;border-radius:50%;flex:none;
  background:var(--oc);transform:translateY(-.06em)
}

/* ---------------------------------------------------------- data in mono */
/* Functional strings only: phone numbers, addresses, dates, times, the
   registration number. Numbers become scannable and stop reading as prose.
   Body copy never takes this. */
.data,.evt__meta,.orgcard__addr,.foot__bottom{
  font-family:var(--font-mono);
  letter-spacing:-.012em;font-variant-numeric:tabular-nums
}
.evt__meta,.orgcard__addr,.foot__bottom{font-size:.86em}

/* ---------------------------------------------------------- hairline rule */
/* Sections divided by a single hairline across the content width rather than
   by a change of background. Cheaper than a panel and quieter. */
.hair{height:1px;background:var(--rule);border:0;margin:0}
.section--hair{border-top:1px solid var(--rule)}

/* ----------------------------------------------------------------- reset  */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,picture,svg{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}

html{scroll-behavior:smooth;scroll-padding-top:6.5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--bg); color:var(--fg);
  font-family:Archivo,"Segoe UI",system-ui,sans-serif;
  font-size:var(--t-body); line-height:1.62;
  font-weight:400; letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}

/* film grain ... atmosphere, very low opacity, never over content */
body::after{
  content:""; position:fixed; inset:-50%; z-index:9999; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion:reduce){body::after{display:none}}

/* ------------------------------------------------------------ typography  */
h1,h2,h3,h4,.display{
  font-family:Fraunces,Georgia,serif; font-weight:700;
  line-height:1.02; letter-spacing:-.028em;
  font-variation-settings:"SOFT" 12,"WONK" 1,"opsz" 100;
  text-wrap:balance;
}
h1{font-size:var(--t-d1)} h2{font-size:var(--t-d2)} h3{font-size:var(--t-h3);line-height:1.16}
h4{font-size:var(--t-h4);line-height:1.25;letter-spacing:-.018em}

/* Fraunces is a high-contrast display serif. Above roughly 2rem it carries the
   personality of the page. Below that, reversed out of near-black, its thin
   strokes thin further and the counters close up, which is the "blurs together"
   complaint exactly. Display keeps the serif; card, label and list sizes move to
   the grotesque, which is what actually holds small and reversed out. */
h3,h4,
.org__body h3,.orgcard__name,.orgcard__mark,.hero__strip b,.evt__date b,.dir-empty__big{
  font-family:"Archivo Expanded",Archivo,sans-serif;font-weight:700;
  font-variation-settings:normal;letter-spacing:-.012em
}
p{text-wrap:pretty}

.eyebrow{
  font-family:"Archivo Expanded",Archivo,sans-serif; font-weight:700;
  font-size:var(--t-eyebrow); letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent-hi); display:flex; align-items:center; gap:.7rem;
}
.eyebrow::before{content:"";width:1.9rem;height:1px;background:currentColor;opacity:.65;flex:none}
.eyebrow.is-center{justify-content:center}

.lead{font-size:var(--t-lead);line-height:1.58;color:var(--fg-dim);font-weight:400}
.measure{max-width:var(--readw)}
.measure-wide{max-width:46rem}
.muted{color:var(--fg-mute)}
.tnum{font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- layout  */
.wrap{width:min(100% - (var(--gut)*2),var(--maxw));margin-inline:auto}
.wrap-wide{width:min(100% - (var(--gut)*2),94rem);margin-inline:auto}
.section{padding-block:var(--sec);position:relative}
.stack>*+*{margin-top:var(--s4)}
.stack-lg>*+*{margin-top:var(--s6)}

.grid{display:grid;gap:clamp(1.5rem,1rem + 2vw,3rem)}
@media(min-width:52em){
  .g-2{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:repeat(3,1fr)}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .g-sidebar{grid-template-columns:minmax(0,1fr) minmax(0,1.32fr);align-items:start}
}
@media(min-width:40em) and (max-width:51.99em){
  .g-3{grid-template-columns:repeat(2,1fr)}
  .g-4{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:72em){ .g-4{grid-template-columns:repeat(4,1fr)} }

/* Raised band, not an inversion. Section rhythm now comes from elevation
   instead of flipping the whole page to white. */
.paper{
  background:var(--ink-850);
  --surface:var(--ink-750); --surface-2:var(--ink-700);
  --rule:#242A31; --rule-soft:#1A1F25; --rule-strong:#333B44;
  border-block:1px solid #191E24;
}
/* Two paper bands running together share a background, so the border between
   them divides nothing and reads as a stray rule across the page. Collapse it. */
.paper + .paper{border-top:0}
.paper:has(+ .paper){border-bottom:0}
.paper .eyebrow{color:var(--accent-hi)}
/* Dark cards sitting inside a light section keep their own light type.
   Without this the .paper heading colour wins and the titles vanish. */

/* --------------------------------------------------------------- a11y ui  */
.skip{
  position:absolute;left:var(--s4);top:-100px;z-index:1000;
  background:var(--accent);color:#fff;padding:.7rem 1.1rem;border-radius:var(--r-sm);
  font-weight:600;font-size:var(--t-sm);transition:top .18s var(--ease)
}
.skip:focus{top:var(--s4)}
:focus-visible{outline:2.5px solid var(--accent-hi);outline-offset:3px;border-radius:3px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --------------------------------------------------------- crisis ribbon  */
.crisis-bar{
  background:var(--ink-850); border-bottom:1px solid var(--rule);
  font-size:var(--t-sm); position:relative; z-index:60;
}
.crisis-bar__in{
  display:flex;align-items:center;justify-content:center;gap:.35rem .95rem;
  flex-wrap:wrap; padding:.62rem 0; text-align:center;
}
.crisis-bar__lab{
  display:inline-flex;align-items:center;gap:.5rem;
  color:var(--ink-150);font-weight:500
}
.pulse{
  width:7px;height:7px;border-radius:50%;background:var(--brand-hi);flex:none;
  box-shadow:0 0 0 0 rgba(95,160,238,.7);animation:pulse 2.6s infinite
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(95,160,238,.55)}
  70%{box-shadow:0 0 0 9px rgba(95,160,238,0)}
  100%{box-shadow:0 0 0 0 rgba(95,160,238,0)}
}
@media (prefers-reduced-motion:reduce){.pulse{animation:none}}
.crisis-bar a{
  color:#fff;font-weight:600;text-decoration:none;
  border-bottom:1.5px solid color-mix(in srgb,var(--brand-hi) 55%,transparent);
  padding-bottom:1px;transition:border-color .2s var(--ease),color .2s var(--ease)
}
.crisis-bar a:hover{border-bottom-color:var(--brand-hi);color:var(--brand-hi)}

/* ---------------------------------------------------------------- header  */
.site-head{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--ink-900) 82%,transparent);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--rule-soft);
  transition:border-color .3s var(--ease),background .3s var(--ease)
}
.site-head.is-stuck{border-bottom-color:var(--rule-strong);background:color-mix(in srgb,var(--ink-900) 94%,transparent)}
.nav{display:flex;align-items:center;gap:var(--s4);min-height:4.6rem}

.brand{display:flex;align-items:center;gap:.72rem;text-decoration:none;flex:none;margin-right:auto}
/* The organization's own emblem, knocked out to white so the line art reads
   on the dark ground. Their full-colour badge appears on the About page. */
.brand__mark{
  width:2.72rem;height:2.72rem;flex:none;
  display:grid;place-items:center;position:relative
}
.brand__mark img{width:100%;height:100%;object-fit:contain;display:block}
.brand__txt{display:flex;flex-direction:column;line-height:1.06}
.brand__txt b{
  font-family:Fraunces,serif;font-weight:700;font-size:1.2rem;letter-spacing:-.024em;
  font-variation-settings:"SOFT" 14,"WONK" 1
}
.brand__txt span{
  font-family:"Archivo Expanded",Archivo,sans-serif;font-size:.72rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-300);margin-top:.16rem
}

.nav__links{display:none;align-items:center;gap:.05rem;flex-wrap:nowrap}
@media(min-width:72em){.nav__links{display:flex}}
.nav__links a{
  text-decoration:none;font-size:1.02rem;font-weight:600;color:var(--ink-150);white-space:nowrap;
  padding:.55rem .6rem;border-radius:8px;position:relative;
  transition:color .2s var(--ease),background .2s var(--ease)
}
.nav__links a:hover{color:#fff;background:rgba(255,255,255,.055)}
.nav__links a[aria-current="page"]{color:#fff}
.nav__links a[aria-current="page"]::after{
  content:"";position:absolute;left:.78rem;right:.78rem;bottom:.28rem;height:2px;
  background:var(--accent-hi);border-radius:2px
}

/* specificity must beat the later .btn{display:inline-flex} rule */
.nav .nav__cta{display:none}
@media(min-width:72em){.nav .nav__cta{display:inline-flex}}

.burger{
  display:grid;place-items:center;width:2.75rem;height:2.75rem;flex:none;
  background:transparent;border:1px solid var(--rule-strong);border-radius:9px;cursor:pointer;
  transition:background .2s var(--ease),border-color .2s var(--ease)
}
.burger:hover{background:rgba(255,255,255,.06);border-color:var(--ink-400)}
@media(min-width:72em){.burger{display:none}}
.burger span{display:block;width:17px;height:1.5px;background:var(--paper);border-radius:2px;transition:transform .3s var(--ease),opacity .2s var(--ease)}
.burger span+span{margin-top:4.5px}
.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 drawer */
.drawer{
  position:fixed;inset:0;z-index:70;background:var(--ink-900);
  display:flex;flex-direction:column;padding:var(--gut);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  /* visibility must flip instantly on open (so it can take focus) and only
     after the fade on close, hence the 0s duration with a delay. */
  transition:opacity .3s var(--ease),transform .35s var(--ease),visibility 0s linear .35s
}
.drawer.is-open{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .3s var(--ease),transform .35s var(--ease),visibility 0s linear 0s
}
@media(min-width:72em){.drawer{display:none!important}}
.drawer__top{display:flex;justify-content:flex-end;margin-bottom:var(--s5)}
.drawer__close{
  width:2.75rem;height:2.75rem;border:1px solid var(--rule-strong);background:transparent;
  border-radius:9px;cursor:pointer;font-size:1.4rem;line-height:1;display:grid;place-items:center
}
.drawer nav{display:flex;flex-direction:column;gap:.1rem;overflow-y:auto}
.drawer nav a{
  text-decoration:none;font-family:Fraunces,serif;font-weight:600;font-size:1.62rem;
  letter-spacing:-.028em;padding:.66rem 0;border-bottom:1px solid var(--rule-soft);
  display:flex;align-items:center;justify-content:space-between;
  font-variation-settings:"SOFT" 14,"WONK" 1
}
/* .note, not a bare span: the label itself may now be wrapped in .on-mark to
   carry an organization's colour dot, and that must not inherit this. */
.drawer nav a .note{font-family:Archivo,sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-400)}
.drawer nav a[aria-current="page"]{color:var(--accent-hi)}
.drawer__foot{margin-top:auto;padding-top:var(--s5);display:grid;gap:.6rem}

/* --------------------------------------------------------------- buttons  */
.btn{
  --bh:3.15rem;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:var(--bh);padding:0 1.42rem;border-radius:999px;
  font-family:Archivo,sans-serif;font-weight:600;font-size:.945rem;letter-spacing:-.004em;
  text-decoration:none;cursor:pointer;border:1px solid transparent;white-space:nowrap;
  transition:transform .18s var(--ease),background .22s var(--ease),
             border-color .22s var(--ease),color .22s var(--ease),box-shadow .22s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn svg{width:1.02em;height:1.02em;flex:none}

.btn--primary{
  background:var(--accent);color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 6px 20px -8px color-mix(in srgb,var(--accent) 75%,transparent)
}
.btn--primary:hover{background:var(--accent-hi);box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 10px 26px -8px color-mix(in srgb,var(--accent) 82%,transparent)}

.btn--ghost{border-color:var(--rule-strong);color:var(--fg);background:transparent}
.btn--ghost:hover{border-color:var(--ink-300);background:rgba(255,255,255,.055)}

.btn--solid{background:var(--paper);color:var(--ink-900);border-color:var(--paper)}
.btn--solid:hover{background:#fff;border-color:#fff}

.btn--lg{--bh:3.55rem;padding:0 1.75rem;font-size:1.005rem}
.btn--wide{width:100%}

.linkarrow{
  display:inline-flex;align-items:center;gap:.46rem;text-decoration:none;
  font-weight:600;font-size:.94rem;color:var(--accent-hi);
}
.linkarrow svg{width:.95em;height:.95em;transition:transform .25s var(--ease)}
.linkarrow:hover svg{transform:translateX(4px)}

/* ------------------------------------------------------------------ hero  */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--ink-900)}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{
  width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 42%);
  filter:saturate(.72) contrast(1.06) brightness(.72);
  transform:scale(1.045);
}
/* unified warm grade so every photo on the site belongs to one system */
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 82% at 78% 8%,rgba(120,175,240,.20),transparent 58%),
    linear-gradient(178deg,rgba(11,10,9,.42) 0%,rgba(11,10,9,.2) 26%,rgba(11,10,9,.74) 68%,var(--ink-900) 99%),
    linear-gradient(94deg,rgba(11,10,9,.86) 4%,rgba(11,10,9,.42) 46%,rgba(11,10,9,.16) 76%);
}
.hero__in{
  position:relative;padding-block:clamp(5rem,3rem + 13vw,11.5rem) clamp(4rem,2.4rem + 8vw,8rem);
  min-height:clamp(34rem,86vh,54rem);display:flex;flex-direction:column;justify-content:flex-end
}
/* Weight 700, not 900. At this scale the size and the tracking carry the
   hierarchy; more weight only makes it shout. */
.hero h1{
  font-size:var(--t-hero);font-weight:700;line-height:.885;letter-spacing:-.052em;
  font-variation-settings:"SOFT" 8,"WONK" 1,"opsz" 144;
  max-width:13ch;text-wrap:balance
}
.hero h1 em{
  font-style:normal;display:block;
  color:transparent;background:linear-gradient(96deg,var(--accent-hi) 0%,var(--accent-tint) 58%,#E9F3FF 100%);
  -webkit-background-clip:text;background-clip:text;
}
.hero__lead{max-width:34rem;margin-top:var(--s5);font-size:var(--t-lead);color:var(--ink-150);line-height:1.55}
.hero__acts{display:flex;flex-wrap:wrap;gap:.72rem;margin-top:var(--s6)}

/* ----------------------------------------------------------- hero field */
/* The signature visual. Phrases moving toward the viewer out of the dark, at
   an opacity that keeps them in the background until someone looks for them.
   Generated in a canvas: no image request, no third party.

   The gradient below is not a placeholder, it is the floor. If the script
   never runs the hero still has a lit sky behind the type. */
.hero--field{
  background:
    radial-gradient(88% 62% at 74% 6%,color-mix(in srgb,var(--brand) 26%,transparent),transparent 62%),
    radial-gradient(58% 40% at 8% 72%,color-mix(in srgb,var(--violet) 16%,transparent),transparent 78%),
    var(--ink-900)
}
.hero__field{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;display:block
}
/* Words behind words is a harder problem than dots behind words, so the copy
   gets two defences. First a soft well centred under the headline block, which
   dims the field where the reading happens and nowhere else. */
.hero--field .hero__in::before{
  content:"";position:absolute;inset:-20% -44% -22% -80%;z-index:-1;pointer-events:none;
  background:radial-gradient(46% 66% at 52% 62%,rgba(10,11,13,.95) 0%,rgba(10,11,13,.82) 34%,rgba(10,11,13,.38) 58%,transparent 76%)
}
/* Second, the type carries its own shadow, so a phrase drifting outside the
   well still cannot break a letterform. The gradient-filled line is exempt:
   a shadow under background-clip:text muddies the fill. */
.hero--field .hero h1,
.hero--field .hero__lead,
.hero--field .hero__strip b,
.hero--field .eyebrow{text-shadow:0 1px 20px rgba(10,11,13,.92),0 1px 3px rgba(10,11,13,.7)}
.hero--field .hero h1 em{text-shadow:none}
/* The eyebrow is 12px, so it needs the full 4.5:1 with no large-text relief.
   The base accent blue did not hold it once a phrase could pass behind, and
   --ink-300 was already only 4.6:1 under the hero's own gradient before the
   field added anything on top. Both lift one step on this section only. */
.hero--field .eyebrow{color:var(--accent-tint)}
.hero--field .hero__strip span{color:var(--ink-200)}

/* thin dawn rule that lights up on load */
.dawnline{position:relative;height:1px;background:var(--rule);overflow:hidden;margin-top:var(--s7)}
.dawnline::after{
  content:"";position:absolute;inset:0;transform-origin:left;
  background:linear-gradient(90deg,var(--accent) 0%,var(--accent-hi) 45%,transparent 100%);
  animation:dawn 1.9s var(--ease-out) .5s both
}
@keyframes dawn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.dawnline::after{animation:none;transform:none}}

/* hero stat strip */
.hero__strip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));
  gap:.25rem 2rem;margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--rule)
}
.hero__strip div{padding-block:.55rem}
.hero__strip b{
  display:block;font-weight:700;font-size:1.56rem;
  letter-spacing:-.026em;color:var(--paper);font-variation-settings:"SOFT" 14,"WONK" 1
}
.hero__strip span{font-size:var(--t-xs);color:var(--ink-300);letter-spacing:.04em}

/* -------------------------------------------------------------- org cards */
.orgs{display:grid;gap:1.15rem}
@media(min-width:56em){.orgs{grid-template-columns:repeat(3,1fr)}}

.org{
  --oc:var(--brand); --oc-hi:var(--brand-hi);
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--rule);border-radius:var(--r-lg);
  background:linear-gradient(178deg,var(--ink-800),var(--ink-850));
  text-decoration:none;isolation:isolate;
  transition:transform .42s var(--ease-out),border-color .3s var(--ease),box-shadow .42s var(--ease-out)
}
.org[data-o="vrt"]{--oc:var(--oxide);--oc-hi:var(--oxide-hi)}
.org[data-o="spc"]{--oc:var(--violet);--oc-hi:var(--violet-hi)}
.org:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--oc) 46%,var(--rule));box-shadow:0 22px 48px -22px rgba(0,0,0,.85)}
/* The organization's colour is taxonomy, not a hover reward, so the bar is
   always there. Hover only brings it up to full. */
.org::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--oc),var(--oc-hi));
  opacity:.6;transition:opacity .4s var(--ease-out)
}
.org:hover::before{opacity:1}

.org__img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ink-700)}
.org__img img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.62) contrast(1.05) brightness(.66);
  transition:transform .8s var(--ease-out),filter .5s var(--ease)
}
.org:hover .org__img img{transform:scale(1.055);filter:saturate(.8) contrast(1.06) brightness(.76)}
.org__img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(170deg,color-mix(in srgb,var(--oc) 26%,transparent) 0%,transparent 46%,rgba(11,10,9,.9) 100%)
}
.org__body{padding:1.5rem 1.5rem 1.65rem;display:flex;flex-direction:column;flex:1;gap:.72rem}
.org__kicker{
  font-family:"Archivo Expanded",Archivo,sans-serif;font-size:.635rem;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;color:var(--oc-hi)
}
/* reserve two lines so every card's body copy starts on the same baseline */
.org__badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.9rem;height:2.9rem;border-radius:10px;margin-bottom:.15rem;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13)
}
.org__badge img{width:74%;height:74%;object-fit:contain;display:block}
.org__body h3{font-size:1.46rem;line-height:1.14;letter-spacing:-.028em}
@media(min-width:56em){.org__body h3{min-height:calc(2 * 1.14em)}}
.org__body p{font-size:var(--t-sm);color:var(--ink-200);line-height:1.58;flex:1}
.org__more{display:inline-flex;align-items:center;gap:.42rem;font-size:.87rem;font-weight:600;color:var(--oc-hi);margin-top:.2rem}
.org__more svg{width:.92em;height:.92em;transition:transform .25s var(--ease)}
.org:hover .org__more svg{transform:translateX(4px)}

/* -------------------------------------------------------------- feature   */
.feature{position:relative;border-radius:var(--r-xl);overflow:hidden;isolation:isolate;min-height:26rem;display:flex}
.feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:saturate(.78) contrast(1.04) brightness(.82)}
/* Heavy scrim only under the copy on the left; the right half stays open so the
   photograph is actually legible rather than crushed to black. */
.feature::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(96deg,rgba(11,10,9,.95) 0%,rgba(11,10,9,.88) 26%,rgba(11,10,9,.46) 62%,rgba(11,10,9,.1) 100%),
             radial-gradient(90% 70% at 88% 12%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 62%)
}
.feature__in{padding:clamp(2rem,1.2rem + 3.4vw,4rem);display:flex;flex-direction:column;justify-content:center;max-width:44rem;color:var(--paper)}

/* ---------------------------------------------------------------- pillars */
.pillar{
  padding:1.65rem 1.55rem;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--surface);position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color .3s var(--ease),transform .35s var(--ease-out),background .3s var(--ease)
}
/* body copy absorbs the slack so any trailing link sits on a common baseline */
.pillar>p:first-of-type{flex:1}
.pillar:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--rule));transform:translateY(-3px)}
.pillar__ico{
  width:2.7rem;height:2.7rem;border-radius:10px;display:grid;place-items:center;margin-bottom:1.05rem;
  background:color-mix(in srgb,var(--accent) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);color:var(--accent-hi)
}
.pillar__ico svg{width:1.3rem;height:1.3rem}
.pillar h3{font-size:1.16rem;margin-bottom:.5rem;letter-spacing:-.024em}
.pillar p{font-size:var(--t-sm);color:var(--fg-dim);line-height:1.6}

/* ------------------------------------------------------------ pull quote  */
.pullquote{
  position:relative;padding-left:clamp(1.15rem,.6rem + 1.7vw,2.1rem);
  border-left:2px solid var(--accent);
}
.pullquote p{
  font-family:Fraunces,serif;font-weight:500;font-size:clamp(1.32rem,1.02rem + 1.5vw,2.28rem);
  line-height:1.24;letter-spacing:-.026em;font-variation-settings:"SOFT" 22,"WONK" 1;
  text-wrap:balance
}
.pullquote cite{
  display:block;margin-top:1.05rem;font-style:normal;font-size:var(--t-xs);
  letter-spacing:.15em;text-transform:uppercase;color:var(--fg-mute);font-weight:600
}

/* ---------------------------------------------------------------- events  */
.evt{
  display:grid;gap:0;border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface);
  transition:border-color .3s var(--ease),box-shadow .4s var(--ease-out)
}
@media(min-width:48em){.evt{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}}
.evt:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--rule));box-shadow:0 20px 44px -26px rgba(0,0,0,.8)}
.evt__img{position:relative;overflow:hidden;min-height:15rem;background:var(--ink-700)}
/* Absolutely positioned so the photo never contributes its intrinsic height to
   the grid row: the body copy sets the card height, the image fills it. */
.evt__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:saturate(.68) contrast(1.04) brightness(.74);transition:transform .8s var(--ease-out)}
.evt:hover .evt__img img{transform:scale(1.05)}
.evt__date{
  position:absolute;top:.95rem;left:.95rem;z-index:2;
  background:var(--ink-900);border:1px solid var(--rule-strong);border-radius:10px;
  padding:.5rem .7rem;text-align:center;min-width:3.5rem;color:var(--paper)
}
.evt__date b{display:block;font-family:Fraunces,serif;font-size:1.28rem;font-weight:700;line-height:1;letter-spacing:-.02em}

/* Event artwork is square or portrait and the card frame is 16:10. Cropping a
   poster cuts the date off it, so the poster is contained and a blurred copy of
   itself fills the rest. The artwork stays whole and the card keeps its rhythm. */
.evt__img--poster{background:var(--ink-850)}
.evt__img--poster .evt__bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(26px) saturate(.6) brightness(.42);transform:scale(1.18)
}
.evt__img--poster .evt__art{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  filter:none;transform:none
}
.evt__date span{display:block;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-300);margin-top:.18rem;font-weight:600}
.evt__body{padding:clamp(1.35rem,1rem + 1.3vw,2.1rem);display:flex;flex-direction:column;gap:.72rem;justify-content:center}
.evt__body h3{font-size:clamp(1.24rem,1.06rem + .75vw,1.62rem);letter-spacing:-.028em}
.evt__meta{display:flex;flex-wrap:wrap;gap:.35rem 1.15rem;font-size:var(--t-sm);color:var(--fg-mute)}
.evt__meta span{display:inline-flex;align-items:center;gap:.42rem}
.evt__meta svg{width:.94em;height:.94em;opacity:.75;flex:none}
.evt__body p{font-size:var(--t-sm);color:var(--fg-dim);line-height:1.6}

.tag{
  display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;
  font-size:.665rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  font-family:"Archivo Expanded",Archivo,sans-serif;
  padding:.36rem .68rem;border-radius:999px;
  background:color-mix(in srgb,var(--accent) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  color:var(--accent-hi)
}
.tag--past{background:transparent;border-color:var(--rule-strong);color:var(--fg-mute)}

/* ------------------------------------------------------------- help cards */
.help{
  display:flex;flex-direction:column;gap:.85rem;padding:1.7rem 1.6rem;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);
  transition:border-color .28s var(--ease),transform .3s var(--ease-out)
}
.help:hover{border-color:color-mix(in srgb,var(--accent) 42%,var(--rule));transform:translateY(-2px)}
.help__num{
  font-family:Fraunces,serif;font-weight:900;font-size:clamp(2.1rem,1.6rem + 1.9vw,3.1rem);
  line-height:.95;letter-spacing:-.045em;color:var(--accent-hi);
  font-variation-settings:"SOFT" 8,"WONK" 1
}
/* An icon can stand in for the number. Height matches the numeral's line box
   (.95em) so headings stay on one baseline; the glyph itself stays .82em. */
.help__num svg{width:.82em;height:.95em;stroke-width:1.5}
.help h3{font-size:1.1rem;letter-spacing:-.022em}
.help p{font-size:var(--t-sm);color:var(--fg-dim);line-height:1.58}

/* big crisis panel */
.crisis-panel{
  border:1px solid color-mix(in srgb,var(--brand) 34%,var(--rule));
  border-radius:var(--r-xl);padding:clamp(1.75rem,1.2rem + 2.6vw,3.15rem);
  background:
    radial-gradient(110% 130% at 6% 0%,color-mix(in srgb,var(--brand) 17%,transparent),transparent 62%),
    var(--ink-850);
  position:relative;overflow:hidden
}
.crisis-num{
  font-family:Fraunces,serif;font-weight:900;letter-spacing:-.05em;line-height:.9;
  font-size:clamp(3.4rem,2.2rem + 5.4vw,6.4rem);
  font-variation-settings:"SOFT" 6,"WONK" 1;
  display:inline-block;text-decoration:none;padding-right:.09em;
  background:linear-gradient(96deg,var(--accent-hi),var(--accent-tint));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transition:filter .25s var(--ease)
}
a.crisis-num:hover{filter:brightness(1.14)}

/* ------------------------------------------------------------------ misc  */
/* ------------------------------------------------------------- stat pair */
.statgrid{display:grid;gap:1.15rem}
@media(min-width:48em){.statgrid{grid-template-columns:1.15fr 1fr;align-items:stretch}}
.stat{
  border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:clamp(1.5rem,1.1rem + 1.6vw,2.4rem);
  background:var(--surface);display:flex;flex-direction:column;gap:.5rem;justify-content:center
}
.stat b{
  font-family:Fraunces,serif;font-weight:900;line-height:.86;letter-spacing:-.05em;
  font-variation-settings:"SOFT" 6,"WONK" 1;
  font-size:clamp(3.1rem,2rem + 5.2vw,6rem);color:var(--fg-mute);
  display:block;font-variant-numeric:tabular-nums
}
.stat--lead b{
  background:linear-gradient(96deg,var(--accent-hi),var(--accent-tint));
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.stat .lab{
  font-family:"Archivo Expanded",Archivo,sans-serif;font-size:.665rem;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;color:var(--fg-mute)
}
.stat--lead .lab{color:var(--accent-hi)}
.stat p{font-size:var(--t-sm);color:var(--fg-dim);line-height:1.55}
.source{
  font-size:var(--t-xs);color:var(--fg-mute);line-height:1.6;
  padding-top:1.1rem;margin-top:1.4rem;border-top:1px solid var(--rule)
}

/* inline emphasis link that stays legible on both ink and paper */
.inlink{color:var(--accent-hi);font-weight:600;text-underline-offset:.18em}

/* official full-colour logo lockup, About page */
.logomark{display:flex;flex-direction:column;align-items:center;gap:1.15rem;text-align:center}
.logomark img{width:min(19rem,72vw);height:auto}
.logomark p{
  font-family:Fraunces,serif;font-weight:500;letter-spacing:-.02em;
  font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);color:var(--fg-dim)
}

.rule{height:1px;background:var(--rule);border:0;margin:0}
.chiprow{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.46rem .82rem;border:1px solid var(--rule-strong);border-radius:999px;
  font-size:var(--t-xs);font-weight:500;color:var(--fg-dim);background:var(--surface)
}
.chip svg{width:.92em;height:.92em;color:var(--accent-hi);flex:none}

.checks{display:grid;gap:.82rem}
.checks li{display:flex;gap:.78rem;align-items:flex-start;font-size:var(--t-sm);color:var(--fg-dim);line-height:1.58}
.checks svg{width:1.12rem;height:1.12rem;color:var(--accent-hi);flex:none;margin-top:.24rem}

/* page masthead for interior pages */
.masthead{position:relative;isolation:isolate;overflow:hidden;background:var(--ink-850);border-bottom:1px solid var(--rule)}
.masthead__media{position:absolute;inset:0;z-index:-2}
.masthead__media img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 40%);filter:saturate(.72) contrast(1.04) brightness(.68)}
/* The still is the floor, always present and always painted. The video lays over
   it with the same grade, so if it never loads, never decodes, or the reader has
   asked for less motion, the page looks deliberate rather than broken. */
.masthead__vid{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--pos,50% 40%);filter:saturate(.72) contrast(1.04) brightness(.68);
  opacity:0;transition:opacity 1.2s var(--ease-out);pointer-events:none
}
.masthead__vid[data-ready]{opacity:1}
@media (prefers-reduced-motion:reduce){.masthead__vid{display:none}}
.masthead__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,10,9,.34),rgba(11,10,9,.72) 64%,var(--ink-900) 100%),
             linear-gradient(96deg,rgba(11,10,9,.8) 2%,rgba(11,10,9,.32) 52%,rgba(11,10,9,.08) 100%),
             radial-gradient(100% 80% at 82% 4%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 60%)
}
.masthead__in{padding-block:clamp(3.6rem,2.4rem + 6vw,7rem) clamp(3rem,2rem + 4.5vw,5.5rem)}
.masthead h1{font-size:var(--t-d1);font-weight:700;letter-spacing:-.046em;line-height:.93;max-width:17ch;font-variation-settings:"SOFT" 8,"WONK" 1,"opsz" 144}
.masthead .lead{margin-top:var(--s5);max-width:38rem}

.crumbs{display:flex;flex-wrap:wrap;gap:.42rem;font-size:var(--t-xs);color:var(--ink-300);margin-bottom:var(--s5)}
.crumbs a{text-decoration:none;color:var(--ink-200)}
.crumbs a:hover{color:var(--accent-hi)}
.crumbs span{opacity:.5}

/* --------------------------------------------------------------- footer   */
.site-foot{background:var(--ink-850);border-top:1px solid var(--rule);padding-block:var(--s8) var(--s6);margin-top:0}
.foot__grid{display:grid;gap:var(--s6)}
@media(min-width:56em){.foot__grid{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}}
.foot__grid h4{
  font-family:"Archivo Expanded",Archivo,sans-serif;font-size:.665rem;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;color:var(--ink-300);margin-bottom:1rem
}
.foot__links{display:grid;gap:.52rem}
/* overflow-wrap: the email address is one unbreakable 29 character string and
   was pushing the last footer column past the viewport at 1024.
   padding-block: lifts these off a 24px line box so they are a real tap target. */
.foot__links a{
  text-decoration:none;font-size:var(--t-sm);color:var(--ink-150);
  transition:color .2s var(--ease);
  overflow-wrap:anywhere;padding-block:.18rem
}
.foot__links a:hover{color:var(--accent-hi)}
.foot__bottom{
  margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;justify-content:space-between;
  font-size:var(--t-xs);color:var(--ink-200)   /* 8.7:1 ... carries the 911 line */
}
.foot__bottom a{color:var(--ink-300);text-decoration:none}
.foot__bottom a:hover{color:var(--accent-hi)}
.social{display:flex;gap:.55rem}
.social a{
  width:2.35rem;height:2.35rem;display:grid;place-items:center;border-radius:9px;
  border:1px solid var(--rule-strong);color:var(--ink-200);
  transition:border-color .22s var(--ease),color .22s var(--ease),background .22s var(--ease)
}
.social a:hover{border-color:var(--accent);color:var(--accent-hi);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.social svg{width:1.05rem;height:1.05rem}

/* ------------------------------------------------------- scroll reveal    */
/* Gated on .js so that if the script never runs, nothing is left invisible. */
.js [data-rev]{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.js [data-rev].is-in{opacity:1;transform:none}
[data-rev-d="1"]{transition-delay:.08s} [data-rev-d="2"]{transition-delay:.16s}
[data-rev-d="3"]{transition-delay:.24s} [data-rev-d="4"]{transition-delay:.32s}
[data-rev-d="5"]{transition-delay:.4s}  [data-rev-d="6"]{transition-delay:.48s}
@media (prefers-reduced-motion:reduce){
  [data-rev]{opacity:1!important;transform:none!important;transition:none!important}
}
/* hero load-in stagger */
.js .hero [data-load]{opacity:0;transform:translateY(20px);animation:rise .95s var(--ease-out) forwards}
.hero [data-load="1"]{animation-delay:.1s} .hero [data-load="2"]{animation-delay:.22s}
.hero [data-load="3"]{animation-delay:.34s} .hero [data-load="4"]{animation-delay:.46s}
.hero [data-load="5"]{animation-delay:.58s}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hero [data-load]{opacity:1;transform:none;animation:none}}

/* ------------------------------------------------------------------ print */
@media print{
  .site-head,.drawer,.crisis-bar,.site-foot,.burger,body::after{display:none!important}
  body{background:#fff;color:#000}
  .hero__media,.masthead__media,.feature img{display:none}
  a{text-decoration:underline}
}

/* ==========================================================================
   Shelby County resource directory
   ========================================================================== */

.dir-urgent{
  display:flex;align-items:flex-start;gap:.85rem;
  padding:1rem 1.25rem;border-radius:var(--r);
  background:var(--ink-850);border:1px solid color-mix(in srgb,var(--accent) 34%,var(--rule));
  box-shadow:0 18px 40px -28px rgba(0,0,0,.9)
}
.dir-urgent .pulse{margin-top:.55rem}
.dir-urgent p{font-size:var(--t-sm);line-height:1.6;color:var(--ink-150)}
.dir-urgent b{color:#fff}
.dir-urgent a{color:var(--accent-hi);font-weight:600;text-underline-offset:.16em}

/* ------------------------------------------------------------ the tools -- */
.dir-tools{
  position:sticky;top:4.6rem;z-index:20;
  padding:1.1rem 0 .9rem;margin-bottom:var(--s6);
  background:linear-gradient(180deg,var(--bg) 72%,transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)
}
@media(max-width:63.99em){.dir-tools{top:4.6rem}}

.dir-search{position:relative;display:flex;align-items:center}
.dir-search__ico{
  position:absolute;left:1.05rem;display:grid;place-items:center;
  color:var(--fg-mute);pointer-events:none
}
.dir-search__ico svg{width:1.2rem;height:1.2rem}
.dir-search input{
  width:100%;min-height:3.6rem;padding:0 3rem 0 3.05rem;
  background:var(--surface);border:1px solid var(--rule-strong);border-radius:999px;
  color:var(--fg);font-size:1.05rem;letter-spacing:-.01em;
  transition:border-color .2s var(--ease),background .2s var(--ease)
}
.dir-search input::placeholder{color:var(--fg-mute)}
.dir-search input:focus{outline:none;border-color:var(--accent);background:var(--ink-800)}
.dir-search input:focus-visible{outline:2.5px solid var(--accent-hi);outline-offset:2px}
.dir-search input::-webkit-search-cancel-button{display:none}
.dir-search__clear{
  position:absolute;right:.7rem;width:2.4rem;height:2.4rem;border-radius:50%;
  border:0;background:var(--ink-600);color:var(--fg);font-size:1.15rem;line-height:1;
  cursor:pointer;display:grid;place-items:center
}
.dir-search__clear:hover{background:var(--ink-500)}

.dir-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.9rem}
.chipbtn{
  display:inline-flex;align-items:center;gap:.42rem;
  min-height:2.35rem;padding:0 .82rem;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid var(--rule-strong);color:var(--fg-dim);
  font-size:.855rem;font-weight:500;letter-spacing:-.006em;white-space:nowrap;
  transition:border-color .18s var(--ease),color .18s var(--ease),background .18s var(--ease)
}
.chipbtn:hover{border-color:var(--ink-300);color:var(--fg)}
.chipbtn__n{
  font-size:.72rem;font-variant-numeric:tabular-nums;color:var(--fg-dim);
  background:var(--ink-700);padding:.08rem .38rem;border-radius:999px
}
.chipbtn.is-on{
  background:var(--accent);border-color:var(--accent);color:#fff
}
/* A white badge over the accent fill left white text at 3.5:1. Darkening the
   badge instead of lightening it clears AA against every accent. */
.chipbtn.is-on .chipbtn__n{background:rgba(0,0,0,.24);color:#fff}

.dir-count{margin-top:.9rem;font-size:var(--t-xs);color:var(--fg-mute);letter-spacing:.03em}

/* ------------------------------------------------------------- the grid -- */
.dir-grid{display:grid;gap:1rem}
@media(min-width:40em){.dir-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:68em){.dir-grid{grid-template-columns:repeat(3,1fr)}}

.orgcard{
  display:flex;flex-direction:column;gap:.8rem;
  padding:1.3rem 1.25rem 1.15rem;
  border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);
  transition:border-color .22s var(--ease),transform .28s var(--ease-out),box-shadow .28s var(--ease-out)
}
.orgcard:hover{
  border-color:color-mix(in srgb,var(--accent) 42%,var(--rule));transform:translateY(-3px);
  box-shadow:0 18px 40px -26px rgba(0,0,0,.85)
}
.orgcard__top{display:flex;gap:.9rem;align-items:flex-start}
.orgcard__logo{
  width:3.4rem;height:3.4rem;flex:none;border-radius:11px;overflow:hidden;
  background:var(--ink-700);border:1px solid var(--rule-strong)
}
.orgcard__logo img{width:100%;height:100%;object-fit:cover;display:block}
.orgcard__mark{
  width:3.4rem;height:3.4rem;flex:none;border-radius:11px;display:grid;place-items:center;
  font-family:Fraunces,serif;font-weight:700;font-size:1.16rem;letter-spacing:-.03em;
  color:#fff;border:1px solid rgba(255,255,255,.14)
}
.orgcard__name{
  font-weight:700;font-size:1.16rem;line-height:1.24;
  letter-spacing:-.026em;color:var(--fg);
  font-variation-settings:"SOFT" 14,"WONK" 1
}
.orgcard__tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.42rem}
.orgcard__tag{
  font-size:.645rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-hi);background:color-mix(in srgb,var(--accent) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);
  padding:.16rem .44rem;border-radius:999px;white-space:nowrap
}
.orgcard__mission{
  font-size:.885rem;line-height:1.58;color:var(--fg-dim);flex:1;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden
}
.orgcard__addr{
  font-size:var(--t-xs);color:var(--fg-mute);display:flex;gap:.42rem;align-items:flex-start;line-height:1.5
}
.orgcard__addr svg{width:.9rem;height:.9rem;flex:none;margin-top:.16rem}

.orgcard__acts{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.15rem}
.actbtn{
  display:inline-flex;align-items:center;gap:.38rem;
  min-height:2.35rem;padding:0 .72rem;border-radius:8px;text-decoration:none;
  font-size:.8rem;font-weight:600;letter-spacing:-.004em;
  border:1px solid var(--rule-strong);color:var(--fg-dim);background:transparent;
  transition:border-color .18s var(--ease),color .18s var(--ease),background .18s var(--ease)
}
.actbtn svg{width:.94rem;height:.94rem}
.actbtn:hover{border-color:var(--accent);color:var(--accent-hi);background:color-mix(in srgb,var(--accent) 11%,transparent)}
.actbtn--call{
  border-color:color-mix(in srgb,var(--accent) 52%,transparent);
  color:#fff;background:color-mix(in srgb,var(--accent) 26%,transparent)
}
.actbtn--call:hover{background:var(--accent);border-color:var(--accent);color:#fff}

.dir-empty{text-align:center;padding:var(--s8) var(--s4);border:1px dashed var(--rule-strong);border-radius:var(--r-lg)}
.dir-empty__big{
  font-family:Fraunces,serif;font-weight:700;font-size:1.6rem;letter-spacing:-.028em;color:var(--fg);
  margin-bottom:.5rem;font-variation-settings:"SOFT" 14,"WONK" 1
}
.dir-empty p{color:var(--fg-dim);font-size:var(--t-sm);margin-bottom:1.35rem}

mark{background:color-mix(in srgb,var(--accent) 38%,transparent);color:inherit;border-radius:3px;padding:0 .1em}

@media (prefers-reduced-motion:reduce){
  .orgcard{transition:none}
  .orgcard:hover{transform:none}
}
.orgcard__tag--more{
  color:var(--fg-mute);background:transparent;border-color:var(--rule-strong);cursor:help
}
/* long parenthetical org names should not eat the whole card */
.orgcard__name{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* On a phone the thirteen filters stacked seven rows deep and pushed the list
   off screen. One swipeable row keeps every filter a single tap away. */
@media(max-width:47.99em){
  .dir-chips{
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    padding-bottom:.45rem;margin-inline:calc(var(--gut) * -1);
    padding-inline:var(--gut);
    scrollbar-width:none
  }
  .dir-chips::-webkit-scrollbar{display:none}
  .chipbtn{scroll-snap-align:start;flex:none}
}

/* org badge in a page masthead */
.masthead__logo{margin-bottom:1.6rem}
.masthead__logo img{
  width:auto;height:clamp(5.5rem,4.4rem + 3.6vw,8.5rem);
  filter:drop-shadow(0 6px 22px rgba(0,0,0,.55))
}

/* A predominantly black logo needs its own light plate on a dark page,
   otherwise only its white keyline survives. */
.masthead__logo--plate{
  display:inline-block;background:#fff;
  padding:.5rem;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 14px 34px -18px rgba(0,0,0,.85)
}
.masthead__logo--plate img{filter:none}

/* ----------------------------------------------------------------- board  */
/* One column on a phone, two from tablet up. The portrait is square and
   cropped centre, because supplied headshots arrive at every ratio there is. */
.bios{display:grid;gap:clamp(1.1rem,.8rem + 1.4vw,2rem)}
@media(min-width:56em){.bios{grid-template-columns:repeat(2,1fr)}}
.bio{
  display:flex;flex-direction:column;gap:1.1rem;
  background:linear-gradient(170deg,var(--ink-800),var(--ink-850));
  border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:clamp(1.15rem,.9rem + 1vw,1.75rem)
}
@media(min-width:34em){.bio{flex-direction:row;align-items:flex-start}}
.bio__shot{
  flex:none;width:clamp(6.5rem,5rem + 6vw,9rem);aspect-ratio:1;
  border-radius:14px;overflow:hidden;background:var(--ink-700);
  border:1px solid var(--rule-strong)
}
.bio__shot img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9) contrast(1.02)}
.bio__in h3{margin-bottom:.15rem}
.bio__role{
  font-family:"Archivo Expanded",Archivo,sans-serif;font-weight:700;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-hi);margin-bottom:.75rem
}
.bio__in p{color:var(--fg-dim);font-size:var(--t-sm);line-height:1.62}
.bio__in p + p{margin-top:.7rem}
.bio__pending{font-style:italic;color:var(--fg-mute)}

/* ------------------------------------------------------- first light ---- */
/* The coalition page is the one place on this site where light arrives. A warm
   wash sits behind everything and strengthens as the reader travels down, so
   reading the page is moving from night toward morning. Driven by a single
   custom property so the paint stays on the compositor and the scroll handler
   does nothing but write a number. */
[data-org="spc"]{--dawn:0}
[data-org="spc"] body::before{
  content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;
  opacity:var(--dawn,0);
  background:
    radial-gradient(135% 96% at 50% 114%, rgba(224,160,64,.34), transparent 62%),
    radial-gradient(110% 80% at 18% 104%, rgba(117,64,188,.20), transparent 68%);
}
@media (prefers-reduced-motion:reduce){[data-org="spc"] body::before{opacity:.34}}

/* And the page ends in actual daylight, tokens flipped rather than colours
   overridden one by one, so every component inside inherits the change. */
.daybreak{
  --bg:#F7F4EA; --fg:#14171B; --fg-dim:#3B424B; --fg-mute:#5A6067;
  --surface:#EFEBDF; --surface-2:#E2DDCF;
  --rule:#D8D3C5; --rule-soft:#E8E3D6; --rule-strong:#BEB9A9;
  --accent-hi:#5B2E96; --accent-ink:#FFFFFF;
  background:var(--bg);color:var(--fg);position:relative;z-index:0
}
.daybreak h1,.daybreak h2,.daybreak h3,.daybreak h4{color:var(--fg)}
.daybreak .eyebrow{color:#6B3FB0}
.daybreak p{color:var(--fg-dim)}
.daybreak .btn--ghost{border-color:var(--rule-strong);color:var(--fg)}

/* The house grade darkens hero media to about two thirds so cream type always
   clears it. On the coalition page the whole argument is that light arrives, so
   the grade lifts and the scrim leans on the left, where the words actually sit,
   instead of flattening the sky. */
[data-org="spc"] .masthead__media img,
[data-org="spc"] .masthead__vid{filter:saturate(.92) contrast(1.02) brightness(.88)}
[data-org="spc"] .masthead__media::after{
  background:
    linear-gradient(180deg,rgba(11,10,9,.30),rgba(11,10,9,.42) 62%,var(--ink-900) 100%),
    linear-gradient(96deg,rgba(11,10,9,.88) 2%,rgba(11,10,9,.52) 46%,rgba(11,10,9,.06) 82%),
    radial-gradient(90% 70% at 86% 10%,color-mix(in srgb,var(--violet) 16%,transparent),transparent 62%)
}

/* --------------------------------------------------------------- faces  */
/* A board is people, so the About page shows the faces before it shows the
   words. Auto-fit rather than a fixed column count, because the roster is
   ten today and will not be ten forever. */
/* Fixed column counts rather than auto-fit: the roster is ten, and auto-fit
   put nine in a row and one orphan underneath. Five and five reads as a board. */
.facegrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.7rem,.5rem + .8vw,1.15rem)}
@media(min-width:34em){.facegrid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:48em){.facegrid{grid-template-columns:repeat(5,1fr)}}
.facegrid__f{text-decoration:none;display:block;text-align:center}
.facegrid__f img{
  width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block;border-radius:14px;
  border:1px solid var(--rule-strong);background:var(--ink-700);
  filter:saturate(.86) contrast(1.02) brightness(.92);
  transition:filter .3s var(--ease),transform .3s var(--ease)
}
.facegrid__f:hover img{filter:none;transform:translateY(-3px)}
.facegrid__f span{
  display:block;margin-top:.5rem;font-family:"Archivo Expanded",Archivo,sans-serif;
  font-weight:700;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-dim)
}
.facegrid__f:hover span{color:var(--fg)}

/* A logo is not a photograph: it needs air around it and its own ground, not a
   crop. All three tiles are white because two of the three marks are drawn for
   white and one has it baked in with no alpha, so keying it out would take the
   flag stripes and the lettering with it.

   The image is pinned by offsets rather than centred in a grid. With grid and
   place-items:center the row sized itself to the image's intrinsic height, so
   height:100% resolved against a box the image had already stretched, and the
   bottom of every square lockup was clipped. Four offsets give it a box that
   cannot argue back. */
.org__img--logo{
  --pad:clamp(1rem,.7rem + 1.4vw,1.9rem);
  display:block;position:relative;
  aspect-ratio:4/3;
  background:#FFFFFF;
}
.org__img--logo img{
  position:absolute;top:var(--pad);left:var(--pad);
  width:calc(100% - (2 * var(--pad)));
  height:calc(100% - (2 * var(--pad)));
  object-fit:contain;
  filter:none;transform:none;transition:transform .35s var(--ease)
}
.org:hover .org__img--logo img{transform:scale(1.04)}
.org__img--logo::after{content:none}