/* =========================================================================
   KCED FOUNDATION — DESIGN SYSTEM v1
   Institutional · Editorial · Restrained.
   A quiet, typography-led system for a New Jersey public-interest media
   nonprofit. 90% of every page is warm paper + warm charcoal; navy is a
   seasoning, never a theme. Structure is made of hairlines, not boxes.
   ========================================================================= */

/* ---- Fonts: Google-hosted substitutes ---------------------------------
   Times New Roman is a system font; Tinos is the metric fallback.
   Futura Extra Light is not free — Jost 300 is the substitute.
   Swap to licensed Futura/Times via @font-face if you have the files. */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&family=Tinos:ital,wght@0,400;0,700;1,400&display=swap');

/* ---- Tokens ----------------------------------------------------------- */
:root {
  /* Color — warm neutrals carry the page */
  --paper:    #F7F5F0;   /* warm white — the ground */
  --paper-2:  #EFEBE2;   /* image mat, quiet inset */
  --ink:      #23211E;   /* warm charcoal — text */
  --ink-2:    #5A554E;   /* muted charcoal — secondary text */
  --line:     #DED9CF;   /* warm hairline — structure, not boxes */
  --navy:     #2C3E5E;   /* accent only: labels, underlines, one hairline */
  --navy-2:   #1E2C45;   /* navy hover */
  --press:    #100F0D;   /* button press */

  /* Type families */
  --serif: "Times New Roman", "Tinos", Times, serif;   /* display, never bold */
  --sans:  "Jost", "Futura", "Century Gothic", system-ui, sans-serif; /* body, light */

  /* Type scale — roles */
  --t-hero:    clamp(2.9rem, 6vw, 5.25rem);
  --t-section: clamp(1.9rem, 3.4vw, 2.9rem);
  --t-record:  clamp(2.6rem, 5vw, 4rem);
  --t-lede:    clamp(1.15rem, 1.8vw, 1.45rem);
  --t-body:    1.0625rem;
  --t-small:   0.8125rem;
  --t-label:   0.72rem;

  /* Spacing — white space is a material */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 40px;
  --s-5: 64px; --s-6: 96px; --s-7: 128px; --s-8: 176px;
  --section-y: clamp(64px, 11vw, 176px);
  --measure: 62ch;

  /* Structure */
  --radius: 0;
  --track:  0.22em;      /* small-caps label tracking */

  /* Motion — quiet */
  --dur:  240ms;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---- Base ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--t-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

::selection { background: #E4DECF; color: var(--ink); }

/* Layout shell */
.wrap { width: min(1120px, 92vw); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(48px, 7vw, 96px); }

/* ---- Typography roles -------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;            /* never bold */
  letter-spacing: -0.012em;
  line-height: 1.08;
  margin: 0;
}

.hero-title  { font-size: var(--t-hero);    line-height: 1.02; letter-spacing: -0.02em; }
.section-title { font-size: var(--t-section); }

.lede {
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--t-lede);
  line-height: 1.55;
  color: var(--ink);
  max-width: var(--measure);
}

.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.35em; }
.prose p:last-child { margin-bottom: 0; }

/* Eyebrow — tracked small-caps label */
.eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 var(--s-3);
}

/* Byline */
.byline {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--t-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.byline strong { font-weight: 500; color: var(--ink); }

/* The record — numerals set large in the serif */
.record { font-family: var(--serif); }

/* ---- Links & buttons -------------------------------------------------- */
a { color: inherit; }

.text-link {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--navy);
  padding-bottom: 1px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.text-link:hover { color: var(--navy-2); border-color: var(--navy-2); }

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 30px;
  border-radius: var(--radius);
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover  { background: var(--press); border-color: var(--press); }
.btn:active { background: #000; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

/* ---- Divider — labelled hairline -------------------------------------- */
.divider { border: 0; border-top: 1px solid var(--line); margin: 0; }

.divider-label {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-block: var(--s-5);
}
.divider-label::before,
.divider-label::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.divider-label span {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}

/* ---- PullQuote — the one dark band per page --------------------------- */
.pullquote {
  background: var(--ink);
  color: var(--paper);
}
.pullquote .wrap { padding-block: clamp(72px, 10vw, 140px); }
.pullquote blockquote {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  max-width: 22ch;
}
.pullquote cite {
  display: block;
  margin-top: var(--s-4);
  font-family: var(--sans);
  font-style: normal;
  font-weight: 400;
  font-size: var(--t-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #B7B1A5;
}

/* ---- StatNumber / the record band ------------------------------------- */
.record-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: var(--s-5);
}
.stat { }
.stat .num {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-record);
  line-height: 1;
  letter-spacing: -0.02em;
  display: block;
}
.stat .cap {
  display: block;
  margin-top: var(--s-2);
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--t-small);
  letter-spacing: 0.03em;
  color: var(--ink-2);
}
@media (max-width: 720px) {
  .record-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-5) var(--s-4); }
}

/* ---- Imagery — plainly framed, inset in a warm mat -------------------- */
.plate {
  background: var(--paper-2);
  border: 1px solid var(--line);
  padding: clamp(14px, 2vw, 22px);
}
.plate img { filter: saturate(.92) contrast(1.02); width: 100%; }
.plate figcaption {
  margin-top: var(--s-2);
  font-family: var(--sans);
  font-size: var(--t-small);
  color: var(--ink-2);
  letter-spacing: 0.02em;
}
/* Photo placeholder — swap for real studio photography */
.plate--placeholder .frame {
  aspect-ratio: 3 / 2;
  background:
    repeating-linear-gradient(45deg, #E7E2D7 0 2px, transparent 2px 16px),
    var(--paper-2);
  display: grid;
  place-items: center;
}
.plate--placeholder .frame span {
  font-family: var(--sans);
  font-size: var(--t-small);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ---- Field — inputs drawn as hairlines, not boxes --------------------- */
.field { margin-bottom: var(--s-4); }
.field label {
  display: block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: var(--s-2);
}
.field input,
.field textarea,
.field select {
  width: 100%;
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--t-body);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  padding: 10px 0;
  transition: border-color var(--dur) var(--ease);
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
/* Select drawn as a hairline field, with a small serif caret */
.field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 24px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 10px) 1.2em, calc(100% - 5px) 1.2em;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.field input:focus,
.field textarea:focus,
.field select:focus { outline: 0; border-color: var(--navy); }
.field input::placeholder,
.field textarea::placeholder { color: #A9A398; }

/* ---- Header / nav ----------------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.1) blur(6px);
  border-bottom: 1px solid var(--line);
}
.site-head .bar {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.wordmark {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.28rem;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark small {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.6rem;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--navy);
  display: block;
  margin-top: 2px;
}
.nav { display: flex; gap: var(--s-4); align-items: center; }
.nav a {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { border-color: var(--navy); color: var(--navy); }
@media (max-width: 620px) {
  .nav { gap: var(--s-3); }
  .nav a { font-size: 0.72rem; }
  .wordmark small { display: none; }
}

/* ---- Footer ----------------------------------------------------------- */
.site-foot {
  border-top: 1px solid var(--line);
  padding-block: var(--s-6) var(--s-5);
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s-5);
}
.site-foot .wordmark { font-size: 1.5rem; }
.foot-col h4 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 var(--s-3);
}
.foot-col a, .foot-col p {
  display: block;
  font-size: 0.9rem;
  color: var(--ink);
  text-decoration: none;
  margin: 0 0 var(--s-2);
}
.foot-col a:hover { color: var(--navy); }
.foot-fine {
  margin-top: var(--s-6);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-size: var(--t-small);
  color: var(--ink-2);
  display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap;
}
@media (max-width: 720px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
}

/* ---- Utility ---------------------------------------------------------- */
.stack-2 > * + * { margin-top: var(--s-2); }
.stack-4 > * + * { margin-top: var(--s-4); }
.stack-5 > * + * { margin-top: var(--s-5); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 820px) { .grid-2 { grid-template-columns: 1fr; gap: var(--s-5); } }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.center { text-align: center; }

/* Motion respect */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}