/* ============================================================
   SPEAKERS CHAPTER — STYLES
   Kind of style: editorial book of plates.
   ============================================================ */

/* ---- Tweaks panel offset (don't sit under header) ---- */
.tweaks-toggle-mount { z-index: 9999; }

/* ============================================================
   § OPENING PLATE — the editorial frontispiece
   ============================================================ */
.opening-plate {
  background: var(--void);
  /* keep the site's horizontal section padding (130px 48px 110px 64px); only adjust vertical */
  padding-top: 90px !important;
  padding-bottom: 90px !important;
  position: relative;
  border-top: 1px solid var(--rule);
}
.opening-plate::before {
  /* faint gilt halo behind the plate */
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 1100px 500px at 30% 50%, rgba(182,138,62,0.06), transparent 70%);
  pointer-events: none;
}
.op-marginalia {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
}
.op-marginalia .rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--rule-2), transparent);
}
.op-marginalia .num {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--gilt);
  text-transform: none;
}

.op-plate {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: 56px;
  align-items: start;
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
}
.opening-plate .op-marginalia { max-width: 1400px; margin: 0 auto 36px; }

.op-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(ellipse 80% 70% at 50% 35%, rgba(180,130,80,0.18), transparent 60%),
    linear-gradient(180deg, #C9B393 0%, #A88B62 100%);
  border: 1px solid var(--rule-2);
  overflow: hidden;
}
.op-portrait::before {
  /* engraved frame */
  content: '';
  position: absolute;
  inset: 18px;
  border: 1px solid var(--rule-2);
  pointer-events: none;
  z-index: 3;
}
.op-portrait::after {
  /* deep corner ornaments */
  content: '';
  position: absolute;
  inset: 14px;
  background:
    /* TL */
    linear-gradient(135deg, var(--gilt) 0 1px, transparent 1px) top left / 14px 14px no-repeat,
    linear-gradient(45deg,  var(--gilt) 0 1px, transparent 1px) bottom left / 14px 14px no-repeat,
    linear-gradient(225deg, var(--gilt) 0 1px, transparent 1px) top right / 14px 14px no-repeat,
    linear-gradient(315deg, var(--gilt) 0 1px, transparent 1px) bottom right / 14px 14px no-repeat;
  pointer-events: none;
  z-index: 4;
}
.op-portrait img {
  position: absolute;
  inset: 24px;
  width: calc(100% - 48px);
  height: calc(100% - 48px);
  object-fit: cover;
  /* Walnut / coffee duotone — less yellow, deeper red-brown */
  filter:
    grayscale(0.78)
    contrast(1.12)
    sepia(0.38)
    hue-rotate(-22deg)
    saturate(0.88)
    brightness(0.86);
  mix-blend-mode: multiply;
}
/* fallback initials when no img */
.op-portrait[data-initials]:not(:has(img))::before {
  /* Override engraved frame on empty portrait — make space for initials */
}
.op-portrait .op-initials {
  position: absolute;
  inset: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 200;
  font-size: clamp(80px, 9vw, 140px);
  color: var(--gilt);
  letter-spacing: -0.04em;
  z-index: 2;
  opacity: 0.45;
}
.op-plate-no {
  position: absolute;
  top: 28px;
  left: 28px;
  z-index: 5;
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--gilt);
  background: var(--void);
  padding: 4px 10px;
  border: 1px solid var(--rule-2);
  white-space: nowrap;
}
.op-keynote-tag {
  position: absolute;
  bottom: 28px;
  right: 28px;
  z-index: 5;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gilt);
  background: var(--void);
  padding: 5px 11px;
  border: 1px solid var(--gilt);
  white-space: nowrap;
}

.op-body { padding-top: 8px; }
.op-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
  display: flex;
  gap: 14px;
  align-items: center;
}
.op-eyebrow .pip {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gilt);
}
.op-name {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 200;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 8px;
}
.op-name em {
  font-style: italic;
  font-weight: 300;
  color: var(--gilt);
}
.op-affil {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 18px;
  font-style: italic;
  color: var(--paper-warm);
  margin-bottom: 4px;
}
.op-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 32px;
}
.op-latin {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 17px;
  color: var(--gilt);
  border-left: 2px solid var(--gilt);
  padding-left: 16px;
  margin: 0 0 8px;
}
.op-latin-en {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 14px;
  color: var(--muted);
  padding-left: 18px;
  margin-bottom: 32px;
}
.op-talk-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 6px;
}
.op-talk-title {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 28px;
  letter-spacing: -0.01em;
}
.op-quote {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 19px;
  line-height: 1.55;
  color: var(--paper-warm);
  font-style: italic;
  position: relative;
  padding: 8px 0 8px 32px;
  border-left: 1px solid var(--gilt);
  margin: 0 0 32px;
  max-width: 600px;
}
.op-quote::before {
  content: '\201C';
  position: absolute;
  left: 4px; top: -8px;
  font-size: 36px;
  color: var(--gilt);
  font-style: normal;
  line-height: 1;
}
.op-cta-row {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-top: 8px;
}
.op-read-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 12px 20px;
  background: transparent;
  cursor: pointer;
  transition: all 200ms ease;
}
.op-read-btn:hover {
  background: var(--ink);
  color: var(--void);
}
.op-day {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 13px;
  font-style: italic;
  color: var(--muted);
}

/* ============================================================
   § GILT TEXT — vertical metal gradient with shimmer
   Mirrors the .gilt-sheen utility on the agenda page so the
   italic emphasis words on the speakers reader-panel read as
   struck metal, not flat gold ink.
   ============================================================ */
.gilt-sheen {
  background: linear-gradient(
    180deg,
    #F5DC97 0%,
    #E5C77A 22%,
    #B68A3E 50%,
    #8A6620 78%,
    #C9A24E 100%
  );
  background-size: 100% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
  letter-spacing: 0.02em;
  position: relative;
  text-shadow: 0 1px 0 rgba(0,0,0,0.04);
  animation: giltShimmer 6s ease-in-out infinite;
}
@keyframes giltShimmer {
  0%, 100% { background-position: 0% 0%; }
  50%      { background-position: 0% 100%; }
}
.gilt-sheen:hover { animation: giltSweep 1.4s ease-in-out; }
@keyframes giltSweep {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 0% 100%; }
  100% { background-position: 0% 0%; }
}

/* Inline kbd-style gilt button — keyboard-key boxes in the help text */
kbd.gilt {
  font-family: 'JetBrains Mono', monospace;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #F5DC97 0%, #C9A24E 50%, #8A6620 100%);
  border: 1px solid #6B4F1A;
  box-shadow:
    inset 0 1px 0 rgba(255,235,180,0.55),
    inset 0 -1px 0 rgba(40,24,4,0.35),
    0 1px 2px rgba(40,24,4,0.18);
  padding: 3px 9px;
  border-radius: 2px;
  color: #2A1B0A;
  display: inline-block;
  vertical-align: 1px;
  margin: 0 1px;
  white-space: nowrap;
}

/* ============================================================
   § READER PANEL — "How to read the Speakers"
   A paper card above the filter bar that names the three guilds,
   the day filter, and the search/sort tools — same shape as the
   "How to read the Agenda" panel on the programme page.
   ============================================================ */
/* Wraps the reader-panel in a darker band so the cream panel
   pops as a lit card on a desk — mirrors the agenda's pattern
   where the section bg is darker paper and the panel is lighter. */
.reader-panel-band {
  background: #EFE5CF;
  border-top: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule-2);
  margin: 32px -56px 8px;
  padding: 56px;
  position: relative;
}
@media (max-width: 900px) {
  .reader-panel-band { margin: 24px -32px 8px; padding: 40px 32px; }
}
@media (max-width: 640px) {
  .reader-panel-band { margin: 24px -20px 8px; padding: 32px 20px; }
}

.reader-panel {
  /* Lit cream card — same stock as the agenda's "How to read" panel,
     reading brighter than the band behind it. */
  background: #F4ECDA;
  border: 1px solid var(--rule);
  margin: 0;
  padding: 28px 32px;
  position: relative;
  box-shadow: 0 1px 0 rgba(40,28,12,0.04), 0 12px 32px -20px rgba(40,28,12,0.22);
}
.reader-panel::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--filament) 30%, var(--filament) 70%, transparent);
  opacity: 0.5;
}
.reader-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule-2);
}
.reader-panel-title {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 200;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  flex-shrink: 0;
  max-width: 320px;
  margin: 0;
}
.reader-panel-title em {
  font-style: italic;
  font-weight: 300;
}
.reader-panel-title .kicker {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--filament);
  margin-bottom: 8px;
  font-style: normal;
}
.reader-panel-help {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.5;
  color: var(--paper-warm);
  flex: 1;
  min-width: 280px;
  margin: 0;
}
.reader-panel-help kbd {
  font-family: 'JetBrains Mono', monospace;
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(229,199,122,0.16);
  border: 1px solid rgba(229,199,122,0.45);
  padding: 2px 8px;
  border-radius: 2px;
  color: var(--ink);
  white-space: nowrap;
}
.guild-legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 22px;
}
@media (max-width: 900px) {
  .guild-legend { grid-template-columns: 1fr; }
}
.guild-legend-item {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: start;
}
.guild-legend-glyph {
  width: 14px;
  height: 14px;
  margin-top: 4px;
  position: relative;
  flex-shrink: 0;
  background: var(--filament);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--filament);
}
.guild-legend-glyph.g2 {
  background: transparent;
  border: 1.5px solid var(--filament);
  box-shadow: none;
}
.guild-legend-glyph.g3 {
  background: var(--filament);
  opacity: 0.55;
  box-shadow: none;
}
.guild-legend-name {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.guild-legend-name em {
  font-style: italic;
}
.guild-legend-name em:not(.gilt-sheen) {
  color: var(--filament);
}
.guild-legend-latin {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
}
.guild-legend-desc {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.45;
  color: var(--paper-warm);
  margin: 0;
}
.reader-panel-footer {
  padding-top: 20px;
  border-top: 1px solid var(--rule-2);
}
.reader-panel-footer .reader-panel-help {
  margin: 0;
  max-width: none;
}

/* ============================================================
   § FILTER BAR — search, sort, guild + day pills
   ============================================================ */
.guild-filter {
  display: block;
  padding: 24px 0 8px;
  border-top: 1px solid var(--rule-2);
  margin-top: 64px;
}
.filter-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--rule);
}
.filter-row:last-child { border-bottom: none; }

/* —— SEARCH ROW —— */
/* Small, single-row search at the top of the filter strip.
   Hairline gilt rule beneath the field draws in on focus to make the surface feel alive. */
.filter-row-search {
  border-bottom: 1px solid var(--rule-2);
  padding: 0;
  align-items: center;
  gap: 12px;
  position: relative;
}
.filter-row-search::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gilt) 20%, var(--gilt) 80%, transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
  pointer-events: none;
}
.filter-row-search:focus-within::after { transform: scaleX(1); }
.filter-search-glyph {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gilt);
  padding-left: 2px;
  filter: drop-shadow(0 0 6px rgba(182,138,62,0.35));
  transition: transform 0.3s ease;
}
.filter-row-search:focus-within .filter-search-glyph {
  transform: rotate(-8deg) scale(1.05);
}
.filter-search {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 17px;
  color: var(--ink);
  padding: 16px 0;
  outline: none;
}
.filter-search::placeholder {
  color: var(--muted);
  font-style: italic;
  opacity: 0.85;
}
.filter-search:focus::placeholder { opacity: 0.55; }

.filter-search-clear {
  display: none;
  background: transparent;
  border: 1px solid var(--rule-2);
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-right: 12px;
  transition: all 0.15s ease;
}
.filter-search-clear:hover {
  color: var(--ink);
  border-color: var(--gilt);
  background: rgba(182,138,62,0.10);
}
.filter-row-search.has-value .filter-search-clear { display: inline-flex; }
.filter-sort {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 0 20px;
  border-left: 1px solid var(--rule);
}
.filter-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.filter-sort-select {
  background: transparent;
  border: 1px solid var(--rule-2);
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ink);
  padding: 8px 12px;
  cursor: pointer;
}
.filter-row-pills { gap: 0; }
.guild-filter-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding: 14px 24px 14px 0;
  border-right: 1px solid var(--rule);
  white-space: nowrap;
  display: flex;
  align-items: center;
  min-width: 140px;
}
.guild-pill {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--paper-warm);
  background: transparent;
  border: none;
  border-right: 1px solid var(--rule);
  padding: 12px 18px;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.guild-pill:hover { background: rgba(182,138,62,0.08); color: var(--gilt); }
.guild-pill.is-active {
  background: var(--ink);
  color: var(--void);
}
.guild-pill.is-active .count { color: var(--gilt); }
.guild-pill .count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted-2);
}
.guild-pill em {
  font-style: italic;
  color: var(--gilt);
  font-weight: 400;
}

/* ============================================================
   § A–Z RAIL + RESULTS COUNT
   ============================================================ */
.results-count {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
  padding: 22px 0 14px;
  letter-spacing: 0.01em;
}
.results-count strong {
  color: var(--ink);
  font-weight: 600;
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.results-count em {
  color: var(--gilt);
}
.az-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule-2);
  padding: 6px 0;
  margin-bottom: 32px;
  font-family: 'JetBrains Mono', monospace;
  /* Stay reachable while the user reads down the speaker list.
     `position: sticky` here was silently disabled by the body's
     `overflow-x: hidden` (set globally in topnav.css to prevent
     site-wide horizontal scroll bleed). Instead of fighting that
     trade-off, the rail uses a JS-toggled `position: fixed` pattern:
     a small handler in speakers-chapter.js adds `.is-pinned` to the
     rail once its natural top scrolls past the topnav, and inserts
     a same-height placeholder so layout doesn't jump.
     The static rule is just the inline default; .is-pinned takes over
     once the user has scrolled past it. */
  position: relative;
  z-index: 20;
  background:
    linear-gradient(180deg, rgba(248,242,224,0.985) 0%, rgba(244,236,218,0.96) 100%);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
  backdrop-filter: blur(6px) saturate(1.05);
}
/* The pinned state — fixed to the viewport, sat just below the topnav.
   We give it a slightly more saturated cream background, a gilt hairline
   on top + bottom, and a real cast shadow so it reads as a floating
   surface OVER the plates instead of blending into the cream paper.
   left/width are set inline by speakers-chapter.js so the rail keeps
   the same horizontal footprint as its natural position. */
.az-rail.is-pinned {
  position: fixed;
  top: 90px;
  z-index: 40;
  margin-bottom: 0;
  /* Warmer, more opaque cream so the rail stands out against the plates */
  background:
    linear-gradient(180deg, #FAF3DD 0%, #F4ECDA 100%);
  /* Stronger gilt borders + cast shadow so it floats visibly */
  border-top: 1px solid rgba(182,138,62,0.45);
  border-bottom: 1px solid rgba(182,138,62,0.32);
  box-shadow:
    0 1px 0 rgba(255,243,200,0.45) inset,
    0 8px 18px -6px rgba(40,28,12,0.18),
    0 18px 32px -16px rgba(40,28,12,0.20);
}
/* Placeholder injected next to the rail when it's pinned — preserves
   the vertical space so the page below doesn't jump up. */
.az-rail-placeholder {
  display: none;
}
.az-rail-placeholder.is-active {
  display: block;
}
.az-rail a {
  flex: 1 0 auto;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.18em;
  padding: 6px 8px;
  color: var(--ink);
  text-decoration: none;
  border-right: 1px solid var(--rule);
  transition: background 120ms;
}
.az-rail a:last-child { border-right: none; }
.az-rail a:hover { background: var(--ink); color: var(--copper); }
.az-rail a.is-disabled {
  color: var(--rule-2);
  pointer-events: none;
}

/* Back-to-top arrow tucked at the end of the rail. */
.az-rail a.az-top {
  flex: 0 0 auto;
  padding: 6px 14px;
  font-size: 14px;
  letter-spacing: 0;
  border-left: 1px solid var(--rule-2);
  border-right: none;
  /* Glinting gilt — a moving sheen runs across the arrow on a slow loop. */
  color: transparent;
  background: linear-gradient(
    100deg,
    #B68A3E 0%,
    #B68A3E 30%,
    #FFE9A8 45%,
    #FFFFFF 50%,
    #FFE9A8 55%,
    #C8932A 70%,
    #B68A3E 100%
  );
  background-size: 250% 100%;
  background-position: 100% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 12px rgba(229,199,122,0.55);
  filter: drop-shadow(0 0 6px rgba(255,233,168,0.35));
  animation: az-top-glint 3.4s ease-in-out infinite;
}
@keyframes az-top-glint {
  0%   { background-position: 100% 50%; }
  60%  { background-position: 0% 50%; }
  100% { background-position: -60% 50%; }
}
.az-rail a.az-top:hover {
  animation-duration: 1.2s;
  text-shadow: 0 0 18px rgba(255,233,168,0.85);
  filter: drop-shadow(0 0 10px rgba(255,233,168,0.7));
}

/* Brief gilt halo on the plate the rail just jumped to */
@keyframes __az-flash {
  0%   { box-shadow: 0 0 0 0 rgba(182,138,62,0.45), 0 0 0 0 rgba(182,138,62,0); }
  35%  { box-shadow: 0 0 0 3px rgba(182,138,62,0.55), 0 0 32px 8px rgba(229,199,122,0.45); }
  100% { box-shadow: 0 0 0 0 rgba(182,138,62,0), 0 0 0 0 rgba(182,138,62,0); }
}
.plate.az-flash {
  animation: __az-flash 1500ms cubic-bezier(.2,.8,.2,1);
  position: relative;
  z-index: 1;
}

/* ============================================================
   § PLATE GROUPS — guild headers + grids
   ============================================================ */
.guild-group { margin-top: 56px; }
.guild-group[hidden] { display: none; }

.guild-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  border-bottom: 1px solid var(--rule-2);
  padding-bottom: 18px;
  margin-bottom: 36px;
}
.guild-head h3 {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 200;
  font-style: italic;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 4px;
}
.guild-head .en {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  color: var(--muted);
}
.guild-head .motto {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gilt);
  text-align: right;
}

/* ============================================================
   § THE PLATE — the speaker card.
   Three layouts switched via [data-layout] on the grid root.
   ============================================================ */
.plate-grid {
  display: grid;
  gap: 28px 28px;
}
.plate-grid[data-density="3"] { grid-template-columns: repeat(3, 1fr); }
.plate-grid[data-density="4"] { grid-template-columns: repeat(4, 1fr); gap: 18px 18px; }
.plate-grid[data-density="4"] .plate-name { font-size: 19px; line-height: 1.15; }
.plate-grid[data-density="4"] .plate-role { font-size: 12px; }
.plate-grid[data-density="4"] .plate-affil { font-size: 9px; letter-spacing: 0.16em; }
.plate-grid[data-density="4"] .plate-talk-title { font-size: 13px; }
.plate-grid[data-density="4"] .plate-latin { font-size: 10px; }
.plate-grid[data-density="4"] .plate-eyebrow { font-size: 9px; letter-spacing: 0.18em; }
.plate-grid[data-density="4"] .plate-body { padding: 16px 14px 18px; }
.plate-grid[data-density="4"] .plate-portrait { aspect-ratio: 4/3; }
.plate-grid[data-density="4"] .plate-no { font-size: 11px; top: 10px; right: 12px; }
.plate-grid[data-density="list"] { grid-template-columns: 1fr; gap: 0; }

.plate {
  position: relative;
  background: var(--void);
  border: 1px solid var(--rule);
  cursor: pointer;
  transition:
    transform 360ms cubic-bezier(.2,.8,.2,1),
    box-shadow 360ms cubic-bezier(.2,.8,.2,1),
    border-color 220ms ease;
  overflow: hidden;
}
.plate:hover {
  border-color: var(--gilt);
  transform: translateY(-4px);
  /* the lantern lift */
  box-shadow:
    0 18px 40px -22px rgba(182,138,62,0.55),
    0 4px 12px -4px rgba(40,28,12,0.10),
    inset 0 1px 0 rgba(255,237,200,0.4);
}

/* corner ornaments — subtle gilt, only appear on hover */
.plate::before, .plate::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border: 0 solid var(--gilt);
  opacity: 0;
  transition: opacity 240ms ease;
  pointer-events: none;
  z-index: 4;
}
.plate::before {
  top: 6px; left: 6px;
  border-top-width: 1px; border-left-width: 1px;
}
.plate::after {
  bottom: 6px; right: 6px;
  border-bottom-width: 1px; border-right-width: 1px;
}
.plate:hover::before, .plate:hover::after { opacity: 1; }

/* plate number — top right, italic numeral */
.plate-no {
  position: absolute;
  top: 12px; right: 14px;
  z-index: 3;
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--gilt);
  white-space: nowrap;
}

/* ===== Layout A — EDITORIAL (default) ===== */
/* Big portrait left, rich body right inside the card. Stacks vertically below. */
.plate[data-layout="editorial"] {
  display: grid;
  grid-template-rows: auto auto;
}
.plate[data-layout="editorial"] .plate-portrait {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 50% 35%, rgba(180,130,80,0.18), transparent 60%),
    linear-gradient(180deg, #C9B393 0%, #A88B62 100%);
  border-bottom: 1px solid var(--rule);
}
.plate[data-layout="editorial"] .plate-body {
  padding: 22px 22px 26px;
  position: relative;
}

/* ===== Layout B — MEDALLION ===== */
.plate[data-layout="medallion"] {
  padding: 32px 22px 26px;
  text-align: center;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 0;
}
.plate[data-layout="medallion"] .plate-portrait {
  width: 140px; height: 140px;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  margin-bottom: 18px;
  background:
    radial-gradient(circle at 50% 35%, rgba(229,199,122,0.22), transparent 65%),
    linear-gradient(180deg, var(--night) 0%, var(--copper) 100%);
  border: 1px solid var(--rule-2);
}
.plate[data-layout="medallion"] .plate-portrait::after {
  content: '';
  position: absolute; inset: 4px;
  border: 1px solid var(--gilt);
  border-radius: 50%;
  opacity: 0.4;
  pointer-events: none;
  z-index: 2;
}
.plate[data-layout="medallion"] .plate-body { width: 100%; }
.plate[data-layout="medallion"] .plate-latin {
  border: none; padding: 0; margin: 8px 0 0;
  font-size: 12px;
}

/* ===== Layout C — CARTOUCHE ===== */
.plate[data-layout="cartouche"] {
  padding: 18px;
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 18px;
  align-items: start;
  border: 1px solid var(--rule-2);
  background:
    linear-gradient(180deg, rgba(255,237,200,0.18), transparent 50%),
    var(--void);
}
.plate[data-layout="cartouche"] .plate-portrait {
  width: 92px; height: 116px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 50% 35%, rgba(229,199,122,0.18), transparent 60%),
    linear-gradient(180deg, var(--night) 0%, var(--copper) 100%);
  border: 1px solid var(--rule-2);
  flex-shrink: 0;
}
.plate[data-layout="cartouche"] .plate-portrait::after {
  /* corner ticks */
  content: '';
  position: absolute; inset: 4px;
  background:
    linear-gradient(135deg, var(--gilt) 0 1px, transparent 1px) top left / 6px 6px no-repeat,
    linear-gradient(225deg, var(--gilt) 0 1px, transparent 1px) top right / 6px 6px no-repeat,
    linear-gradient(45deg,  var(--gilt) 0 1px, transparent 1px) bottom left / 6px 6px no-repeat,
    linear-gradient(315deg, var(--gilt) 0 1px, transparent 1px) bottom right / 6px 6px no-repeat;
  pointer-events: none;
  z-index: 2;
}
.plate[data-layout="cartouche"] .plate-body { padding: 0; }
.plate[data-layout="cartouche"] .plate-no {
  position: static;
  display: block;
  margin-bottom: 4px;
}
.plate[data-layout="cartouche"] .plate-name { font-size: 22px; }
.plate[data-layout="cartouche"] .plate-latin {
  font-size: 11px;
  border: none; padding: 0;
  margin-top: 6px;
}

/* ===== Layout LIST (density override) ===== */
/* Newspaper-style ledger row: plate · portrait · name+role · talk title · day */
.plate-grid:not([data-density="list"]) .plate-talk-list,
.plate-grid:not([data-density="list"]) .plate-day-mono { display: none; }

.plate-grid[data-density="list"] {
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.plate-grid[data-density="list"] .plate {
  display: grid !important;
  grid-template-columns: 70px 56px minmax(220px, 1.4fr) minmax(220px, 1.6fr) auto;
  align-items: center;
  gap: 20px;
  padding: 18px 20px !important;
  border: none !important;
  border-bottom: 1px solid var(--rule) !important;
  margin: 0;
  text-align: left;
  background: transparent;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.plate-grid[data-density="list"] .plate:last-child { border-bottom: none !important; }
.plate-grid[data-density="list"] .plate:hover { background: rgba(0,0,0,0.02); }

/* Plate number — italic gilt, left rail */
.plate-grid[data-density="list"] .plate-no {
  position: static !important;
  font-size: 13px;
  font-style: italic;
  color: var(--gilt);
  letter-spacing: 0.18em;
  white-space: nowrap;
}
/* Portrait — small circular */
.plate-grid[data-density="list"] .plate-portrait {
  width: 56px !important; height: 56px !important;
  border-radius: 50% !important;
  margin: 0 !important;
  overflow: hidden;
}
.plate-grid[data-density="list"] .plate-portrait::after,
.plate-grid[data-density="list"] .plate-portrait::before { display: none !important; }
.plate-grid[data-density="list"] .plate-pullquote { display: none !important; }
.plate-grid[data-density="list"] .plate-initials {
  font-size: 22px !important;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Body container: holds name + role */
.plate-grid[data-density="list"] .plate-body {
  padding: 0 !important;
  text-align: left;
  width: auto;
  display: block;
}
.plate-grid[data-density="list"] .plate-eyebrow { display: none !important; }
.plate-grid[data-density="list"] .plate-name {
  font-size: 19px !important;
  margin: 0 0 2px !important;
  line-height: 1.15 !important;
}
.plate-grid[data-density="list"] .plate-role {
  font-size: 12px !important;
  font-style: italic;
  color: var(--muted);
  margin: 0 !important;
  display: block !important;
}
.plate-grid[data-density="list"] .plate-affil {
  display: none !important;
}
.plate-grid[data-density="list"] .plate-latin { display: none !important; }
.plate-grid[data-density="list"] .plate-talk-title {
  display: none !important;
}
.plate-grid[data-density="list"] .plate-talk-list {
  display: block;
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ink);
  margin: 0;
  line-height: 1.35;
}
.plate-grid[data-density="list"] .plate-affil-row {
  display: none !important;
}
.plate-grid[data-density="list"] .plate-day-mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* ============================================================
   PORTRAIT TREATMENTS — switched per .plate-portrait[data-portrait=…]
   ============================================================ */
.plate-portrait img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity 360ms ease, filter 360ms ease, transform 700ms cubic-bezier(.2,.8,.2,1);
  z-index: 1;
}

/* Initials fallback — sits underneath the img; shown if no img or img errors */
.plate-portrait .plate-initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 200;
  font-size: clamp(36px, 5vw, 72px);
  color: var(--gilt);
  letter-spacing: -0.02em;
  opacity: 0.4;
  z-index: 0;
}
/* When img is loaded, hide initials */
.plate-portrait:has(img:not([style*="display: none"])) .plate-initials,
.plate-portrait[data-portrait="initials"] .plate-initials { /* always visible in initials treatment */ }
.plate-portrait[data-portrait="initials"] .plate-initials {
  z-index: 2;
  opacity: 1;
  font-size: clamp(40px, 5vw, 84px);
}

/* Engraving: walnut duotone, legible on the cream paper.
   Less sepia-yellow, more red-brown — coffee, cocoa, walnut shell. */
.plate-portrait[data-portrait="engraving"] img,
.op-portrait img {
  filter:
    grayscale(0.6)
    contrast(1.22)
    sepia(0.28)
    hue-rotate(-22deg)
    saturate(0.85)
    brightness(0.86);
  mix-blend-mode: multiply;
}

/* Silhouette: pure shape, no detail */
.plate-portrait[data-portrait="silhouette"] img {
  filter:
    grayscale(1)
    brightness(0)
    contrast(1);
  opacity: 0.65;
  mix-blend-mode: multiply;
}
.plate-portrait[data-portrait="silhouette"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 35%, rgba(182,138,62,0.18), transparent 70%);
  pointer-events: none;
  z-index: 2;
}

/* Initials-on-paper: hide image, show initials (handled by .plate-initials above) */
.plate-portrait[data-portrait="initials"] img { display: none; }
.plate-portrait[data-portrait="initials"]::before {
  /* corner crossings */
  content: '';
  position: absolute; inset: 14px;
  border: 1px solid var(--rule-2);
  pointer-events: none;
  z-index: 1;
}

/* Engraving: pull-quote reveal on hover */
.plate-pullquote {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26,18,8,0.92), rgba(26,18,8,0.78));
  color: var(--copper);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
  opacity: 0;
  transition: opacity 280ms ease;
  z-index: 5;
  pointer-events: none;
}
.plate-pullquote::before {
  content: '\201C';
  position: absolute;
  top: 12px; left: 16px;
  font-size: 36px;
  color: var(--gilt);
  font-style: normal;
  line-height: 1;
  opacity: 0.7;
}
.plate-pullquote::after {
  content: '\201D';
  position: absolute;
  bottom: 0; right: 16px;
  font-size: 36px;
  color: var(--gilt);
  font-style: normal;
  line-height: 1;
  opacity: 0.7;
}
.plate:hover .plate-pullquote { opacity: 1; }
.plate:hover .plate-portrait img { transform: scale(1.04); }

/* Body typography */
.plate-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 8px;
}
.plate-eyebrow-sep {
  display: inline-block;
  margin: 0 0.5em;
  color: var(--gilt, #b08d3f);
  opacity: 0.7;
  transform: translateY(-1px);
}
.plate-eyebrow-track {
  color: var(--ink);
  opacity: 0.78;
}
.plate-eyebrow-track em {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--muted-2);
  margin-left: 2px;
}
.plate-name {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 300;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 8px;
  text-wrap: balance;
}
.plate-role {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--paper-warm);
  margin-bottom: 2px;
}
.plate-affil {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 14px;
}
/* affil-row only used in list density; hide everywhere else */
.plate-affil-row { display: none; }
.plate-divider {
  width: 32px;
  height: 1px;
  background: var(--gilt);
  margin: 0 0 12px;
  opacity: 0.5;
}
.plate[data-layout="medallion"] .plate-divider { margin: 0 auto 12px; }
.plate-talk-title {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.35;
  color: var(--paper-warm);
  margin: 0 0 8px;
}
.plate-latin {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 11px;
  line-height: 1.4;
  color: var(--gilt);
  border-left: 1px solid var(--gilt);
  padding-left: 10px;
  opacity: 0.85;
  margin: 8px 0 0;
}
.plate[data-layout="medallion"] .plate-latin { border: none; padding: 0; opacity: 0.7; }

/* ============================================================
   § PENDING PLATE — placeholder for unannounced speaker
   ============================================================ */
.plate.is-pending {
  cursor: default;
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0,
      transparent 8px,
      rgba(40,28,12,0.025) 8px,
      rgba(40,28,12,0.025) 9px
    ),
    var(--void);
}
.plate.is-pending:hover { transform: none; box-shadow: none; border-color: var(--rule); }
.plate.is-pending .plate-portrait {
  background: var(--night);
}
.plate.is-pending .plate-portrait::after {
  content: 'PORTRAIT FORTHCOMING';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--muted-3);
  z-index: 2;
}

/* ============================================================
   § COMPOSITOR'S NOTE — the closing strip
   ============================================================ */
.compositor-note {
  margin-top: 72px;
  padding: 36px 0;
  border-top: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule-2);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 36px;
  align-items: center;
}
.compositor-note .glyph {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 32px;
  color: var(--gilt);
  line-height: 1;
}
.compositor-note .body {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  color: var(--paper-warm);
  line-height: 1.5;
}
.compositor-note .body em {
  color: var(--gilt);
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.compositor-note .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-2);
  text-align: right;
}

/* ============================================================
   § BECOME A PLATE — the CFP CTA
   ============================================================ */
.become-plate {
  margin-top: 96px;
  padding: 80px 0;
  background:
    radial-gradient(ellipse 900px 400px at 50% 30%, rgba(182,138,62,0.10), transparent 70%),
    var(--night);
  border-top: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule-2);
  position: relative;
  overflow: hidden;
}
.become-plate::before {
  content: 'CFP';
  position: absolute;
  top: -40px;
  right: -20px;
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 200;
  font-size: 320px;
  color: var(--gilt);
  opacity: 0.06;
  letter-spacing: -0.05em;
  pointer-events: none;
  line-height: 1;
}
.become-plate-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
}
.become-plate .eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gilt);
  margin-bottom: 18px;
}
.become-plate h2 {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 200;
  font-size: clamp(38px, 4.5vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 24px;
}
.become-plate h2 em {
  font-style: italic;
  color: var(--gilt);
  font-weight: 300;
}
.become-plate p {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 18px;
  line-height: 1.55;
  color: var(--paper-warm);
  margin: 0 0 28px;
  max-width: 540px;
}
.become-plate-cta-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.become-plate-btn {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 14px 24px;
  text-decoration: none;
  transition: all 200ms ease;
  cursor: pointer;
}
.become-plate-btn.primary {
  background: var(--ink);
  color: var(--copper);
  border: 1px solid var(--ink);
}
.become-plate-btn.primary:hover {
  background: var(--gilt);
  border-color: var(--gilt);
}
.become-plate-btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.become-plate-btn.ghost:hover {
  background: var(--ink);
  color: var(--copper);
}
.become-plate-deadline {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: var(--muted);
}

.become-plate-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 32px;
  border-left: 1px solid var(--rule-2);
  padding-left: 56px;
}
.become-plate-stats .stat .k {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 6px;
}
.become-plate-stats .stat .v {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 200;
  font-size: 32px;
  line-height: 1;
  color: var(--ink);
  display: block;
  letter-spacing: -0.02em;
}
.become-plate-stats .stat .v em {
  font-style: italic;
  color: var(--gilt);
  font-weight: 300;
}
.become-plate-stats .stat .sub {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
  display: block;
  margin-top: 4px;
}

/* ============================================================
   § PROOF SHEET MODAL — opens on plate click
   ============================================================ */
.proof-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 10, 4, 0.72);
  backdrop-filter: blur(4px);
  z-index: 9000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px;
  opacity: 0;
  transition: opacity 240ms ease;
}
.proof-sheet-overlay.is-open {
  display: flex;
  opacity: 1;
}
.proof-sheet {
  background: var(--void);
  width: 100%;
  max-width: 980px;
  max-height: 92vh;
  overflow: auto;
  position: relative;
  border: 1px solid var(--gilt);
  box-shadow:
    0 40px 80px -20px rgba(0,0,0,0.6),
    0 0 0 8px rgba(182,138,62,0.04);
  transform: translateY(12px);
  transition: transform 320ms cubic-bezier(.2,.8,.2,1);
}
.proof-sheet-overlay.is-open .proof-sheet { transform: translateY(0); }

.proof-sheet-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  padding: 28px 36px 20px;
  border-bottom: 1px solid var(--rule);
  background:
    radial-gradient(ellipse 600px 200px at 30% 0%, rgba(182,138,62,0.10), transparent 70%),
    var(--void);
}
.proof-sheet-head .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-2);
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 8px;
}
.proof-sheet-head .meta .plate-no-sheet {
  color: var(--gilt);
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.15em;
  text-transform: none;
}
.proof-sheet-head h2 {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 200;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.proof-sheet-head h2 em {
  font-style: italic;
  color: var(--gilt);
  font-weight: 300;
}
.proof-sheet-close {
  background: transparent;
  border: 1px solid var(--rule-2);
  color: var(--muted);
  width: 36px; height: 36px;
  cursor: pointer;
  font-size: 16px;
  font-family: 'Newsreader', Georgia, serif;
  transition: all 180ms ease;
  flex-shrink: 0;
}
.proof-sheet-close:hover {
  border-color: var(--gilt);
  color: var(--gilt);
}

.proof-sheet-body {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 36px;
  padding: 32px 36px 28px;
}
.proof-sheet-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(ellipse 80% 70% at 50% 35%, rgba(229,199,122,0.18), transparent 60%),
    linear-gradient(180deg, var(--night) 0%, var(--copper) 100%);
  border: 1px solid var(--rule-2);
  overflow: hidden;
}
.proof-sheet-portrait img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Walnut duotone — matches the chapter portraits */
  filter:
    grayscale(0.78)
    contrast(1.15)
    sepia(0.32)
    hue-rotate(-22deg)
    saturate(0.85)
    brightness(0.86);
  mix-blend-mode: multiply;
}
.proof-sheet-portrait::after {
  /* corner ticks */
  content: '';
  position: absolute; inset: 8px;
  background:
    linear-gradient(135deg, var(--gilt) 0 1px, transparent 1px) top left / 10px 10px no-repeat,
    linear-gradient(225deg, var(--gilt) 0 1px, transparent 1px) top right / 10px 10px no-repeat,
    linear-gradient(45deg,  var(--gilt) 0 1px, transparent 1px) bottom left / 10px 10px no-repeat,
    linear-gradient(315deg, var(--gilt) 0 1px, transparent 1px) bottom right / 10px 10px no-repeat;
  pointer-events: none;
  z-index: 2;
}
.proof-sheet-info .role-line {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 17px;
  color: var(--paper-warm);
  margin-bottom: 4px;
}
.proof-sheet-info .affil-line {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 24px;
}
.proof-sheet-info .latin {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: var(--gilt);
  border-left: 2px solid var(--gilt);
  padding-left: 14px;
  margin-bottom: 4px;
}
.proof-sheet-info .latin-en {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 13px;
  color: var(--muted);
  padding-left: 16px;
  margin-bottom: 28px;
}
.proof-sheet-info .talk-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 6px;
}
.proof-sheet-info .talk-title {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 24px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 14px;
}
.proof-sheet-info .abstract {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--paper-warm);
  margin: 0 0 28px;
}
.proof-sheet-info .bio-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 6px;
}
.proof-sheet-info .bio {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--paper-warm);
  margin: 0;
}

.proof-sheet-foot {
  border-top: 1px solid var(--rule);
  padding: 16px 36px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  background: var(--night);
}
.proof-sheet-foot .day {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: var(--paper-warm);
}
.proof-sheet-foot .seal {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gilt);
  display: flex; gap: 10px; align-items: center;
}
.proof-sheet-foot .seal::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--gilt);
  border-radius: 50%;
}

/* Responsive ============================================================ */
@media (max-width: 880px) {
  .op-plate { grid-template-columns: 1fr; gap: 40px; }
  .plate-grid[data-density="4"] { grid-template-columns: repeat(3, 1fr); }
  .become-plate-inner { grid-template-columns: 1fr; gap: 40px; }
  .become-plate-stats { border-left: none; padding-left: 0; padding-top: 32px; border-top: 1px solid var(--rule-2); }
  .proof-sheet-body { grid-template-columns: 180px 1fr; gap: 24px; }
}
@media (max-width: 760px) {
  .plate-grid[data-density="3"],
  .plate-grid[data-density="4"] { grid-template-columns: repeat(2, 1fr); }
  .guild-filter { flex-wrap: wrap; }
  .guild-filter-label { width: 100%; border-right: none; border-bottom: 1px solid var(--rule); padding: 0 0 12px; }
  .compositor-note { grid-template-columns: 1fr; gap: 16px; }
  .compositor-note .meta { text-align: left; }
  .proof-sheet-body { grid-template-columns: 1fr; }
  .proof-sheet-portrait { max-width: 220px; }
}
@media (max-width: 520px) {
  .plate-grid[data-density="3"],
  .plate-grid[data-density="4"] { grid-template-columns: 1fr; }
}


/* ============================================================
   § OPENING PLATE — variant B: understudies (after the hero plate)
   ============================================================ */
.op-understudies-rule {
  display: flex; align-items: center; gap: 18px;
  margin: 64px auto 28px;
  max-width: 1400px;
}
.op-understudies-rule .rule {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gilt-2) 30%, var(--gilt-2) 70%, transparent);
  opacity: 0.6;
}
.op-understudies-rule .lab {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic; font-weight: 300;
  color: var(--paper-warm);
  font-size: 14px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.op-understudies {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 1400px;
  margin: 0 auto;
}
.op-understudy {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 24px;
  align-items: start;
  padding: 24px;
  border: 1px solid var(--rule-2);
  background: rgba(244,236,218,0.03);
  cursor: pointer;
  transition: background 280ms ease, transform 320ms cubic-bezier(.2,.8,.2,1), border-color 280ms ease;
  position: relative;
}
.op-understudy::before {
  /* corner gilt ticks */
  content: '';
  position: absolute; top: 6px; left: 6px;
  width: 12px; height: 12px;
  border-top: 1px solid var(--gilt);
  border-left: 1px solid var(--gilt);
  opacity: 0.5;
}
.op-understudy::after {
  content: '';
  position: absolute; bottom: 6px; right: 6px;
  width: 12px; height: 12px;
  border-bottom: 1px solid var(--gilt);
  border-right: 1px solid var(--gilt);
  opacity: 0.5;
}
.op-understudy:hover,
.op-understudy:focus-visible {
  background: rgba(255,214,107,0.05);
  border-color: var(--gilt);
  transform: translateY(-2px);
  outline: none;
}
.op-understudy:hover::before,
.op-understudy:hover::after { opacity: 1; }

.op-und-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--night);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.op-und-portrait img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter:
    grayscale(0.6)
    sepia(0.42)
    saturate(0.78)
    hue-rotate(-12deg)
    contrast(1.08)
    brightness(0.96);
  mix-blend-mode: multiply;
  z-index: 2;
}
.op-und-plate-no {
  position: absolute;
  top: 8px; right: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gilt);
  z-index: 3;
}
.op-und-initials {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic; font-weight: 200;
  font-size: 56px;
  color: var(--paper-warm);
  opacity: 0.18;
  z-index: 1;
}
.op-und-body { padding-top: 4px; min-width: 0; }
.op-und-day {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--filament);
  margin-bottom: 10px;
}
.op-und-name {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 300; font-style: normal;
  font-size: 24px;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.op-und-name em { color: var(--filament); font-style: italic; }
.op-und-affil {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic; font-weight: 300;
  font-size: 13px;
  color: var(--paper-warm);
  margin-bottom: 14px;
  line-height: 1.35;
}
.op-und-talk {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 300;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.4;
  padding-top: 12px;
  border-top: 1px solid var(--rule-2);
  margin-bottom: 12px;
}
.op-und-cta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gilt);
}

/* ============================================================
   § OPENING PLATE — variant C: equal-weight triptych
   ============================================================ */
.op-triptych {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1400px;
  margin: 0 auto;
}
.op-tri-card {
  display: flex; flex-direction: column;
  cursor: pointer;
  background: transparent;
  position: relative;
  padding-top: 8px;
  transition: transform 320ms cubic-bezier(.2,.8,.2,1);
}
.op-tri-card::before {
  /* gilt rule above each card — like an altarpiece column */
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gilt) 20%, var(--gilt) 80%, transparent);
  opacity: 0.55;
}
.op-tri-card:hover,
.op-tri-card:focus-visible { transform: translateY(-3px); outline: none; }
.op-tri-card:hover::before { opacity: 1; }
.op-tri-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--night);
  border: 1px solid var(--rule);
  overflow: hidden;
  margin-top: 18px;
  margin-bottom: 22px;
}
.op-tri-portrait img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter:
    grayscale(0.6)
    sepia(0.42)
    saturate(0.78)
    hue-rotate(-12deg)
    contrast(1.08)
    brightness(0.96);
  mix-blend-mode: multiply;
  z-index: 2;
  transition: transform 600ms cubic-bezier(.2,.8,.2,1);
}
.op-tri-card:hover .op-tri-portrait img { transform: scale(1.03); }
.op-tri-plate-no {
  position: absolute;
  top: 10px; right: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gilt);
  z-index: 3;
}
.op-tri-initials {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic; font-weight: 200;
  font-size: 96px;
  color: var(--paper-warm);
  opacity: 0.18;
  z-index: 1;
}
.op-tri-body { padding: 0 4px; }
.op-tri-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--filament);
  margin-bottom: 12px;
}
.op-tri-name {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 300;
  font-size: 28px;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: -0.015em;
}
.op-tri-name em { color: var(--filament); font-style: italic; }
.op-tri-affil {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic; font-weight: 300;
  font-size: 14px;
  color: var(--paper-warm);
  line-height: 1.4;
}
.op-triptych-foot {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  margin: 36px auto 0;
}

/* Responsive — variants B & C */
@media (max-width: 1024px) {
  .op-triptych { grid-template-columns: 1fr 1fr; }
  .op-triptych .op-tri-card:nth-child(3) { grid-column: span 2; max-width: 50%; margin: 0 auto; }
}
@media (max-width: 760px) {
  .op-understudies { grid-template-columns: 1fr; }
  .op-understudy { grid-template-columns: 96px 1fr; gap: 16px; padding: 16px; }
  .op-und-name { font-size: 20px; }
  .op-triptych { grid-template-columns: 1fr; }
  .op-triptych .op-tri-card:nth-child(3) { grid-column: auto; max-width: none; }
}


/* ============================================================
   OPENING PLATE · variant D: EDITORIAL SPREAD (default)
   Ceremonial joint-plenary layout — three portraits in a row,
   equal billing, one shared headline + talk + CTA. The SSLeay
   reunion gets one stage, not a hero + two understudies.
   ============================================================ */
.opening-plate .container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }

.op-edit-head {
  text-align: center;
  margin: 0 auto 44px;
  max-width: 780px;
}
.op-edit-stamp {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--filament-d);
  margin-bottom: 18px;
}
.op-edit-h {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 200;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 16px;
}
.op-edit-h .roman { font-weight: 300; color: var(--paper-warm); }
.op-edit-h em {
  font-style: italic;
  background: linear-gradient(180deg, #FFE9A8 0%, #C99A4A 50%, #8A6620 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 0 4px;
}
.op-edit-arc {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--filament-d);
  font-weight: 600;
  margin-top: 8px;
}
.op-edit-sub {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.55;
  color: var(--paper-warm);
  margin: 0;
  text-wrap: pretty;
}
.op-edit-sub em { font-style: italic; color: var(--filament-d); font-weight: 400; }

.op-edit-triptych {
  list-style: none;
  padding: 0;
  margin: 0 0 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
}
.op-edit-card {
  position: relative;
  padding: 28px 24px 30px;
  background:
    radial-gradient(120% 80% at 30% 0%, rgba(229,199,122,0.10), transparent 60%),
    var(--paper, #FBF5E5);
  border: 1px solid var(--rule);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 1px 0 rgba(229,199,122,0.22),
    0 0 28px -6px rgba(229,199,122,0.30),
    0 14px 28px -14px rgba(40,28,8,0.30);
  transition: transform 320ms cubic-bezier(.2,.7,.3,1),
              border-color 320ms ease,
              box-shadow 320ms ease;
}
.op-edit-card:hover {
  transform: translateY(-3px);
  border-color: rgba(182,138,62,0.55);
}
/* Gilt corner ticks — same vocabulary as the other plates on the site */
.op-edit-card::before,
.op-edit-card::after {
  content: '';
  position: absolute;
  width: 12px; height: 12px;
  pointer-events: none;
  opacity: 0.75;
}
.op-edit-card::before {
  top: 8px; left: 8px;
  border-top: 1px solid var(--filament);
  border-left: 1px solid var(--filament);
}
.op-edit-card::after {
  bottom: 8px; right: 8px;
  border-bottom: 1px solid var(--filament);
  border-right: 1px solid var(--filament);
}
.op-edit-link {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-decoration: none;
  color: inherit;
}
.op-edit-portrait {
  width: 100%;
  aspect-ratio: 4/5;
  max-height: 280px;
  overflow: hidden;
  border: 1px solid rgba(182,138,62,0.42);
  background: var(--night, #EFE5CF);
  display: grid;
  place-items: center;
}
.op-edit-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  filter: saturate(0.92);
  transition: transform 600ms ease, filter 240ms ease;
}
.op-edit-card:hover .op-edit-portrait img {
  transform: scale(1.04);
  filter: saturate(1);
}
.op-edit-portrait.no-img,
.op-edit-portrait:has(.op-edit-mono) {
  background:
    radial-gradient(80% 60% at 50% 30%, rgba(229,199,122,0.22), transparent 70%),
    linear-gradient(180deg, #F0E1C0 0%, #E5D5AE 100%);
}
.op-edit-mono {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 200;
  font-size: clamp(64px, 8vw, 96px);
  line-height: 1;
  color: var(--filament-d);
  letter-spacing: -0.04em;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
.op-edit-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.op-edit-card-plate {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--filament-d);
  font-weight: 600;
}
.op-edit-card-name {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 200;
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 2px 0;
}
.op-edit-card-name em {
  font-style: italic;
  color: var(--filament-d);
  font-weight: 300;
}
.op-edit-card-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.4;
}
.op-edit-card-affil {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
  color: var(--paper-warm);
}

/* === Shared talk + abstract === */
.op-edit-talk {
  text-align: center;
  margin: 0 auto 40px;
  max-width: 760px;
  padding: 32px 24px 0;
  border-top: 1px solid var(--rule-2);
}
.op-edit-talk-lbl {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--filament-d);
  margin-bottom: 16px;
}
.op-edit-talk-title {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 18px;
  text-wrap: balance;
}
.op-edit-talk-abstract {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  color: var(--paper-warm);
  margin: 0;
  text-wrap: pretty;
}

/* === Foot — meta + CTA === */
.op-edit-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  padding: 24px 0 8px;
  border-top: 1px dotted var(--rule-2);
  max-width: 760px;
  margin: 0 auto;
}
.op-edit-foot-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--filament-d);
}
.op-edit-foot-cta {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 22px;
  background: linear-gradient(180deg, #F4ECDA 0%, #E5D5AE 100%);
  color: #1A1208;
  text-decoration: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid var(--filament-d);
  box-shadow:
    inset 0 1px 0 rgba(255,243,200,0.55),
    0 0 0 3px rgba(244,236,218,0.95),
    0 0 0 4px rgba(201,154,74,0.40),
    0 6px 14px rgba(40,28,8,0.25);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.op-edit-foot-cta:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,243,200,0.7),
    0 0 0 3px rgba(244,236,218,0.95),
    0 0 0 4px rgba(229,199,122,0.65),
    0 8px 18px rgba(40,28,8,0.35);
}
.op-edit-foot-cta .arr {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  transition: transform 200ms ease;
}
.op-edit-foot-cta:hover .arr { transform: translateX(4px); }

/* "Briefing — coming soon" placeholder: same plate dimensions, no
   hover lift, muted gilt frame, italic copy. Used until the briefing
   document is written and uploaded; swap the <span> back to <a> with
   the briefing href when ready. */
.op-edit-foot-cta--soon {
  background: transparent;
  color: var(--muted, #6B5A36);
  border-color: var(--rule-2, rgba(40,28,12,0.22));
  box-shadow: none;
  cursor: default;
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 14px;
}
.op-edit-foot-cta--soon em {
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--filament-d, #8a6620);
  margin-right: 6px;
}
.op-edit-foot-cta--soon:hover { transform: none; box-shadow: none; }

@media (max-width: 880px) {
  .op-edit-triptych { grid-template-columns: 1fr; gap: 18px; }
  .op-edit-h { font-size: clamp(32px, 8vw, 48px); }
}