/* ============================================================
   Safadi Center — NEW WEBSITE TEMPLATE
   Concept: CANVAS — a neutral space brought to life
            through creativity, colour and expression.

   This stylesheet is PALETTE-AGNOSTIC. Every colour is a token
   defined by the page in a `.theme-*` block (see site-01.html /
   site-02.html). Recolouring the site = swapping that one block.

   Structure mirrors the existing live site (website/index.html)
   so the two can be compared section for section.
   ============================================================ */

/* ---------- tokens that never change between palettes ---------- */

:root {
  --font-display: "Jost", "Century Gothic", "Segoe UI", sans-serif;
  --font-text: "Mulish", "Segoe UI", sans-serif;
  --font-ar: "Noto Kufi Arabic", sans-serif;

  --container: 1180px;
  /* navbar height — the hero subtracts it to fill exactly one screen */
  --nav-h: 76px;
  --radius: 4px;
  --radius-md: 10px;
  --radius-lg: 22px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.55s;
}

/* ---------- reset & base ---------- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-text);
  overflow-x: hidden;          /* nothing may push the page sideways */
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

[lang="ar"] { font-family: var(--font-ar); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 28px; }

::selection { background: var(--primary); color: var(--on-primary); }

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

/* ---------- template ribbon (identifies this as a mockup) ---------- */

.tpl-ribbon {
  background: var(--ink);
  color: var(--paper);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
}
.tpl-ribbon .container {
  display: flex; align-items: center; gap: 14px;
  padding-top: 9px; padding-bottom: 9px; flex-wrap: wrap;
}
.tpl-ribbon b { color: var(--highlight); }
.tpl-ribbon .tpl-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex: none;
}
.tpl-ribbon a {
  margin-left: auto; border-bottom: 1px solid currentColor;
  padding-bottom: 1px; opacity: 0.75;
}
.tpl-ribbon a:hover { opacity: 1; }

/* ---------- typography helpers ---------- */

.kicker {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--primary);
  display: flex; align-items: center; gap: 13px;
  margin-bottom: 16px;
}
.kicker::before {
  content: ""; width: 34px; height: 3px; flex: none;
  background: var(--accent); border-radius: 2px;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 4.2vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: 16px;
}
.section-title em { font-style: normal; color: var(--primary); }

.section-sub { color: var(--muted); max-width: 620px; }

.section { padding: clamp(64px, 8vw, 108px) 0; }
.section-tint { background: var(--surface); }

.section-head { max-width: 720px; margin-bottom: 48px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px;
  border: 2px solid transparent;
  border-radius: var(--btn-radius, 999px);
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.3s var(--ease-out), background 0.3s, color 0.3s, box-shadow 0.3s;
}
.btn-solid { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.btn-solid:hover { background: var(--primary-deep); border-color: var(--primary-deep); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.btn-ghost { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-ghost:hover { background: var(--primary); color: var(--on-primary); transform: translateY(-2px); }
.btn-accent { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn-accent:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); filter: brightness(0.94); }
.btn-lg { padding: 17px 36px; }
.btn-sm { padding: 10px 18px; font-size: 10.5px; }

/* ---------- navbar ---------- */

.navbar {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  /* soft drop shadow so the bar reads as sitting above the page. The live
     site only styles this for a .is-scrolled state that never fires, so it
     is unconditional here — the bar is sticky and overlaps content anyway. */
  box-shadow: 0 10px 34px -18px rgba(46, 47, 51, 0.35);
}
.navbar-inner { display: flex; align-items: center; gap: 30px; height: var(--nav-h); }

.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { height: 56px; width: auto; flex: none; transition: transform 0.6s var(--ease-out); }
.brand:hover .brand-mark { transform: rotate(-8deg) scale(1.06); }

.nav-links { display: flex; gap: 24px; margin-left: auto; }
.nav-link {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); padding: 6px 0;
  position: relative; transition: color 0.25s;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; border-radius: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.nav-link:hover, .nav-link.is-active { color: var(--ink); }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }

.nav-cta { padding: 12px 20px; font-size: 10.5px; }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; transition: 0.3s; }

/* ---------- hero ---------- */

.hero { position: relative; overflow: hidden; background: var(--hero-bg); }
.hero-inner {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: 56px; align-items: center;
  padding: clamp(28px, 3.5vw, 48px) 28px clamp(72px, 8vw, 110px);
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 6.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  display: flex; flex-direction: column;
}
.hero-title .accent { color: var(--primary); }
.hero-title .mark-word {
  position: relative; display: inline-block; width: fit-content;
}
.hero-title .mark-word::after {
  content: ""; position: absolute; left: -2px; right: -2px; bottom: 0.1em;
  height: 0.26em; background: var(--highlight); opacity: 0.42;
  z-index: -1; border-radius: 3px;
}
.hero-lede { margin-top: 22px; font-size: 17.5px; color: var(--muted); max-width: 520px; }
.hero-actions { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
/* text-align:start + dir="rtl" sets it to the RIGHT edge of the copy column,
   which is what the live site does — it is the Arabic line's own reading
   start, so it aligns to its own text direction rather than the page's. */
.hero-ar {
  margin-top: 26px; font-size: 19px; color: var(--primary);
  font-family: var(--font-ar);
  text-align: start;
}

/* ---------- hero variant: photo + texture cover ----------
   Used by design 01. Mirrors the current live site: a blurred photo of
   the building faded in from the right, with a tiled texture over it.
   Scoped to .hero-cover so design 02 keeps its colour-block canvas. */

/* One photo treatment, two hosts: the full-screen home hero and the
   short subpage band. Sharing the rule is what keeps every page on the
   same picture — a second copy would drift the first time one is tuned. */
.hero-cover .hero-photo,
.page-hero .hero-photo {
  position: absolute;
  background-image: var(--hero-photo, url("hero-building.jpg"));
  background-size: cover;
  background-position: var(--hero-photo-position, center 38%);
  filter: blur(var(--hero-photo-blur, 3px)) saturate(var(--hero-photo-saturate, 0.82));
  opacity: var(--hero-photo-opacity, 0.5);
  /* fades out towards the copy so the text never sits on busy pixels */
  -webkit-mask-image: var(--hero-photo-mask, radial-gradient(ellipse 82% 78% at 76% 42%, #000 0%, transparent 72%));
          mask-image: var(--hero-photo-mask, radial-gradient(ellipse 82% 78% at 76% 42%, #000 0%, transparent 72%));
  pointer-events: none;
}
.hero-cover .hero-photo { inset: -24px; }

.hero-cover .hero-texture {
  position: absolute; inset: 0;
  background-image: var(--hero-texture);
  background-size: var(--hero-texture-size, 96px);
  opacity: var(--hero-texture-opacity, 0.06);
  -webkit-mask-image: radial-gradient(ellipse 92% 90% at 74% 42%, #000 0%, transparent 70%);
          mask-image: radial-gradient(ellipse 92% 90% at 74% 42%, #000 0%, transparent 70%);
  pointer-events: none;
}

/* The marquee band must sit on the bottom edge of the FIRST SCREEN, whatever
   the window height. Matching the live site's fixed paddings can't do that:
   its hero is ~866px tall, so on any viewport shorter than that — including
   1536x864, one of the commonest scaled-laptop sizes — the band falls below
   the fold. Measured, not assumed. So the height is structural instead: the
   hero fills the viewport below the sticky navbar and the band, as the last
   child, is pinned to the bottom by construction rather than by arithmetic.
   svh (not vh) so a mobile URL bar doesn't push it off-screen. */
.hero-cover {
  display: flex; flex-direction: column;
  /* +1px: --nav-h is .navbar-inner's height, the navbar adds a 1px border-bottom */
  min-height: calc(100svh - var(--nav-h) - 1px);
}

/* the logo composition is gone, so the copy gets the full width */
.hero-cover .hero-inner {
  display: flex; flex-direction: column; justify-content: center;
  /* the base .hero-inner sets align-items:center for its GRID layout; in a
     flex column that becomes horizontal centering and collapses the copy
     column to its widest child. It has to be reset here. */
  align-items: flex-start;
  /* .container carries margin:0 auto; auto cross-axis margins beat `stretch`
     in a flex column and shrink this to fit-content, so the width is explicit */
  width: 100%;
  flex: 1 1 auto; position: relative; z-index: 1;
  padding-top: 56px;
  padding-bottom: 60px;
}
/* 665px, the live site's measured hero-copy width — the title breaks
   "Where / Culture / Comes to Life" on it the way the live site does */
.hero-cover .hero-copy { width: 100%; max-width: 665px; }

/* Size and spacing matched to the live site's hero (website/styles.css).
   The title is capped by viewport HEIGHT as well as width: at the live site's
   full 84px the hero needs an 869px viewport (measured), so on anything
   shorter the type has to give — otherwise it is the band that gives. Scaling
   on vh keeps that a smooth taper rather than a visible jump at a breakpoint. */
.hero-cover .hero-title {
  font-size: clamp(34px, min(6.6vw, 8.6vh), 84px);
  line-height: 1.04;
}
/* Heavier, darker type so the lede and the Arabic line survive sitting on
   busy parts of the painted illustration (window mullions, tower entrance)
   without needing a backdrop behind them — a bold weight has thicker
   strokes and --ink is close to black, so both hold up on a light stripe
   or a dark one. */
.hero-cover .hero-lede {
  margin-top: 26px; font-size: 18px; font-weight: 700; color: var(--ink);
}
.hero-cover .hero-actions { margin-top: 38px; }
.hero-cover .hero-ar { margin-top: 34px; opacity: 1; font-weight: 600; color: var(--ink); }

/* both overlays are absolute inside .hero, so the strip has to be lifted */
.hero-cover .hero-strip { position: relative; z-index: 2; flex: none; }

/* Short window: tighten the gaps too, so the taper above doesn't have to
   carry the whole difference on its own. */
@media (max-height: 880px) {
  .hero-cover .hero-inner { padding-top: 34px; padding-bottom: 34px; }
  .hero-cover .hero-lede { margin-top: 18px; font-size: 16.5px; }
  .hero-cover .hero-actions { margin-top: 26px; }
  .hero-cover .hero-ar { margin-top: 22px; }
}
@media (max-height: 780px) {
  .hero-cover .hero-inner { padding-top: 24px; padding-bottom: 24px; }
  .hero-cover .hero-lede { margin-top: 14px; font-size: 16px; }
  .hero-cover .hero-actions { margin-top: 20px; }
  .hero-cover .hero-ar { margin-top: 16px; }
}

/* the CANVAS composition: colour blocks + the logo mark */
.hero-canvas {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 10px;
  padding: 18px;
  background: var(--canvas-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.hero-canvas .blk { border-radius: var(--blk-radius, 4px); animation: blkIn 0.9s var(--ease-out) both; }
.hero-canvas .blk:nth-child(1) { grid-area: 1 / 1 / 3 / 3; background: var(--brand-1); animation-delay: 0.05s; }
.hero-canvas .blk:nth-child(2) { grid-area: 1 / 5 / 2 / 7; background: var(--brand-2); animation-delay: 0.13s; border-radius: var(--blk-radius) var(--blk-radius) 90px var(--blk-radius); }
.hero-canvas .blk:nth-child(3) { grid-area: 3 / 1 / 5 / 2; background: var(--brand-3); animation-delay: 0.21s; }
.hero-canvas .blk:nth-child(4) { grid-area: 5 / 2 / 7 / 4; background: var(--brand-4); animation-delay: 0.29s; border-radius: 999px var(--blk-radius) var(--blk-radius) var(--blk-radius); }
.hero-canvas .blk:nth-child(5) { grid-area: 4 / 6 / 7 / 7; background: var(--brand-5); animation-delay: 0.37s; }
.hero-canvas .blk:nth-child(6) { grid-area: 2 / 5 / 4 / 6; background: var(--brand-1); opacity: 0.45; animation-delay: 0.45s; border-radius: 999px; }

.hero-canvas .canvas-mark {
  grid-area: 2 / 2 / 6 / 6;
  place-self: center;
  width: 78%;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,0.14));
  animation: markIn 1s var(--ease-out) 0.3s both;
}
@keyframes blkIn { from { opacity: 0; transform: scale(0.72); } to { opacity: 1; transform: none; } }
@keyframes markIn { from { opacity: 0; transform: translateY(18px) scale(0.9); } to { opacity: 1; transform: none; } }

.hero-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}
.hero-strip-track {
  display: flex; align-items: center; gap: 22px;
  padding: 15px 0; white-space: nowrap;
  animation: strip 34s linear infinite;
  width: max-content;
}
.hero-strip-track span {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--muted);
}
.hero-strip-track i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
@keyframes strip { to { transform: translateX(-50%); } }

/* ---------- about ---------- */

.about-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: center; }
.about-media { position: relative; }
/* offset outline behind the panel, from the live site's .about-media::before —
   sized off .about-media's own box, which matches .about-swatch exactly
   since it's the only in-flow child (.about-caption is absolutely positioned) */
.about-media::before {
  content: ""; position: absolute;
  inset: 22px -22px -22px 22px;
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-lg);
  z-index: -1;
}
/* a calm, single-tone panel — six competing colour blocks plus the
   mark on top read as clutter (flagged after seeing it rendered).
   The mark is the whole point, so it now gets a plain surface and
   room to be looked at, instead of fighting a collage for attention. */
.about-swatch {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  display: grid; place-items: center;
  box-shadow: var(--shadow-soft);
}
.about-swatch-mark {
  width: 46%; height: auto;
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.16));
}

.about-caption {
  position: absolute; left: 18px; bottom: -22px;
  background: var(--ink); color: var(--paper);
  padding: 12px 20px; border-radius: var(--radius-md);
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  box-shadow: var(--shadow-soft);
}
.about-caption [lang="ar"] { text-transform: none; letter-spacing: 0; }

.about-copy p { color: var(--muted); max-width: 560px; }
.about-goals { list-style: none; margin: 28px 0 36px; display: grid; gap: 12px; }
.about-goals li { display: flex; gap: 13px; align-items: flex-start; color: var(--ink); font-size: 15.5px; }
.about-goals li::before {
  content: ""; width: 11px; height: 11px; flex: none; margin-top: 8px;
  border-radius: 3px; background: var(--accent);
}
.about-goals li:nth-child(2)::before { background: var(--brand-1); }
.about-goals li:nth-child(3)::before { background: var(--brand-3); }
.about-goals li:nth-child(4)::before { background: var(--brand-4); }

.about-stats {
  display: flex; gap: 44px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: 28px;
}
.stat { display: flex; flex-direction: column; }
.stat-num {
  font-family: var(--font-display); font-weight: 600;
  font-size: 38px; line-height: 1; color: var(--primary);
}
.stat-label { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }

/* ---------- programs ---------- */

.program-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.program-card {
  position: relative; overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 34px 22px 28px;
  text-align: center;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s;
}
.program-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 6px;
  background: var(--pc); transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s var(--ease-out);
}
.program-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-soft); }
.program-card:hover::before { transform: scaleX(1); }
/* the diamond tile — lifted from the live site's .program-diamond:
   always solid --pc, the icon counter-rotated back upright inside it.
   These icons are solid fill="currentColor" artwork (not strokes), so
   they read correctly only against a full-strength tile, which is why
   this is solid from the start rather than tinted-until-hover. */
.program-chip {
  width: 72px; height: 72px; border-radius: 16px;
  background: var(--pc); color: #fff;
  transform: rotate(45deg);
  display: grid; place-items: center; margin: 0 auto 22px;
  transition: transform 0.4s var(--ease-out);
}
.program-card:hover .program-chip { transform: rotate(45deg) scale(1.08); }
.program-chip svg { width: 38px; height: 38px; transform: rotate(-45deg); }
.program-name { font-family: var(--font-display); font-size: 20px; font-weight: 500; letter-spacing: 0.03em; }
.program-tag { font-size: 12.5px; color: var(--muted); margin-top: 5px; }

/* ---------- events + calendar ---------- */

.events-layout { display: grid; grid-template-columns: 340px 1fr; gap: 40px; align-items: start; }

.calendar-card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 22px;
  box-shadow: var(--shadow-soft);
}
.calendar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cal-title { font-family: var(--font-display); font-size: 19px; font-weight: 500; letter-spacing: 0.05em; }
.cal-nav {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line); background: none; cursor: pointer;
  color: var(--ink); transition: 0.25s;
}
.cal-nav:hover { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-align: center; padding-bottom: 6px; }
.cal-day {
  aspect-ratio: 1; display: grid; place-items: center; position: relative;
  font-size: 13px; border-radius: 9px; border: 1px solid transparent;
  transition: 0.2s;
}
.cal-day.is-out { color: color-mix(in srgb, var(--muted) 45%, transparent); }
.cal-day.has-events { cursor: pointer; font-weight: 800; }
.cal-day.has-events:hover { border-color: var(--primary); }
.cal-day.is-selected { background: var(--primary); color: var(--on-primary); }
.cal-day .cal-dot { position: absolute; bottom: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.cal-day.is-selected .cal-dot { background: var(--on-primary); }
.calendar-hint { font-size: 12px; color: var(--muted); margin-top: 14px; line-height: 1.5; }

.event-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); cursor: pointer; transition: 0.25s;
}
.filter-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--fc); }
.filter-chip:hover { border-color: var(--fc); color: var(--ink); }
.filter-chip.is-active { background: var(--fc); border-color: var(--fc); color: #fff; }
.filter-chip.is-active i { background: #fff; }

.events-list { display: grid; gap: 14px; }
.event-card {
  display: grid; grid-template-columns: 74px 1fr auto;
  gap: 22px; align-items: center;
  background: var(--paper); border: 1px solid var(--line);
  border-left: 5px solid var(--ec);
  border-radius: var(--radius-md); padding: 20px 22px;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s;
}
.event-card:hover { transform: translateX(5px); box-shadow: var(--shadow-soft); }
.event-date { text-align: center; }
.event-date .ed-day { font-family: var(--font-display); font-size: 30px; font-weight: 600; line-height: 1; color: var(--ec); }
.event-date .ed-month { font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.event-info h3 { font-family: var(--font-display); font-size: 19px; font-weight: 500; margin-bottom: 5px; }
.event-blurb { font-size: 14px; color: var(--muted); max-width: 520px; }
.event-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 9px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.event-meta .event-cat { color: var(--ec); }
.events-empty { padding: 40px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius-md); }

/* ---------- quote band ---------- */

.quote-band { background: var(--ink); color: var(--paper); padding: clamp(56px, 7vw, 92px) 0; position: relative; overflow: hidden; }
.quote-band::before,
.quote-band::after {
  content: ""; position: absolute; border-radius: 50%;
}
.quote-band::before { width: 300px; height: 300px; background: var(--accent); opacity: 0.16; top: -110px; right: -60px; }
.quote-band::after { width: 200px; height: 200px; background: var(--highlight); opacity: 0.16; bottom: -90px; left: 6%; }
.quote-band blockquote { max-width: 760px; position: relative; z-index: 1; }
.quote-band p { font-family: var(--font-display); font-size: clamp(23px, 3.2vw, 38px); font-weight: 400; line-height: 1.3; }
.quote-band footer { margin-top: 18px; color: var(--highlight); font-size: 17px; }

/* ---------- news ---------- */

.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.news-card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s;
}
.news-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.news-thumb { aspect-ratio: 16 / 10; display: grid; place-items: center; background: var(--nc); }
.news-thumb svg { width: 46px; height: 46px; opacity: 0.9; color: #fff; }
.news-body { padding: 22px; }
.news-date { font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.news-card h3 { font-family: var(--font-display); font-size: 19px; font-weight: 500; margin: 9px 0 8px; line-height: 1.25; }
.news-card p { font-size: 14px; color: var(--muted); }

/* ---------- auditorium ---------- */

.aud-layout { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.stage-sketch {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 30px 26px 34px;
  box-shadow: var(--shadow-soft);
}
.stage-arc {
  height: 56px; border-radius: 999px 999px 6px 6px;
  background: linear-gradient(180deg, var(--primary), var(--primary-deep));
  display: grid; place-items: center;
  color: var(--on-primary); font-size: 11px; font-weight: 800;
  letter-spacing: 0.28em; text-transform: uppercase;
}
.seat-rows { display: grid; gap: 6px; margin-top: 24px; }
.seat-row { display: flex; gap: 5px; justify-content: center; }
.seat {
  width: 12px; height: 12px; border-radius: 3px;
  background: color-mix(in srgb, var(--primary) 22%, transparent);
}
.seat.is-vip { background: var(--accent); }
.seatmap-note { margin-top: 20px; font-size: 12.5px; color: var(--muted); display: flex; gap: 9px; align-items: center; }
.seatmap-note i { width: 10px; height: 10px; border-radius: 3px; background: var(--accent); flex: none; }

.aud-copy h3 { font-family: var(--font-display); font-size: clamp(24px, 3vw, 34px); font-weight: 500; margin-bottom: 14px; }
.aud-copy p { color: var(--muted); }
.aud-features { list-style: none; display: grid; gap: 11px; margin: 26px 0 32px; }
.aud-features li { display: flex; gap: 12px; align-items: center; font-size: 15px; }
.aud-features li::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--highlight); flex: none; }

/* ---------- contact ---------- */

.contact-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 40px; align-items: start; }
.contact-cards { display: grid; gap: 14px; }
.contact-card {
  background: var(--paper); border: 1px solid var(--line);
  border-left: 5px solid var(--cc, var(--primary));
  border-radius: var(--radius-md); padding: 22px 24px;
}
.contact-card h3 { font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 9px; }
.contact-card p { font-size: 15.5px; }
.contact-card a:hover { color: var(--primary); }
.contact-note { font-size: 13px; color: var(--muted); margin-top: 6px; }

.contact-form {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 32px;
  box-shadow: var(--shadow-soft);
}
.contact-form h3 { font-family: var(--font-display); font-size: 22px; font-weight: 500; margin-bottom: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: block; margin-bottom: 16px; }
.field span { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 13px 15px;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: 15px; transition: 0.22s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
  background: var(--paper);
}
.field textarea { resize: vertical; }
.form-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.form-status { font-size: 13px; color: var(--muted); }

/* ---------- footer ---------- */

.footer { background: var(--ink); color: color-mix(in srgb, var(--paper) 78%, transparent); padding-top: 68px; }
.footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 52px; }
.footer-lockup { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.footer-mark { width: 52px; height: 52px; flex: none; }
.footer-word { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: 0.17em; text-transform: uppercase; color: var(--paper); }
.footer-word small { display: block; font-size: 9.5px; letter-spacing: 0.28em; color: var(--highlight); margin-top: 4px; }
.footer-tag { font-size: 14px; max-width: 300px; }
.footer-col h4 { font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--highlight); margin-bottom: 16px; }
.footer-col a, .footer-col p { display: block; font-size: 14.5px; margin-bottom: 9px; transition: color 0.2s; }
.footer-col a:hover { color: var(--paper); }
.footer-social { display: flex; gap: 9px; margin-top: 12px; }
.footer-social a {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--paper) 26%, transparent);
  display: grid; place-items: center; font-size: 11px; font-weight: 700; margin: 0;
}
.footer-social a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.footer-base { border-top: 1px solid color-mix(in srgb, var(--paper) 14%, transparent); padding: 20px 0; font-size: 13px; }
.footer-base .container { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ==========================================================
   SUBPAGE HEADER
   The homepage hero fills a screen; a subpage must not — the
   content is the point, so this is a compact band that states
   where you are and gets out of the way.
   ========================================================== */

.page-hero {
  position: relative; overflow: hidden;
  background: var(--hero-bg);
  border-bottom: 1px solid var(--line);
  padding: clamp(46px, 6vw, 78px) 0 clamp(40px, 5vw, 62px);
  /* the painting needs vertical room to read as a building rather than
     as a strip of masonry — below this the band is all texture, no subject */
  min-height: 380px;
  display: flex; align-items: center;
}
/* Same picture as the home hero, same left-to-right fade, so the title
   sits on near-paper while the tower shows through on the right. The
   band is shorter, so it crops higher up the building. */
/* Eased a little against the home hero's 0.92. The band is a third of
   the height but carries the same block of copy, so the text crosses a
   far larger share of the picture — the same opacity that reads as
   "photo behind text" at full height reads as "text on a photo" here. */
.page-hero .hero-photo {
  inset: 0;
  /* falls back to the SAME picture as the home hero, but a site can hand
     the short, wide band its own crop instead of fighting one image's
     framing across two very different aspect ratios */
  background-image: var(--page-hero-photo, var(--hero-photo, url("hero-building.jpg")));
  background-position: var(--page-hero-photo-position, center 30%);
  opacity: var(--page-hero-photo-opacity, 0.72);
}
.page-hero::after {                       /* the same dot/tile texture the home hero uses */
  content: ""; position: absolute; inset: 0;
  background-image: var(--hero-texture);
  background-size: var(--hero-texture-size, 96px);
  opacity: calc(var(--hero-texture-opacity, 0.06) * 0.7);
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(34px, 5vw, 58px); line-height: 1.05;
  letter-spacing: -0.02em; margin-top: 14px;
}
/* Bold + full ink for the same reason the home hero's lede is: it now
   sits on the painted illustration, and muted grey at weight 400 stops
   being readable the moment it crosses a window or the tower. */
.page-hero-lede {
  margin-top: 18px; max-width: 620px;
  font-size: 17px; font-weight: 700; color: var(--ink);
}
/* max-width matches the lede on purpose: `text-align:start` under
   dir="rtl" means the RIGHT edge, and on the full 1180px container that
   parks the Arabic half a screen away from the copy it belongs to. */
.page-hero-ar {
  margin-top: 14px; max-width: 620px;
  font-family: var(--font-ar); color: var(--primary);
  font-size: 17px; text-align: start;
}

/* Fold-pinned variant, opt-in per page (currently just the Gallery hero).
   Same construction as .hero-cover above, and for the same reason: fixed
   paddings can't put the marquee on the bottom edge of the FIRST SCREEN on
   every laptop, because that edge moves with the viewport — a 14" panel at
   1536x864 and a 15.6" at 1920x1080 don't share one pixel height, and
   neither does the same laptop with the browser chrome shown or hidden.
   svh reads the actual viewport rather than a screen/device guess, so it
   tracks whatever the window turns out to be with no JS and no breakpoint
   table to maintain. About/Get Involved deliberately keep the compact
   380px band — this is additive, not a change to the base .page-hero. */
.page-hero.page-hero-fold {
  display: flex; flex-direction: column;
  align-items: stretch;                 /* base .page-hero centers a row; reset for column */
  min-height: calc(100svh - var(--nav-h) - 1px);
  padding-bottom: 0;                    /* the strip supplies the bottom edge now */
}
.page-hero-fold .container {
  flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center;
  padding-bottom: clamp(40px, 5vw, 62px);   /* moved off .page-hero's own padding */
}
.page-hero-fold .hero-strip { position: relative; z-index: 2; flex: none; }

/* breadcrumb back to the homepage — also on the painting, so it carries
   its own weight rather than the usual muted grey */
.crumb {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; color: var(--primary);
}
.crumb:hover { color: var(--accent); }

/* ---------- section head with an action on the right ---------- */

.section-head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 40px;
}
.section-head-row .section-head { margin-bottom: 0; }

/* ---------- events: show more ---------- */

/* The count is inside the button on purpose: "Show more" on its own
   hides whether one event is left or twenty. */
.events-more { display: flex; justify-content: center; padding-top: 6px; }
.em-count {
  margin-inline-start: 9px; padding: 2px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  font-size: 10px; letter-spacing: 0.1em;
}
.btn-ghost:hover .em-count { background: color-mix(in srgb, #fff 22%, transparent); }

/* ==========================================================
   GALLERY
   Frames are EMPTY on purpose — see data.js. A dense grid with
   three cell shapes so it reads as a gallery rather than a
   product listing; `dense` lets a tall cell backfill the gap a
   wide one leaves.
   ========================================================== */

.gallery-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 190px; grid-auto-flow: dense; gap: 18px;
}
.shot { display: flex; flex-direction: column; min-width: 0; }
.shot.is-wide { grid-column: span 2; }
.shot.is-tall { grid-row: span 2; }

/* The homepage TEASER drops the spans. Mixed shapes are what makes the
   full gallery read as a gallery, but on a fixed slice of 8 they leave a
   ragged bottom edge — which looks like a bug in a teaser rather than
   like composition. An even 4x2 block reads as deliberate. */
.gallery-grid.is-even .shot.is-wide { grid-column: span 1; }
.gallery-grid.is-even .shot.is-tall { grid-row: span 1; }

.shot-frame {
  flex: 1; position: relative; overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  /* a flat grey would look like a broken image; a faint diagonal weave
     reads as a deliberately empty plate waiting for a photograph */
  background:
    repeating-linear-gradient(45deg,
      color-mix(in srgb, var(--ink) 4%, transparent) 0 10px,
      transparent 10px 20px),
    var(--surface-2);
  display: grid; place-items: center;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s, border-color 0.3s;
}
.shot:hover .shot-frame { transform: translateY(-4px); box-shadow: var(--shadow-soft); border-color: var(--sc); }
.shot-ph { opacity: 0.24; color: var(--ink); }
.shot-ph svg { width: 40px; height: 40px; display: block; }

/* The photo sits ON TOP of the placeholder weave, which stays put as the
   backdrop — so a slow connection shows the empty-frame look until the
   image decodes, and a missing file degrades to it rather than to a
   broken-image icon. */
.shot-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease-out);
}
/* A gentle push-in on hover — the frame lifts, the picture inside it
   moves a little more, which is what reads as depth rather than as the
   whole tile sliding. overflow:hidden on .shot-frame does the cropping. */
.shot:hover .shot-img { transform: scale(1.05); }
/* the programme colour rides as a corner tab, not a fill — the frame has
   to stay neutral or it stops reading as an empty photo slot */
.shot-frame::after {
  content: ""; position: absolute; inset-inline-start: 0; top: 0;
  width: 4px; height: 44px; background: var(--sc);
  border-start-start-radius: var(--radius-md);
}
.shot-cap { padding: 10px 2px 0; display: flex; flex-direction: column; gap: 2px; }
.shot-title { font-family: var(--font-display); font-size: 15px; font-weight: 500; }
.shot-meta { font-size: 11.5px; color: var(--muted); }

/* ==========================================================
   TEAM
   Grouped by area, because a flat wall of faces says nothing
   about who does what.
   ========================================================== */

.team-group + .team-group { margin-top: 54px; }
.team-group-name {
  font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 22px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.team-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.person { min-width: 0; }
.person-photo {
  aspect-ratio: 1; width: 100%; max-width: 132px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--line);
  display: grid; place-items: center; margin-bottom: 16px;
  transition: transform 0.4s var(--ease-out), border-color 0.3s;
}
.person:hover .person-photo { transform: translateY(-4px); border-color: var(--primary); }
.person-photo span {
  font-family: var(--font-display); font-size: 26px; font-weight: 500;
  letter-spacing: 0.06em; color: var(--primary); opacity: 0.65;
}
.person-role { font-family: var(--font-display); font-size: 17px; font-weight: 500; line-height: 1.25; }
.person-name { font-size: 12px; letter-spacing: 0.06em; color: var(--muted); margin: 4px 0 9px; }
.person-blurb { font-size: 13.5px; color: var(--muted); line-height: 1.55; }

/* ---------- facilities ---------- */

.facility-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.facility {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 24px 22px;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s;
}
.facility:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); }
.facility h3 { font-family: var(--font-display); font-size: 18px; font-weight: 500; }
.facility-meta {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--highlight); margin: 6px 0 10px;
}
.facility p:last-child { font-size: 13.5px; color: var(--muted); line-height: 1.6; }

/* ---------- timeline ---------- */

.timeline { list-style: none; position: relative; padding-inline-start: 0; }
.timeline::before {                      /* the spine */
  content: ""; position: absolute; top: 8px; bottom: 8px;
  inset-inline-start: 86px; width: 2px;
  background: linear-gradient(180deg, var(--highlight), var(--line));
}
.milestone { position: relative; display: grid; grid-template-columns: 86px 1fr; gap: 34px; padding-bottom: 34px; }
.milestone:last-child { padding-bottom: 0; }
.ms-year {
  font-family: var(--font-display); font-size: 21px; font-weight: 600;
  color: var(--primary); text-align: end; padding-top: 1px;
}
.ms-body { position: relative; }
.ms-body::before {                       /* the node on the spine */
  content: ""; position: absolute; inset-inline-start: -41px; top: 8px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--accent);
}
.ms-body h3 { font-family: var(--font-display); font-size: 19px; font-weight: 500; margin-bottom: 6px; }
.ms-body p { font-size: 14.5px; color: var(--muted); line-height: 1.6; max-width: 560px; }

/* ==========================================================
   GET INVOLVED — volunteer roles, internship tracks, connect
   ========================================================== */

.role-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.role-card {
  position: relative; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 26px 24px 28px;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s;
}
.role-card::before {
  content: ""; position: absolute; top: 0; inset-inline: 0; height: 3px;
  background: var(--rc); transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s var(--ease-out);
}
.role-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.role-card:hover::before { transform: scaleX(1); }
.role-chip {
  width: 52px; height: 52px; border-radius: var(--chip-radius);
  display: grid; place-items: center; margin-bottom: 16px;
  background: color-mix(in srgb, var(--rc) 14%, transparent); color: var(--rc);
  transition: transform 0.4s var(--ease-out);
}
.role-chip svg { width: 30px; height: 30px; }
.role-card:hover .role-chip { transform: scale(1.07); }
.role-card h3 { font-family: var(--font-display); font-size: 19px; font-weight: 500; }
.role-commit {
  display: inline-block; margin: 8px 0 11px; padding: 3px 11px;
  border-radius: 999px; background: var(--surface);
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
}
.role-card > p:last-child { font-size: 14px; color: var(--muted); line-height: 1.6; }

/* internship tracks — a list, not cards: they're read in order and
   compared on term length, which a row makes easy and a grid doesn't */
.track-list { display: flex; flex-direction: column; gap: 14px; }
.track {
  background: var(--paper); border: 1px solid var(--line);
  border-inline-start: 3px solid var(--primary);
  border-radius: var(--radius-md); padding: 20px 24px;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s;
}
.track:hover { transform: translateX(5px); box-shadow: var(--shadow-soft); }
.track-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.track-head h3 { font-family: var(--font-display); font-size: 18px; font-weight: 500; }
.track-term {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); white-space: nowrap;
}
.track > p { font-size: 14px; color: var(--muted); margin-top: 7px; line-height: 1.6; }

.offer-list { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.offer-list li { position: relative; padding-inline-start: 30px; font-size: 15px; line-height: 1.55; }
.offer-list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 7px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--highlight); box-shadow: 0 0 0 4px color-mix(in srgb, var(--highlight) 22%, transparent);
}

/* ---------- connect ---------- */

.connect-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.connect-card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 28px 26px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s;
}
.connect-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.connect-card h3 { font-family: var(--font-display); font-size: 20px; font-weight: 500; }
.connect-card p { font-size: 14px; color: var(--muted); line-height: 1.6; flex: 1; }

/* newsletter — one field and a button, deliberately the shortest form
   on the site; anything more is a reason not to subscribe */
.subscribe { display: flex; gap: 12px; flex-wrap: wrap; max-width: 520px; margin-top: 22px; }
.subscribe input {
  flex: 1; min-width: 220px; padding: 15px 18px;
  border: 1px solid var(--line); border-radius: var(--btn-radius);
  background: var(--canvas-bg); font-size: 15px; color: var(--ink);
}
.subscribe input:focus { outline: none; border-color: var(--primary); }

/* ---------- membership tiers ---------- */

.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.tier {
  position: relative;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 30px 26px 28px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s;
}
.tier:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.tier.is-featured { border-color: var(--primary); box-shadow: var(--shadow-soft); }
.tier-flag {
  position: absolute; top: -11px; inset-inline-start: 26px;
  padding: 4px 12px; border-radius: 999px;
  background: var(--primary); color: var(--on-primary);
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
}
.tier h3 { font-family: var(--font-display); font-size: 21px; font-weight: 500; }
.tier-price { font-family: var(--font-display); font-size: 28px; font-weight: 600; color: var(--primary); }
.tier-perks { list-style: none; display: flex; flex-direction: column; gap: 9px; flex: 1; margin: 4px 0 8px; }
.tier-perks li { position: relative; padding-inline-start: 22px; font-size: 14px; color: var(--muted); line-height: 1.5; }
.tier-perks li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 6px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--highlight);
}
.tier .btn { align-self: stretch; justify-content: center; }

/* ==========================================================
   HOMEPAGE: "get involved" band
   Three doors out to the Get Involved page. On the dark ink
   ground so it reads as a break in the page, not a fourth
   card grid.
   ========================================================== */

.involved-band { background: var(--ink); color: var(--paper); }
.involved-band .kicker { color: var(--highlight); }
.involved-band .kicker::before { background: var(--highlight); }
.involved-band .section-title { color: var(--paper); }
.involved-band .section-sub { color: color-mix(in srgb, var(--paper) 72%, transparent); }
.involved-band .connect-card {
  background: color-mix(in srgb, var(--paper) 7%, transparent);
  border-color: color-mix(in srgb, var(--paper) 16%, transparent);
}
.involved-band .connect-card h3 { color: var(--paper); }
.involved-band .connect-card p { color: color-mix(in srgb, var(--paper) 70%, transparent); }
.involved-band .btn-ghost { color: var(--highlight); border-color: var(--highlight); }
.involved-band .btn-ghost:hover { background: var(--highlight); color: var(--ink); }

/* ---------- reveal ---------- */

.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */

@media (max-width: 1040px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-canvas { max-width: 460px; }
  .about-grid, .aud-layout, .contact-layout { grid-template-columns: 1fr; }
  .events-layout { grid-template-columns: 1fr; }
  .program-grid { grid-template-columns: repeat(2, 1fr); }
  .news-grid { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .facility-grid, .team-row { grid-template-columns: repeat(2, 1fr); }
  .role-grid, .connect-grid, .tier-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .nav-links {
    position: absolute; top: 76px; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 8px 28px 20px; display: none;
  }
  .nav-links.is-open { display: flex; }
  .nav-link { padding: 13px 0; border-bottom: 1px solid var(--line); }
  .nav-toggle { display: block; margin-left: auto; }
  .nav-cta { display: none; }
}

@media (max-width: 640px) {
  .program-grid, .news-grid, .footer-inner, .form-row { grid-template-columns: 1fr; }
  .event-card { grid-template-columns: 60px 1fr; }
  .event-card .btn { grid-column: 1 / -1; justify-self: start; }
  .about-stats { gap: 26px; }

  .facility-grid, .role-grid, .connect-grid, .tier-grid { grid-template-columns: 1fr; }
  .team-row { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .person-photo { max-width: 96px; }

  /* Two columns, and the wide/tall spans are dropped: at this width a
     cell spanning 2 of 2 columns is a full-width band, which breaks the
     gallery rhythm instead of creating it. */
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; gap: 12px; }
  .shot.is-wide { grid-column: span 1; }
  .shot.is-tall { grid-row: span 1; }

  /* The timeline's 86px year gutter plus a 34px gap leaves too little
     for the text, so the year moves above its entry and the spine goes. */
  .timeline::before { display: none; }
  .milestone { grid-template-columns: 1fr; gap: 6px; }
  .ms-year { text-align: start; }
  .ms-body::before { display: none; }

  /* The widest seat row is 24 seats; at the desktop size that is ~403px and it
     pushed the whole PAGE into a horizontal scroll. Shrink the seats instead of
     letting the sketch scroll — the seat map is a diagram, not something to read. */
  .stage-sketch { padding: 22px 16px 26px; }
  .seat { width: 7px; height: 7px; border-radius: 2px; }
  .seat-row { gap: 3px; }
  .seat-rows { gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}