/* ============================================================
   The Unfinished Work — site styles (on top of the design system)
   Load order: colors_and_type.css → foundations.css → site.css
   ============================================================ */

:root { --nav-h: 76px; }

html { scroll-behavior: smooth; }
body { background: var(--parchment); overflow-x: hidden; }
img { max-width: 100%; display: block; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.wrap--narrow { max-width: 880px; }
.section { padding: 96px 0; }
.section--tight { padding: 64px 0; }

/* ---------- shared eyebrow / heads ---------- */
.eyebrow {
  font-family: var(--font-sans); font-weight: 800; font-size: 13px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--brick-600);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow--light { color: var(--steel-300); }
.eyebrow::before { content: "★★★"; letter-spacing: 0.1em; font-size: 11px; opacity: 0.9; }
.eyebrow.no-stars::before { content: none; }

.h-display {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.02em; line-height: 1.0; color: var(--ink);
}
.h-xl { font-family: var(--font-sans); font-weight: 800; letter-spacing: -0.022em; line-height: 1.05;
  font-size: clamp(2.4rem, 5.4vw, 4.2rem); color: var(--ink); }
.h-lg { font-family: var(--font-sans); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1;
  font-size: clamp(1.9rem, 3.8vw, 2.9rem); color: var(--ink); }
.h-md { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem); color: var(--ink); }
.lede { font-family: var(--font-serif); font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.55;
  color: var(--ink-soft); max-width: 60ch; }
.prose-serif { font-family: var(--font-serif); font-size: 1.18rem; line-height: 1.7; color: var(--ink); }
.prose-serif p { margin: 0 0 1.1em; }

.on-dark { color: var(--cream); }
.on-dark .h-xl, .on-dark .h-lg, .on-dark .h-md { color: var(--cream); }
.on-dark .lede { color: var(--sand); }

/* ---------- top navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 50; height: var(--nav-h);
  background: rgba(251,243,221,0.92); backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--border);
}
.nav__inner { max-width: 1180px; margin: 0 auto; padding: 0 32px; height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
.brand__mark { display: block; height: 31px; width: auto; flex: none; }
.brand__star { color: var(--brick-600); letter-spacing: 0.16em; font-size: 12px; }
.brand__name { font-family: var(--font-sans); font-weight: 800; font-size: 16px; letter-spacing: -0.01em;
  text-transform: uppercase; color: var(--ink); line-height: 1; }
.nav__links { display: flex; align-items: center; gap: 2px; }
.nav__link { font-family: var(--font-sans); font-weight: 600; font-size: 14.5px; color: var(--ink-soft);
  text-decoration: none; padding: 9px 14px; border-radius: var(--radius-sm); white-space: nowrap;
  transition: color var(--dur-fast), background var(--dur-fast); }
.nav__link:hover { color: var(--ink); background: rgba(9,50,76,0.06); text-decoration: none; }
.nav__link.is-active { color: var(--brick-600); }
.nav__cta { margin-left: 8px; }
.nav__burger { display: none; background: none; border: none; cursor: pointer; color: var(--ink); padding: 6px; }

.nav__mobile { display: none; }
@media (max-width: 940px) {
  .nav__links { display: none; }
  .nav__burger { display: inline-flex; }
  .nav__mobile { display: block; position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 49;
    background: var(--parchment); border-bottom: 2px solid var(--ink); padding: 12px 32px 22px;
    transform: translateY(-12px); opacity: 0; pointer-events: none; transition: all var(--dur-base) var(--ease-standard); }
  .nav__mobile.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .nav__mobile a { display: block; font-family: var(--font-sans); font-weight: 700; font-size: 18px;
    color: var(--ink); text-decoration: none; padding: 13px 2px; border-bottom: 1px solid var(--border); }
  .nav__mobile a:last-of-type { border-bottom: none; }
}

/* ---------- footer ---------- */
.foot { background: var(--navy-950); color: var(--steel-300); }
.foot__inner { max-width: 1180px; margin: 0 auto; padding: 64px 32px 32px; }
.foot__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 36px; }
.foot__q { font-family: var(--font-serif); font-style: italic; font-size: 15.5px; line-height: 1.5;
  color: var(--steel-300); margin: 16px 0 0; max-width: 34ch; }
.foot__q span { display: block; font-style: normal; font-size: 12.5px; margin-top: 8px; color: var(--steel-500); }
.foot__col h4 { font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--steel-300); margin: 0 0 12px; }
.foot__col a { display: block; font-family: var(--font-sans); font-size: 14px; color: var(--steel-200);
  text-decoration: none; padding: 5px 0; }
.foot__col a:hover { color: var(--cream); text-decoration: none; }
.foot__bar { border-top: 1px solid var(--border-inverse); margin-top: 40px; padding-top: 20px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-family: var(--font-sans); font-size: 12.5px; color: var(--steel-500); }

/* ---------- buttons: icon alignment ---------- */
.btn [data-icon] { display: inline-flex; }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* ---------- generic cards / grids ---------- */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.tile { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 28px; transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-fast),
  border-color var(--dur-base); }
.tile--link { text-decoration: none; color: inherit; display: block; }
.tile--link:hover { box-shadow: var(--shadow-md); border-color: var(--stone-300); text-decoration: none; transform: translateY(-2px); }
.tile__icon { color: var(--navy-700); margin-bottom: 16px; }
.tile h3 { margin: 0 0 8px; }
.tile p { margin: 0; font-family: var(--font-serif); font-size: 16.5px; line-height: 1.5; color: var(--ink-soft); }

/* document card top keyline already in foundations as .card--document */

/* ---------- pill / tag ---------- */
.tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans);
  font-weight: 700; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--radius-pill); background: var(--stone-100); color: var(--ink-soft); }
.tag--red { background: var(--brick-600); color: var(--cream); }
.tag--navy { background: var(--navy-700); color: var(--cream); }
.tag--steel { background: var(--steel-300); color: var(--navy-900); }

/* ---------- page hero band ---------- */
.phero { background: var(--navy-900); color: var(--cream); position: relative; overflow: hidden; display: grid; }
.phero > .phero__inner, .phero > .phero__photo { grid-area: 1 / 1; }
.phero__bands { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5,1fr); opacity: 0.12; z-index: 0; }
.phero__bands > i { display: block; }
.phero__inner { position: relative; z-index: 2; width: 100%; max-width: 1180px; margin: 0 auto; padding: 92px 32px; }
.phero__photo { position: relative; z-index: 0; align-self: stretch; }
.phero__photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 26%; }
.phero__photo.photo--duo::after { background: linear-gradient(90deg, rgba(9,48,76,0.97) 0%, rgba(9,48,76,0.92) 42%, rgba(9,48,76,0.66) 68%, rgba(15,66,94,0.48) 100%); mix-blend-mode: normal; opacity: 1; }
.phero:has(.phero__photo) .phero__inner { text-shadow: 0 1px 16px rgba(5,20,30,0.6), 0 1px 3px rgba(5,20,30,0.4); }

/* ---------- big stat ---------- */
.statnum { font-family: var(--font-display); font-weight: 800; line-height: 0.9; color: var(--brick-600); }

/* ---------- divider ---------- */
.hr-rule { border: none; border-top: 2px solid var(--ink); }
.stars { text-align: center; color: var(--brick-600); letter-spacing: 0.5em; font-size: 14px; }
.stars::before { content: "★ ★ ★"; }

/* ---------- photos: cohesive warm civic grade ---------- */
.photo { position: relative; overflow: hidden; background: var(--navy-900); }
.photo > img { display: block; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.82) contrast(1.04) sepia(0.14) brightness(1.01); }
/* navy duotone for decorative / behind-text imagery */
.photo--duo > img { filter: grayscale(1) contrast(1.06) brightness(1.02); }
.photo--duo::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(150deg, var(--steel-500), var(--navy-900) 78%);
  mix-blend-mode: multiply; opacity: 0.9; }
/* bottom navy scrim for captions/legibility */
.photo--scrim::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(9,48,76,0.82) 0%, rgba(9,48,76,0.12) 46%, transparent 70%); }
.photo__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 18px 20px;
  font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--cream); }
.photo--frame { border: 3px solid var(--ink); }
.photo--keyline { border-top: 4px solid var(--brick-600); }

/* reveal-on-scroll — kept as a no-op hook (content always visible; never JS-dependent) */
.reveal { opacity: 1; }

/* ---------- responsive ---------- */
@media (max-width: 940px) {
  .section { padding: 68px 0; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .wrap { padding: 0 22px; }
}
@media (max-width: 560px) {
  .foot__grid { grid-template-columns: 1fr; }
}