/* ===========================================================
   WalknChimney — Official Site
   Monochrome, high-contrast, old-film aesthetic.
   =========================================================== */

:root {
  --bg: #0a0a0a;
  --bg-soft: #131313;
  --ink: #f2f2f0;
  --ink-dim: #b9b9b5;
  --ink-faint: #6f6f6c;
  --hairline: #2a2a2a;
  --brick-1: #232323;
  --brick-2: #2c2c2c;
  --brick-3: #1c1c1c;
  --brick-4: #333333;
  --mortar: #0c0c0c;
  --smoke: #e9e9e6;
  --accent: #ffffff;
  --font-display: "Oswald", "Arial Narrow", Impact, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-name: "Permanent Marker", "Segoe UI", "Comic Sans MS", cursive;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* subtle film-grain over the whole page for an "old black & white" feel */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }

/* We never use the browser's native <video>/<audio> chrome — every
   player on the site is either a silent background loop or has its
   own custom transport (see the "Custom media players" section
   below). iOS Safari draws a big native "start playback" glyph over
   the center of a paused, controls-less <video> on its own; without
   this it can sit there over the hero background loop whenever
   autoplay is deferred (Low Power Mode, a slow first paint, etc.),
   which reads as a stray button on top of a background decoration. */
video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
  pointer-events: none;
}

/* ---------- Smoke zone (header + hero) ----------
   Bounds the smoke effect to exactly the header + hero area — the
   zone's own bottom edge (the hero's hairline border) is "the ground"
   for the smoke, and everything is normal, non-fixed page content, so
   it scrolls away with the rest of the page like anything else. See
   the "Smoke" section of script.js.

   This whole zone (and the background video filling it) now fills the
   full screen on load — a proper "landing page" first screen — with
   the rest of the site below it, reached by scrolling. min-height
   (not height) so real content is never clipped if it ever needs more
   room than the viewport gives it. Both 100vh and 100dvh are set —
   100dvh (the "dynamic" viewport height, which accounts for a mobile
   browser's address bar showing/hiding) wins in browsers that support
   it; 100vh is there as the fallback for the ones that don't. Flex
   column so the header sits at its natural size up top and .hero
   (flex: 1 below) stretches to soak up whatever's left, instead of
   both just stacking to their natural height and leaving empty space
   at the bottom of the screen. */
.smoke-zone {
  position: relative;
  overflow: hidden;
  background: #000;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Muted, looping clip from his video as a moody, black & white
   backdrop behind the header/hero — grayscale + a heavy dark scrim
   so it reads as texture/atmosphere, not a distracting video player,
   and never competes with the text on top of it. */
.bg-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.bg-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.15) brightness(0.8);
}
.bg-video-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6,6,6,0.5) 0%, rgba(6,6,6,0.25) 35%, rgba(6,6,6,0.3) 65%, rgba(10,10,10,0.72) 100%);
}

/* ---------- Header ---------- */

.site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 16px;
  padding: 28px clamp(16px, 4vw, 56px) 10px;
  position: relative;
  z-index: 6;
}

/* ---- Work dropdown (left) ---- */

.work-nav {
  position: relative;
  justify-self: start;
}

.work-toggle {
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--ink);
  font-family: var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 13px;
  padding: 10px 16px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.work-toggle:hover,
.work-toggle:focus-visible { border-color: var(--ink); }
.work-toggle .caret { display: inline-block; transition: transform 0.2s ease; margin-left: 4px; }
.work-toggle[aria-expanded="true"] .caret { transform: rotate(180deg); }

.work-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 260px;
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
  box-shadow: 0 20px 40px rgba(0,0,0,0.55);
  padding: 18px;
  display: none;
  z-index: 30;
}
.work-dropdown.open { display: block; }

.work-group + .work-group { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.work-group h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.work-list { list-style: none; margin: 0; padding: 0; }
.work-list li { border-top: 1px solid rgba(255,255,255,0.05); }
.work-list li:first-child { border-top: none; }
.work-list a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 2px;
  font-size: 14px;
}
.work-list a:hover { color: var(--ink-dim); text-decoration: underline; }
.work-list .item-sub { color: var(--ink-faint); font-size: 12px; white-space: nowrap; }
.work-empty { color: var(--ink-faint); font-size: 13px; padding: 4px 2px; list-style: none; }

/* ---- Socials (right) ---- */

.socials {
  justify-self: end;
  display: flex;
  gap: 20px; /* was 14px — bigger icons need more breathing room between them */
  padding-top: 12px;
}
.social-link {
  color: var(--ink-dim);
  display: inline-flex;
  transition: color 0.2s ease, transform 0.2s ease;
}
.social-link:hover { color: var(--ink); transform: translateY(-2px); }
/* Bigger, bolder icons (was a fixed 20x20 on the <svg> tags
   themselves) — closer to the size lil baby uses in his header nav.
   Overrides the inline width/height attributes on each <svg>. */
.social-link svg {
  width: 28px;
  height: 28px;
}

/* ---- Logo (center) ---- */

.logo-wrap {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.chimney {
  position: relative;
  width: 138px;
  height: 190px;
}

/* Smoke layer: fills the .smoke-zone (header + hero) exactly — its
   own bottom edge is the hero's hairline border, i.e. "the ground"
   puffs fall onto. Positioned absolute (not fixed) so it's normal
   page content and scrolls away with the header/hero like anything
   else, rather than persisting as a screen-wide overlay. */
.smoke-layer {
  position: absolute;
  inset: 0;
  /* Was z-index: 5 — LOWER than .site-header's z-index: 6. The header
     (which contains the whole chimney/logo illustration) was painting
     on top of the smoke for its entire run, on every browser, the
     whole time — not an iOS-only compositing quirk at all, just a
     plain stacking bug. This is the actual reason nothing was ever
     visible. 7 sits above the header (6) and bg-video (1), but still
     safely below the "Work" dropdown menu (z-index: 30) so an opened
     dropdown always stays on top of it. */
  z-index: 7;
  pointer-events: none;
  /* Blur lives HERE now, on the layer, not on each individual .puff.
     It used to be the other way around (a small blur on every single
     puff) — that fixed the "shiny ball" shape problem, but with up to
     ~70 puffs on screen at once it meant up to ~70 separate blurred
     compositing layers, each needing its own GPU texture and its own
     re-composite every frame (opacity animates every frame). That's
     what was dragging down the background video's frame rate — lots
     of small blurred layers is much more expensive than one big one.
     Blurring the whole layer instead composites all the (unblurred,
     cheap) puffs together first and blurs that ONE result — same
     soft-edged look, one compositing layer instead of dozens. This is
     also safe rendering-wise for the same reason per-puff blur was
     safe to add back: .puff doesn't use mix-blend-mode anymore, and
     that combination (blur + blended children) was the only thing
     that ever actually broke on iOS here.

     Also deliberately no `overflow: hidden` here anymore. This layer
     is the exact same size as .smoke-zone (its parent), which already
     clips with its own `overflow: hidden` — stacking a SECOND
     overflow:hidden directly around elements using 3D transforms
     (translate3d) is a known WebKit/iOS compositing bug: content
     inside doubly-clipped, hardware-layer-promoted elements can fail
     to paint at all instead of just being clipped. .smoke-zone's own
     clip is sufficient, so the duplicate here is removed. */
  filter: blur(4px);
}

.puff {
  position: absolute;
  top: 0;
  left: 0;
  /* border-radius and background are deliberately NOT set here —
     every puff generates its own randomized organic blob shape and
     gradient hotspots in script.js (spawnPuff). A shared, identical
     circle/gradient for every puff is exactly what made this read as
     a uniform "oval" instead of real smoke: actual smoke never
     repeats the same silhouette twice. See the comment in spawnPuff.
     NOTE: deliberately no mix-blend-mode. It looked slightly richer
     against the dark backdrop with `screen` blending, but iOS Safari
     has repeatedly failed to render blended elements here at all
     (this on top of an earlier, separate blur-filter bug already
     removed) — plain alpha-blended gradients are guaranteed to render
     the same on every device, so the gradient stops are boosted a bit
     in JS to make up the brightness `screen` used to add.

     NOTE: no `filter: blur()` on individual puffs anymore — it moved
     to .smoke-layer above. Blurring every puff separately (up to ~70
     of them at once) meant that many separate GPU-composited layers,
     which was heavy enough to visibly lag the background video.
     Blurring the merged layer once gets the same soft, non-glossy
     edges for a fraction of the compositing cost. */
  opacity: 0;
  /* NOTE: deliberately no `will-change`. Hinting the browser to
     promote all ~40 of these to their own GPU compositing layer, at
     the same time they sit inside the doubly-nested clipping this
     effect used to have, is one more variable in the same class of
     WebKit compositing bug — dropping it removes that risk with no
     real cost, since this is only ~40 simple shapes animating for a
     few seconds, well within what any modern device composites in
     software without a hint. */
}

/* Chimney cap */
.chimney-cap { position: absolute; top: 0; left: -6px; right: -6px; height: 16px; z-index: 3; }
.cap-slab {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #3a3a3a, #1a1a1a);
  border: 1px solid #050505;
  /* Crumbled, uneven top edge instead of a clean rectangular slab */
  clip-path: polygon(
    0% 100%, 0% 22%, 8% 0%, 19% 14%, 30% 2%, 42% 18%, 55% 4%,
    68% 16%, 79% 0%, 90% 12%, 100% 3%, 100% 100%
  );
}
.flue-hole {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 10px;
  background: radial-gradient(ellipse at center, #000 0%, #0c0c0c 70%, transparent 100%);
  border-radius: 50%;
}

/* Chimney body: brick courses */
.chimney-body {
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  bottom: 10px;
  background: var(--mortar);
  padding: 2px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  box-shadow: inset 0 0 22px rgba(0,0,0,0.8), 0 8px 24px rgba(0,0,0,0.5);
}

.brick-row { display: flex; gap: 2px; flex: 1; }
.brick-row.offset { margin-left: -14px; }

.brick {
  flex: 1 1 26px;
  background: var(--brick-2);
  position: relative;
}
.brick.half { flex: 0 0 14px; }

/* Weathered tonal variation across bricks — no two quite alike */
.brick-row:nth-child(4n+1) .brick:nth-child(3n) { background: var(--brick-1); }
.brick-row:nth-child(4n+2) .brick:nth-child(2n) { background: var(--brick-3); }
.brick-row:nth-child(4n+3) .brick:nth-child(5n) { background: var(--brick-4); }
.brick-row:nth-child(odd) .brick:first-child { background: var(--brick-4); }
.brick-row:nth-child(even) .brick:last-child { background: var(--brick-1); }

/* Rundown, crumbling masonry: a couple of bricks knocked loose or
   missing entirely, others sitting crooked, like real old brickwork
   that's been through decades of weather. */
.brick-row:nth-child(3) .brick:nth-child(2),
.brick-row:nth-child(6) .brick:nth-child(4) {
  background: var(--mortar);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.9), inset 0 -1px 2px rgba(255,255,255,0.04);
}
.brick-row:nth-child(2) .brick:nth-child(3) { transform: translateY(2px) rotate(-2deg); }
.brick-row:nth-child(5) .brick:nth-child(1) { transform: translateY(-1px) rotate(1.5deg); }
.brick-row:nth-child(7) .brick:nth-child(4) { transform: translateY(2px) rotate(-1.5deg); }

/* Old, cracked, sooty texture on the whole face — soot pours down
   unevenly from the flue rather than sitting as a tidy center streak,
   and grime pools asymmetrically near the base like real weathering. */
.grain-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 45% at 38% 0%, rgba(0,0,0,0.7), transparent 58%),
    radial-gradient(ellipse 40% 35% at 62% 0%, rgba(0,0,0,0.45), transparent 55%),
    radial-gradient(ellipse 70% 40% at 30% 100%, rgba(0,0,0,0.5), transparent 62%),
    radial-gradient(ellipse 50% 30% at 85% 65%, rgba(0,0,0,0.35), transparent 60%);
  mix-blend-mode: multiply;
}

/* Structural cracks running through the brick face, distinct from the
   lighter film-scratch overlay below */
.crack {
  position: absolute;
  z-index: 4;
  background: rgba(0,0,0,0.75);
  pointer-events: none;
}
.crack.c1 { top: 6%; left: 34%; width: 1.5px; height: 28%; transform: rotate(11deg); }
.crack.c2 { top: 32%; left: 36.5%; width: 1px; height: 16%; transform: rotate(-22deg); }
.crack.c3 { top: 55%; left: 72%; width: 1.5px; height: 24%; transform: rotate(-8deg); }
.crack.c4 { top: 74%; left: 74.5%; width: 1px; height: 14%; transform: rotate(20deg); }

/* Hand-drawn-looking scratches, aged black & white film style */
.scratch {
  position: absolute;
  z-index: 4;
  background: rgba(255,255,255,0.35);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.scratch.s1 { top: 8%;  left: 20%; width: 2px; height: 46%; transform: rotate(9deg);  opacity: 0.5; }
.scratch.s2 { top: 42%; left: 68%; width: 1px; height: 34%; transform: rotate(-14deg); opacity: 0.4; }
.scratch.s3 { top: 4%;  left: 78%; width: 1px; height: 22%; transform: rotate(18deg); opacity: 0.35; }
.scratch.s4 { top: 58%; left: 10%; width: 1px; height: 30%; transform: rotate(-6deg); opacity: 0.3; }
.scratch.s5 { top: 20%; left: 45%; width: 1px; height: 60%; transform: rotate(4deg); opacity: 0.25; }

.chimney-base {
  position: absolute;
  left: -10px;
  right: -10px;
  bottom: 0;
  height: 14px;
  background: linear-gradient(180deg, #2a2a2a, #050505);
  border: 1px solid #050505;
}

/* The site's ONE wordmark — sits above the chimney art instead of
   below it (like the lil baby logo sitting centered above the photos
   in his header), and is now the only "WalknChimney" text on the
   page: the old giant hero-title below used to repeat the name a
   second time right underneath this. It's an <h1> now (was a plain
   div) since removing that hero-title left the page without a top
   heading — this is the natural one to promote, being the actual
   site name/logo. */
.wordmark {
  font-family: var(--font-name);
  /* Bigger + wider than before (was a flat 30px) — scales with the
     viewport so it stays a strong presence on a big laptop screen
     without overrunning a small phone. */
  font-size: clamp(34px, 6.5vw, 56px);
  letter-spacing: 0.05em;
  text-transform: none;
  color: var(--ink);
  text-align: center;
  margin: 0;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  z-index: 4;
  text-align: center;
  padding: clamp(40px, 10vw, 110px) 20px clamp(50px, 8vw, 90px);
  border-bottom: 1px solid var(--hairline);
  /* Grows to fill whatever's left of the screen below the header (see
     .smoke-zone) and centers its own content (eyebrow/tagline/button)
     in that space, instead of just sitting at its natural height near
     the top with empty black space underneath. align-items: center is
     needed too — without it, flex's default (stretch) would pull the
     CTA <a> to the full width of .hero instead of staying an
     auto-width button. */
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.hero-eyebrow {
  font-family: var(--font-display);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--ink-faint);
  margin: 0 0 18px;
}
.hero-tagline {
  color: var(--ink-dim);
  margin: 18px 0 30px;
  font-size: 16px;
}
.hero-cta {
  display: inline-block;
  border: 1px solid var(--ink);
  padding: 14px 34px;
  font-family: var(--font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 13px;
  transition: background 0.2s ease, color 0.2s ease;
}
.hero-cta:hover { background: var(--ink); color: #000; }

/* ---------- Work section (playable songs / videos / merch) ---------- */

.work-section {
  padding: 20px clamp(16px, 4vw, 56px) 70px;
  max-width: 900px;
  margin: 0 auto;
  scroll-margin-top: 24px;
}
.work-block { margin-top: 50px; }
.work-block:first-child { margin-top: 0; }
.work-block h2 {
  font-family: var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 20px;
  margin: 0 0 24px;
  text-align: center;
}
.player-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.player-item {
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
  padding: 18px;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  scroll-margin-top: 90px;
}
.player-item .cover {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  background: #1a1a1a;
  background-size: cover;
  background-position: center;
}
.player-item .player-info { flex: 1 1 220px; min-width: 0; }
.player-item .title { font-weight: 600; font-size: 15px; }
.player-item .sub { color: var(--ink-faint); font-size: 13px; margin-top: 2px; }
.player-item .wc-player {
  flex: 1 1 260px;
  min-width: 220px;
  max-width: 100%;
}
.work-empty { color: var(--ink-faint); text-align: center; font-size: 14px; }
.coming-soon {
  text-align: center;
  color: var(--ink-faint);
  font-size: 14px;
  border: 1px dashed var(--hairline);
  padding: 28px;
  margin: 0;
}

/* ---------- Custom media players ----------
   Replaces the plain native <audio controls>/<video controls> chrome
   with a monochrome, high-contrast transport that matches the site's
   brand instead of the browser's default widget. */

.wc-audio audio { display: none; }

.wc-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.wc-play {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.wc-play:hover { background: var(--ink); color: #000; }
.wc-play .wc-icon-play {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent currentColor;
  margin-left: 2px;
}
.wc-play .wc-icon-pause { display: none; position: relative; width: 12px; height: 14px; }
.wc-play .wc-icon-pause::before,
.wc-play .wc-icon-pause::after {
  content: "";
  position: absolute;
  top: 0;
  width: 4px;
  height: 14px;
  background: currentColor;
}
.wc-play .wc-icon-pause::before { left: 0; }
.wc-play .wc-icon-pause::after { right: 0; }
.wc-play.is-playing .wc-icon-play { display: none; }
.wc-play.is-playing .wc-icon-pause { display: block; }

.wc-progress-wrap {
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px 0;
  cursor: pointer;
  touch-action: none;
}
.wc-progress {
  position: relative;
  height: 4px;
  background: var(--hairline);
}
.wc-progress-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--ink);
}
.wc-progress-handle {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ink);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px var(--bg-soft);
}

.wc-time {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.wc-mute {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--ink-dim);
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11px;
  padding: 8px 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.wc-mute:hover { border-color: var(--ink); color: var(--ink); }
.wc-mute.is-muted { border-color: var(--ink); color: var(--ink); }

/* Video cards — full-width frame with a bold center play button and
   an overlay transport bar, instead of squeezing a video into the
   same compact row used for songs. */
.wc-video-card {
  background: var(--bg-soft);
  border: 1px solid var(--hairline);
  scroll-margin-top: 90px;
}
.work-block { scroll-margin-top: 90px; }
.wc-video-card-head { padding: 16px 18px 0; }
.wc-video-card-head .title { font-weight: 600; font-size: 15px; }
.wc-video-card-head .sub { color: var(--ink-faint); font-size: 13px; margin-top: 2px; }

.wc-video-frame {
  position: relative;
  margin-top: 14px;
  background: #000;
  line-height: 0;
}
.wc-video-frame video {
  width: 100%;
  max-height: 420px;
  display: block;
  background: #000;
  object-fit: contain;
}
.wc-video-bigplay {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: rgba(10,10,10,0.55);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s ease, background 0.15s ease;
}
.wc-video-bigplay:hover { background: rgba(10,10,10,0.75); }
.wc-video-bigplay .wc-icon-play {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent currentColor;
  margin-left: 3px;
}
.wc-video-frame.is-playing .wc-video-bigplay { opacity: 0; pointer-events: none; }

.wc-video-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 60%, rgba(0,0,0,0.85) 100%);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.wc-video-frame.is-playing .wc-video-controls,
.wc-video-frame:focus-within .wc-video-controls {
  opacity: 1;
}
.wc-video-controls .wc-play { width: 34px; height: 34px; }
.wc-video-controls .wc-time { color: var(--ink-dim); }

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

.site-footer {
  padding: 30px clamp(16px, 4vw, 56px) 50px;
  text-align: center;
  color: var(--ink-faint);
  font-size: 13px;
}
.footer-socials { display: flex; justify-content: center; gap: 18px; margin-bottom: 14px; flex-wrap: wrap; }
.footer-socials a:hover { color: var(--ink); text-decoration: underline; }
.footer-legal a { color: var(--ink-faint); text-decoration: underline; opacity: 0.7; }
.footer-legal a:hover { opacity: 1; }

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
  .site-header {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .work-nav { justify-self: center; }
  .work-dropdown { left: 50%; transform: translateX(-50%); }
  .socials { justify-self: center; padding-top: 18px; }
  .logo-wrap { grid-column: 1; }
  .player-item { padding: 14px; gap: 12px; }
  .wc-controls { gap: 10px; }
  .wc-time { font-size: 10px; }
  .wc-mute { padding: 6px 9px; font-size: 10px; }
  .wc-video-frame video { max-height: 260px; }
  .wc-video-bigplay { width: 50px; height: 50px; }
}

@media (max-width: 380px) {
  .wc-time .wc-duration,
  .wc-time .wc-sep { display: none; }
}

/* NOTE: no prefers-reduced-motion rule for .puff anymore — the smoke
   intro is deliberately shown to every visitor regardless of that
   setting, per the artist's request. See the matching note in
   script.js next to where the smoke effect is kicked off. */

/* redeploy trigger */