/* Bravo84 Films — minimal, image-first (A24-inspired) */
:root {
  --bg: #0a0a0a;
  --ink: #f2efe8;
  --muted: #8f8a82;
  --line: rgba(255,255,255,0.12);
  --gold: #c9a24a;
  --panel: #111111;
  --sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Merriweather", Georgia, serif;
  --gutter: 20px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.5;
  letter-spacing: -0.005em; -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-weight: 500; letter-spacing: -0.03em; line-height: 1; margin: 0 0 0.4em; }
h1 { font-size: clamp(2.6rem, 7vw, 6rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); }
h3 { font-size: 1.6rem; }
p { margin: 0 0 1em; }
.muted { color: var(--muted); }
.small { font-size: 0.8rem; }
.wrap { padding: 0 var(--gutter); max-width: 1440px; margin: 0 auto; }
section { padding: 80px 0; }

/* Header: menu left, wordmark centre, link right */
.nav {
  position: sticky; top: 0; z-index: 20; background: var(--bg);
  height: 64px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--gutter);
}
.nav-toggle {
  justify-self: start; background: none; border: 0; padding: 0; cursor: pointer;
  display: flex; align-items: center; gap: 12px; font: 500 0.8rem var(--sans); text-transform: uppercase; color: var(--ink);
}
.nav-toggle .bars { width: 22px; height: 8px; border-top: 1.5px solid; border-bottom: 1.5px solid; }

.nav-right { justify-self: end; font-size: 0.8rem; font-weight: 500; text-transform: uppercase; }

/* Full-screen menu */
.menu {
  position: fixed; inset: 64px 0 0 0; z-index: 19; background: var(--bg);
  padding: 40px var(--gutter); display: none; flex-direction: column; gap: 4px;
}
.menu.open { display: flex; }
.menu a { font-size: clamp(2.6rem, 8vw, 5.5rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1.05; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--muted); }

/* Full-bleed film panels */
.panel {
  position: relative; height: calc(100vh - 64px); min-height: 520px;
  background: var(--panel); color: #fff; overflow: hidden; display: block;
}
.panel .media { position: absolute; inset: 0; }
.panel .media img, .panel .media video { width: 100%; height: 100%; object-fit: cover; }
.panel .media.placeholder {
  background:
    radial-gradient(ellipse at 30% 40%, rgba(255,255,255,0.08), transparent 60%),
    linear-gradient(160deg, #2a2a2a, #0c0c0c);
}
.panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(0,0,0,0.55)); }
.panel .caption { position: absolute; z-index: 1; left: var(--gutter); bottom: 32px; }
.panel .caption h2 { font-size: clamp(2.4rem, 5vw, 4rem); margin: 0 0 6px; }
.panel .caption .meta-line { font-size: 0.8rem; font-weight: 500; }
.panel .count {
  position: absolute; z-index: 1; right: var(--gutter); bottom: 32px;
  font-size: 0.8rem; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.panel .count i { width: 1px; height: 60px; background: rgba(255,255,255,0.6); }
.panel:hover .caption h2 { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }

/* Grids */
.grid { display: grid; gap: 40px var(--gutter); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.card .poster { aspect-ratio: 4 / 5; background: #161616; overflow: hidden; display: grid; place-items: center; color: var(--muted); }
.card .poster img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.card:hover .poster img { transform: scale(1.03); }
.card h3 { margin: 14px 0 4px; }
.status { font-size: 0.8rem; font-weight: 500; color: var(--muted); }

/* Film page */
.film-hero { height: 78vh; min-height: 480px; }
.film-body { display: grid; gap: 48px; grid-template-columns: 1fr 1fr; }
.logline { font-size: clamp(1.4rem, 2.4vw, 2rem); letter-spacing: -0.02em; line-height: 1.2; }
.meta { display: grid; grid-template-columns: max-content 1fr; gap: 10px 32px; margin: 0; border-top: 1px solid var(--ink); padding-top: 16px; }
.meta dt { color: var(--muted); font-size: 0.85rem; }
.meta dd { margin: 0; font-size: 0.95rem; }
.video { aspect-ratio: 16 / 9; background: #161616; color: #888; display: grid; place-items: center; }
.video iframe { width: 100%; height: 100%; border: 0; }

/* Buttons and forms */
.btn {
  display: inline-block; padding: 12px 22px; border: 1px solid var(--ink); border-radius: 999px;
  font-size: 0.85rem; font-weight: 500; background: var(--bg); color: var(--ink); cursor: pointer; font-family: var(--sans);
}
.btn:hover, .btn.solid { background: var(--ink); color: var(--bg); }
.btn.solid:hover { background: #cfcac0; }
form { display: grid; gap: 18px; max-width: 620px; }
label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 6px; }
input, textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--ink);
  padding: 10px 0; font: inherit; font-size: 1.1rem; color: var(--ink); border-radius: 0;
}
input:focus, textarea:focus { outline: none; border-bottom-width: 2px; }
.inline { display: flex; gap: 16px; align-items: end; max-width: 620px; }
.inline input { flex: 1; }

/* Newsletter band */
.band { border-top: 1px solid var(--line); }
.band .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; }

/* Footer */
footer { background: #000; color: #fff; border-top: 1px solid var(--line); padding: 64px 0 32px; }
footer .wrap { display: grid; gap: 48px; }
footer .row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: 0.8rem; color: #aaa; }
.social { display: flex; gap: 20px; }
.social a:hover { color: #fff; }

@media (max-width: 760px) {
  .nav-toggle .label, .nav-right { display: none; }
  .film-body, .band .wrap { grid-template-columns: 1fr; }
  .inline { flex-direction: column; align-items: stretch; }
  section { padding: 56px 0; }
}

/* Wordmark: live text matching the original logo (lining numerals, gold finish) */
.wordmark {
  font-family: var(--serif); font-weight: 900; line-height: 1; white-space: nowrap;
  font-variant-numeric: lining-nums; letter-spacing: 0.01em; display: inline-block;
}
.wordmark span {
  display: inline-block;
  background: linear-gradient(180deg, #f1cd5c 0%, #d4a72c 45%, #a8801c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.6));
}
.brand .wordmark { font-size: 1.25rem; }

/* BRAVO is there from the start; "84" crashes in from the right as one piece,
   hits, recoils, and the whole wordmark jolts on impact */
.wordmark.animate span:nth-child(n+6) {
  transform: translateX(110vw);
  animation: crash 0.85s cubic-bezier(0.45, 0, 0.8, 0.5) 0.1s forwards;
}
@keyframes crash {
  0%   { transform: translateX(110vw); }
  70%  { transform: translateX(0); }
  80%  { transform: translateX(-14px); }
  90%  { transform: translateX(5px); }
  100% { transform: translateX(0); }
}
.wordmark.animate { animation: jolt 0.36s ease-out 0.7s; }
@keyframes jolt {
  0%, 100% { transform: none; }
  25% { transform: translateX(-6px) rotate(-0.6deg); }
  55% { transform: translateX(3px) rotate(0.3deg); }
}
.opener { overflow: hidden; }
.fade-up { opacity: 0; transform: translateY(12px); animation: fadeUp 0.8s ease forwards; animation-delay: 1.05s; }
@keyframes fadeUp { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .wordmark.animate, .wordmark.animate span:nth-child(n+6), .fade-up { animation: none; opacity: 1; transform: none; }
}

/* Home opening screen */
.opener {
  height: calc(100vh - 64px); min-height: 480px; display: grid; place-items: center; text-align: center;
  background: radial-gradient(ellipse at center, #17140c 0%, var(--bg) 65%);
}
.opener .wordmark { font-size: clamp(3.2rem, 13vw, 10rem); }
.opener p { margin: 28px auto 0; font-size: clamp(1rem, 1.8vw, 1.3rem); color: var(--muted); }
.opener .scroll {
  display: inline-flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 56px;
  font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink);
}
.opener .scroll i { width: 1px; height: 56px; background: rgba(255,255,255,0.18); position: relative; overflow: hidden; }
.opener .scroll i::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--gold); animation: draw 2.2s cubic-bezier(0.6, 0, 0.3, 1) infinite; }
@keyframes draw { 0% { transform: translateY(-100%); } 50% { transform: translateY(0); } 100% { transform: translateY(100%); } }
.opener .scroll:hover { color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .opener .scroll i::after { animation: none; transform: none; } }

/* Title card: stands in for a still until real imagery exists.
   Each project sets --accent (the colour of the light). */
.media.titlecard {
  background: #050505; overflow: hidden;
  display: grid; place-items: center;
}
.media.titlecard::before { /* slow light sweep, like a door opening on a lit room */
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(ellipse 35% 60% at 50% 55%, var(--accent, #8a1c1c) 0%, transparent 70%),
    linear-gradient(90deg, transparent 46%, var(--accent2, color-mix(in srgb, var(--accent, #8a1c1c) 60%, white)) 50%, transparent 54%);
  opacity: 0.55; filter: blur(30px);
  animation: sweep 9s ease-in-out infinite alternate;
}
.media.titlecard::after { /* film grain */
  content: ""; position: absolute; inset: 0; opacity: var(--grain, 0.18); 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 0.8s steps(4) infinite;
}
.titlecard .tc-title {
  position: relative; z-index: 1; color: #fff; text-transform: uppercase; text-align: center; padding-right: 0; max-width: 92%;
  font-weight: 500; letter-spacing: 0.32em; padding-left: 0.32em;
  font-size: clamp(2.2rem, 9vw, 7.5rem); line-height: 1;
  text-shadow: 0 0 40px color-mix(in srgb, var(--accent, #8a1c1c) 70%, transparent);
}
@keyframes sweep { from { transform: translateX(-8%) scaleX(0.9); } to { transform: translateX(8%) scaleX(1.1); } }
@keyframes grain { 0% { transform: translate(0,0); } 25% { transform: translate(-3%,2%); } 50% { transform: translate(2%,-3%); } 75% { transform: translate(-2%,-1%); } }
@media (prefers-reduced-motion: reduce) { .media.titlecard::before, .media.titlecard::after { animation: none; } }
/* When a title card is showing, the big centred title replaces the caption headline */
.panel:has(.titlecard) .caption h2, .panel:has(.titlecard) .caption h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Newsprint card: an aged 1920s front page (used by period projects) */
.media.newsprint {
  --paper: #e8dcc0; --ink-n: #1f1a12;
  background:
    radial-gradient(ellipse at 18% 22%, rgba(140,100,40,0.18), transparent 40%),
    radial-gradient(ellipse at 82% 78%, rgba(120,80,30,0.22), transparent 45%),
    radial-gradient(ellipse at center, transparent 55%, rgba(60,40,10,0.45) 100%),
    var(--paper);
  color: var(--ink-n); display: grid; place-items: center; overflow: hidden;
}
.media.newsprint::before { /* halftone dots + vertical fold crease */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(0,0,0,0.12) 50%, rgba(255,255,255,0.35) calc(50% + 1px), transparent calc(50% + 2px)),
    radial-gradient(rgba(31,26,18,0.16) 0.8px, transparent 1.2px) 0 0 / 5px 5px;
}
.media.newsprint::after { /* paper grain */
  content: ""; position: absolute; inset: 0; opacity: 0.35; mix-blend-mode: multiply; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35  0 0 0 0 .27  0 0 0 0 .15  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.np-page { position: relative; z-index: 1; width: min(88%, 980px); text-align: center; font-family: "Old Standard TT", Georgia, serif; }
.np-rule { border: 0; border-top: 3px double var(--ink-n); margin: 0; }
.np-strap { display: flex; justify-content: space-between; font-size: clamp(0.6rem, 1.1vw, 0.85rem); letter-spacing: 0.18em; text-transform: uppercase; padding: 8px 0; }
.np-head {
  font-weight: 700; text-transform: uppercase; line-height: 0.9; letter-spacing: -0.01em;
  font-size: clamp(2rem, min(8vw, 10.5vh), 7rem); margin: 16px 0 8px;
}
/* Typewriter: letters are revealed one by one from script; each gets a brief ink hit */
.np-head .w { display: inline-block; white-space: nowrap; }
.np-head i { font-style: normal; display: inline-block; }
.np-head.typed-wait i, .np-head.typing i { opacity: 0; }
.np-head i.on { opacity: 1; animation: hit 0.22s ease-out; }
@keyframes hit { 0% { transform: scale(1.12) translateY(2px); filter: blur(0.6px); color: #000; } 100% { transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { .np-head i { opacity: 1 !important; animation: none; } }
.np-sub { font-style: italic; font-size: clamp(0.95rem, 1.9vw, 1.5rem); margin: 0 0 18px; }
.np-body { display: grid; grid-template-columns: 1fr; gap: 0 22px; border-top: 1px solid var(--ink-n); padding-top: 14px; text-align: left; }
.np-body:has(.np-photo) { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); align-items: stretch; }
.np-photo { margin: 0; }
.panel .media .np-photo img, .card .poster .np-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: var(--np-photo-max, 27vh); object-fit: cover; object-position: top; display: block; border: 1px solid rgba(31,26,18,0.5); }
.np-photo figcaption { font-size: clamp(0.6rem, 1vw, 0.8rem); font-style: italic; margin-top: 6px; color: rgba(31,26,18,0.8); }
.np-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 18px; }
.np-cols { align-self: stretch; }
.np-cols span { height: 100%; min-height: 70px; border-right: 1px solid rgba(31,26,18,0.35);
  background: repeating-linear-gradient(transparent 0 6px, rgba(31,26,18,0.28) 6px 8px); }
.np-cols span:last-child { border-right: 0; }
@keyframes press {
  0% { opacity: 0; transform: scale(1.12); filter: blur(6px); }
  60% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; }
}
@media (max-width: 760px) { .np-cols { grid-template-columns: repeat(2, 1fr); } .np-cols span:nth-child(n+3) { display: none; } .np-body:has(.np-photo) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* Lighter caption fade so the paper isn't muddied */
.panel:has(.newsprint)::after { background: linear-gradient(transparent 70%, rgba(0,0,0,0.6)); }
.panel:has(.newsprint) .caption h2, .panel:has(.newsprint) .caption h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Optional prop drawn behind a title card (e.g. Bouncer's velvet rope) */
.panel .media.titlecard img.tc-prop {
  position: absolute; z-index: 0; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(66%, 88vh, 880px); height: auto; aspect-ratio: 900 / 520;
}
@media (max-width: 760px) { .panel .media.titlecard img.tc-prop { bottom: 64px; width: 92%; } }
/* With a prop, lift the title into the upper third so the scene sits beneath it */
.titlecard:has(.tc-prop) .tc-title { transform: translateY(-20vh); }
@media (max-width: 760px) { .titlecard:has(.tc-prop) .tc-title { transform: translateY(-14vh); } }

/* Neon sign: the title as lit glass tubing on a dark wall */
.media.neon {
  background:
    radial-gradient(ellipse 60% 50% at 50% 48%, color-mix(in srgb, var(--neon, #ff2e88) 9%, transparent), transparent 70%),
    radial-gradient(ellipse at 50% 120%, rgba(196, 102, 26, 0.28), transparent 55%),
    #070505;
  display: grid; place-items: center; overflow: hidden;
}
.media.neon::before { /* wall: fine stucco grain + vignette */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; mix-blend-mode: overlay;
  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='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.media.neon::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.75) 100%);
}
.neon .tc-title {
  font-family: "Bebas Neue", "Oswald", sans-serif; font-weight: 400;
  letter-spacing: 0.14em; padding-left: 0.14em; text-transform: none;
  font-size: clamp(4rem, 14vw, 12rem); line-height: 1;
  color: #fff6fa; -webkit-text-stroke: 0.5px rgba(255,255,255,0.4);
  text-shadow:
    0 0 2px #fff,
    0 0 8px var(--neon, #ff2e88),
    0 0 18px var(--neon, #ff2e88),
    0 0 40px var(--neon, #ff2e88),
    0 0 90px color-mix(in srgb, var(--neon, #ff2e88) 60%, transparent);
}
.neon .tc-title .flicker { animation: flicker 7s linear infinite; animation-delay: calc(var(--n, 0) * -3.1s); animation-duration: calc(7s + var(--n, 0) * 2.3s); }
.neon .tc-title .dead { /* one tube that's burnt out: glass only */
  color: rgba(255,255,255,0.08); -webkit-text-stroke: 0.6px rgba(255,255,255,0.22); text-shadow: none;
}
@keyframes flicker {
  0%, 100% { opacity: 1; }
  3% { opacity: 0.3; } 4% { opacity: 1; }
  7% { opacity: 0.6; } 8% { opacity: 1; }
  41% { opacity: 1; } 42% { opacity: 0.2; } 43% { opacity: 1; } 44.5% { opacity: 0.4; } 45% { opacity: 1; }
  78% { opacity: 1; } 78.5% { opacity: 0.5; } 79% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .neon .tc-title .flicker { animation: none; } }
.panel:has(.neon) .caption h2, .panel:has(.neon) .caption h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Navigation: make the ways out obvious */
.nav-right { justify-self: end; display: flex; gap: 24px; font-size: 0.8rem; font-weight: 500; text-transform: uppercase; }
.nav-right a[aria-current="page"], .nav-right a:hover { color: var(--gold); }
.brand:hover { opacity: 0.7; }
.caption .back {
  display: inline-block; margin-bottom: 14px; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.75); border-bottom: 1px solid transparent;
}
.caption .back:hover { color: #fff; border-color: #fff; }
.panel:has(.titlecard) .caption .back, .panel:has(.neon) .caption .back, .panel:has(.newsprint) .caption .back { position: static; width: auto; height: auto; clip: auto; overflow: visible; }
.next-project {
  display: grid; gap: 6px; padding: 72px var(--gutter); border-top: 1px solid var(--line);
  text-align: center;
}
.next-project .np-title { font-size: clamp(2rem, 5vw, 4rem); font-weight: 500; letter-spacing: -0.03em; }
.next-project:hover .np-title { color: var(--gold); }
.foot-links { display: flex; flex-wrap: wrap; gap: 28px; font-size: 0.85rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; }
.foot-links a:hover { color: var(--gold); }
@media (max-width: 760px) { .nav-right { display: flex; gap: 14px; } .nav-right > a:not(:last-child) { display: none; } .nav-right a { font-size: 0.72rem; } }

/* Neon: the whole sign sags for a split second now and then, on top of the one bad tube */
.neon .tc-title { animation: sag 11s linear infinite; }
@keyframes sag { 0%, 100% { opacity: 1; } 63% { opacity: 1; } 63.4% { opacity: 0.72; } 63.8% { opacity: 1; } 64.6% { opacity: 0.85; } 65% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .neon .tc-title { animation: none; } }

/* Smoke: real footage on black, screen-blended so only the smoke shows (set smoke: "file.mp4" on the project) */
.neon .smoke { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; mix-blend-mode: screen; opacity: 0.16; filter: blur(2px) contrast(0.8); }
@media (prefers-reduced-motion: reduce) { .neon .smoke { display: none; } }

/* Posters on the Work grid: the same title cards, scaled to the frame */
.card .poster { position: relative; container-type: inline-size; }
.card .poster .media { position: absolute; inset: 0; }
.card .poster .tc-title { font-size: 13cqw; letter-spacing: 0.1em; }
.card .poster .neon .tc-title { font-size: 15cqw; }
.card .poster .smoke i { width: 60cqw; height: 70cqh; filter: blur(22px); }
.card .poster .np-page { width: 86%; }
.card .poster .np-head { font-size: 15cqw; margin: 8cqw 0 3cqw; }
.card .poster .np-sub { font-size: 3.4cqw; margin-bottom: 4cqw; }
.card .poster .np-strap { font-size: 2.4cqw; padding: 1.5cqw 0; }
.card .poster .np-body { --np-photo-max: 40cqw; padding-top: 2cqw; gap: 0 3cqw; }
.card .poster .np-cols span { min-height: 20cqw; }
.card .poster .np-photo figcaption { font-size: 2.2cqw; margin-top: 1cqw; }
.card .poster .np-cols { gap: 0 2.5cqw; }
.card .poster .np-rule { border-top-width: 2px; }
.card:hover .poster .media { filter: brightness(1.12); }

/* About */
.eyebrow-sm { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.about-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 56px; align-items: start; }
.about-grid .btn + .btn { margin-left: 10px; }
.poster.portrait { aspect-ratio: 4 / 5; background: #161616; display: grid; place-items: center; color: var(--muted); overflow: hidden; }
.poster.portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.credits { width: 100%; border-collapse: collapse; margin-top: 28px; font-size: 1rem; }
.credits td { padding: 16px 24px 16px 0; border-top: 1px solid var(--line); vertical-align: top; }
.credits tr:last-child td { border-bottom: 1px solid var(--line); }
.credits .t { font-weight: 500; font-size: 1.15rem; letter-spacing: -0.01em; }
.credits .y { text-align: right; padding-right: 0; white-space: nowrap; }
@media (max-width: 760px) {
  .about-grid { grid-template-columns: 1fr; }
  .poster.portrait { max-width: 320px; }
  .credits td:nth-child(2) { display: none; }
  .credits td { padding: 12px 12px 12px 0; }
}

/* Sound toggle */
.nav-right .sound { background: none; border: 0; padding: 0; color: var(--muted); font: inherit; font-size: 0.8rem; font-weight: 500; text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.nav-right .sound i { width: 14px; height: 8px; border-left: 1.5px solid; border-right: 1.5px solid; position: relative; }
.nav-right .sound i::before { content: ""; position: absolute; left: 4px; right: 4px; top: 0; bottom: 0; border-left: 1.5px solid; border-right: 1.5px solid; opacity: 0.4; }
.nav-right .sound[aria-pressed="true"] { color: var(--gold); }
.nav-right .sound[aria-pressed="true"] i, .nav-right .sound[aria-pressed="true"] i::before { animation: eq 0.9s ease-in-out infinite alternate; }
@keyframes eq { from { transform: scaleY(0.5); } to { transform: scaleY(1.2); } }
@media (max-width: 760px) { .nav-right .sound { display: inline-flex; } .nav-right .sound span { display: none; } }

/* First-visit spotlight on the Sound toggle: dim everything except the button, explain in a card */
.spot { position: fixed; inset: 0; z-index: 60; }
.spot[hidden] { display: none; }
.spot-ring {
  position: absolute; border-radius: 999px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(201, 162, 74, 0.6), 0 0 24px rgba(201, 162, 74, 0.35);
  animation: spot-in 0.5s ease both;
}
@keyframes spot-in { from { box-shadow: 0 0 0 9999px rgba(0,0,0,0), 0 0 0 1px transparent; } }
.spot-card {
  position: absolute; width: 280px; padding: 20px 22px; background: #141414; border: 1px solid var(--line);
  color: var(--ink); font-size: 0.95rem; line-height: 1.5; animation: card-in 0.5s 0.25s ease both;
}
@keyframes card-in { from { opacity: 0; transform: translateY(-6px); } }
.spot-card::before { content: ""; position: absolute; top: -7px; right: 28px; width: 12px; height: 12px; background: #141414; border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); }
.spot-card p { margin: 0 0 16px; }
.spot-card .row { display: flex; gap: 10px; align-items: center; justify-content: flex-end; }
.spot-card .btn { padding: 10px 18px; font-size: 0.8rem; }
.spot-card .later { background: none; border: 0; color: var(--muted); font: inherit; font-size: 0.8rem; cursor: pointer; padding: 10px 6px; }
.spot-card .later:hover { color: var(--ink); }
.spot.leaving { animation: gate-out 0.4s ease forwards; }
@keyframes gate-out { to { opacity: 0; visibility: hidden; } }
@media (max-width: 760px) { .spot-card { width: calc(100vw - 32px); } }

/* Support the film */
.support { border-top: 1px solid var(--line); }
.support-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 40px; align-items: center; }
.support-cta { text-align: left; }
.caption .support-link { margin-left: 18px; }
@media (max-width: 760px) { .support-grid { grid-template-columns: 1fr; } .caption .support-link { margin-left: 0; display: block; } }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
#contact-back { display: inline-block; margin-bottom: 20px; color: var(--muted); }
#contact-back:hover { color: var(--ink); border-color: var(--ink); }
#contact-back[hidden] { display: none; }

/* Shop */
.products { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.product .poster { aspect-ratio: 4 / 5; background: #e9e4da; }
.product .poster img { filter: none; transition: opacity 0.3s; }

/* Where the money goes */
.uses { margin-top: 56px; border-top: 1px solid var(--line); padding-top: 32px; }
.uses h3 { font-size: 1.1rem; margin-bottom: 20px; }
.uses ul { list-style: none; margin: 0; padding: 0; max-width: 720px; }
.uses li { display: grid; grid-template-columns: minmax(0, 1.2fr) 2fr 3.5ch; gap: 18px; align-items: center; padding: 10px 0; font-size: 0.95rem; }
.uses-bar { height: 2px; background: var(--line); position: relative; }
.uses-bar i { position: absolute; left: 0; top: -1px; height: 4px; background: var(--gold); }
.uses-pct { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.goal { margin-top: 12px; font-weight: 500; }
@media (max-width: 760px) { .uses li { grid-template-columns: 1fr 3.5ch; } .uses-bar { grid-column: 1 / -1; order: 3; } }


/* Support: the ways to help, side by side */
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.way { border: 1px solid var(--line); padding: 28px; display: flex; flex-direction: column; gap: 6px; }
.way h3 { font-size: 1.2rem; margin-bottom: 4px; }
.way p { margin-bottom: 14px; }
.way .btn { align-self: flex-start; }
.way .inline { margin-top: 12px; max-width: 420px; }
.product { scroll-margin-top: 90px; }
@media (max-width: 760px) { .ways { grid-template-columns: 1fr; } .merch-row { grid-template-columns: 96px 1fr; gap: 16px; } .merch-card { width: 96px; } }
#donate-back { display: inline-block; margin-bottom: 20px; color: var(--muted); }
#donate-back:hover { color: var(--ink); border-color: var(--ink); }

/* Merch card inside the support section */
.merch-row { display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: center; }
.merch-card { display: block; width: 120px; aspect-ratio: 4 / 5; background: #161616; overflow: hidden; }
.merch-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.merch-card:hover img { transform: scale(1.03); }

/* Worn tubes: a couple of letters burn slightly dimmer than the rest */
.neon .tc-title > span:nth-child(2) { opacity: 0.88; }
.neon .tc-title > span:nth-child(4) { opacity: 0.94; }
.neon .tc-title > span:nth-child(6) { opacity: 0.8; }

/* Neon tube: the letters are hollow outlines (the glass tube), white-hot in the middle,
   with the pink light coming off the tube itself rather than off a solid letter */
.neon .tc-title {
  color: transparent;
  -webkit-text-stroke: 0.045em #fff2f8;
  text-shadow: none;
  filter:
    drop-shadow(0 0 0.02em #fff)
    drop-shadow(0 0 0.06em var(--neon, #ff2e88))
    drop-shadow(0 0 0.12em var(--neon, #ff2e88))
    drop-shadow(0 0 0.24em color-mix(in srgb, var(--neon, #ff2e88) 45%, transparent));
}
@media (max-width: 760px) {
  .neon .tc-title {
    filter:
      drop-shadow(0 0 0.02em #fff)
      drop-shadow(0 0 0.06em var(--neon, #ff2e88))
      drop-shadow(0 0 0.12em var(--neon, #ff2e88))
      drop-shadow(0 0 0.24em color-mix(in srgb, var(--neon, #ff2e88) 45%, transparent));
  }
}

/* Neon frame: a rectangular tube around the word, lit the same way as the letters */
.neon .tc-title {
  border: 0.035em solid #fff2f8;
  border-radius: 0.05em;
  padding: 0.2em 0.32em 0.14em 0.46em;   /* extra left offsets the trailing letter-spacing */
}

/* Newsprint body: the real 1929 leaflet set in narrow justified columns */
.np-text {
  column-count: 3; column-gap: 1.4em; column-rule: 1px solid rgba(31,26,18,0.35);
  font-family: "Old Standard TT", Georgia, serif; font-size: clamp(0.5rem, 0.72vw, 0.78rem); line-height: 1.32;
  color: rgba(31,26,18,0.92); text-align: justify; hyphens: auto; -webkit-hyphens: auto;
  max-height: var(--np-photo-max, 27vh); overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent);
}
.np-text p { margin: 0 0 0.55em; text-indent: 1em; }
.np-text .np-kicker { text-indent: 0; text-align: center; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; font-size: 0.92em;
  border-bottom: 1px solid rgba(31,26,18,0.5); padding-bottom: 0.35em; margin-bottom: 0.6em; column-span: all; }
.np-text p:nth-of-type(2) { text-indent: 0; }
.np-drop { float: left; font-size: 3.1em; line-height: 0.85; font-weight: 700; margin: 0.06em 0.08em 0 0; }
.np-text .np-sign { text-align: center; text-indent: 0; font-style: italic; }
.np-credit { margin: 6px 0 0; font-family: "Old Standard TT", Georgia, serif; font-style: italic; font-size: clamp(0.55rem, 0.8vw, 0.75rem); color: rgba(31,26,18,0.75); text-align: left; }
@media (max-width: 760px) { .np-text { column-count: 2; font-size: 0.5rem; } }
/* Work-grid poster: the same page in miniature */
.card .poster .np-text { font-size: 1.35cqw; max-height: 40cqw; column-gap: 2cqw; }
.card .poster .np-credit { font-size: 1.6cqw; margin-top: 1cqw; }
@media (max-width: 760px) { .panel .np-credit { display: none; } }

/* Leaflet body: soft and hard to read, like a photographed page; the kicker and drop cap stay legible */
.np-text p:not(.np-kicker) { filter: blur(1.1px); opacity: 0.85; }
.card .poster .np-text p:not(.np-kicker) { filter: blur(0.5px); }
/* keep the newspaper clear of the caption block at the bottom-left of the hero */
.panel .media.newsprint { padding: 24px 0 112px; box-sizing: border-box; }
@media (max-width: 760px) { .panel .media.newsprint { padding-bottom: 104px; } }
@media (max-height: 820px) and (min-width: 761px) {
  .np-head { font-size: clamp(1.8rem, min(7vw, 8vh), 5.5rem); margin: 10px 0 6px; }
  .np-sub { margin-bottom: 10px; }
  .panel .media .np-photo img { max-height: 19vh; }
  .np-text { max-height: 19vh; }
  .panel .media.newsprint { padding-top: 12px; }
}
/* photo keeps its portrait shape at any height; the leaflet columns take the remaining width */
.np-body:has(.np-photo) { grid-template-columns: auto minmax(0, 1fr); }
.panel .media .np-photo img { width: auto; height: var(--np-photo-h, 27vh); max-height: none; aspect-ratio: 4 / 5; }
.np-photo figcaption { max-width: calc(var(--np-photo-h, 27vh) * 0.8); }
@media (max-height: 820px) and (min-width: 761px) { .panel .media .np-photo img { height: 19vh; } .np-photo figcaption { max-width: calc(19vh * 0.8); } }
@media (max-width: 760px) { .panel .media .np-photo img { height: auto; width: 100%; } .np-body:has(.np-photo) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .np-photo figcaption { max-width: none; } }

/* Home: the big opener wordmark is the logo, so the header one waits until it has scrolled away */
.brand { transition: opacity 0.4s ease, transform 0.4s ease; }
.brand.tucked { opacity: 0; transform: translateY(-6px); pointer-events: none; }