/* ==========================================================================
   THE OFFICIAL JAN SEDERLÖF FAN CLUB — styles.css
   ==========================================================================
   HOW THIS FILE IS ORGANIZED
   1. Design tokens (colors/fonts) — change the look of the WHOLE site here
   2. Base + accessibility resets
   3. Starfield background
   4. Page frame / container
   5. Header + title
   6. Nav bar
   7. Marquee ticker
   8. Content columns (main + sidebar)
   9. Widgets: visitor counter, join box, badges
   10. Footer
   11. Responsive (mobile)
   ========================================================================== */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  --space-navy:      #05050f;
  --cream:            #fdf6e0;
  --panel-yellow:     #ffffcd;
  --hot-pink:         #ff36a0;
  --electric-cyan:    #00e5ff;
  --gold:             #ffd700;
  --link-blue:        #0000ee;
  --link-visited:     #551a8b;
  --ink:              #1a1a1a;
  --lcd-green:        #39ff14;

  --font-display: "Arial Black", "Arial Bold", Arial, sans-serif;
  --font-body:    Arial, Helvetica, sans-serif;
  --font-ui:      Arial, Helvetica, sans-serif;
  --font-mono:    "Courier New", Courier, monospace;

  --page-width: 780px;
}

/* ---------- 2. BASE + ACCESSIBILITY ---------- */
* { box-sizing: border-box; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html { scroll-behavior: smooth; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--space-navy);
  background-image:
    radial-gradient(1px 1px at 10% 15%, #fff, transparent),
    radial-gradient(1px 1px at 25% 60%, #fff, transparent),
    radial-gradient(1px 1px at 40% 30%, var(--electric-cyan), transparent),
    radial-gradient(2px 2px at 60% 80%, #fff, transparent),
    radial-gradient(1px 1px at 75% 20%, #fff, transparent),
    radial-gradient(1px 1px at 85% 55%, var(--hot-pink), transparent),
    radial-gradient(1px 1px at 92% 85%, #fff, transparent),
    radial-gradient(2px 2px at 15% 90%, #fff, transparent),
    radial-gradient(1px 1px at 50% 10%, #fff, transparent),
    radial-gradient(1px 1px at 33% 45%, var(--gold), transparent),
    radial-gradient(1px 1px at 68% 12%, var(--hot-pink), transparent),
    radial-gradient(1px 1px at 5% 70%, var(--electric-cyan), transparent),
    radial-gradient(1px 1px at 18% 35%, #fff, transparent),
    radial-gradient(1px 1px at 45% 75%, #fff, transparent),
    radial-gradient(2px 2px at 55% 5%, #fff, transparent),
    radial-gradient(1px 1px at 62% 45%, var(--gold), transparent),
    radial-gradient(1px 1px at 78% 65%, #fff, transparent),
    radial-gradient(1px 1px at 88% 30%, var(--electric-cyan), transparent),
    radial-gradient(1px 1px at 95% 95%, #fff, transparent),
    radial-gradient(2px 2px at 8% 45%, #fff, transparent),
    radial-gradient(1px 1px at 30% 85%, var(--hot-pink), transparent),
    radial-gradient(1px 1px at 52% 55%, #fff, transparent);
  background-repeat: repeat;
  background-size: 300px 300px, 300px 300px, 300px 300px, 300px 300px, 300px 300px,
    300px 300px, 300px 300px, 300px 300px, 300px 300px, 220px 220px, 260px 260px,
    240px 240px, 190px 190px, 210px 210px, 170px 170px, 230px 230px, 200px 200px,
    250px 250px, 180px 180px, 220px 220px, 200px 200px, 160px 160px;
  animation: twinkle 6s linear infinite;
  padding: 24px 12px 60px;
}

@keyframes twinkle {
  0%, 100% { background-color: var(--space-navy); }
  50% { background-color: #0a0a1c; }
}

a { color: var(--link-blue); }
a:visited { color: var(--link-visited); }
a:hover { color: var(--hot-pink); }
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--electric-cyan);
  outline-offset: 2px;
}

img { max-width: 100%; display: block; }
figure { margin: 0; }

/* ---------- 4. PAGE FRAME ---------- */
.page {
  max-width: var(--page-width);
  margin: 0 auto;
}

/* ---------- 5. HEADER ---------- */
.site-header {
  position: relative;
  text-align: center;
  padding: 18px 12px 10px;
  background: transparent;
  border-bottom: 6px double var(--gold);
}

.site-title {
  margin: 0;
  display: inline-block;
  transform: rotate(-1deg);
}

.site-title img {
  display: block;
  width: clamp(240px, 70vw, 420px);
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.site-tagline {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  color: var(--cream);
  opacity: 0.65;
  margin: -6px 0 18px;
}

.site-subtitle {
  font-family: var(--font-ui);
  color: var(--cream);
  font-size: 0.85rem;
  margin: 6px 0 0;
  letter-spacing: 0.5px;
}

.site-subtitle strong {
  color: var(--electric-cyan);
}

/* ---------- 6. NAV ---------- */
.site-nav {
  background: transparent;
  padding: 8px 6px;
  text-align: center;
  border-bottom: 3px solid var(--hot-pink);
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  font-family: var(--font-ui);
  font-weight: bold;
  font-size: 0.8rem;
  text-transform: uppercase;
}

/* Forces a row break between nav items 3 and 4 on narrow screens (see the
   415px media query below) — inert otherwise. */
.nav-break {
  width: 0;
  height: 0;
}

.site-nav a {
  color: var(--electric-cyan);
  text-decoration: none;
  padding: 2px 4px;
}

.site-nav a:visited { color: var(--electric-cyan); }
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--gold);
  text-decoration: underline wavy var(--hot-pink);
}

/* Starburst nav badges — 90s clip-art "NEW!" sticker style, built as an
   SVG polygon so it works for any label without needing separate image
   assets per word. */
.site-nav a.nav-burst {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 60px;
  color: var(--space-navy);
  text-decoration: none;
  padding: 0;
}

.site-nav a.nav-burst svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: var(--gold);
  stroke: var(--space-navy);
  stroke-width: 2;
  z-index: 0;
  filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, 0.35));
}

.site-nav a.nav-burst span {
  position: relative;
  z-index: 1;
  font-size: 0.68rem;
  letter-spacing: 0.5px;
  text-align: center;
  line-height: 1.1;
  transform: rotate(-4deg);
}

.site-nav a.nav-burst:hover svg,
.site-nav a.nav-burst[aria-current="page"] svg {
  fill: var(--hot-pink);
}

.site-nav a.nav-burst:hover span,
.site-nav a.nav-burst[aria-current="page"] span {
  color: var(--cream);
}

/* ---------- 7. MARQUEE TICKER ---------- */
.ticker {
  overflow: hidden;
  background: var(--ink);
  color: var(--lcd-green);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 6px 0;
  border-bottom: 3px solid var(--gold);
}

.ticker__icon {
  width: 22px;
  height: 18px;
  vertical-align: -4px;
  margin-right: 2px;
}

.ticker__track {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: scroll-left 38.25s linear infinite;
}

@keyframes scroll-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker { overflow-x: auto; }
  .ticker__track { animation: none; padding-left: 0; }
}

/* ---------- 8. CONTENT LAYOUT ---------- */
.content {
  display: grid;
  grid-template-columns: 5fr 2fr;
  gap: 0;
}

/* Pages with no sidebar widgets left: let main-col take the full width. */
.content--single {
  grid-template-columns: 1fr;
}

.content--single .main-col {
  border-right: 0;
}

.main-col {
  padding: 16px 18px;
  border-right: 3px dashed var(--hot-pink);
  background: var(--panel-yellow) url("assets/panel-noise.png");
}

.sidebar-col {
  padding: 16px 12px;
  background: var(--panel-yellow) url("assets/panel-noise.png");
}

/* Frameless sections: content sits directly on the page background,
   no border/box around it. */
.bare-panel {
  margin-bottom: 18px;
}

.bare-panel h2 {
  font-family: var(--font-display);
  color: var(--hot-pink);
  border-bottom: 2px dotted var(--space-navy);
  padding-bottom: 4px;
  margin-top: 0;
  font-size: 1.2rem;
}

.bare-panel h3,
.main-col h3 {
  font-family: var(--font-display);
  color: var(--gold);
  margin: 20px 0 6px;
  font-size: 1rem;
  letter-spacing: 0.5px;
}

.blink {
  animation: blink 1.2s steps(1) infinite;
  font-weight: bold;
  color: var(--hot-pink);
}

@keyframes blink {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .blink { animation: none; }
}

/* Video frame */
.video-frame {
  border: 4px solid var(--space-navy);
  background: #000;
  aspect-ratio: 16 / 9;
  width: 100%;
}

.video-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.caption {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--space-navy);
  margin-top: 4px;
}

.more-films-note {
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--space-navy);
}

/* Merch */
.merch-item {
  text-align: center;
}

.merch-item__images {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 12px 0;
}

.merch-photo {
  display: block;
  max-width: 150px;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.merch-photo img {
  display: block;
  width: 100%;
  height: auto;
  border: 4px solid var(--space-navy);
  background: #fff;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.merch-photo:hover img,
.merch-photo:focus-visible img {
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.merch-item__name {
  font-weight: bold;
  margin-top: 4px;
}

.merch-buy-btn {
  display: inline-block;
  margin-top: 8px;
  background: #999;
  color: #eee;
  border: 3px outset #bbb;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: bold;
  padding: 8px 20px;
  cursor: not-allowed;
  opacity: 0.85;
}

/* Video lightbox — clicking a poster opens the embed here, much larger,
   instead of swapping it inline in the small thumbnail-sized frame. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(5, 5, 15, 0.92);
}

.lightbox[hidden] { display: none; }

.lightbox__frame {
  width: 100%;
  max-width: 1100px;
  aspect-ratio: 16 / 9;
  background: #000;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.8);
}

.lightbox__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Product photos aren't 16:9 like video, so they get their own sizing
   instead of stretching into the video frame's fixed aspect ratio. */
.lightbox__frame--photo {
  width: auto;
  max-width: 90vw;
  aspect-ratio: auto;
  background: none;
  box-shadow: none;
}

.lightbox__image {
  display: block;
  max-width: 90vw;
  max-height: 85vh;
  width: auto;
  height: auto;
  border: 4px solid var(--gold);
  background: #fff;
}

.lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  background: var(--space-navy);
  color: var(--gold);
  border: 2px solid var(--gold);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox__close:hover { background: var(--hot-pink); color: var(--cream); }

/* ---------- 9. WIDGETS ---------- */

/* Visitor counter */
.counter {
  text-align: center;
  font-family: var(--font-ui);
  font-size: 0.75rem;
}

.counter__digits {
  display: inline-flex;
  gap: 2px;
  background: var(--ink);
  padding: 6px 8px;
  margin-top: 6px;
  border: 2px inset var(--space-navy);
}

.counter__digits span {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  color: var(--lcd-green);
  background: #001a00;
  padding: 2px 4px;
  min-width: 1ch;
}

/* Join fan club box */
.join-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 0.85rem;
}

.join-form label {
  font-weight: bold;
}

.join-form input[type="email"] {
  padding: 6px;
  border: 2px inset var(--space-navy);
  font-family: var(--font-ui);
}

/* 90s bevel buttons, modelled on the "Search" gif: pixel font, mitred
   light-top/dark-bottom bevel, and a two-frame blink between frame 1 (light
   text with black drop shadow) and frame 2 (black text). Each button has its
   own colour (--btn-*). Hover/focus holds frame 2; press flips the bevel. */
.join-form button,
.instagram-btn,
.contact-btn,
.guestbook-form button {
  --btn-face: #439798;
  --btn-light: #92fcfd;
  --btn-dark: #406565;
  --btn-text: #75fbfd;
  display: block;
  box-sizing: border-box;
  font-family: "Jersey 20", "Courier New", Courier, monospace;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  padding: 8px 12px;
  background: var(--btn-face);
  color: var(--btn-text);
  text-shadow: 2px 2px 0 #000;
  border: 5px solid;
  border-color: var(--btn-light) var(--btn-dark) var(--btn-dark) var(--btn-light);
  border-radius: 0;
  box-shadow: none;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  animation: button-blink 1.6s steps(1) infinite;
}

.join-form button {
  --btn-face: #d6458f;
  --btn-light: #ff9fd2;
  --btn-dark: #7d2552;
  --btn-text: #ffd6ec;
}

.instagram-btn,
.contact-btn[href*="instagram.com"] {
  --btn-face: #7a52c7;
  --btn-light: #b9a0f2;
  --btn-dark: #432a78;
  --btn-text: #e4d8ff;
}

.contact-btn[data-email-link] {
  --btn-face: #d9a21b;
  --btn-light: #ffe28a;
  --btn-dark: #7a5a0b;
  --btn-text: #fff1bd;
}

.guestbook-form button {
  --btn-face: #3f9e4f;
  --btn-light: #93e5a1;
  --btn-dark: #1f5a2b;
  --btn-text: #d2ffd9;
}

.join-form button:hover,
.join-form button:focus-visible,
.instagram-btn:hover,
.instagram-btn:focus-visible,
.contact-btn:hover,
.contact-btn:focus-visible,
.guestbook-form button:hover,
.guestbook-form button:focus-visible {
  color: #000;
  text-shadow: none;
  animation: none;
}

.join-form button:active,
.instagram-btn:active,
.contact-btn:active,
.guestbook-form button:active {
  border-color: var(--btn-dark) var(--btn-light) var(--btn-light) var(--btn-dark);
  padding: 9px 11px 7px 13px;
}

@keyframes button-blink {
  0%, 49.99% { color: var(--btn-text); text-shadow: 2px 2px 0 #000; }
  50%, 100%  { color: #000; text-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .join-form button,
  .instagram-btn,
  .contact-btn,
  .guestbook-form button { animation: none; }
}

.instagram-btn { margin-top: 12px; }

.guestbook-form button { align-self: flex-start; }

.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0;
}

.contact-links .contact-btn {
  flex: 1 1 180px;
}

.join-form__status {
  font-size: 0.8rem;
  font-weight: bold;
  margin: 0;
}

/* Star icon spin */
.spin-star {
  display: inline-block;
  animation: spin 4s linear infinite;
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}

/* ---------- 10. FOOTER ---------- */
.site-footer {
  background: var(--space-navy);
  color: var(--cream);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  text-align: center;
  padding: 14px 10px 18px;
  border-top: 6px double var(--gold);
}

.hosted-by {
  margin: 12px 0 0;
}

.hosted-by img {
  display: block;
  margin: 4px auto 0;
  max-width: 100%;
  height: auto;
}

/* ---------- 11. RESPONSIVE ---------- */
@media (max-width: 600px) {
  .content {
    grid-template-columns: 1fr;
  }
  .main-col {
    border-right: none;
    border-bottom: 3px dashed var(--hot-pink);
  }
  .site-nav ul {
    font-size: 0.75rem;
  }
}

/* Below 416px the full-size bursts (92px) no longer fit on one row, so
   shrink them. A hidden break element (.nav-break, placed in the HTML
   right after the 3rd item) forces the wrap into a 3-then-2 split —
   flex-wrap's own justify-content: center then centers each row on its
   own, so the bottom 2 end up centered under the top 3 instead of
   left-aligned under them. */
@media (max-width: 415px) {
  .site-nav a.nav-burst {
    width: 78px;
    height: 51px;
  }
  .site-nav a.nav-burst span {
    font-size: 0.56rem;
    letter-spacing: -0.3px;
  }
  .nav-break {
    flex-basis: 100%;
    height: 0;
  }
}

/* ==========================================================================
   12. CHAOS EXTRAS — because a fan site cannot be tasteful
   ========================================================================== */

/* Sparkle row divider used inside content columns */
/* "Under construction" gif (sidebar, under the guestbook button): stretched
   to the full sidebar width, matching the mailing-list / Instagram buttons,
   with hard pixel edges. */
.construction-link { display: block; }

.construction-sign {
  display: block;
  width: 100%;
  height: auto;
  margin: 14px auto 0;
  image-rendering: pixelated;
}

.sparkle-divider {
  text-align: center;
  color: var(--hot-pink);
  letter-spacing: 6px;
  font-size: 0.9rem;
  margin: 4px 0 16px;
  user-select: none;
}

/* "welcome to" flame text: CSS stand-in for the old flame-GIF banner —
   lets the wording actually be edited in the HTML instead of baked into
   image pixels. Gradient fill + flickering glow approximate the burning-
   text look; not literal fire, but close in spirit. */
.flame-text {
  display: block;
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: clamp(1rem, 4vw, 1.4rem);
  font-weight: bold;
  letter-spacing: 1px;
  background: linear-gradient(180deg, #fff59d 0%, #ffb300 35%, #ff5722 68%, #b71c1c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: flame-flicker 1.8s ease-in-out infinite;
}

@keyframes flame-flicker {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 6px rgba(255, 87, 34, 0.55)); }
  50%      { filter: brightness(1.18) drop-shadow(0 0 14px rgba(255, 140, 0, 0.85)); }
}

@media (prefers-reduced-motion: reduce) {
  .flame-text {
    animation: none;
    filter: drop-shadow(0 0 6px rgba(255, 87, 34, 0.55));
  }
}

.link-like,
.share-trigger {
  display: inline;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.link-like {
  color: var(--link-blue);
  text-decoration: underline;
}

.share-trigger {
  color: inherit;
}

.link-like:hover { color: var(--hot-pink); }

/* Font salad "share" button: every word insists on being a different
   font/color, but the whole thing is one clickable share action. */
.font-salad {
  background: none;
  border: 0;
  padding: 2px 0;
  margin: 0;
  cursor: pointer;
  font-size: 1em;
  text-align: left;
  color: inherit;
  text-decoration: none;
  display: inline;
}
.font-salad:hover span,
.font-salad:focus-visible span {
  text-decoration: underline wavy var(--hot-pink);
}
.font-salad span {
  font-family: var(--font-display);
}
.font-salad span:nth-child(2n) {
  font-family: var(--font-ui);
  color: var(--hot-pink);
}
.font-salad span:nth-child(3n) {
  font-family: var(--font-mono);
  color: var(--electric-cyan);
  background: var(--space-navy);
  padding: 0 2px;
}
.font-salad span:nth-child(5n) {
  color: var(--gold);
  text-shadow: 1px 1px 0 var(--hot-pink);
}

.share-status {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--space-navy);
  min-height: 1.2em;
  margin: 4px 0 0;
}

/* Flashing guestbook button */
.guestbook-btn {
  display: inline-block;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: bold;
  text-decoration: none;
  padding: 5px;
  border: 3px outset var(--hot-pink);
  text-align: center;
}

.guestbook-btn img {
  display: block;
}
.guestbook-btn:visited { color: var(--ink); }
.guestbook-btn:hover { background: var(--electric-cyan); }

/* Portrait photo (about.html) */
.portrait {
  display: block;
  width: 320px;
  max-width: 100%;
  height: auto;
  margin: 16px auto 0;
}

figure:has(.portrait) figcaption {
  text-align: center;
}

/* Guestbook (guestbook.html) */
.guestbook-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  margin-bottom: 6px;
}

.guestbook-form label {
  font-weight: bold;
}

.guestbook-form input[type="text"],
.guestbook-form textarea {
  padding: 6px;
  border: 2px inset var(--space-navy);
  font-family: var(--font-ui);
  resize: vertical;
}



.guestbook-form__status {
  font-size: 0.8rem;
  font-weight: bold;
  min-height: 1.2em;
}

.guestbook-entries {
  list-style: none;
  margin: 0;
  padding: 0;
}

.guestbook-entries li {
  border-bottom: 1px dotted var(--space-navy);
  padding: 10px 0;
}

.guestbook-entries li:last-child {
  border-bottom: 0;
}

/* Film tabs (movies.html): Director / Creative work shown as two
   separate, switchable groups — reads like two little sub-pages. */
.film-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 0 20px;
}

.film-tab {
  font-family: var(--font-ui);
  font-weight: bold;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--space-navy);
  background: var(--cream);
  border: 3px solid var(--space-navy);
  border-radius: 2px;
  padding: 8px 18px;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--space-navy);
}

.film-tab[aria-selected="true"] {
  background: var(--hot-pink);
  color: var(--cream);
  border-color: var(--space-navy);
  transform: translate(3px, 3px);
  box-shadow: none;
}

/* Image tabs: the 3D "Director" / "Writer" word art replaces the boxed
   text buttons. The active tab is full strength and slightly enlarged;
   the other one is dimmed until hovered. */
.film-tab--img,
.film-tab--img[aria-selected="true"] {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  transform: none;
}

.film-tabs:has(.film-tab--img) {
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 60px;
}

.film-tab--img img {
  display: block;
  height: auto;
  transition: transform 0.15s ease, opacity 0.15s ease;
  opacity: 0.55;
}

.film-tab--img[data-film-tab="director"] img {
  width: min(120px, 30vw);
}

.film-tab--img[data-film-tab="creative"] img {
  width: min(124px, 31vw);
}

.film-tab--img:hover img {
  opacity: 0.85;
}

.film-tab--img[aria-selected="true"] img {
  opacity: 1;
  transform: scale(1.1);
}

.film-tab--img:focus-visible {
  outline: 3px dashed var(--hot-pink);
  outline-offset: 4px;
}

/* Click-to-play video poster: a chosen thumbnail with the film's title
   and client overlaid, used in place of an always-loaded iframe until
   someone actually clicks play. Works as a <button> (real video-url set)
   or a plain <div> (nothing to play yet, purely illustrative). */
.video-poster {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  background-color: #000;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

button.video-poster {
  cursor: pointer;
}

.video-poster--placeholder {
  background-image: repeating-linear-gradient(45deg, #111, #111 10px, #1a1a2e 10px, #1a1a2e 20px);
}

.video-poster__play {
  /* A pure CSS triangle instead of the "▶" glyph — that character's weight
     and shape vary a lot across platform font fallbacks (notably thinner
     and grayer on mobile), so it looked like a different icon there. */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 24px solid var(--cream);
  opacity: 0.8;
  font-size: 0;
  color: transparent;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.8));
  transition: transform 0.15s ease;
}

button.video-poster:hover .video-poster__play,
button.video-poster:focus-visible .video-poster__play {
  transform: translate(-50%, -50%) scale(1.15);
}

.video-poster__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 12px 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
}

.video-poster__title {
  display: block;
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 0.9rem;
  line-height: 1.3;
}

.video-poster__client {
  display: block;
  color: var(--cream);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
  button.video-poster:hover .video-poster__play,
  button.video-poster:focus-visible .video-poster__play {
    transform: translate(-50%, -50%);
  }
}

/* Awardography list (about.html): long, so run it in two columns on
   anything wider than a phone. */
.awardography-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}

.awardography-list {
  font-size: 0.85rem;
  padding-left: 1.1em;
}

.awardography-list li {
  margin-bottom: 4px;
}

@media (max-width: 600px) {
  .awardography-columns {
    grid-template-columns: 1fr;
  }
}

/* ---------- Custom "GIF-style" SVG animations ---------- */

.spin-globe {
  animation: spin-globe 8s linear infinite;
  vertical-align: middle;
}

@keyframes spin-globe {
  100% { transform: rotate(360deg); }
}

.flicker-flame {
  transform-origin: 50% 100%;
  animation: flicker-flame 0.6s ease-in-out infinite alternate;
}

@keyframes flicker-flame {
  0%   { transform: scaleY(1) scaleX(1) rotate(-2deg); }
  50%  { transform: scaleY(1.08) scaleX(0.95) rotate(1deg); }
  100% { transform: scaleY(0.96) scaleX(1.04) rotate(-1deg); }
}

.wave-flag {
  transform-origin: 0% 50%;
  animation: wave-flag 1.4s ease-in-out infinite;
}

@keyframes wave-flag {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-12deg); }
}

@media (prefers-reduced-motion: reduce) {
  .spin-globe, .flicker-flame, .wave-flag {
    animation: none !important;
  }
}

/* ---------- Music toggle ---------- */
.music-toggle {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--space-navy);
  color: var(--gold);
  border: 2px solid var(--gold);
  border-radius: 999px;
  padding: 0;
  cursor: pointer;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.35);
}

.music-toggle:hover {
  color: var(--cream);
  border-color: var(--hot-pink);
}

.music-toggle::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  height: 2px;
  background: #ff3b3b;
  transform: rotate(-45deg);
  border-radius: 2px;
  pointer-events: none;
}

.music-toggle.is-playing::after {
  display: none;
}

.music-toggle__icon {
  font-size: 1.2rem;
}

.music-toggle__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.music-toggle.is-playing {
  color: var(--lcd-green);
  border-color: var(--lcd-green);
}

.music-toggle.is-playing .music-toggle__icon {
  animation: music-note-bounce 0.5s ease-in-out infinite alternate;
}

@keyframes music-note-bounce {
  0%   { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-3px) rotate(-8deg); }
}

@media (prefers-reduced-motion: reduce) {
  .music-toggle.is-playing .music-toggle__icon {
    animation: none;
  }
}

@media (max-width: 600px) {
  .music-toggle {
    right: 10px;
    bottom: 10px;
    width: 40px;
    height: 40px;
  }
}