/* ═══════════════════════════════════════════════════════════════
   THRIVE BED-STUY  ·  styles.css  ·  v4
   Brand-aligned: Thrive Green / Tint / Neutral / Black / White
   ═══════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ──────────────────────────────────────────── */
:root {
  /* Brand palette */
  --green:       #879337;
  --green-dk:    #5f6826;
  --green-lt:    #9daa42;
  --green-tint:  #d7e7ac;
  --green-pale:  #eef4dc;
  --neutral:     #f1efe9;
  --black:       #000000;
  --ink:         #1a1a1a;
  --charcoal:    #222222;
  --mid:         #5a5a5a;
  --muted:       #8a8a8a;
  --border:      rgba(0,0,0,.1);
  --border-lt:   rgba(0,0,0,.06);
  --white:       #ffffff;
  --off-white:   #f9f9f7;

  /* Typography — Romie not available on web; using system serif fallback
     Real implementation: self-host Romie OTF + Theinhardt WOFF2 */
  --font-display: 'Playfair Display', 'Georgia', serif;   /* → replace with Romie */
  --font-body:    'DM Sans', 'Helvetica Neue', sans-serif; /* → replace with Theinhardt */


  /* Layout */
  --max-w:   1200px;
  --pad-x:   clamp(1.25rem, 5vw, 3rem);
  --sect-v:  clamp(4rem, 8vw, 7rem);
  --radius:  2px;
  --rad-md:  6px;
  --ease:    cubic-bezier(.25,.46,.45,.94);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:  .18s var(--ease);
  --t-med:   .3s var(--ease);
}

/* ── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
}
img, video, iframe { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button, input, textarea, select { font-family: var(--font-body); }

/* ── LAYOUT ─────────────────────────────────────────────────── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); }
.section    { padding: var(--sect-v) 0; }
.section--neutral  { background: var(--neutral); }
.section--tint     { background: var(--green-tint); }
.section--pale     { background: var(--green-pale); }
.section--black    { background: var(--black); color: var(--white); }
.section--off      { background: var(--off-white); }

/* ── TYPOGRAPHY ─────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 1.25rem;
}
.eyebrow::before { content: ''; display: block; width: 1.5rem; height: 1.5px; background: var(--green); flex-shrink: 0; }
.section--black .eyebrow { color: var(--green-tint); }
.section--black .eyebrow::before { background: var(--green-tint); }

.display-xl {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 8vw, 7rem);
  line-height: .95;
  letter-spacing: -.02em;
  font-weight: 700;
}
.display-lg {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 1;
  letter-spacing: -.018em;
  font-weight: 700;
}
.display-md {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -.012em;
  font-weight: 700;
}
.display-sm {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  font-weight: 700;
}
.lead {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  color: var(--mid);
  line-height: 1.85;
}
.section--black .lead { color: rgba(255,255,255,.65); }
em.accent { font-style: normal !important; color: var(--green); }
.section--black em.accent { color: var(--green-tint); }

.rule { width: 2.5rem; height: 2px; background: var(--green); margin-bottom: 1.75rem; }
.section--black .rule { background: var(--green-tint); }

b{
  color:#000!important;
}

/* ── SKIP LINK ───────────────────────────────────────────────── */
.skip-link {
  position: absolute; top: -100%; left: 1rem; z-index: 9999;
  padding: .75rem 1.5rem; background: var(--green); color: var(--white);
  font-size: .9rem; font-weight: 500; border-radius: var(--radius); text-decoration: none;
  transition: top .15s;
}
.skip-link:focus { top: 1rem; outline: 3px solid var(--green); outline-offset: 2px; }

/* ── FOCUS RINGS ─────────────────────────────────────────────── */
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }
.section--black a:focus-visible,
.section--black button:focus-visible { outline-color: var(--green-tint); }
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--green); outline-offset: 0; border-color: var(--green);
}
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 2rem;
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .05em;
  cursor: pointer;
  border: none;
  border-radius: var(--radius);
  transition: all var(--t-fast);
  text-decoration: none;
  white-space: nowrap;
}
.btn-green { background: var(--green); color: var(--white); }
.btn-green:hover { background: var(--green-lt); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(135,147,55,.3); }
.btn-black { background: var(--black); color: var(--white); }
.btn-black:hover { background: var(--ink); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--black); border: 1.5px solid rgba(0,0,0,.25); }
.btn-outline:hover { border-color: var(--green); color: var(--green); }
.btn-outline-white { background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,.4); }
.btn-outline-white:hover { background: var(--white); color: var(--green); }
.btn-ghost { background: transparent; color: var(--green); padding-left: 0; padding-right: 0; }
.btn-ghost::after { content: ' →'; transition: margin .18s; }
.btn-ghost:hover::after { margin-left: .35rem; }

/* ── BADGES ──────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .28rem .85rem; border-radius: 2rem;
  font-size: .7rem; font-weight: 500; letter-spacing: .06em; white-space: nowrap;
}
.badge-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.badge--active  { background: rgba(135,147,55,.12); color: var(--green); }
.badge--active  .badge-dot { background: var(--green); animation: pulseDot 2s ease-in-out infinite; }
.badge--urgent  { background: rgba(180,30,30,.1); color: #b41e1e; }
.badge--urgent  .badge-dot { background: #b41e1e; animation: pulseDot 1.5s ease-in-out infinite; }
.badge--neutral { background: rgba(0,0,0,.07); color: var(--mid); }
.badge--neutral .badge-dot { background: var(--muted); }
@keyframes pulseDot { 0%,100%{opacity:1} 50%{opacity:.55} }

/* ── REVEALS ─────────────────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.visible { opacity:1; transform:none; }
.rd1{transition-delay:.1s} .rd2{transition-delay:.2s} .rd3{transition-delay:.3s} .rd4{transition-delay:.4s}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ═══════════════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════════════ */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  background: var(--white); border-bottom: 1px solid var(--border);
}
.nav-wrap { display:flex; align-items:center; justify-content:space-between; height:80px; gap:1rem; }
.nav-logo { display:flex; align-items:center; gap:.65rem; flex-shrink:0; }
.nav-logo img { height:60px; width:auto; }
.nav-logo-text { font-family:var(--font-display); font-size:1.3rem; font-weight:700; color:var(--black); letter-spacing:-.01em; }
.nav-logo-text span { color:var(--green); }

.nav-links { display:flex; align-items:center; gap:.2rem; }
.nav-links > a, .nav-dropdown > button {
  font-size:.82rem; font-weight:400; letter-spacing:.04em; color:var(--mid);
  background:none; border:none; cursor:pointer; padding:.45rem .75rem;
  border-radius:var(--radius); transition:color var(--t-fast);
  white-space:nowrap; display:flex; align-items:center; gap:.3rem;
}
.nav-links > a:hover, .nav-dropdown > button:hover,
.nav-links > a.active, .nav-dropdown.active > button { color:var(--green); }
.nav-dropdown > button::after { content:''; display:block; width:0; height:0; border:4px solid transparent; border-top-color:currentColor; margin-top:2px; transition:transform var(--t-fast); }
.nav-dropdown.open > button::after { transform:rotate(180deg); }

.dropdown-menu {
  display:none; position:absolute; top:calc(100% + .5rem); left:0;
  min-width:230px; background:var(--white); border:1px solid var(--border);
  border-radius:var(--rad-md); box-shadow:0 12px 48px rgba(0,0,0,.12); padding:.5rem; z-index:600;
}
.nav-dropdown { position:relative; }
.nav-dropdown.open .dropdown-menu { display:block; }
.dropdown-menu a { display:flex; flex-direction:column; gap:.15rem; padding:.75rem 1rem; border-radius:var(--radius); transition:background var(--t-fast); }
.dropdown-menu a:hover { background:var(--green-pale); }
.dropdown-menu a .dm-title { font-size:.85rem; font-weight:500; color:var(--black); }
.dropdown-menu a .dm-sub   { font-size:.75rem; color:var(--muted); }
.dropdown-menu a:hover .dm-title { color:var(--green); }

.nav-cta { margin-left:.5rem; }
.nav-hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.nav-hamburger span { display:block; width:22px; height:1.5px; background:var(--black); transition:all .3s; }
.nav-hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity:0; }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* Mobile drawer */
.mobile-drawer {
  display:none; position:fixed; top:80px; left:0; right:0; bottom:0; z-index:490; background:var(--white);
  flex-direction:column; padding:2rem 2rem 3rem; overflow-y:auto; gap:.5rem;
}
.mobile-drawer.open { display:flex; }
.mobile-drawer a { font-family:var(--font-display); font-size:2rem; color:var(--black); transition:color var(--t-fast); padding:.3rem 0; }
.mobile-drawer a:hover, .mobile-drawer a.active { color:var(--green); }
.mobile-drawer .mob-sub { font-family:var(--font-display); font-size:1.6rem; color:var(--mid); padding:.2rem 0 .2rem 1.25rem; border-left:3px solid var(--green-pale); margin-left:.25rem; transition:color var(--t-fast), border-color var(--t-fast); }
.mobile-drawer .mob-sub:hover { color:var(--green); border-color:var(--green); }
.mobile-drawer .mob-section-title { font-family:var(--font-body); font-size:.72rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); padding:.25rem 0 .1rem; }
.mobile-drawer .mob-divider { height:1px; background:var(--border-lt); margin:.75rem 0; }
.mobile-drawer .btn { align-self:flex-start; margin-top:1.25rem; color:var(--white) !important; padding:1rem 2.5rem; font-size:1rem; }

@media (max-width:900px) {
  .nav-links{display:none} .nav-cta{display:none} .nav-hamburger{display:flex}
  .nav-wrap { padding: 0 1rem; }
}
@media (max-width:360px) { .nav-logo-text{font-size:.95rem} }

/* ═══════════════════════════════════════════════════════════════
   HERO — full bleed image
   ═══════════════════════════════════════════════════════════════ */
.hero-full {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
}
.hero-full .hero-img {
  position:absolute; inset:0;
  background-size:cover; background-position:center 40%;
  background-image:url('hero.jpg');
}
.hero-full .hero-img::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.48) 45%, rgba(0,0,0,.18) 75%, rgba(0,0,0,.06) 100%);
}
.hero-full .hero-content {
  position:relative; z-index:2;
  padding:0 var(--pad-x) 0;
  padding-top: calc(80px + 2rem); /* just clear the nav */
  max-width:var(--max-w); margin:0 auto; width:100%;
}
.hero-body { padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.hero-full .eyebrow { color:rgba(255,255,255,.7); }
.hero-full .eyebrow::before { background:rgba(255,255,255,.45); }
.hero-full .display-xl { color:var(--white); margin-bottom:1.5rem; }
.hero-full em.accent { color:var(--green-tint); font-style:italic; }
.hero-full .lead { color:rgba(255,255,255,.7); max-width:52ch; margin-bottom:2.5rem; }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; }

/* Event bar — static element at the bottom of the hero section */
.hero-event-bar {
  position: relative; z-index: 2;
  background: rgba(135,147,55,.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 1.1rem var(--pad-x);
  width: 100%;
}
.banner-spacer { display: none; }
.hero-event-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.hero-event-left { display:flex; align-items:center; gap:1.25rem; }
.hero-event-date {
  background: rgba(255,255,255,.2);
  border-radius: var(--radius);
  padding: .65rem 1rem;
  text-align: center;
  flex-shrink: 0;
}
.hero-event-date .ed-month { font-size:.6rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.75); }
.hero-event-date .ed-day   { font-family:var(--font-display); font-size:2rem; color:var(--white); line-height:1; }
.hero-event-title { font-family:var(--font-display); font-size:1rem; color:var(--white); font-weight:700; margin-bottom:.2rem; }
.hero-event-detail { font-size:.8rem; color:rgba(255,255,255,.75); }
.hero-event-bar .btn {
  background: var(--white); color: var(--green); font-weight:600;
  font-size:.82rem; padding:.6rem 1.3rem; flex-shrink:0;
}
.hero-event-bar .btn:hover { background: var(--neutral); }

/* Page hero — inner pages */
.page-hero { padding: calc(80px + clamp(3rem,6vw,5rem)) 0 clamp(3rem,6vw,5rem); background: var(--neutral); }
.page-hero .display-lg, .page-hero .display-md { color:var(--black); margin-bottom:1rem; }
.page-hero .eyebrow { color:var(--green); }

/* Photo hero for issue pages */
.photo-hero {
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
}
.photo-hero .ph-img {
  position:absolute; inset:0;
  background-size:cover; background-position:center 30%;
}
.photo-hero .ph-img::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.45) 50%, rgba(0,0,0,.12) 100%);
}
.photo-hero .container { position:relative; z-index:2; padding-bottom:clamp(2.5rem,5vw,4rem); padding-top:calc(80px + 2rem); }
.photo-hero .display-lg, .photo-hero .eyebrow, .photo-hero .lead { color:var(--white); }
.photo-hero .eyebrow { color:rgba(255,255,255,.7); }
.photo-hero .eyebrow::before { background:rgba(255,255,255,.4); }
.photo-hero .display-lg { margin-bottom:1rem; }

/* ═══════════════════════════════════════════════════════════════
   DATE BANNER (green strip, used on sub-pages)
   ═══════════════════════════════════════════════════════════════ */
.date-banner { background:var(--green); padding:1.5rem 0; }
.date-banner-inner { display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.date-banner-left  { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.date-block { background:rgba(255,255,255,.2); border-radius:4px; padding:.8rem 1.1rem; text-align:center; flex-shrink:0; }
.date-block .db-month { font-size:.62rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.75); }
.date-block .db-day   { font-family:var(--font-display); font-size:2.2rem; color:var(--white); line-height:1; }
.date-banner-text p:first-child { font-weight:600; color:var(--white); font-size:1rem; font-family:var(--font-display); margin-bottom:.2rem; }
.date-banner-text p:last-child  { font-size:.83rem; color:rgba(255,255,255,.75); }
.date-banner .btn { background:var(--white); color:var(--green); font-weight:600; flex-shrink:0; }
.date-banner .btn:hover { background:var(--neutral); }

/* ═══════════════════════════════════════════════════════════════
   SECTION HEADER UTILITY
   ═══════════════════════════════════════════════════════════════ */
.sect-hd { margin-bottom:3rem; }
.sect-hd.text-center { text-align:center; }
.sect-hd.text-center .rule { margin:0 auto 1.75rem; }
.sect-hd .display-md { margin-top:.5rem; }

/* ═══════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════ */
.card {
  background:var(--white); border:1px solid var(--border); border-radius:var(--rad-md);
  transition:transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.card:hover { transform:translateY(-4px); box-shadow:0 16px 48px rgba(0,0,0,.1); border-color:rgba(135,147,55,.3); }
.card-body { padding:2rem; }
.card-label { font-size:.7rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--green); margin-bottom:.65rem; }
.card-title { font-family:var(--font-display); font-size:1.3rem; color:var(--black); margin-bottom:.65rem; line-height:1.25; }
.card-text  { font-size:.88rem; color:var(--mid); line-height:1.75; }

/* Initiative cards (large) */
.initiative-card {
  border:1px solid var(--border); border-radius:var(--rad-md); overflow:hidden;
  display:flex; flex-direction:column; background:var(--white);
  transition:transform var(--t-fast), box-shadow var(--t-fast);
}
.initiative-card:hover { transform:translateY(-4px); box-shadow:0 16px 48px rgba(0,0,0,.1); }
.initiative-card-img { width:100%; aspect-ratio:16/9; overflow:hidden; }
.initiative-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.initiative-card:hover .initiative-card-img img { transform:scale(1.04); }
.initiative-card-body { padding:2rem; flex:1; display:flex; flex-direction:column; }
.initiative-card-body h3 { font-family:var(--font-display); font-size:1.55rem; color:var(--black); margin-bottom:.75rem; }
.initiative-card-body p  { font-size:.9rem; color:var(--mid); flex:1; line-height:1.75; margin-bottom:1.5rem; }

/* Focus area cards */
.focus-card {
  padding:2rem;
  border:1px solid var(--border);
  border-radius:var(--rad-md);
  border-top:3px solid var(--green);
  transition:box-shadow var(--t-fast), transform var(--t-fast);
}
.focus-card:hover { box-shadow:0 8px 32px rgba(0,0,0,.08); transform:translateY(-3px); }
.focus-icon { font-size:2rem; margin-bottom:1rem; }
.focus-label { font-size:.7rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--green); margin-bottom:.5rem; }
.focus-card h4 { font-family:var(--font-display); font-size:1.25rem; margin-bottom:.6rem; }
.focus-card p  { font-size:.88rem; color:var(--mid); line-height:1.75; }

/* Win cards */
.win-card { padding:2rem; border:1px solid var(--border); border-radius:var(--rad-md); background:var(--white); position:relative; overflow:hidden; }
.win-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--green); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.win-card:hover { box-shadow:0 12px 40px rgba(0,0,0,.1); }
.win-card:hover::before { transform:scaleX(1); }
.win-icon  { font-size:1.8rem; margin-bottom:.9rem; }
.win-label { font-size:.68rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--green); margin-bottom:.5rem; }
.win-title { font-family:var(--font-display); font-size:1.2rem; margin-bottom:.5rem; }
.win-text  { font-size:.87rem; color:var(--mid); line-height:1.75; }

/* Press cards */
.press-card { padding:1.75rem; border:1px solid var(--border); border-radius:var(--rad-md); background:var(--white); transition:box-shadow var(--t-fast); }
.press-card:hover { box-shadow:0 8px 28px rgba(0,0,0,.09); }
.press-outlet { font-size:.68rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--green); margin-bottom:.6rem; }
.press-card h4 { font-family:var(--font-display); font-size:1.1rem; margin-bottom:.5rem; line-height:1.3; }
.press-card p  { font-size:.84rem; color:var(--mid); line-height:1.7; }

/* Event cards */
.event-card { display:flex; gap:1.5rem; padding:1.6rem; border:1px solid var(--border); border-radius:var(--rad-md); background:var(--white); transition:border-color var(--t-fast), box-shadow var(--t-fast); }
.event-card:hover { border-color:rgba(135,147,55,.35); box-shadow:0 8px 32px rgba(0,0,0,.08); }
.ev-date { display:flex; flex-direction:column; align-items:center; flex-shrink:0; width:3.5rem; }
.ev-month { font-size:.62rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--green); }
.ev-day   { font-family:var(--font-display); font-size:2.2rem; color:var(--black); line-height:1; }
.ev-type  { font-size:.62rem; font-weight:500; letter-spacing:.06em; padding:.18rem .55rem; border-radius:2rem; margin-top:.4rem; white-space:nowrap; }
.ev-type--court    { background:rgba(180,30,30,.1); color:#b41e1e; }
.ev-type--meeting  { background:var(--green-pale); color:var(--green); }
.ev-type--workshop { background:rgba(0,0,0,.07); color:var(--mid); }
.ev-info h4 { font-family:var(--font-display); font-size:1.1rem; margin-bottom:.35rem; color:var(--black); }
.ev-info p  { font-size:.86rem; color:var(--mid); }
.ev-time    { font-size:.76rem; color:var(--green); margin-top:.5rem; font-weight:500; }

/* ═══════════════════════════════════════════════════════════════
   TIMELINE
   ═══════════════════════════════════════════════════════════════ */
.timeline-wrap { position:relative; padding:1rem 0; }
.timeline-wrap::before { content:''; position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--border); transform:translateX(-50%); }
.tl-item { display:grid; grid-template-columns:1fr 3rem 1fr; margin-bottom:3rem; }
.tl-item.tl-l .tl-body { grid-column:1; text-align:right; padding-right:2.5rem; }
.tl-item.tl-l .tl-pin  { grid-column:2; }
.tl-item.tl-l .tl-void { grid-column:3; }
.tl-item.tl-r .tl-void { grid-column:1; }
.tl-item.tl-r .tl-pin  { grid-column:2; }
.tl-item.tl-r .tl-body { grid-column:3; text-align:left; padding-left:2.5rem; }
.tl-pin { display:flex; justify-content:center; align-items:flex-start; padding-top:.3rem; }
.tl-dot { width:14px; height:14px; border-radius:50%; background:var(--green); border:2px solid var(--white); box-shadow:0 0 0 2px var(--green); flex-shrink:0; }
.tl-dot--past { background:var(--muted); box-shadow:0 0 0 2px var(--muted); }
.tl-dot--up   { animation:tlGlow 2.5s ease-in-out infinite; }
@keyframes tlGlow { 0%,100%{box-shadow:0 0 0 2px var(--green)} 50%{box-shadow:0 0 0 6px rgba(135,147,55,.2)} }
.tl-date { font-size:.7rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--green); margin-bottom:.5rem; }
.tl-card { display:inline-block; padding:1.4rem 1.6rem; border:1px solid var(--border); border-radius:var(--rad-md); background:var(--white); max-width:380px; text-align:left; transition:box-shadow var(--t-fast), border-color var(--t-fast); }
.tl-item.tl-l .tl-card { margin-left:auto; }
.tl-card:hover { box-shadow:0 8px 28px rgba(0,0,0,.1); border-color:rgba(135,147,55,.25); }
.tl-card h4 { font-family:var(--font-display); font-size:1.1rem; color:var(--black); margin-bottom:.45rem; }
.tl-card p  { font-size:.86rem; color:var(--mid); line-height:1.7; }
.tl-item.tl-past .tl-date { color:var(--muted); }
.tl-item.tl-past .tl-card { background:var(--off-white); }
.tl-item.tl-past .tl-card h4 { color:var(--mid); }
.tl-section-mark { text-align:center; margin:2rem 0 3rem; position:relative; z-index:2; }
.tl-section-mark span { display:inline-block; background:var(--white); border:1px solid var(--border); border-radius:2rem; padding:.35rem 1.1rem; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.tl-section-mark--now span { border-color:var(--green); color:var(--green); background:var(--green-pale); }
@media (max-width:680px) {
  .timeline-wrap::before { left:1.4rem; }
  .tl-item { grid-template-columns:2.8rem 1fr; }
  .tl-item.tl-l .tl-body, .tl-item.tl-r .tl-body { grid-column:2; grid-row:1; text-align:left; padding-left:1.25rem; padding-right:0; }
  .tl-item.tl-l .tl-pin,  .tl-item.tl-r .tl-pin  { grid-column:1; grid-row:1; justify-content:flex-start; padding-left:.7rem; }
  .tl-item.tl-l .tl-void, .tl-item.tl-r .tl-void { display:none; }
  .tl-card { max-width:100%; }
  .tl-item.tl-l .tl-card { margin-left:0; }
}

/* ═══════════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════════ */
.form-field { display:flex; flex-direction:column; gap:.4rem; }
.form-field label { font-size:.75rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--mid); }
.form-field input, .form-field textarea, .form-field select {
  padding:.85rem 1rem; border:1.5px solid var(--border); border-radius:var(--radius);
  font-family:var(--font-body); font-size:.9rem; color:var(--black); background:var(--white);
  outline:none; transition:border-color var(--t-fast);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color:var(--green); }
.form-field textarea { min-height:110px; resize:none; }
.form-success { display:none; color:var(--green); font-family:var(--font-display); font-size:1.1rem; padding:1rem 0; }

textarea::placeholder {
  color: rgba(255,255,255,0.85);
}

/* Signup box (dark bg) */
.signup-box { background: var(--green-dk); border-radius:var(--rad-md); padding:clamp(2rem,4vw,3rem); }
.signup-box h3 { font-family:var(--font-display); font-size:1.8rem; color:var(--white); margin-bottom:.6rem; }
.signup-box p  { color:rgba(255,255,255,.55); font-size:.9rem; margin-bottom:1.75rem; }
.signup-form   { display:flex; flex-direction:column; gap:.75rem; }
.signup-form input, .signup-form select {
  width:100%; padding:.85rem 1.1rem;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15);
  border-radius:var(--radius); color:var(--white); font-family:var(--font-body); font-size:.9rem; outline:none;
  transition:background var(--t-fast), border-color var(--t-fast);
}
.signup-form input::placeholder { color:rgba(255, 255, 255, 0.33); }
.signup-form input:focus, .signup-form select:focus { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.4); }
.signup-form select option { color:var(--black); background:var(--white); }
.signup-form .btn { background:var(--green); color:var(--white); justify-content:center; font-weight:600; }
.signup-form .btn:hover { background:var(--green-lt); }
.signup-success { display:none; text-align:center; padding:2rem; color:rgba(255,255,255,.85); font-family:var(--font-display); font-size:1.3rem; }

/* ═══════════════════════════════════════════════════════════════
   GRIDS
   ═══════════════════════════════════════════════════════════════ */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
@media (max-width:900px) { .grid-3{grid-template-columns:1fr 1fr} .grid-4{grid-template-columns:1fr 1fr} }
@media (max-width:600px) { .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} }

.two-col { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,6rem); align-items:start; }
.two-col--center { align-items:center; }
@media (max-width:760px) { .two-col{grid-template-columns:1fr; gap:2.5rem} }

.sidebar-grid { display:grid; grid-template-columns:2fr 1fr; gap:clamp(2.5rem,5vw,5rem); align-items:start; }
@media (max-width:860px) { .sidebar-grid{grid-template-columns:1fr; gap:2.5rem} }

/* ═══════════════════════════════════════════════════════════════
   ABOUT — editorial sections
   ═══════════════════════════════════════════════════════════════ */
.ae-row { display:grid; grid-template-columns:1fr 1fr; gap:clamp(3rem,6vw,6rem); align-items:center; }
.ae-row--flip .ae-img { order:2; }
.ae-row--flip .ae-text { order:1; }
.ae-img img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--rad-md); display:block; }
.ae-text { display:flex; flex-direction:column; }
.ae-body { display:flex; flex-direction:column; gap:1.25rem; }
.ae-body p { font-size:1rem; color:var(--mid); line-height:1.9; }
.ae-body p:first-child { font-size:1.05rem; color:var(--ink); }
@media (max-width:760px) {
  .ae-row { grid-template-columns:1fr; }
  .ae-row--flip .ae-img, .ae-row--flip .ae-text { order:0; }
  .ae-img img { aspect-ratio:16/9; }
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
#footer { background:var(--black); }
.footer-body { padding:4rem 0 2.5rem; }
.footer-grid { display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr; gap:3rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:2rem; }
.footer-logo { display:flex; align-items:center; gap:.65rem; margin-bottom:1rem; }
.footer-logo-text { font-family:var(--font-display); font-size:1.2rem; color:var(--white); font-weight:700; }
.footer-logo-text span { color:var(--green-tint); }
.footer-brand p { font-size:.84rem; color:rgba(255,255,255,.45); line-height:1.75; }
.footer-col h5 { font-size:.68rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:1.2rem; }
.footer-col ul { display:flex; flex-direction:column; gap:.55rem; }
.footer-col a  { font-size:.84rem; color:rgba(255,255,255,.55); transition:color var(--t-fast); }
.footer-col a:hover { color:var(--white); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.75rem; font-size:.76rem; color:rgba(255,255,255,.3); }
.footer-bottom a { transition:color var(--t-fast); }
.footer-bottom a:hover { color:rgba(255,255,255,.7); }
.footer-ig { display:inline-flex; align-items:center; gap:.55rem; font-size:.82rem; color:rgba(255,255,255,.45); transition:color var(--t-fast); margin-top:1rem; }
.footer-ig:hover { color:var(--white); }
@media (max-width:900px) { .footer-grid{grid-template-columns:1fr 1fr} }
@media (max-width:540px) { .footer-grid{grid-template-columns:1fr} .footer-bottom{flex-direction:column; align-items:flex-start} }

/* ═══════════════════════════════════════════════════════════════
   EV FILTER (events page)
   ═══════════════════════════════════════════════════════════════ */
.ev-filter-bar { display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:2.5rem; }
.ev-filter-btn { padding:.42rem 1.1rem; border:1.5px solid var(--border); border-radius:2rem; font-size:.78rem; font-weight:500; cursor:pointer; background:transparent; color:var(--mid); transition:all var(--t-fast); font-family:var(--font-body); }
.ev-filter-btn:hover, .ev-filter-btn.active { background:var(--green); border-color:var(--green); color:var(--white); }

/* ═══════════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════════ */
.text-center { text-align:center; }
.text-center .lead, .text-center .rule { margin-left:auto; margin-right:auto; }
.mt-sm{margin-top:1.5rem} .mt-md{margin-top:2.5rem} .mt-lg{margin-top:4rem}
.mb-md{margin-bottom:2.5rem} .mb-lg{margin-bottom:4rem}
.live-label { display:inline-flex; align-items:center; gap:.5rem; font-size:.7rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--green); background:var(--green-pale); padding:.35rem .85rem; border-radius:2rem; margin-bottom:1.75rem; }
.live-dot { width:7px; height:7px; border-radius:50%; background:var(--green); animation:pulseDot 2s ease-in-out infinite; }
.section-header { display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:3rem; }

/* ═══════════════════════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════════════════════ */
@media print {
  #nav,.mobile-drawer,.skip-link,.hero-scroll,.ev-filter-bar{display:none !important}
  body{font-size:12pt; color:#000; background:#fff}
  .section{padding:1.5rem 0}
  a[href]::after{content:' (' attr(href) ')'; font-size:.85em; color:#555}
  a[href^="#"]::after{content:''}
}

/* ═══════════════════════════════════════════════════════════════
   GIRLS HIGH SCHOOL PAGE — ghs-* components
   ═══════════════════════════════════════════════════════════════ */

/* ── Page header (editorial, no photo) ─────────────────────── */
.ghs-header {
  padding: calc(68px + clamp(3rem, 6vw, 5rem)) 0 clamp(2rem, 4vw, 3.5rem);
  background: var(--white);
}
.ghs-header .eyebrow { margin-bottom: 1rem; }
.ghs-header .display-lg { line-height: 1.05; }

/* ── Full-width photo blocks ────────────────────────────────── */
.ghs-full-photo {
  position: relative;
  width: 100%;
  background: var(--neutral);
  overflow: hidden;
}
.ghs-full-photo img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.ghs-full-photo--historic img {
  max-height: 420px;
  object-position: center 20%;
  filter: grayscale(100%);
}
/* Placeholder — shown when image file is missing */
.ghs-photo-placeholder {
  display: none; /* hidden when img loads */
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .75rem;
  text-align: center;
  padding: 2rem;
  background: var(--neutral);
  min-height: 280px;
}
/* Show placeholder only when img fails or src is missing */
.ghs-full-photo img:not([src]),
.ghs-full-photo img[src=""],
.ghs-full-photo img.error { display: none; }
.ghs-full-photo img:not([src]) ~ .ghs-photo-placeholder,
.ghs-full-photo img[src=""] ~ .ghs-photo-placeholder { display: flex; }
.ghs-photo-placeholder span {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--mid);
}
.ghs-photo-placeholder p {
  font-size: .78rem;
  color: var(--muted);
}
.ghs-photo-placeholder code {
  font-size: .72rem;
  background: rgba(0,0,0,.06);
  padding: .15rem .4rem;
  border-radius: 3px;
}
.ghs-photo-credit {
  padding: .6rem var(--pad-x);
  font-size: .72rem;
  color: var(--muted);
  letter-spacing: .04em;
  background: var(--off-white);
  text-align: right;
}

/* Alumna photo placeholder (always visible until real image swapped in) */
.ghs-alumna-photo { position: relative; }
.ghs-alumna-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: top; display: block; }
.ghs-alumna-placeholder {
  position: absolute;
  inset: 0;
  background: var(--neutral);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  color: var(--muted);
  z-index: 1;
}
/* Hide placeholder once real img loads */
.ghs-alumna-photo img[src]:not([src=""]) + .ghs-alumna-placeholder { display: none; }

/* ── Body copy section ──────────────────────────────────────── */
.ghs-body {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--white);
}
.ghs-prose {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.ghs-prose p {
  font-size: 1rem;
  color: var(--mid);
  line-height: 1.875;
}
.ghs-prose p strong {
  color: var(--black);
  font-weight: 600;
}

/* Placeholder copy block */
.ghs-placeholder-block {
  border: 2px dashed rgba(135, 147, 55, .35);
  border-radius: var(--rad-md);
  padding: 2rem;
  background: var(--green-pale);
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ghs-placeholder-label {
  font-size: .82rem !important;
  font-weight: 600 !important;
  color: var(--green) !important;
  text-transform: uppercase;
  letter-spacing: .1em;
  text-align: center;
}

/* Inline CTA buttons */
.ghs-inline-cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: .5rem;
}

/* ── Notable alumnae section ────────────────────────────────── */
.ghs-alumnae {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--neutral);
}
.ghs-alumnae-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.ghs-alumna {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.ghs-alumna-info {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.ghs-alumna-info strong {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--black);
  line-height: 1.3;
}
.ghs-alumna-dates {
  font-size: .78rem;
  color: var(--muted);
}
.ghs-alumna-info p {
  font-size: .82rem;
  color: var(--mid);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 700px) {
  .ghs-alumnae-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
}
@media (max-width: 400px) {
  .ghs-alumnae-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Key facts / timeline section ───────────────────────────── */
.ghs-facts { background: var(--white); }
.ghs-facts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}
.ghs-facts-heading {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 1.5rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--green);
}
.ghs-fact-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.ghs-fact {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1rem;
  align-items: start;
}
.ghs-fact-year {
  font-size: .78rem;
  font-weight: 600;
  color: var(--green);
  letter-spacing: .04em;
  padding-top: .25rem;
  flex-shrink: 0;
}
.ghs-fact p {
  font-size: .88rem;
  color: var(--mid);
  line-height: 1.7;
  margin: 0;
}
.ghs-fact--legal .ghs-fact-year { color: var(--black); }
.ghs-fact--legal p { color: var(--ink); }

.ghs-status {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: 2rem;
  font-size: .85rem;
  color: var(--mid);
}
.ghs-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  animation: pulseDot 2s ease-in-out infinite;
  flex-shrink: 0;
}
.ghs-status strong { color: var(--green); }

@media (max-width: 760px) {
  .ghs-facts-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .ghs-fact { grid-template-columns: 6rem 1fr; }
}
@media (max-width: 480px) {
  .ghs-fact { grid-template-columns: 1fr; gap: .35rem; }
  .ghs-fact-year { padding-top: 0; }
}


/* ── GHS two-column page layout ─────────────────────────────── */
.ghs-page-section { padding-top: calc(68px + var(--sect-v)); }

.ghs-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 3rem;
  align-items: start;
}

.ghs-main-col {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-width: 0; /* prevent overflow */
}

/* Prose inside the main col */
.ghs-main-col .ghs-prose {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

/* Photos inside the main col span full column width */
.ghs-main-col .ghs-full-photo { border-radius: var(--rad-md); overflow: hidden; }
.ghs-main-col .ghs-full-photo img { max-height: 480px; }
.ghs-main-col .ghs-full-photo--historic img { max-height: 380px; }

/* Alumnae grid inside main col — 4 across */
.ghs-main-col .ghs-alumnae-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  background: var(--neutral);
  border-radius: var(--rad-md);
  padding: 1.5rem;
}

/* Sidebar — sticky so it stays visible while scrolling the long left col */
.ghs-sidebar-col {
  position: sticky;
  top: calc(68px + 2rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Responsive — stack at 860px */
@media (max-width: 860px) {
  .ghs-layout {
    grid-template-columns: 1fr;
  }
  .ghs-sidebar-col {
    position: static;
    order: 2; /* sidebar always below main content on mobile */
  }
  .ghs-main-col {
    order: 1;
  }
  .ghs-main-col .ghs-alumnae-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .ghs-main-col .ghs-alumnae-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
    padding: 1rem;
  }
}

/* ── LSN community photo grid — taller aspect ratio than alumni squares ── */
.lsn-photo-grid { background: var(--black); border-radius: var(--rad-md); padding: 0; gap: .35rem; }
.lsn-photo-grid .ghs-alumna { gap: 0; }
.lsn-photo-tall img { aspect-ratio: 3/4 !important; object-fit: cover; object-position: center top; }
.lsn-photo-tall { border-radius: 0; }
.lsn-photo-grid .ghs-alumna-info {
  padding: .5rem .6rem .6rem;
  background: var(--black);
}
.lsn-photo-grid .ghs-alumna-info p {
  font-size: .72rem;
  color: rgba(255,255,255,.5);
  margin: 0;
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════
   GET INVOLVED — STYLED CHECKBOX GROUP
   Dark signup-box context: white-on-dark palette
   ═══════════════════════════════════════════════════════════════ */
.gi-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .85rem 1.1rem;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 2px;
}

.gi-checkbox-legend {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-bottom: .6rem;
  padding: 0;
}

/* Each row */
.gi-checkbox {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem .25rem;
  cursor: pointer;
  border-radius: 3px;
  transition: background .15s;
  /* prevent text selection on rapid clicks */
  user-select: none;
  -webkit-user-select: none;
}
.gi-checkbox:hover { background: rgba(255,255,255,.06); }

/* Hide the native checkbox completely */
.gi-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Custom checkbox box */
.gi-checkbox-box {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 1.5px solid rgba(255,255,255,.3);
  border-radius: 3px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s, background .15s;
}

/* Checkmark SVG — hidden until checked */
.gi-checkbox-box::after {
  content: '';
  display: block;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: rotate(-45deg) translateY(-1px);
  opacity: 0;
  transition: opacity .15s;
}

/* Checked state */
.gi-checkbox input[type="checkbox"]:checked + .gi-checkbox-box {
  background: var(--green);
  border-color: var(--green);
}
.gi-checkbox input[type="checkbox"]:checked + .gi-checkbox-box::after {
  opacity: 1;
}

/* Keyboard focus ring */
.gi-checkbox input[type="checkbox"]:focus-visible + .gi-checkbox-box {
  outline: 3px solid var(--green-tint);
  outline-offset: 2px;
}

/* Label text */
.gi-checkbox-label {
  font-size: .88rem;
  color: rgba(255,255,255,.75);
  line-height: 1.45;
}
.gi-checkbox input[type="checkbox"]:checked ~ .gi-checkbox-label {
  color: var(--white);
}

/* ═══════════════════════════════════════════════════════════════
   PRESS PAGE — THUMBNAILS, DATES & OLDER PRESS
   ═══════════════════════════════════════════════════════════════ */

/* ── Thumbnail card variant ─────────────────────────────────── */
.press-card--thumb {
  padding: 0;           /* remove default padding; body below image handles it */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.press-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--neutral);
  overflow: hidden;
  flex-shrink: 0;
}
.press-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .45s var(--ease);
}
.press-card--thumb:hover .press-thumb img { transform: scale(1.04); }

/* Placeholder shown when image file is missing */
.press-thumb-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .4rem;
  background: var(--neutral);
  font-size: .82rem;
  color: var(--muted);
  pointer-events: none;
}
.press-thumb-placeholder span { font-size: .7rem; color: var(--muted); opacity: .7; }
/* Hide placeholder once real image loads */
.press-thumb img[src]:not([src=""]) + .press-thumb-placeholder { display: none; }

/* Body below the thumbnail */
.press-card-body {
  padding: 1.5rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* ── Article date ────────────────────────────────────────────── */
/* Sits on the same line as the outlet name */
.press-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .55rem;
}
/* Override default bottom margin on .press-outlet when inside .press-meta */
.press-meta .press-outlet { margin-bottom: 0; }

.press-date {
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--muted);
  white-space: nowrap;
}

/* For non-thumb cards: add press-meta top spacing */
.press-card:not(.press-card--thumb) .press-meta { margin-bottom: .65rem; }

/* ── Older press list ────────────────────────────────────────── */
.older-press-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

.older-press-item {
  display: grid;
  grid-template-columns: 10rem 1fr 7rem 1.5rem;
  align-items: center;
  gap: 1.25rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  transition: background var(--t-fast);
  border-radius: var(--radius);
}
.older-press-item:hover { background: var(--green-pale); padding-left: .75rem; padding-right: .75rem; margin-left: -.75rem; margin-right: -.75rem; }

.opi-outlet {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green);
  flex-shrink: 0;
}
.opi-title {
  font-family: var(--font-display);
  font-size: .95rem;
  color: var(--black);
  line-height: 1.35;
}
/* Paragraph inside opi-title — plain body text, not display/bold */
.opi-title p {
  font-family: var(--font-body);
  font-size: .84rem;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.7;
  margin-top: .5rem;
}
.opi-date {
  font-size: .72rem;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}
.opi-arrow {
  font-size: .9rem;
  color: var(--green);
  text-align: right;
  transition: transform var(--t-fast);
}
.older-press-item:hover .opi-arrow { transform: translateX(4px); }

@media (max-width: 700px) {
  .older-press-item {
    grid-template-columns: 1fr 4rem;
    grid-template-rows: auto auto;
    gap: .35rem 1rem;
  }
  .opi-outlet { grid-column: 1; grid-row: 1; }
  .opi-title  { grid-column: 1; grid-row: 2; }
  .opi-date   { grid-column: 2; grid-row: 1; text-align: right; }
  .opi-arrow  { grid-column: 2; grid-row: 2; align-self: end; }
}