/* ============================================================
   TCCA Northeast — Tzu Chi Collegiate Association, NE Region
   Vanilla static conversion of a Design Component export.
   Design tokens below are merged from the original Tzu Chi
   design system (colors / typography / fonts / spacing / motion).
   Component + hover classes reproduce the former design-system
   components and the DC-only `style-hover` attribute behavior.
   Web fonts load from <link> tags in index.html (not @import)
   so the stylesheet download doesn't serialize behind them.
   ============================================================ */

/* ------------------------------------------------------------
   Color tokens
   ------------------------------------------------------------ */
:root {
  /* Base palette */
  --tc-navy: #1B2A4A;        /* Compassion Navy — primary, grounding */
  --tc-navy-deep: #16223B;   /* Navy Deep (Ink) — body text on light */
  --tc-sky: #4A78B0;         /* Sky Blue — secondary accent, large text only */
  --tc-cloud: #DCE6F2;       /* Cloud Blue — soft fills, tints */
  --tc-paper: #FAF8F3;       /* Paper White — dominant background */
  --tc-white: #FFFFFF;       /* Pure White — cards, contrast surfaces */
  --tc-grey: #6E7277;        /* Monastic Grey — captions, dividers, labels */
  --tc-ink-grey: #585C61;    /* Ink Grey — secondary body text on light */
  --tc-stone: #D7D5CE;       /* Stone — borders, placeholder fills */
  --tc-stone-soft: #ECEAE3;  /* Stone Soft — hairline borders, faint fills */
  --tc-bamboo: #4E7A51;      /* Bamboo Green — primary CTA, eco accent */
  --tc-bamboo-deep: #3F6B47; /* Bamboo Deep — button hover, safe green text */
  --tc-gold: #C9A24B;        /* Seed Gold — rare highlight only */
  --tc-lotus: #E7C5CE;       /* Lotus Pink — very rare decorative touch */

  /* Semantic — surfaces */
  --tc-surface-page: var(--tc-paper);
  --tc-surface-card: var(--tc-white);
  --tc-surface-sunken: var(--tc-cloud);
  --tc-surface-inverse: var(--tc-navy);
  --tc-surface-inverse-deep: var(--tc-navy-deep);

  /* Semantic — text */
  --tc-text-strong: var(--tc-navy);
  --tc-text-body: var(--tc-navy-deep);
  --tc-text-muted: var(--tc-ink-grey);
  --tc-text-subtle: var(--tc-grey);
  --tc-text-on-inverse: var(--tc-paper);
  --tc-text-on-inverse-muted: var(--tc-cloud);
  --tc-text-accent: var(--tc-bamboo-deep);

  /* Semantic — lines & borders */
  --tc-border: var(--tc-stone-soft);
  --tc-border-strong: var(--tc-stone);
  --tc-divider: var(--tc-stone);

  /* Semantic — interactive */
  --tc-action: var(--tc-bamboo);
  --tc-action-hover: var(--tc-bamboo-deep);
  --tc-action-text: var(--tc-white);
  --tc-focus-ring: var(--tc-sky);

  /* Accents (decorative, sparing) */
  --tc-accent-sky: var(--tc-sky);
  --tc-accent-gold: var(--tc-gold);
  --tc-accent-lotus: var(--tc-lotus);
}

/* ------------------------------------------------------------
   Typography tokens
   ------------------------------------------------------------ */
:root {
  /* Families */
  --tc-font-display: "Palatino Linotype", "Spectral", "Iowan Old Style", "Book Antiqua", "Palatino", Georgia, serif;
  --tc-font-body: "Segoe UI", "Source Sans 3", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --tc-font-brush: "STKaiti", "KaiTi", "Kaiti TC", "BiauKai", "DFKai-SB", "Noto Serif TC", serif;
  --tc-font-zh: "Microsoft JhengHei", "PingFang TC", "Noto Sans CJK TC", "Microsoft YaHei", sans-serif;

  /* Type scale (fluid) */
  --tc-fs-display: clamp(2.4rem, 1.55rem + 3.4vw, 3.9rem);
  --tc-fs-h2: clamp(1.7rem, 1.3rem + 1.8vw, 2.5rem);
  --tc-fs-h3: 1.2rem;
  --tc-fs-lead: clamp(1.06rem, 1rem + 0.45vw, 1.28rem);
  --tc-fs-body: 1.0625rem;
  --tc-fs-small: 0.92rem;
  --tc-fs-eyebrow: 0.78rem;
  --tc-fs-caption: 0.82rem;
  --tc-fs-aphorism-zh: clamp(1.9rem, 1.25rem + 2.7vw, 3rem);
  --tc-fs-aphorism-en: clamp(1.2rem, 1rem + 1vw, 1.65rem);

  /* Weights */
  --tc-fw-regular: 400;
  --tc-fw-medium: 500;
  --tc-fw-semibold: 600;

  /* Line heights */
  --tc-lh-tight: 1.08;
  --tc-lh-heading: 1.15;
  --tc-lh-body: 1.7;
  --tc-lh-snug: 1.4;

  /* Tracking */
  --tc-tracking-display: -0.015em;
  --tc-tracking-tight: -0.01em;
  --tc-tracking-eyebrow: 0.14em;
  --tc-tracking-caps: 0.12em;
  --tc-tracking-brush: 0.12em;
}

/* ------------------------------------------------------------
   Platform font faces (local-only, graceful fallback)
   ------------------------------------------------------------ */
@font-face {
  font-family: "Palatino Linotype";
  src: local("Palatino Linotype"), local("Palatino"), local("Book Antiqua"), local("Iowan Old Style");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Palatino Linotype";
  src: local("Palatino Linotype Italic"), local("Palatino Italic"), local("Book Antiqua Italic");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "STKaiti";
  src: local("STKaiti"), local("KaiTi"), local("Kaiti TC"), local("BiauKai"), local("DFKai-SB");
  font-display: swap;
}
@font-face {
  font-family: "Microsoft JhengHei";
  src: local("Microsoft JhengHei"), local("PingFang TC"), local("Noto Sans CJK TC"), local("Microsoft YaHei");
  font-display: swap;
}

/* ------------------------------------------------------------
   Spacing, layout, radius & shadow tokens
   ------------------------------------------------------------ */
:root {
  /* Spacing scale (4px base) */
  --tc-space-1: 0.25rem;
  --tc-space-2: 0.5rem;
  --tc-space-3: 0.75rem;
  --tc-space-4: 1rem;
  --tc-space-5: 1.5rem;
  --tc-space-6: 2rem;
  --tc-space-7: 2.75rem;
  --tc-space-8: 4rem;
  --tc-space-section: clamp(3.5rem, 2.2rem + 5.5vw, 6.5rem);

  /* Layout */
  --tc-wrap: 1140px;
  --tc-measure: 720px;
  --tc-gutter: clamp(1.1rem, 0.6rem + 2vw, 2.25rem);

  /* Radius */
  --tc-radius-sm: 8px;
  --tc-radius: 14px;
  --tc-radius-lg: 20px;
  --tc-radius-pill: 999px;

  /* Borders */
  --tc-border-width: 1px;
  --tc-border-width-strong: 1.5px;

  /* Shadows (soft, low, navy-tinted) */
  --tc-shadow-soft: 0 1px 2px rgba(22,34,59,.04), 0 4px 14px rgba(22,34,59,.05);
  --tc-shadow-card: 0 1px 2px rgba(22,34,59,.05), 0 10px 30px rgba(22,34,59,.07);
  --tc-shadow-lift: 0 2px 4px rgba(22,34,59,.06), 0 18px 44px rgba(22,34,59,.10);
}

/* ------------------------------------------------------------
   Motion tokens
   ------------------------------------------------------------ */
:root {
  --tc-dur-fast: 0.2s;
  --tc-dur-base: 0.25s;
  --tc-dur-reveal: 0.7s;
  --tc-dur-ambient: 46s;
  --tc-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --tc-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --tc-reveal-rise: 20px;
}

/* ------------------------------------------------------------
   Base reset, page defaults & ambient animation
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--tc-font-body);
  color: var(--tc-text-body);
  background: var(--tc-surface-page);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--tc-focus-ring); outline-offset: 3px; border-radius: 4px; }

@keyframes tccaDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100vw + 360px)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tcca-cloud { animation: none !important; }
}

/* ------------------------------------------------------------
   Components — Button (was TzuChiDesignSystem.Button)
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--tc-font-body);
  font-weight: var(--tc-fw-semibold);
  line-height: 1;
  border-radius: var(--tc-radius-pill);
  border: var(--tc-border-width-strong) solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--tc-dur-fast) var(--tc-ease),
              color var(--tc-dur-fast) var(--tc-ease),
              border-color var(--tc-dur-fast) var(--tc-ease),
              transform var(--tc-dur-fast) var(--tc-ease);
}
/* sizes */
.btn--sm { padding: .55rem 1.1rem; font-size: .9rem; }
.btn--md { padding: .8rem 1.45rem; font-size: .98rem; }
.btn--lg { padding: 1rem 1.9rem; font-size: 1.05rem; }
/* variants */
.btn--primary   { background: var(--tc-action); color: var(--tc-action-text); border-color: transparent; }
.btn--secondary { background: transparent; color: var(--tc-navy); border-color: var(--tc-navy); }
.btn--onNavy    { background: var(--tc-white); color: var(--tc-navy); border-color: transparent; }
/* hover (formerly JS onMouseEnter/Leave handlers) */
.btn--primary:hover   { background: var(--tc-action-hover); transform: translateY(-1px); }
.btn--secondary:hover { background: var(--tc-navy); color: var(--tc-white); }
.btn--onNavy:hover    { background: var(--tc-cloud); }

/* ------------------------------------------------------------
   Components — Eyebrow (was TzuChiDesignSystem.Eyebrow)
   ------------------------------------------------------------ */
.eyebrow {
  margin: 0 0 .9rem;
  font-family: var(--tc-font-body);
  font-size: var(--tc-fs-eyebrow);
  font-weight: var(--tc-fw-semibold);
  letter-spacing: var(--tc-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--tc-text-accent);
}
.eyebrow--onInverse { color: var(--tc-text-on-inverse-muted); }

/* ------------------------------------------------------------
   Components — Stat (was TzuChiDesignSystem.Stat)
   ------------------------------------------------------------ */
.stat__value {
  font-family: var(--tc-font-display);
  font-size: 1.8rem;
  font-weight: var(--tc-fw-semibold);
  color: var(--tc-bamboo-deep);
  line-height: 1.1;
}
.stat__label {
  font-family: var(--tc-font-body);
  font-size: var(--tc-fs-caption);
  letter-spacing: .06em;
  color: var(--tc-text-subtle);
  margin-top: .25rem;
}

/* ------------------------------------------------------------
   Components — Card (was TzuChiDesignSystem.Card)
   ------------------------------------------------------------ */
.card {
  background: var(--tc-surface-card);
  border: var(--tc-border-width) solid var(--tc-border);
  border-radius: var(--tc-radius);
  padding: 1.6rem 1.4rem 1.7rem;
  box-shadow: var(--tc-shadow-soft);
  transform: none;
  transition: transform var(--tc-dur-base) var(--tc-ease),
              box-shadow var(--tc-dur-base) var(--tc-ease);
}
.card--interactive:hover {
  box-shadow: var(--tc-shadow-card);
  transform: translateY(-4px);
}

/* ------------------------------------------------------------
   Components — Tag (was TzuChiDesignSystem.Tag)
   ------------------------------------------------------------ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--tc-font-body);
  font-size: .72rem;
  font-weight: var(--tc-fw-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .22rem .6rem;
  border-radius: var(--tc-radius-pill);
}
.tag--accent { background: #E7EFE7; border: 1px solid transparent; color: var(--tc-bamboo-deep); }
.tag--sky-outline { background: transparent; border: 1px solid var(--tc-sky); color: var(--tc-navy); }

/* ------------------------------------------------------------
   Components — Site header & navigation
   Desktop: single-row sticky bar. Below 900px: compact row with
   a hamburger toggle and a dropdown panel (JS-enhanced; without
   JS the nav simply wraps as before via the .no-js fallback).
   ------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 248, 243, .85);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: var(--tc-border-width) solid var(--tc-border);
}
.site-header__inner {
  width: 100%;
  max-width: var(--tc-wrap);
  margin-inline: auto;
  padding-inline: var(--tc-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 68px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: var(--tc-navy);
  min-width: 0;
}
.brand img { height: 40px; width: auto; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.08; min-width: 0; }
.brand__name {
  font-family: var(--tc-font-display);
  font-weight: var(--tc-fw-semibold);
  font-size: 1.12rem;
  letter-spacing: var(--tc-tracking-tight);
  white-space: nowrap;
}
.brand__region {
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tc-grey);
}

.site-nav { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.nav-link {
  text-decoration: none;
  color: var(--tc-navy-deep);
  font-weight: var(--tc-fw-medium);
  font-size: .98rem;
  white-space: nowrap;
  transition: color var(--tc-dur-fast) var(--tc-ease);
}
.nav-link:hover { color: var(--tc-bamboo-deep); }

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
.nav-toggle__bar {
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--tc-navy);
  transition: transform var(--tc-dur-fast) var(--tc-ease),
              opacity var(--tc-dur-fast) var(--tc-ease);
}
.nav-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 899px) {
  html:not(.no-js) .nav-toggle { display: inline-flex; }
  html:not(.no-js) .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .3rem var(--tc-gutter) 1.1rem;
    background: var(--tc-paper);
    border-bottom: var(--tc-border-width) solid var(--tc-border);
    box-shadow: var(--tc-shadow-card);
  }
  html:not(.no-js) .site-header.nav-open .site-nav { display: flex; }
  html:not(.no-js) .site-nav .nav-link {
    padding: .85rem .15rem;
    border-top: var(--tc-border-width) solid var(--tc-stone-soft);
    font-size: 1.02rem;
  }
  html:not(.no-js) .site-nav .nav-link:first-child { border-top: 0; }
  html:not(.no-js) .site-nav .btn { margin-top: .9rem; }
}
@media (max-width: 479px) {
  .brand__name { font-size: 1rem; }
}

/* ------------------------------------------------------------
   Components — Hero scene
   ------------------------------------------------------------ */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #7AA6D4 0%, #A9C8E8 34%, #D2E2F2 60%, #C4D9EE 100%);
}
.hero__water {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 32%;
  background: linear-gradient(180deg, rgba(74,120,176,0) 0%, rgba(74,120,176,.35) 22%, rgba(27,42,74,.45) 100%);
  z-index: 0;
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--tc-wrap);
  margin-inline: auto;
  padding-inline: var(--tc-gutter);
}
.hero__layout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2.5rem;
  padding-block: clamp(3.2rem, 2rem + 6vw, 6rem);
  min-height: min(76vh, 640px);
}
.hero__copy { flex: 1 1 360px; max-width: 39rem; }
.hero__title {
  font-family: var(--tc-font-display);
  font-weight: var(--tc-fw-semibold);
  font-size: var(--tc-fs-display);
  line-height: var(--tc-lh-tight);
  letter-spacing: var(--tc-tracking-display);
  color: var(--tc-navy-deep);
  margin: 0 0 1.1rem;
}
.hero__lead {
  font-size: var(--tc-fs-lead);
  color: var(--tc-navy);
  max-width: 34rem;
  margin: 0 0 1.9rem;
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: .85rem; }
.hero__art { flex: 0 1 360px; display: flex; justify-content: center; align-self: flex-end; }
.hero__art img { width: min(400px, 84vw); }

/* On the sky gradient the green eyebrow falls below readable
   contrast; the hero uses navy instead. */
.eyebrow--onSky { color: var(--tc-navy); }

@media (max-width: 560px) {
  .hero__layout { padding-block: 2.6rem 2.8rem; min-height: 0; gap: 1.8rem; }
  .hero__ctas .btn { flex: 1 1 100%; }
}

/* Drifting clouds. Tops stay above the headline zone; on small
   screens the text fills the hero, so clouds are dropped rather
   than allowed to smear behind the copy. */
.tcca-cloud {
  position: absolute;
  left: -200px;
  border-radius: 100px;
  filter: blur(7px);
  z-index: 0;
  animation: tccaDrift linear infinite;
}
.tcca-cloud--1 {
  top: 9%;
  width: 150px;
  height: 32px;
  background: rgba(255,255,255,.92);
  box-shadow: 36px -16px 0 -4px rgba(255,255,255,.92), 84px -6px 0 -10px rgba(255,255,255,.92);
  animation-duration: 54s;
}
.tcca-cloud--2 {
  top: 13%;
  width: 120px;
  height: 26px;
  background: rgba(255,255,255,.78);
  box-shadow: 30px -12px 0 -6px rgba(255,255,255,.78);
  animation-duration: 72s;
  animation-delay: -22s;
}
.tcca-cloud--3 {
  top: 4%;
  width: 96px;
  height: 20px;
  background: rgba(255,255,255,.6);
  box-shadow: 26px -10px 0 -6px rgba(255,255,255,.6);
  animation-duration: 90s;
  animation-delay: -48s;
}
@media (max-width: 899px) {
  .tcca-cloud { display: none; }
}

/* ------------------------------------------------------------
   Components — Aphorism band
   ------------------------------------------------------------ */
.aphorism__rule {
  display: block;
  width: 46px;
  height: 2px;
  border-radius: 2px;
  background: var(--tc-gold);
  margin: 0 auto 1.5rem;
}
.aphorism__zh {
  margin: 0 auto .9rem;
  font-family: var(--tc-font-brush);
  font-size: var(--tc-fs-aphorism-zh);
  letter-spacing: var(--tc-tracking-brush);
  line-height: 1.35;
  color: var(--tc-navy);
}
/* Each four-character phrase breaks as a unit, never mid-phrase. */
.aphorism__zh span { display: inline-block; margin-inline: .3em; }

/* ------------------------------------------------------------
   Components — Stat grid (2×2 on narrow screens, no orphans)
   ------------------------------------------------------------ */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  column-gap: clamp(1.4rem, 4vw, 2.8rem);
  row-gap: 1.2rem;
  margin-top: 1.9rem;
  padding-top: 1.7rem;
  border-top: var(--tc-border-width) solid var(--tc-stone);
}
@media (max-width: 620px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------
   Components — Missions grid
   Explicit 4 → 2 → 1 column steps (auto-fit previously stranded
   one cell alone at tablet widths), with dividers that follow.
   ------------------------------------------------------------ */
.missions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: var(--tc-border-width) solid var(--tc-stone);
  border-bottom: var(--tc-border-width) solid var(--tc-stone);
}
.mission-cell {
  text-align: center;
  padding: clamp(1.9rem, 3vw, 2.7rem) 1.4rem;
  transition: background-color var(--tc-dur-base) var(--tc-ease);
}
.mission-cell + .mission-cell { border-left: var(--tc-border-width) solid var(--tc-stone); }
@media (max-width: 999px) {
  .missions-grid { grid-template-columns: repeat(2, 1fr); }
  .mission-cell + .mission-cell { border-left: 0; }
  .mission-cell:nth-child(even) { border-left: var(--tc-border-width) solid var(--tc-stone); }
  .mission-cell:nth-child(n+3) { border-top: var(--tc-border-width) solid var(--tc-stone); }
}
@media (max-width: 559px) {
  .missions-grid { grid-template-columns: 1fr; }
  .mission-cell:nth-child(even) { border-left: 0; }
  .mission-cell:nth-child(n+2) { border-top: var(--tc-border-width) solid var(--tc-stone); }
}

/* ------------------------------------------------------------
   Components — Chapter cards (real links, 4 → 2 → 1 columns)
   ------------------------------------------------------------ */
.chapter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
@media (max-width: 1019px) {
  .chapter-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 559px) {
  .chapter-grid { grid-template-columns: 1fr; }
}
.chapter-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.chapter-card__cta {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin: auto 0 0;
  padding-top: 1.1rem;
  font-size: .85rem;
  font-weight: var(--tc-fw-semibold);
  color: var(--tc-bamboo-deep);
}
.chapter-card__cta .arrow {
  display: inline-block;
  transition: transform var(--tc-dur-fast) var(--tc-ease);
}
.chapter-card:hover .chapter-card__cta .arrow { transform: translateX(3px); }

/* ------------------------------------------------------------
   Components — CTA button row (full-width buttons on phones)
   ------------------------------------------------------------ */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  justify-content: center;
}
@media (max-width: 560px) {
  .cta-row .btn { flex: 1 1 100%; }
}

/* ------------------------------------------------------------
   Hover helpers (replace DC-only `style-hover` attribute)
   ------------------------------------------------------------ */
.why-row:hover { background: rgba(255,255,255,.75); }
/* Composited rather than translucent: the cell now paints its own opaque
   background so the grid's divider colour cannot bleed through the tint. */
.mission-cell:hover { background-color: color-mix(in srgb, var(--tc-accent-sky) 6%, var(--tc-surface-page)); }
.ledger-row:hover { background: rgba(74,120,176,.05); }

.text-link:hover { text-decoration: underline; }

.footer-link { transition: color var(--tc-dur-fast) var(--tc-ease); }
.footer-link:hover { color: var(--tc-white); }

/* ------------------------------------------------------------
   Components — Photo figure
   Shared by the photo band and the two in-context placements.
   The cell owns the aspect ratio and the image fills it, so crops
   stay predictable no matter what the source dimensions are.
   ------------------------------------------------------------ */
.photo-figure {
  margin: 0;
  position: relative;
}
.photo-figure__frame {
  display: block;
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: var(--tc-radius);
  background: var(--tc-surface-sunken);
}
.photo-figure__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-figure__caption {
  margin-top: .7rem;
  font-family: var(--tc-font-body);
  font-size: var(--tc-fs-caption);
  line-height: var(--tc-lh-snug);
  color: var(--tc-text-subtle);
}

/* Overlay variant — used on the band. Lifting the caption out of the
   flow keeps the grid math exact (captions would otherwise add an
   unknown height to each row) and reads better over photography. */
.photo-figure--overlay .photo-figure__caption {
  position: absolute;
  inset: auto 0 0 0;
  margin: 0;
  padding: 2.4rem .95rem .8rem;
  color: var(--tc-white);
  background: linear-gradient(180deg, rgba(22,34,59,0) 0%, rgba(22,34,59,.74) 62%, rgba(22,34,59,.88) 100%);
  border-radius: 0 0 var(--tc-radius) var(--tc-radius);
  pointer-events: none;
}

/* ------------------------------------------------------------
   Components — Photo band ("Life in the chapters")
   Asymmetric editorial grid. Every cell resolves to a gentle
   landscape crop so group photos never lose heads: the three
   upper cells land on 3:2, the lower strip on 5:2.
   ------------------------------------------------------------ */
.photo-band__grid {
  display: grid;
  gap: clamp(.7rem, 1.4vw, 1.1rem);
  grid-template-columns: 1fr;
  grid-template-areas:
    "anchor"
    "sideA"
    "sideB"
    "wide";
}
.photo-band__cell--anchor { grid-area: anchor; }
.photo-band__cell--a      { grid-area: sideA; }
.photo-band__cell--b      { grid-area: sideB; }
.photo-band__cell--wide   { grid-area: wide; }

/* Single column below 900px — every cell keeps the source 4:3. */
.photo-band__cell .photo-figure { aspect-ratio: 4 / 3; }

@media (min-width: 900px) {
  .photo-band__grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "anchor anchor sideA"
      "anchor anchor sideB"
      "wide   wide   wide";
  }
  .photo-band__cell--anchor .photo-figure { aspect-ratio: 3 / 2; }
  .photo-band__cell--wide   .photo-figure { aspect-ratio: 5 / 2; }

  /* The side cells take their height from the anchor's two-row span.
     Absolute positioning gives them no intrinsic height of their own,
     which is what makes that hand-off deterministic — they resolve to
     roughly 3:2, matching the anchor. */
  .photo-band__cell--a,
  .photo-band__cell--b { position: relative; }
  .photo-band__cell--a .photo-figure,
  .photo-band__cell--b .photo-figure {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }
}

/* ------------------------------------------------------------
   Components — Four Missions grid
   Dividers are drawn by a 1px grid gap over a stone background rather
   than a border on each cell. Cell borders only work when you know
   where the row breaks; this grid reflows from four columns to one, so
   a border-left leaves a dangling rule down the side of stacked cells.

   That technique needs every track filled, or the empty ones paint
   themselves with the divider colour. So the column count is fixed at
   1, 2 and 4 rather than left to auto-fit — with four cells those are
   the only counts that divide evenly. auto-fit resolves to three
   columns around tablet width and strands two empty tracks.
   ------------------------------------------------------------ */
.mission-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--tc-border-width);
  background: var(--tc-divider);
  border-block: var(--tc-border-width) solid var(--tc-divider);
}
@media (min-width: 560px) {
  .mission-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 940px) {
  .mission-grid { grid-template-columns: repeat(4, 1fr); }
}
.mission-cell {
  background: var(--tc-surface-page);
}

/* ------------------------------------------------------------
   Components — Mission cell media
   The Four Missions cells carry a photo where the line-art icon
   used to sit. The icon survives as a medallion straddling the
   photo's lower edge — the overlap is what gives this row the
   layering the flat icon-and-rule version lacked.
   ------------------------------------------------------------ */
.mission-cell__media {
  position: relative;
  /* Clears the medallion's 27px overhang and restores roughly the
     same icon-to-heading gap the section had before. */
  margin-bottom: 2.9rem;
}
.mission-cell__frame {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--tc-radius);
  background: var(--tc-surface-sunken);
}
.mission-cell__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mission-cell__badge {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  width: 54px;
  height: 54px;
  border-radius: var(--tc-radius-pill);
  background: var(--tc-surface-card);
  border: var(--tc-border-width) solid var(--tc-border);
  box-shadow: var(--tc-shadow-soft);
  display: grid;
  place-items: center;
}
.mission-cell__badge svg {
  width: 28px;
  height: 28px;
}