/* =========================================================================
   SPIRITS IN THE SILICON — site stylesheet
   Gold-leaf Byzantium over a wet neon street.
   ========================================================================= */

/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
  /* ground */
  --ink:        #06060a;
  --ink-1:      #0b0c12;
  --ink-2:      #12131c;
  --ink-3:      #1b1d29;
  --porphyry:   #2a0d20;

  /* gold leaf */
  --gold:       #d3ac5c;
  --gold-hi:    #f4dc9d;
  --gold-dim:   #7c6533;
  --gold-fade:  rgba(211, 172, 92, .22);

  /* neon */
  --magenta:    #ff2f7f;
  --cyan:       #37dfe6;
  --violet:     #9b6bff;

  /* type */
  --text:       #e9e5db;
  --text-2:     #b3ada0;
  --muted:      #857f74;

  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --serif:   "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* metrics */
  --wide:  1240px;
  --page:  1080px;
  --read:  720px;
  --gut:   clamp(20px, 5vw, 56px);
  --rule:  1px solid var(--gold-fade);
}

/* ---------- 2. Reset & base ---------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.68;
  font-weight: 350;
  letter-spacing: .002em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* a faint mosaic of gold tesserae over the whole page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .38;
  background-image:
    repeating-linear-gradient(0deg,  rgba(211,172,92,.05) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(90deg, rgba(211,172,92,.05) 0 1px, transparent 1px 9px);
}

/* height:auto is required — the width/height attributes on <img> are applied as
   presentational hints, so without it a sized image keeps its attribute height
   while CSS scales the width, and the picture stretches. */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--gold-hi); text-decoration: none; }
a:hover { color: #fff; }

::selection { background: var(--magenta); color: #fff; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- 3. Typography ------------------------------------------------ */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: .06em;
  margin: 0 0 .55em;
  text-transform: uppercase;
}

h1 { font-size: clamp(2.1rem, 6.4vw, 4.4rem); letter-spacing: .07em; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.35rem); }
h3 { font-size: clamp(1.05rem, 1.9vw, 1.3rem); letter-spacing: .1em; }
h4 { font-size: 0.88rem; letter-spacing: .22em; color: var(--gold); }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  line-height: 1.55;
  color: #ded9cd;
  font-weight: 400;
}

.eyebrow {
  font-family: var(--display);
  font-size: 0.74rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: .85em;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-fade), transparent);
}
.eyebrow { max-width: none; }
.eyebrow.center { justify-content: center; }
.eyebrow.center::after, .eyebrow.center::before {
  content: "";
  width: clamp(28px, 8vw, 90px);
  flex: none;
  height: 1px;
  background: var(--gold-fade);
}

.scripture {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.6;
  color: #cfc7b6;
}
.scripture cite {
  display: block;
  font-style: normal;
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: .28em;
  color: var(--gold-dim);
  margin-top: 1.1em;
}

.small { font-size: 0.88rem; color: var(--muted); line-height: 1.6; }
.dim { color: var(--text-2); }
.gold { color: var(--gold); }

/* ---------- 4. Layout ---------------------------------------------------- */

.wrap  { width: min(100% - var(--gut) * 2, var(--page)); margin-inline: auto; }
.wrap.wide { max-width: var(--wide); }
.wrap.read { max-width: var(--read); }

main { position: relative; z-index: 1; }

section { padding-block: clamp(64px, 9vw, 120px); position: relative; }
section.tight { padding-block: clamp(44px, 6vw, 72px); }

.section-head { margin-bottom: clamp(32px, 5vw, 56px); }
.section-head.center { text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head p { max-width: 62ch; }
.section-head.center p { margin-inline: auto; }

.grid { display: grid; gap: clamp(20px, 3vw, 34px); }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ---------- 5. Ornament -------------------------------------------------- */

.rule {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--gold);
  opacity: .55;
}
.rule::before, .rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-fade), transparent);
}
.rule svg { width: 20px; height: 20px; flex: none; }

/* small gold corner brackets used on cards + frames */
.bracketed { position: relative; }
.bracketed::before, .bracketed::after {
  content: "";
  position: absolute;
  width: 13px; height: 13px;
  border: 1px solid var(--gold);
  opacity: .5;
  transition: opacity .35s ease;
  pointer-events: none;
}
.bracketed::before { top: 8px;  left: 8px;  border-right: 0; border-bottom: 0; }
.bracketed::after  { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.bracketed:hover::before, .bracketed:hover::after { opacity: 1; }

/* the Byzantine arch — used to frame imagery */
.arch {
  border-radius: 46% 46% 4px 4px / 20% 20% 0 0;
  overflow: hidden;
}

/* ---------- 6. Buttons --------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: .95em 1.7em;
  border: 1px solid var(--gold);
  color: var(--gold-hi);
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: color .3s, background .3s, border-color .3s, box-shadow .3s;
}
.btn:hover {
  background: var(--gold);
  color: #14100a;
  box-shadow: 0 0 26px rgba(211,172,92,.3);
}
.btn.solid {
  background: var(--gold);
  color: #14100a;
}
.btn.solid:hover {
  background: var(--gold-hi);
  box-shadow: 0 0 34px rgba(244,220,157,.4);
}
.btn.ghost { border-color: rgba(233,229,219,.28); color: var(--text); }
.btn.ghost:hover { border-color: var(--text); background: rgba(233,229,219,.08); color: #fff; box-shadow: none; }
.btn.sm { font-size: 0.72rem; padding: .75em 1.3em; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- 7. Header / nav ---------------------------------------------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(6,6,10,.78);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: var(--rule);
  transition: background .3s;
}
.site-head .bar {
  width: min(100% - var(--gut) * 2, var(--wide));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 72px;
}

.brand { display: flex; align-items: center; gap: 12px; color: var(--text); min-width: 0; }
.brand svg { width: 26px; height: 26px; color: var(--gold); flex: none; }
.brand b {
  font-family: var(--display);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: .21em;
  text-transform: uppercase;
  line-height: 1.15;
  display: block;
}
.brand span {
  display: block;
  font-size: 0.62rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px); }
.nav a {
  font-family: var(--display);
  font-size: 0.76rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--text-2);
  position: relative;
  padding-block: 6px;
  transition: color .25s;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--gold-hi); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  flex: none;
  background: none;
  border: 1px solid var(--gold-fade);
  color: var(--gold);
  width: 42px; height: 38px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle svg { width: 18px; height: 18px; }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav {
    position: fixed;
    inset: 72px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(8,8,13,.98);
    backdrop-filter: blur(20px);
    border-bottom: var(--rule);
    padding: 8px var(--gut) 24px;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s, transform .25s, visibility .25s;
  }
  .nav[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
  .nav a { padding: 15px 0; border-bottom: var(--rule); font-size: 0.84rem; }
  .nav a::after { display: none; }
  .nav .btn { margin-top: 18px; justify-content: center; }
  .head-cta { display: none; }
}

@media (max-width: 620px) {
  .site-head .bar { gap: 12px; height: 66px; }
  .brand svg { width: 22px; height: 22px; }
  .brand b { font-size: 0.72rem; letter-spacing: .14em; }
  .brand span { font-size: 0.54rem; letter-spacing: .2em; }
  .nav { inset-block-start: 66px; }

  /* the kicker wraps here, which strands a separator at the end of a line —
     drop them and let the flex gap do the separating */
  .hero .kicker { gap: .35em 1.1em; }
  .hero .kicker i { display: none; }
}

/* ---------- 8. Hero ------------------------------------------------------ */

.hero {
  position: relative;
  min-height: min(94vh, 940px);
  display: grid;
  align-items: center;
  padding-block: clamp(80px, 12vw, 150px);
  overflow: hidden;
  isolation: isolate;
}
.hero-bg {
  position: absolute;
  inset: -8% 0 -8% 0;
  z-index: -2;
  background: #04040a url("../img/site/hero.jpg") center 38% / cover no-repeat;
  will-change: transform;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(6,6,10,.96) 0%, rgba(6,6,10,.92) 40%, rgba(6,6,10,.4) 74%, rgba(6,6,10,.62) 100%),
    linear-gradient(180deg, rgba(6,6,10,.6) 0%, rgba(6,6,10,0) 26%, rgba(6,6,10,0) 58%, var(--ink) 100%);
}
@media (max-width: 860px) {
  .hero::after {
    background: linear-gradient(180deg, rgba(6,6,10,.7) 0%, rgba(6,6,10,.86) 40%, rgba(6,6,10,.92) 74%, var(--ink) 100%);
  }
}

.hero-inner { width: min(100% - var(--gut) * 2, var(--wide)); margin-inline: auto; }
.hero-copy { max-width: 780px; }

.hero h1 {
  margin: 0 0 .3em;
  text-shadow: 0 2px 40px rgba(0,0,0,.8);
}
.hero h1 .line1 {
  display: block;
  font-size: .43em;
  letter-spacing: .38em;
  color: var(--gold);
  margin-bottom: .55em;
  text-shadow: 0 0 30px rgba(211,172,92,.35);
}
/* The ramp runs across, not down. A vertical gradient is clipped to the whole
   element, so a title that wraps gets a bright first line and a muddy second
   one; left-to-right gives every line the same treatment. */
.hero h1 .line2 {
  display: block;
  background: linear-gradient(96deg, #fffdf7 0%, var(--gold-hi) 40%, var(--gold) 72%, #c4a054 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 26px rgba(211,172,92,.22));
}

.hero .kicker {
  font-family: var(--display);
  font-size: clamp(0.74rem, 1.5vw, 0.86rem);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5em 1em;
}
.hero .kicker i {
  font-style: normal;
  color: var(--gold-dim);
}
.hero .lede { max-width: 56ch; margin-bottom: 1.25rem; }

.hero-byline {
  max-width: 56ch;
  margin: 0 0 2.2rem;
  font-family: var(--serif);
  font-size: clamp(1rem, 1.6vw, 1.16rem);
  line-height: 1.55;
  color: var(--text-2);
}
.hero-byline b { color: var(--gold-hi); font-weight: 400; }
.hero-byline .award { color: var(--gold); font-style: italic; }
.hero-byline a {
  display: inline-block;
  margin-left: .4em;
  font-family: var(--display);
  font-size: 0.66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
  border-bottom: 1px solid var(--gold-fade);
  padding-bottom: 2px;
  transition: color .25s, border-color .25s;
}
.hero-byline a:hover { color: #fff; border-color: var(--gold); }

.hero-meta {
  margin-top: clamp(34px, 5vw, 56px);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  font-family: var(--display);
  font-size: 0.68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 22px;
  border-top: var(--rule);
  max-width: 780px;
}
.hero-meta b { color: var(--gold); font-weight: 600; }

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  font-family: var(--display);
  font-size: 0.62rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-dim);
  display: grid;
  justify-items: center;
  gap: 10px;
}
/* On narrow screens the meta row wraps to several lines and grows into the
   absolutely-positioned hint. Drop it into the flow so it can never collide. */
@media (max-width: 900px) {
  .scroll-hint {
    position: static;
    transform: none;
    margin: clamp(30px, 7vw, 48px) auto 0;
  }
}
.scroll-hint::after {
  content: "";
  width: 1px; height: 40px;
  background: linear-gradient(var(--gold), transparent);
  animation: drip 2.4s ease-in-out infinite;
}
@keyframes drip {
  0%, 100% { opacity: .25; transform: scaleY(.5); transform-origin: top; }
  50%      { opacity: 1;   transform: scaleY(1);  transform-origin: top; }
}

/* ---------- 9. Bands (parallax image breaks) ----------------------------- */

.band {
  position: relative;
  padding-block: clamp(80px, 12vw, 150px);
  background-color: var(--ink-1);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  isolation: isolate;
  text-align: center;
}
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, var(--ink) 0%, rgba(6,6,10,.6) 20%, rgba(6,6,10,.6) 80%, var(--ink) 100%),
    radial-gradient(70% 60% at 50% 50%, rgba(6,6,10,.55), rgba(6,6,10,.1) 80%);
}
.band .wrap { position: relative; }
.band .timeline, .band .card, .band .map-frame, .band .faction { text-align: left; }

@media (hover: none), (max-width: 780px) {
  .band { background-attachment: scroll; }
}

/* ---------- 10. Cards ---------------------------------------------------- */

.card {
  background: linear-gradient(160deg, var(--ink-2), var(--ink-1) 70%);
  border: var(--rule);
  padding: clamp(22px, 3vw, 32px);
  position: relative;
  transition: border-color .35s, transform .35s, box-shadow .35s;
}
.card:hover {
  border-color: rgba(211,172,92,.45);
  box-shadow: 0 18px 50px -30px rgba(0,0,0,.9);
}
.card h3 { margin-bottom: .5em; color: var(--text); }
.card p { color: var(--text-2); font-size: 0.99rem; }

/* a laurel for an award, sat above the name */
.award-flag {
  display: inline-block;
  margin: 0 0 .9rem;
  padding: .5em .9em;
  font-family: var(--display);
  font-size: 0.61rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(211,172,92,.4);
  background: rgba(211,172,92,.06);
}

/* ---------- 11. Book entries --------------------------------------------- */

.book {
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: clamp(26px, 4.5vw, 60px);
  align-items: start;
  padding-block: clamp(56px, 6vw, 78px) clamp(40px, 6vw, 68px);
  border-top: var(--rule);
}
.book:first-of-type { border-top: 0; }

.book-cover {
  position: relative;
  display: block;
  border: 1px solid rgba(211,172,92,.3);
  box-shadow:
    0 26px 60px -28px rgba(0,0,0,.95),
    0 0 0 1px rgba(0,0,0,.6);
  transition: transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s, border-color .45s;
  background: var(--ink-2);
}
.book-cover img { width: 100%; }
.book-cover:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: 0 34px 70px -28px rgba(0,0,0,1), 0 0 40px -8px rgba(211,172,92,.32);
}
.book-cover.pending { filter: saturate(.92); }

/* the badge rides above the cover so it never sits on the artwork */
.badge {
  position: absolute;
  bottom: calc(100% + 9px);
  left: -1px;
  font-family: var(--display);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: .5em 1em;
  color: #0c0a06;
  background: var(--gold);
  z-index: 2;
}
.badge.soon    { background: var(--cyan);    color: #04191b; }
.badge.writing { background: transparent; color: var(--violet); border: 1px solid currentColor; background: rgba(10,8,16,.85); }

.book-body > .eyebrow { margin-bottom: .7rem; }
.book-body h2 { margin-bottom: .35em; }
.book-body .byline {
  font-family: var(--display);
  font-size: 0.74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #a08a52;
  margin-bottom: 1.5rem;
}
.book-body .btn-row { margin-top: 1.8rem; }

.specs {
  margin-top: 1.9rem;
  padding-top: 1.2rem;
  border-top: var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  font-family: var(--display);
  font-size: 0.66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-2);
}
.specs b { color: var(--gold-dim); font-weight: 600; }

@media (max-width: 720px) {
  .book { grid-template-columns: 1fr; }
  .book-cover { max-width: 260px; }
}

/* ---------- 12. Timeline ------------------------------------------------- */

.timeline {
  position: relative;
  margin: 0;
  padding: 0 0 0 clamp(26px, 4vw, 46px);
  list-style: none;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 6px; top: 8px; bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold-fade) 8%, var(--gold-fade) 92%, transparent);
}
.timeline li {
  position: relative;
  padding-block: clamp(12px, 1.6vw, 17px);
}
.timeline li::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(26px, 4vw, 46px) + 2px);
  top: calc(clamp(12px, 1.6vw, 17px) + .52em);
  width: 9px; height: 9px;
  background: var(--ink);
  border: 1px solid var(--gold-dim);
  transform: rotate(45deg);
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.timeline li:hover::before { background: var(--gold); border-color: var(--gold-hi); box-shadow: 0 0 14px var(--gold); }
.timeline .yr {
  font-family: var(--display);
  font-size: 0.8rem;
  letter-spacing: .18em;
  color: var(--gold);
  display: block;
  margin-bottom: .2em;
}
.timeline .ev { color: var(--text-2); font-size: 1rem; }
.timeline li.pivot { padding-block: clamp(20px, 2.4vw, 26px); }
.timeline li.pivot::before { background: var(--magenta); border-color: var(--magenta); box-shadow: 0 0 18px var(--magenta); }
.timeline li.pivot .yr { color: var(--magenta); }
.timeline li.pivot .ev { color: var(--text); font-family: var(--serif); font-size: 1.14rem; font-style: italic; }
.timeline li.now::before { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 18px var(--cyan); }
.timeline li.now .yr { color: var(--cyan); }
.timeline li.now .ev { color: var(--text); }

/* ---------- 13. Colour factions ------------------------------------------ */

.faction {
  display: grid;
  grid-template-columns: 4px 1fr;
  gap: 0 18px;
  padding: 16px 18px 16px 0;
  border-bottom: var(--rule);
  align-items: start;
}
.faction .swatch { align-self: stretch; background: var(--c); box-shadow: 0 0 16px -2px var(--c); }
.faction h4 { color: var(--text); font-size: 0.8rem; letter-spacing: .2em; margin-bottom: .35em; }
.faction p { font-size: 0.95rem; color: var(--text-2); margin: 0; max-width: 82ch; }

/* three cover studies, matched in shape */
.studies { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 20px); max-width: 760px; }
.studies figure { margin: 0; border: 1px solid rgba(211,172,92,.25); overflow: hidden; background: var(--ink-2); }
.studies img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; object-position: center top; }
@media (max-width: 560px) { .studies { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 14. Gallery -------------------------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(26px, 4vw, 40px);
}
.filters button {
  font-family: var(--display);
  font-size: 0.7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: .7em 1.3em;
  background: transparent;
  border: 1px solid rgba(211,172,92,.24);
  color: var(--text-2);
  cursor: pointer;
  transition: all .28s;
}
.filters button:hover { color: var(--gold-hi); border-color: var(--gold); }
.filters button[aria-pressed="true"] {
  background: var(--gold);
  border-color: var(--gold);
  color: #14100a;
}

.mosaic {
  columns: 3 260px;
  column-gap: clamp(12px, 1.6vw, 20px);
}
.mosaic figure {
  margin: 0 0 clamp(12px, 1.6vw, 20px);
  break-inside: avoid;
  position: relative;
  cursor: zoom-in;
  border: 1px solid rgba(211,172,92,.14);
  overflow: hidden;
  background: var(--ink-2);
  transition: border-color .35s;
}
.mosaic figure:hover { border-color: rgba(211,172,92,.6); }
.mosaic img {
  width: 100%;
  transition: transform .7s cubic-bezier(.2,.7,.3,1), filter .5s;
  filter: saturate(.9) brightness(.92);
}
.mosaic figure:hover img { transform: scale(1.05); filter: saturate(1.05) brightness(1); }
.mosaic figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 34px 16px 14px;
  font-size: 0.84rem;
  color: #efeade;
  background: linear-gradient(transparent, rgba(4,4,8,.94));
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s, transform .35s;
  line-height: 1.4;
}
.mosaic figure:hover figcaption, .mosaic figure:focus-within figcaption { opacity: 1; transform: none; }
.mosaic figure[hidden] { display: none; }

/* lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(3,3,6,.96);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 54px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.lightbox[data-open="true"] { opacity: 1; visibility: visible; }

.lb-figure { margin: 0; display: grid; justify-items: center; }

/* The image is held invisible until the new source has decoded. Without this
   the element keeps painting the PREVIOUS picture until the new one is ready,
   which reads as opening image A and having it swap to B a moment later. */
.lightbox img {
  max-width: min(100%, 1100px);
  max-height: 78vh;
  border: 1px solid rgba(211,172,92,.4);
  box-shadow: 0 40px 100px -40px #000;
  opacity: 0;
  transition: opacity .22s ease;
}
.lightbox img.ready { opacity: 1; }

.lb-figure figcaption {
  margin: 18px 0 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--display);
  font-size: 0.74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}
.lb-count {
  color: var(--muted);
  font-size: .88em;
  letter-spacing: .18em;
  padding-left: 14px;
  border-left: 1px solid var(--gold-fade);
}

/* previous / next */
.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 54px; height: 54px;
  display: grid;
  place-items: center;
  background: rgba(6,6,10,.6);
  border: 1px solid var(--gold-fade);
  color: var(--gold);
  cursor: pointer;
  font-size: 1.6rem;
  line-height: 1;
  transition: background .25s, border-color .25s, color .25s;
}
.lb-nav:hover { background: var(--gold); border-color: var(--gold); color: #14100a; }
.lb-prev { left: clamp(8px, 2.5vw, 34px); }
.lb-next { right: clamp(8px, 2.5vw, 34px); }

@media (max-width: 640px) {
  .lb-nav { width: 44px; height: 44px; font-size: 1.3rem; top: auto; bottom: 14px; transform: none; }
  .lb-prev { left: 14px; }
  .lb-next { right: 14px; }
  .lightbox img { max-height: 66vh; }
}
.lightbox .close {
  position: absolute;
  top: clamp(14px, 3vw, 30px);
  right: clamp(14px, 3vw, 30px);
  width: 46px; height: 46px;
  background: none;
  border: 1px solid var(--gold-fade);
  color: var(--gold);
  font-size: 1.2rem;
  cursor: pointer;
  transition: all .25s;
}
.lightbox .close:hover { background: var(--gold); color: #14100a; }

/* ---------- 15. Character strip ------------------------------------------ */

.people-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(14px, 2vw, 24px);
}
.person { position: relative; }
.person .frame {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid rgba(211,172,92,.2);
  background: var(--ink-2);
  border-radius: 46% 46% 3px 3px / 20% 20% 0 0;
}
.person .frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.85) brightness(.88) contrast(1.03);
  transition: transform .8s cubic-bezier(.2,.7,.3,1), filter .5s;
}
.person:hover .frame img { transform: scale(1.06); filter: saturate(1) brightness(1); }
.person .frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 45%, rgba(6,6,10,.9));
}
.person h4 {
  margin: 14px 0 .3em;
  color: var(--gold);
  font-size: 0.78rem;
  letter-spacing: .18em;
}
.person p { font-size: 0.9rem; color: var(--text-2); margin: 0; }

/* ---------- 16. Author blocks -------------------------------------------- */

.author {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 34px);
  padding-block: clamp(36px, 5vw, 56px);
  border-top: var(--rule);
}
.author:first-of-type { border-top: 0; padding-top: 0; }
.author .name { margin-bottom: .2em; }
.author .role {
  font-family: var(--display);
  font-size: 0.7rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #a08a52;
  margin-bottom: 1.4rem;
}
.author .stack, .author .facts, .author .links { max-width: 72ch; }
.author .links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 1.5rem;
  font-size: 0.84rem;
  letter-spacing: .05em;
}
.author .links a { color: var(--text-2); border-bottom: 1px solid var(--gold-fade); padding-bottom: 2px; }
.author .links a:hover { color: var(--gold-hi); border-color: var(--gold); }

.facts {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  gap: .55em;
}
.facts li {
  position: relative;
  padding-left: 22px;
  font-size: 0.96rem;
  color: var(--text-2);
}
.facts li::before {
  content: "";
  position: absolute;
  left: 2px; top: .62em;
  width: 6px; height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
  opacity: .8;
}

/* ---------- 16b. Newsletter signup --------------------------------------- */

[hidden] { display: none !important; }

.signup { margin: 2.2rem auto 0; max-width: 580px; }

.signup-row { display: flex; gap: 10px; flex-wrap: wrap; }

.signup input[type="email"] {
  flex: 1 1 250px;
  min-width: 0;
  background: rgba(4,4,8,.72);
  border: 1px solid rgba(211,172,92,.34);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 350;
  padding: 1em 1.15em;
  transition: border-color .3s, box-shadow .3s, background .3s;
}
.signup input[type="email"]::placeholder { color: var(--muted); }
.signup input[type="email"]:focus {
  outline: none;
  background: rgba(4,4,8,.9);
  border-color: var(--gold);
  box-shadow: 0 0 24px -6px rgba(211,172,92,.55);
}
.signup .btn { flex: 0 0 auto; }

.signup-note { margin: 1rem 0 0; }

.signup-status {
  margin: .9rem 0 0;
  min-height: 1.2em;
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-2);
}
.signup-status[data-state="ok"]  { color: var(--cyan); }
.signup-status[data-state="err"] { color: var(--magenta); }

/* the confirmation that replaces the field once an address is in */
.signup-done { display: grid; justify-items: center; gap: 14px; padding: .6rem 0; }
.signup-done svg { width: 22px; height: 22px; color: var(--gold); }
.signup-done p {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: #ded9cd;
}

/* honeypot — off-screen, never focusable, never announced */
.signup .hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.signup-alt {
  margin-top: clamp(26px, 3.5vw, 38px);
  padding-top: clamp(20px, 2.6vw, 28px);
  border-top: var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
}
.signup-alt .small { margin: 0; }

/* ---------- 16c. Convention promo + countdown ---------------------------- */

.promo {
  border-block: 1px solid rgba(211,172,92,.28);
  background:
    radial-gradient(120% 150% at 50% 0%, rgba(255,47,127,.09), transparent 58%),
    linear-gradient(180deg, var(--ink-2), var(--ink-1));
  padding-block: clamp(30px, 4.5vw, 52px);
  text-align: center;
  position: relative;
}
.promo .wrap { position: relative; }
.promo h2 { margin-bottom: .45em; }
.promo .promo-where {
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #a89f8e;
  margin: 0 0 1.7rem;
}
.promo .promo-copy {
  max-width: 52ch;
  margin: 0 auto;
  color: var(--text-2);
}
.promo .promo-copy strong { color: var(--gold-hi); font-weight: 500; }
.promo .btn-row { justify-content: center; margin-top: 1.9rem; }

/* the clock */
.countdown {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(10px, 2vw, 22px);
  margin: 0 0 1.8rem;
  padding: 0;
  list-style: none;
}
.countdown li {
  min-width: clamp(62px, 9vw, 88px);
  padding: .7em .5em .6em;
  border: 1px solid rgba(211,172,92,.26);
  background: rgba(4,4,8,.55);
}
.countdown .n {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.5rem, 4vw, 2.3rem);
  font-weight: 600;
  line-height: 1;
  color: var(--gold-hi);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 26px rgba(211,172,92,.35);
}
.countdown .u {
  display: block;
  margin-top: .6em;
  font-family: var(--display);
  font-size: 0.6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
.countdown-label {
  font-family: var(--display);
  font-size: 0.7rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.1rem;
}
/* the seconds cell gets a faint pulse so the clock reads as live */
.countdown li:last-child .n { color: var(--cyan); text-shadow: 0 0 26px rgba(55,223,230,.4); }

/* Until the script has run there are no digits to show, so the clock stays
   hidden and the promo still reads as a normal call to action. */
.countdown:not([data-live="true"]) { display: none; }

/* ---------- 17. Callout / CTA -------------------------------------------- */

.callout {
  border: 1px solid rgba(211,172,92,.3);
  padding: clamp(30px, 5vw, 56px);
  text-align: center;
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(211,172,92,.09), transparent 62%),
    linear-gradient(160deg, var(--ink-2), var(--ink-1));
  position: relative;
}
.callout h2 { margin-bottom: .5em; }
.callout p { max-width: 56ch; margin-inline: auto; color: var(--text-2); }
/* beats `.callout p` on specificity — an eyebrow must never wrap between its rules */
.callout .eyebrow { max-width: none; }
.callout .btn-row { justify-content: center; margin-top: 2rem; }

/* ---------- 18. Footer --------------------------------------------------- */

.site-foot {
  border-top: var(--rule);
  padding-block: clamp(46px, 6vw, 70px) 34px;
  background: linear-gradient(180deg, var(--ink-1), var(--ink));
  position: relative;
  z-index: 1;
}
.foot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(26px, 4vw, 50px);
  margin-bottom: clamp(34px, 5vw, 52px);
}
@media (min-width: 900px) {
  .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1.15fr; }
}
.site-foot .brand { align-items: flex-start; }
.site-foot h4 { margin-bottom: 1.1em; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65em; }
.site-foot li a { color: var(--text-2); font-size: 0.94rem; }
.site-foot li a:hover { color: var(--gold-hi); }
.foot-base {
  padding-top: 26px;
  border-top: var(--rule);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  font-size: 0.8rem;
  color: var(--muted);
}

/* ---------- 19. Motion --------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .85s cubic-bezier(.2,.7,.3,1), transform .85s cubic-bezier(.2,.7,.3,1);
}
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .1s; }
[data-reveal][data-delay="2"] { transition-delay: .2s; }
[data-reveal][data-delay="3"] { transition-delay: .3s; }
[data-reveal][data-delay="4"] { transition-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero-bg { transform: none !important; }
  .band { background-attachment: scroll; }
}

/* ---------- 20. Utilities ------------------------------------------------ */

.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-l { margin-top: clamp(28px, 4vw, 46px); }
.stack > * + * { margin-top: 1.1em; }
.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;
}
.skip {
  position: absolute; top: -60px; left: 12px; z-index: 100;
  background: var(--gold); color: #14100a;
  padding: 10px 18px; font-family: var(--display);
  font-size: 0.76rem; letter-spacing: .18em; text-transform: uppercase;
  transition: top .2s;
}
.skip:focus { top: 12px; }

.figure-note {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: .9em;
  font-style: italic;
}

/* The maps are hand-drawn on parchment, so they are left alone — only knocked
   back a little at rest so they sit on the dark page rather than glaring off
   it, and brought up to full on hover. Reads as a lit map on a dark table. */
.map-frame {
  border: 1px solid rgba(211,172,92,.3);
  background: #0a0b11;
  padding: clamp(10px, 1.6vw, 18px);
  position: relative;
  box-shadow: 0 28px 70px -40px rgba(0,0,0,.95);
}
.map-frame img {
  width: 100%;
  filter: brightness(.93) saturate(.95) contrast(1.02);
  transition: filter .5s ease;
}
.map-frame:hover img { filter: none; }