/* ---------- Fonts ---------- */
@font-face { font-family: "Oswald"; src: url("../fonts/oswald-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("../fonts/oswald-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --bg: #0a0a0a;
  --text: #e8e4dc;
  --muted: #8a857c;
  --accent: #cf971f;
  --accent-bright: #ecb73e;
  --tex-scratch: url("../img/tex/scratch.webp");
  --torn: polygon(0.0% 4px, 2.78% 4px, 5.56% 10px, 8.33% 10px, 11.11% 12px, 13.89% 2px, 16.67% 10px, 19.44% 3px, 22.22% 10px, 25.0% 2px, 27.78% 3px, 30.56% 10px, 33.33% 11px, 36.11% 2px, 38.89% 2px, 41.67% 1px, 44.44% 8px, 47.22% 3px, 50.0% 11px, 52.78% 4px, 55.56% 0px, 58.33% 6px, 61.11% 2px, 63.89% 10px, 66.67% 9px, 69.44% 0px, 72.22% 4px, 75.0% 2px, 77.78% 1px, 80.56% 12px, 83.33% 12px, 86.11% 12px, 88.89% 4px, 91.67% 7px, 94.44% 11px, 97.22% 6px, 100.0% 2px, 100.0% calc(100% - 12px), 97.22% calc(100% - 4px), 94.44% calc(100% - 5px), 91.67% calc(100% - 3px), 88.89% calc(100% - 7px), 86.11% calc(100% - 12px), 83.33% calc(100% - 8px), 80.56% calc(100% - 9px), 77.78% calc(100% - 6px), 75.0% calc(100% - 10px), 72.22% calc(100% - 5px), 69.44% calc(100% - 6px), 66.67% calc(100% - 10px), 63.89% calc(100% - 5px), 61.11% calc(100% - 10px), 58.33% calc(100% - 1px), 55.56% calc(100% - 5px), 52.78% calc(100% - 9px), 50.0% calc(100% - 12px), 47.22% calc(100% - 10px), 44.44% calc(100% - 4px), 41.67% calc(100% - 11px), 38.89% calc(100% - 7px), 36.11% calc(100% - 8px), 33.33% calc(100% - 9px), 30.56% calc(100% - 11px), 27.78% calc(100% - 2px), 25.0% calc(100% - 7px), 22.22% calc(100% - 10px), 19.44% calc(100% - 11px), 16.67% calc(100% - 7px), 13.89% calc(100% - 8px), 11.11% calc(100% - 2px), 8.33% calc(100% - 4px), 5.56% calc(100% - 3px), 2.78% calc(100% - 2px), 0.0% calc(100% - 8px));
  --font-display: "Oswald", "Arial Narrow", Impact, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1280px;
  --narrow: 760px;
  --header-h: 72px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1.0625rem/1.65 var(--font-body); overflow-x: hidden; }
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: .2em; }
a:hover { color: var(--accent-bright); text-decoration-color: var(--accent-bright); }
:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; line-height: 1.05; margin: 0 0 .5em; }
h1 { font-size: clamp(2.5rem, 7vw, 5.5rem); }
h2 { font-size: clamp(1.75rem, 4vw, 3rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link:focus { position: fixed !important; top: 8px; left: 8px; width: auto; height: auto; clip: auto; z-index: 100; padding: .75em 1em; background: var(--text); color: var(--bg); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--narrow); }
.site-main { min-height: 60vh; position: relative; z-index: 0; }
.section { padding-block: clamp(64px, 10vw, 140px); }
.section { position: relative; }
/* Every other section sits on a full-bleed slab of scratched surface with torn edges instead of a rule. */
.site-main > .section:nth-of-type(even)::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background: linear-gradient(rgba(19,18,17,.955), rgba(19,18,17,.955)), var(--tex-scratch) 0 0 / 640px #131211; animation: slab-rain 30s linear infinite; clip-path: var(--torn); }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 2.5rem; }
.section__title { margin: 0; }
.section__link { font: 500 .85rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .15em; text-decoration: none; color: var(--muted); }
.section__link:hover { color: var(--accent-bright); }
.page-head { padding-top: calc(var(--header-h) + 2rem); margin-bottom: 3rem; }
.grid { display: grid; gap: clamp(20px, 3vw, 40px); }
.grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.meta { font: 500 .8rem/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .18em; color: var(--muted); margin-bottom: .6em; }
.empty { color: var(--muted); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: .5em; padding: .95em 1.7em; border: 0; background: var(--accent); color: var(--bg); font: 500 .85rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .18em; text-decoration: none; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.btn:hover { background: var(--accent-bright); color: #000; }
.btn--ghost { background: #26241f; color: var(--text); }
.btn--ghost:hover { background: var(--accent); color: #000; }
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* ---------- Header ---------- */
/* Background and blur live on ::before: a backdrop-filter on the header itself would make it the containing block of the fixed mobile nav. */
.site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); isolation: isolate; }
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(10,10,10,.92); backdrop-filter: blur(6px); transition: background .3s var(--ease); }
.site-header--overlay { position: fixed; inset: 0 0 auto; }
.site-header--overlay::before { background: linear-gradient(rgba(0,0,0,.7), transparent); backdrop-filter: none; }
.site-header--overlay.is-solid::before { background: rgba(10,10,10,.92); backdrop-filter: blur(6px); }
.site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.site-header__brand { color: var(--accent); display: block; }
.logo { fill: currentColor; }
.logo--small { width: 150px; }
.site-header--overlay .logo--small { opacity: 0; }
.no-fly .site-header--overlay.is-solid .logo--small { opacity: 1; }
.primary-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(16px, 2.5vw, 36px); }
.primary-nav a { font: 500 .9rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .2em; text-decoration: none; color: var(--muted); padding-block: .5em; position: relative; }
.primary-nav a:hover, .primary-nav .current-menu-item > a, .primary-nav .current_page_item > a { color: var(--text); }
.primary-nav .current-menu-item > a, .primary-nav .current_page_item > a { color: var(--accent); }
.nav-toggle { display: none; }

@media (max-width: 860px) {
  .nav-toggle { display: grid; gap: 6px; background: none; border: 0; padding: 12px; cursor: pointer; z-index: 60; }
  .nav-toggle__bar { width: 26px; height: 2px; background: var(--text); transition: transform .25s var(--ease); }
  .nav-open .nav-toggle__bar:first-child { transform: translateY(4px) rotate(45deg); }
  .nav-open .nav-toggle__bar:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
  .primary-nav { position: fixed; inset: 0; background: var(--bg); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility .25s; }
  .nav-open .primary-nav { opacity: 1; visibility: visible; }
  .primary-nav__list { flex-direction: column; align-items: center; gap: 1.5rem; }
  .primary-nav a { font-size: 1.75rem; color: var(--text); }
  .nav-open { overflow: hidden; }
}

/* ---------- Cards ---------- */
.card { background: #181715; transition: transform .25s var(--ease); }
.card:hover { transform: translateY(-3px); }
.card:hover .card__title a { color: var(--accent-bright); }
.card__media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; filter: grayscale(1) contrast(1.1); transition: filter .4s var(--ease); }
.card:hover .card__media img { filter: grayscale(.3) contrast(1.1); }
.card__body { padding: 1.5rem; }
.card__title { font-size: 1.3rem; margin-bottom: .5rem; }
.card__title a { text-decoration: none; }
.card__excerpt { color: var(--muted); font-size: .95rem; }
.card__excerpt p:last-child { margin: 0; }

/* ---------- Entry ---------- */
.entry__media { margin: 0 0 2.5rem; }
.entry__media img { filter: grayscale(1); }
.entry__content > * + * { margin-top: 1.2em; }
.entry__content h2 { margin-top: 2em; }
.entry__content img { height: auto; }

/* ---------- Footer ---------- */
.site-footer { position: relative; isolation: isolate; padding-block: 84px 40px; text-align: center; color: var(--muted); }
.site-footer::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(16,15,14,.93), rgba(16,15,14,.93)), var(--tex-scratch) 0 0 / 640px, var(--tex-scratch) 210px 0 / 420px #100f0e; animation: footer-rain 26s linear infinite; clip-path: polygon(0 10px, 6% 2px, 13% 12px, 21% 4px, 30% 11px, 38% 0, 47% 9px, 55% 3px, 64% 12px, 72% 5px, 81% 10px, 90% 1px, 100% 8px, 100% 100%, 0 100%); }
.site-footer__inner { display: grid; justify-items: center; gap: 1.5rem; }
.logo--footer { width: 240px; color: var(--accent); }
.site-footer__copy { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin: 0; }

/* ---------- 404 ---------- */
.page-404 { padding-top: calc(var(--header-h) + 6rem); text-align: center; }
.page-404 .page-title { font-size: clamp(6rem, 25vw, 16rem); }

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

/* ---------- Hero ---------- */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; display: grid; place-items: center; background: #000; isolation: isolate; }
.hero__media { position: absolute; inset: 0; background: #000 center / cover no-repeat; filter: grayscale(1) contrast(1.15); z-index: -3; }
.hero__video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease); }
.hero__video.is-playing { opacity: 1; }
.hero__grain { position: absolute; inset: -50%; z-index: -2; pointer-events: none; opacity: .14; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(6) infinite; }
.hero__vignette { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.95) 100%), linear-gradient(transparent 70%, var(--bg)); }
.hero__content { text-align: center; padding-inline: var(--gutter); width: min(100%, 1100px); }
/* Hero bottom tears into the page instead of ending on a straight edge. */
.hero::after { content: ""; position: absolute; inset: auto 0 -1px; height: 26px; z-index: 1; background: var(--bg); clip-path: polygon(0 100%, 0 40%, 5% 78%, 11% 22%, 18% 66%, 24% 12%, 31% 58%, 39% 30%, 46% 82%, 53% 18%, 61% 62%, 68% 8%, 76% 54%, 83% 26%, 91% 74%, 100% 34%, 100% 100%); }

/* One logo on the front page. It slams into the hero, then rides up into the header as you scroll
   (assets/js/fly-logo.js moves it out of the hero and drives the transform). */
.hero__logo-slot { display: block; aspect-ratio: 6218 / 2280; }
.hero__logo { --fly-p: 0; position: relative; display: block; color: color-mix(in srgb, var(--accent) calc(var(--fly-p) * 100%), #fff); filter: drop-shadow(0 0 34px rgba(0,0,0,.9)) drop-shadow(0 0 70px rgba(207,151,31,.22)); }
.hero__logo .logo--hero { width: 100%; overflow: visible; opacity: 0; }
.hero__logo.is-flying { position: fixed; top: 0; left: 0; z-index: 55; transform-origin: 0 0; pointer-events: none; will-change: transform; }
.nav-open .hero__logo.is-flying { opacity: 0; }
.logo--slice { position: absolute; inset: 0; pointer-events: none; color: var(--accent-bright); }

/* Entrance (runs once, ~2.2 s): black → the logo drops out of the dark, white-hot and oversized,
   and hits. On impact a bloom bursts behind it, the stage shakes, the footage cuts in,
   two slices tear sideways, and the metal cools to the band's yellow. */
/* Every part starts from one signal, html.hero-go (set by fly-logo.js), so the hit, bloom and cut stay in sync
   however late the script arrives. If it never arrives, the failsafe shows logo and footage after 3.5 s. */
.hero__logo .logo--hero:first-child { animation: hero-failsafe-in .4s 3.5s both; }
.hero-go .hero__logo .logo--hero:first-child { animation: logo-slam 2.2s both, logo-idle-main 4.2s steps(1, end) 2.6s infinite; }
/* While the logo sits over the footage it keeps glitching: short yellow tears every second or so, in irregular bursts.
   Narrow bands for a few frames each, so nowhere near a flash. Stops once the logo leaves for the header. */
.hero-go .hero__logo.is-leaving .logo--hero:first-child { animation: logo-slam 2.2s both; }
.hero-go .hero__logo.is-leaving .logo--slice { animation: none; opacity: 0; }
.hero-go .hero__logo .logo--slice-a { animation: logo-tear-a 2.2s steps(1, end) both, logo-idle-a 4.2s steps(1, end) 2.6s infinite; }
.hero-go .hero__logo .logo--slice-b { animation: logo-tear-b 2.2s steps(1, end) both, logo-idle-b 4.2s steps(1, end) 2.6s infinite; }
.hero__blackout { position: absolute; inset: 0; z-index: -1; background: #000; pointer-events: none; animation: hero-failsafe-out .4s 3.5s both; }
.hero-go .hero__blackout { animation: hero-blackout 2.2s both; }
.hero__bloom { position: absolute; left: 50%; top: 50%; width: min(140vw, 1800px); aspect-ratio: 2.2; translate: -50% -50%; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(255,236,170,.95), rgba(236,183,62,.55) 28%, rgba(207,151,31,.18) 55%, transparent 72%); }
.hero-go .hero__bloom { animation: hero-bloom 2.2s both; }
.hero-go .hero__media { animation: hero-shake 2.2s both; }

@keyframes logo-slam {
  0%, 22% { opacity: 0; transform: scale(2.6); filter: blur(18px) brightness(2.4); color: #fff; }
  30% { opacity: 1; transform: scale(.965); filter: blur(0) brightness(2.6); color: #fff; }
  36% { opacity: 1; transform: scale(1.025); filter: brightness(2); }
  42% { opacity: 1; transform: scale(1); filter: brightness(1.7); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes logo-tear-a {
  0%, 31% { opacity: 0; }
  32% { opacity: .9; clip-path: inset(12% 0 62% 0); transform: translateX(-3.2%); }
  37% { opacity: .9; clip-path: inset(30% 0 48% 0); transform: translateX(2.4%); }
  41%, 100% { opacity: 0; }
}
@keyframes logo-tear-b {
  0%, 34% { opacity: 0; }
  35% { opacity: .85; clip-path: inset(58% 0 14% 0); transform: translateX(3%); }
  40% { opacity: .85; clip-path: inset(70% 0 6% 0); transform: translateX(-2%); }
  45%, 56% { opacity: 0; }
  57% { opacity: .7; clip-path: inset(44% 0 40% 0); transform: translateX(-1.4%); }
  61%, 100% { opacity: 0; }
}
/* Idle glitch, 4.2 s loop, five irregular bursts. Tears are thin bands held for 2–3 frames; the mark itself only
   jolts sideways and dims slightly. At most two brightness swings fall inside any one second (WCAG 2.3.1 allows three),
   so do not add bursts or shorten the loop without recounting. */
@keyframes logo-idle-main {
  0%, 100% { transform: none; opacity: 1; clip-path: none; }
  7% { transform: translateX(-.7%) skewX(-2deg); }
  8.6% { transform: translateX(.5%); opacity: .82; }
  10% { transform: none; opacity: 1; }
  31% { clip-path: inset(0 0 58% 0); transform: translateX(1.1%); }
  32.6% { clip-path: none; transform: none; }
  52% { transform: translateX(.9%) skewX(1.6deg); opacity: .86; }
  53.4% { transform: translateX(-1.2%); }
  55% { transform: none; opacity: 1; }
  74% { transform: translateY(-.8%) scaleY(1.02); }
  75.2% { transform: none; }
  90% { clip-path: inset(46% 0 0 0); transform: translateX(-.9%); }
  91.4% { clip-path: none; transform: none; }
}
@keyframes logo-idle-a {
  0%, 100% { opacity: 0; }
  6.6% { opacity: .95; clip-path: inset(14% 0 70% 0); transform: translateX(-4.2%); }
  8.2% { opacity: .95; clip-path: inset(44% 0 40% 0); transform: translateX(3.4%); }
  9.8% { opacity: .95; clip-path: inset(4% 0 88% 0); transform: translateX(1.8%); }
  11.2% { opacity: 0; }
  31% { opacity: .95; clip-path: inset(42% 0 0 0); transform: translateX(-1.4%); }
  32.6% { opacity: 0; }
  52% { opacity: .9; clip-path: inset(64% 0 22% 0); transform: translateX(-3.6%); }
  53.6% { opacity: .9; clip-path: inset(26% 0 60% 0); transform: translateX(4.6%); }
  55.2% { opacity: 0; }
  74% { opacity: .9; clip-path: inset(80% 0 6% 0); transform: translateX(2.6%); }
  75.4% { opacity: 0; }
  90% { opacity: .95; clip-path: inset(0 0 54% 0); transform: translateX(1.6%); }
  91.4% { opacity: 0; }
}
@keyframes logo-idle-b {
  0%, 100% { opacity: 0; }
  7.4% { opacity: .9; clip-path: inset(74% 0 8% 0); transform: translateX(4%); }
  9.4% { opacity: .9; clip-path: inset(58% 0 30% 0); transform: translateX(-3%); }
  11% { opacity: 0; }
  20% { opacity: .8; clip-path: inset(30% 0 62% 0); transform: translateX(2.2%); }
  21.2% { opacity: 0; }
  52.6% { opacity: .9; clip-path: inset(8% 0 80% 0); transform: translateX(3.2%); }
  54.6% { opacity: .9; clip-path: inset(48% 0 42% 0); transform: translateX(-2.4%); }
  56% { opacity: 0; }
  64% { opacity: .75; clip-path: inset(88% 0 2% 0); transform: translateX(-5%); }
  65.2% { opacity: 0; }
  74.4% { opacity: .9; clip-path: inset(18% 0 68% 0); transform: translateX(-3%); }
  76% { opacity: 0; }
}
@keyframes hero-failsafe-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-failsafe-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes hero-blackout { 0%, 29% { opacity: 1; } 34%, 100% { opacity: 0; } }
/* A single burst, not a strobe: one rise, one decay. */
@keyframes hero-bloom {
  0%, 28% { opacity: 0; transform: scale(.35); }
  31% { opacity: 1; transform: scale(.9); }
  70%, 100% { opacity: 0; transform: scale(1.5); }
}
@keyframes hero-shake {
  0%, 29% { transform: none; }
  31% { transform: translate(-9px, 6px) scale(1.04); }
  34% { transform: translate(8px, -5px) scale(1.04); }
  37% { transform: translate(-6px, -3px) scale(1.03); }
  41% { transform: translate(4px, 3px) scale(1.02); }
  46% { transform: translate(-2px, 1px) scale(1.01); }
  52%, 100% { transform: none; }
}
.hero__tagline { margin-top: 1.5rem; font: 500 clamp(.8rem, 1.6vw, 1rem)/1.4 var(--font-display); letter-spacing: .5em; text-transform: uppercase; color: var(--text); animation: fade-up 1s 1.7s var(--ease) both; }

.hero__scroll { position: absolute; bottom: 34px; left: 50%; translate: -50% 0; z-index: 2; width: 64px; height: 64px; display: grid; place-items: center; color: var(--accent); animation: fade-up .8s 2s var(--ease) both; }
.hero__scroll svg { width: 46px; height: 46px; overflow: visible; }
.hero__scroll path { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: square; stroke-linejoin: miter; animation: arrow-pulse 1.5s var(--ease) infinite; }
.hero__scroll path + path { animation-delay: .22s; }
.hero__scroll:hover { color: var(--accent-bright); }

@keyframes grain { 0% { transform: translate(0,0) } 20% { transform: translate(-5%,4%) } 40% { transform: translate(4%,-6%) } 60% { transform: translate(-3%,2%) } 80% { transform: translate(6%,5%) } 100% { transform: translate(0,0) } }
@keyframes fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes arrow-pulse { 0% { opacity: 0; transform: translateY(-9px); } 35% { opacity: 1; } 70% { opacity: 1; transform: translateY(7px); } 100% { opacity: 0; transform: translateY(12px); } }

@media (max-width: 600px) { .hero__scroll { bottom: 22px; } }
@media (prefers-reduced-motion: reduce) {
  .hero__grain { animation: none; }
  .logo--slice, .hero__bloom { display: none; }
  .hero__logo .logo--hero:first-child { opacity: 1; }
  .hero__scroll path { animation: none; }
}

/* ---------- Release ---------- */
.release { display: grid; gap: clamp(20px, 4vw, 56px); }
.release--featured { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; }
.release__cover { display: block; background: #151412; aspect-ratio: 1; overflow: hidden; }
.release__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.release__cover:hover img { transform: scale(1.03); }
.release--featured.release--no-cover { grid-template-columns: 1fr; }
.release__title { font-size: clamp(2rem, 5vw, 3.75rem); }
.release__title a { text-decoration: none; }
.release__links { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 760px) { .release--featured { grid-template-columns: 1fr; } }

/* ---------- Gigs ---------- */
.gigs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gig { display: grid; grid-template-columns: 9rem 1fr auto; gap: 1.5rem; align-items: center; padding: 1.3rem 1.5rem; background: #161513; transition: background-color .2s var(--ease); }
.gig:hover { background: #2b220f; }
.gig__date { color: var(--accent); }
.gig__date { font: 700 1.1rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .08em; }
.gig__place strong { display: block; font: 500 1.35rem/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .05em; }
.gig__venue { color: var(--muted); font-size: .95rem; }
.gig__status { font: 500 .8rem/1 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--accent-bright); }
.gig--cancelled .gig__place strong { text-decoration: line-through; text-decoration-color: var(--accent-bright); }
@media (max-width: 600px) {
  .gig { grid-template-columns: 1fr auto; }
  .gig__date { grid-column: 1 / -1; font-size: .9rem; }
}

/* ---------- Tour / Music / Band ---------- */
.search-results__gig { grid-column: 1 / -1; }
.gig-single .gig__venue { color: var(--muted); font-size: 1.1rem; margin: 0 0 1.5rem; }
.gig-single .gig__action { margin: 0 0 2rem; }
.releases .release__title { font-size: 1.5rem; }
.release__notes { margin-top: 3rem; }
.member__photo { aspect-ratio: 4/5; background: #151412; margin-bottom: 1rem; overflow: hidden; }
.member__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15); }
.band__photo { margin: 0 0 3rem; max-width: 900px; }
.band__photo img { width: 100%; filter: grayscale(1) contrast(1.1); }
.band__bio { margin-inline: 0; padding-inline: 0; font-size: 1.15rem; }
.member__name { margin-bottom: .25rem; }
.member__bio { color: var(--muted); font-size: .95rem; }

/* ---------- Social ---------- */
.social-links { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; justify-content: center; }
.social-links a { display: grid; place-items: center; width: 44px; height: 44px; color: var(--muted); transition: color .2s var(--ease), transform .2s var(--ease); }
.social-links a:hover { color: var(--accent-bright); transform: translateY(-2px); }
.social-links svg { width: 22px; height: 22px; fill: currentColor; }

/* ---------- Merch ---------- */
.merch-soon { text-align: center; }
.merch-soon__lead { font: 500 clamp(1.2rem, 3vw, 1.8rem)/1.3 var(--font-display); text-transform: uppercase; letter-spacing: .2em; color: var(--muted); }
.glitch { position: relative; }
.glitch::before, .glitch::after { content: attr(data-text); content: attr(data-text) / ""; position: absolute; inset: 0; pointer-events: none; }
.glitch::before { color: var(--accent-bright); clip-path: inset(0 0 60% 0); transform: translateX(-2px); opacity: .6; }
.glitch::after { color: var(--text); clip-path: inset(55% 0 0 0); transform: translateX(2px); opacity: .5; }
.placeholder { padding: .5em 1em; background: rgba(207,151,31,.14); font-family: ui-monospace, monospace; font-size: .9rem; color: #f1d08a; }

/* WordPress core content classes (Theme Check) */
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text, .gallery-caption { font-size: .85rem; color: var(--muted, #b5b5b5); }
.sticky, .bypostauthor { display: block; }

/* ---------- Front page ---------- */
.home-label { font: 500 .95rem/1 var(--font-display); letter-spacing: .32em; color: var(--accent); margin: 0 0 1.6rem; }

.ticker { display: flex; overflow: hidden; background: var(--accent); color: #0a0a0a; user-select: none; }
.ticker__track { display: flex; flex: none; margin: 0; padding: 0; list-style: none; animation: ticker 70s linear infinite; }
.ticker__track li { flex: none; padding: .75em 0; font: 700 clamp(1rem, 2vw, 1.45rem)/1 var(--font-display); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.ticker__track li::after { content: "✦"; display: inline-block; margin-inline: 1.6em; font-size: .7em; vertical-align: .12em; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-100%); } }

.home-show { padding-block: clamp(72px, 11vw, 150px) clamp(56px, 8vw, 110px); }
.home-show__grid { --day: clamp(8rem, 19vw, 17rem); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: stretch; }
.home-show__date { display: flex; align-items: stretch; align-self: start; gap: calc(var(--day) * .07); color: var(--text); }
/* The big type is trimmed to cap height so day, month/year and city share exact top and bottom edges.
   Oswald's caps and figures are 0.82 em tall: that line-height is the fallback where text-box is unsupported. */
.home-show__day, .home-show__my, .home-show__city, .tour__year-num { line-height: .82; }
.home-show__city { line-height: .98; }
@supports (text-box: trim-both cap alphabetic) {
  .home-show__day, .home-show__my > span, .home-show__city, .tour__year-num { line-height: 1; text-box: trim-both cap alphabetic; }
}
.home-show__day { font-family: var(--font-display); font-weight: 700; font-size: var(--day); letter-spacing: -.03em; color: var(--accent); }
.home-show__my { display: flex; flex-direction: column; justify-content: space-between; gap: calc(var(--day) * .1); font-family: var(--font-display); font-weight: 700; font-size: calc(var(--day) * .44); text-transform: uppercase; letter-spacing: .01em; }
.home-show__my > span { display: block; }
.home-show__year { color: var(--muted); }
/* The info column is a size container: the city scales with the column, so a city name never breaks mid-word. */
.home-show__info { container-type: inline-size; display: flex; flex-direction: column; gap: 1.2rem; min-width: 0; }
.home-show__city { margin: 0; font-family: var(--font-display); font-weight: 700; --chars: 8; font-size: clamp(1.5rem, min(17cqi, calc(100cqi / (var(--chars) * .6))), 7rem); text-transform: uppercase; letter-spacing: .01em; overflow-wrap: normal; }
/* --chars (set inline from PHP) is the longest word: an Oswald cap is about .56 em wide, so 100cqi / (chars × .6)
   always fits that word on one line. Names still break at spaces and hyphens. */
.home-show__venue { margin: 0; font: 500 clamp(1.1rem, 2.2vw, 1.7rem)/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); overflow-wrap: anywhere; }
.home-show__notes { max-width: 46ch; color: var(--muted); }
.home-show__notes p:last-child { margin: 0; }
.home-show__actions, .home-release__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 2rem 0 0; }
.home-show__info .home-show__actions { margin: auto 0 0; }
.home-show__actions .gig__status { font-size: clamp(1.2rem, 2.4vw, 2rem); }
.home-show__more { margin-top: clamp(40px, 6vw, 72px); }

.home-release { position: relative; padding-block: clamp(72px, 10vw, 140px); background: #131211; clip-path: var(--torn); overflow: hidden; }
.home-release__inner { display: grid; gap: clamp(28px, 5vw, 72px); }
.home-release--cover .home-release__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: center; }
.home-release__title { margin: 0; font: 700 clamp(3.2rem, 13.5vw, 13rem)/.86 var(--font-display); text-transform: uppercase; letter-spacing: -.015em; text-wrap: balance; overflow-wrap: break-word; }
.home-release__text { container-type: inline-size; min-width: 0; }
/* --chars (from PHP) = the longer of the longest word and half the title, so the title settles on two lines. */
.home-release__title { --chars: 10; font-size: clamp(2.4rem, calc(100cqi / (var(--chars) * .55)), 13rem); }
.home-release__title a { color: var(--text); text-decoration: none; transition: color .2s var(--ease); }
.home-release__title a:hover { color: var(--accent); }
.home-release__meta { margin: 1.4rem 0 0; font: 500 clamp(1rem, 1.8vw, 1.35rem)/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.home-release__cover img { width: 100%; aspect-ratio: 1; object-fit: cover; }

.home-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.home-band__photo { display: block; min-height: 100%; overflow: hidden; }
.home-band__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.12); }
.home-band__text { display: grid; align-content: center; gap: clamp(1.5rem, 3vw, 2.5rem); padding: clamp(48px, 8vw, 120px) var(--gutter) clamp(48px, 8vw, 120px) clamp(28px, 6vw, 96px); }
.home-band__title { margin: 0; overflow-wrap: anywhere; font-size: clamp(2.4rem, 5.4vw, 5.2rem); line-height: .95; text-wrap: balance; }
.home-band__members { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.home-band__members li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2em .9em; }
.home-band__name { font: 500 clamp(1.2rem, 2.1vw, 1.7rem)/1.15 var(--font-display); text-transform: uppercase; letter-spacing: .04em; }
.home-band__role { font-size: .95rem; color: var(--accent); }
.home-band:only-child, .home-band:not(:has(.home-band__photo)) { grid-template-columns: 1fr; }

.home-news { padding-block: clamp(72px, 10vw, 140px); }
.home-news__list { list-style: none; margin: 0 0 2.5rem; padding: 0; display: grid; gap: 6px; }
.home-news__list a { display: grid; grid-template-columns: 9rem 1fr; gap: 1.5rem; align-items: baseline; padding: 1.5rem 1.6rem; background: #161513; text-decoration: none; transition: background-color .2s var(--ease), color .2s var(--ease); }
.home-news__list a:hover { background: var(--accent); color: #0a0a0a; }
.home-news__list time { font: 500 .9rem/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .14em; color: var(--accent); }
.home-news__list a:hover time { color: #0a0a0a; }
.home-news__title { font: 700 clamp(1.4rem, 3.2vw, 2.6rem)/1.02 var(--font-display); text-transform: uppercase; letter-spacing: .01em; text-wrap: balance; overflow-wrap: anywhere; }
.home-band__name, .home-show__notes { overflow-wrap: anywhere; }

@media (max-width: 860px) {
  .home-show__grid { --day: clamp(7rem, 36vw, 13rem); grid-template-columns: minmax(0, 1fr); align-items: start; gap: 2.2rem; }
  .home-show__info .home-show__actions { margin-top: .6rem; }
  .home-band { grid-template-columns: 1fr; }
  .home-band__photo img { aspect-ratio: 4 / 3; }
  .home-band__text { padding-inline: var(--gutter); }
  .home-release--cover .home-release__inner { grid-template-columns: 1fr; }
  .home-news__list a { grid-template-columns: 1fr; gap: .6rem; }
}
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } .ticker { overflow-x: auto; } }

/* Footer texture: two scratch layers fall at different speeds, like a worn film strip running. Both distances
   are one full tile, so the loop has no seam. */
@keyframes footer-rain { to { background-position: 0 0, 0 640px, 210px 840px; } }
/* Every textured surface moves: the section slabs drift the same way (one full 640px tile per loop, no seam). */
@keyframes slab-rain { to { background-position: 0 0, 0 640px; } }
@media (prefers-reduced-motion: reduce) { .site-footer::before, .site-main > .section:nth-of-type(even)::before { animation: none; } }

/* ---------- Tour page ---------- */
.tour__next { padding-bottom: clamp(56px, 8vw, 110px); }
.tour__next .page-head { margin-bottom: 2.5rem; }
.tour__label { margin-top: clamp(40px, 6vw, 72px); }
.tour__empty { font: 700 clamp(2rem, 5vw, 4rem)/1 var(--font-display); text-transform: uppercase; color: var(--muted); margin: 0; }
.tour__listen { background: var(--accent); color: #0a0a0a; clip-path: var(--torn); padding-block: clamp(56px, 8vw, 110px); }
.tour__listen-title { margin: 0; font-size: clamp(2.2rem, 6.4vw, 6rem); line-height: .92; text-wrap: balance; overflow-wrap: anywhere; max-width: 18ch; }
.tour__listen .btn { background: #0a0a0a; color: var(--text); }
.tour__listen .btn:hover { background: #26241f; color: var(--accent-bright); }
.tour__listen :focus-visible { outline-color: #0a0a0a; }
.tour__past { padding-block: clamp(72px, 10vw, 140px); }
.tour__year { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(20px, 4vw, 56px); align-items: start; }
.tour__year + .tour__year { margin-top: clamp(40px, 6vw, 80px); }
.tour__year-num { margin: 0; font-size: clamp(3.2rem, 9vw, 8.5rem); color: #2a2722; letter-spacing: -.02em; position: sticky; top: calc(var(--header-h) + 24px); }
.tour .gigs--past .gig__date { color: var(--muted); }
@media (max-width: 760px) { .tour__year { grid-template-columns: 1fr; } .tour__year-num { position: static; } }

/* ==========================================================================
   Print shop and rehearsal room: halftone, misregistration, tape, stamps, film.
   ========================================================================== */
:root {
  --paper: #e9e2d0;
  --tape: rgba(233, 226, 208, .78);
  --halftone: radial-gradient(circle at 50% 50%, rgba(0,0,0,.55) 0 1.1px, transparent 1.6px) 0 0 / 4px 4px;
}

/* Misregistration: big type is printed twice, the yellow plate slightly off. */
.page-title, .home-release__title, .home-show__city, .home-band__title, .tour__listen-title, .home-news__title {
  text-shadow: .035em .025em 0 rgba(207, 151, 31, .32);
}
.tour__listen-title { text-shadow: .035em .025em 0 rgba(10, 10, 10, .22); }

/* Photos read as printed matter: grayscale, crushed, with a halftone screen on top. */
.home-band__photo, .member__photo, .film__frame, .entry__media { position: relative; isolation: isolate; }
.member__photo::after, .film__frame::after, .entry__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--halftone); mix-blend-mode: multiply; opacity: .55;
}

/* Tape: two strips of masking tape, torn at the ends. */
.poster__paper::before, .poster__paper::after, .home-release__cover::before {
  content: ""; position: absolute; z-index: 3; width: 34%; height: 26px; background: var(--tape);
  box-shadow: 0 1px 2px rgba(0,0,0,.35); pointer-events: none;
  clip-path: polygon(2% 0, 98% 0, 95% 20%, 99% 40%, 96% 62%, 100% 82%, 97% 100%, 3% 100%, 0 78%, 4% 58%, 1% 38%, 5% 18%);
}
.poster__paper::before { top: -11px; left: 8%; transform: rotate(-4deg); }
.poster__paper::after { bottom: -11px; right: 10%; transform: rotate(3deg); }

/* Rubber stamp, inked unevenly: a soft diagonal fade stands in for the dry patches. */
/* Stamped on the corner, over the edge of the paper, so it never covers the poster's own dates. */
.poster__stamp {
  position: absolute; z-index: 4; right: -14px; bottom: -18px; padding: .2em .5em; transform: rotate(-9deg);
  font: 700 clamp(.9rem, 1.6vw, 1.15rem)/1 var(--font-display); background: rgba(10,10,10,.82); letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); border: 3px solid currentColor; border-radius: 4px; 
  -webkit-mask: linear-gradient(115deg, #000 0 38%, rgba(0,0,0,.55) 46%, #000 58% 100%); mask: linear-gradient(115deg, #000 0 38%, rgba(0,0,0,.55) 46%, #000 58% 100%); opacity: .92;
}

/* ---------- Poster wall (Tour) ---------- */
.wall { padding-block: clamp(72px, 10vw, 140px) clamp(40px, 6vw, 80px); overflow-x: clip; }
.wall__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(36px, 5vw, 64px) clamp(24px, 3.5vw, 48px); align-items: start; }
.poster { margin: 0; transform: rotate(var(--tilt, 0deg)); transition: transform .35s var(--ease); }
.poster:hover, .poster:focus-within { transform: rotate(0deg) scale(1.02); z-index: 2; }
.poster__paper { position: relative; display: block; background: #111; box-shadow: 0 14px 30px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.04) inset; }
.poster__paper img { display: block; width: 100%; height: auto; filter: contrast(1.05) saturate(.85); }
.poster__paper:focus-visible { outline-offset: 6px; }
.poster__caption { display: flex; gap: .8em; align-items: baseline; margin-top: .9rem; font: 500 .85rem/1.2 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.poster__no { color: var(--accent); }

/* ---------- Show numbers, like a setlist ---------- */
.gig { grid-template-columns: 3.2rem 9rem 1fr auto; }
.gig__no { font: 700 1rem/1 var(--font-display); color: #948a78; letter-spacing: .04em; }
@media (max-width: 600px) {
  .gig { grid-template-columns: auto 1fr auto; }
  .gig__no { grid-row: 1; }
  .gig__date { grid-column: 2 / -1; grid-row: 1; }
}
.tour__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .6rem 2rem; }
.tour__stats { margin: 0; font: 500 clamp(.95rem, 1.6vw, 1.2rem)/1.2 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* ---------- Film strip of live photos ---------- */
.film { padding-block: clamp(20px, 3vw, 36px) clamp(56px, 8vw, 100px); overflow: hidden; }
.film__strip {
  --hole: 12px; display: flex; gap: 10px; padding: 30px 10px; margin-inline: -20px; background: #0f0e0d;
  transform: rotate(-1.2deg); box-shadow: 0 20px 40px rgba(0,0,0,.5);
  background-image:
    radial-gradient(circle, #050505 0 calc(var(--hole) / 2), transparent calc(var(--hole) / 2 + .5px)),
    radial-gradient(circle, #050505 0 calc(var(--hole) / 2), transparent calc(var(--hole) / 2 + .5px));
  background-size: 28px 24px, 28px 24px; background-repeat: repeat-x; background-position: 0 3px, 0 calc(100% - 3px);
  overflow: hidden;
}
/* The strip runs sideways like film through a gate: four identical passes, the track moves exactly one pass
   (a quarter of the track plus one gap) per loop, so the end of a loop looks exactly like its start. */
.film__track { display: flex; gap: 10px; width: max-content; animation: film-run 70s linear infinite; }
.film:hover .film__track { animation-play-state: paused; }
@keyframes film-run { to { transform: translateX(calc((100% + 10px) / -4)); } }
@media (prefers-reduced-motion: reduce) { .film__track { animation: none; } .film__strip { overflow-x: auto; scrollbar-width: thin; scrollbar-color: #3a352c #0f0e0d; } .film__frame[aria-hidden] { display: none; } }
.film__frame { flex: none; margin: 0; height: clamp(200px, 30vw, 380px); background: #000; }
.film__img { height: 100%; width: auto; max-width: none; filter: grayscale(1) contrast(1.2) brightness(.95); }
.film__no { position: absolute; z-index: 2; left: 8px; bottom: -22px; font: 700 .7rem/1 var(--font-display); letter-spacing: .1em; color: #b8862a; }
.film__frame { overflow: visible; }
.film__frame > .film__img { display: block; }
.film__credit { margin-top: 1.4rem; font-size: .8rem; color: var(--muted); text-align: right; }

/* ---------- Sleeve credits ---------- */
.home-release__side { display: grid; gap: 1.6rem; justify-items: start; }
/* The only cover art we have is small: show it at the size of a sleeve on a shelf, never blown up. */
.home-release__cover { width: min(100%, 300px); }
.home-release__cover img { image-rendering: auto; }
.home-release__cover { position: relative; display: block; transform: rotate(var(--tilt, 0deg)); box-shadow: 0 18px 36px rgba(0,0,0,.55); }
.home-release__cover::before { top: -12px; left: 34%; transform: rotate(-3deg); }
.sleeve { position: relative; padding: 1.3rem 1.4rem 1.1rem; background: var(--paper); color: #16140f; font-size: .82rem; line-height: 1.35;
  box-shadow: 0 12px 26px rgba(0,0,0,.45); }
.sleeve__facts { display: grid; gap: .35rem; margin: 0 0 .9rem; }
.sleeve__facts div { display: grid; grid-template-columns: 6.5rem 1fr; gap: .8rem; }
.sleeve__facts dt { font: 700 .72rem/1.35 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: #6b6352; }
.sleeve__facts dd { margin: 0; font-weight: 600; }
.sleeve__credits { list-style: none; margin: 0 0 .9rem; padding: .8rem 0 0; border-top: 1px dashed rgba(22,20,15,.35); display: grid; gap: .2rem; }
.sleeve__band { margin: 0; font: 700 .7rem/1 var(--font-display); letter-spacing: .3em; text-transform: uppercase; color: #6b6352; }
.release__sleeve { margin-top: 2.5rem; max-width: 420px; }
/* Low-resolution artwork: keep it sleeve-sized on the release page too. */
.release--featured .release__cover { max-width: 320px; }
@media (min-width: 761px) { .release--featured:not(.release--no-cover) { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) { .poster, .poster:hover { transition: none; } }
@media (max-width: 600px) { .poster__stamp { right: -4px; } }
.entry__media figcaption { margin-top: .6rem; font-size: .8rem; color: var(--muted); }