/* ==========================================================================
   FOUNDATION PAGES (round 3): about.html (the Foundation hub), programs.html,
   reports.html, press.html.
   Hub look, like the other site pages: body.sec-home, longleaf green,
   Instrument Serif + Instrument Sans. Loads AFTER shell.css,
   shared-pages.css and about.css, and reuses their parts (ab-*, st-read,
   ct-row, block, card, btn). Never restyles shared chrome.
   Prefix: fd-.
   Contrast (shell section 2, home row): ink #2F6B45 on tint 5.32 / white
   6.34; white on #2F6B45 6.34; muted #55595F on white 6.9 / tint 5.91;
   accent #A6E3B0 and mist #BAC5BD on deep #0E1A14 >= 9.
   ========================================================================== */

/* ---------- status tags: where each program stands, in words ---------- */
.fd-status {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: var(--r-pill);
  background: var(--sec-tint); color: var(--sec-ink); border: 1px solid transparent;
  font: 500 11px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
.fd-status::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.fd-status--open { background: var(--sec-ink); color: #FFFFFF; }
.fd-status--planned { background: transparent; color: var(--muted); border: 1px dashed #8A8D92; }
.fd-status--planned::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.on-deep .fd-status, .block--deep .fd-status { background: rgba(166,227,176,.14); color: var(--sec-accent); }
.on-deep .fd-status--open, .block--deep .fd-status--open { background: var(--sec-accent); color: var(--sec-deep); }
.on-deep .fd-status--planned, .block--deep .fd-status--planned { background: transparent; color: var(--sec-mist); border-color: rgba(186,197,189,.6); }

/* ---------- hero emblem: one record, two sides (About) ---------- */
.fd-discs { position: relative; justify-self: center; width: min(100%, 440px); aspect-ratio: 1.3; margin: 0; }
.fd-disc { position: absolute; width: 58%; height: auto; filter: drop-shadow(0 22px 30px rgba(0,0,0,.45)); }
.fd-disc--a { left: 0; top: 0; }
.fd-disc--b { right: 0; top: 22%; }
.fd-disc text { font: 800 10px var(--font-ui); letter-spacing: .1em; }   /* realistic records (tools/records.py): dark type on a printed label */
.fd-discs figcaption { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font: 500 12px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sec-mist); }

/* ---------- the mission: two sides ---------- */
.fd-sides { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 32px); }
.fd-side {
  display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 3vw, 36px);
  background: var(--card); border: 1px solid var(--line); border-top: 6px solid var(--fd-side-c, var(--sec-sig));
  border-radius: var(--r-card); box-shadow: var(--shadow-1);
}
.fd-side--preserve { --fd-side-c: var(--ab-gold); }
.fd-side--promote  { --fd-side-c: var(--sec-sig); }
.fd-side-k { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; font: 500 12px/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.fd-side-k span { padding: 7px 14px; border-radius: var(--r-pill); background: var(--sec-deep); color: var(--sec-accent); letter-spacing: .18em; }
.fd-side h3 { font: 400 clamp(36px, 3.6vw, 50px)/1 var(--sec-display); color: var(--sec-deep); }
.fd-side h3 em { font-style: italic; color: var(--sec-ink); }
.fd-side-lede { font-size: 17px; line-height: 1.6; color: var(--ink); }
.fd-side-note { font-size: 15.5px; line-height: 1.6; color: var(--muted); padding: 14px 16px; background: var(--sec-tint); border-radius: 6px; }
.fd-side-note b { color: var(--ink); }

/* program rows inside a side (About) and on the programs index (Programs hero) */
.fd-progs { list-style: none; border-top: 1px solid var(--line); }
.fd-progs > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.fd-progs h4 { font: 700 17px/1.35 var(--font-ui); color: var(--ink); }
.fd-progs .fd-status { grid-column: 2; grid-row: 1; }
.fd-progs p { grid-column: 1 / -1; color: var(--muted); font-size: 15.5px; line-height: 1.6; }
.fd-progs .link-arrow { grid-column: 1 / -1; font-size: 15px; }

/* the same rows on a dark panel (Programs hero: at a glance) */
.fd-glance { padding: clamp(18px, 2.4vw, 28px); background: var(--sec-deep-2); border: 1px solid rgba(166,227,176,.2); border-radius: 8px; box-shadow: 0 24px 50px rgba(0,0,0,.35); }
.fd-glance-k { font: 500 11.5px/1.3 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sec-accent); margin-bottom: 8px; }
.fd-glance .fd-progs { border-top-color: rgba(166,227,176,.2); }
.fd-glance .fd-progs > li { padding: 11px 0; border-bottom-color: rgba(166,227,176,.2); align-items: center; }
.fd-glance .fd-progs a { color: var(--night-text); font: 600 15.5px/1.35 var(--font-ui); text-decoration: none; }
.fd-glance .fd-progs a:hover { text-decoration: underline; text-underline-offset: .15em; }
.fd-glance .fd-progs small { display: block; font: 500 11px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sec-mist); }

/* six-card "explore the Foundation" grid: reuses .st-read (dark cards) */
.st-read.fd-explore { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- program sections (Programs page) ---------- */
.fd-prog-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.fd-side-tag { font: 500 11.5px/1.3 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sec-ink); }
.block--deep .fd-side-tag { color: var(--sec-accent); }
.fd-cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
.fd-prose p { font-size: 17px; line-height: 1.65; color: var(--ink); max-width: 40em; }
.fd-prose p + p { margin-top: 14px; }
.fd-prose h3 { margin-top: 26px; font: 700 18px/1.3 var(--font-ui); color: var(--ink); }
.block--deep .fd-prose p { color: var(--sec-mist); }
.block--deep .fd-prose h3 { color: var(--night-text); }
.fd-ticks { list-style: none; margin-top: 12px; display: grid; gap: 10px; }
.fd-ticks li { position: relative; padding-left: 28px; font-size: 16.5px; line-height: 1.55; color: var(--ink); }
.fd-ticks li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 12px; height: 7px; border-left: 2.5px solid var(--sec-ink); border-bottom: 2.5px solid var(--sec-ink); rotate: -45deg; translate: 0 -40%; }
.fd-ticks b { color: var(--ink); }
.block--deep .fd-ticks li { color: var(--sec-mist); }
.block--deep .fd-ticks li::before { border-color: var(--sec-accent); }
.block--deep .fd-ticks b { color: var(--night-text); }
.fd-aside { display: grid; gap: 18px; }
.fd-aside .ab-kv li { grid-template-columns: 120px minmax(0, 1fr); }
.fd-fine { margin-top: 14px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.block--deep .fd-fine { color: var(--sec-mist); }

/* levels (certification): three steps up */
.fd-levels { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.fd-levels li { padding: 18px 18px 16px; background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--sec-sig); border-radius: var(--r-card); }
.fd-levels li:nth-child(2) { border-top-width: 6px; }
.fd-levels li:nth-child(3) { border-top-width: 9px; border-top-style: double; }
.fd-levels .fd-lv { font: 500 11px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sec-ink); }
.fd-levels h4 { margin-top: 6px; font: 400 23px/1.12 var(--sec-display); color: var(--sec-deep); }
.fd-levels p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--muted); }

/* the library's three checks (Creative Library) */
.fd-checks { list-style: none; counter-reset: ck; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.fd-checks li {
  counter-increment: ck; position: relative; padding: 22px 20px 20px; border-radius: var(--r-card);
  background: var(--sec-deep-2); border: 1px solid rgba(166,227,176,.2);
}
.fd-checks li::before { content: counter(ck); font: italic 400 40px/1 var(--sec-display); color: var(--ab-gold); }
.fd-checks h4 { margin-top: 6px; font: 400 28px/1.05 var(--sec-display); color: var(--night-text); }
.fd-checks p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--sec-mist); }

/* catalog card object (Creative Library): an index card, drawn in CSS */
.fd-catcard {
  position: relative; justify-self: center; width: min(100%, 380px); padding: 22px 24px 26px; rotate: -2deg;
  background: #FBF7EA; color: #2B2B2B; border-radius: 3px; box-shadow: 0 24px 50px rgba(0,0,0,.4);
  background-image: linear-gradient(transparent 0 46px, rgba(210,57,74,.55) 46px 47.5px, transparent 47.5px), repeating-linear-gradient(transparent 0 25px, rgba(91,114,255,.22) 25px 26px);
  background-position: 0 0, 0 47px;
}
.fd-catcard::after { content: ""; position: absolute; left: 50%; bottom: 10px; width: 16px; height: 16px; translate: -50% 0; border-radius: 50%; background: var(--sec-deep); box-shadow: inset 0 2px 3px rgba(0,0,0,.5); }
.fd-catcard-k { font: 500 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: #5A4A1F; }
.fd-catcard-t { margin-top: 22px; font: italic 400 26px/1.1 var(--sec-display); color: #1E2A22; }
.fd-catcard dl { margin: 12px 0 18px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1px 12px; font: 500 12.5px/26px var(--font-mono); color: #2B2B2B; }
.fd-catcard dt { color: #5A4A1F; }
.fd-catcard dd { margin: 0; }
.fd-catcard-stamp {
  position: absolute; right: 16px; top: 54px; padding: 4px 10px; rotate: 8deg; border: 2px solid #A0283A; border-radius: 4px;
  font: 700 11px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: #A0283A; background: rgba(251,247,234,.85);
}

/* ---------- forms: certification interest + press request ---------- */
.cert-form, .pr-form {
  display: grid; gap: 16px; min-width: 0; padding: clamp(16px, 3vw, 34px);   /* fits 320px (WCAG 1.4.10) */
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-1);
}
.cert-form .field textarea, .pr-form .field textarea { min-height: 130px; font: inherit; resize: vertical; }
.cert-form .field select, .pr-form .field select { appearance: auto; }
.cert-form .btn, .pr-form .btn { justify-self: start; }
.fd-form-title { font: 400 clamp(28px, 2.6vw, 36px)/1.08 var(--sec-display); color: var(--sec-deep); }
.fd-form-title em { font-style: italic; color: var(--sec-ink); }
.fd-form-note { font-size: 14px; line-height: 1.55; color: var(--muted); }
.fd-opt { font-weight: 400; color: var(--muted); }
.fd-check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--ink); }
.fd-check input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--sec-ink); }
.fd-build { font: 500 11px/1.45 var(--font-mono); letter-spacing: .04em; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 12px; }

/* ---------- reports ---------- */
/* the report cover (a design object, not a real file) */
.fd-cover {
  position: relative; justify-self: center; width: min(100%, 330px); aspect-ratio: 8.5 / 11; padding: 28px 26px;
  display: flex; flex-direction: column; background: #F6F3EA; color: var(--sec-deep); border-radius: 2px 6px 6px 2px;
  box-shadow: inset 10px 0 0 rgba(14,26,20,.08), 0 26px 50px rgba(0,0,0,.45); rotate: 2deg;
}
.fd-cover-org { font: 500 10.5px/1.3 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sec-ink); }
.fd-cover-t { margin-top: 18px; font: 400 33px/1 var(--sec-display); }
.fd-cover-t em { font-style: italic; color: var(--sec-ink); }
.fd-cover-yr { margin-top: 10px; font: italic 400 64px/1 var(--sec-display); color: var(--sec-ink); }
.fd-cover-bars { margin-top: auto; display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; height: 70px; align-items: end; }
.fd-cover-bars i { display: block; border-radius: 2px 2px 0 0; }
.fd-cover-bars i:nth-child(1) { background: #F2C14E; height: 70%; } .fd-cover-bars i:nth-child(2) { background: #D2394A; height: 45%; }
.fd-cover-bars i:nth-child(3) { background: #D66A98; height: 55%; } .fd-cover-bars i:nth-child(4) { background: #5B72FF; height: 85%; }
.fd-cover-bars i:nth-child(5) { background: #E08A4F; height: 60%; } .fd-cover-bars i:nth-child(6) { background: #9A86E8; height: 40%; }
.fd-cover-bars i:nth-child(7) { background: #67D8E6; height: 50%; } .fd-cover-bars i:nth-child(8) { background: #9AA0A6; height: 75%; }
.fd-cover-foot { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(14,26,20,.2); font: 500 10px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fd-cover-stamp {
  position: absolute; right: -10px; top: 40%; padding: 6px 12px; rotate: -10deg; border: 2px solid var(--sec-ink); border-radius: 4px;
  background: rgba(246,243,234,.92); font: 700 11.5px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sec-ink);
}

/* eight chapters, one per art form: a colored spine on each card */
.fd-chapters { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.fd-chapter {
  display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 18px 26px; position: relative;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-1);
}
.fd-chapter::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; border-radius: var(--r-card) 0 0 var(--r-card); background: var(--fd-ch, var(--sec-sig)); }
.fd-chapter--music { --fd-ch: #F2C14E; } .fd-chapter--theater { --fd-ch: #D2394A; } .fd-chapter--dance { --fd-ch: #D66A98; }
.fd-chapter--visual { --fd-ch: #5B72FF; } .fd-chapter--craft { --fd-ch: #E08A4F; } .fd-chapter--literary { --fd-ch: #9A86E8; }
.fd-chapter--film { --fd-ch: #67D8E6; } .fd-chapter--museums { --fd-ch: #9AA0A6; }
.fd-chapter-k { font: 500 11px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fd-chapter h3 { font: 400 25px/1.1 var(--sec-display); color: var(--sec-deep); }
.fd-chapter p { font-size: 15px; line-height: 1.55; color: var(--muted); }
.fd-chapter .link-arrow { margin-top: auto; padding-top: 4px; font-size: 15px; }

/* index areas (Reports: how the Index works) on deep */
.fd-areas { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.fd-areas li { padding: 16px 18px; background: var(--sec-deep-2); border: 1px solid rgba(166,227,176,.2); border-radius: var(--r-card); }
.fd-areas b { display: block; font: 400 23px/1.1 var(--sec-display); color: var(--night-text); }
.fd-areas span { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--sec-mist); }

/* ---------- press ---------- */
.fd-boiler { padding: clamp(20px, 2.6vw, 30px); background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--sec-sig); border-radius: var(--r-card); box-shadow: var(--shadow-1); }
.fd-boiler + .fd-boiler { margin-top: 18px; }
.fd-boiler-k { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; font: 500 11.5px/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sec-ink); }
.fd-boiler-k span:last-child { color: var(--muted); }
.fd-boiler p { margin-top: 12px; font-size: 17px; line-height: 1.65; color: var(--ink); }
.fd-news { list-style: none; border-top: 1px solid var(--line); }
.fd-news li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 22px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.fd-news time { font: 500 12px/1.5 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sec-ink); }
.fd-news h3, .fd-news h4 { font: 700 17.5px/1.35 var(--font-ui); color: var(--ink); }
.fd-news p { margin-top: 4px; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.fd-news a { font-weight: 700; }
.fd-empty { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; padding: 24px; border: 1.5px dashed #8A8D92; border-radius: var(--r-card); background: var(--card); }
.fd-empty-mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--sec-tint); font: italic 400 30px/1 var(--sec-display); color: var(--sec-ink); }
.fd-empty h3, .fd-empty h4 { font: 700 17.5px/1.35 var(--font-ui); color: var(--ink); }
.fd-empty p { margin-top: 4px; font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.fd-subhead { margin: 34px 0 12px; font: 500 12px/1.3 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sec-ink); }
.fd-tbc { font: 500 12.5px/1.4 var(--font-mono); letter-spacing: .04em; color: var(--muted); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .fd-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-read.fd-explore { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fd-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .fd-sides, .fd-cols, .fd-levels, .fd-checks { grid-template-columns: minmax(0, 1fr); }
  .fd-discs { width: min(100%, 360px); margin-top: 8px; }
}
@media (max-width: 760px) {
  .st-read.fd-explore, .fd-areas { grid-template-columns: minmax(0, 1fr); }
  .fd-chapters { grid-template-columns: minmax(0, 1fr); }
  .fd-news li { grid-template-columns: minmax(0, 1fr); }
  .fd-progs > li { grid-template-columns: minmax(0, 1fr); }
  .fd-progs .fd-status { grid-column: 1; grid-row: auto; justify-self: start; }
  .fd-glance .fd-progs > li { grid-template-columns: minmax(0, 1fr) auto; }
  .fd-glance .fd-progs .fd-status { grid-column: 2; grid-row: 1; }
  .fd-cover { width: min(100%, 280px); }
  .fd-cover-t { font-size: 28px; }
  .fd-cover-yr { font-size: 52px; }
  .fd-catcard { width: min(100%, 320px); }
  .fd-aside .ab-kv li { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .fd-glance .fd-progs > li { grid-template-columns: minmax(0, 1fr); }
  .fd-glance .fd-progs .fd-status { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* ---------- small fixes on dark grounds + heading-level variants ---------- */
.block--deep .fd-subhead { color: var(--sec-accent); }
.ab-page .block--deep .ab-more .link-arrow { color: var(--sec-accent); }
.fd-progs h3 { font: 700 17px/1.35 var(--font-ui); color: var(--ink); }
.fd-levels + .fd-subhead, .fd-subhead:first-child { margin-top: 26px; }
.fd-prog-head .fd-status { white-space: normal; }
.block-title + .fd-prose { margin-top: 16px; }
.ab-page .on-deep .fd-cover em { color: var(--sec-ink); }

/* Economic impact report (reports.html#economic-impact) */
.fd-prose .ab-rules { grid-template-columns: minmax(0, 1fr); gap: 0; }
.fd-survey { border: 2px dashed var(--sec-ink); }
.fd-survey h3 { margin: 6px 0 8px; }
.fd-survey-when { margin-top: 10px; font-size: 16px; }