/* ─── Editorial composition primitives ───────────*
 * Shared building blocks that read as either editorial print (Modern) or
 * 90s window chrome (Classic). Nothing here paints color roles that aren't
 * already defined in tokens.css. */

/* Full-bleed escape from centered <main> — measures off the viewport. */
.bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
/* Classic: cancel the bleed so window-shell bevels stay intact — 90s
   UIs never break out of their window. */
[data-theme="classic"] .bleed,
[data-theme="classic"] .section-block--surface {
  width: auto !important;
  left: auto !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
[data-theme="classic"] .section-block--surface {
  background: transparent !important;
  border: 0 !important;
  padding: var(--space-section-sm) 0 !important;
}
[data-theme="classic"] .section-block--surface > .container,
[data-theme="classic"] main > section > .container.mx-auto {
  max-width: none !important;
  padding: 0 !important;
}

/* Small uppercase mono label — pairs with an oversized neighbour. */
.eyebrow {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: var(--font-mono);
}

/* Editorial display headline. */
.display {
  font-family: var(--font-serif-display);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}
[data-theme="modern"] .display {
  font-feature-settings: "ss01", "liga", "onum";
}
[data-theme="classic"] .display {
  font-weight: var(--font-weight-bold);
  text-transform: none;
}

/* Decorative section numeral — wayfinding cue. */
.section-numeral {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--font-size-2xl);
  color: var(--color-border-strong);
  line-height: 1;
}

.pull-quote {
  font-family: var(--font-serif-display);
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}
@media (min-width: 768px) {
  .pull-quote { font-size: var(--font-size-3xl); }
}

.editorial-row {
  border-top: 1px solid var(--color-border);
}
.editorial-row:last-child {
  border-bottom: 1px solid var(--color-border);
}

/* Hero imagery overflows into the next section on Modern desktop. */
@media (min-width: 768px) {
  [data-theme="modern"] .hero-image-bleed {
    margin-bottom: -4rem;
  }
}

/* ─── LAIN-language modern primitives ───────────*
 * These are Modern-only. Classic explicitly reverts them below. */

/* Word-level stagger — the .word wrapper is created by reveal.js. Motion
   itself lives in motion.css (gated by html.js-word-stagger + Modern
   theme). Nothing to declare here beyond the wrapper geometry, which
   motion.css also owns. */

/* Marquee band — infinite horizontal scroll of a repeated phrase. Two
   duplicated tracks let CSS translate by -50% without a visible seam.
   Pauses on hover so it never feels aggressive. */
.marquee {
  display: flex;
  overflow: hidden;
  gap: 0;
  user-select: none;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 1.25rem 0;
}
.marquee__track {
  display: flex;
  flex-shrink: 0;
  gap: 2.5rem;
  padding-right: 2.5rem;
  min-width: 100%;
  align-items: center;
  white-space: nowrap;
}
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  font-family: var(--font-serif-display);
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.marquee__dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--color-brand-strong);
  flex-shrink: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .marquee__track {
    animation: marquee 32s linear infinite;
  }
  .marquee:hover .marquee__track {
    animation-play-state: paused;
  }
}

/* Circular rotating wordmark — used once, in the hero. Slow, ambient. */
.rotor {
  display: inline-block;
  width: 8rem;
  height: 8rem;
  position: relative;
}
.rotor svg {
  width: 100%;
  height: 100%;
  color: var(--color-brand-strong);
}
.rotor__mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-family: var(--font-serif-display);
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}
@media (prefers-reduced-motion: no-preference) {
  .rotor svg {
    animation: spin 22s linear infinite;
  }
}

/* Split-lead — 2-column asymmetric text lockup, right column drops down. */
.split-lead {
  display: grid;
  gap: 2rem;
}
@media (min-width: 768px) {
  .split-lead {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
  .split-lead > :last-child {
    margin-top: 8rem;
  }
}

/* Numbered index list — 90ch max, tight vertical rhythm. */
.index-list {
  border-top: 1px solid var(--color-border);
}
.index-list__row {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--color-border);
  transition: padding-left var(--transition-base) cubic-bezier(0.16, 1, 0.3, 1),
              color var(--transition-fast);
}
@media (min-width: 768px) {
  .index-list__row { padding: 2rem 0; }
}
[data-theme="modern"] a.index-list__row:hover,
[data-theme="modern"] a.index-list__row:focus-visible {
  padding-left: 1rem;
  color: var(--color-primary);
}
.index-list__num {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.index-list__title {
  font-family: var(--font-serif-display);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}
.index-list__meta {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: right;
}

/* Poster tile — image-first LAIN portfolio tile. */
.poster {
  display: block;
  position: relative;
  color: inherit;
}
.poster__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--color-surface-raised);
}
.poster__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-theme="modern"] .poster:hover .poster__image {
  transform: scale(1.05);
}
.poster__caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.75rem 0 0;
  gap: 1rem;
}

/* Programme hand-off label — a plain in-flow label between the video
   plate and the event grid, in both themes. */
.events-handoff {
  margin-top: 1.5rem;
}
@media (min-width: 768px) {
  .events-handoff {
    margin-top: 2.5rem;
  }
}

/* ─── Interaction language ───────────
 * One behaviour per element role — never the same hover on everything. */

.link-underline {
  position: relative;
  padding-bottom: 0.15em;
}
.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
}
@media (prefers-reduced-motion: no-preference) {
  .link-underline::after {
    transition: transform var(--transition-base) cubic-bezier(0.16, 1, 0.3, 1);
  }
}
.link-underline:hover::after,
.link-underline:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* BUTTON: modern nudges forward; classic presses like a real bevel. */
@media (prefers-reduced-motion: no-preference) {
  [data-theme="modern"] .btn:hover,
  [data-theme="modern"] .btn:focus-visible {
    transform: translateX(3px);
  }
}
/* Classic: every .btn reads as a grey system button with a proper bevel,
   regardless of the variant utility classes the ButtonComponent applied. */
[data-theme="classic"] .btn {
  background: var(--color-background) !important;
  color: var(--color-text) !important;
  border: 1px solid transparent !important;
  box-shadow: var(--shadow-sm);
  min-height: 1.75rem;
  font-family: var(--font-sans);
  padding: 0.2rem 1rem !important;
  font-weight: 400 !important;
}
[data-theme="classic"] .btn:hover { background: var(--color-surface-raised) !important; }
[data-theme="classic"] .btn:active {
  box-shadow: var(--shadow-inset);
  transform: translate(1px, 1px);
}
[data-theme="classic"] .btn:focus-visible {
  outline: 1px dotted var(--color-text);
  outline-offset: -4px;
}

/* ─── Modern page background ───────────
 * Flat black, the canvas of the approved homepage. Classic keeps its own
 * desktop layer. */
[data-theme="modern"] {
  background-color: #000000;
}

/* Motion hierarchy — the reveal.js "armed" class in motion.css owns the
   hidden states for .reveal / .reveal-image / .reveal-stagger /
   .reveal-slide-l. Only the rule-expand transition lives here because it
   has no separate keyframe, just a transform origin. */
.rule-expand { transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  .rule-expand { transition: transform var(--transition-slow) cubic-bezier(0.16, 1, 0.3, 1); }
  html.js-reveal-armed .rule-expand:not(.is-visible) { transform: scaleX(0); }
}

/* ─── Classic chrome kit ───────────
 * Full 90s window: dark green desktop behind the shell, title-bar strip,
 * menu-bar strip, panels (bevels!), inset wells, status bar. Modern
 * ignores every rule below. */

[data-theme="classic"] body {
  background: transparent;
  min-height: 100vh;
}
[data-theme="classic"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-color: var(--desktop-color);
  background-image: var(--desktop-pattern);
  background-size: var(--desktop-pattern-size);
  pointer-events: none;
}

/* The whole app in Classic sits inside a maximized "window" so the title
   bar / menu / status bar chrome reads as one coherent OS surface. */
[data-theme="classic"] body {
  padding: 0.5rem;
}

/* Classic: layout containers span the whole shell — the "window" is
   effectively maximized to the viewport. Overrides Tailwind's centered
   container so bevels wrap the entire content strip. */
[data-theme="classic"] .site-header > .win-titlebar > .container,
[data-theme="classic"] .site-header > .win-menubar > .container,
[data-theme="classic"] .site-footer > .container,
[data-theme="classic"] .site-footer > .win-statusbar > .container,
[data-theme="classic"] main {
  max-width: none !important;
  width: 100% !important;
}

[data-theme="classic"] .site-header,
[data-theme="classic"] main,
[data-theme="classic"] .site-footer {
  background: var(--color-background);
}
[data-theme="classic"] .site-header {
  box-shadow: inset -1px 0 0 #000, inset 1px 1px 0 var(--color-border-strong),
              inset -2px 0 0 #808080, inset 2px 2px 0 #dfdfdf;
  border-top: none;
}
[data-theme="classic"] main {
  box-shadow: inset -1px 0 0 #000, inset -2px 0 0 #808080,
              inset 1px 0 0 var(--color-border-strong), inset 2px 0 0 #dfdfdf;
  padding: 1rem 1.25rem !important;
}
[data-theme="classic"] .site-footer {
  box-shadow: inset -1px -1px 0 #000, inset -2px -2px 0 #808080,
              inset 1px 0 0 var(--color-border-strong), inset 2px 0 0 #dfdfdf;
  margin-top: 0 !important;
}

/* Title-bar chrome — green pinstripe band. The classic 90s "active window"
   look with a highlight rule. */
.win-titlebar {
  background:
    repeating-linear-gradient(
      to bottom,
      var(--color-primary) 0 1px,
      color-mix(in srgb, var(--color-primary) 55%, black) 1px 2px
    );
  color: var(--color-primary-foreground);
  border-bottom: 1px solid #000000;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
[data-theme="modern"] .win-titlebar {
  background: transparent;
  color: inherit;
  border-bottom: 1px solid var(--color-border);
  box-shadow: none;
}

/* At tablet widths the nine-item horizontal nav no longer fits on one
   line in either theme — the two longest labels ("Become a Member",
   "For Members") wrap and break the row's baseline. Drop to the
   existing mobile hamburger nav between 768–1023px instead of inventing
   tablet-specific nav-link sizing for both themes. */
@media (min-width: 768px) and (max-width: 1023px) {
  /* [data-theme] scoping (not just .win-menubar) keeps specificity above
     Tailwind's .md\:block/.md\:hidden utilities regardless of stylesheet
     load order. */
  [data-theme] .win-menubar { display: none; }
  #mobile-nav { display: block; }
}

/* The menu hangs off the sticky header, so it never scrolls with the page.
   Cap it to the visible viewport and let it scroll on its own when the
   links outgrow a short screen (small phones, landscape). 4rem clears the
   title bar plus Classic's window padding. */
#mobile-nav > nav {
  max-height: calc(100vh - 4rem - env(safe-area-inset-bottom, 0px));
  max-height: calc(100dvh - 4rem - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* iOS zooms the page into any field under 16px when it gains focus.
   Classic fields (and Modern date/time fields) run smaller, so lift them
   to 16px on touch screens only. */
@media (pointer: coarse) {
  [data-theme] main :is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"]), select, textarea) {
    font-size: 1rem;
  }
}

/* Menu-bar row — flush strip in classic; spaced editorial links in modern. */
[data-theme="classic"] .win-menubar {
  background: var(--color-background);
  border-bottom: 1px solid #808080;
  box-shadow: inset 0 -1px 0 var(--color-border-strong);
}
[data-theme="classic"] .win-menubar a {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  color: var(--color-text);
  font-weight: var(--font-weight-normal);
  border: 1px solid transparent;
}
[data-theme="classic"] .win-menubar a:hover,
[data-theme="classic"] .win-menubar a[aria-current="page"],
[data-theme="classic"] .win-menubar a.is-active {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
}

/* Status-bar strip — classic footer treatment. */
[data-theme="classic"] .win-statusbar {
  background: var(--color-background);
  border-top: 1px solid #808080;
  box-shadow: inset 0 1px 0 var(--color-border-strong);
  font-size: var(--font-size-xs);
}
[data-theme="classic"] .win-statusbar .win-statusbar__cell {
  border-right: 1px solid #808080;
  box-shadow: inset -1px 0 0 var(--color-border-strong);
  padding: 0.15rem 0.6rem;
}

/* Beveled panel — the group-box used for cards/sections in Classic. */
.win-panel {
  background: var(--color-surface);
}
[data-theme="classic"] .win-panel {
  border: 1px solid transparent;
  box-shadow: var(--shadow-sm);
  padding: 0.75rem 1rem;
}
[data-theme="modern"] .win-panel {
  background: transparent;
  border: 1px solid var(--color-border);
  padding: 1.25rem;
}

/* Inset well — form fields, quotes, code. */
.win-well {
  background: color-mix(in srgb, var(--color-background) 92%, black);
}
[data-theme="classic"] .win-well {
  box-shadow: var(--shadow-inset);
  padding: 0.4rem 0.6rem;
  background: #ffffff;
}
[data-theme="modern"] .win-well {
  background: var(--color-surface);
  border-left: 2px solid var(--color-primary);
  padding: 0.75rem 1rem;
}

/* Classic: visible rules between stacked sections read as window group-box
   separation. */
[data-theme="classic"] main > section + section,
[data-theme="classic"] main > article + section,
[data-theme="classic"] main > section + article {
  border-top: 1px solid #808080;
  box-shadow: inset 0 1px 0 var(--color-border-strong);
}

/* ─── Classic skips scroll-triggered + typographic motion ───────────
 * 90s software would never do this stuff. Keep the DOM hooks so JS stays
 * theme-agnostic, but render them instantly. */
[data-theme="classic"] .reveal-image,
[data-theme="classic"] .reveal,
[data-theme="classic"] .reveal-slide-l,
[data-theme="classic"] .reveal-stagger > *,
[data-theme="classic"] .word-stagger .word > span,
[data-theme="classic"] .scrub-words .word > span,
[data-theme="classic"] .scrub-words,
[data-theme="classic"] .scrub-hero-exit,
[data-theme="classic"] .scrub-frame > *,
[data-theme="classic"] .scrub-cards .event-card__media,
[data-theme="classic"] .scrub-cards .event-card__pane,
[data-theme="classic"] .scrub-board .board-card__portrait,
[data-theme="classic"] .scrub-board .board-card__pane,
[data-theme="classic"] .scrub-numeral,
[data-theme="classic"] .scrub-rise,
[data-theme="classic"] .scrub-rise-soft,
[data-theme="classic"] .scrub-frame,
[data-theme="classic"] .scrub-rule,
[data-theme="classic"] .scrub-slide-l,
[data-theme="classic"] .scrub-cards > *,
[data-theme="classic"] .scrub-board > *,
[data-theme="classic"] .scrub-index-row,
[data-theme="classic"] .scrub-index-row .index-list__meta,
[data-theme="classic"] .headline-wipe,
[data-theme="classic"] .hero-entrance,
[data-theme="classic"] .hero-entrance-delay,
[data-theme="classic"] .marquee__track,
[data-theme="classic"] .rotor svg,
[data-theme="classic"] .poster:hover .poster__image {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  animation: none !important;
  filter: none !important;
  transition: none !important;
}

/* Marquee and rotor are Modern-only visual motifs — hide the whole
   containers in Classic instead of rendering broken versions. */
[data-theme="classic"] .marquee,
[data-theme="classic"] .rotor,
[data-theme="classic"] .hide-in-classic {
  display: none !important;
}

/* Split-lead's asymmetric drop is Modern-only — Classic gets a straight
   stacked block. */
[data-theme="classic"] .split-lead {
  display: block;
}
[data-theme="classic"] .split-lead > * + * {
  margin-top: 1rem;
}

/* Modern's 12-col editorial "eyebrow / body" grids create big empty gutters
   in Classic. Collapse the section-level grids into normal stacked flow
   so Classic reads dense and information-first, not sparse and centered.
   The card-grid utilities (sm:grid-cols-2, lg:grid-cols-3) on inner
   containers stay grid-shaped because they aren't the section itself. */
[data-theme="classic"] main .grid.md\:grid-cols-12 {
  display: block !important;
}
[data-theme="classic"] main .grid.md\:grid-cols-12 > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
}
[data-theme="classic"] main .grid.md\:grid-cols-12 > * + * {
  margin-top: 0.35rem;
}
/* Section headers in Classic: label on the left, content flush next — no
   md:col-start-5 shift, no huge whitespace. */
[data-theme="classic"] .section-numeral {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
}
[data-theme="classic"] .index-list {
  border-top: 1px solid #808080;
  box-shadow: inset 0 1px 0 var(--color-border-strong);
}
[data-theme="classic"] .index-list__row {
  grid-template-columns: 2rem 1fr auto;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid #b0b0b0;
  gap: 0.75rem;
}
[data-theme="classic"] .index-list__title {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: 400;
  letter-spacing: 0;
}
[data-theme="classic"] .index-list__num,
[data-theme="classic"] .index-list__meta {
  color: var(--color-text-muted);
}
[data-theme="classic"] .index-list__row:hover {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
}
[data-theme="classic"] .index-list__row:hover .index-list__num,
[data-theme="classic"] .index-list__row:hover .index-list__meta {
  color: color-mix(in srgb, var(--color-primary-foreground) 80%, transparent);
}

/* Classic: pull-quote and oversized display headings collapse to
   document-heading scale so text density feels period-correct. */
[data-theme="classic"] .pull-quote {
  font-size: var(--font-size-xl) !important;
  font-family: var(--font-sans);
  font-weight: 700;
}
[data-theme="classic"] .display {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0;
}
[data-theme="classic"] h1.display {
  font-size: var(--font-size-2xl) !important;
}
[data-theme="classic"] h2.display {
  font-size: var(--font-size-xl) !important;
}
[data-theme="classic"] h3.display {
  font-size: var(--font-size-lg) !important;
}

/* ─── Site header/footer identity ───────────
 * Same DOM in both themes, opposite reads: quiet editorial masthead vs.
 * full window chrome. */

[data-theme="modern"] .site-header {
  background: var(--color-background);
  border-bottom: 1px solid var(--color-border);
}
[data-theme="modern"] .site-wordmark {
  font-family: var(--font-serif-display);
  font-size: 1.25rem;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text);
}
[data-theme="modern"] .site-wordmark-mark {
  color: #427a4f; /* ADA forest green, the one colour in the Modern chrome */
  font-size: 0.9rem;
}
[data-theme="modern"] .site-chip {
  /* display is set via Tailwind utilities in markup (hidden/inline-flex),
     not here — a themed selector would out-specificity the `hidden` utility. */
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.9rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  transition: border-color var(--transition-fast), color var(--transition-fast);
  font-family: var(--font-mono);
}
[data-theme="modern"] .site-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
[data-theme="modern"] .site-chip--accent {
  border-color: var(--color-text);
  background: var(--color-text);
  color: var(--color-text-inverted);
}
[data-theme="modern"] .site-chip--accent:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-foreground);
}
/* Donate stands apart from the account chips in the brand colour; the label and
   heart carry the meaning, so it never relies on colour alone. */
[data-theme="modern"] .site-chip--donate {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
[data-theme="modern"] .site-chip--donate:hover {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
}

[data-theme="classic"] .site-header { background: var(--color-background); }
[data-theme="classic"] .site-wordmark {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-primary-foreground);
  gap: 0.4rem !important;
}
[data-theme="classic"] .site-wordmark-mark {
  color: var(--color-primary-foreground);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  background: var(--color-background);
  color: var(--color-primary);
  font-size: 0.7rem;
  box-shadow: inset -1px -1px 0 #000, inset 1px 1px 0 #fff;
}
[data-theme="classic"] .site-chip {
  /* display is set via Tailwind utilities in markup (hidden/inline-flex),
     not here — a themed selector would out-specificity the `hidden` utility. */
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.7rem;
  font-size: var(--font-size-xs);
  border: 1px solid transparent;
  background: var(--color-background);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
  font-weight: 400;
  min-height: 1.6rem;
}
[data-theme="classic"] .site-chip:active { box-shadow: var(--shadow-inset); transform: translate(1px, 1px); }
[data-theme="classic"] .site-chip--accent {
  background: var(--color-background);
  color: var(--color-text);
  border-color: transparent;
  font-weight: 700;
}
[data-theme="classic"] .site-chip--donate {
  color: var(--color-primary);
  font-weight: 700;
}

/* Footer parallels the header — quiet masthead in Modern, status bar in Classic. */
[data-theme="modern"] .site-footer {
  background: transparent;
  border-top: 1px solid var(--color-border);
}
[data-theme="classic"] .site-footer { background: var(--color-background); }

/* ─── Main navigation link ───────────
 * Modern: sweep underline on hover, editorial spacing.
 * Classic: flush menu-item, inverted highlight on hover. */
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
}

[data-theme="modern"] .nav-link {
  padding: 0.6rem 0;
  margin-right: 2rem;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color var(--transition-fast) ease;
}
[data-theme="modern"] .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.2rem;
  height: 1px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition-base) cubic-bezier(0.16, 1, 0.3, 1);
}
[data-theme="modern"] .nav-link:hover,
[data-theme="modern"] .nav-link.is-active {
  color: var(--color-primary);
}
[data-theme="modern"] .nav-link:hover::after,
[data-theme="modern"] .nav-link:focus-visible::after,
[data-theme="modern"] .nav-link.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

[data-theme="classic"] .nav-link {
  padding: 0.2rem 0.65rem;
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 400;
  border: 1px solid transparent;
}
[data-theme="classic"] .nav-link:hover,
[data-theme="classic"] .nav-link.is-active {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
}

/* Modern-only: subtle accented letterform for the leading char in the
   wordmark — small typographic detail, not decoration. */
[data-theme="modern"] .site-wordmark-name::first-letter {
  color: var(--color-primary);
}

/* ─── Events calendar ───────────────────────────────────────────────
 * One markup, two renderings: a table grid for md+ viewports, a stacked
 * agenda list for narrow viewports (no horizontal scroll, no JS toggle —
 * plain Tailwind `hidden`/`md:` visibility swap, same pattern the header
 * already uses for its mobile nav). */
.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.calendar-nav__end { display: flex; align-items: center; gap: 1.25rem; }
.calendar-nav__link,
.calendar-nav__today {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
.calendar-nav__link:hover,
.calendar-nav__today:hover,
[data-theme="modern"] .calendar-nav__link:focus-visible,
[data-theme="modern"] .calendar-nav__today:focus-visible { color: var(--color-primary); }
.calendar-heading time {
  font-family: var(--font-serif-display);
  font-size: var(--font-size-2xl);
  color: var(--color-text);
}

.calendar-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.calendar-grid th {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  padding: 0.5rem;
  text-align: left;
}
.calendar-day { vertical-align: top; padding: 0.5rem; height: 6.5rem; }
.calendar-day__date {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.calendar-day.is-today .calendar-day__date { color: var(--color-primary); font-weight: 600; }
.calendar-day.is-outside-month { opacity: 0.35; }
.calendar-day__events {
  list-style: none;
  margin-top: 0.35rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.calendar-event {
  display: block;
  font-size: var(--font-size-xs);
  line-height: 1.3;
  text-decoration: none;
  color: var(--color-text);
}
.calendar-event__tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 0.35em;
  color: var(--color-text-muted);
}
.calendar-event--active { color: var(--color-success); }
.calendar-event--active .calendar-event__tag { color: var(--color-success); }
.calendar-event--past { color: var(--color-text-muted); font-style: italic; }
.calendar-event--unpublished {
  color: var(--color-text-muted);
  border: 1px dashed var(--color-border);
  padding: 0.1rem 0.3rem;
  border-radius: 2px;
}
.calendar-event--unpublished .calendar-event__tag { color: var(--color-text-muted); font-weight: 600; }
.calendar-event.is-rsvped .calendar-event__title::after {
  content: " \2713";
  color: var(--color-primary);
}

.calendar-agenda__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.calendar-agenda__day { padding: 1rem 0; border-bottom: 1px solid var(--color-border); }
.calendar-agenda__date time {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.calendar-agenda__day.is-today .calendar-agenda__date time { color: var(--color-primary); font-weight: 600; }
.calendar-agenda__events { list-style: none; margin-top: 0.6rem; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.calendar-agenda .calendar-event { font-size: var(--font-size-sm); }

[data-theme="modern"] .calendar-grid td,
[data-theme="modern"] .calendar-grid th { border-bottom: 1px solid var(--color-border); }
[data-theme="modern"] .calendar-day { transition: background-color var(--transition-fast); }
[data-theme="modern"] .calendar-day:hover { background: var(--color-surface); }
[data-theme="modern"] .calendar-event:hover,
[data-theme="modern"] .calendar-event:focus-visible { color: var(--color-primary); }
[data-theme="modern"] .calendar-day.is-today { box-shadow: inset 0 -2px 0 var(--color-primary); }

[data-theme="classic"] .calendar-grid { border: 1px solid #808080; box-shadow: var(--shadow-inset); background: #ffffff; }
[data-theme="classic"] .calendar-grid th { background: var(--color-secondary); border: 1px solid #808080; }
[data-theme="classic"] .calendar-day { border: 1px solid #808080; background: #ffffff; }
[data-theme="classic"] .calendar-day.is-outside-month { background: var(--color-secondary); }
[data-theme="classic"] .calendar-day.is-today { background: var(--color-surface-raised); box-shadow: inset 0 0 0 2px var(--color-primary); }
[data-theme="classic"] .calendar-event { text-decoration: underline; }

/* Video slate reads as a full-bleed cinematic plate in Modern; Classic
   trades the bleed (already cancelled above) for a framed, bevelled
   window instead of hiding the block outright. */
[data-theme="classic"] .video-frame {
  border: 1px solid #808080;
  box-shadow: var(--shadow-inset);
}
[data-theme="classic"] .calendar-agenda__day { border: 1px solid #808080; padding: 0.6rem; margin-bottom: 0.5rem; box-shadow: var(--shadow-sm); background: #ffffff; }
[data-theme="classic"] .calendar-nav__link,
[data-theme="classic"] .calendar-nav__today { border: 1px solid transparent; padding: 0.15rem 0.4rem; }
[data-theme="classic"] .calendar-nav__link:hover,
[data-theme="classic"] .calendar-nav__today:hover {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  border-color: #808080;
}