/* ============================================================
   Egyptian Theatre Preservation Association — Organization site
   ------------------------------------------------------------
   Sibling to the Egyptian Theatre events site: SAME brand palette
   and Copperplate/Cinzel type for institutional continuity, but a
   distinct editorial voice — long-form prose, a cartouche timeline,
   an impact band, and membership tiers. Teal is promoted from the
   events site's "featured-only" accent to a structural role here.

   Brand palette per Identity Guidelines:
     Black #000000 · Red PMS 485 #BF2A1D · Bright Gold PMS 130 #E3A82B
     Dark Gold PMS 139 #B68A28 · Pale Gold PMS 7403 #E8CE81
     Teal PMS 3285 #5C9E96 · Gray #8B8B8C
   ============================================================ */

:root{
  /* Marquee-lettering glow for the header nav (same values as the events site). */
  --chrome-lit:#ffe7a3;
  --chrome-glow-hover:0 0 8px rgba(227,168,43,.55);
  --chrome-glow-lit:0 0 3px rgba(255,226,150,.95),0 0 10px rgba(227,168,43,.85),0 0 22px rgba(227,168,43,.5);
  --black:#0d0a06;
  --ink:#181209;
  --panel:#1f180d;
  --red:#bf2a1d;
  --red-deep:#8e1f15;
  --red-bright:#e8402f;   /* AA-legible red for small text on near-black */
  --gold:#e3a82b;
  --gold-dark:#b68a28;
  --gold-pale:#e8ce81;
  --teal:#5c9e96;
  --teal-bright:#7cc3ba;  /* AA-legible teal for small text/labels */
  --gray:#8b8b8c;
  --gray-light:#aaa49a;   /* muted-but-legible: captions, footer, sub-intros (8:1 on black) */
  --cream:#f6edd8;
  --line:#33270f;         /* hairline borders, dividers, dotted rules */
  --display:"Copperplate","Copperplate Gothic Bold","Cinzel",serif;
  --body:"Helvetica Neue",Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--black);
  color:var(--cream);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-pale)}

/* ---------- Marquee header ----------
   The header spans the whole window (like the events site), with gutters,
   logo and nav type that grow with the viewport and level off on very wide
   screens. Page content below keeps its 1120px reading column. */
:root{
  --chrome-gutter:clamp(20px,calc(6.4vw - 50px),80px); /* 20px until ~1100px wide */
  --chrome-logo-h:clamp(64px,calc(46px + 1.4vw),86px);
  --chrome-nav-size:clamp(.76rem,calc(.56rem + .3vw),.94rem);
  /* Anchor jumps clear the full (un-scrolled) sticky header: logo,
     lights, padding and borders (~43px), plus a little breathing room. */
  --chrome-anchor-offset:calc(var(--chrome-logo-h) + 60px);
}
@media (max-width:720px){:root{--chrome-anchor-offset:88px}} /* compact phone header is ~73px */
[id]{scroll-margin-top:var(--chrome-anchor-offset)}
.marquee{
  --hdr-pad-y:14px;   /* .marquee-inner's vertical padding; dropdown panels hang from it */
  position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg,#151009,#0d0a06);
  border-bottom:3px solid var(--gold-dark);
  box-shadow:0 4px 24px rgba(0,0,0,.6);
}
.marquee-lights{
  position:relative;overflow:hidden;
  height:10px;
  background:#241a0c;
  border-bottom:2px solid var(--gold-dark);
}
/* The chasing bulbs: a strip one bulb-spacing (26px) wider than the bar,
   stepped sideways with a transform, so the chase runs on the compositor
   instead of repainting the bar every step. */
.marquee-lights::before{
  content:"";position:absolute;top:0;bottom:0;left:-26px;right:0;
  background:radial-gradient(circle 3px at 10px 5px, var(--gold-pale) 0 3px, transparent 3.5px) 0 0/26px 10px repeat-x;
  animation:chase 1.1s steps(2) infinite;
  will-change:transform;
}
@keyframes chase{from{transform:translateX(0)}to{transform:translateX(26px)}}
@media (prefers-reduced-motion:reduce){
  .marquee-lights::before{animation:none}
  html{scroll-behavior:auto}
}
.marquee-inner{
  max-width:none;margin:0;padding:var(--hdr-pad-y) var(--chrome-gutter);
  display:flex;align-items:center;gap:clamp(22px,2vw,48px);flex-wrap:wrap;
}
/* Wordmark carries a small org lockup line so the nonprofit reads distinct
   from the venue brand it shares a logo with. */
.wordmark{display:inline-flex;align-items:center;gap:clamp(14px,1vw,20px);text-decoration:none}
.wordmark img{height:var(--chrome-logo-h);width:auto;aspect-ratio:750/214;display:block}
.wordmark .lockup{display:block;line-height:1.25}
.wordmark .lockup .l1,.wordmark .lockup .l2{display:block;white-space:nowrap}
.wordmark .lockup .l1{
  font-family:var(--display);color:var(--gold);font-size:clamp(.82rem,calc(.62rem + .28vw),1rem);
  letter-spacing:.2em;text-transform:uppercase;
}
.wordmark .lockup .l2{
  font-family:var(--display);color:var(--teal-bright);font-size:clamp(.6rem,calc(.45rem + .2vw),.74rem);
  letter-spacing:.28em;text-transform:uppercase;
}
/* Keep the header to one row: the lockup drops out below 1360px, the inline
   social icons (injected by site-chrome.js) drop out below 1000px (they're in
   the footer too), and between the phone breakpoint and ~880px the logo and
   nav tighten up. */
@media (max-width:1360px){.wordmark .lockup{display:none}}
@media (max-width:999px){.marquee-inner .marquee-social{display:none}}
@media (min-width:721px) and (max-width:880px){
  :root{--chrome-logo-h:52px;--chrome-nav-size:.72rem}
}

/* align-self:stretch lets each .nav-group fill the row's height, so its
   dropdown can hang flush from the header's gold bottom rule. */
.marquee nav{margin-left:auto;align-self:stretch;display:flex;align-items:stretch;gap:6px;flex-wrap:wrap}
.marquee nav>a{align-self:center}
.marquee nav a,.marquee .nav-trigger{
  font-family:var(--display);
  font-size:var(--chrome-nav-size);letter-spacing:.16em;text-transform:uppercase;
  color:var(--cream);text-decoration:none;
  padding:9px clamp(12px,.8vw,18px);border:1px solid transparent;border-radius:3px;
}
/* No highlight boxes: like the events site, links glow like marquee lettering. Hover warms them;
   the current page (and the dropdown group holding it, below) is fully lit. */
.marquee nav a:hover,.marquee nav a:focus-visible{color:var(--gold);text-shadow:var(--chrome-glow-hover)}
.marquee nav a[aria-current="page"]{color:var(--chrome-lit);text-shadow:var(--chrome-glow-lit)}

/* ---------- Grouped nav: ETPA / History / Support dropdowns ----------
   Markup: .nav-group > button.nav-trigger[aria-expanded][aria-controls] +
   div.nav-panel of real <a> links. js/site-chrome.js adds .is-enhanced to
   the nav and drives .nav-group.open (click/tap, hover with a close delay,
   Esc, outside click, focus leaving). Without JS, :hover / :focus-within
   reveal the panel, so every link stays reachable by mouse and keyboard. */
.nav-group{position:relative;display:flex;align-items:center}
.marquee .nav-trigger{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;cursor:pointer;line-height:inherit;
}
.nav-trigger::after{
  content:"";width:6px;height:6px;margin-top:-3px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform .16s ease;opacity:.85;
}
@media (min-width:721px) and (max-width:880px){
  .marquee-inner{gap:14px}
  .marquee nav{gap:2px}
  .marquee nav>a,.marquee .nav-trigger{padding:8px;letter-spacing:.1em}
  .marquee .nav-trigger{gap:6px}
}
.marquee .nav-trigger:hover,.marquee .nav-trigger:focus-visible,
.marquee .nav-trigger[aria-expanded="true"]{color:var(--gold);text-shadow:var(--chrome-glow-hover)}
.nav-trigger[aria-expanded="true"]::after{transform:translateY(3px) rotate(225deg)}
/* The group holding the current page is fully lit (marquee glow), open or not. */
.nav-group.is-current>.nav-trigger,
.nav-group:has(a[aria-current="page"])>.nav-trigger{color:var(--chrome-lit);text-shadow:var(--chrome-glow-lit)}

.nav-panel{
  position:absolute;left:0;z-index:60;
  /* Group bottom + the row's bottom padding = the header's gold rule; the
     panel's own gold top border lands right on it. */
  top:calc(100% + var(--hdr-pad-y));
  min-width:max(100%,250px);padding:8px 0 10px;
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,#151009,#0d0a06);
  border:1px solid #3a2d14;border-top:3px solid var(--gold-dark);border-radius:0 0 6px 6px;
  box-shadow:0 18px 36px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.4);
  visibility:hidden;opacity:0;transform:translateY(-4px);
  transition:opacity .14s ease,transform .14s ease,visibility 0s linear .14s;
}
/* Invisible bridge over the gap between trigger and panel, so a pointer
   travelling down into the panel never leaves the group. */
.nav-panel::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:calc(var(--hdr-pad-y) + 6px)}
.nav-group.open>.nav-panel,
.marquee nav:not(.is-enhanced) .nav-group:hover>.nav-panel,
.marquee nav:not(.is-enhanced) .nav-group:focus-within>.nav-panel{
  visibility:visible;opacity:1;transform:none;transition-delay:0s;
}
.marquee .nav-panel a{
  display:block;white-space:nowrap;
  padding:10px 22px 10px 19px;border:0;border-left:3px solid transparent;border-radius:0;
  font-size:calc(var(--chrome-nav-size) * .95);letter-spacing:.12em;color:var(--cream);
}
.marquee .nav-panel a:hover,.marquee .nav-panel a:focus-visible{
  color:var(--gold);background:rgba(227,168,43,.08);border-left-color:var(--gold-dark);
}
.marquee .nav-panel a:focus-visible{outline-offset:-3px}
.marquee .nav-panel a[aria-current="page"]{color:var(--gold);border-left-color:var(--gold)}
/* The last group (Support) opens leftward so it never runs off the right
   edge; overflow-x:clip on the header is the safety net (hidden panels are
   still boxes, and would otherwise widen the page on narrow screens). */
.nav-group:last-of-type>.nav-panel{left:auto;right:0}
.marquee{overflow-x:clip}
/* No-JS phones: the nav wraps under the logo, so panels just drop below
   their own trigger instead of hanging from the header's bottom rule. */
@media (max-width:720px){
  .marquee nav:not(.is-enhanced) .nav-panel{top:100%}
}
@media (prefers-reduced-motion:reduce){
  .nav-panel,.nav-trigger::after{transition:none}
}
/* Persistent Donate CTA in the header — the org site's primary conversion. */
.marquee nav a.nav-cta{
  background:linear-gradient(180deg,var(--gold),var(--gold-dark));
  color:#241703;border-color:var(--gold-dark);font-weight:700;letter-spacing:.14em;
}
.marquee nav a.nav-cta:hover,.marquee nav a.nav-cta:focus-visible{filter:brightness(1.08);color:#241703}
.marquee nav a.nav-out{color:var(--teal-bright)}
.marquee nav a.nav-out:hover,.marquee nav a.nav-out:focus-visible{color:var(--teal-bright);text-shadow:0 0 8px rgba(124,195,186,.55)}
.marquee nav a.nav-cta,.marquee nav a.nav-cta:hover,.marquee nav a.nav-cta:focus-visible{text-shadow:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------- Skip link (WCAG 2.4.1) ---------- */
.skip-link{
  position:absolute;left:12px;top:-56px;z-index:100;
  background:var(--gold);color:#241703;
  font-family:var(--display);letter-spacing:.12em;text-transform:uppercase;
  font-size:.8rem;font-weight:700;padding:11px 18px;border-radius:0 0 4px 4px;
  text-decoration:none;transition:top .16s ease;
}
.skip-link:focus{top:0;outline:2px solid #241703;outline-offset:-4px}
[id="maincontent"]:focus{outline:none}

.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(1200px 500px at 50% -80px, rgba(227,168,43,.16), transparent 65%),
    linear-gradient(180deg,#171008,#0d0a06 70%);
  border-bottom:1px solid #2b2110;
}
.hero-photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 32%;z-index:0;
}
.hero.has-photo::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg, rgba(13,10,6,.82) 0%, rgba(13,10,6,.58) 40%, rgba(13,10,6,.82) 76%, #0d0a06 100%),
    radial-gradient(1200px 500px at 50% -80px, rgba(227,168,43,.14), rgba(13,10,6,0) 65%);
}
.hero-inner{position:relative;z-index:2;max-width:960px;margin:0 auto;padding:90px 20px 68px;text-align:center}
.hero.page .hero-inner{padding:60px 20px 44px}
.hero.page.has-photo{min-height:360px;display:flex;align-items:center}
.hero.page.has-photo .hero-inner{padding-top:56px;padding-bottom:48px;width:100%}
/* Compact variant for utility pages (Contact, Join, Donate, Governance): no
   photo, tighter spacing, smaller title. The full photographic hero is
   reserved for Home, History, and Tour. */
.hero.page.compact .hero-inner{padding:34px 20px 30px}
.hero.page.compact h1{font-size:clamp(1.7rem,4vw,2.6rem);margin:.3em 0 .25em}
.hero.page.compact p.lede{font-size:1.02rem;margin-bottom:0;color:var(--cream)}
.hero.page.compact .eyebrow{font-size:.72rem}
.eyebrow{
  font-family:var(--display);font-size:.8rem;letter-spacing:.3em;
  color:var(--teal-bright);text-transform:uppercase;
  text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 14px rgba(0,0,0,.7);
}
.hero h1{
  font-family:var(--display);
  font-size:clamp(2.1rem,5.6vw,4rem);
  letter-spacing:.08em;color:var(--gold);
  margin:.4em 0 .32em;text-transform:uppercase;line-height:1.06;
  text-shadow:0 2px 0 #5b420f,0 6px 22px rgba(0,0,0,.7);
}
.hero p.lede{max-width:660px;margin:0 auto 30px;color:var(--gold-pale);font-size:1.12rem;line-height:1.6;text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 12px rgba(0,0,0,.65)}
.hero .actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

.btn{
  display:inline-block;font-family:var(--display);
  letter-spacing:.16em;text-transform:uppercase;font-size:.85rem;
  padding:13px 26px;border-radius:3px;text-decoration:none;cursor:pointer;
  border:1px solid var(--gold-dark);
}
.btn-gold{background:linear-gradient(180deg,var(--gold),var(--gold-dark));color:#241703;font-weight:700}
.btn-gold:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent;color:var(--gold)}
.btn-ghost:hover{background:rgba(227,168,43,.1)}
.btn-teal{background:transparent;color:var(--teal-bright);border-color:var(--teal)}
.btn-teal:hover{background:rgba(92,158,150,.14)}
.btn-lg{font-size:.95rem;padding:16px 34px}
.zeffy-cta{margin-top:22px}

/* ---------- Section scaffolding ---------- */
.section{max-width:1120px;margin:0 auto;padding:64px 20px}
.section.narrow{max-width:820px}
.section.tight{padding-top:24px;padding-bottom:0}
.section-head{display:flex;align-items:baseline;gap:18px;margin-bottom:10px;flex-wrap:wrap}
.section-head h1,.section-head h2{
  font-family:var(--display);color:var(--gold);
  letter-spacing:.14em;text-transform:uppercase;font-size:1.6rem;
}
.section-head .rule{flex:1;height:2px;background:linear-gradient(90deg,var(--teal),transparent);min-width:60px}
.section-sub{color:var(--gray-light);margin-bottom:34px;max-width:70ch;font-size:1rem}
.section .eyebrow{display:block;margin-bottom:6px;color:var(--teal-bright);text-shadow:none}

/* ---------- Editorial prose (history / restoration narrative) ---------- */
.prose{max-width:720px;margin:0 auto}
.prose p{margin:0 0 1.25em;color:#e6dcc2;font-size:1.06rem;line-height:1.78}
.prose h2{font-family:var(--display);color:var(--gold);letter-spacing:.04em;font-size:1.35rem;margin:1.8em 0 .6em}
.prose h3{font-family:var(--display);color:var(--gold-pale);letter-spacing:.08em;font-size:1.05rem;margin:1.4em 0 .4em}
.prose a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.prose blockquote{
  margin:1.6em 0;padding:6px 0 6px 22px;border-left:3px solid var(--teal);
  color:var(--cream);font-style:italic;font-size:1.14rem;
}
.prose .lede{font-size:1.22rem;color:var(--cream);line-height:1.7}
/* Drop cap on the opening paragraph — an editorial flourish the box-office
   site never uses, marking this as the organization's narrative voice. */
.prose .lede::first-letter{
  font-family:var(--display);float:left;color:var(--gold);
  font-size:3.6rem;line-height:.82;padding:6px 12px 0 0;font-weight:700;
}
.prose figure{margin:1.8em 0}
.prose figure img{border:1px solid var(--line);border-radius:4px}
.prose figcaption{margin-top:8px;font-size:.88rem;color:var(--gray-light);letter-spacing:.02em}

/* ---------- Impact band (institutional stats) ---------- */
.impact-band{background:linear-gradient(180deg,#15100a,#0d0a06);border-top:1px solid #2b2110;border-bottom:1px solid #2b2110}
.hero + .impact-band{border-top:0}  /* the hero's own bottom hairline already marks the seam */
.impact-inner{
  max-width:1120px;margin:0 auto;padding:38px 20px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;
}
.stat{text-align:center;padding:12px 14px;position:relative}
.stat + .stat::before{content:"";position:absolute;left:0;top:16%;height:68%;width:1px;background:var(--line)}
.stat-num{font-family:var(--display);color:var(--gold);font-size:2.3rem;line-height:1;letter-spacing:.02em}
.stat-num .u{color:var(--teal-bright);font-size:1.3rem}
.stat-label{display:block;margin-top:8px;font-family:var(--display);color:var(--gray-light);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase}

/* ---------- Cartouche timeline (history — the signature element) ----------
   A vertical teal spine strung with gold "cartouches": the Egyptian device
   that encloses a royal name in hieroglyphics, here enclosing pivotal years.
   Grounds a genuine chronological sequence in the theatre's Revival identity. */
.timeline{position:relative;max-width:760px;margin:8px auto 0;padding-left:96px}
.timeline::before{content:"";position:absolute;left:47px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--teal),var(--gold-dark));opacity:.7}
.tl-entry{position:relative;padding:0 0 42px}
.tl-entry:last-child{padding-bottom:8px}
.tl-year{
  position:absolute;left:-96px;top:-2px;width:82px;height:40px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);color:var(--gold);font-size:1rem;letter-spacing:.04em;
  background:linear-gradient(180deg,#1c150a,#120d07);
  border:2px solid var(--gold-dark);border-radius:22px/50%;
  box-shadow:0 2px 10px rgba(0,0,0,.5);
}
/* Cartouche end-bar accents (the small perpendicular strokes on a real cartouche). */
.tl-year::before,.tl-year::after{content:"";position:absolute;top:50%;transform:translateY(-50%);
  width:3px;height:16px;background:var(--gold-dark);border-radius:1px}
.tl-year::before{left:-6px}
.tl-year::after{right:-6px}
/* The dot where the entry meets the spine. */
.tl-entry::before{content:"";position:absolute;left:-53px;top:14px;width:12px;height:12px;
  border-radius:50%;background:var(--gold);border:2px solid #0d0a06;box-shadow:0 0 0 3px rgba(92,158,150,.5)}
.tl-entry h3{font-family:var(--display);color:var(--cream);letter-spacing:.03em;font-size:1.18rem;margin:0 0 6px}
.tl-entry p{color:#d8cba9;font-size:.98rem;line-height:1.62;margin:0}
.tl-entry.pivotal .tl-year{border-color:var(--teal);color:var(--teal-bright)}

/* Each entry is a native <details>/<summary> — click the year or title to reveal
   more. No JS needed: <details> handles the toggle, keyboard support and
   screen-reader "expanded/collapsed" state announcement on its own. */
.tl-entry summary{display:block;cursor:pointer;list-style:none}
.tl-entry summary::-webkit-details-marker{display:none}
.tl-entry summary:focus-visible{outline:2px solid var(--gold);outline-offset:6px;border-radius:2px}
.tl-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;margin-left:10px;border:1px solid var(--gold-dark);border-radius:50%;
  color:var(--gold);font-size:.8rem;line-height:1;vertical-align:middle;
  transition:transform .2s ease,background .15s ease;
}
.tl-entry summary:hover .tl-toggle,.tl-entry summary:focus-visible .tl-toggle{background:rgba(227,168,43,.16)}
.tl-entry[open] .tl-toggle{transform:rotate(45deg)}
.tl-entry.pivotal .tl-toggle{border-color:var(--teal);color:var(--teal-bright)}
.tl-entry.pivotal summary:hover .tl-toggle,.tl-entry.pivotal summary:focus-visible .tl-toggle{background:rgba(92,158,150,.18)}
.tl-more{margin-top:14px;padding-top:14px;border-top:1px dotted var(--line)}
.tl-more p{color:#d8cba9;font-size:.98rem;line-height:1.65}
.tl-more p:not(:last-child){margin-bottom:10px}
.tl-more a{color:var(--gold-pale);text-decoration:underline;text-underline-offset:2px}
/* Direct-child figures only, so the .gallery inside a reveal keeps its own grid sizing. */
.tl-more > figure{margin:16px 0 0}
.tl-more > figure img{width:100%;border:1px solid var(--line);border-radius:5px;box-shadow:0 6px 18px rgba(0,0,0,.45)}
.tl-more > figure figcaption{margin-top:8px;font-size:.88rem;color:var(--gray-light);letter-spacing:.02em;line-height:1.45}
.tl-more .gallery{margin-top:16px}

@media (max-width:560px){
  .timeline{padding-left:64px}
  .timeline::before{left:29px}
  .tl-year{left:-64px;width:56px;height:34px;font-size:.82rem}
  .tl-entry::before{left:-37px}
}

/* ---------- Feature strip (image + text, e.g. Wurlitzer teaser) ---------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;max-width:1120px;margin:0 auto;padding:56px 20px}
.feature.flip .feature-media{order:2}
.feature-media img{width:100%;border:1px solid var(--line);border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.feature-media.placeholder{aspect-ratio:4/3;background:linear-gradient(135deg,#1c150a,#120d07);border:1px solid var(--line);border-radius:6px;display:flex;align-items:center;justify-content:center;color:#4d3b17;font-family:var(--display);letter-spacing:.2em;text-transform:uppercase;font-size:.8rem}
.feature-body h2{font-family:var(--display);color:var(--gold);letter-spacing:.1em;text-transform:uppercase;font-size:1.5rem;margin-bottom:14px}
.feature-body p{color:#d8cba9;margin-bottom:16px}
@media (max-width:760px){
  .feature{grid-template-columns:1fr;gap:22px;padding:44px 20px}
  .feature.flip .feature-media{order:0}
}

/* ---------- Photo gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:10px 0}
.gallery figure{margin:0}
.gallery img{width:100%;height:210px;object-fit:cover;border:1px solid var(--line);border-radius:5px;box-shadow:0 6px 18px rgba(0,0,0,.45)}
.gallery figcaption{margin-top:8px;font-size:.88rem;color:var(--gray-light);letter-spacing:.02em;line-height:1.45}
/* Full-bleed-ish single image inside a .section (outside .prose) */
.section-figure{margin:0 auto;max-width:900px}
.section-figure img{width:100%;border:1px solid var(--line);border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.section-figure figcaption{margin-top:10px;text-align:center;font-size:.88rem;color:var(--gray-light);letter-spacing:.02em}

/* ---------- Panels / cards ---------- */
.panel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:26px}
.panel h2,.panel h3{font-family:var(--display);color:var(--gold);letter-spacing:.04em;font-size:1.12rem;margin-bottom:12px}
.panel p,.panel li{font-size:.95rem;color:#d8cba9}
.panel ul{list-style:none;margin:0}
.panel li{padding:5px 0;border-bottom:1px dotted var(--line)}
.panel li:last-child{border-bottom:none}
.panel .k{color:var(--gray);display:inline-block;min-width:92px;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
/* "Ways to give" cards get a footer CTA pinned to the bottom. */
.give-card{display:flex;flex-direction:column}
.give-card p{flex:1}
.give-card .btn{margin-top:16px;align-self:flex-start}

/* ---------- Membership tiers ---------- */
.tier-note-band{text-align:center;color:var(--gray);font-size:.9rem;margin:0 auto 26px;max-width:60ch}
.tier-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.tier-card{
  position:relative;background:var(--panel);border:1px solid var(--line);
  border-top:3px solid var(--gold-dark);border-radius:5px;padding:24px 22px;
  display:flex;flex-direction:column;
}
.tier-card.featured{border-color:var(--teal);border-top-color:var(--teal);box-shadow:0 0 0 1px var(--teal) inset}
.tier-badge{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--teal);color:#0d2624;font-family:var(--display);font-weight:700;
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;padding:4px 12px;border-radius:20px;white-space:nowrap;
}
.tier-name{font-family:var(--display);color:var(--gold);letter-spacing:.1em;text-transform:uppercase;font-size:1.1rem;margin-bottom:4px}
.tier-price{font-family:var(--display);color:var(--cream);font-size:1.9rem;line-height:1.1}
.tier-price .per{color:var(--gray);font-family:var(--body);font-size:.8rem;letter-spacing:.05em}
.tier-tagline{color:var(--gold-pale);font-size:.86rem;margin:8px 0 0}
.tier-card .btn{margin-top:18px}
/* Clickable tier cards (each links to that level's Zeffy checkout). */
a.tier-card{text-decoration:none;color:inherit;cursor:pointer;
  transition:transform .12s ease,box-shadow .15s ease,border-color .15s ease}
a.tier-card:hover,a.tier-card:focus-visible{transform:translateY(-3px);
  border-color:var(--gold);box-shadow:0 12px 28px rgba(0,0,0,.5)}
a.tier-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
a.tier-card.featured:hover,a.tier-card.featured:focus-visible{border-color:var(--teal);
  box-shadow:0 0 0 1px var(--teal) inset,0 12px 28px rgba(0,0,0,.5)}
.tier-join{margin-top:auto;padding-top:16px;font-family:var(--display);font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
a.tier-card:hover .tier-join,a.tier-card:focus-visible .tier-join{color:var(--gold-pale)}
.tier-card.featured .tier-join{color:var(--teal-bright)}

/* ---------- People / leadership ---------- */
.people-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px}
.person-card{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:20px;text-align:center}
.person-photo{width:120px;height:120px;border-radius:50%;object-fit:cover;margin:0 auto 14px;border:2px solid var(--gold-dark);background:#120d07}
.person-name{font-family:var(--display);color:var(--cream);letter-spacing:.05em;font-size:1.05rem}
.person-role{display:block;margin:4px 0 10px;font-family:var(--display);color:var(--teal-bright);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.person-bio{font-size:.88rem;color:#cdbf9f;line-height:1.55}
/* Cards with a full bio are clickable anywhere (js/site-chrome.js gives them
   role="button", tabindex, and a generated aria-label). .person-bio-trigger is
   just the visual "Read full bio" cue inside them, not its own control. */
.person-card[data-bio-trigger]{
  cursor:pointer;transition:transform .12s ease,box-shadow .15s ease,border-color .15s ease;
}
.person-card[data-bio-trigger]:hover,.person-card[data-bio-trigger]:focus-visible{
  transform:translateY(-3px);border-color:var(--gold);box-shadow:0 12px 28px rgba(0,0,0,.5);outline:none;
}
.person-card[data-bio-trigger]:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.person-bio-trigger{
  display:block;margin-top:10px;
  font-family:var(--display);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);
}
.person-card[data-bio-trigger]:hover .person-bio-trigger,
.person-card[data-bio-trigger]:focus-visible .person-bio-trigger{color:var(--gold-pale)}
/* Preview cards show photo/name/role only; the .person-bio paragraph stays in
   the DOM (it's the modal's fallback bio source) but is hidden on the card
   itself — full text only appears once you open the modal. */
.person-card[data-bio-trigger] .person-bio{display:none}

/* ---------- Callout / give CTA band ---------- */
.callout{
  max-width:1120px;margin:0 auto;padding:0 20px;
}
.callout-inner{
  background:
    radial-gradient(700px 240px at 30% -40px, rgba(92,158,150,.14), transparent 70%),
    linear-gradient(180deg,#1c150a,#120d07);
  border:1px solid var(--gold-dark);border-radius:8px;padding:40px 34px;text-align:center;
}
.callout-inner h2{font-family:var(--display);color:var(--gold);letter-spacing:.1em;text-transform:uppercase;font-size:1.6rem;margin-bottom:12px}
.callout-inner p{color:var(--gold-pale);max-width:60ch;margin:0 auto 22px}
.callout-inner .actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- Forms (newsletter / contact) ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:640px}
.form .full{grid-column:1/-1}
.form label{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-light);margin-bottom:6px;font-family:var(--display)}
.form input,.form textarea{
  width:100%;background:#0f0c07;border:1px solid #3a2d14;color:var(--cream);
  border-radius:3px;padding:11px 12px;font-family:var(--body);font-size:.95rem;
}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--gold)}
@media (max-width:640px){.form{grid-template-columns:1fr}}
.form .req{color:var(--red)}
.form-note{grid-column:1/-1;font-size:.82rem;color:var(--gray-light);line-height:1.55;margin:0}
.form-note a{color:var(--gold)}
.mc-hidden{position:absolute;left:-5000px}
/* "Powered by Mailchimp" credit on the newsletter form (dark panel → reversed logo). */
.mc-badge{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.mc-badge-credit{display:inline-flex;align-items:center;gap:7px}
.mc-badge-label{font-family:var(--display);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-light)}
.mc-badge img{height:26px;width:auto;filter:invert(1);opacity:.85}

/* ---------- FAQ accordion (native <details>/<summary>) ---------- */
.faq-cats{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0}
.faq-cats a{font-family:var(--display);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);text-decoration:none;border:1px solid var(--gold-dark);border-radius:3px;padding:8px 12px}
.faq-cats a:hover,.faq-cats a:focus-visible{background:rgba(227,168,43,.12);color:var(--gold-pale);outline:none}
.faq-list{max-width:840px}
.faq-item{border-bottom:1px solid var(--line)}
/* NB: summary stays display:block — flex/grid on <summary> breaks native
   details collapse in Chromium. The toggle is positioned instead. */
.faq-item summary{display:block;position:relative;cursor:pointer;list-style:none;
  padding:16px 46px 16px 2px;font-family:var(--display);color:var(--cream);font-size:1.04rem;letter-spacing:.02em}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--gold)}
.faq-item summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.faq-q{display:block}
.faq-toggle{position:absolute;right:2px;top:14px;width:24px;height:24px;border:1px solid var(--gold-dark);
  border-radius:50%;color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:1.15rem;
  line-height:1;transition:transform .18s ease,background .18s ease}
.faq-item[open] .faq-toggle{transform:rotate(45deg)}
.faq-item summary:hover .faq-toggle,.faq-item summary:focus-visible .faq-toggle{background:rgba(227,168,43,.16)}
.faq-answer{padding:0 44px 20px 2px;color:#d8cba9;line-height:1.62}
.faq-answer p{margin:0 0 10px}
.faq-answer p:last-child{margin-bottom:0}
.faq-answer a{color:var(--gold-pale)}

/* ---------- Zeffy embed frame ---------- */
.embed-wrap{margin-top:18px}
.embed-status{font-family:var(--display);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gray);padding:14px 0;text-align:center;border:1px dashed var(--line);border-radius:5px;margin-bottom:10px}
.embed-status.is-error{color:var(--red-bright);border-color:var(--red-deep)}
.embed-open-elsewhere{margin-top:12px;font-size:.88rem;color:var(--gray-light);text-align:center}
.embed-open-elsewhere a{color:var(--gold)}

/* ---------- Map / video embeds (16:9 responsive frames) ---------- */
.map-embed,.video-embed{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:6px}
.map-embed{padding-top:56.25%}
/* aspect-ratio, not the padding-top trick: this box is narrower than its
   parent (max-width), and %-padding would size against the parent's width. */
.video-embed{aspect-ratio:16/9;max-width:900px;margin:0 auto;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.map-embed iframe,.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-caption{max-width:900px;margin:12px auto 0;text-align:center;font-size:.88rem;color:var(--gray-light)}
.video-caption a{color:var(--gold-pale)}

/* ---------- Definition rows (contact / hours) ---------- */
.info-list{list-style:none;margin:0}
.info-list li{display:flex;gap:14px;padding:10px 0;border-bottom:1px dotted var(--line);font-size:.95rem;color:#d8cba9}
.info-list li:last-child{border-bottom:none}
.info-list .k{color:var(--teal-bright);font-family:var(--display);letter-spacing:.1em;text-transform:uppercase;font-size:.74rem;min-width:90px;flex-shrink:0;padding-top:2px}

/* ---------- Legal pages (accessibility / privacy / terms) ----------
   Shared long-form styles for the three policy pages; previously duplicated
   in each page's inline <style>. accessibility.html keeps a one-line
   .legal-contact margin-top override for its own spacing. */
.legal-body{max-width:75ch}
.legal-body h2{font-family:var(--display);color:var(--gold);letter-spacing:.03em;
  font-size:1.15rem;margin:30px 0 8px}
.legal-body p{margin-bottom:12px;color:#e6dcc2}
.legal-body ul{margin:0 0 12px 1.1em}
.legal-body li{margin-bottom:7px;color:#e6dcc2}
.legal-body a{color:var(--gold-pale)}
.legal-contact{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--gold-dark);
  border-radius:4px;padding:16px 20px}
.legal-meta{color:var(--gray-light);font-size:.88rem;margin-bottom:26px}

/* ---------- Social links ---------- */
.social-links{display:flex;gap:12px;margin-top:14px}
.social-links a{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--gold-dark);color:var(--gold);
  transition:background .15s ease, color .15s ease;
}
.social-links a:hover,.social-links a:focus-visible{background:var(--gold);color:#241703}
.social-links svg{width:18px;height:18px;fill:currentColor}

/* ---------- Footer ---------- */
footer{border-top:3px solid var(--gold-dark);background:#0a0805;margin-top:40px}
.footer-inner{max-width:1120px;margin:0 auto;padding:44px 20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px}
footer .footer-logo{height:56px;width:auto;margin-bottom:14px}
footer h4{font-family:var(--display);color:var(--gold);letter-spacing:.14em;font-size:.8rem;text-transform:uppercase;margin-bottom:12px}
footer p,footer a{font-size:.92rem;color:var(--gray-light)}
footer a{display:block;text-decoration:none;padding:3px 0}
footer a:hover{color:var(--gold-pale)}
.footer-cta{color:var(--teal-bright)!important}
.footer-cta:hover{color:var(--teal-bright)!important;text-decoration:underline}
/* Was #5c5340 / #7a6f56 (2.6:1 and 4.0:1 on this background, failing AA);
   the new values measure 8:1 and 8.5:1. */
.footer-legal{border-top:1px solid #221a0c;text-align:center;padding:16px;font-size:.8rem;color:var(--gray-light)}
.footer-legal a{display:inline;color:#b3a889;text-decoration:none}
.footer-legal a:hover{color:var(--gold-pale);text-decoration:underline}

/* Supporters page: the old site's thank-you, shown as the page's opening line. */
.supporters-intro{margin:0;text-align:center;font-size:1.12rem;line-height:1.6;color:var(--cream)}

/* ---------- Award photos (heritage-award.html) ----------
   One landscape photo across the top, the three portrait shots in a row below. */
.award-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.award-photo{margin:0}
.award-photo.wide{grid-column:1 / -1}
.award-photo img{width:100%;height:auto;border:1px solid var(--line);border-radius:4px}
.award-photo figcaption{margin-top:8px;font-size:.88rem;color:var(--gray-light);line-height:1.45}
@media (max-width:640px){.award-photos{grid-template-columns:1fr}}

/* ---------- Volunteer inquiry form (volunteer.html) ----------
   Same markup as the events site's home-page form (its css/site.css .vform rules plus the
   page-local rules in its index.html), restyled with this site's tokens. */
.vform{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vform .full{grid-column:1/-1}
.vform label{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-light);margin-bottom:6px;font-family:var(--display)}
.vform input,.vform select,.vform textarea{
  width:100%;background:var(--black);border:1px solid var(--gold-dark);color:var(--cream);
  border-radius:3px;padding:11px 12px;font-family:var(--body);font-size:.95rem;
}
.vform input:focus,.vform select:focus,.vform textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(227,168,43,.25)}
/* Invalid fields: red border plus a text message below, never colour alone. */
.vform input[aria-invalid="true"],.vform input[aria-invalid="true"]:focus{border-color:var(--red-bright)}
.field-error{display:block;margin-top:6px;color:#ff8a7a;font-size:.84rem;line-height:1.35}
.vform fieldset{border:1px solid var(--line);border-radius:3px;padding:14px 16px;grid-column:1/-1;margin:0}
.vform legend{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-light);font-family:var(--display);padding:0 8px}
.vform .interests{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
.vform .interests label{
  display:flex;align-items:center;gap:9px;font-family:var(--body);text-transform:none;
  letter-spacing:0;font-size:.95rem;color:var(--cream);margin:0;cursor:pointer;
}
.vform .interests input{width:auto;accent-color:var(--gold)}
.vform-note{font-size:.86rem;color:var(--gray-light)}
.vform[hidden],.vform-success[hidden],.vform-alert[hidden],.vform-alert-actions[hidden]{display:none}
/* Bot trap: off-screen rather than display:none, which some bots skip. */
.vform-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.vform[aria-busy="true"] button[type="submit"]{cursor:progress}
.vform-turnstile{max-width:100%}
.vform-turnstile.is-shown{margin-bottom:14px}
.vform-alert{margin-top:14px;border:1px solid var(--red);border-left-width:4px;background:rgba(191,42,29,.12);
  color:var(--cream);border-radius:4px;padding:12px 16px;font-size:.92rem;line-height:1.45}
.vform-alert a{color:var(--gold-pale)}
.vform-alert-actions{margin-top:10px}
.vform-alert-actions .btn{padding:10px 18px;font-size:.78rem}
.vform-success{background:rgba(92,158,150,.14);border:1px solid var(--teal);color:var(--cream);
  border-radius:4px;padding:16px 20px;font-size:.98rem}
.vform-success:focus{outline:2px solid var(--gold);outline-offset:2px}
.vform-elsewhere{margin-top:18px;color:var(--gray-light);font-size:.92rem}
@media (max-width:640px){.vform{grid-template-columns:1fr}}

/* ---------- Dedicate a Seat or Tile (dedicate.html) ---------- */
.dedicate-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start}
.dedicate-rules{font-family:var(--display);letter-spacing:.08em;color:var(--gold-pale);line-height:1.7}
.tier-list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.tier-list li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:12px 16px;border:1px solid var(--line);border-radius:4px;background:rgba(255,255,255,.02)}
.tier-list-name{font-family:var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--cream)}
.tier-list-price{font-family:var(--display);color:var(--gold);font-weight:700}
.tier-list-note{grid-column:1 / -1;color:var(--gray-light);font-size:.92rem}
.tile-preview-wrap h3{margin-top:0}
/* The tile: Diablo Red, square, 4 centered caps lines with a margin all round. */
.tile-preview{aspect-ratio:1;max-width:300px;margin:0 auto 18px;padding:12%;border-radius:4px;
  background:radial-gradient(circle at 30% 25%,#a8302a,#7d1c18 70%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.5);
  display:flex;align-items:center;justify-content:center}
.tile-preview-face{display:flex;flex-direction:column;align-items:center;gap:.25em;width:100%;
  font-family:var(--display);font-weight:700;font-size:clamp(.95rem,3.2vw,1.25rem);letter-spacing:.08em;
  color:#f3e6c8;text-align:center;white-space:pre;text-shadow:0 1px 0 rgba(0,0,0,.4)}
.tile-preview-hint{opacity:.45}
.tile-lines{display:grid;gap:10px}
.tile-line{display:grid;grid-template-columns:4.5em minmax(0,1fr) auto auto;align-items:center;gap:10px}
.tile-line label{font-family:var(--display);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-light)}
.tile-copy{font-family:var(--display);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;width:6.8em;min-height:38px;
  padding:8px 10px;border:1px solid var(--teal);border-radius:3px;background:transparent;color:var(--teal-bright);cursor:pointer}
.tile-copy:hover,.tile-copy:focus-visible{background:rgba(42,157,143,.15)}
.tile-lines input{font:inherit;font-family:var(--body);font-size:1rem;letter-spacing:.08em;text-transform:uppercase;
  padding:9px 10px;border:1px solid var(--gold-dark);border-radius:3px;background:#0d0a06;color:var(--cream);min-width:0}
.tile-count{font-variant-numeric:tabular-nums;min-width:3.2em;text-align:right;font-family:var(--display);font-size:.78rem;color:var(--gray-light)}
.dedicate-embed{margin-top:36px}
.dedicate-embed-note{text-align:center;font-family:var(--display);letter-spacing:.08em;color:var(--gold-pale);margin:0 0 12px}
@media (max-width:760px){.dedicate-grid{grid-template-columns:1fr}}
/* Phones: label on its own row so the text box is wide enough to show all 12 characters. */
@media (max-width:480px){
  .tile-line{grid-template-columns:minmax(0,1fr) auto auto;row-gap:4px}
  .tile-line label{grid-column:1 / -1}
}

/* ---------- 100-Year Supporters page (supporters.html) ---------- */
/* Logo-card grid: one link per card. Logos sit on a light cream tile so dark-on-transparent
   marks read on the dark page; .on-dark is for official reversed (white) logos. */
.sponsor-grid{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.sponsor-grid.major{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.sponsor-grid > li{display:flex}
.sponsor-card{flex:1;display:flex;flex-direction:column;gap:10px;padding:10px 10px 12px;
  background:var(--panel);border:1px solid var(--line);border-radius:5px;
  color:var(--cream);text-decoration:none;
  transition:transform .12s ease,border-color .15s ease,box-shadow .15s ease}
a.sponsor-card:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:0 10px 24px rgba(0,0,0,.45)}
a.sponsor-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-color:var(--gold)}
.sponsor-logo{display:flex;align-items:center;justify-content:center;height:88px;padding:12px;
  background:var(--cream);border-radius:3px}
.sponsor-logo.on-dark{background:#120d07;border:1px solid var(--line)}
.sponsor-logo picture{display:contents}
.sponsor-logo img{display:block;width:auto;height:auto;max-width:100%;max-height:60px;object-fit:contain}
.sponsor-grid.major .sponsor-logo{height:112px;padding:14px}
.sponsor-grid.major .sponsor-logo img{max-height:80px}
/* SVGs scale cleanly, so fill the logo box (object-fit keeps the aspect ratio); rasters stay at
   or below their pixel size to avoid blur. */
.sponsor-logo img[src$=".svg"]{height:60px}
.sponsor-grid.major .sponsor-logo img[src$=".svg"]{height:80px}
.sponsor-wordmark{font-family:var(--display);color:#3b2a10;font-size:.98rem;letter-spacing:.05em;
  line-height:1.25;text-align:center}
.sponsor-name{font-size:.86rem;line-height:1.35;color:#d8cba9;text-align:center}
a.sponsor-card:hover .sponsor-name,a.sponsor-card:focus-visible .sponsor-name{color:var(--gold-pale)}
.sponsor-subhead{font-family:var(--display);color:var(--gold);letter-spacing:.04em;font-size:1.12rem;margin:0 0 14px}
.sponsor-subhead:not(:first-child){margin-top:34px}
@media (max-width:560px){
  .sponsor-grid,.sponsor-grid.major{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .sponsor-logo,.sponsor-grid.major .sponsor-logo{height:80px;padding:10px}
  .sponsor-logo img,.sponsor-grid.major .sponsor-logo img{max-height:56px}
  .sponsor-logo img[src$=".svg"],.sponsor-grid.major .sponsor-logo img[src$=".svg"]{height:56px}
  .sponsor-name{font-size:.8rem}
  .sponsor-wordmark{font-size:.86rem}
}
/* Name-only tiles (no logo available) grow with long names instead of clipping them. */
.sponsor-grid .sponsor-logo:has(> .sponsor-wordmark),
.sponsor-grid.major .sponsor-logo:has(> .sponsor-wordmark){height:auto;min-height:88px}
.sponsor-grid.major .sponsor-logo:has(> .sponsor-wordmark){min-height:112px}
@media (max-width:560px){.sponsor-grid .sponsor-logo:has(> .sponsor-wordmark),
  .sponsor-grid.major .sponsor-logo:has(> .sponsor-wordmark){min-height:80px}}
.supporter-note{margin-top:14px;font-size:.86rem;color:var(--gray-light)}
.supporter-note a{color:var(--gold-pale)}

/* ---------- Newsletter page (newsletter.html): current issue + archive ---------- */
.nl-current{display:grid;grid-template-columns:minmax(0,260px) 1fr;gap:34px;align-items:start}
.nl-cover{display:block;border:1px solid var(--line);border-radius:4px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.nl-cover img{width:100%;height:auto}
.nl-cover:hover,.nl-cover:focus-visible{border-color:var(--gold)}
.nl-current h3{font-family:var(--display);color:var(--gold);letter-spacing:.06em;font-size:1.3rem;margin-bottom:10px}
.nl-current p{color:#d8cba9;margin-bottom:14px}
.nl-current ul{margin:0 0 20px 1.1em;color:#d8cba9}
.nl-current li{margin-bottom:6px}
.nl-archive{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px;margin-top:22px}
.nl-year li{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.nl-meta{color:var(--gray-light);font-size:.78rem;white-space:nowrap}
@media (max-width:640px){.nl-current{grid-template-columns:1fr}.nl-cover{max-width:240px}}

/* ---------- Heritage Excellence Award article (heritage-award.html) ---------- */
.article-dateline{font-family:var(--display);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-bright)}
.prose .article-dateline{color:var(--teal-bright);font-size:.78rem;margin-bottom:22px}
.prose figure.article-portrait{float:right;width:198px;margin:6px 0 18px 26px}
.prose figure.article-portrait img{width:198px;height:auto}
.prose .article-sources{margin-top:.6em;padding-top:16px;border-top:1px dotted var(--line);font-size:.9rem;color:var(--gray-light);line-height:1.6}
.prose .article-sources a{color:var(--gold-pale)}
/* Reproduced press release: the ETPA's own recipient is marked with a gold rule;
   our added editor's note is set apart from the quoted text. */
.prose .article-highlight{border-left:3px solid var(--gold);padding:4px 0 4px 16px;background:rgba(212,160,23,.06)}
.prose .article-note{margin-top:1.6em;padding-top:16px;border-top:1px dotted var(--line)}
@media (max-width:560px){.prose figure.article-portrait{width:120px;margin:4px 0 12px 16px}.prose figure.article-portrait img{width:120px}.prose figure.article-portrait figcaption{font-size:.78rem}}

/* ---------- Responsive ---------- */
/* Header/nav mobile layout (compact row + hamburger dropdown) lives in the
   etpa-chrome-style block injected by js/site-chrome.js, so it loads after
   this stylesheet and its selectors don't have to fight for specificity. */
@media (max-width:720px){
  .hero-inner{padding:60px 18px 44px}
}