/* ==========================================================================
   TOKENS — the whole system lives here. Change a value, the site follows.
   ========================================================================== */

:root {
  /* --- Ground ------------------------------------------------------------
     Near-black with a violet cast so the accents sit warm against it
     instead of buzzing the way they do on pure #000.                      */
  --pitch:        #0d0c0f;
  --pitch-raised: #16141d;
  --pitch-card:   #1d1927;
  --pitch-line:   #2e2839;
  --pitch-hint:   #453d55;

  /* --- Accents -----------------------------------------------------------
     Three loud voices + one bone white. Never more than two accents in a
     single component, or the page starts shouting over itself.            */
  --flare:  #ff6a35;   /* Flare Orange  — heat, primary CTA, rarity: common */
  --volt:   #c9f24e;   /* Volt Lime     — signal, focus, rarity: rare       */
  --haze:   #b18cff;   /* Haze Violet   — depth, quiet, rarity: mythic      */
  --bone:   #f2ece0;   /* Bone White    — body copy, hairlines             */

  /* Tinted versions for washes and hover states */
  --flare-dim: #ff6a3522;
  --volt-dim:  #c9f24e22;
  --haze-dim:  #b18cff22;

  /* --- Text --------------------------------------------------------------- */
  --text:       var(--bone);
  --text-mute:  #a49bb0;
  --text-faint: #8b81a0;   /* 5.3:1 on --pitch; eyebrows and mono labels use it */
  --text-on-accent: var(--pitch);

  /* --- Type ---------------------------------------------------------------
     Display carries the attitude. Body stays out of the way.
     Mono is for labels, stats, hex codes — anything that should read as data. */
  --font-display: "Bricolage Grotesque", "Archivo Black", Impact, sans-serif;
  --font-body:    "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Fluid scale, 1.25 ratio at the small end opening to ~1.4 at the top */
  --t-mono:  0.6875rem;                              /* 11px labels        */
  --t-xs:    0.8125rem;                              /* 13px fine print    */
  --t-sm:    0.9375rem;                              /* 15px UI            */
  --t-base:  clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --t-lg:    clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
  --t-xl:    clamp(1.5rem, 1.3rem + 0.9vw, 2.125rem);
  --t-2xl:   clamp(2rem, 1.6rem + 1.9vw, 3.25rem);
  --t-3xl:   clamp(2.75rem, 1.9rem + 4vw, 5.5rem);
  --t-4xl:   clamp(3.5rem, 1.8rem + 8vw, 9rem);      /* hero only          */

  --lh-tight: 0.92;
  --lh-snug:  1.08;
  --lh-body:  1.6;
  --track-display: -0.03em;
  --track-mono:     0.14em;

  /* --- Space — 4px base, named by intent not by number ------------------- */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;
  --s-10: 8rem;
  --section-y: clamp(4rem, 9vw, 8rem);

  /* --- Grid ---------------------------------------------------------------
     12 col @ 1440 · 8 col @ 768 · 4 col @ 428. Gutter scales, margin doesn't. */
  --page-max: 1440px;
  --gutter:   clamp(1rem, 2.2vw, 1.75rem);
  --margin:   clamp(1.25rem, 5vw, 4rem);
  --cols: 12;

  /* --- Edges ---------------------------------------------------------------
     Hard borders and offset shadows, never blur. This is a print look —
     screen-printed posters and card backs, not glass.                      */
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-pill: 999px;
  --border: 2px solid var(--pitch-line);
  --border-bone: 2px solid var(--bone);
  --offset:    5px 5px 0 var(--pitch);
  --offset-lg: 9px 9px 0 var(--pitch);

  /* --- Motion --------------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out-back: cubic-bezier(0.34, 1.4, 0.5, 1);
  --dur-fast: 140ms;
  --dur:      260ms;
  --dur-slow: 620ms;

  /* --- Motif ---------------------------------------------------------------
     Manga print language: screentone dot fields, hard panel gutters,
     speed lines. Sizes are tokens so the whole page retunes together.     */
  --tone-size: 7px;      /* halftone dot pitch                             */
  --tone-dot:  1.6px;    /* dot radius — keep under half the pitch         */
  --panel-gutter: 4px;   /* the white space between manga panels           */

  --z-grain:     900;
  --z-nav:       800;
  --z-lightbox: 1000;
}

@media (max-width: 900px) { :root { --cols: 8; } }
@media (max-width: 560px) { :root { --cols: 4; } }


/* ==========================================================================
   BASE — reset, typography defaults, layout primitives, page texture
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--pitch);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input { font: inherit; color: inherit; }

::selection { background: var(--volt); color: var(--pitch); }

:focus-visible {
  outline: 3px solid var(--volt);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* --- Headings ------------------------------------------------------------ */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--t-4xl); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); line-height: var(--lh-snug); }
h4 { font-size: var(--t-lg); line-height: var(--lh-snug); }

p { margin: 0 0 var(--s-4); max-width: 62ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--volt); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* --- Layout primitives --------------------------------------------------- */

.page {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--margin);
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--gutter);
}

/* overflow: clip contains the .speedlines bleed without making a scroll container. */
.section { padding-block: var(--section-y); position: relative; overflow: clip; }
.section + .section { border-top: 1px solid var(--pitch-line); }

.stack > * + * { margin-top: var(--flow, var(--s-4)); }

/* Escapes .page padding. Deliberately not 100vw — that includes the
   scrollbar gutter and pushes the document into horizontal overflow. */
.bleed { margin-inline: calc(-1 * var(--margin)); }

/* --- Utility type -------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  font-weight: 700;
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-faint);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--pitch-line);
}

.mono { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.04em; }
.lede { font-size: var(--t-lg); color: var(--text-mute); max-width: 48ch; }
.mute { color: var(--text-mute); }

.ink-flare { color: var(--flare); }
.ink-volt  { color: var(--volt); }
.ink-haze  { color: var(--haze); }
.ink-bone  { color: var(--bone); }

/* --- Texture -------------------------------------------------------------
   A single fixed grain layer over the whole page. Screen-print paper feel;
   without it the flat blacks read as "unstyled dark mode".               */

.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Screentone — the halftone dot field that carries the manga register.
   Two layers at different pitches, the coarser one offset by half a step,
   so it never resolves into an obvious square lattice. Always masked, so
   it fades into the ground instead of ending on a hard edge.           */

.screentone {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(var(--tone-dot) at 50% 50%, color-mix(in srgb, var(--tone, var(--bone)) 46%, transparent) 99%, transparent 100%),
    radial-gradient(var(--tone-dot) at 50% 50%, color-mix(in srgb, var(--tone, var(--bone)) 22%, transparent) 99%, transparent 100%);
  background-size:
    var(--tone-size) var(--tone-size),
    calc(var(--tone-size) * 2) calc(var(--tone-size) * 2);
  background-position: 0 0, var(--tone-size) var(--tone-size);
  --tone-mask: radial-gradient(
    120% 90% at var(--tone-x, 84%) var(--tone-y, 24%),
    #000 0%, rgba(0,0,0,0.35) 42%, transparent 72%);
  -webkit-mask-image: var(--tone-mask);
  mask-image: var(--tone-mask);
  opacity: var(--tone-opacity, 0.5);
}

/* Speed lines — the burst behind a moment of emphasis. Expensive
   visually, so no more than two on a page.                             */

.speedlines {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background: repeating-conic-gradient(
    from 0deg at var(--burst-x, 50%) var(--burst-y, 50%),
    color-mix(in srgb, var(--burst, var(--bone)) 13%, transparent) 0deg 0.7deg,
    transparent 0.7deg 3.4deg);
  --burst-mask: radial-gradient(
    circle at var(--burst-x, 50%) var(--burst-y, 50%),
    transparent 0%, transparent 22%, #000 58%, transparent 82%);
  -webkit-mask-image: var(--burst-mask);
  mask-image: var(--burst-mask);
  opacity: var(--burst-opacity, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Screen-reader-only ---------------------------------------------------
   Visually gone, still announced. Used for the menu button label and the
   email field label.                                                     */

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

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 1px 5px;
  border-radius: var(--r-sm);
  background: var(--pitch-card);
  color: var(--volt);
}


/* ==========================================================================
   COMPONENTS
   ========================================================================== */

/* --- Nav ----------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-4) var(--margin);
  background: color-mix(in srgb, var(--pitch) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--pitch-line);
}

.nav__logo {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  flex: none;
  border: var(--border-bone);
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.04em;
}

.nav__links { display: flex; gap: var(--s-5); margin-left: auto; }
.nav__links a {
  color: var(--text-mute);
  text-decoration: none;
  font-size: var(--t-sm);
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease);
}
.nav__links a:hover { color: var(--bone); }

@media (max-width: 760px) { .nav__links { display: none; } }

/* --- Buttons -------------------------------------------------------------
   Hard offset shadow, no blur. Pressing collapses the offset — the button
   physically moves onto the page rather than fading.                     */

.btn {
  --btn-bg: var(--volt);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  background: var(--btn-bg);
  color: var(--text-on-accent);
  border: 2px solid var(--pitch);
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: var(--t-sm);
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 0 0 2px var(--btn-bg);
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.btn:hover  { transform: translate(-2px, -2px); box-shadow: 0 0 0 2px var(--btn-bg), 4px 4px 0 var(--pitch); }
.btn:active { transform: translate(0, 0);       box-shadow: 0 0 0 2px var(--btn-bg); }

.btn--flare { --btn-bg: var(--flare); }
.btn--haze  { --btn-bg: var(--haze); }
.btn--ghost {
  background: transparent;
  color: var(--bone);
  border-color: var(--pitch-hint);
  box-shadow: none;
}
.btn--ghost:hover { border-color: var(--bone); box-shadow: none; transform: translate(-2px,-2px); }

/* --- Tags / pills -------------------------------------------------------- */

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 5px var(--s-3);
  border: 1px solid var(--pitch-hint);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-mute);
}
.tag--flare { border-color: var(--flare); color: var(--flare); background: var(--flare-dim); }
.tag--volt  { border-color: var(--volt);  color: var(--volt);  background: var(--volt-dim); }
.tag--haze  { border-color: var(--haze);  color: var(--haze);  background: var(--haze-dim); }

/* --- Cards ---------------------------------------------------------------
   The workhorse. Accent lives on the top rule and nowhere else, so a wall
   of these stays readable instead of turning into confetti.              */

.card {
  --accent: var(--pitch-hint);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--pitch-card);
  border: var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--accent);
}
.card:hover { transform: translateY(-4px); border-color: var(--accent); }
.card--flare { --accent: var(--flare); }
.card--volt  { --accent: var(--volt); }
.card--haze  { --accent: var(--haze); }

.card__title { font-family: var(--font-display); font-weight: 800; font-size: var(--t-lg); line-height: var(--lh-snug); }
.card__body  { font-size: var(--t-sm); color: var(--text-mute); margin: 0; }

/* Solid-colour variant — for the loud 3-up rows */
.card--solid {
  background: var(--accent);
  color: var(--text-on-accent);
  border-color: var(--pitch);
}
.card--solid::before { display: none; }
.card--solid .card__body { color: color-mix(in srgb, var(--pitch) 72%, transparent); }

/* --- Image slots ---------------------------------------------------------
   Placeholders until real art arrives. Labelled with the ratio they expect
   so swapping in a file is a one-line change.                            */

.slot {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: var(--ratio, 4 / 5);
  border: 2px dashed var(--pitch-hint);
  border-radius: var(--r-md);
  background:
    repeating-linear-gradient(45deg,
      transparent 0 9px,
      color-mix(in srgb, var(--bone) 3.5%, transparent) 9px 10px);
  color: var(--text-mute);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.9;
}
.slot--square { --ratio: 1 / 1; }
.slot--wide   { --ratio: 16 / 9; }
.slot--card   { --ratio: 63 / 88; }   /* real trading-card proportion */

/* --- Marquee -------------------------------------------------------------
   Two identical tracks side by side, translated one full width. Seamless
   because the second track lands exactly where the first began.          */

.marquee {
  display: flex;
  overflow: hidden;
  padding-block: var(--s-3);
  background: var(--bone);
  color: var(--pitch);
  border-block: 2px solid var(--pitch);
  user-select: none;
}
.marquee__track {
  display: flex;
  flex: none;
  gap: var(--s-6);
  padding-right: var(--s-6);
  animation: slide 28s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-lg);
  letter-spacing: -0.02em;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--s-6);
}
.marquee__item::after { content: "\25C6"; font-size: 0.6em; color: var(--flare); }

@keyframes slide { to { transform: translateX(-100%); } }

/* --- Sticker -------------------------------------------------------------
   Rotating circular badge. Decorative only, so it's aria-hidden in markup. */

.sticker {
  display: grid;
  place-items: center;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: var(--flare);
  color: var(--pitch);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-sm);
  text-align: center;
  line-height: 1.1;
  border: 2px solid var(--pitch);
  animation: bob 5s var(--ease) infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50%      { transform: translateY(-10px) rotate(6deg); }
}

/* --- CTA panel ----------------------------------------------------------- */

.cta {
  position: relative;
  padding: clamp(2rem, 6vw, 4.5rem);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 140% at 12% 0%, color-mix(in srgb, var(--haze) 26%, transparent) 0%, transparent 55%),
    radial-gradient(100% 120% at 100% 100%, color-mix(in srgb, var(--flare) 20%, transparent) 0%, transparent 55%),
    var(--pitch-raised);
  border: var(--border);
  overflow: hidden;
}

/* --- Footer -------------------------------------------------------------- */

.footer { padding-block: var(--s-8) var(--s-6); border-top: 1px solid var(--pitch-line); }
.footer__big { font-family: var(--font-display); font-weight: 800; font-size: var(--t-3xl); line-height: var(--lh-tight); letter-spacing: var(--track-display); }

/* --- Span helpers (12-col) ----------------------------------------------- */

.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-12 { grid-column: span 12; }

@media (max-width: 900px) {
  .col-4, .col-5, .col-6, .col-7, .col-8, .col-12 { grid-column: span 8; }
}
@media (max-width: 560px) {
  .col-4, .col-5, .col-6, .col-7, .col-8, .col-12 { grid-column: span 4; }
}

/* ==========================================================================
   MANGA LAYER — panels, events, roles, lightbox
   ========================================================================== */

/* --- Skip link ----------------------------------------------------------- */

.skip {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: calc(var(--z-nav) + 1);
  padding: var(--s-3) var(--s-4);
  background: var(--volt);
  color: var(--pitch);
  font-weight: 700;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease);
}
.skip:focus { top: var(--s-4); }

/* --- Nav toggle ---------------------------------------------------------- */

.nav__toggle {
  display: none;
  margin-left: auto;
  padding: var(--s-2) var(--s-3);
  background: none;
  border: var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.nav__toggle .bar { display: block; width: 20px; height: 2px; background: var(--bone); }
.nav__toggle .bar + .bar { margin-top: 4px; }

@media (max-width: 760px) {
  .nav__toggle { display: block; }
  .nav__links {
    position: fixed;
    inset: 64px 0 auto 0;
    flex-direction: column;
    gap: 0;
    padding: var(--s-4) var(--margin) var(--s-6);
    background: var(--pitch-raised);
    border-bottom: var(--border);
  }
  .nav__links[hidden] { display: none; }
  .nav__links:not([hidden]) { display: flex; }
  .nav__links a { padding-block: var(--s-3); font-size: var(--t-lg); border-bottom: 1px solid var(--pitch-line); }
  .nav .btn { display: none; }
}

/* --- Panel grid ----------------------------------------------------------
   A manga page, not a card grid. Cells butt against each other separated
   only by a hard gutter of ground colour, and spans are deliberately
   uneven so the eye travels the page instead of scanning a table.       */

.panels {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--panel-gutter);
  background: var(--pitch);
  border: var(--panel-gutter) solid var(--pitch);
  border-radius: var(--r-md);
}

.panel {
  position: relative;
  overflow: hidden;
  background: var(--pitch-raised);
  grid-column: span 2;
  min-height: 180px;
}
.panel--tall  { grid-row: span 2; }
.panel--wide  { grid-column: span 4; }
.panel--full  { grid-column: span 6; }

/* Clickable panels get the affordance; static ones stay inert. */
.panel--open { cursor: zoom-in; border: 0; padding: 0; width: 100%; font: inherit; color: inherit; text-align: left; }
.panel--open .slot { border-style: solid; border-color: var(--pitch-line); }
.panel--open:hover .slot { border-color: var(--bone); }

.panel__credit {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--s-3);
  background: linear-gradient(to top, var(--pitch) 10%, transparent);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-mute);
}

/* Masonry variant for long photo sets: columns keep every photo uncropped
   at its own ratio, and the gutter stays the same hard manga rule. */
.panels--masonry { display: block; columns: 3 280px; column-gap: var(--panel-gutter); }
.panels--masonry .panel { display: block; break-inside: avoid; margin-bottom: var(--panel-gutter); min-height: 0; }
.panels--masonry .panel:last-child { margin-bottom: 0; }
.panels--masonry .panel img { height: auto; }

@media (max-width: 900px) { .panels { grid-template-columns: repeat(4, 1fr); } .panel--wide, .panel--full { grid-column: span 4; } }
@media (max-width: 560px) { .panels { grid-template-columns: repeat(2, 1fr); } .panel, .panel--wide, .panel--full { grid-column: span 2; } .panel--tall { grid-row: span 1; } }

/* --- Events --------------------------------------------------------------
   Date block on the left reads as a stamp; the accent rule on the card
   already carries status, so the tag stays quiet.                       */

.event {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: var(--s-5);
  align-items: start;
  padding: var(--s-5);
  border: var(--border);
  border-radius: var(--r-lg);
  background: var(--pitch-card);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.event:hover { border-color: var(--accent, var(--pitch-hint)); transform: translateX(4px); }
.event--upcoming { --accent: var(--volt); }
.event--past     { --accent: var(--haze); }

.event__date {
  display: grid;
  place-items: center;
  gap: 2px;
  padding: var(--s-3);
  border: 2px solid var(--accent, var(--pitch-hint));
  border-radius: var(--r-md);
  color: var(--accent, var(--text-mute));
  font-family: var(--font-mono);
  text-align: center;
}
.event__day   { font-size: var(--t-xl); font-weight: 700; line-height: 1; }
.event__month { font-size: var(--t-mono); letter-spacing: var(--track-mono); text-transform: uppercase; }
.event__meta  { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.event__venue { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-faint); }

@media (max-width: 560px) {
  .event { grid-template-columns: 1fr; }
  .event__date { justify-self: start; padding-inline: var(--s-5); }
}

/* --- Socials -------------------------------------------------------------- */

.socials { display: flex; flex-wrap: wrap; gap: var(--s-3); list-style: none; margin: 0; padding: 0; }
.socials a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--pitch-hint);
  border-radius: var(--r-pill);
  color: var(--text-mute);
  text-decoration: none;
  font-size: var(--t-sm);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.socials a:hover { color: var(--pitch); background: var(--bone); border-color: var(--bone); }
.stack > .socials + *, .stack > * + .socials { margin-top: var(--flow, var(--s-4)); }
.about-since { font-family: var(--font-display); font-weight: 800; font-size: var(--t-2xl); line-height: var(--lh-tight); color: var(--flare); margin: 0; }

/* --- Lightbox ------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: grid;
  place-items: center;
  padding: var(--margin);
  background: color-mix(in srgb, var(--pitch) 92%, transparent);
  backdrop-filter: blur(6px);
}
.lightbox[hidden] { display: none; }
.lightbox__frame { width: min(760px, 100%); }
.lightbox__caption {
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-mute);
}
.lightbox__close {
  position: absolute;
  top: var(--margin); right: var(--margin);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: none;
  border: var(--border-bone);
  border-radius: 50%;
  color: var(--bone);
  font-size: 1.25rem;
  cursor: pointer;
}
.lightbox__close:hover { background: var(--bone); color: var(--pitch); }

/* --- Reveal on scroll ------------------------------------------------------
   Only applied once JS confirms motion is welcome, so no-JS and
   reduced-motion users never meet a hidden element.                      */

.js-motion [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.js-motion [data-reveal].is-in { opacity: 1; transform: none; }

/* --- Placeholder text ------------------------------------------------------
   Everything TCG still needs to supply is marked, not faked. Visible on
   purpose — the site should look unfinished until real content lands.   */

.ph {
  color: var(--text-faint);
  border-bottom: 1px dashed var(--pitch-hint);
  font-style: italic;
}

/* Real images fill their panel edge to edge; the placeholder slots size
   themselves from aspect-ratio instead. Swapping a .slot for an <img>
   needs no other change.                                              */
.panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hero sticker — overlaps the portrait's corner on desktop, but pulls back
   inside the frame on narrow screens where the overhang gets clipped. */
.hero-sticker {
  position: absolute;
  bottom: -28px;
  left: -28px;
}
@media (max-width: 900px) {
  .hero-sticker {
    width: 92px;
    height: 92px;
    bottom: var(--s-4);
    left: var(--s-4);
  }
}

/* ==========================================================================
   SECTION HEADERS — one shape per section
   Four sections sharing one header template made the page read as a
   template repeated four times. Each section now gets its own shape.
   ========================================================================== */

/* About: the headline runs full width and the body sits under it, indented
   to the right, so the statement lands before any explanation. */
.statement { max-width: 16ch; }

.offset-4 { grid-column: 5 / span 4; }
@media (max-width: 900px) { .offset-4 { grid-column: span 8; } }
@media (max-width: 560px) { .offset-4 { grid-column: span 4; } }

/* Events: headline and a short status note share one baseline. */
.head-split {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4) var(--s-6);
}
.head-split__note {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Gallery: mirrored — the intro reads first on the left, the headline
   answers it from the right. */
.head-mirror { text-align: right; }
@media (max-width: 900px) { .head-mirror { text-align: left; } }

/* ==========================================================================
   ROLE CARDS — each way in gets a face, not another text box
   ========================================================================== */

.role-card {
  --accent: var(--pitch-hint);
  display: flex;
  flex-direction: column;
  border: var(--border);
  border-radius: var(--r-lg);
  background: var(--pitch-raised);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.role-card:hover { transform: translateY(-4px); border-color: var(--accent); }

.role-card__figure { position: relative; }
.role-card__figure .slot { border: 0; border-radius: 0; }
.role-card__figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }

/* The accent reads as a printed rule between image and caption. */
.role-card__figure::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: var(--accent);
}

.role-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
}
.role-card__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-lg);
  line-height: var(--lh-snug);
  color: var(--accent);
}
.role-card__body p { font-size: var(--t-sm); color: var(--text-mute); margin: 0; }


/* ==========================================================================
   MULTI-PAGE ADDITIONS
   ========================================================================== */

/* --- Logo ----------------------------------------------------------------
   The supplied lockup is black and red on an opaque white ground, so it
   can't float on --pitch. It sits on a deliberate white plaque instead,
   which keeps the brand colours exact and reads as a printed sticker. */

.nav__logo {
  display: inline-flex;
  align-items: center;
  width: auto;
  height: auto;
  padding: 6px 10px;
  background: #fff;
  border: 0;
  border-radius: var(--r-sm);
  flex: none;
}
.nav__logo img { height: 26px; width: auto; }

.footer__logo {
  display: inline-flex;
  padding: 10px 14px;
  background: #fff;
  border-radius: var(--r-md);
}
.footer__logo img { height: 44px; width: auto; }

/* --- Current page --------------------------------------------------------
   Carried by aria-current, so the indicator is one attribute for both
   sighted users and screen readers. */

.nav__links a[aria-current="page"] {
  color: var(--bone);
  text-decoration: underline;
  text-decoration-color: var(--volt);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

/* --- Read-more link ------------------------------------------------------- */

.more-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--volt);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: border-color var(--dur-fast) var(--ease), gap var(--dur-fast) var(--ease);
}
.more-link::after { content: "\2192"; }
.more-link:hover { border-bottom-color: var(--volt); gap: var(--s-3); }

/* --- Real imagery --------------------------------------------------------
   Sources ship uncropped; the ratio and focal point are set here, so
   reframing a photo never means re-exporting it. */

.ratio-hero   { aspect-ratio: 4 / 5; }
.ratio-card   { aspect-ratio: 63 / 88; }
.ratio-wide   { aspect-ratio: 16 / 9; }
.ratio-square { aspect-ratio: 1 / 1; }

img.ratio-hero, img.ratio-card, img.ratio-wide, img.ratio-square {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Faces sit above the middle of a frame far more often than not. */
  object-position: center 32%;
  display: block;
}

.hero-figure {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: var(--border);
}

/* --- Event date, when only part of a date is known ------------------------ */

.event__date--tba {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: var(--track-mono);
}

/* The lightbox holds a real photograph now, not a placeholder frame. */
#lightbox-image {
  width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: var(--r-md);
}



/* ==========================================================================
   HERO EYES
   Only the pupils move. They ride on top of the still, positioned by
   percentage so they stay on the irises at any size, and are translated
   by script.js. Colours come from the two eyes beneath them.
   ========================================================================== */

.eyes { position: relative; }

.eyes__pupil {
  position: absolute;
  left: var(--x);
  top: var(--y);
  /* Sized as a share of the figure so it scales with the image. Wide
     enough to cover the painted iris underneath, or the static eye shows
     beside the pupil as soon as it moves. */
  width: 3.3%;
  aspect-ratio: 1;
  margin: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%,
      var(--pitch) 0 56%,
      color-mix(in srgb, var(--glow, var(--bone)) 90%, transparent) 70%,
      color-mix(in srgb, var(--glow, var(--bone)) 30%, transparent) 82%,
      transparent 94%);
  /* --mx/--my are written by script.js in px; the -50% centres the dot. */
  transform: translate(calc(-50% + var(--mx, 0px)), calc(-50% + var(--my, 0px)));
  transition: transform 120ms var(--ease);
  will-change: transform;
}

/* No pointer to follow — leave the pupils centred on the irises. */
@media (hover: none) {
  .eyes__pupil { transition: none; }
}

/* A headline that should read as one line on wide screens: sized to fit the
   page instead of the display scale, free to wrap only on phones. */
.h-line { font-size: clamp(2rem, 1rem + 3.4vw, 4.25rem); text-wrap: balance; }
@media (min-width: 900px) { .h-line { white-space: nowrap; } }