@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Space+Grotesk:wght@500;700&family=Oxanium:wght@400;500;600;700&family=Big+Shoulders+Display:wght@700;800;900&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  /* Dark, machine-like base — gun-metal greys and deep blacks. */
  --bg: #0e1110;
  --panel: #15191a;
  --panel-2: #1c2122;
  --ink: #c9c4b6;          /* slightly off-white (bone/paper) for type on dark */
  --muted: #8a8f8c;
  --rule: #2a2f30;
  --rule-strong: #e8e3d4;  /* off-white "paper" rule for high contrast moments */

  /* Preview card surface — flat gray with darker gray drop shadow */
  --tan: #b9bcbe;
  --tan-deep: #9a9d9f;
  --tan-ink: #111315;
  --tan-muted: #3d4144;
  --tan-shadow: #2d2f31;

  /* Retro CRT phosphor green — used sparingly and with intent. */
  --dusty-green: #8aa66a;
  --crt: #8aa66a;
  --crt-deep: #1a2614;
  --cobalt: #5e7ba3;

  /* Strategic accent borders — vintage sci-fi paperback palette,
     muted/warm, never bright. Used as ribbons, edge marks, and
     "ticker" lines rather than flat fills. */
  --hi-amber:  #f1a743;
  --hi-blue:   #8aa66a;
  --hi-red:    #b8584a;
  --accent:    #f1a743;

  /* Subtle screen-print halftone */
  --halftone: radial-gradient(rgba(242,239,230,0.12) 1px, transparent 1.4px);
  --halftone-size: 6px 6px;

  /* Scanline overlay for hero / CRT moments */
  --scanlines: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.28) 3px,
    rgba(0,0,0,0) 4px
  );
}

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

html, body { margin: 0; padding: 0; }
html { background: #000; }

body {
  background: var(--bg);
  background-image: var(--halftone);
  background-size: var(--halftone-size);
  background-attachment: fixed;
  /* iOS Safari treats fixed-attachment as locally scrolled, which causes
     scroll jank on the home hero. Mobile widths drop to scroll. */
  color: var(--ink);
  font-family: 'Oxanium', 'Space Grotesk', ui-monospace, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }
footer { flex-shrink: 0; }

h1, h2, h3, h4 {
  font-family: 'Big Shoulders Display', 'Space Grotesk', system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: 0.005em;
  color: var(--ink);
  text-transform: uppercase;
  margin: 0 0 1rem;
}

h1 { font-size: 2.6rem; }
h2 { font-size: 1.9rem; margin: 2.25rem 0 1rem; }
h3 { font-size: 1.3rem; margin: 1.75rem 0 0.75rem; letter-spacing: 0.01em; }

p { margin: 0 0 1.1rem; }

a {
  color: var(--ink);
  text-decoration: none;
}

a:hover {
  color: var(--dusty-green);
}

header a, header a:hover,
footer a, footer a:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}
header a:hover { color: var(--hi-blue); text-decoration-color: var(--hi-blue); }
footer a:hover { color: var(--hi-blue); text-decoration-color: var(--hi-blue); }

strong { font-weight: 700; color: var(--ink); }
em { font-style: italic; }

::selection { background: var(--crt); color: #000; }

main {
  max-width: none;
  margin: 0;
  padding: 2.5rem 4.5rem 1.5rem;
}

/* Header — flat black, white wordmark + chunky uppercase nav */
header {
  background: transparent;
  color: var(--ink);
  padding: 2rem 4.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  position: relative;
}

header .site-name a {
  display: inline-block;
  line-height: 0;
  text-decoration: none;
}

header .site-logo {
  display: block;
  height: 44px;
  width: auto;
  opacity: 0;
}
header .site-name a {
  position: relative;
  display: inline-block;
}
header .site-name a::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--ink);
  -webkit-mask-image: url('/images/logo.jpg');
  mask-image: url('/images/logo.jpg');
  -webkit-mask-mode: luminance;
  mask-mode: luminance;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: left center;
  mask-position: left center;
  pointer-events: none;
}

header .site-page-title {
  margin: 0;
  margin-top: -1px;
  margin-right: auto;
  font-family: 'Big Shoulders Display', 'Space Grotesk', system-ui, sans-serif;
  font-size: 2.134rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.4;
  min-width: 0;
  flex: 0 1 auto;
  overflow-wrap: anywhere;
}

header .site-page-title .hl-black {
  background: transparent;
  color: var(--hi-amber);
  padding: 0;
  line-height: 1.4;
  box-shadow: none;
}

header nav {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
}

header nav a {
  font-family: 'Big Shoulders Display', 'Space Grotesk', system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 0.35rem 0.1rem;
  border-bottom: 3px solid transparent;
}

header nav a:hover {
  color: var(--ink);
  opacity: 0.2;
}

header nav .nav-sep {
  font-family: 'Big Shoulders Display', 'Space Grotesk', system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  opacity: 0.4;
  user-select: none;
}

header .nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--ink);
  padding: 0.55rem 0.6rem;
  cursor: pointer;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
}

header .nav-toggle-bar {
  display: block;
  height: 3px;
  background: var(--ink);
  width: 100%;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

header .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
header .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
header .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

@media (max-width: 720px) {
  header {
    padding: 1.25rem 1.5rem;
    flex-wrap: wrap;
    padding-right: 4.5rem;
  }
  header .site-page-title {
    flex-basis: 100%;
    order: 5;
    margin-top: 0.75rem;
    margin-right: 0;
    font-size: 1.642rem;
    padding-right: 0;
  }
  header .nav-toggle {
    display: flex;
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    z-index: 30;
  }
  header nav {
    display: none;
    position: absolute;
    top: 100%;
    right: 1.5rem;
    left: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    margin-top: 0.5rem;
    padding: 0.5rem 0;
    background: var(--bg);
    border: 1px solid var(--ink);
    min-width: 12rem;
    z-index: 25;
    box-shadow: 4px 4px 0 var(--ink);
  }
  header nav.is-open { display: flex; }
  header nav a {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1.1rem;
    border-bottom: none;
  }
}

header nav .nav-item { position: relative; }

header nav .dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0.4rem 0;
  list-style: none;
  background: #000;
  border: 1px solid var(--hi-blue);
  min-width: 9rem;
  display: none;
  z-index: 100;
}

header nav .nav-item:hover .dropdown,
header nav .nav-item:focus-within .dropdown { display: block; }

header nav .dropdown li { list-style: none; }
header nav .dropdown a { display: block; padding: 0.4rem 0.9rem; white-space: nowrap; }

/* Eyebrow / small label — terminal feel */
.eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crt);
  margin: 0 0 0.75rem;
  font-weight: 600;
}

.eyebrow::before { content: "› "; color: var(--crt); }

/* Buttons */
.btn {
  display: inline-block;
  font-family: 'Big Shoulders Display', 'Space Grotesk', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1rem;
  padding: 0.7rem 1.25rem;
  border: 1px solid var(--ink);
  text-decoration: none;
  line-height: 1;
  transition: transform 0.05s ease, box-shadow 0.05s ease;
}

.btn:hover { transform: translate(-2px, -2px); }

.btn-primary {
  background: var(--ink);
  color: #000;
  border-color: var(--ink);
}
.btn-primary:hover {
  background: var(--dusty-green);
  border-color: var(--dusty-green);
  color: #000;
  box-shadow: 4px 4px 0 var(--ink);
  text-decoration: none;
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-ghost:hover {
  background: transparent;
  color: var(--dusty-green);
  border-color: var(--dusty-green);
  box-shadow: 4px 4px 0 var(--dusty-green);
  text-decoration: none;
}

.btn.is-disabled,
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  background: transparent;
  color: var(--muted);
  border-color: var(--muted);
  box-shadow: none;
  transform: none;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
}

.link-arrow {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1.05rem;
  color: var(--dusty-green);
  text-decoration: none;
}
.link-arrow:hover { color: var(--ink); }

/* Home hero — CRT panel: black screen, phosphor green frame + scanlines.
   Double border treatment: thick outer + thin inner accent rule. */
.hero-home {
  --accent: var(--hi-red);
  position: relative;
  background: #000;
  border: 1px solid var(--ink);
  padding: 2.25rem 1.75rem;
  margin: 1rem 0 2.5rem;
  overflow: hidden;
  box-shadow:
    0 0 0 4px #000,
    14px 14px 0 var(--tan-shadow);
}

.hero-home > * { position: relative; z-index: 1; }

.hero-home::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scanlines);
  pointer-events: none;
  z-index: 0;
}

.home-headline {
  font-family: 'Big Shoulders Display', sans-serif;
  font-size: clamp(2.2rem, 5.5vw, 3.4rem);
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0 0 1rem;
  font-weight: 900;
  color: var(--ink);
}

.home-sub {
  font-size: 1.05rem;
  max-width: 58ch;
  margin: 0 0 0.75rem;
  color: var(--ink);
}

/* Sections — dark panels wrapped in the standard tri-border:
   6px color (innermost) → 2px black hairline → 5px off-white outer.
   Color is set per-section via .accent-* modifier:
     yellow = corporate, blue = events, red = published works */
.home-section {
  --accent: var(--hi-amber);
  background: var(--panel);
  border: 1px solid var(--ink);
  padding: 1.75rem;
  margin: 1rem 0 2.25rem;
  position: relative;
  box-shadow:
    0 0 0 4px #000,
    14px 14px 0 var(--tan-shadow);
}

/* Henchmen feature — split panel with CRT-treated cover art on one side. */
.henchmen-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
}

.henchmen-feature-art {
  position: relative;
  display: block;
  background: #000;
  border: 1px solid var(--ink);
  overflow: hidden;
  transform: rotate(-1.25deg);
  transition: transform 0.4s ease;
  box-shadow:
    0 0 0 4px #000,
    14px 14px 0 var(--tan-shadow);
}

.henchmen-feature-art:hover { transform: rotate(0deg) scale(1.01); }

.henchmen-feature-art img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(100%) contrast(1.05) sepia(100%) hue-rotate(80deg) saturate(2.8) brightness(0.85);
  mix-blend-mode: screen;
}

.henchmen-feature-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scanlines);
  pointer-events: none;
  z-index: 2;
}

.henchmen-feature-stamp {
  position: absolute;
  top: 0.75rem;
  right: -2.5rem;
  z-index: 3;
  background: var(--hi-amber);
  color: #000;
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 900;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35rem 3rem;
  transform: rotate(35deg);
  box-shadow: 0 2px 0 #000;
}

.henchmen-feature-copy h2 {
  font-family: 'Big Shoulders Display', sans-serif;
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  line-height: 1;
  text-transform: uppercase;
  margin: 0.3rem 0 0.9rem;
}

/* ---------------------------------------------------------------
 * Shared page hero (.hero.hero-bg)
 * Emitted by views/page-shell.js → pageHero(). Used by every route
 * that needs a full-bleed background hero (homepage video, event
 * detail image hero, etc.). Route-specific tweaks live as modifier
 * classes (.hero-home, .event-detail-hero) below or further down.
 * Generic pieces here: .hero-bg, .hero-bg-img, .hero-bg-card,
 * .hero-bg-stamp; the .hero-bg-card-row grid lives near line 1033.
 * ------------------------------------------------------------- */
.hero-bg {
  min-height: 0;
  aspect-ratio: 1200 / 750;
  padding: 0;
  margin: calc(-2.5rem + 1px) -4.5rem calc(-1.5rem - 2px);
  border: 0;
  box-shadow: none;
  background: transparent;
}
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #000;
  background-image: var(--halftone);
  background-size: var(--halftone-size);
  -webkit-mask-image: linear-gradient(to bottom, transparent 55%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 55%, #000 100%);
  pointer-events: none;
  z-index: 1;
}
.hero-bg::after { display: none; }

.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  filter: grayscale(1) contrast(3.4) brightness(0.45);
  mix-blend-mode: lighten;
}

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.2) 100%);
  pointer-events: none;
  z-index: 1;
}

.hero-bg-card {
  position: relative;
  z-index: 2;
  background: rgba(14, 17, 16, 0.88);
  border: 1px solid var(--ink);
  padding: 1.75rem 1.75rem 1.5rem;
  margin: calc(2rem + 150px) 0 2rem 4.5rem;
  max-width: 56ch;
  box-shadow:
    0 0 0 4px #000,
    14px 14px 0 var(--tan-shadow);
}

.hero-bg-stamp {
  position: absolute;
  top: 1.5rem;
  right: -2.5rem;
  z-index: 3;
  background: var(--crt);
  color: #000;
}

@media (max-width: 720px) {
  header, main { padding-left: 1.5rem; padding-right: 1.5rem; }
  .hero-bg {
    aspect-ratio: auto;
    min-height: 60vh;
    margin: 0 -1rem;
  }
  .hero-bg-img { position: absolute; }
  .hero-bg-card { margin: 1.25rem; padding: 1.25rem; max-width: none; }
  .hero-bg-stamp { right: -1rem; top: 0.75rem; padding: 0.35rem 1.5rem; }
  .henchmen-feature {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .henchmen-feature-art { transform: rotate(0); }
  .henchmen-feature-stamp { right: -1rem; padding: 0.35rem 1.5rem; }
}

.accent-yellow { --accent: var(--hi-amber); }
.accent-blue   { --accent: var(--hi-blue); }
.accent-red    { --accent: var(--hi-red); }

#game-nights { --accent: var(--hi-blue); }
#publishing  { --accent: var(--hi-red); }


.home-section h2 {
  margin-top: 0;
  font-size: clamp(1.6rem, 3.5vw, 2.1rem);
}

.home-closing {
  background: #000;
  border-color: var(--crt);
}
.home-closing h2, .home-closing .eyebrow { color: var(--crt); }
.home-closing .eyebrow::before { color: var(--crt); }
.home-closing .btn-primary {
  background: var(--crt);
  color: #000;
  border-color: var(--crt);
}
.home-closing .btn-primary:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #000;
  box-shadow: 4px 4px 0 var(--crt);
}

/* About / static page surfaces — no outer wrapper border */
.page {
  --accent: var(--hi-amber);
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 0 2rem;
  box-shadow: none;
}
.books-page { --accent: var(--hi-red); }

.books-hero {
  position: relative;
  margin: calc(-2.5rem + 1px) -4.5rem 0;
  background: transparent;
  overflow: hidden;
  aspect-ratio: 600 / 316;
  display: flex;
  align-items: flex-end;
}
.books-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(1) contrast(2.2) brightness(0.55);
  mix-blend-mode: lighten;
  pointer-events: none;
}
.books-hero-inner {
  position: relative;
  z-index: 3;
  padding: 1.5rem 1.5rem 7rem;
  width: 100%;
}
.books-hero-inner h1 { margin: 0 0 0.5rem; }
.books-hero--bg { min-height: 0; }
.books-intro-block { margin: 0.5rem 0 0; }
.books-intro-block h1 { margin: 0 0 0.75rem; }
.books-intro-block .books-intro { margin: 0; }
.books-page::after { content: ""; display: block; clear: both; }

.page h1 { font-size: clamp(2.2rem, 5vw, 3rem); }
.page h2 {
  border-top: 2px solid rgba(232, 227, 212, 0.5);
  padding-top: 1.25rem;
  margin-top: 2.25rem;
  color: var(--ink);
}
.page h2:first-of-type { border-top: 0; padding-top: 0; }

h2.cobalt,
.page h2.cobalt {
  color: var(--crt);
}

.about-page p { color: var(--ink); }

.about-page { margin-bottom: 0; }

.about-page-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 2.5rem;
  align-items: stretch;
}

.about-page-art {
  background: transparent;
  overflow: hidden;
  min-height: 100%;
  margin: calc(-2.5rem + 1px) 0 0 -4.5rem;
  align-self: stretch;
  position: relative;
}
.about-page-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #000;
  background-image: var(--halftone);
  background-size: var(--halftone-size);
  -webkit-mask-image: linear-gradient(to bottom, transparent 60%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 60%, #000 100%);
  pointer-events: none;
  z-index: 2;
}

.about-page-split--reverse {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}
.about-page-split--reverse .about-page-art {
  margin: calc(-2.5rem + 1px) -4.5rem 0 0;
}

body.ctx-yellow {
  background-color: #000;
  background-image: var(--halftone);
  background-size: var(--halftone-size);
}
body.ctx-yellow main { padding-bottom: 0; flex: 0 0 auto; }
body.ctx-yellow footer { margin-top: 0; }
body.ctx-yellow header { position: relative; z-index: 10; }
body.ctx-yellow .about-page-split {
  display: block;
  position: relative;
  min-height: 100vh;
  margin-top: calc(-2.5rem - 7rem + 1px);
  padding-top: calc(2.5rem + 7rem);
}
body.ctx-yellow .about-page-split .about-page-art {
  position: absolute;
  top: 0;
  left: -4.5rem;
  right: -4.5rem;
  bottom: 0;
  margin: 0;
  min-height: 0;
  z-index: 0;
}
body.ctx-yellow .about-page-split .about-page-art img {
  object-position: left center;
}
body.ctx-yellow .about-page-copy {
  position: relative;
  z-index: 2;
  max-width: 56ch;
  margin-left: auto;
  padding-left: 1rem;
}
body.ctx-yellow .about-page-copy h1 { color: var(--s1); }

body.ctx-events {
  background-color: #000;
  background-image: var(--halftone);
  background-size: var(--halftone-size);
}
body.ctx-events header { position: relative; z-index: 10; }
body.ctx-events { background-color: transparent; background-image: none; }
body.ctx-events .about-page-split--reverse {
  display: block;
  position: relative;
}
body.ctx-events .about-page-split--reverse .about-page-art {
  position: fixed;
  inset: 0;
  margin: 0;
  min-height: 0;
  z-index: -1;
  pointer-events: none;
}
body.ctx-events .about-page-split--reverse .about-page-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
body.ctx-events .about-page-split--reverse .about-page-art::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Required: base .about-page-art::before sets background-color: #000 for
     the /about mask-fade. Without resetting it here, the solid black paints
     under our translucent gradient and hides the fixed venue photo. */
  background-color: transparent;
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.92) 75%, #000 100%),
    var(--halftone);
  background-size: auto, var(--halftone-size);
  -webkit-mask-image: none;
  mask-image: none;
  pointer-events: none;
  z-index: 1;
}
body.ctx-events .about-page-copy {
  position: relative;
  z-index: 2;
  max-width: none;
  margin-right: 0;
  padding-right: 0;
}
body.ctx-events .about-page-copy > p {
  max-width: 56ch;
}
.events-hero-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-bottom: 0.5rem;
}
.events-hero-title-row > h1 {
  margin: 0;
  flex: 0 0 auto;
}
.events-hero-logo-row {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  justify-items: center;
  align-items: center;
  gap: 1rem 1.5rem;
  min-width: 0;
  padding: 0.25rem 0;
}
/* The strip doubles as a filter control. Buttons need to be reachable, so the
   row no longer sets pointer-events: none — the individual logos opt out
   instead when they have no events. */
/* Dungeon Camp wordmark, shown beside the Robot Paper mark on signed-in player
   pages only. Height-matched to the site logo so the two sit on one baseline. */
.site-name { display: flex; align-items: center; gap: 0.75rem; }
/* header .site-name a::after paints the Robot Paper logo as a mask over EVERY
   link in that container (the real <img> is opacity:0). This link is a second
   logo, so that mask has to be cancelled or it stamps Robot Paper on top of the
   Dungeon Camp wordmark. */
/* The Robot Paper mark is a flat var(--ink) mask, so the wordmark in full
   colour outshone it. Rather than mask this one — which would kill the red A —
   the image is shown and dimmed to land on the same tone: its brightest fill is
   pure white (255), ink is 201, so 0.79 brings the cream to the same level and
   carries the red down with it. */
header .site-name a.dc-wordmark-link::after { content: none; }
header .site-name a.dc-wordmark-link { position: static; }
header .dc-wordmark { opacity: 1; filter: brightness(0.79); }

/* The profile link in the nav is the Dungeon Camp icon rather than the word.
   Dimmed to sit with the nav text, full strength on hover. */
#primary-nav a.nav-dc { display: inline-flex; align-items: center; padding: 0; }
#primary-nav a.nav-dc img { display: block; width: 28px; height: 28px; opacity: 0.75; transition: opacity 120ms ease; }
#primary-nav a.nav-dc:hover img, #primary-nav a.nav-dc:focus-visible img { opacity: 1; }

/* Matched to the Robot Paper mark's 44px. Only works because the source is
   trimmed — with its original padding this would render ~15px of lettering. */
.dc-wordmark { display: block; height: 40px; width: auto; }
.dc-wordmark-link { display: inline-flex; align-items: center; line-height: 0; }
.site-name { gap: 1rem; }
/* 8.5:1 is wide; step it down before it crowds the nav. */
@media (max-width: 1024px) { .dc-wordmark { height: 32px; } }
@media (max-width: 720px)  { .dc-wordmark { height: 26px; } .site-name { gap: 0.6rem; } }
@media (max-width: 480px)  { .dc-wordmark { display: none; } }
.events-hero-logo {
  display: block;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: opacity 120ms ease, transform 120ms ease;
  width: 100%;
  max-width: 110px;
  min-width: 0;
  height: 60px;
  opacity: 0.7;
  background-color: #e8e3d4;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
/* The hero filter toggles [hidden] on cards. .event-card sets display: grid,
   which wins over the user-agent's [hidden] { display: none }, so a hidden card
   would still paint. Headings and sections have no explicit display and hide on
   their own. */
.event-card[hidden] {
  display: none !important;
}
.events-hero-logo:hover:not([disabled]),
.events-hero-logo:focus-visible:not([disabled]) {
  opacity: 1;
  transform: translateY(-1px);
}
.events-hero-logo[disabled] {
  cursor: default;
  opacity: 0.25;
  pointer-events: none;
}
/* Once a filter is on, the unselected logos recede. */
.events-hero-logo-row.has-active .events-hero-logo:not(.is-active):not([disabled]) {
  opacity: 0.3;
}
.events-hero-logo.is-active {
  opacity: 1;
}
.event-register-signin {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  color: var(--muted, #8a8578);
}
.events-filter-status {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dusty-green, #8aa66a);
}
.events-filter-empty {
  margin: 1.5rem 0;
  text-align: center;
  color: var(--muted, #8a8578);
}
.events-filter-status .events-filter-clear {
  margin-left: 0.5rem;
  text-transform: none;
  letter-spacing: 0;
}
.events-filter-clear {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--dusty-green, #8aa66a);
  text-decoration: underline;
  cursor: pointer;
}
.events-hero-logo--dragonbane {
  -webkit-mask-image: url("/images/events/dragonbane-logo.webp");
  mask-image: url("/images/events/dragonbane-logo.webp");
}
.events-hero-logo--heroquest {
  background-color: transparent;
  background-image: url("/images/events/heroquest-logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask-image: none;
  mask-image: none;
  filter: grayscale(1) brightness(1.4) contrast(1.1);
  opacity: 0.75;
}
.events-hero-logo--dcc {
  -webkit-mask-image: url("/images/events/dcc-logo.webp");
  mask-image: url("/images/events/dcc-logo.webp");
}
.event-card--has-logo > .event-card-logo[src*="dcc-logo"],
.event-card--past.event-card--has-logo > .event-card-logo[src*="dcc-logo"] {
  object-fit: contain;
  padding: 0.6rem;
  background: transparent;
  border-left: 0;
  filter: saturate(0.7) brightness(0.85);
  transform: scale(1.2);
  transform-origin: center;
}
.event-card--past.event-card--has-logo > .event-card-logo[src*="dcc-logo"] {
  filter: saturate(0.5) brightness(0.7);
}
.event-card-logo--stack img.event-card-logo-mark--raster {
  background: transparent;
  -webkit-mask: none;
          mask: none;
  object-fit: contain;
  width: 100%;
  height: auto;
  flex: 0 0 64%;
  min-height: 0;
  padding: 0.05rem;
  box-sizing: border-box;
  filter: saturate(0.7) brightness(0.85);
}
.event-card--has-logo > .event-card-logo[src*="abductions-aliens-logo"],
.event-card--past.event-card--has-logo > .event-card-logo[src*="abductions-aliens-logo"] {
  object-fit: contain;
  padding: 0.6rem;
  background: transparent;
  border-left: 0;
  filter: saturate(0.7) brightness(0.85);
  transform: scale(1.2);
  transform-origin: center;
}
.event-card--past.event-card--has-logo > .event-card-logo[src*="abductions-aliens-logo"] {
  filter: saturate(0.4) brightness(0.7);
}
.event-card--past .event-card-logo--stack img.event-card-logo-mark--raster {
  opacity: 0.6;
  filter: saturate(0.4) brightness(0.7);
}
.events-hero-logo--dnd {
  -webkit-mask-image: url("/images/events/dnd-logo.png");
  mask-image: url("/images/events/dnd-logo.png");
}
.events-hero-logo--sw5e {
  -webkit-mask-image: url("/images/events/sw5e-logo.png");
  mask-image: url("/images/events/sw5e-logo.png");
}
.events-hero-logo--cyborg {
  -webkit-mask-image: url("/images/events/cy-borg-compatible.svg");
  mask-image: url("/images/events/cy-borg-compatible.svg");
}
.events-hero-logo--morkborg {
  -webkit-mask-image: url("/images/events/mork-borg-compatible.svg");
  mask-image: url("/images/events/mork-borg-compatible.svg");
}
.events-hero-logo--pirateborg {
  -webkit-mask-image: url("/images/events/pirate-borg-compatible.svg");
  mask-image: url("/images/events/pirate-borg-compatible.svg");
}
.events-hero-logo--abductionsaliens {
  background-color: transparent;
  background-image: url("/images/events/abductions-aliens-logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-mask-image: none;
  mask-image: none;
  filter: grayscale(1) brightness(1.4) contrast(1.1);
  opacity: 0.75;
  transform: scale(1.9);
  transform-origin: center;
}
@media (max-width: 700px) {
  .events-hero-logo-row {
    gap: 0.75rem 1rem;
  }
  .events-hero-logo {
    height: 44px;
    min-width: 56px;
    flex: 1 1 calc(25% - 1rem);
  }
}

body.ctx-red {
  background-color: #000;
  background-image: var(--halftone);
  background-size: var(--halftone-size);
}
body.ctx-red main { padding-bottom: 0; flex: 0 0 auto; }
body.ctx-red footer { margin-top: 0; }
body.ctx-red header { position: relative; z-index: 10; }
body.ctx-red .about-page-split--reverse {
  display: block;
  position: relative;
  min-height: 100vh;
  margin-top: calc(-2.5rem - 7rem + 1px);
  padding-top: calc(2.5rem + 7rem);
}
body.ctx-red .about-page-split--reverse .about-page-art {
  position: absolute;
  top: 0;
  left: -4.5rem;
  right: -4.5rem;
  bottom: 0;
  margin: 0;
  min-height: 0;
  z-index: 0;
}
body.ctx-red .about-page-split--reverse .about-page-art img {
  object-position: center center;
}
body.ctx-red .books-page .about-page-art img {
  filter: grayscale(1) contrast(3.4) brightness(0.45);
}
body.ctx-red .about-page-copy {
  position: relative;
  z-index: 2;
  max-width: 56ch;
  margin-right: 0;
  padding-right: 0;
}
body.ctx-red .about-page-copy h1 { color: var(--s1); }
body.home {
  background-color: #000;
  background-image: radial-gradient(rgba(242,239,230,0.12) 1px, transparent 1.4px);
}
body.home main { padding-bottom: 0; flex: 1 1 auto; }
body.home footer { margin-top: 0; }

body.home header { position: relative; z-index: 10; }
body.home { height: 100vh; overflow: hidden; }
body.home main { display: flex; flex-direction: column; min-height: 0; }
body.home .hero-bg {
  margin-top: calc(-2.5rem - 7rem + 1px);
  height: auto;
  min-height: 0;
  flex: 1 1 auto;
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 7rem;
}
body.home .hero-bg-card { margin-top: 0; margin-left: 0; flex: 0 1 56ch; }
body.home header .site-name { visibility: hidden; }
.hero-bg-card-row {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
  margin: 0 4.5rem;
  padding-right: 0;
  justify-content: center;
}
.hero-bg-card-row > .hero-bg-card { align-self: flex-start; padding: 1.5rem 1.75rem; }
.hero-bg-logo {
  display: block;
  align-self: flex-start;
  flex: 0 0 auto;
  margin-top: -70px;
  height: 550px;
  width: 550px;
  max-width: 50vw;
  background-color: var(--ink);
  -webkit-mask: url('/images/logo-mark.png') no-repeat center / contain;
          mask: url('/images/logo-mark.png') no-repeat center / contain;
  -webkit-mask-mode: luminance;
          mask-mode: luminance;
  border: 0;
  box-shadow: none;
}
@media (max-width: 720px) {
  .hero-bg-card-row { flex-direction: column; margin: 1.25rem; padding-right: 0; gap: 1rem; }
  .hero-bg-logo { height: 120px; width: 280px; align-self: flex-start; }
}

.about-page-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(1) contrast(2.2) brightness(0.55);
  mix-blend-mode: lighten;
}

.about-page-copy > h2:first-of-type { border-top: 0; padding-top: 0; }

@media (max-width: 720px) {
  .about-page-split { grid-template-columns: 1fr; gap: 2rem; }
  .about-page-art { position: static; }

  body.ctx-events .about-page-split--reverse,
  body.ctx-red .about-page-split--reverse,
  body.ctx-yellow .about-page-split {
    display: block;
    min-height: 0;
    margin-top: 0;
    padding-top: 0;
  }
  /* ctx-red / ctx-yellow venue-less pages keep the inline 4:3 photo. */
  body.ctx-red .about-page-split--reverse .about-page-art,
  body.ctx-yellow .about-page-split .about-page-art {
    position: static;
    margin: 1rem -1.5rem 0 -1.5rem;
    aspect-ratio: 4 / 3;
    min-height: 0;
  }
  /* Venue rollup pages (mononworks, gencon, black-circle) keep the same
     fixed full-viewport photo + gradient overlay at mobile that they use on
     desktop. That removes the large empty 4:3 block that used to sit
     between the intro and the "Next at …" section on phones. */
  body.ctx-events .about-page-split--reverse .about-page-art {
    position: fixed;
    inset: 0;
    margin: 0;
    aspect-ratio: auto;
    min-height: 0;
    z-index: -1;
    pointer-events: none;
  }
  body.ctx-events .about-page-copy,
  body.ctx-red .about-page-copy,
  body.ctx-yellow .about-page-copy {
    max-width: none;
    margin-right: 0;
    padding-right: 0;
  }
}

.subscribe-line {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0.75rem 0;
}

/* Footer */
footer {
  background: transparent;
  color: var(--ink);
  margin: 4rem 0 0;
  padding: 2rem 1.5rem;
  text-align: center;
  font-family: 'Big Shoulders Display', 'Space Grotesk', system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: relative;
}

/* Was 0.2, which sank the text into the background rather than sitting it on
   top. Still quiet, now legible. */
footer p, footer .footer-links { opacity: 0.72; position: relative; z-index: 1; }

footer::before { display: none; }

body.ctx-events .about-page-split--reverse .about-page-art::after,
body.ctx-red .about-page-split--reverse .about-page-art::after,
body.ctx-yellow .about-page-split .about-page-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--halftone);
  background-size: var(--halftone-size);
  pointer-events: none;
  z-index: 1;
}

footer::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 100vh;
  background: #000;
  z-index: -1;
  pointer-events: none;
}

footer p { margin: 0.3rem 0; color: var(--ink); }

.footer-links a {
  color: var(--ink);
  text-decoration: none;
  margin: 0 0.15rem;
}
.footer-links a:hover { color: var(--hi-blue); }
.footer-links .footer-admin-link {
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0.15rem;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}
.footer-links .footer-admin-link:hover { color: var(--hi-blue); }
.footer-links-meta { font-size: 0.7rem; letter-spacing: 0.06em; margin-top: 0.15rem; }

/* News / books / tag list — gray preview tiles */
.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem 1.5rem;
}

@media (max-width: 600px) {
  .post-list { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* Single brand accent for all middle borders */
body.home,
body.ctx-yellow,
body.ctx-blue,
body.ctx-red,
body.ctx-green { --accent: var(--hi-amber); }

body.ctx-blue {
  background-color: #000;
  background-image: var(--halftone);
  background-size: var(--halftone-size);
}

.post-card {
  --accent: var(--accent, var(--hi-blue));
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 0.9rem 1rem;
  margin: 0;
  box-shadow:
    0 0 0 4px #000,
    10px 10px 0 var(--tan-shadow);
}
.post-card:not(:has(.post-thumb)) { grid-template-columns: 1fr; }

.post-thumb {
  display: block;
  position: relative;
  width: 100%;
  margin: -0.9rem -1rem 0;
  width: calc(100% + 2rem);
  border: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: transparent;
}
.post-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #000;
  background-image: var(--halftone);
  background-size: var(--halftone-size);
  -webkit-mask-image: linear-gradient(to bottom, transparent 60%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 60%, #000 100%);
  pointer-events: none;
  z-index: 1;
}
.post-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(2.2) brightness(0.55);
  mix-blend-mode: lighten;
  transition: filter 0.2s ease, mix-blend-mode 0.2s ease;
}
body.ctx-blue .post-card {
  background: transparent;
  box-shadow: 0 0 0 1px var(--ink);
}
body.ctx-blue .post-thumb { background: transparent; }
body.ctx-blue .post-thumb img { mix-blend-mode: lighten; }
.post-card:hover .post-thumb img,
.post-thumb:hover img {
  filter: none;
  mix-blend-mode: normal;
}

.books-column .post-thumb { display: none; }
.books-column .post-card { grid-template-columns: 1fr; }

.post-card h2 {
  margin: 0 0 0.25rem;
  font-size: 1.25rem;
  text-transform: uppercase;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card a {
  color: var(--ink);
  text-decoration: none;
}
.post-card a:hover { color: var(--dusty-green); }

.post-card .post-meta { margin-bottom: 0.5rem; color: var(--muted); }
.post-card p { margin: 0.5rem 0 0; color: var(--ink); }

.post-card .post-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card .post-card-tags { display: none; }

.post-card-tags {
  margin: 0.75rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tag-chip {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  text-decoration: none;
}
.tag-chip:hover { background: var(--hi-blue); color: #000; border-color: var(--hi-blue); }

/* Post hero image kept lightweight so individual post pages stay intact */
.post-hero {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  margin-bottom: 1.5rem;
}

.post-meta {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Individual post page (/news/:slug) — keep post body legible, do NOT
   blast the refresh into the markdown content. Wrap chrome in dark
   panel, but the .post-body markdown keeps serif body type and neutral
   inline styling. */
.post-page > h1 {
  font-family: 'Big Shoulders Display', sans-serif;
  text-transform: uppercase;
  color: var(--ink);
}

.post-body {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.75;
  color: var(--ink);
  text-transform: none;
}

.post-body p { margin: 0 0 1.25rem; text-transform: none; color: var(--ink); }

.post-body h2,
.post-body h3,
.post-body h4 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  line-height: 1.3;
  border: 0;
  padding: 0;
}

.post-body h2 { margin: 2rem 0 1rem; font-size: 1.5rem; }
.post-body h3 { margin: 1.75rem 0 0.75rem; font-size: 1.2rem; }

.post-body hr,
.page hr {
  border: 0;
  border-top: 1px solid var(--ink);
  opacity: 0.5;
  margin: 2rem 0;
}

.post-body blockquote {
  margin: 1.5rem 0;
  padding: 0.25rem 0 0.25rem 1rem;
  border-left: 3px solid var(--crt);
  color: var(--ink);
  font-style: italic;
}

.post-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.9em;
  background: #000;
  color: var(--crt);
  padding: 0.15em 0.4em;
  border-radius: 2px;
}

.post-body pre {
  background: #000;
  color: var(--crt);
  padding: 1rem;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  border: 1px solid var(--rule);
}

.post-body pre code { background: transparent; padding: 0; color: var(--crt); }

.post-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5rem 0;
  border: 0;
  filter: none;
}

.post-body a {
  color: var(--crt);
  text-decoration: none;
}
.post-body a:hover { color: var(--ink); }

.post-byline,
.post-author-bio,
.post-tags {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  color: var(--muted);
}
.post-author-bio { margin-top: 1.5rem; font-style: italic; color: var(--ink); }
.post-tags { margin-top: 1rem; font-size: 0.9rem; }

/* Mobile */
@media (max-width: 600px) {
  body { font-size: 16px; }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.15rem; }

  main { padding: 1.5rem 1rem 2.5rem; }
  .hero-home, .home-section { padding: 1.25rem 1rem; }
  .hero-home::after { display: none; }
}

/* News index header */
.blog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.blog-header h1 { margin: 0; }

.rss-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ink);
  text-decoration: none;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid var(--ink);
  padding: 0.35rem 0.7rem;
  background: transparent;
}

.rss-link:hover { background: var(--hi-blue); color: #000; border-color: var(--hi-blue); }

.rss-icon { flex-shrink: 0; }

footer .rss-link { font-size: 0.85rem; margin-top: 0.5rem; }

/* Compatibility — index columns / media grid */
.index-columns {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr);
  gap: 2.5rem;
  margin-top: 1rem;
}
@media (max-width: 720px) {
  .index-columns { grid-template-columns: 1fr; gap: 1.5rem; }
}
.index-col h2 {
  margin: 0 0 1rem;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.5rem;
  font-size: 1.6rem;
}
.index-list { list-style: none; padding: 0; margin: 0; }
.index-list li { padding: 0.4rem 0; border-bottom: 1px solid var(--rule); }
.index-list li:last-child { border-bottom: none; }
.index-list a { font-weight: 600; }

.muted { color: var(--muted); font-weight: 400; font-size: 0.9em; }

.index-media { margin-top: 2.5rem; }
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}
.media-tile {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--panel);
  border: 1px solid var(--ink);
  overflow: hidden;
}
.media-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%) contrast(1.05) sepia(100%) hue-rotate(80deg) saturate(2.8) brightness(0.85);
}

.index-section-label {
  list-style: none;
  margin: 1rem 0 0.25rem;
  padding: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--crt);
  font-weight: 600;
}

.page-id {
  display: inline-block;
  min-width: 2.2em;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 600;
}

/* Books landing */
.books-intro {
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0 0 2rem;
  color: var(--ink);
}

.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0 1.65rem;
  position: relative;
  z-index: 2;
}
.books-grid--full { grid-column: 1 / -1; }

.books-column {
  --accent: var(--hi-red);
  min-width: 0;
  background-color: #000;
  background-image: var(--halftone);
  background-size: var(--halftone-size);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 0.9rem 1rem;
  margin: 0;
  box-shadow: 0 0 0 1px var(--ink);
}

.books-column-cover {
  display: block;
  position: relative;
  margin: -0.9rem -1rem 1rem;
  border: 0;
  border-bottom: 1px solid var(--ink);
  overflow: hidden;
  background: transparent;
  aspect-ratio: 1 / 1;
  max-width: none;
}
.books-column-cover { border-bottom: 0; }
.books-column-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #000;
  background-image: var(--halftone);
  background-size: var(--halftone-size);
  -webkit-mask-image: linear-gradient(to bottom, transparent 60%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 60%, #000 100%);
  pointer-events: none;
  z-index: 1;
}

.books-column-cover img {
  filter: grayscale(1) contrast(2.2) brightness(0.55);
  mix-blend-mode: lighten;
  object-position: center;
}

.books-column-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: none;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.books-column-cover:hover img {
  filter: none;
  transform: scale(1.02);
}

.books-column-title {
  font-size: 1.2rem;
  margin: 0 0 0.3rem;
  text-transform: uppercase;
  color: var(--ink);
}

.books-column-title a {
  color: var(--ink);
  text-decoration: none;
}
.books-column-title a:hover { color: var(--hi-blue); }

.books-column-blurb { margin: 0 0 0.75rem; line-height: 1.5; color: var(--ink); font-size: 0.9rem; }

.books-column .post-list {
  display: block;
  grid-template-columns: none;
  gap: 0;
}
.books-column .post-card {
  background: transparent;
  color: var(--ink);
  border: 0;
  border-bottom: 1px solid var(--rule);
  box-shadow: none;
  padding: 0.75rem 0;
  margin: 0;
  height: auto;
}
.books-column .post-card:last-child { border-bottom: 0; }
.books-column .post-thumb { display: none; }


/* Topics page */
.tag-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.tag-list li { display: inline-block; }
.tag-list a {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.9rem;
}
.tag-list a:hover { background: var(--hi-blue); color: #000; border-color: var(--hi-blue); }
.tag-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: var(--muted);
  margin-left: 0.25rem;
}

.hl-black {
  background: #000;
  color: var(--ink);
  padding: 0.35em 0.4em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  text-shadow: none;
  line-height: 2.1;
}
body.ctx-events .hl-black {
  background: #000;
  color: var(--ink);
}
body header .site-page-title .hl-black {
  background: transparent;
  color: var(--hi-amber);
  padding: 0;
  line-height: 1.4;
  box-shadow: none;
}
body.ctx-events .about-page-copy h1 {
  color: var(--s1);
}

/* Upcoming events */
.upcoming-events { margin-top: 2rem; margin-bottom: 3rem; position: relative; z-index: 2; }
.upcoming-events--today + .upcoming-events,
.upcoming-events--next + .upcoming-events { margin-top: 2rem; }
body.ctx-events .upcoming-events--today > h2 { color: var(--hi-red); }
.event-card--has-logo > .event-card-logo[src*="dragonbane-logo"],
.event-card--past.event-card--has-logo > .event-card-logo[src*="dragonbane-logo"] {
  object-fit: contain;
  padding: 1rem;
  background: transparent;
  border-left: 0;
  filter: saturate(0.7) brightness(0.85);
}
.event-card--past.event-card--has-logo > .event-card-logo[src*="dragonbane-logo"] {
  filter: saturate(0.65) brightness(0.95);
}
.event-card--has-logo > .event-card-logo[src*="heroquest-logo"],
.event-card--past.event-card--has-logo > .event-card-logo[src*="heroquest-logo"] {
  object-fit: contain;
  padding: 0.9rem;
  background: transparent;
  border-left: 0;
  filter: grayscale(0.35) saturate(0.55) brightness(0.85) contrast(1.05);
}
.event-card--past.event-card--has-logo > .event-card-logo[src*="heroquest-logo"] {
  filter: grayscale(0.55) saturate(0.4) brightness(0.7) contrast(1.05);
}
.event-card--has-logo > .event-card-logo[src*="dnd-logo"],
.event-card--past.event-card--has-logo > .event-card-logo[src*="dnd-logo"] {
  object-fit: contain;
  padding: 1.1rem;
  background: transparent;
  border-left: 0;
  /* Recolor pure red PNG to site --hi-red (#b8584a) */
  filter: brightness(0) saturate(100%) invert(43%) sepia(38%) saturate(870%) hue-rotate(330deg) brightness(91%) contrast(82%);
}
.event-card--past.event-card--has-logo > .event-card-logo[src*="dnd-logo"] {
  /* Past cards inherit a 0.72 opacity from .event-card--past; lift the tint
     brightness so the logo reads at parity with past mork-borg badges. */
  filter: brightness(0) saturate(100%) invert(43%) sepia(38%) saturate(870%) hue-rotate(330deg) brightness(115%) contrast(82%);
}
.upcoming-events > h2 {
  margin: 0 0 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.event-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}

.event-list-month {
  grid-column: 1 / -1;
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}
.event-list-month:first-child { border-top: 0; margin-top: 0; }
.event-list-month-label {
  margin: 0.5rem 0 0;
  font-family: 'Big Shoulders Display', 'Space Grotesk', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.05rem;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
}
.event-list-year {
  grid-column: 1 / -1;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}
.event-list-year-label {
  margin: 0;
  text-align: right;
  font-family: 'Big Shoulders Display', 'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: 4rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--ink) 35%, transparent);
}

@media (max-width: 1200px) {
  .event-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .event-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
}
@media (max-width: 560px) {
  .event-list { grid-template-columns: 1fr; }
}

.event-card {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 0.6rem 0.9rem 0.45rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  position: relative;
  box-shadow:
    0 0 0 4px #000,
    10px 10px 0 var(--tan-shadow);
}

.event-card--sold-out .event-card-soldout-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, color-mix(in srgb, var(--hi-red) 55%, #000) 78%, transparent);
  text-decoration: none;
  overflow: hidden;
}
.event-card--sold-out .event-card-soldout-label {
  font-family: 'Big Shoulders Display', 'Space Grotesk', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--panel, #f5ecd9);
  font-size: clamp(1.6rem, 4.5vw, 2.6rem);
  line-height: 1;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
  transform: rotate(-6deg);
  white-space: nowrap;
}
.event-card--past.event-card--sold-out .event-card-soldout-overlay {
  display: none;
}
.event-card--unconfirmed .event-card-unconfirmed-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background: color-mix(in srgb, color-mix(in srgb, var(--dusty-green) 60%, #000) 78%, transparent);
  text-decoration: none;
  overflow: hidden;
}
.event-card--unconfirmed .event-card-unconfirmed-label {
  font-family: 'Big Shoulders Display', 'Space Grotesk', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--panel, #f5ecd9);
  font-size: clamp(1.1rem, 3.4vw, 1.9rem);
  line-height: 1.05;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
  transform: rotate(-6deg);
  text-align: center;
  max-width: 90%;
}
.event-card--past.event-card--unconfirmed .event-card-unconfirmed-overlay {
  display: none;
}
.event-card--mononworks {
  background: color-mix(in srgb, var(--dusty-green) 22%, var(--panel));
}

.event-card--has-logo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36%;
  grid-template-rows: auto auto auto auto auto auto 1fr;
  column-gap: 0.85rem;
  row-gap: 0.2rem;
  padding: 0.55rem 0 0.45rem 0.9rem;
  overflow: hidden;
}
.event-card--has-logo > .event-card-logo {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  height: calc(100% + 1rem);
  object-fit: cover;
  object-position: center;
  margin: -0.55rem 0 -0.45rem 0;
  background: #000;
  border-left: 1px solid var(--ink);
  padding: 0;
}
/* Robot Paper masked mark — never crop */
.event-card--has-logo > .event-card-logo--mark {
  background-color: var(--hi-red);
  -webkit-mask-size: contain;
          mask-size: contain;
  padding: 0.5rem;
  box-sizing: border-box;
}
/* SVG compatibility badges (Mork Borg, CY_BORG) — tint off-white via mask */
.event-card--has-logo > .event-card-logo--ink-svg {
  background-color: var(--ink);
  -webkit-mask: var(--ink-svg) no-repeat center / contain;
          mask: var(--ink-svg) no-repeat center / contain;
  padding: 0.6rem;
  box-sizing: border-box;
  background-image: none !important;
}
.event-card--has-logo > .event-card-logo--stack {
  background: #000;
  border-left: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem;
  box-sizing: border-box;
}
.event-card-logo--stack .event-card-logo-mark {
  display: block;
  background-color: var(--ink);
  -webkit-mask: var(--ink-svg) no-repeat center / contain;
          mask: var(--ink-svg) no-repeat center / contain;
  flex: 1 1 0;
  min-height: 0;
}
.event-card-logo--stack .event-card-logo-mark--gencon {
  flex: 0 0 38%;
}
/* Per-system tint for compat badges (mask-based). Past cards inherit .event-card--past opacity. */
.event-card--mork-borg > .event-card-logo--ink-svg,
.event-card--mork-borg .event-card-logo--stack .event-card-logo-mark:not(.event-card-logo-mark--gencon) {
  background-color: #feea00;
}
.event-card--cy-borg > .event-card-logo--ink-svg,
.event-card--cy-borg .event-card-logo--stack .event-card-logo-mark:not(.event-card-logo-mark--gencon) {
  background-color: #ff40b4;
}
.event-card--pirate-borg > .event-card-logo--ink-svg,
.event-card--pirate-borg .event-card-logo--stack .event-card-logo-mark:not(.event-card-logo-mark--gencon) {
  background-color: #a8d4bb;
}
/* Past cards: blend the system tint with muted so a hint of color shows through */
.event-card--past.event-card--mork-borg > .event-card-logo--ink-svg,
.event-card--past.event-card--mork-borg .event-card-logo--stack .event-card-logo-mark:not(.event-card-logo-mark--gencon) {
  background-color: color-mix(in srgb, #feea00 35%, var(--muted));
}
.event-card--past.event-card--cy-borg > .event-card-logo--ink-svg,
.event-card--past.event-card--cy-borg .event-card-logo--stack .event-card-logo-mark:not(.event-card-logo-mark--gencon) {
  background-color: color-mix(in srgb, #ff40b4 35%, var(--muted));
}
.event-card--past.event-card--pirate-borg > .event-card-logo--ink-svg,
.event-card--past.event-card--pirate-borg .event-card-logo--stack .event-card-logo-mark:not(.event-card-logo-mark--gencon) {
  background-color: color-mix(in srgb, #a8d4bb 35%, var(--muted));
}
/* Compat-system badge overlay on upcoming public event cards with a photo */
.event-card-system-badge {
  position: absolute;
  bottom: 0.45rem;
  right: 0.45rem;
  width: calc(36% - 0.9rem);
  max-width: 110px;
  aspect-ratio: 4 / 3;
  z-index: 3;
  pointer-events: none;
  background-color: var(--panel, #f5ecd9);
  -webkit-mask: var(--ink-svg) no-repeat center / contain;
          mask: var(--ink-svg) no-repeat center / contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}
.event-card--past .event-card-system-badge {
  opacity: 0.75;
}
@media (max-width: 720px) {
  .event-card-system-badge { max-width: 90px; }
}

.event-card--has-logo > .event-card-date  { grid-column: 1; grid-row: 1; margin: 0; }
.event-card--has-logo > .event-card-time  { grid-column: 1; grid-row: 2; margin: 0; }
.event-card--has-logo > .event-card-title { grid-column: 1; grid-row: 3; margin: 0; }
.event-card--has-logo > .event-card-venue { grid-column: 1; grid-row: 4; margin: 0; }
.event-card--has-logo > .event-card-system { grid-column: 1; grid-row: 5; margin: 0; }
.event-card--has-logo > .event-card-facts  { grid-column: 1; grid-row: 6; margin: 0; }
.event-card--has-logo > .event-card-cta   { grid-column: 1; grid-row: 7; margin: 0; align-self: end; padding-bottom: 0; }

.event-card-facts {
  margin: 0.1rem 0 0;
  padding: 0;
  color: var(--ink);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.event-card--past .event-card-facts {
  color: var(--muted);
}

.event-card-system {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.event-card-time {
  margin: 0;
  font-family: 'Big Shoulders Display', 'Space Grotesk', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1.15;
}
.event-card-time-redacted {
  display: inline-block;
  color: var(--hi-red);
  letter-spacing: 0;
  line-height: 1;
  user-select: none;
}

body.page-mononworks .about-page-split--reverse { position: relative; }
.mononworks-logo-overlay {
  position: absolute;
  top: calc(80px + 1.5rem + 50px);
  right: calc(4.5rem + 25px);
  width: clamp(220px, 28vw, 420px);
  height: auto;
  z-index: 11;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.7));
  pointer-events: none;
}
@media (max-width: 760px) {
  .mononworks-logo-overlay { width: clamp(140px, 38vw, 240px); top: calc(64px + 0.75rem); right: 1rem; }
}

.event-card-date {
  margin: 0;
  font-family: 'Big Shoulders Display', 'Space Grotesk', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cobalt);
  font-size: 0.9rem;
  line-height: 1.15;
}
.event-card--has-logo .event-card-date { color: var(--dusty-green); }
.event-card--has-logo.event-card--gencon .event-card-date { color: var(--ink); }

.event-card-title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--ink);
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.event-card-venue {
  margin: 0;
  color: var(--ink);
  font-size: 0.95rem;
}
.event-card-venue a {
  color: var(--ink);
  text-decoration: underline;
}
.event-card-venue a:hover { color: var(--dusty-green); }
.event-card-address {
  color: var(--muted);
  font-size: 0.85rem;
  text-decoration: underline;
  display: inline-block;
}
.event-card-address:hover { color: var(--dusty-green); }

.home-headline-line { display: block; }

.event-card-cta {
  margin: auto 0 0;
  padding-top: 0.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}
.event-card-cta .btn {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 0.72rem;
  padding: 0.3rem 0.6rem;
  letter-spacing: 0.04em;
  line-height: 1.1;
  min-width: 0;
  max-width: 100%;
}
.event-card-cta .event-card-cta-btn--stacked {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.05;
  gap: 0.1em;
  flex: 1 1 0;
  text-align: center;
}

/* Next event line inside hero card */
.next-event {
  margin: 1rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  font-size: 0.85rem;
  line-height: 1.4;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}
.next-event-label {
  font-family: 'Big Shoulders Display', 'Space Grotesk', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  color: var(--accent, var(--hi-amber));
}
.next-event-link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.next-event-link:hover { color: var(--dusty-green); }
.next-event-venue { color: var(--muted); }

/* Past events — desaturated */
.past-events { margin-top: 2.5rem; }
.past-events > h2 { color: var(--muted); }
.event-card--past { opacity: 0.72; }
.event-card--past.event-card--has-logo > .event-card-logo:not(.event-card-logo--ink-svg),
.event-card--past.event-card--has-logo > .event-card-logo--stack {
  background: transparent;
  border-left: 0;
}
.event-card--past .event-card-date { color: var(--muted); }
.event-card--past .event-card-title a { color: var(--ink); }

/* Private events — dusty red accent */
.event-card--private { --accent: var(--hi-red); }
.event-card--private .event-card-date { color: var(--hi-red); }
.event-card--private .event-card-title { color: var(--hi-red); }
.event-card--private .event-card-venue { color: var(--hi-red); }

/* Private cards with a raster image (e.g. SW5E "5" on Galactic TTRPG):
   shrink the logo to fit, drop the off-white left border, and let the
   card background show through so the logo cell blends with the card. */
.event-card--private-image > .event-card-logo {
  object-fit: contain;
  padding: 0.75rem;
  background: transparent;
  border-left: 0;
  opacity: 0.6;
}
.event-card--past.event-card--private-image > .event-card-logo {
  opacity: 0.55;
}

/* Private cards whose logo is an SVG render it as a mask, same as public and
   Gen Con cards. These rules exist because `background: transparent` above sits
   later in the file at equal specificity to the per-system tints, so it would
   otherwise wipe the mask colour and leave an empty box. Tints mirror the
   .event-card--<system> values used elsewhere. */
.event-card--private-image > .event-card-logo--private-mask {
  background-color: var(--ink);
  opacity: 1;
  /* The `mask` shorthand above resets mask-origin to border-box, so the cell's
     padding is ignored and the artwork runs edge to edge — visibly wider than
     the <img> logos beside it, which are inset by object-fit within the content
     box. Re-origin to the content box so masked and raster logos match. */
  -webkit-mask-origin: content-box;
          mask-origin: content-box;
  -webkit-mask-clip: content-box;
          mask-clip: content-box;
}
.event-card--mork-borg.event-card--private-image > .event-card-logo--private-mask {
  background-color: #feea00;
}
.event-card--cy-borg.event-card--private-image > .event-card-logo--private-mask {
  background-color: #ff40b4;
}
.event-card--pirate-borg.event-card--private-image > .event-card-logo--private-mask {
  background-color: #a8d4bb;
}
/* Past private cards keep the muted blend used by the public past cards. */
.event-card--past.event-card--pirate-borg.event-card--private-image > .event-card-logo--private-mask {
  background-color: color-mix(in srgb, #a8d4bb 35%, var(--muted));
}

.next-event--private { --accent: var(--hi-red); }
.next-event--private .next-event-label { color: var(--hi-red); }
.next-event--private .next-event-venue { color: var(--hi-red); }

.event-detail--private {
  --accent: var(--hi-red);
  --s1: var(--hi-red);
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.5rem;
}
.private-event-card {
  max-width: 540px;
  width: 100%;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 2rem 2rem 1.75rem;
  text-align: center;
  box-shadow: 0 0 0 4px #000, 12px 12px 0 var(--tan-shadow);
}
.private-event-logo {
  display: block;
  width: 220px;
  max-width: 70%;
  height: 220px;
  margin: 0 auto 1.25rem;
  background-color: var(--hi-red);
  -webkit-mask: url('/images/logo-mark.png') no-repeat center / contain;
          mask: url('/images/logo-mark.png') no-repeat center / contain;
  -webkit-mask-mode: luminance;
          mask-mode: luminance;
}

.event-card-logo--mark {
  background-color: var(--hi-red);
  -webkit-mask: url('/images/logo-mark.png') no-repeat center / contain;
          mask: url('/images/logo-mark.png') no-repeat center / contain;
  -webkit-mask-mode: luminance;
          mask-mode: luminance;
  border-left: 1px solid var(--ink);
  background-image: none !important;
}
.private-event-eyebrow {
  margin: 0 0 0.5rem;
  font-family: 'Big Shoulders Display', 'Space Grotesk', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.85rem;
  color: var(--hi-red);
}
.private-event-title {
  margin: 0 0 0.75rem;
  font-size: 1.6rem;
  text-transform: uppercase;
  color: var(--hi-red);
}
.private-event-date {
  margin: 0;
  font-family: 'Big Shoulders Display', 'Space Grotesk', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
}

/* Event detail page */
body.ctx-events .event-detail { margin: 0; padding: 0; }
.event-detail-hero {
  aspect-ratio: auto;
  min-height: 320px;
  padding-bottom: 3rem;
  height: auto;
  overflow: visible;
  background: transparent;
}
/* Event detail uses the same full-viewport fixed background pattern as the
   /mononworks venue page: the photo and its halftone overlay are pinned to
   the viewport, fill the whole screen, and content scrolls over them. The
   gradient overlay carries the venue tint at the top and fades to solid
   black at the bottom of the viewport so the page ends cleanly without a
   visible cutoff. Photo uses normal blend (no multiply) — coloring lives in
   the overlay so it works regardless of body background. */
.event-detail-hero > .hero-bg-img {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2;
  filter: grayscale(1) contrast(2.6) brightness(0.55);
  mix-blend-mode: normal;
  background: #000;
}
.event-detail-hero::before {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  -webkit-mask-image: none;
          mask-image: none;
  background-color: transparent;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.92) 75%, #000 100%),
    var(--halftone);
  background-size: auto, var(--halftone-size);
}
/* Body must be transparent so the fixed photo (z-index: -2) and overlay
   (z-index: -1) are visible. body.ctx-events already does this, but venue
   page modifiers (e.g. body.page-mononworks) used to set a solid bg-color
   that covered the fixed layers — this rule wins back transparency for any
   page that renders an event-detail hero. */
body:has(.event-detail-hero) {
  background-color: transparent;
  background-image: none;
}
/* Per-venue gradient overlay: stronger tint at top, still fades to black. */
.event-detail--mononworks .event-detail-hero::before {
  background-image:
    linear-gradient(180deg, rgba(108, 138, 86, 0.65) 0%, rgba(40, 56, 32, 0.9) 45%, #000 100%),
    var(--halftone);
}
.event-detail--mork-borg .event-detail-hero::before {
  background-image:
    linear-gradient(180deg, rgba(254, 234, 0, 0.55) 0%, rgba(120, 110, 0, 0.85) 45%, #000 100%),
    var(--halftone);
}
.event-detail--cy-borg .event-detail-hero::before {
  background-image:
    linear-gradient(180deg, rgba(255, 64, 180, 0.55) 0%, rgba(120, 30, 85, 0.85) 45%, #000 100%),
    var(--halftone);
}
.event-detail--pirate-borg .event-detail-hero::before {
  background-image:
    linear-gradient(180deg, rgba(31, 55, 47, 0.6) 0%, rgba(15, 30, 25, 0.9) 45%, #000 100%),
    var(--halftone);
}
/* Mononworks venue page keeps its dusty-green wash. */
body.page-mononworks {
  background-color: var(--dusty-green);
  background-image: none;
}
/* /mononworks venue page: let the fixed full-screen hero image show through
   the body background. The dusty-green tint is reapplied as a gradient overlay
   on the image itself so the iconic green vibe is preserved. */
body.page-mononworks.ctx-events {
  background-color: transparent;
  background-image: none;
}
body.page-mononworks .about-page-split--reverse .about-page-art::before {
  background-image:
    linear-gradient(180deg, rgba(108, 138, 86, 0.45) 0%, rgba(40, 56, 32, 0.85) 45%, #000 100%),
    var(--halftone);
  background-size: auto, var(--halftone-size);
}
/* Event-detail pages keep the old non-fixed art treatment. */
body.page-mononworks .about-page-art {
  background-color: var(--dusty-green);
}
body.page-mononworks .about-page-art::before {
  background-color: transparent;
  -webkit-mask-image: none;
          mask-image: none;
}
body.page-mononworks .about-page-art img {
  mix-blend-mode: multiply;
  background: transparent;
  filter: grayscale(1) contrast(1.6) brightness(1.15);
}
.event-detail--mork-borg .event-detail-title,
.event-detail--mork-borg .event-detail-eyebrow,
.event-detail--mork-borg .event-detail-copy h2,
.event-detail--mork-borg .event-register-headline {
  color: #feea00;
}
.event-detail--mork-borg .btn,
.event-detail--mork-borg .btn-primary,
.event-detail--mork-borg .btn-ghost {
  color: #feea00;
  border-color: #feea00;
  background: transparent;
}
.event-detail--mork-borg .btn-primary:hover,
.event-detail--mork-borg .btn-ghost:hover {
  color: #feea00;
  border-color: #feea00;
  background: transparent;
  box-shadow: 4px 4px 0 #feea00;
}
.event-detail--cy-borg .event-detail-title,
.event-detail--cy-borg .event-detail-eyebrow,
.event-detail--cy-borg .event-detail-copy h2,
.event-detail--cy-borg .event-register-headline {
  color: #ff40b4;
}
.event-detail--cy-borg .btn,
.event-detail--cy-borg .btn-primary,
.event-detail--cy-borg .btn-ghost {
  color: #ff40b4;
  border-color: #ff40b4;
  background: transparent;
}
.event-detail--cy-borg .btn-primary:hover,
.event-detail--cy-borg .btn-ghost:hover {
  color: #ff40b4;
  border-color: #ff40b4;
  background: transparent;
  box-shadow: 4px 4px 0 #ff40b4;
}
.event-detail--pirate-borg .event-detail-title,
.event-detail--pirate-borg .event-detail-eyebrow,
.event-detail--pirate-borg .event-detail-copy h2,
.event-detail--pirate-borg .event-register-headline {
  color: #a8d4bb;
}
.event-detail--pirate-borg .btn,
.event-detail--pirate-borg .btn-primary,
.event-detail--pirate-borg .btn-ghost {
  color: #a8d4bb;
  border-color: #a8d4bb;
  background: transparent;
}
.event-detail--pirate-borg .btn-primary:hover,
.event-detail--pirate-borg .btn-ghost:hover {
  color: #a8d4bb;
  border-color: #a8d4bb;
  background: transparent;
  box-shadow: 4px 4px 0 #a8d4bb;
}
.event-detail-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  padding: calc(2rem + 80px) 4.5rem 0;
  max-width: 1280px;
}
.event-detail-left { min-width: 0; }
.event-register-column { display: block; min-width: 0; }
.event-detail-venue-logo {
  display: block;
  width: 85%;
  height: auto;
  margin: 0 auto 1rem;
  transform: translateX(10px);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}
.event-detail-compat-badge {
  display: block;
  width: 70%;
  aspect-ratio: 4 / 3;
  margin: 0 auto 1.25rem;
  background-color: var(--ink);
  -webkit-mask: var(--ink-svg) no-repeat center / contain;
          mask: var(--ink-svg) no-repeat center / contain;
}
.event-detail-card {
  margin: 0 0 1.25rem;
  max-width: 64ch;
}
@media (max-width: 860px) {
  .event-detail-grid {
    grid-template-columns: 1fr;
    padding: calc(1.5rem + 80px) 1.25rem 0;
  }
  /* Mobile/tablet stack: details (title, date, venue, copy) first so the
     visitor sees what the event IS before the form. Registration column
     follows below. */
  .event-detail-grid > .event-detail-left { order: 1; }
  .event-detail-grid > .event-register-column { order: 2; margin-top: 1.25rem; }

  /* Cap the venue brand block (MW shield, GEN CON + CY_BORG art, etc.) so
     the registration form is reachable without a full-viewport scroll. */
  .event-detail-venue-logo {
    width: auto;
    max-width: 60%;
    max-height: 140px;
    transform: none;
  }
  .event-detail-compat-badge {
    width: auto;
    max-width: 55%;
    max-height: 110px;
    aspect-ratio: 4 / 3;
  }
}
.event-detail-eyebrow {
  margin: 0 0 0.75rem;
  font-family: 'Big Shoulders Display', 'Space Grotesk', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  color: var(--accent, var(--hi-amber));
}
.event-detail-eyebrow a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.event-detail-eyebrow a:hover { color: var(--dusty-green); }
.event-detail-title {
  margin: 0 0 0.75rem;
  font-family: 'Big Shoulders Display', sans-serif;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--s1);
}
.event-detail-when {
  margin: 0 0 0.75rem;
  font-family: 'Big Shoulders Display', 'Space Grotesk', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink);
}
.event-detail-sep { color: var(--muted); }
.event-detail-venue {
  margin: 0;
  color: var(--ink);
  font-size: 0.95rem;
}
.event-detail-venue a {
  color: var(--ink);
  text-decoration: underline;
}
.event-detail-venue a:hover { color: var(--dusty-green); }
.event-detail-address { color: var(--muted); font-size: 0.85rem; text-decoration: underline; display: inline-block; }
.event-detail-address:hover { color: var(--dusty-green); }
.event-detail-facts {
  list-style: none;
  margin: 0 0 0.85rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  font-family: 'Big Shoulders Display', 'Space Grotesk', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.8rem;
}
.event-detail-facts li {
  background: var(--panel, #f5efe1);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 0.18rem 0.55rem;
  line-height: 1.2;
}

.event-detail-copy h2 {
  margin: 1.5rem 0 0.5rem;
  color: var(--s1);
}
.event-detail-copy p { margin: 0 0 1rem; }

.event-detail-more { margin-top: 2rem; }
.event-detail-more-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.event-detail-more-list a {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.4rem 0.55rem;
  background: #000;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid transparent;
}
.event-detail-more-list a:hover {
  border-color: var(--ink);
  color: var(--dusty-green);
}
.event-detail-more-date {
  font-family: 'JetBrains Mono', 'Space Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--dusty-green);
  flex: 0 0 auto;
  white-space: nowrap;
}
.event-detail-more-title {
  font-weight: 600;
}
.event-detail-more-links {
  margin: 0.5rem 0 0;
  font-family: 'Big Shoulders Display', 'Space Grotesk', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
}
.event-detail-more-links a {
  color: var(--dusty-green);
  text-decoration: none;
  border-bottom: 2px solid currentColor;
}
.event-detail-more-links a:hover { color: var(--ink); }

.event-register-panel {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 1.25rem 1.25rem 1.35rem;
  box-shadow:
    0 0 0 4px #000,
    10px 10px 0 var(--tan-shadow);
  position: relative;
}
.event-register-eyebrow {
  margin: 0 0 0.25rem;
  font-family: 'Big Shoulders Display', 'Space Grotesk', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  color: var(--accent, var(--hi-amber));
}
.event-register-headline {
  margin: 0 0 0.75rem;
  font-family: 'Big Shoulders Display', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--s1);
}
.event-register-copy { margin: 0 0 1rem; font-size: 0.95rem; color: var(--ink); }
.event-register-cta { margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: center; }
.event-register-cta .btn { white-space: nowrap; flex: 0 1 auto; min-width: 0; font-size: 0.78rem; padding: 0.5rem 0.7rem; letter-spacing: 0.03em; }

.event-register-form { display: flex; flex-direction: column; }
.event-register-form .event-register-headline { margin-bottom: 0.85rem; }
.event-register-form-error {
  margin: 0 0 0.85rem;
  padding: 0.5rem 0.65rem;
  background: #2a0d0d;
  border: 1px solid #b04a4a;
  color: #ffd9d9;
  font-size: 0.85rem;
}
.event-register-field { display: flex; flex-direction: column; margin: 0 0 0.7rem; }
.event-register-field label {
  font-family: 'Big Shoulders Display', 'Space Grotesk', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  color: var(--ink);
  margin-bottom: 0.2rem;
}
.event-register-required { color: var(--accent, var(--hi-amber)); }
.event-register-optional {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.7rem;
  color: var(--muted);
  margin-left: 0.25rem;
}
.event-register-field input {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.5rem 0.6rem;
  background: #fff;
  color: #111;
  border: 1px solid var(--ink);
  border-radius: 0;
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.08);
}
.event-register-field input:focus {
  outline: 2px solid var(--accent, var(--hi-amber));
  outline-offset: 1px;
}
.event-register-field--error input {
  border-color: #b04a4a;
  background: #fff5f5;
}
.event-register-error {
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
  color: #d97676;
}
.event-register-form .event-register-cta { margin-top: 0.5rem; }
.event-register-panel--success .event-register-headline { color: var(--accent, var(--hi-amber)); }
.event-register-panel--sold-out .event-register-headline { color: var(--hi-red); }
.event-register-panel--sold-out .event-register-eyebrow { color: var(--hi-red); }

.event-register-venue-link {
  margin: 0.6rem 0 0;
  font-family: 'Big Shoulders Display', 'Space Grotesk', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
  text-align: center;
}
.event-register-venue-link a {
  color: var(--dusty-green);
  text-decoration: none;
  border-bottom: 2px solid currentColor;
}
.event-register-venue-link a:hover { color: var(--ink); }

.venue-page-see-all {
  margin: 1.5rem 0 2rem;
  padding: 0 1rem;
  font-family: 'Big Shoulders Display', 'Space Grotesk', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
}
.venue-page-see-all a {
  color: var(--dusty-green);
  text-decoration: none;
  border-bottom: 2px solid currentColor;
}
.venue-page-see-all a:hover { color: var(--ink); }
.event-register-panel--unconfirmed .event-register-headline { color: var(--dusty-green); }
.event-register-panel--unconfirmed .event-register-eyebrow { color: var(--dusty-green); }

@media (max-width: 900px) {
  .event-detail-body { grid-template-columns: 1fr; }
  .event-detail-card { margin: 1.25rem; max-width: none; }
}

/* ===== Mobile responsiveness cleanup ===== */
@media (max-width: 720px) {
  /* Home: don't lock to 100vh / hide overflow so short viewports can scroll */
  body.home { height: auto; overflow: visible; }
  body.home main { flex: 1 1 auto; }
  body.home header .site-name { visibility: visible; }
  body.home .hero-bg {
    margin-top: 0;
    padding-top: 0.5rem;
    min-height: 0;
    flex: 0 0 auto;
    aspect-ratio: auto;
  }
  body.home .hero-bg-card { flex: 0 1 auto; }

  .hero-bg-card-row { margin: 0; padding-right: 0; }
  .hero-bg-logo {
    display: none;
  }

  /* Events list: collapse "card with logo" to single column. Switch to
     auto-flow so each text row (date, time, title, venue, system, facts,
     cta) gets its own line in DOM order — the desktop grid-row pinning
     would otherwise stack date+time onto the same row at mobile widths. */
  .event-card--has-logo {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: auto;
    grid-auto-flow: row;
    padding-right: 1.1rem;
    overflow: hidden;
    row-gap: 0.15rem;
  }
  .event-card--has-logo > .event-card-logo {
    grid-column: 1;
    grid-row: 1;
    width: calc(100% + 2.2rem);
    height: 110px;
    max-height: 32vw;
    margin: -1rem -1.1rem 0.5rem;
    border-left: 0;
    border-bottom: 1px solid var(--ink);
    padding: 0.5rem;
  }
  .event-card--has-logo > .event-card-date,
  .event-card--has-logo > .event-card-time,
  .event-card--has-logo > .event-card-title,
  .event-card--has-logo > .event-card-venue,
  .event-card--has-logo > .event-card-system,
  .event-card--has-logo > .event-card-facts,
  .event-card--has-logo > .event-card-cta {
    grid-column: 1;
    grid-row: auto;
  }
  .event-card--has-logo > .event-card-cta { align-self: start; }
  .event-card-date,
  .event-card-time { line-height: 1.3; }

  /* NEXT card spans the full row in the mobile single-column list. Cap the
     logo so it doesn't dwarf the title and meta below it. */
  .upcoming-events--next .event-card--has-logo > .event-card-logo {
    height: 96px;
    max-height: 26vw;
  }

  /* CTA rows: allow wrapping instead of forcing a single squeezed row */
  .event-register-cta,
  .event-card-cta { flex-wrap: wrap; }
  .event-register-cta .btn,
  .event-card-cta .btn { white-space: normal; }
  .event-card-cta .btn { flex: 1 1 100%; }

  /* Mononworks venue logo: drop the overlay positioning so it doesn't
     sit on top of the heading / intro copy on phones */
  .mononworks-logo-overlay {
    position: static;
    display: block;
    width: min(60%, 240px);
    margin: 1rem auto 0;
    right: auto;
    top: auto;
    filter: none;
  }

  /* Books hero bleed: align with mobile gutter */
  .books-hero {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    aspect-ratio: auto;
    min-height: 0;
  }
  .books-hero-inner { padding: 1.25rem 1.5rem 3rem; }

  .upcoming-events,
  .upcoming-events--today + .upcoming-events,
  .upcoming-events--next + .upcoming-events { margin-top: 1.5rem; }
}

@media (max-width: 480px) {
  header { padding: 1.5rem 1rem; gap: 1rem; }
  main { padding-left: 1rem; padding-right: 1rem; }
  header .nav-toggle { top: 1.5rem; right: 1rem; }
  header nav { right: 1rem; }

  /* Keep full-bleed elements aligned to the tighter gutter */
  .hero-bg { margin-left: -1rem; margin-right: -1rem; }
  .books-hero { margin-left: -1rem; margin-right: -1rem; }
  body.ctx-events .about-page-split--reverse .about-page-art,
  body.ctx-red .about-page-split--reverse .about-page-art,
  body.ctx-yellow .about-page-split .about-page-art {
    margin-left: -1rem;
    margin-right: -1rem;
  }

  .hero-bg-card { padding: 1rem; }
  .event-card { padding: 1rem; }
  .event-detail-grid { padding-left: 1rem; padding-right: 1rem; }
}

@media (max-width: 360px) {
  header nav a { font-size: 1rem; letter-spacing: 0.04em; }
}

/* ===== Touch ergonomics + iOS Safari fixes (Task 102) ===== */

/* iOS Safari: background-attachment: fixed causes scroll jank and over-tall
   compositing layers on the home hero. Drop to scroll on touch widths. */
@media (max-width: 720px) {
  body { background-attachment: scroll; }
}

@media (max-width: 720px) {
  /* Nav links: 44px hit area while preserving desktop sizing */
  header nav a {
    min-height: 44px;
    padding: 0.85rem 1rem;
    display: flex;
    align-items: center;
  }
  /* Open hamburger menu sits at right:1.5rem; cap width so 12rem min-width
     can't push past the left viewport edge at 320px. */
  header nav {
    min-width: 0;
    max-width: calc(100vw - 3rem);
  }

  /* CTA buttons: real 44px hit area on phones */
  .btn {
    min-height: 44px;
    padding: 0.85rem 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .cta-row { gap: 0.85rem; }

  /* Tag chips: full 44px tap, more space between */
  .tag-chip {
    padding: 0.75rem 1rem;
    font-size: 0.8rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .post-card-tags { gap: 0.55rem; }
  .tag-list { gap: 0.65rem; }
  .tag-list a {
    padding: 0.7rem 1rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Footer link row: pad each link, drop the inline " · " separators that
     run into the tap targets. */
  .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 0.5rem; }
  .footer-links a,
  .footer-links .footer-admin-link {
    padding: 0.65rem 0.75rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    margin: 0;
  }

  /* Event-card action button row: comfortable two-button stack */
  .event-card-cta { gap: 0.55rem; }
  .event-card-cta .btn {
    min-height: 44px;
    padding: 0.65rem 0.8rem;
    font-size: 0.8rem;
  }

  /* Event detail: same row inside the register panel */
  .event-register-cta { gap: 0.6rem; }
  .event-register-cta .btn {
    min-height: 44px;
    flex: 1 1 100%;
    padding: 0.75rem 0.9rem;
    font-size: 0.85rem;
  }
  .event-register-field input { min-height: 44px; }
}

/* Admin pages — phone ergonomics */
@media (max-width: 720px) {
  .admin-toolbar {
    /* Single-column stack so each control gets its own row and 44px height */
    grid-template-columns: 1fr !important;
    gap: 0.6rem !important;
    padding: 0.75rem;
    position: static;
  }
  .admin-tool select,
  .admin-tool input {
    min-width: 0 !important;
    width: 100%;
    height: 44px !important;
    font-size: 1rem;
  }
  .admin-tool-actions { gap: 0.5rem; }
  .admin-tool-actions .btn,
  .admin-tool-actions .btn-primary,
  .admin-tool-actions .btn-ghost {
    height: 44px !important;
    min-height: 44px;
    flex: 1 1 auto;
    justify-content: center;
  }
  .admin-event-summary {
    padding: 0.85rem 0.85rem;
    min-height: 56px;
  }
  .admin-event-table-wrap { -webkit-overflow-scrolling: touch; }
  .admin-page { padding: 0 0.25rem; }
}

/* Very narrow phones — keep the registrations summary row from colliding */
@media (max-width: 360px) {
  .admin-event-summary {
    grid-template-columns: 1.2rem 1fr !important;
    grid-template-areas:
      "chev date"
      ".    title"
      ".    venue"
      ".    count" !important;
    row-gap: 0.25rem !important;
  }
  .admin-event-count { justify-self: start !important; }
}

/* ---- Email list: footer signup form ---- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.footer-subscribe {
  max-width: 30rem;
  margin: 0 auto 1.75rem;
  padding: 0 0 1.5rem;
  border-bottom: 1px solid rgba(201, 196, 182, 0.18);
}
.footer-subscribe-label {
  margin: 0 0 0.6rem;
  font-family: 'Big Shoulders Display', 'Space Grotesk', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 1.05rem;
  color: var(--ink);
}
.footer-subscribe-row {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}
.footer-subscribe-row input {
  flex: 1 1 16rem;
  min-width: 0;
  background: rgba(0,0,0,0.35);
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 0.55rem 0.75rem;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}
.footer-subscribe-row input:focus {
  outline: none;
  border-color: var(--dusty-green);
  box-shadow: 0 0 0 2px rgba(138, 166, 106, 0.3);
}
.footer-subscribe-row .btn {
  flex: 0 0 auto;
}
.footer-subscribe-note {
  margin: 0.6rem 0 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--muted);
}

/* ---- Email list: subscribe page ---- */
.subscribe-page .subscribe-card {
  max-width: 34rem;
}
.subscribe-intro {
  margin: 0 0 1.5rem;
  color: var(--ink);
}
.subscribe-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.subscribe-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.subscribe-field label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dusty-green);
}
.subscribe-field input {
  background: rgba(0,0,0,0.35);
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 0.6rem 0.75rem;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 1rem;
}
.subscribe-field input:focus {
  outline: none;
  border-color: var(--dusty-green);
  box-shadow: 0 0 0 2px rgba(138, 166, 106, 0.3);
}
.event-register-field--error input,
.subscribe-field.event-register-field--error input {
  border-color: var(--hi-red, #b8584a);
}
.subscribe-cta {
  margin: 0.25rem 0 0;
}
.subscribe-fineprint {
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--muted);
}

.subscribe-discord {
  text-align: center;
  padding: 1.5rem 0 0.5rem;
}
.subscribe-discord-lead {
  margin: 0 0 1.3rem;
  font-size: 1.1rem;
  color: var(--muted);
}
.subscribe-discord-btn {
  display: inline-block;
  background: #5865f2;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.9rem 2.1rem;
  font-size: 1.1rem;
  border-radius: 9px;
  text-decoration: none;
}
.subscribe-discord-btn:hover { background: #4752c4; color: #fff; }
.subscribe-discord-foot {
  margin: 1.6rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Honeypot: hidden from people, left in the DOM for bots to trip over.
   Positioned off-canvas rather than display:none — some bots skip fields
   that are display:none, and this also keeps it out of the tab order. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}