/* ============================================================
   FAMILY DINNER FOUNDATION — BRAND IDENTITY SYSTEM V1.0
   Built to the FD Design Package vF specification.
   ============================================================ */

:root{
  /* Color system — Ink and Paper carry the institution. */
  --ink:#0A0A0A;
  --paper:#F8F5EF;
  --linen:#EBE7DF;
  --slate:#58554E;
  --mute:#A8A49C;
  /* Form hints and placeholders carry instructions, so they have to clear
     4.5:1 the way body copy does. --mute measures 2.28 on Paper and cannot
     be used for them. See the A11Y note below. */
  --hint:#726E65;
  /* Field and control edges are non-text UI, which WCAG 1.4.11 holds to
     3:1. The Linen edge this started with measured 1.40 — visible to us on a
     good screen, invisible in daylight or to a low-vision reader. */
  --edge:#8A8476;

  /* Four accents — one lightness, one chroma. One per venture. */
  --ember:#B25630;    /* Our Family Dinner */
  --harvest:#9A6B00;  /* 5C Mutual Care */
  --sage:#39853F;     /* Foundation Village — see A11Y note */
  --signal:#2D78BD;   /* mbio */

  --ember-t:#FEE1D6; --harvest-t:#F4E6CE; --sage-t:#DAEFDA; --signal-t:#D7EAFF;

  /* --- A11Y NOTE ------------------------------------------------------
     The package states all four accents clear 4.5:1 on Paper. Measured,
     only Ember does (4.52). Harvest 4.31, Signal 4.26, Sage 4.03 fail, and
     white type on Sage measures 4.39. Three values are nudged below —
     each change is 2–4%, visually indistinguishable, and preserves the
     shared-lightness logic. Revert to the printed hexes if you prefer the
     package verbatim; the layout is unaffected either way.
       Sage field  #3B8841 -> #39853F   (white type 4.39 -> 4.56)
       Harvest type on Paper  -> #956700 (4.31 -> 4.58)
       Ember eyebrow on Ink   -> #D98060 (4.02 -> 6.79)
     -------------------------------------------------------------------- */
  --harvest-type:#956700;   /* small caps labels on Paper */
  --ember-ink:#D98060;      /* spaced caps on Ink grounds */

  /* Typography */
  --grotesk:"Helvetica Neue",Helvetica,Archivo,"Segoe UI",Arial,sans-serif;
  --serif:Newsreader,Georgia,"Times New Roman",serif;

  /* 8px base grid */
  --u:8px;
  --gut:2px;                    /* gutters between color fields */
  --pad:clamp(24px,5vw,80px);
  --max:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--slate);
  font-family:var(--grotesk);font-size:17px;font-weight:400;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
/* height:auto is load-bearing — without it the width/height HTML attributes
   become presentational hints and override aspect-ratio. That was forcing the
   mission photo to render 500x1600 instead of 500x667. */
img{max-width:100%;display:block;height:auto}
a{color:inherit}
::selection{background:var(--ink);color:var(--paper)}

/* Square corners everywhere. No shadows. */
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}

/* ---- SIGNATURE DEVICE: the spaced cap ---- */
/* 11–13px, 600, 0.3em tracking. Three words. Never a sentence. */
.eyebrow{
  font-size:11px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  line-height:1.4;margin:0 0 calc(var(--u)*2);color:var(--ember);
}
.eyebrow--ink{color:var(--ink)}
.eyebrow--paper{color:var(--paper)}
.eyebrow--harvest{color:var(--harvest-type)}
.eyebrow--onaccent{color:rgba(255,255,255,.93)}
/* Spaced caps sitting on an Ink ground use the lifted Ember — see A11Y note */
.section--ink .eyebrow,.hero .eyebrow{color:var(--ember-ink)}

/* ---- Type scale ---- */
.display{
  font-size:clamp(44px,7.4vw,104px);font-weight:600;letter-spacing:-.035em;
  line-height:1.02;color:var(--ink);margin:0;
}
.h2{
  font-size:clamp(30px,3.6vw,44px);font-weight:500;letter-spacing:-.025em;
  line-height:1.12;color:var(--ink);margin:0;
}
.h3{font-size:clamp(22px,2.2vw,27px);font-weight:600;letter-spacing:-.02em;line-height:1.2;margin:0}
.lede{max-width:62ch}
.body{font-size:17px;line-height:1.65;max-width:62ch;margin:0 0 1.1em}
.small{font-size:14px;line-height:1.6;color:var(--slate)}
.tiny{font-size:12px;line-height:1.55;color:var(--mute)}
.on-ink{color:var(--paper)}
.on-ink .h2,.on-ink .display{color:var(--paper)}
.on-ink .body,.on-ink .small{color:#BFBAB1}

/* Serif — the warmth. Mission statements, pull quotes, founder voice. Never UI.
   Package sets the quote at 32. That's calibrated to the artboard, not to a
   1920px viewport, where 32px reads as a caption. Scales 30 -> 50 instead. */
.serif{font-family:var(--serif);font-weight:300;font-size:clamp(30px,2.6vw,50px);line-height:1.3;letter-spacing:-.01em}

/* ---- Rules: 1px Linen ---- */
.rule{height:1px;background:var(--linen);border:0;margin:0}
.rule--ink{background:rgba(248,245,239,.18)}

/* ---- BUTTONS: square corners, no shadows, 0.2em tracking ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--grotesk);font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  padding:16px 26px;border:1px solid transparent;transition:background .18s,color .18s,border-color .18s;
}
.btn--primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--primary:hover{background:#000}
.btn--secondary{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--secondary:hover{background:var(--ink);color:var(--paper)}
.btn--accent{background:var(--ember);color:#fff;border-color:var(--ember)}
.btn--accent:hover{background:#9C4826}
.btn--paper{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn--paper:hover{background:#fff}
.btn--ghost{background:transparent;color:var(--paper);border-color:rgba(248,245,239,.55)}
.btn--ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-row{display:flex;flex-wrap:wrap;gap:calc(var(--u)*1.5)}

/* ---- THE MARK: filled square, never outline, never rounded ---- */
.fd-mark{
  width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;
  font-family:var(--grotesk);font-weight:700;font-size:13px;letter-spacing:.02em;
}
.fd-mark--positive{background:var(--ink);color:var(--paper)}  /* on Paper */
.fd-mark--reversed{background:var(--paper);color:var(--ink)}  /* on Ink / photography */
.lockup{display:flex;align-items:center;gap:12px;text-decoration:none}
.lockup__name{
  font-size:11px;font-weight:600;letter-spacing:.16em;line-height:1.25;
  text-transform:uppercase;color:var(--paper);
}

/* ============================ HEADER ============================ */
.site-header{background:var(--ink);position:sticky;top:0;z-index:60}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  max-width:var(--max);margin:0 auto;padding:18px var(--pad);
}
.nav{display:flex;align-items:center;gap:30px}
.nav a{
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;color:var(--paper);opacity:.82;transition:opacity .15s;white-space:nowrap;
}
.nav a:hover{opacity:1}
.header-cta{display:flex;align-items:center;gap:10px}
.header-cta .btn{padding:13px 20px}
.nav-toggle{display:none;background:none;border:1px solid rgba(248,245,239,.4);color:var(--paper);
  padding:9px 13px;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}

/* ---- Press bar ---- */
.pressbar{display:flex;align-items:stretch;background:#141414;border-top:1px solid rgba(248,245,239,.12)}
.pressbar__label{
  background:var(--ink);color:var(--ember-ink);flex:0 0 auto;
  padding:11px var(--pad);font-size:10px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  display:flex;align-items:center;white-space:nowrap;
}
.pressbar__track{
  flex:1;overflow:hidden;background:#1C1B19;position:relative;
  display:flex;align-items:center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);
}
.pressbar__marquee{display:flex;width:max-content;animation:ticker 42s linear infinite}
.pressbar__track:hover .pressbar__marquee,
.pressbar__track:focus-within .pressbar__marquee{animation-play-state:paused}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.pressbar__items{
  display:flex;align-items:center;gap:28px;padding:11px 22px;white-space:nowrap;flex:0 0 auto;
  font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#CFC9BE;
}
.pressbar__items a{color:#CFC9BE;text-decoration:none;transition:color .15s}
.pressbar__items a:hover{color:var(--paper)}
.pressbar__sep{color:var(--ember-ink)}
/* Motion is decorative — never animate for users who opt out. */
@media (prefers-reduced-motion:reduce){
  .pressbar__marquee{animation:none;width:auto}
  .pressbar__marquee > .pressbar__items:nth-child(n+2){display:none}
  .pressbar__track{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}

/* ============================ HERO ============================ */
/* Full-bleed. No rounded corners. Ink overlay 45–65%. Never a colored overlay. */
.hero{position:relative;background:var(--ink);overflow:hidden}
/* Crossfading city slideshow — the same gallery the old site ran:
   Miami, Los Angeles ×2, Portland, Atlanta, San Francisco.
   Slides stack in place and cross-dissolve; only opacity animates, so it
   stays on the compositor and never triggers layout. */
.hero__media{position:absolute;inset:0}
.hero__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;
  opacity:0;transition:opacity 2s ease-in-out;
}
.hero__img.is-active{opacity:1}
/* The first slide ships with .is-active in the markup, so with no JS —
   or if the later images never load — the hero still renders. Never blank. */
@media (prefers-reduced-motion:reduce){
  .hero__img{transition:none}
  .hero__img:not(.is-active){display:none}
}
.hero__scrim{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,10,10,.88) 0%,rgba(10,10,10,.74) 42%,rgba(10,10,10,.46) 100%);
}
.hero__inner{
  position:relative;max-width:var(--max);margin:0 auto;padding:clamp(88px,13vw,168px) var(--pad) clamp(72px,10vw,132px);
}
.hero__meta{color:rgba(248,245,239,.78);margin-bottom:calc(var(--u)*3)}
.hero .display{color:var(--paper);max-width:15ch}
.hero__body{color:#D8D3C9;max-width:52ch;margin:calc(var(--u)*4) 0 calc(var(--u)*5);font-size:17px;line-height:1.65}

/* ============================ SECTIONS ============================ */
.section{padding:clamp(64px,9vw,120px) 0}
.section--ink{background:var(--ink)}
.section--linen{background:var(--linen)}

/* ---- Challenge: stat row ---- */
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,6vw,88px);align-items:start}
.stats-row{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:clamp(40px,6vw,72px)}
.stat{padding:22px 22px 4px 0;border-top:1px solid rgba(248,245,239,.22)}
.stat + .stat{padding-left:22px}
.stat__n{font-size:clamp(28px,3.4vw,40px);font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--paper)}
.stat__l{font-size:12px;line-height:1.45;color:#A8A29A;margin-top:12px;max-width:20ch}

/* ---- Mission ---- */
.mission{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:stretch}
/* Photo fills the column and matches the text block's height rather than
   running past it — the package shows the two sitting flush. */
.mission__photo{width:100%;height:100%;min-height:520px;object-fit:cover;object-position:center 45%}
.impact{display:flex;gap:clamp(28px,5vw,56px);margin-top:calc(var(--u)*4);padding-top:calc(var(--u)*3);border-top:1px solid var(--ink)}
.impact__n{font-size:clamp(26px,3vw,34px);font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.impact__l{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--slate);margin-top:10px}

/* ---- Our Work: 2×2 color fields, 2px gutters ---- */
.work-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap}
.work-head .h3{color:var(--ink);font-weight:500;letter-spacing:-.02em}
.work-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);
  margin-top:calc(var(--u)*4);
}
.card{padding:clamp(30px,3.6vw,46px);color:#fff;display:flex;flex-direction:column;min-height:300px}
.card--ember{background:var(--ember)}
.card--sage{background:var(--sage)}
.card--signal{background:var(--signal)}
.card--harvest{background:var(--harvest)}
.card__title{font-size:clamp(23px,2.5vw,29px);font-weight:600;letter-spacing:-.02em;line-height:1.15;margin:0 0 16px;color:#fff}
.card__title--lower{text-transform:lowercase;font-weight:700}
.card__powered{font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.9);margin-left:10px;vertical-align:middle}
.card__body{font-size:15px;line-height:1.6;color:#fff;margin:0 0 auto;max-width:44ch}
.card__cta{
  display:inline-block;margin-top:28px;padding-top:16px;border-top:1px solid rgba(255,255,255,.42);
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#fff;text-decoration:none;
}
a.card__cta:hover{border-top-color:#fff}
span.card__cta{color:rgba(255,255,255,.72)}

/* ---- Quote ----
   BUG FIXED: the measure was `20ch` on .quote, but .quote inherits the 17px
   body size, so ch resolved against 17px — not the 32px serif — and squeezed
   the quote into a 189px column running seven lines deep. The measure now
   lives on the serif itself and is set in `em`, so it scales with the quote's
   own size and holds a ~3-line break at every viewport. */
.quote{text-align:center;margin:0 auto;color:var(--ink)}
.quote .serif{max-width:13em;margin:0 auto}
.quote__attr{
  display:block;margin-top:calc(var(--u)*5);font-style:normal;
  font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--slate);
}

/* ---- Evidence ---- */
.ev-row{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:start;padding:20px 0;border-top:1px solid var(--linen)}
.ev-row:last-child{border-bottom:1px solid var(--linen)}
.ev-row__t{font-size:15px;line-height:1.55;color:var(--slate);margin:0;max-width:52ch}
.ev-row__l{
  font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--harvest-type);
  text-align:right;line-height:1.5;max-width:11ch;
}

/* ---- Partner list ---- */
.plist{list-style:none;margin:0;padding:0}
.plist li{padding:17px 0;border-top:1px solid rgba(248,245,239,.18);font-size:15px;color:#CFC9BE}
.plist li:last-child{border-bottom:1px solid rgba(248,245,239,.18)}

/* ============================ FOOTER ============================ */
.footer{background:var(--ink);color:var(--paper);padding:clamp(56px,7vw,88px) 0 0}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(32px,5vw,72px)}
.footer__legal{font-size:12px;line-height:1.6;color:#8F8A81;margin-top:22px;max-width:38ch}
.footer h4{font-size:10px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--paper);margin:0 0 20px}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin-bottom:12px}
.footer a{font-size:14px;color:#CFC9BE;text-decoration:none}
.footer a:hover{color:var(--paper)}
.footer__h4--spaced{margin-top:32px!important}
/* Postal address sits at the same weight as the link list — it's reference
   information, not a call to action. Serif is reserved for founder voice. */
.footer__address{font-style:normal;font-size:14px;line-height:1.75;color:#CFC9BE;margin:0}
/* Sign-off — every asset closes with the spaced caps. */
.signoff{
  margin-top:clamp(48px,6vw,72px);border-top:1px solid rgba(248,245,239,.18);
  padding:26px 0 34px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:10px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:#8F8A81;
}

/* ---- Skip link ---- */
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--paper);color:var(--ink);padding:12px 18px;font-size:12px}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1080px){
  .nav{gap:20px}
  .nav a{font-size:10px;letter-spacing:.16em}
}
@media (max-width:900px){
  .nav-toggle{display:block}
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--ink);
    flex-direction:column;align-items:flex-start;gap:0;padding:8px var(--pad) 20px;
    border-top:1px solid rgba(248,245,239,.15);
  }
  .nav.is-open{display:flex}
  .nav a{padding:14px 0;font-size:12px;width:100%;border-bottom:1px solid rgba(248,245,239,.1)}
  .site-header__inner{position:relative;flex-wrap:wrap}
  .split,.mission{grid-template-columns:1fr}
  .mission__photo{min-height:0;aspect-ratio:4/3;height:auto}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .stat{padding-right:16px}
  .stat + .stat{padding-left:0}
  .stats-row .stat:nth-child(even){padding-left:16px}
  .work-grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .quote .serif{max-width:15em}
}
@media (max-width:620px){
  .header-cta .btn:first-child{display:none}
  .pressbar__label{padding-inline:20px}
  .stats-row{grid-template-columns:1fr}
  .stats-row .stat:nth-child(even){padding-left:0}
  .footer__grid{grid-template-columns:1fr}
  .ev-row{grid-template-columns:1fr}
  .ev-row__l{text-align:left;max-width:none}
  .hero__scrim{background:linear-gradient(180deg,rgba(10,10,10,.72) 0%,rgba(10,10,10,.82) 100%)}
  .impact{flex-wrap:wrap;gap:24px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* ============================================================
   FORM SYSTEM — added for /apply and /partner
   ------------------------------------------------------------
   Same rules as everything else: square corners, no shadows,
   1px Linen rules, spaced caps for labels, Ember only for the
   things that need attention (focus, errors, progress).
   Inputs are Paper on Paper with a Linen edge so the page reads
   as one surface rather than a stack of boxes.
   ============================================================ */

/* ---- Page shell ---- */
.formpage{padding:clamp(48px,7vw,96px) 0 clamp(64px,9vw,120px)}
.formpage__head{max-width:60ch;margin-bottom:clamp(36px,5vw,56px)}
.formpage__head .display{font-size:clamp(36px,5.4vw,68px);max-width:16ch}
.formpage__head .body{margin-top:calc(var(--u)*3)}
/* The form column is deliberately narrower than the prose measure —
   a 62ch input is unpleasant to fill in and reads as a text field, not a
   question. 34em holds two columns of short fields at desktop width. */
.form-shell{max-width:34em}

/* ---- Progress ---- */
.f-progress{margin-bottom:calc(var(--u)*5)}
.f-progress__meta{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font-size:10px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--slate);margin-bottom:12px;
}
.f-progress__name{color:var(--ink)}
.f-progress__track{height:2px;background:var(--linen)}
.f-progress__fill{height:2px;background:var(--ember);width:0;transition:width .3s ease}

/* ---- Steps ---- */
.f-step{display:none}
.f-step.is-active{display:block}
.f-step__title{
  font-size:clamp(20px,2.1vw,25px);font-weight:600;letter-spacing:-.02em;line-height:1.2;
  color:var(--ink);margin:0 0 8px;
}
.f-step__note{font-size:14px;line-height:1.6;color:var(--slate);margin:0 0 calc(var(--u)*4);max-width:52ch}

/* ---- Fields ---- */
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*3)}
.field{margin-bottom:calc(var(--u)*3)}
.field--wide{grid-column:1 / -1}
.field__label{
  display:block;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);margin-bottom:10px;line-height:1.5;
}
.field__req{color:var(--ember);margin-left:4px}
.field__hint{display:block;font-size:12px;line-height:1.55;color:var(--hint);margin-top:8px;
  font-weight:400;letter-spacing:0;text-transform:none}

.input,.select,.textarea{
  width:100%;font-family:var(--grotesk);font-size:16px;line-height:1.5;color:var(--ink);
  background:var(--paper);border:1px solid var(--edge);
  padding:14px 15px;transition:border-color .15s,background .15s;
}
.input::placeholder,.textarea::placeholder{color:var(--hint)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--ink)}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--ink);background:#FFFDF9;
}
.textarea{resize:vertical;min-height:120px}
/* Native select arrow varies wildly between platforms; this draws our own so
   the control matches the square, borderless-corner language of the system. */
.select{
  appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%230A0A0A' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;
}
.select:invalid{color:var(--hint)}

/* ---- Choice lists (checkbox / radio) ---- */
.choices{display:grid;gap:2px}
.choices--two{grid-template-columns:1fr 1fr}
.choice{
  display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  padding:13px 15px;background:#F1EDE5;border:1px solid transparent;
  font-size:15px;line-height:1.45;color:var(--slate);transition:border-color .15s,background .15s,color .15s;
}
.choice:hover{border-color:var(--edge);color:var(--ink)}
.choice input{
  appearance:none;-webkit-appearance:none;margin:0;flex:0 0 16px;width:16px;height:16px;
  border:1px solid var(--edge);background:var(--paper);position:relative;top:3px;cursor:pointer;
}
.choice input[type=radio]{border-radius:50%}
.choice input:checked{background:var(--ink);border-color:var(--ink)}
.choice input[type=checkbox]:checked::after{
  content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;
  border:solid var(--paper);border-width:0 1.6px 1.6px 0;transform:rotate(45deg);
}
.choice input[type=radio]:checked::after{
  content:"";position:absolute;left:4px;top:4px;width:6px;height:6px;border-radius:50%;background:var(--paper);
}
.choice:has(input:checked){border-color:var(--ink);color:var(--ink);background:#FBF8F2}
.choice input:focus-visible{outline:2px solid var(--ember);outline-offset:2px}

/* ---- Validation ---- */
.field.has-error .input,.field.has-error .select,.field.has-error .textarea{border-color:var(--ember)}
.field.has-error .choices{outline:1px solid var(--ember);outline-offset:3px}
.f-error{
  display:none;font-size:12px;line-height:1.5;color:#8E3F1F;margin-top:8px;
  font-weight:500;letter-spacing:0;text-transform:none;
}
.field.has-error .f-error{display:block}

/* ---- Signature ---- */
.f-sign{border-top:1px solid var(--linen);margin-top:calc(var(--u)*5);padding-top:calc(var(--u)*4)}
.f-sign .input{font-family:var(--serif);font-size:24px;font-weight:300;padding:12px 15px}

/* ---- Step navigation ---- */
.f-nav{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:calc(var(--u)*5);padding-top:calc(var(--u)*4);border-top:1px solid var(--linen);
}
.f-back{
  background:none;border:0;padding:0;cursor:pointer;font-family:var(--grotesk);
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--slate);
}
.f-back:hover{color:var(--ink)}
.f-back[hidden]{display:none}
button.btn{cursor:pointer;font-family:var(--grotesk)}
.btn[disabled]{opacity:.55;cursor:progress}

/* ---- Submission states ---- */
.f-status{
  display:none;margin-top:calc(var(--u)*3);padding:14px 16px;
  border-left:2px solid var(--ember);background:#FBEDE6;
  font-size:14px;line-height:1.55;color:#7A3618;
}
.f-status.is-shown{display:block}
.f-done{display:none;border-top:2px solid var(--ink);padding-top:calc(var(--u)*5);max-width:52ch}
.f-done.is-shown{display:block}
.f-done .h2{font-size:clamp(26px,3vw,36px)}
.f-done__body{margin-top:calc(var(--u)*3)}

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.f-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- No-JS fallback ---- */
.f-nojs{border-left:2px solid var(--ember);background:#FBEDE6;padding:16px 18px;
  font-size:15px;line-height:1.6;color:#7A3618;max-width:52ch}
.f-nojs a{color:#7A3618}

@media (max-width:620px){
  .f-grid{grid-template-columns:1fr}
  .choices--two{grid-template-columns:1fr}
  .f-nav{flex-direction:column-reverse;align-items:stretch}
  .f-nav .btn{width:100%}
  .f-back{padding:12px 0}
}

/* ============================================================
   EVIDENCE — external corroboration block
   The stat row already exists for the Ink challenge section; this
   is the same device inverted for a Linen ground.
   ============================================================ */
/* Three stats here, not the challenge section's five. */
.stats-row--light{grid-template-columns:repeat(3,1fr)}
.stats-row--light .stat{border-top-color:var(--ink)}
.stats-row--light .stat__n{color:var(--ink)}
.stats-row--light .stat__l{color:var(--slate)}

/* --harvest-type is tuned against Paper (4.58). On Linen it drops to 4.04, so
   the spaced caps in this section get a slightly deeper value: 4.63. */
.section--linen .eyebrow--harvest{color:#8A5E00}

/* The 1px Linen rule is the system default, but these rows sit ON Linen, where
   it is invisible. One step darker restores the rule without introducing a
   second colour to the palette. */
.section--linen .ev-row{border-top-color:#D9D4CA}
.section--linen .ev-row:last-child{border-bottom-color:#D9D4CA}
.section--linen .ev-note{border-top-color:#D9D4CA}

/* The findings list runs full width rather than sitting in the narrow column
   the 5C rows use, so the measure is set here instead of on the text — at
   62ch on a 1240px page the source label would otherwise float half a screen
   away from the finding it belongs to. */
.ev-findings{max-width:1000px}
.ev-findings .ev-row{grid-template-columns:1fr minmax(0,13ch);gap:clamp(24px,4vw,56px)}
.ev-findings .ev-row__t{max-width:none}

/* Source label under a finding. Spaced caps, Slate not Harvest — these are
   attributions, not categories, and shouldn't compete with the finding. */
.ev-row__src{
  font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--slate);text-align:right;line-height:1.5;max-width:14ch;
}
.ev-note{
  margin-top:calc(var(--u)*4);padding-top:calc(var(--u)*3);border-top:1px solid var(--linen);
  font-size:13px;line-height:1.65;color:var(--slate);max-width:64ch;
}
.ev-note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.ev-note strong{color:var(--ink);font-weight:600}
/* A pulled line from the source itself. Serif, because it is someone's voice
   rather than our own copy — the same rule the founder quote follows. */
.ev-quote{
  font-family:var(--serif);font-weight:300;font-size:clamp(21px,2vw,29px);line-height:1.4;
  letter-spacing:-.01em;color:var(--ink);margin:0;max-width:26em;
  border-left:2px solid var(--ember);padding-left:clamp(20px,2.4vw,32px);
}
.ev-quote__src{
  display:block;margin-top:calc(var(--u)*3);font-family:var(--grotesk);
  font-size:10px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--slate);
}
@media (max-width:900px){
  .stats-row--light{grid-template-columns:1fr}
}
@media (max-width:620px){
  .stats-row--light{grid-template-columns:1fr}
  /* Needs the .ev-findings prefix to outrank the desktop rule above, which is
     more specific than the plain .ev-row breakpoint further up the file. */
  .ev-findings .ev-row{grid-template-columns:1fr;gap:10px}
  .ev-row__src{text-align:left;max-width:none}
}

/* A hint makes one field's label taller than its neighbour's, which pushed the
   two inputs in a grid row out of line. Stretching the field to the row height
   and letting the control sit at the bottom keeps every input on one baseline,
   however long the labels above them run. */
.field{display:flex;flex-direction:column}
.field > .input,.field > .select,.field > .textarea,.field > .choices{margin-top:auto}

/* ---- Candid transparency seal ----
   A third-party certification mark. Size, placement and spacing are ours;
   the mark itself is never recoloured, cropped or restyled — altering a
   certification seal breaches Candid's terms and misstates a credential.

   It sits with the 501(c)(3) line because both answer the same question:
   who vouches for this organisation. 96px is the floor at which the seal's
   own wording stays legible — below about 84 it turns to grey mush.

   line-height:0 on the link kills the inline-image baseline gap, which
   would otherwise add a few stray pixels under the seal and break the
   footer column's rhythm. */
.footer__seal{
  display:inline-block;line-height:0;margin-top:calc(var(--u)*3);
  /* Reserve the box before the SVG arrives so the footer never reflows. */
  width:96px;height:96px;
}
.footer__seal img{width:96px;height:96px;display:block}
/* The seal is served from our own assets, so it cannot fail because of a
   third party. The collapse rule stays anyway: if the file is ever renamed
   during the annual refresh and a src is missed, an empty footer column is a
   quieter failure for visitors than a broken-image icon — and the missing
   file will still be obvious to us in the build and in dev tools.

   Deliberately NOT loading="lazy": it is a 12 KB SVG, and in testing the
   lazy load did not fire even with the footer in view. Saving 12 KB is not
   worth a trust badge that sometimes silently fails to appear. decoding
   is async, so it still never blocks rendering. */
.footer__seal img:not([src]),.footer__seal.is-unavailable{display:none}