/* powfu.css — site-specific styles for the artist umbrella */

.s-powfu {
  background: var(--ink-cream);
  position: relative;
}
/* subtle film grain across the whole site for cinematic unity */
.s-powfu::before {
  content: "";
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.2  0 0 0 0 0.14  0 0 0 0 0.09  0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.18;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 50;
}

/* ============================================================
   NATURE PHOTO TREATMENT — sepia + grain + vignette to unify
   external imagery with the brand palette.
   ============================================================ */
.nature-photo {
  position: relative;
  overflow: hidden;
  background: #1F140F;
  border-radius: var(--r-2, 2px);
  isolation: isolate;
}
.nature-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.55) contrast(1.04) brightness(0.94) sepia(0.18);
  transition: filter 600ms ease;
}
.nature-photo-tint {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(103,70,54,0.18) 0%, rgba(43,29,21,0.32) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.nature-photo.tone-warm .nature-photo-tint {
  background: linear-gradient(180deg, rgba(176,136,64,0.10) 0%, rgba(75,40,20,0.35) 100%);
}
.nature-photo.tone-ember .nature-photo-tint {
  background:
    radial-gradient(ellipse at 50% 70%, rgba(232,184,106,0.18), transparent 55%),
    linear-gradient(180deg, rgba(43,29,21,0.25) 0%, rgba(20,12,8,0.55) 100%);
}
.nature-photo-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.12  0 0 0 0 0.08  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.5;
  pointer-events: none;
}
.nature-photo-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(20,12,8,0.55) 100%);
  pointer-events: none;
}

/* ============================================================
   HERO — full-bleed photo with an interactive doorway.
   No overlay text or wordmark — the photo IS the hero. The
   doorway in the tree on the left is a clickable hotspot:
     • hover ⇒ swap to the brighter "glow" version of the photo
       (image 2 fades in over image 1)
     • click ⇒ smooth-scroll to the latest-release section below
   ============================================================ */
.powfu-hero {
  position: relative;
  width: 100%;
  /* Maintain the photo's 2:1 aspect on most viewports. min-height
     keeps mobile from being too short; max-height keeps tall
     monitors from making the hero stretch past one screen. */
  aspect-ratio: 2 / 1;
  min-height: 380px;
  max-height: 92vh;
  overflow: hidden;
  background: #0f0a08;
  isolation: isolate;
}

/* —— BANNER VARIANT ——
   Flat photo hero ("POWFU" already baked into the image). Source
   image is 2400×1600 (3:2 = 1.5:1). The artist has asked for two
   crops applied to this hero:
     • bottom 30% off  (initial 20% bottom crop + another 10%)
     • top    10% off
   So only image rows 10%–70% remain visible, a 60%-tall slice.
   The visible aspect ratio is therefore:
     width / (0.6 × image_height) = 1 / (0.6 / 1.5) = 2.5:1
   We crop with object-fit:cover + object-position rather than
   re-encoding the JPEG — the image still loads at natural size,
   the section just shows a windowed slice.
   object-position math: with the image scaled to W wide × 0.667W
   tall (its natural aspect at 100% width), and the section box at
   0.4W tall, there's 0.267W of vertical overflow. We want 10% of
   image_height = 0.0667W cropped off the top, which is 0.0667 /
   0.267 = 25% of the overflow above. Hence object-position: 25%. */
.powfu-hero.powfu-hero--banner {
  aspect-ratio: 2.5 / 1;
  min-height: 0;
  max-height: none;
  /* Sampled mid-green from the photo's foliage — used while the
     image is still streaming in, so the flash-of-background is
     close to the final color instead of black. */
  background: #1b2418;
  display: block;
  overflow: hidden;
}
.powfu-banner-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 25% from top of the overflow → crops 10% of image height off
     the top and 30% off the bottom. */
  object-position: center 25%;
  /* Soft 6% feather at the bottom edge of the section. With
     object-fit:cover the mask applies to the element box (not the
     underlying image content), so the gradient stops are relative
     to the box height — the visible region — and the 94→100%
     range fades the bottom hairline cleanly. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 94%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 94%, transparent 100%);
}

/* —— BANNER HERO LOGO PLACEMENTS ——
   Per the artist:
     • Lined up horizontally with each other (same visual midline,
       not just the same top edge)
     • Both 20% bigger than the previous size (13% → 15.6%, rounded)

   The two logo files have very different aspect ratios:
     • lofi-library-club.png   1.29:1  (roughly square)
     • unworthy-wordmark.png   6.83:1  (long horizontal wordmark)
   so at any equal `width`, library renders ~5× taller than
   unworthy. If both were anchored by the same `top`, their top
   edges would align but their visual centers would be ~6
   percentage-points apart on the image — which is exactly why the
   artist felt they were misaligned.

   Fix: anchor by the CENTER of each logo via
   `transform: translate(-50%, -50%)`. The `top` percentage now
   reads as the vertical midline, so the two midlines coincide
   regardless of logo height.

   The `top: 82%` value targets ~59% of image_height — roughly
   where the unworthy wordmark sat in the previous setup, which the
   artist had approved. With the new 2.5:1 section: 59% of image is
   (59-10)/60 ≈ 82% of section. */
.powfu-hero-mark--banner-library {
  top: 82%;
  left: 33%;
  width: 16%;
  transform: translate(-50%, -50%);
  transition: transform 520ms cubic-bezier(0.22, 0.8, 0.28, 1);
}
.powfu-hero-mark--banner-unworthy {
  top: 82%;
  left: 73%;
  width: 16%;
  transform: translate(-50%, -50%);
  transition: transform 520ms cubic-bezier(0.22, 0.8, 0.28, 1);
}

/* —— BARELY-THERE HOVER —— (unchanged from previous turn)
   Compose the centering translate(-50%, -50%) with an additional
   1px lift on top. Using calc to keep the centering exact while
   adding the lift; can't just add -1px to -50% because the units
   are different (-50% is percentage of the element, -1px is pixel). */
.powfu-hero-mark--banner-library:hover,
.powfu-hero-mark--banner-library:focus-visible,
.powfu-hero-mark--banner-unworthy:hover,
.powfu-hero-mark--banner-unworthy:focus-visible {
  transform: translate(-50%, calc(-50% - 1px));
}
.powfu-hero-mark--banner-library:hover img,
.powfu-hero-mark--banner-library:focus-visible img,
.powfu-hero-mark--banner-unworthy:hover img,
.powfu-hero-mark--banner-unworthy:focus-visible img {
  /* Identical drop-shadow stack to the resting state — only a
     2-point brightness lift on hover. */
  filter:
    invert(1)
    sepia(0.18)
    brightness(1.10)
    drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.7))
    drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.7))
    drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.7))
    drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.7))
    drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.7))
    drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.7))
    drop-shadow(0 14px 24px rgba(0, 0, 0, 0.7))
    drop-shadow(0 30px 50px rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 22px rgba(255, 215, 130, 0.22));
  opacity: 0.97;
}

/* Mobile bumps — both 20% bigger here too. */
@media (max-width: 720px) {
  .powfu-hero-mark--banner-library  { width: 20%; left: 32%; top: 82%; }
  .powfu-hero-mark--banner-unworthy { width: 20%; left: 74%; top: 82%; }
}

/* Stacked image stage. Both images are absolute-positioned and
   the same size. The base is on top by default; the glow image
   sits beneath. On hover (state class on the section), the base
   fades out, revealing the glow underneath. */
.powfu-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.phero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* slight left-of-center keeps the doorway reliably in view on
     narrow / portrait viewports without losing the POWFU letters */
  object-position: 38% center;
  display: block;
  transition:
    opacity 480ms cubic-bezier(0.4, 0, 0.2, 1),
    filter  480ms cubic-bezier(0.4, 0, 0.2, 1);
}
.phero-img-base {
  z-index: 2;
  opacity: 1;
  /* Dimmed by default — the base photo reads as the "before"
     state. Hovering the door fades this layer out AND lifts the
     dimming, revealing the bright glow image below. */
  filter: brightness(0.72) saturate(0.88) contrast(0.96);
}
.phero-img-glow { z-index: 1; opacity: 1; }    /* always rendered; base masks it */
.powfu-hero.is-door-hover .phero-img-base {
  opacity: 0;
  filter: brightness(1) saturate(1) contrast(1);
}

/* Soft "feather" at the bottom edge so the photo dissolves into
   the cream page color below rather than cutting off hard against
   it. The transition is concentrated in the last ~8% so most of
   the image stays untouched — only the very bottom hairline of
   pixels blends to match the section below. The cream value here
   (#FFF8E8) is the same `--ink-cream` used for `--bg`, so the
   fade is precisely color-matched to the page. */
.powfu-hero-photo-tint {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 88%,
    rgba(255, 248, 232, 0.0)  90%,
    rgba(255, 248, 232, 0.35) 95%,
    rgba(255, 248, 232, 0.78) 98%,
    rgba(255, 248, 232, 1.0)  100%
  );
}

/* —— DOOR HOTSPOT ——————————————————————————————————————————
   An invisible button shaped roughly like the arched doorway,
   positioned over its location in the image. Visible only via
   cursor change + a subtle warm glow on hover. */
.powfu-hero-door {
  position: absolute;
  /* Door bounds re-measured against the new dark hero image: the
     glowing arched portal sits at roughly x∈[18%, 33%], y∈[23%, 67%]
     including the steps below. The previous coords were ~5% too
     far left and the box was uncomfortably narrow — clicks landed
     on tree bark instead of the door. These values are more
     generous, with built-in padding so off-center clicks still
     hit the target. */
  left: 14%;
  width: 19%;
  top: 21%;
  height: 49%;
  z-index: 6;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  /* Arched shape — round top, square bottom, like a Gothic door */
  border-radius: 50% 50% 8% 8% / 58% 58% 6% 6%;
  transition: background-color 380ms ease, box-shadow 380ms ease;
  outline-offset: 6px;
}
.powfu-hero-door:hover,
.powfu-hero-door:focus-visible,
.powfu-hero-door:active {
  background: radial-gradient(
    ellipse at center,
    rgba(255, 220, 140, 0.20) 0%,
    rgba(255, 220, 140, 0.08) 40%,
    transparent 72%
  );
  box-shadow:
    0 0 80px 24px rgba(255, 196, 110, 0.18),
    inset 0 0 50px rgba(255, 220, 140, 0.22);
}
.powfu-hero-door:focus-visible {
  outline: 2px solid rgba(255, 220, 140, 0.85);
}
/* Touch-active also triggers the image swap so tap users see
   the glow briefly before the scroll begins */
.powfu-hero:has(.powfu-hero-door:active) .phero-img-base { opacity: 0; }

/* ============================================================
   INTERIOR — the cosy cabin scene revealed when the visitor clicks
   the door on the hero. Same full-bleed treatment as .powfu-hero
   (2:1 aspect ratio, max-height: 92vh, soft cream fade into the
   page below), with two interactive elements: a door hotspot over
   the arched door on the right (returns to the hero), and a small
   ← arrow in the top-left that does the same.
   ============================================================ */
.powfu-interior {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  min-height: 380px;
  max-height: 92vh;
  overflow: hidden;
  background: #16100b;            /* deep wood-shadow so any letterbox edges blend */
  isolation: isolate;
  animation: powfu-interior-fade-in 520ms cubic-bezier(0.32, 0.7, 0.4, 1) both;
}
@keyframes powfu-interior-fade-in {
  from { opacity: 0; transform: scale(1.012); }
  to   { opacity: 1; transform: scale(1); }
}
.powfu-interior-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.powfu-interior-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
/* Soft cream feather at the bottom so the photo dissolves into the
   cream page color below rather than cutting hard — same as the
   exterior hero. */
.powfu-interior-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 88%,
    rgba(255, 248, 232, 0.0)  90%,
    rgba(255, 248, 232, 0.35) 95%,
    rgba(255, 248, 232, 0.78) 98%,
    rgba(255, 248, 232, 1.0)  100%
  );
}

/* —— INTERIOR DOOR HOTSPOT ————————————————————————————————————
   Invisible button positioned over the arched door on the right
   side of the painting. Clicking it sends the visitor back outside.
   Warm-lantern glow on hover, like the exterior door. */
.powfu-interior-door {
  position: absolute;
  /* Arched door pixels in the painting: spans roughly x∈[72%,88%],
     y∈[20%,92%], wrapping the whole arched window/door panel. */
  left: 72%;
  width: 16%;
  top: 20%;
  height: 72%;
  z-index: 4;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  /* Arched top, flat bottom — Gothic door shape */
  border-radius: 50% 50% 6% 6% / 28% 28% 4% 4%;
  transition: background-color 380ms ease, box-shadow 380ms ease;
  outline-offset: 6px;
}
.powfu-interior-door:hover,
.powfu-interior-door:focus-visible,
.powfu-interior-door:active {
  background: radial-gradient(
    ellipse at center,
    rgba(255, 220, 140, 0.22) 0%,
    rgba(255, 220, 140, 0.10) 40%,
    transparent 72%
  );
  box-shadow:
    0 0 80px 24px rgba(255, 200, 120, 0.20),
    inset 0 0 60px rgba(255, 220, 140, 0.20);
}
.powfu-interior-door:focus-visible {
  outline: 2px solid rgba(255, 220, 140, 0.85);
}

/* —— INTERIOR HOTSPOTS ——————————————————————————————————————
   SVG overlay covering the cabin photo with four navigable shapes:
   framed map (→ music), four photos (→ shows), writing desk (→ about),
   wooden cross (→ secret/coming-soon). At rest the shapes are entirely
   invisible. On hover/focus, each fills with a soft warm-white glow
   confined to the polygon — like lantern-light spilling onto that
   object alone — plus a subtle outer halo so the glow feels luminous
   rather than flat.

   The wrapper has `pointer-events: none` so the cursor only changes /
   triggers a glow when it's actually over a polygon. Hovering blank
   wall, ceiling, or the door area does nothing. */
.powfu-interior-hotspots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}

/* The clickable polygon shapes — fully invisible at all times. No
   fill, no stroke, no hover state, no focus outline. The visible
   affordance is the sparkles drawn next to them inside the same
   <g> group (see .interior-spark below). */
.interior-hot {
  pointer-events: auto;
  cursor: pointer;
  fill: transparent;
  stroke: transparent;
  stroke-width: 0;
  outline: none;
}
.interior-hot:hover,
.interior-hot:focus-visible {
  /* Deliberately empty — no visible outline / glow / fill on hover.
     The sparkle intensification happens via the parent group's
     :hover state targeting .interior-spark below. */
  outline: none;
}

/* —— SPARKLES ——————————————————————————————————————————————————
   Each hotspot has 6–10 small 4-point stars distributed within its
   shape. They twinkle continuously by default (opacity oscillation),
   and when the parent <g> is hovered the animation speeds up and the
   drop-shadow gets brighter for a "this is interactive" cue. The
   path geometry itself is built per-sparkle in JSX (position + size
   baked in) so we don't have to fight the preserveAspectRatio="none"
   horizontal-stretch with CSS transforms.

   transform-box / transform-origin are unused — only opacity and
   filter animate, which keeps things bulletproof across browsers and
   avoids the SVG-transform-vs-CSS-transform conflict. */
@keyframes interior-spark-twinkle {
  /* Combined opacity + scale animation so each sparkle visibly
     blooms and shrinks as it twinkles, instead of just blinking on
     and off. transform-box: fill-box (set on .interior-spark below)
     makes the scale happen around the path's bounding-box center,
     which is the sparkle's geometric center, so it grows/shrinks in
     place rather than drifting. Five keyframes give an irregular,
     organic flicker — bright peak, dim, bright peak, faint, dark. */
  0%   { opacity: 0;    transform: scale(0.25); }
  18%  { opacity: 0.95; transform: scale(1.05); }
  36%  { opacity: 0.35; transform: scale(0.7);  }
  54%  { opacity: 0.95; transform: scale(1.15); }
  72%  { opacity: 0.15; transform: scale(0.5);  }
  100% { opacity: 0;    transform: scale(0.25); }
}
.interior-spark {
  pointer-events: none;
  /* —— FILL: RADIAL GRADIENT INSTEAD OF SOLID ——
     The fill references the <radialGradient id="sparkle-glow-warm">
     defined inside the SVG's <defs> block. The gradient runs from
     pure white at the center through warm-cream and warm-gold to
     fully transparent at the edges — so the path's geometric center
     reads as a sharp point-source of light, and the 4-point arms
     fade into the photo at their tips instead of cutting off as
     hard solid edges. This is the single biggest contributor to the
     "real glitter" look — without it, the path was just a flat shape. */
  fill: url(#sparkle-glow-warm);

  /* —— GLOW HALO: STACKED DROP-SHADOWS ——
     Four-layer drop-shadow stack at progressively wider blur radii
     simulates bloom around the light source — the small one (1.5px)
     defines the sharp core glow, the medium ones (4px, 9px) carry
     the ambient bloom, and the outer one (18px) is the soft falloff
     that lets the sparkle feel embedded in the room's atmosphere
     instead of pasted on top. Each shadow's alpha decreases as the
     blur grows so the layered glow has a natural intensity curve. */
  filter:
    drop-shadow(0 0 1.5px rgba(255, 255, 240, 1))
    drop-shadow(0 0 4px rgba(255, 245, 200, 0.85))
    drop-shadow(0 0 9px rgba(255, 230, 160, 0.55))
    drop-shadow(0 0 18px rgba(255, 215, 130, 0.28));
  opacity: 0;
  /* transform-box / transform-origin together make CSS transforms on
     SVG paths scale/rotate around the path's bounding-box center
     (in user units), which for our sparkles is the (x,y) point we
     baked into the d attribute. Without these two, scale() would
     happen around the SVG element's origin (0,0) and the sparkle
     would slide off-screen as it scaled. */
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  animation-name: interior-spark-twinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  /* animation-delay and animation-duration are set inline per-sparkle
     in the JSX so each one has its own twinkle phase + speed. */
  transition:
    filter 240ms ease,
    fill 240ms ease;
}

/* Cool-blue tint for cross sparkles (matches the older cross-only
   glow we used to have — keeps that hotspot reading as the cross
   even though everything is sparkles now). Uses the cooler radial
   gradient variant from the SVG defs. */
.interior-spark-cross {
  fill: url(#sparkle-glow-cool);
  filter:
    drop-shadow(0 0 1.5px rgba(245, 250, 255, 1))
    drop-shadow(0 0 4px rgba(220, 232, 255, 0.85))
    drop-shadow(0 0 9px rgba(180, 200, 255, 0.55))
    drop-shadow(0 0 18px rgba(140, 170, 255, 0.28));
}

/* Hover intensification — when the group is hovered (which fires
   because the polygon inside it has pointer-events:auto), all
   sparkles in that group twinkle faster and glow brighter. The
   `!important` is needed because animation-duration is set inline
   per sparkle, and inline beats the cascade otherwise. */
.interior-hot-group:hover .interior-spark {
  animation-duration: 1.5s !important;
  /* On hover the halo grows substantially — the same 4-layer
     architecture but with each layer pushed wider + brighter so
     the sparkle reads as a fully bloomed flare. */
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 250, 1))
    drop-shadow(0 0 6px rgba(255, 250, 220, 1))
    drop-shadow(0 0 14px rgba(255, 240, 180, 0.8))
    drop-shadow(0 0 28px rgba(255, 220, 140, 0.5));
}
.interior-hot-group:hover .interior-spark-cross {
  filter:
    drop-shadow(0 0 2px rgba(250, 252, 255, 1))
    drop-shadow(0 0 6px rgba(225, 235, 255, 1))
    drop-shadow(0 0 14px rgba(190, 210, 255, 0.8))
    drop-shadow(0 0 28px rgba(150, 180, 255, 0.5));
}

/* Reduced motion — disable the twinkle, just show a static, faint
   sparkle field so people who prefer reduced motion still see the
   hotspots without the animation. */
/* Previously had a @media (prefers-reduced-motion: reduce) block here
   that disabled the cabin sparkle animations entirely. That block was
   REMOVED deliberately — the sparkles are tiny 16-24px elements
   doing gentle opacity + scale fades, well below the threshold for
   vestibular-motion discomfort. Reduced-motion users still see them
   twinkle; if you specifically need them frozen for a user, the
   simplest path is to override .interior-spark animation-name to
   none via a custom user stylesheet rather than via the site itself. */

/* —— PHOTO-WALL CLOSEUP MODAL ————————————————————————————————
   Triggered by clicking the yellow hotspot. Full-viewport dark
   backdrop with a single large image of the framed photos. Closes
   on backdrop click, the explicit X button, or the Escape key
   (handled inside PowfuInterior). */
.powfu-interior-closeup {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(15, 10, 6, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: interiorCloseupFade 240ms ease-out;
  cursor: zoom-out;
  overflow: auto;
}
@keyframes interiorCloseupFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.powfu-interior-closeup-img {
  max-width: 96vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  display: block;
  cursor: default;
  border-radius: 4px;
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.7);
  animation: interiorCloseupScale 320ms cubic-bezier(0.2, 0.9, 0.3, 1);
  user-select: none;
  -webkit-user-drag: none;
}
@keyframes interiorCloseupScale {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
.powfu-interior-closeup-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 180ms ease, transform 180ms ease;
  z-index: 2;
}
.powfu-interior-closeup-close:hover {
  background: rgba(255, 255, 255, 0.24);
  transform: scale(1.05);
}
@media (max-width: 640px) {
  .powfu-interior-closeup { padding: 12px; }
  .powfu-interior-closeup-img { max-width: 100vw; max-height: 86vh; }
  .powfu-interior-closeup-close { top: 10px; right: 12px; width: 32px; height: 32px; font-size: 19px; }
}

/* —— LEAVE ARROW —————————————————————————————————————————————
   Persistent ← in the top-left corner so visitors who don't realise
   the door is clickable can always escape. Reads as a small lantern-
   coloured tag against the dark wood; expands to show "back outside"
   on hover/focus. */
.powfu-interior-leave {
  position: absolute;
  top: 22px;
  left: 22px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 9px 12px;
  background: rgba(43, 29, 21, 0.62);
  color: rgba(255, 238, 196, 0.92);
  border: 1px solid rgba(255, 220, 140, 0.32);
  border-radius: 999px;
  font-family: var(--font-serif-sc, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    background-color 220ms ease,
    border-color     220ms ease,
    color            220ms ease,
    transform        220ms ease;
}
.powfu-interior-leave > span[aria-hidden="true"] {
  font-size: 16px;
  line-height: 1;
  transition: transform 220ms ease;
}
.powfu-interior-leave-text {
  font-size: 13.5px;
}
.powfu-interior-leave:hover,
.powfu-interior-leave:focus-visible {
  background: rgba(43, 29, 21, 0.82);
  border-color: rgba(255, 220, 140, 0.6);
  color: rgba(255, 246, 214, 1);
  transform: translateX(-2px);
}
.powfu-interior-leave:hover > span[aria-hidden="true"],
.powfu-interior-leave:focus-visible > span[aria-hidden="true"] {
  transform: translateX(-3px);
}
.powfu-interior-leave:focus-visible {
  outline: 2px solid rgba(255, 220, 140, 0.85);
  outline-offset: 3px;
}

/* On the narrowest screens, drop the "back outside" label and just
   show the arrow in a tighter pill — it stays unmistakable. */
@media (max-width: 540px) {
  .powfu-interior-leave {
    padding: 8px 11px;
    gap: 0;
  }
  .powfu-interior-leave-text { display: none; }
}

/* —— HERO PROJECT MARKS ——————————————————————————————————————
   Lofi Library Club and Unworthy wordmarks float over the
   upper-right portion of the hero photo, where the forest opens
   up to the sun-shafts. Black source PNGs get inverted to cream
   via CSS filter so they read on the dark forest, with a soft
   drop-shadow so they don't disappear into the brighter glow
   areas when the door is hovered. */
.powfu-hero-mark {
  position: absolute;
  z-index: 7;
  display: block;
  text-decoration: none;
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 240ms ease;
  /* perspective for the subtle 3D tilt on hover */
  perspective: 800px;
  transform-style: preserve-3d;
  will-change: transform;
}
.powfu-hero-mark img {
  width: 100%;
  height: auto;
  display: block;
  /* —— 3D RAISED-LOGO EFFECT ——
     The artwork starts black; `invert(1)` flips it to white, then
     `sepia + brightness` tints it warm-cream so it reads as a
     polished metal sign against the dusk photo. After the colour
     pass, a six-layer stepped drop-shadow stack builds a 6px-deep
     extruded side wall under the letterforms — each shadow is 1px
     further down-right than the last, with zero blur for crisp
     chiseled edges. Solid black at 0.7 alpha means the layered
     shadows stay legible against any photo region (dark sky,
     bright lamppost, mid-tone trees) without becoming an opaque
     smudge.

     Below the extrusion: two cascading soft cast shadows — a
     tighter one at 14/24 for the immediate grounding, and a
     wider/looser one at 30/50 for the ambient floor shadow. This
     two-layer approach reads as a real object sitting in light,
     not a sticker pasted on. Finally, a faint warm aura (warm
     yellow at 0.2) suggests interior light reflecting off the
     polished surface.

     Why filter:drop-shadow and not box-shadow on the link wrapper:
     box-shadow follows the rectangular bounding box of the <a>,
     which would paint a rectangular shadow under the logo. The
     drop-shadow filter follows the PNG's alpha channel exactly,
     so the shadow has the same shape as the wordmark — chiseled
     letterforms, not a box. */
  filter:
    invert(1)
    sepia(0.18)
    brightness(1.08)
    /* —— stepped extrusion: 6 × 1px shadows = 6px extruded depth */
    drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.7))
    drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.7))
    drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.7))
    drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.7))
    drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.7))
    drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.7))
    /* —— grounding cast shadows below the logo */
    drop-shadow(0 14px 24px rgba(0, 0, 0, 0.7))
    drop-shadow(0 30px 50px rgba(0, 0, 0, 0.45))
    /* —— warm ambient aura */
    drop-shadow(0 0 22px rgba(255, 215, 130, 0.22));
  opacity: 0.94;
  -webkit-user-drag: none;
  user-select: none;
  transition:
    filter 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 320ms ease,
    transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* hover: extrusion grows by 2 more steps, glow intensifies, lift */
.powfu-hero-mark:hover img,
.powfu-hero-mark:focus-visible img {
  opacity: 1;
  filter:
    invert(1)
    sepia(0.10)
    brightness(1.15)
    /* 8-step extrusion (2 deeper than rest state) — logo appears
       to rise toward the viewer as its visible side wall gets
       taller. The 0.75 alpha is just slightly more saturated than
       resting to keep the shadow stack from washing out. */
    drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.75))
    drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.75))
    drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.75))
    drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.75))
    drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.75))
    drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.75))
    drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.75))
    drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.75))
    /* Deeper cast shadows match the lifted height */
    drop-shadow(0 22px 36px rgba(0, 0, 0, 0.75))
    drop-shadow(0 42px 60px rgba(0, 0, 0, 0.5))
    /* Brighter warm aura — like the interior light flares as
       the logo lifts toward the viewer */
    drop-shadow(0 0 18px rgba(255, 215, 130, 0.7))
    drop-shadow(0 0 42px rgba(255, 195, 100, 0.5));
  transform: translateZ(12px);
}
.powfu-hero-mark:hover,
.powfu-hero-mark:focus-visible {
  /* Hover lift — translateX(-50%) preserved so the centering on
     .powfu-hero-mark--library and .powfu-hero-mark--unworthy isn't
     overwritten when the wrapper transitions to its hover state.
     Without the explicit translateX here, both logos would jump
     to align their left edges to the 50% mark mid-hover, which
     looks like a glitch. */
  transform: translateX(-50%) translateY(-4px) rotateX(2deg);
}
.powfu-hero-mark:focus-visible {
  outline: 2px solid rgba(255, 220, 140, 0.75);
  outline-offset: 8px;
  border-radius: 4px;
}
/* —— LOGO PLACEMENT ——
   Unworthy sits centered horizontally above the "P" of the woven
   POWFU wordmark; library sits centered horizontally above the "U"
   (the rightmost letter). Both are positioned high enough above the
   wordmark to leave clear breathing room — the bottom of each logo
   lands well above the top of the letters below. */
.powfu-hero-mark--library {
  /* Above the U (rightmost letter of POWFU). */
  top: 28%;
  left: 88%;
  transform: translateX(-50%);
  width: 14%;
}
.powfu-hero-mark--unworthy {
  /* Above the P (leftmost letter of POWFU). */
  top: 28%;
  left: 51%;
  transform: translateX(-50%);
  width: 18%;
}
/* Hover transforms need to compose with the centering translateX.
   The existing .powfu-hero-mark img hover rule applies translateZ
   to the inner <img>, independent of wrapper transform, so no
   conflict there. */

@media (max-width: 720px) {
  .powfu-hero { min-height: 320px; }
  /* On narrow viewports the door shifts slightly with the cropping;
     widen the hotspot a touch so it stays comfortably tappable. */
  .powfu-hero-door { left: 12%; width: 22%; top: 19%; height: 54%; }
  /* Marks compress and shift inward so they don't collide with the
     wooden POWFU letters on the right. */
  .powfu-hero-mark--library { top: 7%;  left: 56%; width: 19%; }
  .powfu-hero-mark--unworthy { top: 32%; left: 54%; width: 24%; }
}

/* —— OLD HERO CHROME — dormant. The leaves animation, wordmark,
   eyebrow, byline, and sigil CSS below this point are no longer
   rendered by the JSX, but kept defined so any future surface
   reusing the styles still works. ———————————————————————— */

/* —— FLOATING LEAVES ——————————————————————————————————————————————— */
.powfu-hero-leaves {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}
.leaf {
  position: absolute;
  top: -10%;
  display: inline-block;
  will-change: transform, opacity;
  animation-name: leafDrift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Color variants — warm palette desaturated to match calmer sunset */
.leaf-v0 { color: #b07550; }     /* dusty burnt orange */
.leaf-v1 { color: #9c4d36; }     /* muted rust */
.leaf-v2 { color: #7a3a2a; }     /* deep ember */

@keyframes leafDrift {
  0% {
    transform: translate(0, -10vh) rotate(0deg);
    opacity: 0;
  }
  8% {
    opacity: var(--leaf-opacity, 1);
  }
  50% {
    transform: translate(calc(var(--drift-x, 60px) * 0.55), 55vh) rotate(calc(var(--rotate-end, 180deg) * 0.5));
  }
  92% {
    opacity: var(--leaf-opacity, 1);
  }
  100% {
    transform: translate(var(--drift-x, 60px), 115vh) rotate(var(--rotate-end, 180deg));
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .leaf { animation: none; opacity: 0.3 !important; }
}

/* Old hero-bg / embers — keep selectors but neutralize so they don't conflict */
.powfu-hero-bg, .powfu-hero-embers { display: none !important; }

.powfu-hero-inner {
  position: relative; z-index: 4;
  padding: 80px 32px 200px;
  max-width: 1200px;
  width: 100%;
}
.powfu-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 16px;
  font-family: var(--font-serif-sc);
  font-size: 12px; letter-spacing: var(--ls-spaced); text-transform: uppercase;
  color: var(--ink-cream-soft, #F0E4C4);
  opacity: 0.85;
  margin-bottom: 32px;
}
.hr-tick {
  display: inline-block;
  width: 36px; height: 1px;
  background: var(--ink-cream-soft, #F0E4C4);
  opacity: 0.5;
}
.powfu-name {
  font-family: var(--font-display);
  font-size: clamp(96px, 18vw, 240px);
  line-height: 0.85;
  color: var(--ink-cream);
  margin: 0 0 8px;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.powfu-name-italic {
  font-style: italic;
  display: inline-block;
  position: relative;
}
.powfu-vine {
  display: block;
  width: min(92vw, 1100px);
  height: auto;
  margin: 0 auto -24px;
  overflow: visible;
  filter:
    drop-shadow(0 0 22px rgba(0,0,0,0.55))
    drop-shadow(0 4px 10px rgba(255,170,70,0.18));
}
/* Override vine stroke colors so wordmark reads against dark backdrop */
.powfu-vine g[stroke] { stroke: var(--ink-cream) !important; }
.powfu-vine g[fill] path[fill="currentColor"] { fill: var(--ink-cream) !important; }
.powfu-vine [color] { color: var(--ink-sage-pale, #C4CDB0) !important; }

.powfu-hero-byline {
  font-family: var(--font-serif);
  font-size: clamp(18px, 1.5vw, 22px);
  font-style: italic;
  color: var(--ink-cream-soft, #F0E4C4);
  margin: 24px 0 36px;
  text-wrap: balance;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.powfu-hero-actions {
  display: inline-flex; gap: 16px; flex-wrap: wrap; justify-content: center;
}
.btn-ghost-cream {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px;
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--ink-cream);
  background: rgba(255,248,232,0.08);
  border: 1px solid var(--ink-cream);
  border-radius: var(--r-2, 2px);
  text-decoration: none;
  backdrop-filter: blur(2px);
  transition: background 280ms ease;
}
.btn-ghost-cream:hover {
  background: rgba(255,248,232,0.18);
}

.powfu-hero-fade {
  position: absolute; bottom: 0; left: 0; right: 0; height: 180px;
  background: linear-gradient(180deg, transparent, var(--ink-cream));
  z-index: 4; pointer-events: none;
}

/* ============================================================
   INTRO
   ============================================================ */
.powfu-intro {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(216,160,80,0.10), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(103,70,54,0.08), transparent 50%),
    var(--ink-cream);
  position: relative;
}
.powfu-intro::before {
  /* subtle warm light wash from upper-right, like late-day window */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 80% 20%, rgba(232,184,106,0.16), transparent 70%);
  pointer-events: none;
}
.powfu-intro > .wrap { position: relative; }
.powfu-intro-grid {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 96px;
  align-items: start;
}
@media (max-width: 900px) {
  .powfu-intro-grid { grid-template-columns: 1fr; gap: 48px; }
}
.powfu-intro-portrait { display: flex; flex-direction: column; align-items: center; }
.powfu-intro-portrait .card-frame { margin: 8px; }
.powfu-intro-caption {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 28px;
  font-family: var(--font-serif-sc);
  font-size: 11px; letter-spacing: var(--ls-spaced); text-transform: uppercase;
  color: var(--ink-espresso-soft);
}
.powfu-intro-copy {
  display: block;
  container-type: inline-size;
}
.powfu-intro-copy > .eyebrow { display: block; margin-bottom: 16px; }
.powfu-intro-copy h2 {
  display: block;
  width: 100%;
  font-family: var(--font-display);
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.3;
  font-style: italic;
  font-weight: 400;
  color: var(--ink-espresso-deep);
  margin: 0 0 36px;
  padding-bottom: 12px;
  max-width: 16ch;
}
.powfu-intro-copy p { margin: 0 0 24px; line-height: 1.75; padding-bottom: 8px; }
.powfu-intro-copy p.lead { font-size: 22px; padding-bottom: 16px; min-height: 5em; }
.powfu-intro-copy p:last-of-type { margin-bottom: 0; }
.powfu-intro-copy p { color: var(--ink-bone); }
.powfu-sig {
  display: flex; align-items: center; gap: 14px;
  margin-top: 32px;
  font-family: var(--font-display);
  font-size: 28px; font-style: italic;
  color: var(--ink-espresso);
}

/* ============================================================
   DISCOGRAPHY
   ============================================================ */
.powfu-disc {
  background: var(--ink-cream-soft);
  border-top: 1px solid var(--border-faint);
  border-bottom: 1px solid var(--border-faint);
}
.powfu-disc-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 32px;
}
.powfu-disc-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  align-items: center;
  padding: 24px 32px 24px 0;
  position: relative;
  border-top: 1px solid var(--border);
  padding-top: 32px;
}
.powfu-disc-row:first-child { border-top: 0; padding-top: 0; }
.powfu-disc-row:nth-child(even) {
  grid-template-columns: 1fr 220px;
}
.powfu-disc-row:nth-child(even) .powfu-disc-meta { order: 1; text-align: right; }
.powfu-disc-row:nth-child(even) .powfu-disc-cover { order: 2; }
.powfu-disc-row:nth-child(even) .powfu-disc-actions { justify-content: flex-end; }
@media (max-width: 800px) {
  .powfu-disc-row, .powfu-disc-row:nth-child(even) {
    grid-template-columns: 1fr;
    text-align: left !important;
  }
  .powfu-disc-row:nth-child(even) .powfu-disc-meta { text-align: left; order: 2; }
  .powfu-disc-row:nth-child(even) .powfu-disc-cover { order: 1; }
  .powfu-disc-row:nth-child(even) .powfu-disc-actions { justify-content: flex-start; }
}
.powfu-disc-cover { position: relative; display: inline-block; }
.powfu-disc-cover .card-frame { margin: 4px; }
.powfu-disc-play {
  position: absolute;
  bottom: 12px; right: 12px;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid var(--ink-espresso);
  background: var(--ink-cream);
  color: var(--ink-espresso-deep);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-paper);
  transition: background 200ms, transform 200ms;
}
.powfu-disc-play:hover { background: var(--ink-parchment); }
.powfu-disc-play.is-playing { background: var(--ink-espresso-deep); color: var(--ink-cream); }
.powfu-disc-num {
  display: flex; align-items: baseline; gap: 14px;
}
.powfu-disc-num .num {
  font-family: var(--font-display);
  font-size: 56px;
  color: var(--ink-espresso);
  opacity: 0.4;
  line-height: 1;
}
.powfu-disc-num .kind {
  font-family: var(--font-serif-sc);
  font-size: 11px; letter-spacing: var(--ls-spaced); text-transform: uppercase;
  color: var(--ink-espresso-soft);
}
.powfu-disc-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.0;
  color: var(--ink-espresso-deep);
  font-style: italic;
  font-weight: 400;
  margin: 8px 0 12px;
  text-wrap: balance;
}
.powfu-disc-note {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--ink-espresso);
  font-style: italic;
  margin: 0 0 16px;
  max-width: 480px;
}
.powfu-disc-row:nth-child(even) .powfu-disc-note { margin-left: auto; }
.powfu-disc-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.powfu-disc-actions .dot { color: var(--ink-sage-deep); }
.powfu-disc-actions a { font-size: 15px; }

.powfu-disc-row.tone-blood .powfu-disc-num .num { color: var(--ink-blood); opacity: 0.5; }
.powfu-disc-row.tone-sage .powfu-disc-num .num { color: var(--ink-sage-deep); opacity: 0.6; }

/* ============================================================
   TOUR
   ============================================================ */
.powfu-tour { background: var(--ink-cream); }
.powfu-tour-list { list-style: none; padding: 0; margin: 0; }
.powfu-tour-row {
  border-bottom: 1px solid var(--border);
}
.powfu-tour-row:first-child { border-top: 1px solid var(--border); }
.powfu-tour-head {
  width: 100%;
  display: grid;
  grid-template-columns: 110px 1fr 160px 32px;
  gap: 24px;
  align-items: center;
  padding: 22px 16px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-serif);
  transition: background 220ms;
}
.powfu-tour-head:hover { background: var(--ink-parchment); }
.powfu-tour-row.is-open .powfu-tour-head { background: var(--ink-parchment); }
.powfu-tour-date {
  font-family: var(--font-serif-sc);
  font-size: 14px;
  letter-spacing: var(--ls-spaced);
  text-transform: uppercase;
  color: var(--ink-espresso);
}
.powfu-tour-city {
  font-family: var(--font-display);
  font-size: 26px;
  font-style: italic;
  color: var(--ink-espresso-deep);
}
.powfu-tour-status {
  font-family: var(--font-serif-sc);
  font-size: 11px;
  letter-spacing: var(--ls-spaced);
  text-transform: uppercase;
  color: var(--ink-espresso-soft);
  text-align: right;
}
.powfu-tour-row.status-sold-out .powfu-tour-status { color: var(--ink-blood); }
.powfu-tour-row.status-few-left .powfu-tour-status { color: var(--ink-gold); }
.powfu-tour-toggle {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--ink-espresso);
  text-align: center;
  line-height: 1;
}
.powfu-tour-expand {
  padding: 0 16px 32px;
  background: var(--ink-parchment);
  animation: expandIn 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
  overflow: hidden;
}
@keyframes expandIn {
  from { opacity: 0; max-height: 0; }
  to   { opacity: 1; max-height: 400px; }
}
.expand-grid {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 32px;
  align-items: end;
}
.expand-grid small { color: var(--ink-espresso-soft); }
@media (max-width: 700px) {
  .powfu-tour-head { grid-template-columns: 90px 1fr 32px; gap: 12px; padding: 14px 8px; }
  .powfu-tour-status { display: none; }
  .powfu-tour-city { font-size: 20px; }
  .expand-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ============================================================
   PRESS
   ============================================================ */
.powfu-press { background: var(--ink-parchment); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.powfu-press-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
@media (max-width: 700px) { .powfu-press-grid { grid-template-columns: 1fr; } }
.powfu-press-q {
  background: var(--ink-cream);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ink-espresso);
  padding: 32px 32px 24px;
  margin: 0;
  position: relative;
}
.powfu-press-q > svg { position: absolute; top: 16px; right: 18px; opacity: 0.5; }
.powfu-press-q p {
  font-family: var(--font-display);
  font-size: 24px;
  font-style: italic;
  line-height: 1.3;
  color: var(--ink-espresso-deep);
  margin: 0 0 16px;
  text-wrap: balance;
}
.powfu-press-q cite {
  font-family: var(--font-serif-sc);
  font-size: 11px;
  letter-spacing: var(--ls-spaced);
  text-transform: uppercase;
  color: var(--ink-espresso-soft);
  font-style: normal;
}

/* ============================================================
   ARCHIVE
   ============================================================ */
.powfu-archive { background: var(--ink-cream); }
.archive-line {
  list-style: none; padding: 0; margin: 0;
  position: relative;
}
.archive-line::before {
  content: "";
  position: absolute;
  left: 86px; top: 12px; bottom: 12px;
  width: 1px; background: var(--border-strong); opacity: 0.5;
}
.archive-item {
  display: grid;
  grid-template-columns: 70px 32px 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  position: relative;
}
.archive-year {
  font-family: var(--font-serif-sc);
  font-size: 13px;
  letter-spacing: var(--ls-spaced);
  text-transform: uppercase;
  color: var(--ink-espresso-soft);
}
.archive-dot {
  display: flex; align-items: center; justify-content: center;
  background: var(--ink-cream);
  width: 24px; height: 24px;
  z-index: 1;
}
.archive-bullet { color: var(--ink-espresso); font-size: 24px; line-height: 1; }
.archive-text {
  font-family: var(--font-serif);
  font-size: 19px;
  color: var(--ink-bone);
  margin: 0;
}
.archive-item.kind-song .archive-text { font-style: italic; color: var(--ink-espresso-deep); }
.archive-item.kind-tour .archive-text { color: var(--ink-sage-deep); }
.archive-item.kind-label .archive-text { color: var(--ink-espresso); font-weight: 500; }

/* ============================================================
   CROSS-LINKS
   ============================================================ */
/* ============================================================
   POWFU CROSSLINKS — "My Other Projects" + "elsewhere" section.
   Two cards (unworthy + lofi library) sitting on a cream-soft
   backdrop. Each card now has a proper raised-print aesthetic
   with a layered drop-shadow, a hairline border, a cream paper
   gradient, and a hover lift. The section heading + eyebrow are
   also given more artistic treatment so the whole block feels
   like a deliberate "discover more" spread rather than functional
   index tiles.
   ============================================================ */
.powfu-cross {
  background: var(--ink-cream-soft);
  border-top: 1px solid var(--border-faint);
  position: relative;
}
/* —— EYEBROW: "elsewhere" ——
   Quiet plain-text label — espresso-deep small caps, slight letter-
   spacing for breathing room. No pill or box; just typography on
   the cream-soft section background. */
.powfu-cross .section-head .eyebrow {
  display: inline-block;
  margin-bottom: 16px;
  font-family: var(--font-serif-sc, "Cormorant Garamond", serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ink-espresso-deep);
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
/* —— HEADING: "My Other Projects." ——
   Bigger, italic display, with the same chiseled extrusion shadow
   stack used elsewhere on the site so it reads as part of the same
   typographic system. An underline rule pseudo sits beneath. */
.powfu-cross .section-head h2 {
  position: relative;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(48px, 5.8vw, 76px);
  line-height: 1;
  letter-spacing: -0.022em;
  color: var(--ink-espresso-deep);
  margin: 0 0 28px;
  padding-bottom: 16px;
  text-shadow:
    -1px -1px 0 rgba(255, 255, 255, 0.5),
    1px 1px 0 #8a5d44,
    2px 2px 0 #6e4933,
    3px 3px 0 #4A2F22,
    4px 4px 0 #3a2419,
    5px 5px 0 #2B1D15,
    8px 14px 18px rgba(43, 29, 21, 0.35);
}
.powfu-cross .section-head h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: clamp(120px, 12vw, 180px);
  height: 2.5px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--ink-espresso-deep) 18%,
    var(--ink-espresso-deep) 82%,
    transparent 100%
  );
  box-shadow: 0 1px 2px rgba(20, 12, 8, 0.25);
}

.powfu-cross-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Bigger gap so the new card shadows have room to breathe between
     them without the soft outer shadow falloffs visually merging. */
  gap: clamp(28px, 4vw, 56px);
  margin-top: 24px;
}
@media (max-width: 800px) { .powfu-cross-grid { grid-template-columns: 1fr; gap: 36px; } }

/* —— THE CARDS ——
   Each card now uses the same raised-print recipe as the polaroid
   frames on the shows page: cream paper gradient, hairline border,
   layered drop-shadow (close + far) that gives physical depth, and
   a small resting rotation (-0.3° / +0.3°) so the pair looks like
   two hand-mounted boards rather than CSS rectangles. The hover
   lift extends the shadows for a more dramatic rise. */
.powfu-cross-card {
  background: linear-gradient(180deg, #FBF3DE 0%, #F4E9CD 100%);
  border: 1px solid rgba(74, 47, 34, 0.32);
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: var(--font-serif);
  color: inherit;
  text-decoration: none;
  /* Layered shadow stack — close shadow defines the contact edge,
     mid shadow gives volume, wider soft shadow places the card on
     the cream backdrop. The inset top-edge highlight makes the
     paper appear slightly raised. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 2px 4px rgba(43, 29, 21, 0.15),
    0 10px 24px -10px rgba(43, 29, 21, 0.38),
    0 28px 50px -20px rgba(43, 29, 21, 0.35);
  transition:
    transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transform: rotate(-0.3deg);
}
.powfu-cross-card:nth-child(even) { transform: rotate(0.3deg); }

.powfu-cross-card:hover,
.powfu-cross-card:focus-visible {
  transform: translateY(-8px) rotate(0deg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 3px 6px rgba(43, 29, 21, 0.2),
    0 18px 36px -10px rgba(43, 29, 21, 0.5),
    0 44px 72px -24px rgba(43, 29, 21, 0.5);
  outline: none;
}
.powfu-cross-card:focus-visible {
  outline: 2px solid rgba(74, 47, 34, 0.6);
  outline-offset: 4px;
}

.powfu-cross-card .sepia-photo { width: 100%; }
.powfu-cross-meta { padding: 32px 36px 36px; }
/* Eyebrow inside each card ("the wardrobe", "the label") — small
   espresso-deep tag stamp, NO pill background here (cards already
   have plenty of typographic weight; an inline tag is enough). */
.powfu-cross-meta .eyebrow {
  display: inline-block;
  font-family: var(--font-serif-sc, "Cormorant Garamond", serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-sage-deep);
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(74, 47, 34, 0.3);
}
.powfu-cross-meta h3 {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 56px);
  font-style: italic;
  font-weight: 500;
  color: var(--ink-espresso-deep);
  margin: 14px 0 14px;
  letter-spacing: -0.018em;
  /* Subtle chiseled effect on the card title — same recipe as the
     section heading but lighter (smaller shadow stack) since each
     card is its own bounded surface. */
  text-shadow:
    -1px -1px 0 rgba(255, 255, 255, 0.5),
    1px 1px 0 #6e4933,
    2px 2px 0 #4A2F22,
    3px 3px 0 #3a2419,
    4px 7px 10px rgba(43, 29, 21, 0.3);
}
.powfu-cross-meta p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-espresso);
  margin: 0 0 24px;
}
.powfu-cross-arrow {
  font-family: var(--font-serif-sc);
  font-size: 13px;
  letter-spacing: var(--ls-spaced);
  text-transform: uppercase;
  color: var(--ink-espresso-deep);
  display: inline-block;
  border-bottom: 1px solid var(--ink-espresso);
  padding-bottom: 4px;
  font-weight: 700;
  transition: color 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.powfu-cross-card:hover .powfu-cross-arrow {
  color: var(--ink-blood);
  border-bottom-color: var(--ink-blood);
  transform: translateX(4px);
}

/* ============================================================
   POWFU SONG TICKER — horizontal marquee above the footer.
   Continuous left-scrolling loop, pauses on hover. Each entry
   shows small album art + song name + album name and links
   out to its Spotify page. Sized small so it reads as a quiet
   "now playing" strip rather than a hero banner.
   ============================================================ */
.powfu-ticker {
  position: relative;
  background: var(--ink-espresso-deep);
  color: var(--ink-cream);
  border-bottom: 1px solid rgba(255, 248, 232, 0.08);
  overflow: hidden;
  /* Mask the left/right edges so items fade in and out rather
     than appearing/disappearing hard. */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 60px,
    #000 calc(100% - 60px),
    transparent 100%
  );
          mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 60px,
    #000 calc(100% - 60px),
    transparent 100%
  );
}
.powfu-ticker-rail {
  /* Container that the inner track scrolls within. We don't set
     a hard width — the track is `width: max-content` so it goes
     as wide as its (duplicated) children. */
  display: flex;
  padding: 12px 0;
}
.powfu-ticker-track {
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  /* 140s = doubled from the previous 70s. Artist asked for it
     slower so visitors can read each title as it drifts past, not
     just catch a blur of names. With a doubled track (two copies
     of the song list), the -50% loop endpoint still aligns
     seamlessly with the start — only the duration changed. */
  animation: powfuTickerScroll 140s linear infinite;
  /* `will-change` hints the browser to GPU-composite this layer so
     the scroll stays smooth on long pages. */
  will-change: transform;
}
/* NO pause-on-hover: the artist asked for the song ticker to keep
   rotating left at all times. The previous .powfu-ticker:hover
   { animation-play-state: paused } rule has been removed deliberately. */
@keyframes powfuTickerScroll {
  /* The track contains two copies of the song list. When the
     transform reaches -50%, the second copy is exactly where the
     first started, so the loop is seamless. */
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Individual entries */
.powfu-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  font-family: var(--font-serif-sc, "Cormorant Garamond", serif);
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
  flex: 0 0 auto;
  opacity: 0.82;
  transition: opacity 200ms ease;
}
.powfu-ticker-item:hover,
.powfu-ticker-item:focus-visible {
  opacity: 1;
  outline: none;
}
.powfu-ticker-item:focus-visible .powfu-ticker-name {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.powfu-ticker-art {
  width: 24px;
  height: 24px;
  border-radius: 2px;
  display: block;
  flex: 0 0 auto;
  -webkit-user-drag: none;
  user-select: none;
}
.powfu-ticker-name {
  font-style: italic;
  font-family: var(--font-display, "Newsreader", serif);
  font-size: 14px;
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--ink-cream);
}
.powfu-ticker-sep {
  color: rgba(255, 248, 232, 0.4);
  font-size: 12px;
}
.powfu-ticker-album {
  color: rgba(255, 248, 232, 0.62);
  font-size: 11px;
  letter-spacing: 0.14em;
}

@media (max-width: 720px) {
  .powfu-ticker-track { gap: 22px; animation-duration: 55s; }
  .powfu-ticker-art   { width: 20px; height: 20px; }
  .powfu-ticker-name  { font-size: 13px; }
  .powfu-ticker-album { display: none; }
  .powfu-ticker-sep   { display: none; }
}

/* Honor reduced-motion preferences — stop the marquee for users
   who'd find it visually distracting or vestibularly unsettling. */
/* Previously had a @media (prefers-reduced-motion: reduce) block here
   that disabled the song ticker entirely. That block was REMOVED
   deliberately — the ticker is a slow 70s-per-cycle horizontal scroll
   of small text items, well below the threshold for vestibular-motion
   discomfort. Reduced-motion users still see it move; truly motion-
   intense effects (page flips, leaf swirls, hero sigil) keep their
   reduced-motion respects further down in the file. */

/* ============================================================
   FOOTER
   ============================================================ */
.powfu-footer {
  background: var(--ink-espresso-deep);
  color: var(--ink-cream);
  padding: 80px 0 24px;
}
.powfu-footer-inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  margin-bottom: 48px;
}
@media (max-width: 800px) { .powfu-footer-inner { grid-template-columns: 1fr; } }
.powfu-footer-l { display: flex; align-items: center; gap: 16px; }
.powfu-footer-name { font-family: var(--font-display); font-size: 40px; font-style: italic; line-height: 1; }
.powfu-footer-sub { font-family: var(--font-serif-sc); font-size: 11px; letter-spacing: var(--ls-spaced); text-transform: uppercase; opacity: 0.7; margin-top: 4px; }
.powfu-footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.powfu-footer-links .col { display: flex; flex-direction: column; gap: 8px; }
.powfu-footer-links .eyebrow { color: var(--ink-cream-soft); opacity: 0.6; margin-bottom: 6px; }
.powfu-footer-links a {
  color: var(--ink-cream);
  text-decoration: none;
  font-family: var(--font-serif);
  font-size: 16px;
  font-style: italic;
  transition: color 200ms;
}
.powfu-footer-links a:hover { color: #E8B86A; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.powfu-footer-bottom {
  display: flex; justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 248, 232, 0.15);
  color: var(--ink-cream-soft);
  opacity: 0.6;
}
.powfu-footer-bottom small { font-family: var(--font-serif-sc); font-size: 11px; letter-spacing: var(--ls-spaced); text-transform: uppercase; }

/* ============================================================
   POWFU BANNER — sticky top nav for powfu's site.
   Restrained: thin border, parchment background, serif wordmark.
   ============================================================ */
.powfu-banner {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color 240ms ease, box-shadow 240ms ease, background-color 240ms ease;
  /* Explicit overflow: visible so the vine PNG (positioned with top:100%
     below) is allowed to hang past the banner's bottom edge without
     getting clipped. */
  overflow: visible;
}
.powfu-banner.is-scrolled {
  border-bottom-color: var(--border-faint);
  box-shadow: 0 1px 0 var(--border-faint), 0 8px 16px -12px rgba(75, 47, 34, 0.15);
  background: color-mix(in oklab, var(--bg) 96%, transparent);
}

/* —— DECORATIVE VINES ——————————————————————————————————————
   Transparent-PNG strip that straddles the bottom edge of the banner.
   The image's natural aspect ratio is ~15.2:1 (2100×138), so at any
   given viewport width the vine band scales proportionally — leaves
   stay correctly sized relative to the banner instead of stretching.

   Positioning: top is anchored to the banner's bottom edge, but a
   negative translateY shifts the strip UP by ~half its height so the
   leaves overlap the banner — the top portion sits ON the cream bar
   (curling around the wordmark on the left and the social icons on
   the right) while the bottom portion trails into the page beneath.
   This matches the reference photo where the vines aren't dangling
   below the banner — they're growing across it.

   pointer-events:none keeps it from intercepting hover/clicks meant
   for the banner links underneath. Sits at z-index 1 (above the
   banner's blurred background but below modals/cart drawer/etc). */
.powfu-banner-vines {
  position: absolute;
  top: 100%;          /* anchor top edge at banner's bottom */
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  display: block;
  /* Shift the whole strip UP by ~half its own height — proportional
     to the vine artwork, so it stays correct across viewport widths.
     Tuned to 55% (slightly more than half) so a touch more of the
     leaves lands on the banner than below it, matching the example. */
  transform: translateY(-55%);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  z-index: 1;
}
.powfu-banner-inner {
  max-width: 100%; margin: 0;
  padding: 14px 32px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
}

/* —— left: wordmark (image) —— */
.powfu-banner-mark {
  text-decoration: none;
  color: var(--ink-espresso-deep);
  display: inline-flex; align-items: center;
  line-height: 1;
}
.powfu-banner-mark-img {
  /* Sized to read as a wordmark, not a hero image. Height matches
     roughly what the old italic "powfu" text occupied so the rest
     of the banner geometry doesn't shift. */
  height: 38px;
  width: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity 200ms ease, transform 200ms ease;
}
.powfu-banner-mark:hover .powfu-banner-mark-img {
  opacity: 0.85;
  transform: translateY(-0.5px);
}

/* Compact version once the banner has scrolled — keeps the row
   tight without losing the wordmark presence. */
.powfu-banner.is-scrolled .powfu-banner-mark-img {
  height: 32px;
}

@media (max-width: 720px) {
  .powfu-banner-mark-img { height: 30px; }
  .powfu-banner.is-scrolled .powfu-banner-mark-img { height: 26px; }
}

/* —— middle: section anchors —— */
.powfu-banner-nav {
  justify-self: center;
  display: flex;
  gap: 28px;
}
.powfu-banner-nav a {
  font-family: var(--font-serif-sc, var(--font-display));
  font-size: 11px;
  letter-spacing: var(--ls-spaced, 0.18em);
  text-transform: uppercase;
  color: var(--fg-3);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.powfu-banner-nav a:hover {
  color: var(--ink-espresso);
  border-bottom-color: var(--ink-espresso);
}

/* —— right: cross-site links —— */
.powfu-banner-cross {
  display: flex; gap: 18px;
  align-items: center;
}
.powfu-banner-cross-link {
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-espresso);
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.powfu-banner-cross-link:hover {
  color: var(--ink-espresso-deep);
  border-bottom-color: var(--ink-espresso);
}
.powfu-banner-arrow {
  font-style: normal;
  display: inline-block;
  transition: transform 200ms ease;
}
.powfu-banner-cross-link:hover .powfu-banner-arrow {
  transform: translateX(3px);
}

/* —— responsive: hide middle nav on narrower screens —— */
@media (max-width: 900px) {
  .powfu-banner-inner {
    grid-template-columns: auto 1fr;
    padding: 12px 20px;
    gap: 16px;
  }
  .powfu-banner-nav { display: none; }
  .powfu-banner-cross { justify-self: end; gap: 12px; }
  .powfu-banner-cross-link { font-size: 12px; }
}
@media (max-width: 560px) {
  /* Drop the long "Lofi Library Club" label on very small screens. */
  .powfu-banner-cross-link[data-short]::after {
    content: attr(data-short);
    font-style: italic;
    letter-spacing: 0.04em;
  }
  .powfu-banner-cross-link[data-short] span:first-child { display: none; }
}

/* ============================================================
   BANNER — additions for multi-page nav, CTA, sub-row, drawer
   ============================================================ */
.powfu-banner-inner {
  grid-template-columns: auto 1fr auto;
}

/* nav: page-link buttons */
.powfu-banner-link {
  font-family: var(--font-serif-sc, var(--font-display));
  font-size: 11px;
  letter-spacing: var(--ls-spaced, 0.18em);
  text-transform: uppercase;
  color: var(--fg-3);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.powfu-banner-link:hover { color: var(--ink-espresso); }
.powfu-banner-link.is-active {
  color: var(--ink-espresso-deep);
  border-bottom-color: var(--ink-espresso);
}

/* right cluster: CTA + hamburger */
.powfu-banner-right {
  display: flex; align-items: center; gap: 12px;
}
.powfu-banner-menu {
  display: none;
  width: 32px; height: 32px;
  background: transparent; border: 1px solid var(--border);
  border-radius: 4px;
  flex-direction: column; gap: 4px;
  align-items: center; justify-content: center;
  cursor: pointer;
}
.powfu-banner-menu span {
  display: block; width: 14px; height: 1.4px;
  background: var(--ink-espresso);
}

/* sub row: socials left, cross-site links right */
.powfu-banner-sub {
  border-top: 1px solid var(--border-faint);
  background: color-mix(in oklab, var(--bg-panel) 60%, transparent);
}
.powfu-banner-sub-inner {
  max-width: 1320px; margin: 0 auto;
  padding: 8px 28px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px;
}
.powfu-banner-sub-l, .powfu-banner-sub-r {
  display: flex; align-items: center; gap: 18px;
}
.powfu-banner-sub .powfu-banner-cross-link {
  font-size: 12px;
  padding: 4px 2px;
}
.powfu-banner-cross-link.is-merch {
  background: var(--bg-panel-deep);
  padding: 4px 10px;
  border-radius: 999px;
  font-style: normal;
  font-family: var(--font-serif-sc);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.18em;
}
.powfu-banner-cross-link.is-merch:hover {
  background: var(--ink-espresso);
  color: var(--ink-cream);
  border-bottom-color: transparent;
}

/* mobile drawer */
.powfu-banner-drawer {
  display: none;
  flex-direction: column;
  padding: 12px 20px 18px;
  border-top: 1px solid var(--border-faint);
  background: var(--bg);
}
.powfu-banner-drawer-link {
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink-espresso);
  padding: 10px 0;
  border-bottom: 1px dashed var(--border-faint);
}
.powfu-banner-drawer-link.is-active { font-style: italic; color: var(--ink-espresso-deep); }
.powfu-banner-drawer-divider { height: 12px; }

@media (max-width: 900px) {
  .powfu-banner-nav { display: none; }
  .powfu-banner-menu { display: inline-flex; }
  .powfu-banner-drawer { display: flex; }
  .powfu-banner-sub-l { display: none; }
}

/* ============================================================
   TOUR STRIP — slim announcement bar
   ============================================================ */
.tour-strip {
  background: var(--ink-espresso-deep);
  color: var(--ink-cream);
}
.tour-strip-inner {
  max-width: 1320px; margin: 0 auto;
  padding: 10px 28px;
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-display);
  font-size: 13px;
}
.tour-strip-eyebrow {
  font-family: var(--font-serif-sc);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.7;
}
.tour-strip-text { flex: 1; opacity: 0.92; }
.tour-strip-text em { font-style: italic; color: #E8B86A; }
.tour-strip-cta {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink-cream);
  font-family: var(--font-serif-sc);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.tour-strip-close {
  background: transparent; border: none; color: var(--ink-cream);
  font-size: 18px; cursor: pointer; opacity: 0.5;
  width: 24px; height: 24px; line-height: 1;
}
.tour-strip-close:hover { opacity: 1; }

@media (max-width: 720px) {
  .tour-strip-eyebrow { display: none; }
  .tour-strip-inner { padding: 8px 16px; font-size: 12px; }
}

/* ============================================================
   PAGE TRANSITION — fade in/out between internal pages
   ============================================================ */
.page-fader { transition: opacity 220ms ease; }
.page-fader.phase-out  { opacity: 0; }
.page-fader.phase-in   { opacity: 1; }
.page-fader.phase-idle { opacity: 1; }

/* ============================================================
   PAGE HEADER (music / tour / about / press)
   ============================================================ */
.page-header {
  position: relative;
  min-height: 360px;
  display: flex; align-items: flex-end;
  padding: 80px 0 64px;
  overflow: hidden;
  isolation: isolate;
}
.page-header-bg {
  position: absolute; inset: 0; z-index: 0;
}
.page-header-bg .nature-photo,
.page-header-bg .nature-photo img {
  width: 100%; height: 100%; object-fit: cover;
}
.page-header-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(43,29,21,0.05) 0%, rgba(255,248,232,0.0) 30%, var(--bg) 100%);
  pointer-events: none;
}
.page-header-inner {
  position: relative; z-index: 2;
  color: var(--ink-cream);
  text-shadow: 0 1px 12px rgba(43,29,21,0.6);
}
.page-header-eyebrow {
  color: rgba(255,248,232,0.85);
  letter-spacing: 0.22em;
}
.page-header-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1;
  margin: 14px 0 12px;
  color: var(--ink-cream);
}
.page-header-sub {
  font-family: var(--font-display);
  font-size: 18px;
  font-style: italic;
  opacity: 0.85;
  max-width: 600px;
  color: var(--ink-cream);
}
.page-header-fade {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(180deg, transparent, var(--bg));
  z-index: 1;
}

/* —— Music-page hero override ——
   On every other page, the hero fades into cream (the default page
   background). But the music page's hero is immediately followed by
   the wood-textured .myrecs section, whose top edge is now a dark
   espresso gradient (.myrecs::before — see below). If the hero's
   bottom fade still ended in cream, there'd be a visible cream band
   between the photo and the dark blend strip. So when a .myrecs is
   the next sibling, the fade is overridden to end in deep espresso
   instead, blending continuously into the wood's dark top edge.
   Uses :has() — supported in every modern browser (Chrome 105+,
   Safari 15.4+, FF 121+). On older browsers the fade still ends
   in cream and the seam is slightly more visible, but the wood's
   top blend is so dark that the contrast is minimal. */
.page-header:has(+ .myrecs) .page-header-fade {
  /* —— RESTRAINED FADE ——
     The wood section now overlaps the bottom 240px of this hero
     (margin-top: -240px on .myrecs, with a mask-image fade on the
     wood pseudo so the wood emerges into existence over that
     overlap region). That means the visible bottom portion of the
     hero photo already smoothly merges into wood through the
     transparency of the wood pseudo — we don't need an aggressive
     dark fade on the hero itself any more. A subtle vertical
     gradient still helps the hero photo dim toward its bottom edge
     for atmospheric depth, but it stays very soft. */
  height: 120px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(43, 29, 21, 0.10) 60%,
    rgba(28, 18, 12, 0.22) 100%
  );
}

/* ============================================================
   HOME: LATEST RELEASE
   ============================================================ */
.powfu-latest { background: var(--bg-elevated); }
.powfu-latest-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 1.4fr;
  gap: 64px;
  align-items: center;
}
.powfu-latest-meta { display: flex; flex-direction: column; gap: 14px; }
.powfu-latest-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  color: var(--ink-espresso-deep);
  margin: 0;
}
.powfu-latest-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

@media (max-width: 760px) {
  .powfu-latest-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================
   HOME: QUICK STATS
   ============================================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  list-style: none; padding: 0; margin: 0;
}
.stat {
  text-align: center;
  padding: 32px 16px;
  border: 1px solid var(--border-faint);
  border-radius: 4px;
  background: var(--bg);
}
.stat-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1;
  color: var(--ink-espresso-deep);
}
.stat-label {
  font-family: var(--font-serif-sc);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: 10px;
}
.stat-sub {
  font-family: var(--font-display);
  font-size: 12px;
  font-style: italic;
  color: var(--fg-3);
  opacity: 0.8;
  margin-top: 4px;
}

@media (max-width: 760px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   STREAMING + SOCIAL ROWS
   ============================================================ */
.streaming-row {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 12px 0;
}
.streaming-btn {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--bg-panel);
  color: var(--ink-espresso-deep);
  border: 1px solid var(--border-faint);
  font-family: var(--font-serif-sc);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background-color 160ms ease, transform 160ms ease, color 160ms ease;
}
.streaming-btn:hover {
  background: var(--ink-espresso-deep);
  color: var(--ink-cream);
  transform: translateY(-1px);
}
.streaming-row.is-compact .streaming-btn { padding: 7px 12px; font-size: 10px; gap: 6px; }

.streaming-btn.s-spotify svg    { color: #1DB954; }
.streaming-btn.s-appleMusic svg { color: #FA243C; }
.streaming-btn.s-youtube svg    { color: #FF0000; }
.streaming-btn.s-soundcloud svg { color: #FF7700; }
.streaming-btn:hover svg        { color: currentColor; }

/* social row */
.social-row { display: flex; gap: 12px; align-items: center; }
.social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  color: var(--fg-3);
  background: transparent;
  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
}
.social-link:hover {
  color: var(--ink-espresso-deep);
  background: var(--bg-panel);
  transform: translateY(-1px);
}
.social-row:not(.is-mono) .social-link.s-instagram:hover { color: #E1306C; }
.social-row:not(.is-mono) .social-link.s-tiktok:hover    { color: #010101; }
.social-row:not(.is-mono) .social-link.s-twitter:hover   { color: #000; }
.social-row:not(.is-mono) .social-link.s-youtube:hover   { color: #FF0000; }
.social-row:not(.is-mono) .social-link.s-facebook:hover  { color: #1877F2; }

/* ============================================================
   MUSIC PAGE — death bed story
   ============================================================ */
.dbs { background: var(--bg-elevated); }
.dbs-grid {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px;
  align-items: center;
}
.dbs-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.05;
  margin: 6px 0 16px;
  color: var(--ink-espresso-deep);
}
.dbs-bullets {
  list-style: none; padding: 0; margin: 16px 0;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--fg-2);
}
.dbs-bullets li {
  padding: 6px 0;
  border-bottom: 1px dashed var(--border-faint);
}
.dbs-bullets li:last-child { border-bottom: none; }
.dbs-art { position: relative; }
.dbs-art-cert {
  position: absolute; right: -8px; bottom: -8px;
  width: 110px; height: 110px;
  background: var(--ink-blood); color: var(--ink-cream);
  border-radius: 50%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-style: italic;
  box-shadow: 0 12px 30px rgba(43,29,21,0.3);
  transform: rotate(-8deg);
}
.dbs-art-cert span {
  font-size: 36px; font-weight: 600; line-height: 1;
}
.dbs-art-cert small {
  font-family: var(--font-serif-sc);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top: 4px;
  opacity: 0.9;
  font-style: normal;
}

@media (max-width: 800px) {
  .dbs-grid { grid-template-columns: 1fr; gap: 40px; }
  .dbs-art-cert { right: 16px; bottom: 16px; width: 90px; height: 90px; }
}

/* ============================================================
   MUSIC PAGE — albums list
   ============================================================ */
.albums {
  list-style: none; padding: 0; margin: 32px 0 0;
  display: flex; flex-direction: column;
  gap: 48px;
  counter-reset: album-counter;
}
.album {
  display: grid;
  grid-template-columns: 60px 220px 1fr;
  gap: 36px;
  align-items: start;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--border-faint);
}
.album:last-child { border-bottom: none; }
.album-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 32px;
  color: var(--fg-3);
  opacity: 0.5;
  padding-top: 8px;
}
.album-cover { width: 100%; }
.album-tag {
  display: flex; gap: 12px; align-items: center;
  margin-bottom: 8px;
}
.album-label {
  font-family: var(--font-serif-sc);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding-left: 12px;
  border-left: 1px solid var(--border-faint);
}
.album-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.05;
  margin: 0 0 12px;
  color: var(--ink-espresso-deep);
}
.album-note {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0 0 14px;
}
.album-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-serif-sc);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-espresso);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 160ms ease;
}
.album-link:hover { color: var(--ink-espresso-deep); }

@media (max-width: 800px) {
  .album {
    grid-template-columns: 40px 1fr;
    gap: 20px;
  }
  .album-cover { grid-column: 2; }
}

/* ============================================================
   MUSIC PAGE — EPs list
   ============================================================ */
.eps {
  list-style: none; padding: 0; margin: 24px 0 0;
}
.ep {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px dashed var(--border-faint);
  align-items: baseline;
}
.ep:last-child { border-bottom: none; }
.ep-year {
  font-family: var(--font-serif-sc);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.ep h4 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  margin: 0 0 4px;
  color: var(--ink-espresso-deep);
}
.ep-note {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--fg-3);
  margin: 0;
  font-style: italic;
}

/* ============================================================
   MUSIC PAGE — singles list
   ============================================================ */
.singles { list-style: none; padding: 0; margin: 24px 0 0; }
.single {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border-faint);
}
.single:last-child { border-bottom: none; }
.single-year {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 26px;
  color: var(--fg-3);
}
.single h4 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  margin: 0 0 4px;
  color: var(--ink-espresso-deep);
}
.single-with {
  font-family: var(--font-serif-sc);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-sage-deep);
  margin-bottom: 6px;
}
.single-note {
  font-family: var(--font-display);
  font-size: 14px;
  font-style: italic;
  color: var(--fg-3);
  margin: 0;
}

/* ============================================================
   MUSIC PAGE — features (inner circle)
   ============================================================ */
.features { list-style: none; padding: 0; margin: 24px 0 0; }
.feature {
  padding: 20px 0;
  border-bottom: 1px dashed var(--border-faint);
}
.feature:last-child { border-bottom: none; }
.feature-head {
  display: flex; gap: 14px; align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.feature h4 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  margin: 0;
  color: var(--ink-espresso-deep);
}
.feature-role {
  font-family: var(--font-serif-sc);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.feature-notable {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--fg-2);
  margin: 0;
  font-style: italic;
}

/* ============================================================
   TOUR PAGE — upcoming dates
   ============================================================ */
.dates { list-style: none; padding: 0; margin: 32px 0 0; }
.date {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--border-faint);
  transition: background-color 160ms ease;
}
.date:hover { background: var(--bg-elevated); }
.date-day {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--ink-espresso-deep);
}
.date-city {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  color: var(--ink-espresso-deep);
}
.date-venue {
  font-family: var(--font-display);
  font-size: 14px;
  font-style: italic;
  color: var(--fg-3);
  margin-top: 2px;
}
.date-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-serif-sc);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-espresso-deep);
  text-decoration: none;
  border: 1px solid var(--ink-espresso);
  padding: 8px 14px;
  border-radius: 999px;
  transition: background-color 160ms ease, color 160ms ease;
}
.date-cta:hover {
  background: var(--ink-espresso-deep);
  color: var(--ink-cream);
}

.past-dates {
  list-style: none; padding: 0; margin: 18px 0 0;
}
.past-dates li {
  padding: 10px 0;
  border-bottom: 1px dashed var(--border-faint);
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--fg-2);
  display: flex; gap: 12px; align-items: baseline;
  flex-wrap: wrap;
}
.past-month {
  font-family: var(--font-serif-sc);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-3);
  min-width: 90px;
}
.past-city { color: var(--ink-espresso-deep); font-weight: 500; }
.past-venue { color: var(--fg-3); font-style: italic; }

.tour-links-wrap {
  display: flex; gap: 22px; flex-wrap: wrap;
  justify-content: center;
}

/* ============================================================
   TOUR LINKS — 3D buttons.
   The three CTAs at the bottom of the shows page (Bandsintown,
   Songkick, tour merch) get scoped styling here so the global
   .btn-ink / .btn-ghost classes used elsewhere on the site stay
   untouched. The effect is a raised-relief button with stacked
   solid box-shadows building an extruded "side wall" beneath each
   button, an inset top highlight (light catching the top edge),
   and a soft cast shadow grounding the button on its surface.
   Hover lifts the button 2px (extending the visible side wall),
   active depresses it 2px (compressing the side wall) so the
   pressed/released feedback feels tactile.
   ============================================================ */

/* Shared base — everything that applies to both .btn-ink and
   .btn-ghost when scoped inside .tour-links. */
.tour-links .btn-ink,
.tour-links .btn-ghost {
  padding: 18px 36px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.01em;
  border-radius: 6px;
  min-width: 220px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  /* Transitions need to cover transform + box-shadow + background so
     hover/active both animate together. The cubic-bezier on transform
     gives a snappier rise/fall than ease. */
  transition:
    transform 220ms cubic-bezier(0.2, 0.9, 0.3, 1),
    box-shadow 220ms ease,
    background 220ms ease;
  /* Keep the icon (the external-link svg) optically centered with
     the text baseline. */
  line-height: 1;
  white-space: nowrap;
}

/* —— DARK BUTTON (Bandsintown) ——
   Espresso-toned 3D button. Background is a top-to-bottom gradient
   so the face itself has a slight curve / sheen. Five stacked
   solid box-shadows immediately below the button build the visible
   side wall of the extrusion — 1px steps, progressively darker
   (#4A2F22 → #1d130d) so the depth has natural fall-off. A wider
   blurred cast shadow at the bottom (0 8px 18px) grounds it. */
.tour-links .btn-ink {
  background: linear-gradient(180deg, #4A2F22 0%, #2B1D15 100%);
  color: var(--ink-cream);
  border: 1px solid #1d130d;
  box-shadow:
    /* top edge highlight — interior light catching the upper rim */
    inset 0 1px 0 rgba(255, 248, 232, 0.22),
    /* extruded side wall — 5 stepped solid shadows */
    0 1px 0 #4A2F22,
    0 2px 0 #3a2419,
    0 3px 0 #2B1D15,
    0 4px 0 #1d130d,
    0 5px 0 #0a0604,
    /* grounded cast shadow */
    0 8px 18px -3px rgba(20, 12, 8, 0.55);
}
.tour-links .btn-ink:hover {
  background: linear-gradient(180deg, #5a3a2a 0%, #36241b 100%);
  /* lift +2px and grow the side wall by 2 more stops so the button
     appears to rise toward the viewer */
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 232, 0.3),
    0 1px 0 #4A2F22,
    0 2px 0 #3a2419,
    0 3px 0 #2B1D15,
    0 4px 0 #1d130d,
    0 5px 0 #0a0604,
    0 6px 0 #0a0604,
    0 7px 0 #0a0604,
    0 14px 28px -4px rgba(20, 12, 8, 0.65);
}
.tour-links .btn-ink:focus-visible {
  outline: 2px solid rgba(255, 220, 140, 0.85);
  outline-offset: 4px;
}
.tour-links .btn-ink:active {
  /* depress +2px and compress the side wall — feels like pressing
     a real key down */
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 232, 0.15),
    0 1px 0 #4A2F22,
    0 2px 0 #3a2419,
    0 3px 0 #1d130d,
    0 4px 8px -2px rgba(20, 12, 8, 0.45);
}

/* —— CREAM BUTTON (Songkick, tour merch) ——
   Cream-paper 3D button. Same recipe as the dark one but with cream
   surface tones and a brown extruded side wall (rgba on the espresso
   ink color so it looks like the same wood/paper depth as the rest
   of the site). The inset top highlight is much brighter here
   because the surface is light, so a white-95 highlight reads as
   sheen on warm paper. */
.tour-links .btn-ghost {
  background: linear-gradient(180deg, #FBF3DE 0%, #F4E9CD 100%);
  color: var(--ink-espresso-deep);
  border: 1px solid rgba(74, 47, 34, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 1px 0 rgba(74, 47, 34, 0.48),
    0 2px 0 rgba(74, 47, 34, 0.40),
    0 3px 0 rgba(74, 47, 34, 0.32),
    0 4px 0 rgba(74, 47, 34, 0.26),
    0 5px 0 rgba(74, 47, 34, 0.20),
    0 8px 18px -3px rgba(43, 29, 21, 0.42);
}
.tour-links .btn-ghost:hover {
  background: linear-gradient(180deg, #FFFAE5 0%, #FBF3DE 100%);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 0 rgba(74, 47, 34, 0.48),
    0 2px 0 rgba(74, 47, 34, 0.40),
    0 3px 0 rgba(74, 47, 34, 0.32),
    0 4px 0 rgba(74, 47, 34, 0.26),
    0 5px 0 rgba(74, 47, 34, 0.22),
    0 6px 0 rgba(74, 47, 34, 0.18),
    0 7px 0 rgba(74, 47, 34, 0.14),
    0 14px 28px -4px rgba(43, 29, 21, 0.5);
}
.tour-links .btn-ghost:focus-visible {
  outline: 2px solid rgba(74, 47, 34, 0.85);
  outline-offset: 4px;
}
.tour-links .btn-ghost:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 1px 0 rgba(74, 47, 34, 0.48),
    0 2px 0 rgba(74, 47, 34, 0.36),
    0 3px 0 rgba(74, 47, 34, 0.24),
    0 4px 8px -2px rgba(43, 29, 21, 0.3);
}

/* Vertical spacing around the tour-links section so the 3D buttons
   have breathing room — the lifted shadows need clearance above
   and below or they get clipped by adjacent content. */
.tour-links { padding: 64px 0 80px; }

/* Mobile: tighten min-width so they don't force horizontal overflow,
   stack vertically and stretch to fill the wrap on narrow screens. */
@media (max-width: 600px) {
  .tour-links-wrap { gap: 16px; }
  .tour-links .btn-ink,
  .tour-links .btn-ghost {
    min-width: 0;
    width: 100%;
    padding: 16px 24px;
    font-size: 16px;
  }
}

@media (max-width: 600px) {
  .date { grid-template-columns: 90px 1fr; gap: 14px; }
  .date-cta { grid-column: 2; justify-self: start; margin-top: 6px; }
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-h {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  margin: 40px 0 16px;
  color: var(--ink-espresso-deep);
}

/* facts dl */
.facts { margin: 24px 0 0; }
.facts-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 24px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--border-faint);
}
.facts-row dt {
  font-family: var(--font-serif-sc);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding-top: 2px;
}
.facts-row dd {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ink-espresso-deep);
  margin: 0;
}

/* charts list */
.charts { list-style: none; padding: 0; margin: 24px 0 0; }
.chart-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: baseline;
  padding: 10px 0;
}
.chart-region {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--fg-2);
}
.chart-leader {
  border-bottom: 1px dotted var(--border);
  height: 1px;
  align-self: end;
  margin-bottom: 4px;
}
.chart-peak {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 17px;
  color: var(--ink-espresso-deep);
}

/* certifications grid */
.certs {
  list-style: none; padding: 0; margin: 16px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.cert {
  padding: 14px 16px;
  border: 1px solid var(--border-faint);
  border-radius: 4px;
  background: var(--bg-panel);
}
.cert strong {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-espresso-deep);
  font-weight: 600;
}
.cert span {
  display: block;
  font-family: var(--font-serif-sc);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: 4px;
}

/* awards list */
.awards { list-style: none; padding: 0; margin: 24px 0 0; }
.award {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-faint);
}
.award-year {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--fg-3);
}
.award-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  color: var(--ink-espresso-deep);
}
.award-org {
  font-family: var(--font-serif-sc);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: 3px;
}
.award-result {
  font-family: var(--font-serif-sc);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.award.r-won .award-result {
  background: var(--ink-gold);
  color: var(--ink-espresso-deep);
}
.award.r-nominated .award-result {
  background: var(--bg-panel-deep);
  color: var(--fg-3);
}

.about-socials { margin-top: 18px; }

/* ============================================================
   PRESS PAGE
   ============================================================ */
.press { list-style: none; padding: 0; margin: 24px 0 0; }
.press-item {
  padding: 22px 0;
  border-bottom: 1px solid var(--border-faint);
}
.press-meta {
  display: flex; gap: 12px; align-items: baseline;
  font-family: var(--font-serif-sc);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.press-source { color: var(--ink-espresso-deep); font-weight: 600; }
.press-date   { color: var(--fg-3); padding-left: 12px; border-left: 1px solid var(--border-faint); }
.press-title {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 2vw, 24px);
  color: var(--ink-espresso-deep);
  text-decoration: none;
  line-height: 1.3;
  transition: color 160ms ease;
}
.press-title:hover { color: var(--ink-blood); }
.press-foot { margin-top: 40px; color: var(--fg-3); }

/* ============================================================
   FOOTER (multi-column) — overrides for the new layout
   ============================================================ */
.powfu-footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  padding: 80px 0 40px;
  align-items: start;
}
.powfu-footer-col h4 {
  font-family: var(--font-serif-sc);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-cream);
  opacity: 0.7;
  margin: 0 0 16px;
}
.powfu-footer-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 36px;
  color: var(--ink-cream);
  margin: 0 0 8px;
}
.powfu-footer-l .social-link {
  color: rgba(255,248,232,0.6);
  border: 1px solid rgba(255,248,232,0.15);
}
.powfu-footer-l .social-link:hover {
  color: var(--ink-cream);
  background: rgba(255,248,232,0.1);
}
.powfu-footer-links {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 8px;
}
.powfu-footer-links li { margin: 0; }
.powfu-footer-links a {
  font-family: var(--font-display);
  font-size: 14px;
  color: rgba(255,248,232,0.7);
  text-decoration: none;
  cursor: pointer;
}

@media (max-width: 760px) {
  .powfu-footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ============================================================
   DROP CAP (used on About + Intro)
   ============================================================ */
.drop-cap::first-letter {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 4.4em;
  float: left;
  line-height: 0.85;
  padding-right: 12px;
  padding-top: 6px;
  color: var(--ink-espresso-deep);
}

/* ============================================================
   wrap / section utility (in case site.css doesn't cover all)
   ============================================================ */
.wrap         { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.wrap-narrow  { max-width: 760px;  margin: 0 auto; padding: 0 28px; }
.section      { padding: 96px 0; }
.section-sm   { padding: 56px 0; }

/* shared button helpers */
.btn-ink {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink-espresso-deep);
  color: var(--ink-cream);
  font-family: var(--font-serif-sc);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: 999px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease;
}
.btn-ink:hover { background: var(--ink-bone); transform: translateY(-1px); }
.btn-ink.wide { padding: 14px 28px; }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
  color: var(--ink-espresso-deep);
  font-family: var(--font-serif-sc);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid var(--ink-espresso);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.btn-ghost:hover {
  background: var(--ink-espresso-deep);
  color: var(--ink-cream);
}

/* ============================================================
   CART BUTTON (banner sub-row)
   ============================================================ */
.powfu-cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 999px;
  background: var(--bg-panel-deep);
  border: 1px solid var(--border-faint);
  color: var(--ink-espresso-deep);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.powfu-cart-btn:hover {
  background: var(--ink-espresso-deep);
  color: var(--ink-cream);
  transform: translateY(-1px);
}
.powfu-cart-btn.has-items {
  background: var(--ink-espresso-deep);
  color: var(--ink-cream);
}
.powfu-cart-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--ink-blood, #8C2F2F);
  color: var(--ink-cream);
  font-family: var(--font-serif-sc);
  font-size: 9px;
  font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(43,29,21,0.3);
}

/* ============================================================
   SHOW REEL — seamless past-shows footage strip
   ============================================================ */
/* ============================================================
/* ============================================================
   SHOW REEL — auto-rotating polaroid carousel.
   The track contains two copies of SHOW_VIDEOS back-to-back and
   slides leftward continuously via a CSS keyframe animation
   (showReelScroll, 80s linear infinite). The translateX endpoint
   is -50%, which lines up the duplicate's frame-1 exactly where
   the original's frame-1 was, so the restart of the loop is
   visually seamless. Hovering anywhere over the reel pauses the
   animation so visitors can read a title or click into a clip
   without it sliding away.
   ============================================================ */
.show-reel-section { padding: 64px 0 32px; background: transparent; }
.show-reel {
  position: relative;
  margin: 32px 0 0;
  padding: 8px 0 40px;
  /* Mask the left + right edges so frames fade in/out at the
     boundaries instead of clipping mid-frame against the section
     edge. Same recipe used elsewhere on the site for marquee-style
     scrolling content. */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

/* —— THE AUTO-SCROLLING TRACK ——
   The track contains TWO copies of SHOW_VIDEOS back-to-back. The
   keyframe animation translates the track from translateX(0) to
   translateX(-50%), which puts frame-1-of-the-duplicate exactly
   where frame-1-of-the-original was — so the loop restart is
   visually invisible. Duration 80s gives a calm, gentle drift to
   the left; the artist asked for "slowly rotating." On hover the
   animation pauses so visitors can examine a frame before clicking
   to open the lightbox. */
.show-reel-track {
  display: flex;
  gap: 32px;
  padding: 6px 0 12px;
  width: max-content;            /* let the doubled content sprawl freely */
  animation: showReelScroll 80s linear infinite;
  will-change: transform;
}
.show-reel:hover .show-reel-track,
.show-reel:focus-within .show-reel-track {
  animation-play-state: paused;
}
@keyframes showReelScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  /* For users who've asked the OS to limit motion, swap the
     continuous translate animation for a native horizontal scroll
     container instead — the reel still works (drag/swipe), just
     without the auto-rotation. */
  .show-reel {
    -webkit-mask-image: none;
            mask-image: none;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .show-reel::-webkit-scrollbar { display: none; }
  .show-reel-track { animation: none; width: max-content; }
}

/* —— THE POLAROID FRAME ——
   Uniform size for every video regardless of its source aspect.
   Cream paper with a slightly textured gradient, thicker bottom
   matte to hold the title, and a layered drop-shadow that reads
   as "physical print pinned to a wall." Hover lifts the frame and
   adds a tiny rotation tilt — like flipping through a stack of
   photos. */
.show-reel-frame {
  /* Reset native <button> styling so it behaves like a styled link. */
  flex: 0 0 auto;
  margin: 0;
  padding: 14px 14px 0;             /* matte border: 14px around the photo, the title gets its own padding inside .show-reel-title */
  border: 0;
  background:
    /* subtle paper warmth: warm cream at top fading to slightly
       cooler at bottom, like real photographic paper aged in a
       drawer */
    linear-gradient(180deg, #FBF3DE 0%, #F4E9CD 100%);
  width: 240px;                     /* uniform width on desktop */
  text-align: left;
  cursor: pointer;
  border-radius: 3px;
  scroll-snap-align: start;
  box-shadow:
    /* outer drop-shadow (the print on the wall) */
    0 14px 30px -14px rgba(43, 29, 21, 0.45),
    0 4px 10px -3px rgba(43, 29, 21, 0.22),
    /* inset hairline so the cream paper has a defined edge */
    inset 0 0 0 1px rgba(74, 47, 34, 0.18);
  transition:
    transform 320ms cubic-bezier(0.32, 0.7, 0.4, 1),
    box-shadow 320ms ease;
  display: flex;
  flex-direction: column;
  /* a gentle resting rotation gives the print stack a "casually pinned"
     feel rather than a mechanically aligned grid. Reset on hover. */
  transform: rotate(-0.4deg);
}
.show-reel-frame:nth-child(even) { transform: rotate(0.5deg); }
.show-reel-frame:nth-child(3n)   { transform: rotate(-0.3deg); }

.show-reel-frame:hover,
.show-reel-frame:focus-visible {
  transform: translateY(-6px) rotate(0deg);
  box-shadow:
    0 24px 44px -16px rgba(43, 29, 21, 0.55),
    0 8px 18px -4px rgba(43, 29, 21, 0.3),
    inset 0 0 0 1px rgba(74, 47, 34, 0.24);
  outline: none;
}
.show-reel-frame:focus-visible {
  outline: 2px solid rgba(74, 47, 34, 0.6);
  outline-offset: 4px;
}

/* —— THE PHOTO WINDOW ——
   Uniform 4:5 portrait aspect — a forgiving ratio that suits both
   vertical phone clips and horizontal pro footage. object-fit:cover
   lets the poster fill the window completely; intelligent crop is
   acceptable here because the modal still plays the full video.
   The window has its own deeper inset shadow so it reads as a print
   inside a paper frame, not a flat tile. */
.show-reel-frame-window {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #0d0805;
  border-radius: 1px;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.25),
    inset 0 2px 10px rgba(0, 0, 0, 0.35);
}
.show-reel-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* small warm grade matches the rest of the site's photo palette */
  filter: contrast(1.04) saturate(1.05) brightness(0.97);
  user-select: none;
  -webkit-user-drag: none;
}

/* —— PLAY-TRIANGLE BADGE ——
   Sits dead center on the poster. Larger and brighter than the old
   one because the frames are bigger now. Reads against both light
   and dark posters thanks to the dark translucent backdrop + blur. */
.show-reel-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 14, 9, 0.62);
  border-radius: 50%;
  color: #fff;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  pointer-events: none;
  transition: transform 240ms ease, background-color 240ms ease;
  padding-left: 3px;            /* optical centering of the triangle */
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 8px 20px -6px rgba(0, 0, 0, 0.5);
}
.show-reel-frame:hover .show-reel-play,
.show-reel-frame:focus-visible .show-reel-play {
  transform: translate(-50%, -50%) scale(1.1);
  background: rgba(20, 14, 9, 0.82);
}

/* —— TITLE STRIP ——
   The lower matte of the polaroid carries a hand-labeled title. Set
   in the display serif italic, slightly tracked-out, centered like
   a real handwritten label. The matte's height comes from this
   element's padding plus its line-height — the frame above just
   provides the matte's top/left/right via padding. */
.show-reel-title {
  display: block;
  padding: 16px 6px 18px;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--ink-espresso-deep);
  margin: 0;
  /* When a title accidentally is long, it wraps to two lines instead
     of overflowing; the polaroid frame stretches to accommodate. */
  word-break: break-word;
}

/* —— MOBILE TUNING ——
   Smaller frames + tighter padding on phones. Auto-scroll continues
   at the same rate (CSS animation is viewport-agnostic) but each
   frame takes up proportionally more of the screen so the rotation
   feels naturally slower in perceived terms. */
@media (max-width: 600px) {
  .show-reel-track { gap: 20px; padding: 6px 0 12px; }
  .show-reel-frame {
    width: 200px;
    padding: 10px 10px 0;
  }
  .show-reel-title {
    font-size: 15px;
    padding: 12px 4px 14px;
  }
  .show-reel-play { width: 46px; height: 46px; }
}

/* —— SHOW VIDEO LIGHTBOX ————————————————————————————————————
   Opens when a thumbnail is clicked. position:fixed + flex centering
   means the player sits in the middle of the VIEWPORT, not the page —
   no matter how far the visitor has scrolled, the video pops up in
   their actual view. Background is darkened + blurred so the page
   underneath recedes. */
.show-video-modal {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(8, 5, 3, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  animation: showVideoFade 240ms ease-out;
  cursor: zoom-out;
  overflow: auto;
}
@keyframes showVideoFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.show-video-modal-video {
  display: block;
  cursor: default;
  border-radius: 4px;
  box-shadow: 0 50px 100px -30px rgba(0, 0, 0, 0.75);
  background: #000;
  animation: showVideoScale 320ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
.show-video-modal-video.orientation-vertical {
  max-height: 92vh;
  max-width: 92vw;
  width: auto;
  height: auto;
}
.show-video-modal-video.orientation-horizontal {
  max-width: 96vw;
  max-height: 88vh;
  width: auto;
  height: auto;
}
@keyframes showVideoScale {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
.show-video-modal-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 180ms ease, transform 180ms ease;
  z-index: 2;
}
.show-video-modal-close:hover {
  background: rgba(255, 255, 255, 0.24);
  transform: scale(1.05);
}
@media (max-width: 640px) {
  .show-video-modal { padding: 12px; }
  .show-video-modal-close { top: 10px; right: 12px; width: 32px; height: 32px; font-size: 19px; }
}

/* ============================================================
   INTERACTIVE CALENDAR — flippable monthly almanac
   ============================================================ */
.show-cal-section { padding: 64px 0; }

.show-cal {
  position: relative;
  margin: 32px 0 0;
  padding: 36px 32px 28px;
  /* wooden panel background, softened with a cream wash so the
     dark text and dashed lines stay readable on top of the grain */
  background:
    linear-gradient(rgba(255, 248, 232, 0.20), rgba(255, 248, 232, 0.20)),
    url('assets/calendar-wood.jpg') center/cover no-repeat;
  border: 1px solid rgba(74, 47, 34, 0.45);
  border-radius: 6px;
  box-shadow:
    /* subtle inner shadow gives the wood a "framed-in" depth */
    inset 0 0 0 1px rgba(255, 248, 232, 0.25),
    inset 0 24px 48px -36px rgba(43, 29, 21, 0.35),
    inset 0 -24px 48px -36px rgba(43, 29, 21, 0.35),
    0 1px 0 var(--border-faint),
    0 24px 48px -28px rgba(75, 47, 34, 0.45);
}

/* dashed lines inside the calendar — the original cream ones get
   lost on wood, so darken them to a translucent espresso */
.show-cal .show-cal-head {
  border-bottom-color: rgba(74, 47, 34, 0.35);
}

/* tiny corner ornaments */
.show-cal-orn { position: absolute; opacity: 0.35; }
.show-cal-orn-tl { top: 12px;    left: 12px;    }
.show-cal-orn-tr { top: 12px;    right: 12px;   transform: scaleX(-1); }
.show-cal-orn-bl { bottom: 12px; left: 12px;    transform: scaleY(-1); }
.show-cal-orn-br { bottom: 12px; right: 12px;   transform: scale(-1, -1); }

/* header: ‹ Month Year › */
.show-cal-head {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--border-faint);
  margin-bottom: 18px;
}
.show-cal-nav {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border-faint);
  color: var(--ink-espresso-deep);
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  line-height: 1;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
  justify-self: center;
}
.show-cal-nav:hover:not(:disabled) {
  background: var(--ink-espresso-deep);
  color: var(--ink-cream);
}
.show-cal-nav:active:not(:disabled) { transform: scale(0.95); }
.show-cal-nav:disabled { opacity: 0.25; cursor: not-allowed; }

.show-cal-title { text-align: center; }
.show-cal-month {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 4vw, 38px);
  color: var(--ink-espresso-deep);
  line-height: 1;
}
.show-cal-year {
  font-family: var(--font-serif-sc);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: 6px;
}
.show-cal-count {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12px;
  color: var(--ink-sage-deep);
  margin-top: 4px;
}

/* day-of-week row */
.show-cal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}
.show-cal-dow > div {
  text-align: center;
  font-family: var(--font-serif-sc);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 6px 0;
}

/* date grid */
.show-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.show-cal-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--fg-2);
  font-family: var(--font-display);
  font-size: 16px;
  cursor: default;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
  padding: 0;
}
.show-cal-day { font-style: italic; line-height: 1; }
.show-cal-mark {
  margin-top: 4px;
  opacity: 0.85;
}
.show-cal-cell.is-outside  { opacity: 0.25; color: var(--fg-3); }
.show-cal-cell.has-show    { cursor: pointer; color: var(--ink-espresso-deep); }
.show-cal-cell.is-upcoming {
  background: var(--bg-panel-deep);
  border-color: var(--ink-espresso);
  color: var(--ink-espresso-deep);
}
.show-cal-cell.is-past {
  border-color: var(--ink-sage-deep);
  color: var(--ink-sage-deep);
  border-style: dashed;
}
.show-cal-cell.has-show:hover {
  background: var(--ink-espresso-deep);
  color: var(--ink-cream);
  border-color: var(--ink-espresso-deep);
  transform: translateY(-1px);
}
.show-cal-cell.is-selected {
  background: var(--ink-espresso-deep);
  color: var(--ink-cream);
  border-color: var(--ink-espresso-deep);
  box-shadow: 0 8px 20px -10px rgba(43,29,21,0.45);
}

.show-cal-empty {
  margin-top: 24px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--fg-3);
  display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.link-quiet {
  background: transparent; border: none;
  font-family: var(--font-serif-sc);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-espresso);
  cursor: pointer;
  padding: 4px 0;
  border-bottom: 1px solid currentColor;
}
.link-quiet:hover { color: var(--ink-espresso-deep); }

/* selected-show detail card */
.show-cal-detail {
  margin-top: 24px;
  padding: 24px 28px;
  background: var(--bg-panel);
  border: 1px solid var(--border-faint);
  border-left: 3px solid var(--ink-espresso);
  border-radius: 4px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  animation: detailIn 280ms ease-out;
}
.show-cal-detail.r-past { border-left-color: var(--ink-sage-deep); opacity: 0.92; }
@keyframes detailIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.show-cal-detail-date {
  font-family: var(--font-serif-sc);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 4px;
}
.show-cal-detail-city {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 3vw, 30px);
  margin: 0 0 4px;
  color: var(--ink-espresso-deep);
}
.show-cal-detail-venue {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--fg-2);
  font-style: italic;
  margin-bottom: 6px;
}
.show-cal-detail-tour { margin-top: 6px; }
.show-cal-past-tag {
  font-family: var(--font-serif-sc);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-sage-deep);
  padding: 6px 12px;
  border: 1px dashed var(--ink-sage-deep);
  border-radius: 999px;
}

@media (max-width: 600px) {
  .show-cal { padding: 28px 16px 22px; }
  .show-cal-orn { display: none; }
  .show-cal-cell { font-size: 13px; }
  .show-cal-dow > div { font-size: 9px; letter-spacing: 0.18em; }
  .show-cal-detail { grid-template-columns: 1fr; }
}

/* ============================================================
   COMPACT CALENDAR — used in the shows hero. Same component as
   the full calendar but smaller cells/typography, no padding-heavy
   chrome, no detail panel.
   ============================================================ */
.show-cal.is-compact {
  margin: 0;
  padding: 18px 18px 14px;
  background:
    radial-gradient(ellipse at top, rgba(218, 195, 156, 0.22) 0%, transparent 55%),
    rgba(255, 248, 232, 0.94);
  border-radius: 6px;
  box-shadow:
    0 1px 0 var(--border-faint),
    0 18px 28px -16px rgba(43, 29, 21, 0.55);
}
.show-cal.is-compact .show-cal-orn { opacity: 0.5; }
.show-cal.is-compact .show-cal-orn-tl,
.show-cal.is-compact .show-cal-orn-tr { top: 8px;    }
.show-cal.is-compact .show-cal-orn-bl,
.show-cal.is-compact .show-cal-orn-br { bottom: 8px; }
.show-cal.is-compact .show-cal-orn-tl,
.show-cal.is-compact .show-cal-orn-bl { left: 8px;   }
.show-cal.is-compact .show-cal-orn-tr,
.show-cal.is-compact .show-cal-orn-br { right: 8px;  }
.show-cal.is-compact .show-cal-head {
  grid-template-columns: 28px 1fr 28px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  gap: 8px;
}
.show-cal.is-compact .show-cal-nav { width: 26px; height: 26px; font-size: 16px; }
.show-cal.is-compact .show-cal-month { font-size: 20px; }
.show-cal.is-compact .show-cal-year  { font-size: 8px;  letter-spacing: 0.22em; margin-top: 3px; }
.show-cal.is-compact .show-cal-count { font-size: 10px; margin-top: 2px; }
.show-cal.is-compact .show-cal-dow { gap: 2px; margin-bottom: 4px; }
.show-cal.is-compact .show-cal-dow > div { font-size: 8px; letter-spacing: 0.12em; padding: 2px 0; }
.show-cal.is-compact .show-cal-grid { gap: 2px; }
.show-cal.is-compact .show-cal-cell {
  font-size: 11px;
  min-height: 28px;
  padding: 2px 0;
}
.show-cal.is-compact .show-cal-mark { transform: scale(0.85); }

/* ============================================================
   SHOWS PAGE HERO — photo backdrop, calendar on the left,
   title block on the right. Click the mini calendar to expand.
   ============================================================ */
.shows-header { min-height: 480px; align-items: center; padding: 100px 0 80px; }
.shows-header-grid {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: 48px;
  align-items: center;
}
/* When the hero is the title alone (calendar removed), drop the 2-col
   grid and let the title block stretch and centre cleanly. */
.shows-header-grid.is-hero-only {
  grid-template-columns: 1fr;
  text-align: center;
  justify-items: center;
  max-width: 880px;
  margin: 0 auto;
}
.shows-header-grid.is-hero-only .shows-header-title {
  text-align: center;
}
.shows-header-title {
  text-align: left;
}
.shows-header-title .page-header-eyebrow {
  display: inline-block;
  margin-bottom: 6px;
}
.shows-header .page-header-title { margin: 8px 0 14px; }

/* ============================================================
   SHOWS TICKETS — the list of upcoming dates fed from Ticketmaster.
   One row per date: chunky date stamp on the left (month + big
   numeral), venue + city in the middle, dark "Get tickets" button on
   the right that opens Ticketmaster in a new tab. Mobile collapses
   the row into a stack with the button anchored to the bottom.
   ============================================================ */
.shows-tickets { padding: 88px 0 96px; }
.shows-tickets-head {
  text-align: center;
  margin: 0 auto 56px;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Eyebrow above the heading — already in JSX as <span class="eyebrow">,
   but the generic .eyebrow rule paints it small-caps gray which gets
   lost. Override locally so it reads as a tactile typographic ticket
   stub — espresso-deep small caps in a cream pill with a hairline
   border, like a real admission tag punched on entry. */
.shows-tickets-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px;
  margin-bottom: 20px;
  font-family: var(--font-serif-sc, "Cormorant Garamond", serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-espresso-deep);
  background: linear-gradient(180deg, #FBF3DE 0%, #F4E9CD 100%);
  border: 1px solid rgba(74, 47, 34, 0.4);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 4px 10px -4px rgba(20, 12, 8, 0.25);
}
.shows-tickets-head .eyebrow::before,
.shows-tickets-head .eyebrow::after {
  content: "";
  width: 18px;
  height: 1px;
  background: rgba(74, 47, 34, 0.45);
}
/* —— THE HEADING ——
   "Get tickets." → now displayed larger, sculpted with a 3D
   text-shadow stack (matching the rest of the site's chiseled-on-
   wood treatment so the headings feel like a system, not isolated
   pieces), and underlined by a thin centered rule pseudo. */
.shows-tickets-h {
  position: relative;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(52px, 6.2vw, 78px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink-espresso-deep);
  margin: 0 0 28px;
  padding-bottom: 18px;
  text-shadow:
    -2px -2px 0 rgba(255, 248, 232, 0.5),
    2px 2px 0 #4A2F22,
    3px 3px 0 #3a2419,
    4px 4px 0 #3a2419,
    5px 5px 0 #2B1D15,
    6px 6px 0 #2B1D15,
    7px 7px 0 #1d130d,
    12px 18px 24px rgba(20, 12, 8, 0.4);
}
.shows-tickets-h::after {
  /* Centered hairline rule under the heading, with a tapered fade
     at each end like an old print divider. */
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: clamp(140px, 14vw, 220px);
  height: 2.5px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--ink-espresso-deep) 18%,
    var(--ink-espresso-deep) 82%,
    transparent 100%
  );
  box-shadow: 0 1px 2px rgba(20, 12, 8, 0.35);
}
/* —— THE SUB-COPY ——
   Was small italic body gray. Now rewritten as bigger display italic
   with letter-spacing and a faint elegant ornament between key
   phrases — looks like editorial copy from a tour-poster, not
   utility text. The lead is also given a slight max-width so it
   wraps to ~2 lines, which reads more rhythmic than a single long
   sentence. */
.shows-tickets-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.5;
  color: var(--ink-espresso);
  margin: 0;
  max-width: 540px;
  letter-spacing: 0.005em;
  /* Faint extra emphasis: a very subtle text-shadow lifts the words
     off the page background, making them feel printed rather than
     just rendered. */
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}
.shows-tickets-sub em {
  font-style: normal;
  font-family: var(--font-serif-sc, "Cormorant Garamond", serif);
  font-weight: 700;
  font-size: 0.85em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-espresso-deep);
  padding: 0 4px;
}
.shows-tickets-quiet {
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--fg-3);
  font-size: 17px;
  padding: 32px 0;
  margin: 0;
}
.shows-tickets-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--border-faint);
}
.shows-ticket-row {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 24px 12px;
  border-bottom: 1px solid var(--border-faint);
  transition: background-color 240ms ease;
}
.shows-ticket-row:hover {
  background: linear-gradient(90deg,
    transparent,
    var(--bg-elevated) 12%,
    var(--bg-elevated) 88%,
    transparent);
}
.shows-ticket-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border-right: 1px solid var(--border-faint);
  padding-right: 28px;
}
.shows-ticket-month {
  font-family: var(--font-serif-sc, "Cormorant Garamond", serif);
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-sage-deep);
  font-weight: 600;
}
.shows-ticket-day {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 42px;
  line-height: 1;
  font-weight: 500;
  color: var(--ink-espresso-deep);
  letter-spacing: -0.02em;
}
.shows-ticket-meta { min-width: 0; }
.shows-ticket-venue {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink-espresso-deep);
  margin: 0 0 4px;
}
.shows-ticket-city {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--fg-3);
  margin: 0;
}
.shows-ticket-cta {
  white-space: nowrap;
  /* btn-ink base styles inherit; nudge for inline use here */
}
.shows-tickets-stamp {
  margin: 36px 0 0;
  text-align: center;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: var(--fg-3);
  opacity: 0.7;
}
@media (max-width: 700px) {
  .shows-tickets { padding: 64px 0 72px; }
  .shows-tickets-head { margin-bottom: 32px; }
  .shows-ticket-row {
    grid-template-columns: 72px 1fr;
    gap: 18px;
    padding: 20px 8px;
  }
  .shows-ticket-cta {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 4px;
  }
  .shows-ticket-date { padding-right: 18px; }
  .shows-ticket-day { font-size: 32px; }
  .shows-ticket-month { font-size: 11px; letter-spacing: 0.24em; }
}

/* Mini calendar wrapper acts as a single clickable button */
.shows-mini-cal {
  display: block;
  width: 100%;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: transform 220ms ease;
}
.shows-mini-cal:hover { transform: translateY(-2px); }
.shows-mini-cal:focus-visible {
  outline: 2px solid var(--ink-cream);
  outline-offset: 4px;
  border-radius: 8px;
}
.shows-mini-cal-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 6px 14px;
  font-family: var(--font-serif-sc, "Cormorant Garamond", serif);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-cream);
  background: rgba(43, 29, 21, 0.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 248, 232, 0.25);
  border-radius: 999px;
  transition: background-color 160ms ease;
}
.shows-mini-cal:hover .shows-mini-cal-hint {
  background: rgba(43, 29, 21, 0.8);
}

@media (max-width: 820px) {
  .shows-header-grid { grid-template-columns: 1fr; gap: 28px; }
  .shows-header { min-height: 420px; padding: 80px 0 60px; }
  .shows-mini-cal { max-width: 360px; margin: 0 auto; }
  .shows-header-title { text-align: center; }
  .shows-mini-cal-hint { display: inline-flex; }
}

/* ============================================================
   CALENDAR MODAL — centered popup overlay containing the full
   interactive calendar.
   ============================================================ */
.show-cal-modal {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 12, 8, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: showCalModalFadeIn 220ms ease-out;
}
@keyframes showCalModalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.show-cal-modal-card {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border-faint);
  border-radius: 8px;
  padding: 24px 28px 28px;
  box-shadow:
    0 1px 0 var(--border-faint),
    0 40px 80px -20px rgba(20, 12, 8, 0.7);
  animation: showCalModalScaleIn 240ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes showCalModalScaleIn {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.show-cal-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.show-cal-modal-head .eyebrow {
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--fg-2);
}
.show-cal-modal-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border-faint);
  color: var(--ink-espresso-deep);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 160ms ease, color 160ms ease;
}
.show-cal-modal-close:hover {
  background: var(--ink-espresso-deep);
  color: var(--ink-cream);
}
.show-cal-modal-card .show-cal {
  margin-top: 16px;
  /* inside the modal the card itself provides the chrome — keep the
     calendar surface flat so it doesn't compete */
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.show-cal-modal-card .show-cal-orn { display: none; }

@media (max-width: 600px) {
  .show-cal-modal { padding: 12px; }
  .show-cal-modal-card { padding: 16px 14px 18px; max-height: calc(100vh - 24px); }
}

/* ============================================================
   DEATH BED — softened: no rotating cert badge, quieter prose.
   The .dbs-quiet paragraph is a small note for production credits.
   ============================================================ */
.dbs-quiet {
  font-size: 14px;
  color: var(--fg-3);
  margin-top: 14px;
}

/* ============================================================
   MY RECS — full-bleed typographic collage. Songs sized irregularly
   and tilted slightly so the strip reads as scattered marginalia
   rather than a list. Stretches edge-to-edge of the viewport.
   ============================================================ */
.myrecs {
  /* Background reverted to the site's default cream (inherited from
     body) at the artist's request — the wood texture + cream-wash
     gradient that used to live here, and the negative margin that
     overlapped the section above, are all gone. This now reads as
     a plain content section like the rest of the page. */
  padding: 88px clamp(28px, 5vw, 80px) 88px;
  margin-top: 0;
  position: relative;
  isolation: isolate;
  border-top: 0;
  box-shadow: none;
  background: transparent;
}
.myrecs::before {
  /* The faded wood pseudo is no longer needed — display:none rather
     than deleting the rule outright so any leftover references stay
     valid. */
  display: none;
}
/* The .myrecs-frame outline pseudo div has been REMOVED. It was
   creating a visible horizontal line between the eyebrow and the
   heading (its top edge) — the artist asked for that line gone.
   The frame CSS rule below stays for any future use but the JSX
   no longer renders the element. */
.myrecs-frame { display: none; }

/* —— HERO → WOOD BLEND (top of wood) ——————————————————————
   The fade now mirrors the bottom-of-wood fade's gentle character:
   starts at a moderate dark wash (rgba ~0.42 alpha at the very top
   so the wood texture still shows through underneath), steps down
   through low-alpha mid-stops, dissolves to fully transparent over
   240px. Previously this overlay was nearly opaque at the top
   (0.92) which made it read as "the wood just got dark" rather
   than "the wood is fading in." With the lower starting alpha,
   the wood texture is visible from the first pixel of the section,
   and the dark wash just adds a soft atmospheric weight that
   matches the dusk hero above. */
/* The OLD .myrecs::before dark-wash overlay has been REMOVED — the
   wood-texture ::before higher up (with its mask-image fade) now
   handles the entire top transition. The hero photo bleeds through
   the masked-transparent area of the wood pseudo; no separate dark
   overlay is needed. */
.myrecs > * { position: relative; z-index: 2; }

@media (max-width: 820px) {
  .myrecs {
    padding: 220px 16px 64px;    /* match the desktop logic: 160 fade + 60 of breathing room */
    margin-top: -160px;          /* shorter overlap on phones */
  }
  .myrecs::before {
    /* Shorter fade zone on phones, with scroll-attachment fallback
       for iOS Safari which struggles with fixed textures. */
    background-attachment: scroll;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 160px, #000 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 160px, #000 100%);
  }
}
.myrecs-head {
  text-align: center;
  margin: 0 auto 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 640px;
}
/* —— EYEBROW: "in rotation" ——
   Plain black bold text — no pill, no border, no background. Just
   typography on the wood. The chiseled depth comes from a soft
   cream halo via text-shadow, keeping it readable against the
   busy grain. */
.myrecs-eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  font-family: var(--font-serif-sc, "Cormorant Garamond", serif);
  font-size: 13px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #000;
  font-weight: 900;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  /* Soft cream halo for legibility against wood */
  text-shadow:
    0 1px 0 rgba(255, 248, 232, 0.55),
    0 0 8px rgba(255, 248, 232, 0.45);
}
/* —— HEADING: "my recs." ——
   The chiseled 3D shadow stack stays. The underline ::after pseudo
   from the previous version has been REMOVED at the artist's
   request — the heading now stands on its typography alone. */
.myrecs-heading {
  position: relative;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(54px, 6.5vw, 84px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink-espresso-deep);
  margin: 0 0 28px;
  /* Stacked text-shadow extrusion — same recipe as the per-song
     titles below, scaled up for the larger heading. */
  text-shadow:
    -2px -2px 0 rgba(255, 248, 232, 0.45),
    2px 2px 0 #4A2F22,
    3px 3px 0 #4A2F22,
    4px 4px 0 #3a2419,
    5px 5px 0 #3a2419,
    6px 6px 0 #2B1D15,
    7px 7px 0 #2B1D15,
    8px 8px 0 #1d130d,
    14px 22px 28px rgba(20, 12, 8, 0.6);
}
/* —— LEAD: "a fresh pull every visit ..." ——
   Brown text with a thin white outline (text-shadow simulating
   outline). The 4-corner white shadows at ±1px each give a clean
   1px white stroke around every letter, which makes the brown
   pop crisply off the wood texture. Italic display serif preserved
   for the artistic feel; bold for readability. */
.myrecs-lead {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.45;
  color: #4A2F22;
  margin: 0;
  max-width: 520px;
  text-shadow:
    /* 1px white stroke around each letter — 4 cardinal directions */
    -1px -1px 0 #ffffff,
     1px -1px 0 #ffffff,
    -1px  1px 0 #ffffff,
     1px  1px 0 #ffffff,
    /* tiny dark cast for a hint of depth so the text isn't entirely flat */
    0 1px 2px rgba(20, 12, 8, 0.25);
}

/* ── THE STRIP ────────────────────────────────────────────
   Horizontal flex with wrap. Items have varied sizes (set via
   .myrec-{xs|s|md|lg|xl} classes) and per-item inline transforms
   for rotation + vertical offset. Generous row-gap so tilted items
   don't collide with the row above/below. */
.myrecs-strip {
  list-style: none;
  margin: 0;
  padding: 24px 0 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: clamp(28px, 4vw, 64px);
  row-gap: clamp(36px, 5vw, 64px);
}
.myrec {
  /* The inline `transform` (set on each item via React for tilt +
     vertical offset) applies on top of these defaults. Items have no
     intrinsic background; the link inside handles colour & hover. */
  transition: transform 360ms cubic-bezier(0.32, 0.7, 0.4, 1),
              filter    360ms ease;
}
.myrec-link {
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  position: relative;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-espresso-deep);
  line-height: 1.02;
  letter-spacing: -0.02em;
  transition: color 240ms ease;
}
.myrec-link::after {
  /* Quiet underline that appears on hover — a hand-drawn-feeling
     accent so the visitor knows the item is tappable without
     visual clutter at rest. */
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 1.5px;
  background: currentColor;
  opacity: 0.45;
  border-radius: 2px;
  transition: width 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.myrec-link:hover::after,
.myrec-link:focus-visible::after { width: 100%; }
.myrec-link:hover,
.myrec-link:focus-visible {
  color: var(--ink-sage-deep);
}
.myrec-link:focus-visible { outline: none; }

.myrec-name {
  display: block;
  /* —— 3D RAISED-LETTER EFFECT ——
     A stacked stepped text-shadow simulates extrusion: each layer is
     offset further down-right than the last, with progressively
     darker espresso shades, so the letters appear to physically rise
     off the wood backdrop. The top-left highlight (cream/0.45) sims
     light catching the upper edge of the raised letter. The final
     soft blurred shadow at 10/16/22 grounds the letters on the
     surface so they don't float.

     Per-size variants below adjust the depth: XL gets the deepest
     extrusion, XS gets just a couple of layers. Hover intensifies
     the depth (handled in .myrec-link:hover .myrec-name).

     Why all-solid-color stepped shadows + a final blurred one:
     solid-step shadows produce the classic chiseled-edge look, but
     a hard-stop bottom would look fake — the trailing soft shadow
     gives the depth a natural fall-off. */
  text-shadow:
    /* Top-left highlight — light from upper-left catches the edge */
    -1px -1px 0 rgba(255, 248, 232, 0.45),
    /* Stepped depth shadows: each one 1px further down-right and
       slightly darker, building the extruded side wall of the letter */
    1px 1px 0 #4A2F22,
    2px 2px 0 #4A2F22,
    3px 3px 0 #3a2419,
    4px 4px 0 #3a2419,
    5px 5px 0 #2B1D15,
    6px 6px 0 #2B1D15,
    7px 7px 0 #1d130d,
    /* Soft cast shadow at the bottom — anchors the letter to the
       wood surface and softens the otherwise hard step boundary */
    10px 16px 22px rgba(20, 12, 8, 0.55);
}
.myrec-link:hover .myrec-name,
.myrec-link:focus-visible .myrec-name {
  /* Hover lifts the letters higher off the surface — longer depth
     plus a brighter highlight, like light flares as the letter
     rises toward the viewer. */
  text-shadow:
    -1px -1px 0 rgba(255, 248, 232, 0.7),
    1px 1px 0 #4A2F22,
    2px 2px 0 #4A2F22,
    3px 3px 0 #3a2419,
    4px 4px 0 #3a2419,
    5px 5px 0 #2B1D15,
    6px 6px 0 #2B1D15,
    7px 7px 0 #1d130d,
    8px 8px 0 #1d130d,
    9px 9px 0 #0a0604,
    14px 22px 32px rgba(20, 12, 8, 0.7);
}
.myrec-sub {
  display: block;
  font-family: var(--font-serif-sc, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--fg-3);
  margin-top: 6px;
}

/* ── SIZE VARIANTS ────────────────────────────────────────
   The asymmetry comes from these. xl = anchor-piece display
   line, md/lg = medium phrases, s/xs = small mentions. The xl
   variant is the only one that shows the subtitle (album/feat).

   Each size also gets its own 3D depth — XL has dramatic 9-step
   extrusion; smaller sizes scale back proportionally so the depth
   stays believable for the letterform's actual size (a tiny piece
   of 12px text with 9 stacked shadow layers reads as noisy, not
   sculpted). */
.myrec-xl .myrec-name { font-size: clamp(48px, 5.6vw, 78px); font-weight: 500; }
.myrec-lg .myrec-name {
  font-size: clamp(34px, 3.8vw, 52px);
  text-shadow:
    -1px -1px 0 rgba(255, 248, 232, 0.4),
    1px 1px 0 #4A2F22,
    2px 2px 0 #3a2419,
    3px 3px 0 #3a2419,
    4px 4px 0 #2B1D15,
    5px 5px 0 #2B1D15,
    8px 12px 18px rgba(20, 12, 8, 0.5);
}
.myrec-md .myrec-name {
  font-size: clamp(26px, 2.6vw, 36px);
  color: var(--ink-espresso);
  text-shadow:
    -1px -1px 0 rgba(255, 248, 232, 0.35),
    1px 1px 0 #3a2419,
    2px 2px 0 #2B1D15,
    3px 3px 0 #2B1D15,
    4px 4px 0 #1d130d,
    6px 10px 14px rgba(20, 12, 8, 0.45);
}
.myrec-s  .myrec-name {
  font-size: clamp(18px, 1.7vw, 24px);
  font-style: normal;
  font-family: var(--font-serif-sc, "Cormorant Garamond", serif);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2d4029;   /* solid deep sage — readable on wood */
  /* Smaller 3D — just a couple of stepped layers so the letterforms
     don't get muddy. Sage-deep base color so the stepped shadows
     deepen into a moss tone rather than espresso. */
  text-shadow:
    -1px -1px 0 rgba(255, 248, 232, 0.3),
    1px 1px 0 #2a3a26,
    2px 2px 0 #1a2618,
    4px 7px 10px rgba(12, 18, 10, 0.4);
}
.myrec-xs .myrec-name {
  font-size: clamp(14px, 1.3vw, 18px);
  font-style: normal;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  letter-spacing: 0.08em;
  text-transform: lowercase;
  /* Was var(--fg-3) — that's a faded gray that read as illegible
     against the wood texture. Changed to a solid deep espresso so
     the smallest-sized songs stay readable as quiet voices rather
     than disappearing. */
  color: #2B1D15;
  /* Subtlest 3D — XS is the quiet line in the collage so the depth
     here is a hint, not a feature. */
  text-shadow:
    1px 1px 0 rgba(43, 29, 21, 0.7),
    2px 2px 0 rgba(43, 29, 21, 0.5),
    3px 5px 6px rgba(20, 12, 8, 0.4);
}

/* ── ACCENT COLOR VARIANTS ────────────────────────────────
   Adding deeper color saturation to a subset of the songs so the
   strip reads as a varied marginalia collage rather than a strip
   of brown. Each accent class overrides only the `color` property
   — the per-size text-shadow stack still applies, so depth stays
   consistent across the whole collage.

   All four colors are deeply saturated and solid (no opacity)
   so every song stays clearly readable against the wood. They're
   applied via additional classes on the .myrec element from JSX,
   with a position-based pattern (see MyRecs component) — index
   1 gets wine, index 4 gets rust, etc.

   The plain brown sizes (xl, lg, md positions) are left untouched
   per the artist's request — only s and xs positions receive
   accent overrides. */
.myrec--rust  .myrec-name { color: #8a3a1f; }   /* warm orange-brown */
.myrec--wine  .myrec-name { color: #6a1f24; }   /* deep burgundy */
.myrec--olive .myrec-name { color: #3d4a18; }   /* dark olive green */
.myrec--plum  .myrec-name { color: #4a2148; }   /* deep purple-brown */
.myrec--ink   .myrec-name { color: #1d2842; }   /* deep ink-navy */

/* ── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 900px) {
  .myrecs { padding: 72px clamp(20px, 5vw, 40px) 64px; }
  .myrecs-head { margin-bottom: 40px; }
  .myrecs-strip {
    column-gap: clamp(20px, 4vw, 36px);
    row-gap: clamp(28px, 4vw, 44px);
    padding: 12px 0 4px;
  }
}
@media (max-width: 600px) {
  .myrecs { padding: 56px 18px 52px; }
  .myrecs-heading { font-size: 44px; }
  .myrecs-lead { font-size: 15px; }
  /* On mobile, dial back the tilt so songs don't run off the edge,
     and flatten the size-spread so even the "xl" items fit. */
  .myrec { transform: none !important; }
  .myrec-xl .myrec-name { font-size: 36px; }
  .myrec-lg .myrec-name { font-size: 28px; }
  .myrec-md .myrec-name { font-size: 22px; }
  .myrec-s  .myrec-name { font-size: 16px; }
  .myrec-xs .myrec-name { font-size: 13px; }
  .myrec-sub { font-size: 12px; }
}

/* ── BIG SERIF NUMERAL ───────────────────────────────── */
/* ============================================================
   PRESENTLY LINE — a single quiet sentence with thin rules
   ============================================================ */
.presently { padding: 24px 0 16px; }
.presently .wrap-narrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.presently-rule {
  display: block;
  width: 56px;
  border-top: 1px solid var(--border-faint);
}
.presently-text {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--fg-3);
  letter-spacing: 0.01em;
  text-align: center;
}
.presently-text em { font-style: italic; }

/* ============================================================
   HERO SIGILS — Unworthy ✦ and Lofi Library Club ℒ marks
   floating beside the vine wordmark in the campfire hero.
   Click-throughs to the sibling sites. Quiet by default,
   brighten on hover. Subtle continuous float to match the
   rising-embers motion of the hero.
   ============================================================ */
.powfu-hero-glyphs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 6vw, 80px);
  margin: 12px 0 18px;
}
.powfu-hero-glyphs .powfu-name {
  margin: 0;
  flex: 0 1 auto;
}

.hero-sigil {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  text-decoration: none;
  color: var(--ink-cream);
  border-radius: 50%;
  transition:
    transform 320ms ease,
    filter 320ms ease,
    background-color 320ms ease;
  animation: heroSigilFloat 7s ease-in-out infinite;
}
.hero-sigil-llc { animation-delay: 1.6s; }   /* offset so the two don't bob in lockstep */

/* Soft warm-cream halo behind each sigil so it pops off the sunset sky */
.hero-sigil::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 232, 190, 0.32) 0%,
    rgba(255, 220, 170, 0.18) 35%,
    rgba(255, 220, 170, 0.04) 65%,
    transparent 80%
  );
  pointer-events: none;
  z-index: -1;
  transition: background 320ms ease, transform 320ms ease;
}

.hero-sigil img {
  width: auto;
  height: 96px;
  max-width: 100%;
  object-fit: contain;
  opacity: 0.92;
  /* recolor the black PNG to cream so it reads on the warm sunset */
  filter:
    brightness(0) invert(1)
    drop-shadow(0 3px 14px rgba(43, 29, 21, 0.55))
    drop-shadow(0 0 22px rgba(255, 220, 170, 0.45));
  transition: opacity 320ms ease, filter 320ms ease, transform 320ms ease;
}
.hero-sigil-llc img { height: 90px; }

.hero-sigil-label {
  font-family: var(--font-serif-sc, var(--font-display));
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-cream);
  opacity: 0.85;
  text-shadow:
    0 1px 0 rgba(43, 29, 21, 0.6),
    0 2px 10px rgba(43, 29, 21, 0.7);
  transition: opacity 320ms ease, letter-spacing 320ms ease;
  font-weight: 500;
}

.hero-sigil:hover,
.hero-sigil:focus-visible {
  transform: translateY(-4px) scale(1.05);
}
.hero-sigil:hover::before,
.hero-sigil:focus-visible::before {
  background: radial-gradient(
    circle,
    rgba(255, 232, 190, 0.55) 0%,
    rgba(255, 220, 170, 0.35) 35%,
    rgba(255, 220, 170, 0.08) 65%,
    transparent 80%
  );
  transform: translateX(-50%) scale(1.15);
}
.hero-sigil:hover img,
.hero-sigil:focus-visible img {
  opacity: 1;
  filter:
    brightness(0) invert(1)
    drop-shadow(0 4px 18px rgba(43, 29, 21, 0.6))
    drop-shadow(0 0 30px rgba(255, 200, 120, 0.85));
}
.hero-sigil:hover .hero-sigil-label,
.hero-sigil:focus-visible .hero-sigil-label {
  opacity: 1;
  letter-spacing: 0.36em;
}

/* Slow, gentle float */
@keyframes heroSigilFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.hero-sigil:hover { animation-play-state: paused; }

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

/* Responsive — still substantial on small screens */
@media (max-width: 760px) {
  .powfu-hero-glyphs   { gap: 16px; }
  .hero-sigil          { padding: 12px 14px; gap: 8px; }
  .hero-sigil::before  { width: 86px; height: 86px; }
  .hero-sigil img      { height: 62px; }
  .hero-sigil-llc img  { height: 58px; }
  .hero-sigil-label    { font-size: 10px; letter-spacing: 0.24em; }
}
@media (max-width: 420px) {
  .hero-sigil-label    { display: none; }
  .hero-sigil          { padding: 10px; }
  .hero-sigil::before  { width: 68px; height: 68px; }
  .hero-sigil img      { height: 48px; }
  .hero-sigil-llc img  { height: 44px; }
  .powfu-hero-glyphs   { gap: 8px; }
}

/* ============================================================
   3D HEADER SHADOWS — intentional depth on every page/section
   title. Layered solid offsets (subtle stair-step) plus a soft
   blurred drop so they sit forward without looking gimmicky.
   ============================================================ */

/* Section heads on light cream backgrounds */
.section-head h2,
.about-h,
.album-feature-title,
.dbs-title,
.album-title,
.powfu-latest-title {
  text-shadow:
    0 1px 0 rgba(75, 47, 34, 0.06),
    0 2px 0 rgba(75, 47, 34, 0.05),
    0 3px 0 rgba(75, 47, 34, 0.04),
    0 6px 14px rgba(75, 47, 34, 0.16);
}

/* Big page header titles on dark photo backgrounds */
.page-header-title {
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.18),
    0 4px 0 rgba(0, 0, 0, 0.14),
    0 6px 0 rgba(0, 0, 0, 0.10),
    0 12px 28px rgba(0, 0, 0, 0.40);
}

/* The Shows page header gets a more pronounced sculpted feel */
.page-header[data-page="shows"] .page-header-title,
.page-header-title.is-shows {
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.22),
    0 4px 0 rgba(0, 0, 0, 0.18),
    0 6px 0 rgba(0, 0, 0, 0.13),
    0 8px 0 rgba(0, 0, 0, 0.09),
    0 16px 36px rgba(0, 0, 0, 0.55);
  letter-spacing: -0.005em;
}

/* Footer brand wordmark on dark espresso background */
.powfu-footer-mark {
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.4),
    0 2px 0 rgba(0, 0, 0, 0.3),
    0 4px 14px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   SHOW REEL — refined to a more polished, gallery-feel.
   Drops the sprocket holes; adds soft manual nav arrows that
   appear on hover; cleaner caption.
   ============================================================ */

/* Remove the rustic sprocket holes added earlier */
.show-reel-frame::before,
.show-reel-frame::after { display: none; }

/* Cleaner frame shadow */
.show-reel-frame .nature-photo {
  border-radius: 4px;
  box-shadow:
    0 1px 0 rgba(255, 248, 232, 0.06),
    0 24px 48px -28px rgba(43, 29, 21, 0.55),
    0 12px 24px -16px rgba(43, 29, 21, 0.35);
  transition: transform 320ms ease, box-shadow 320ms ease;
}
.show-reel-frame:hover .nature-photo {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 248, 232, 0.1),
    0 32px 56px -28px rgba(43, 29, 21, 0.65),
    0 18px 30px -16px rgba(43, 29, 21, 0.45);
}

/* Caption: cleaner hierarchy, no flex-wrap chaos */
.show-reel-cap {
  bottom: 14px; left: 16px; right: 16px;
  gap: 8px;
  font-size: 12px;
}
.show-reel-city {
  font-style: italic;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
}
.show-reel-dot { display: none; }
.show-reel-date {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-left: auto;
}
.show-reel-venue { display: none; }   /* keep the city + date only — cleaner */

/* ============================================================
   ============================================================ */
/* Calendar flip rules consolidated below — single source of truth */

/* ============================================================
   ABOUT LETTER — wraps the single image-as-letter (the parchment
   on a wooden table, baked from a JPEG). The image dominates the
   section; tapping it bumps scale to 1.10 ("zoom 10%") so visitors
   can read the handwriting more closely. Tapping again zooms back
   out. The button is the click target (lets us use proper a11y +
   keyboard activation); the image inside it is purely visual.
   ============================================================ */
.about-letter {
  /* No background colour — the image carries its own table-surface
     visual, so the surrounding cream page background is just a frame. */
  padding: clamp(56px, 7vw, 96px) clamp(20px, 4vw, 56px);
  display: flex;
  justify-content: center;
}
.about-letter-btn {
  /* Reset native button styling so we can treat it as a plain frame
     around the image. Border-radius matches the slight softening on
     the image itself so focus rings and hover shadows line up. */
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  display: block;
  max-width: 1100px;
  width: 100%;
  cursor: zoom-in;
  border-radius: 6px;
  overflow: visible;            /* allow box-shadow to spill */
}
.about-letter-btn:focus-visible {
  outline: 2px solid var(--ink-espresso);
  outline-offset: 6px;
}
.about-letter-btn.is-zoomed { cursor: zoom-out; }

.about-letter-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow:
    0 14px 32px -18px rgba(43, 29, 21, 0.45),
    0 4px 10px  -6px  rgba(43, 29, 21, 0.30);
  transform: scale(1);
  transform-origin: center center;
  transition:
    transform  420ms cubic-bezier(0.32, 0.7, 0.4, 1),
    box-shadow 420ms cubic-bezier(0.32, 0.7, 0.4, 1);
  user-select: none;
  -webkit-user-drag: none;
}
.about-letter-btn:hover .about-letter-img {
  box-shadow:
    0 18px 40px -18px rgba(43, 29, 21, 0.55),
    0 6px 14px  -6px  rgba(43, 29, 21, 0.35);
}
.about-letter-btn.is-zoomed .about-letter-img {
  transform: scale(1.10);       /* the requested 10% zoom on click */
  box-shadow:
    0 28px 60px -22px rgba(43, 29, 21, 0.60),
    0 10px 22px -10px rgba(43, 29, 21, 0.40);
}
/* Respect reduced-motion preferences — instant zoom rather than a
   420ms animation. */
@media (prefers-reduced-motion: reduce) {
  .about-letter-img { transition: none; }
}

/* ============================================================
   ABOUT BIO — A REAL HANDWRITTEN LETTER.
   The whole letter body is set in Caveat — not just the salutation
   and signature. The paper has aged-cream stains, faint ruled
   horizontal lines (so the handwriting sits on guides like real
   lined stationery), corner crinkles, and a fold crease.
   ============================================================ */
.notebook {
  position: relative;
  margin: 0 auto;
  padding: 0;
  /* The wrapper is invisible — the paper IS the notebook. */
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.notebook::before { content: none; display: none; }
.notebook-spine { display: none; }

/* The paper. Built from layered backgrounds:
   1. Ruled horizontal lines (faint, every 38px — set to the same
      rhythm as the handwriting line-height so the writing sits on
      a real ruling).
   2. Coffee-ring stain top-right.
   3. Two foxing spots (left + right).
   4. Edge-darkening vignette.
   5. Base warm-cream gradient.
   The ::after pseudo-element adds the fold creases and crinkles
   (multiplied on top of the paper for natural shading). */
.notebook-paper {
  position: relative;
  padding: clamp(48px, 6vw, 88px) clamp(36px, 6vw, 76px) clamp(40px, 5vw, 72px);
  border-radius: 2px;
  color: #3d2616;
  background:
    /* ruled horizontal lines — the "lined paper" guides the
       handwriting follows. Spaced to match line-height: 1.78 of
       Caveat at 22px ≈ 39px line box. */
    repeating-linear-gradient(
      180deg,
      transparent 0px,
      transparent 37px,
      rgba(95, 60, 30, 0.085) 37px,
      rgba(95, 60, 30, 0.085) 38px
    ),
    /* coffee-ring stain upper-right */
    radial-gradient(ellipse 140px 120px at 78% 18%, rgba(150, 105, 60, 0.10) 0%, transparent 60%),
    /* foxing spots */
    radial-gradient(circle 18px at 22% 42%, rgba(120, 75, 40, 0.12) 0%, transparent 65%),
    radial-gradient(circle 24px at 84% 72%, rgba(130, 80, 45, 0.10) 0%, transparent 65%),
    /* edge darkening */
    radial-gradient(ellipse at center, transparent 40%, rgba(160, 115, 70, 0.18) 100%),
    /* base paper cream */
    linear-gradient(168deg, #f8edd3 0%, #f3e3bf 50%, #ead49f 100%);
  box-shadow:
    0 22px 48px -22px rgba(60, 35, 18, 0.36),
    0 8px 18px -8px rgba(60, 35, 18, 0.22),
    inset 0 1px 0 rgba(255, 248, 230, 0.5);
}

/* Paper grain — fine noise overlay */
.notebook-paper::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.23  0 0 0 0 0.12  0 0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23p)' opacity='0.55'/></svg>");
  mix-blend-mode: multiply;
  opacity: 0.22;
  z-index: 0;
}

/* Crinkles + fold creases — multiplied on top of the paper.
   Horizontal mid-fold + vertical mid-fold + scattered radial crease
   shadows simulate a real letter that's been folded and re-flattened. */
.notebook-paper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
  background:
    /* horizontal mid-fold (subtle full-width band) */
    linear-gradient(180deg,
      transparent 0%,
      transparent 47%,
      rgba(100, 65, 35, 0.07) 49.6%,
      rgba(140, 95, 55, 0.18) 50%,
      rgba(100, 65, 35, 0.07) 50.4%,
      transparent 53%,
      transparent 100%
    ),
    /* vertical mid-fold */
    linear-gradient(90deg,
      transparent 0%,
      transparent 49.4%,
      rgba(120, 85, 50, 0.10) 50%,
      transparent 50.6%,
      transparent 100%
    ),
    /* small radial crinkles dotted around the page */
    radial-gradient(ellipse 80px 6px  at 18% 28%, rgba(120, 80, 45, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 110px 5px at 82% 36%, rgba(120, 80, 45, 0.10) 0%, transparent 70%),
    radial-gradient(ellipse 90px 7px  at 32% 64%, rgba(120, 80, 45, 0.10) 0%, transparent 70%),
    radial-gradient(ellipse 120px 5px at 72% 78%, rgba(120, 80, 45, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 160px 4px at 25% 12%, rgba(120, 80, 45, 0.10) 0%, transparent 70%),
    radial-gradient(ellipse 180px 4px at 75% 90%, rgba(120, 80, 45, 0.10) 0%, transparent 70%);
  mix-blend-mode: multiply;
  opacity: 0.85;
}

/* All content sits above the paper texture layers */
.notebook-paper > * { position: relative; z-index: 1; }

/* —— Letter metadata (place · date) — sits top-right of the page
       like a real letter's dateline ————————————————————————————— */
.notebook-meta {
  text-align: right;
  font-family: var(--font-serif-sc, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: #6a4828;
  margin: 0 0 28px;
  opacity: 0.78;
}
.notebook-meta-sep { margin: 0 6px; opacity: 0.55; }

/* —— Handwritten salutation — Caveat, slightly tilted ——————————— */
.notebook-salutation {
  font-family: "Caveat", "Sacramento", cursive;
  font-weight: 500;
  font-size: clamp(40px, 5.4vw, 58px);
  color: #3d2616;
  margin: 0 0 22px;
  line-height: 1;
  transform: rotate(-1.2deg);
  transform-origin: left top;
  text-shadow: 0 1px 0 rgba(255, 250, 235, 0.5);
}

/* —— LETTER BODY IN HANDWRITING ————————————————————————————————
   The body prose IS handwriting. Caveat at 22px with line-height
   tuned to land each line on a ruled paper guide. Color is a deep
   espresso ink that varies slightly via text-shadow to suggest the
   inconsistency of a real pen. */
.notebook-paper .lead {
  font-family: "Caveat", "Sacramento", cursive;
  font-style: normal;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.78;     /* = ~39px, matches ruled-line spacing */
  color: #3d2616;
  margin: 0 0 22px;
  letter-spacing: 0.005em;
  text-shadow: 0 0.5px 0 rgba(255, 250, 235, 0.4);
}

/* Drop-cap on the opening paragraph — a slightly larger first
   letter, like the way a careful letter-writer flourishes the
   opening word. Tilt it just a hair. */
.notebook-paper .lead.drop-cap::first-letter {
  font-size: 1.4em;
  font-weight: 600;
  color: #2d1c10;
  margin-right: 0.04em;
  line-height: 0.9;
  display: inline-block;
  transform: translateY(2px);
}

/* Emphasis in a handwritten letter isn't italics — it's a quick
   underline drawn with the same pen. Replace the italic <em>
   styling with a slight underline + heavier weight. */
.notebook-paper .lead em,
.notebook-paper .about-h em {
  font-style: normal;
  font-weight: 600;
  color: #2d1c10;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(61, 38, 22, 0.5);
  text-underline-offset: 3px;
}

/* —— Inline subheading inside the letter (e.g. "family & faith.") —
       Larger handwriting, slightly tilted, with a tiny hand-drawn
       underline rule beneath. */
.notebook-paper .about-h {
  font-family: "Caveat", "Sacramento", cursive;
  font-weight: 600;
  font-style: normal;
  font-size: clamp(28px, 3.6vw, 36px);
  color: #3d2616;
  margin: 36px 0 14px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  transform: rotate(-0.4deg);
  transform-origin: left center;
  position: relative;
  padding-bottom: 8px;
}
.notebook-paper .about-h::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64%;
  height: 2px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 4'><path d='M 2 2 Q 30 0.5 60 2 T 120 2.5 T 180 1.8 T 238 2.2' fill='none' stroke='%233d2616' stroke-width='1.4' stroke-linecap='round' opacity='0.55'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* —— Signature — Caveat, slightly larger, tilted opposite the
       salutation so they don't feel mirrored ——————————————————— */
.notebook-signature {
  font-family: "Caveat", "Sacramento", cursive;
  font-weight: 600;
  font-size: clamp(36px, 4.8vw, 48px);
  color: #2d1c10;
  text-align: right;
  margin: 28px 0 6px;
  line-height: 1;
  transform: rotate(-1.6deg);
  transform-origin: right top;
  text-shadow: 0 1px 0 rgba(255, 250, 235, 0.5);
}

/* —— Flourish under the signature — the curling pen swoosh
       drawn as an inline SVG in the JSX. Positioned right-aligned
       just under the signature, in espresso ink. */
.notebook-flourish {
  display: block;
  width: 200px;
  height: 24px;
  margin-left: auto;
  margin-right: 8px;
  margin-bottom: 24px;
  color: #3d2616;
  opacity: 0.7;
  transform: rotate(-1.2deg);
}

/* —— P.S. note — small handwritten afterthought below the
       signature, like a real letter often has. */
.notebook-ps {
  font-family: "Caveat", "Sacramento", cursive;
  font-style: normal;
  font-weight: 500;
  font-size: 19px;
  color: #4a2e1c;
  line-height: 1.5;
  margin: 6px 0 0;
  padding-top: 14px;
  border-top: 1px dashed rgba(105, 65, 30, 0.22);
  opacity: 0.92;
  transform: rotate(0.4deg);
  transform-origin: left center;
}
.notebook-ps em {
  font-style: normal;
  font-weight: 700;
  color: #2d1c10;
  letter-spacing: 0.04em;
  margin-right: 4px;
}

@media (max-width: 600px) {
  .notebook-paper { padding: 36px 24px 32px; }
  .notebook-paper .lead { font-size: 20px; line-height: 1.72; }
  .notebook-meta { font-size: 11px; }
  .notebook-flourish { width: 140px; height: 18px; }
}

/* ============================================================
   FOOTER — restructured: brand band, four cols, bottom strip
   ============================================================ */
.powfu-footer {
  background:
    radial-gradient(ellipse at top, rgba(75, 47, 34, 0.4) 0%, transparent 60%),
    linear-gradient(180deg, #2A1B12 0%, #1F140C 100%);
  color: var(--ink-cream);
  padding: 80px 0 32px;
  margin-top: 0;
}

/* —— top band: centered brand + tagline + socials —— */
.powfu-footer-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255, 248, 232, 0.08);
}
.powfu-footer-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(48px, 6vw, 64px);
  color: var(--ink-cream);
  letter-spacing: -0.005em;
  margin: 0 0 12px;
}
.powfu-footer-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: rgba(255, 248, 232, 0.65);
  margin: 0 0 24px;
  max-width: 480px;
}
.powfu-footer-socials .social-link {
  color: rgba(255, 248, 232, 0.55);
  border: 1px solid rgba(255, 248, 232, 0.12);
  background: rgba(255, 248, 232, 0.02);
}
.powfu-footer-socials .social-link:hover {
  color: var(--ink-cream);
  background: rgba(255, 248, 232, 0.08);
  border-color: rgba(255, 248, 232, 0.25);
}

/* —— middle: four columns, restrained typography —— */
.powfu-footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding: 56px 0 48px;
}
.powfu-footer-col h4 {
  font-family: var(--font-serif-sc);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 248, 232, 0.55);
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 248, 232, 0.1);
}
.powfu-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.powfu-footer-links a {
  font-family: var(--font-display);
  font-size: 14px;
  color: rgba(255, 248, 232, 0.75);
  text-decoration: none;
  transition: color 160ms ease, transform 160ms ease;
  display: inline-block;
}
.powfu-footer-links a:hover {
  color: var(--ink-cream);
  transform: translateX(2px);
}

/* —— bottom strip —— */
.powfu-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 248, 232, 0.08);
  color: rgba(255, 248, 232, 0.4);
}
.powfu-footer-bottom small {
  font-family: var(--font-serif-sc);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.powfu-footer-bottom-r { font-style: italic; opacity: 0.7; }

/* Override the old footer-inner grid since we restructured */
.powfu-footer-inner { display: none !important; }

@media (max-width: 760px) {
  .powfu-footer-cols { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .powfu-footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
}

/* ============================================================
   SINGLES MAP — parchment map with thumbtack pins
   ============================================================ */
/* full-bleed wooden backdrop behind the singles map section.
   background-attachment: fixed makes the wood stay stationary
   while content scrolls past it for a subtle parallax feel. */
.singles-map-section {
  padding: 80px 0 96px;
  background:
    linear-gradient(rgba(255, 248, 232, 0.16), rgba(255, 248, 232, 0.16)),
    url('assets/calendar-wood.jpg') center/cover no-repeat;
  background-attachment: fixed;
  /* Top hairline + top inset shadow REMOVED — myrecs sits directly
     above and shares the same wood texture, so the seam should be
     invisible. The bottom border is also dropped because the
     ::after below replaces it with a fade-to-cream gradient that
     dissolves the wood into whatever cream-backed section comes
     next (AlbumFeatures on the music page). */
  box-shadow: none;
  border-top: 0;
  border-bottom: 0;
  position: relative;
}
/* —— WOOD → CREAM BLEND (bottom of wood) ——————————————————
   The last wood-textured section on the music page is the singles
   map. Below it sits AlbumFeatures with the default cream page
   background. Without intervention, the wood texture stops at a
   hard edge against cream. This ::after paints a tall vertical
   gradient over the bottom ~240px that fades from transparent
   (full wood visible) through a soft cream wash up to fully cream
   at the bottom — so the wood naturally dissolves into the cream
   of the next section. Height matches the top blend (240px) for
   visual symmetry across the wood block. */
.singles-map-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 240px;
  /* Softer cream wash — the alpha curve now stays low for longer
     and only reaches near-solid right at the bottom edge, so the
     wood remains clearly visible through most of the transition
     zone. Previous version peaked too aggressively (0.82 cream by
     78% of the way down), washing out too much of the wood. */
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 248, 232, 0.18) 50%,
    rgba(255, 248, 232, 0.50) 82%,
    var(--bg) 100%
  );
  pointer-events: none;
  z-index: 1;
}
.singles-map-section > * { position: relative; z-index: 2; }
/* reset the previous panel styling that was on the inner wrap */
.singles-map-section .wrap {
  position: relative;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
/* background-attachment: fixed is janky on iOS Safari — fall
   back to scroll so the wood still appears, just not parallaxed */
@media (max-width: 820px) {
  .singles-map-section {
    background-attachment: scroll;
    padding: 56px 0 64px;
  }
  .singles-map-section::after { height: 160px; }
}

.singles-map {
  position: relative;
  margin-top: 32px;
  aspect-ratio: 5 / 3;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 24px 60px -28px rgba(43, 29, 21, 0.55),
    0 12px 24px -16px rgba(43, 29, 21, 0.35),
    inset 0 0 0 1px rgba(75, 47, 34, 0.18);
}
.singles-map-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.singles-map-pins {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.singles-map-pins > * { pointer-events: auto; }

/* The pin button itself */
.map-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  filter: drop-shadow(0 2px 4px rgba(43,29,21,0.35));
  transition: transform 220ms ease, filter 220ms ease;
}
.map-pin:hover,
.map-pin.is-active,
.map-pin:focus-visible {
  transform: translate(-50%, calc(-100% - 3px));
  filter: drop-shadow(0 6px 10px rgba(163,61,61,0.4));
  outline: none;
  z-index: 5;
}
.map-pin-place {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 11px;
  color: rgba(75,47,34,0.85);
  white-space: nowrap;
  text-shadow:
    0 1px 0 rgba(255,248,232,0.7),
    0 -1px 0 rgba(255,248,232,0.7),
    1px 0 0 rgba(255,248,232,0.7),
    -1px 0 0 rgba(255,248,232,0.7);
  opacity: 0;
  transition: opacity 220ms ease;
}
.map-pin:hover .map-pin-place,
.map-pin.is-active .map-pin-place,
.map-pin:focus-visible .map-pin-place {
  opacity: 1;
}

/* The card that pops up when a pin is active */
.map-card {
  position: absolute;
  z-index: 10;
  width: 260px;
  padding: 12px;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow:
    0 24px 48px -20px rgba(43,29,21,0.55),
    0 8px 16px -8px rgba(43,29,21,0.35);
  pointer-events: auto;
  /* default: above-right of pin */
  transform: translate(20px, -100%) translateY(-16px);
}
.map-card.is-left  { transform: translate(-100%, -100%) translate(-20px, -16px); }
.map-card.is-below { transform: translate(20px, 12px); }
.map-card.is-left.is-below { transform: translate(-100%, 12px) translateX(-20px); }

.map-card-art .nature-photo {
  width: 80px;
  height: 80px;
  border-radius: 3px;
  overflow: hidden;
}
.map-card-body { min-width: 0; }
.map-card-place {
  display: block;
  margin-bottom: 2px;
  font-size: 9px;
  letter-spacing: 0.2em;
}
.map-card-title {
  font-family: var(--font-display);
  font-size: 16px;
  margin: 0 0 4px;
  color: var(--ink-espresso-deep);
  line-height: 1.2;
}
.map-card-meta {
  display: flex;
  gap: 4px;
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--fg-3);
  font-style: italic;
  margin-bottom: 6px;
}
.map-card-note {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--fg-2);
  line-height: 1.45;
  font-style: italic;
}
.map-card-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.map-card-play {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  font-family: var(--font-serif-sc);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--ink-espresso-deep);
  color: var(--ink-cream);
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
.map-card-play:hover { background: var(--ink-espresso); }
.map-card-link {
  font-family: var(--font-serif-sc);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-espresso);
  text-decoration: none;
}
.map-card-link:hover { color: var(--ink-espresso-deep); text-decoration: underline; }

@media (max-width: 720px) {
  .singles-map { aspect-ratio: 4 / 5; }
  .map-pin-place { display: none; }   /* labels under pins too cramped on mobile */
  .map-card {
    width: calc(100vw - 60px);
    max-width: 320px;
    transform: translate(-50%, -100%) translateY(-12px) !important;
    left: 50% !important;
    top: 30% !important;
  }
}


/* ============================================================
   ALBUM FEATURES — rich per-album sections
   ============================================================ */

/* ——————————————————————————————————————————————————————————
   ALBUM-FEATURES HEAD — Capital-A "Albums." heading with pop.
   The old heading was just an italic display "albums." inside a
   plain section-head, which read flat. New treatment:
     • Eyebrow above the heading
     • Oversized italic "A" that drops below the baseline and gets a
       hand-drawn underline arc, so the letter reads as a deliberate
       lead-in rather than just a capital
     • A small "07 records" count chip pinned to the baseline of
       the heading
     • A horizontal flourish under the whole row
   —————————————————————————————————————————————————————————— */
.album-features-head {
  position: relative;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.album-features-head .eyebrow {
  display: inline-block;
  margin-bottom: clamp(10px, 1.5vw, 18px);
  color: var(--ink-espresso, #4A2F22);
}
.album-features-title {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 2vw, 24px);
  flex-wrap: wrap;
  margin: 0;
  font-family: "Newsreader", Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(44px, 7.5vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--ink-espresso-deep, #2B1D15);
}
.album-features-title-a {
  position: relative;
  display: inline-block;
  font-size: 1.32em;
  line-height: 0.78;
  margin-right: -0.04em;
  /* Subtle warm-shadow extrusion gives the A weight against the
     flat cream background. */
  text-shadow:
    1px 1px 0 rgba(74, 47, 34, 0.18),
    2px 2px 0 rgba(74, 47, 34, 0.10),
    0 6px 18px rgba(74, 47, 34, 0.12);
}
.album-features-title-a::after {
  /* Hand-drawn underline arc beneath the A — a quadratic curve in
     an SVG data URI. */
  content: "";
  position: absolute;
  left: -6%;
  right: -10%;
  bottom: -0.06em;
  height: 0.16em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'><path d='M2 8 Q 30 1 60 6 T 118 4' stroke='%234A2F22' stroke-width='2.4' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.78;
  pointer-events: none;
}
.album-features-title-rest { display: inline-block; }
/* Count chip — gives the eye a number to latch onto and emphasizes
   that this is a body of work, not a one-off entry. */
.album-features-title-count {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-left: auto;
  padding: 6px 14px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-style: normal;
  font-size: clamp(11px, 1.2vw, 13px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(74, 47, 34, 0.7);
  background: rgba(74, 47, 34, 0.06);
  border: 1px solid rgba(74, 47, 34, 0.16);
  border-radius: 2px;
  align-self: center;
}
.album-features-title-num {
  font-family: "Newsreader", Georgia, serif;
  font-style: italic;
  font-size: 1.5em;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-espresso-deep, #2B1D15);
}
.album-features-flourish {
  display: block;
  margin-top: clamp(14px, 2vw, 22px);
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(74, 47, 34, 0.28) 14%,
    rgba(74, 47, 34, 0.28) 86%,
    transparent 100%);
}
@media (max-width: 640px) {
  .album-features-title { gap: 6px 14px; }
  .album-features-title-count { margin-left: 0; }
}

.album-features-list {
  display: flex;
  flex-direction: column;
  gap: 96px;
  margin-top: 48px;
}
.album-feature {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 56px;
  align-items: start;
}
.album-feature.is-reversed { direction: rtl; }
.album-feature.is-reversed > * { direction: ltr; }

.album-feature-art .nature-photo {
  width: 100%;
  border-radius: 4px;
  box-shadow:
    0 24px 48px -20px rgba(43, 29, 21, 0.5),
    0 12px 20px -10px rgba(43, 29, 21, 0.3);
}

.album-feature-body { min-width: 0; }
.album-feature-eyebrow { display: block; margin-bottom: 10px; }
.album-feature-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3.5vw, 38px);
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  line-height: 1.1;
}
.album-feature-blurb {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.65;
  color: var(--fg-2);
  margin: 0 0 28px;
  max-width: 580px;
}

/* tracks */
.album-feature-tracks {
  margin-bottom: 28px;
  padding-top: 20px;
  border-top: 1px dashed var(--border-faint);
}
.album-feature-tracks h4,
.album-feature-linkcol h4 {
  font-family: var(--font-serif-sc);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 12px;
}
.album-feature-tracks ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: tracknum;
}
.album-feature-tracks ol li {
  counter-increment: tracknum;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-espresso-deep);
  padding: 8px 0;
  border-bottom: 1px dashed var(--border-faint);
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: baseline;
}
.album-feature-tracks ol li::before {
  content: counter(tracknum, decimal-leading-zero);
  font-family: var(--font-serif-sc);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--fg-3);
}
.album-feature-tracks-note {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12px;
  color: var(--fg-3);
}

/* interviews + videos columns */
.album-feature-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding-top: 20px;
  border-top: 1px dashed var(--border-faint);
  margin-bottom: 24px;
}
.album-feature-linkcol ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.album-feature-linkcol a {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink-espresso-deep);
  text-decoration: none;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}
.album-feature-source {
  font-family: var(--font-serif-sc);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.album-feature-headline { font-style: italic; }
.album-feature-linkcol a:hover .album-feature-headline {
  text-decoration: underline;
}

/* CTA */
.album-feature-cta {
  display: inline-block;
  padding: 10px 18px;
  font-family: var(--font-serif-sc);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-cream);
  background: var(--ink-espresso-deep);
  border-radius: 3px;
  text-decoration: none;
  transition: background-color 200ms ease;
}
.album-feature-cta:hover { background: var(--ink-espresso); }

@media (max-width: 800px) {
  .album-feature {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .album-feature.is-reversed { direction: ltr; }
  .album-feature-art .nature-photo { max-width: 360px; }
  .album-features-list { gap: 64px; }
  .album-feature-links { grid-template-columns: 1fr; gap: 20px; }
}

/* ============================================================
   3D HEADERS — layered text-shadows for depth across all section
   titles and page headers. Subtle stacked solid offsets + one
   soft blur creates an embossed-letterpress feel without going
   cheesy. Brown ink on cream paper.
   ============================================================ */

/* Standard section headings (album-list, eps-list, dbs-title, etc.) */
.section-head h2,
.about-h,
.album-feature-title,
.dbs-title,
.album-title,
.powfu-latest-title {
  text-shadow:
    1px 1px 0 rgba(75, 47, 34, 0.06),
    2px 2px 0 rgba(75, 47, 34, 0.05),
    3px 3px 0 rgba(75, 47, 34, 0.04),
    4px 6px 14px rgba(75, 47, 34, 0.16);
}

/* Large page header titles (top of Music, Shows, About, Press pages).
   Bigger type warrants a heavier shadow stack. */
.page-header-title {
  text-shadow:
    1px 1px 0 rgba(75, 47, 34, 0.08),
    2px 2px 0 rgba(75, 47, 34, 0.07),
    3px 3px 0 rgba(75, 47, 34, 0.05),
    4px 4px 0 rgba(75, 47, 34, 0.04),
    6px 10px 20px rgba(75, 47, 34, 0.22);
}

/* Even heavier when the header sits on a sculpted backdrop */
.page-header-title.is-shows {
  text-shadow:
    1px 1px 0 rgba(0, 0, 0, 0.18),
    2px 2px 0 rgba(0, 0, 0, 0.16),
    3px 3px 0 rgba(0, 0, 0, 0.14),
    4px 4px 0 rgba(0, 0, 0, 0.12),
    5px 5px 0 rgba(0, 0, 0, 0.10),
    8px 14px 28px rgba(0, 0, 0, 0.4);
}

/* The footer wordmark gets a quiet version since it sits on darker bg */
.powfu-footer-mark {
  text-shadow:
    1px 1px 0 rgba(255, 248, 232, 0.05),
    2px 4px 12px rgba(0, 0, 0, 0.35);
}

/* ============================================================
   CALENDAR PAGE FLIP — tactile notebook-style turn
   ============================================================ */
/* Stage: container provides perspective so the child can rotate in 3D */
.show-cal {
  perspective: 2000px;
  perspective-origin: 50% 30%;
}

/* The page itself — preserves 3D and gets rotated by the animations */
.show-cal-page {
  position: relative;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

/* When `.flip-next` is on the page, the JS at the same time swaps the
   month state at the 50% mark. The keyframe rotates the page to edge-on
   (invisible) at midpoint, then back. The opacity dip at the midpoint
   hides any flash during the React content swap. */
.show-cal-page.flip-next {
  animation: calFlipNext 560ms cubic-bezier(0.55, 0, 0.45, 1) both;
  transform-origin: right center;
}
.show-cal-page.flip-prev {
  animation: calFlipPrev 560ms cubic-bezier(0.55, 0, 0.45, 1) both;
  transform-origin: left center;
}

@keyframes calFlipNext {
  0%   { transform: rotateY(0deg); opacity: 1; }
  45%  { transform: rotateY(-88deg); opacity: 0.15; }
  50%  { transform: rotateY(90deg); opacity: 0.15; }
  55%  { transform: rotateY(88deg); opacity: 0.4; }
  100% { transform: rotateY(0deg); opacity: 1; }
}
@keyframes calFlipPrev {
  0%   { transform: rotateY(0deg); opacity: 1; }
  45%  { transform: rotateY(88deg); opacity: 0.15; }
  50%  { transform: rotateY(-90deg); opacity: 0.15; }
  55%  { transform: rotateY(-88deg); opacity: 0.4; }
  100% { transform: rotateY(0deg); opacity: 1; }
}

/* Paper-crease sweep — a thin shadow line that travels across the page
   during a flip, reinforcing the page-turn illusion */
.show-cal-page::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(43, 29, 21, 0) 0%,
    rgba(43, 29, 21, 0.10) 50%,
    rgba(43, 29, 21, 0) 100%
  );
  opacity: 0;
  pointer-events: none;
}
.show-cal-page.flip-next::after { animation: creaseSweepRight 560ms ease-in-out; }
.show-cal-page.flip-prev::after { animation: creaseSweepLeft  560ms ease-in-out; }
@keyframes creaseSweepRight {
  0%, 100% { opacity: 0; transform: translateX(-100%); }
  50%      { opacity: 1; transform: translateX(0); }
}
@keyframes creaseSweepLeft {
  0%, 100% { opacity: 0; transform: translateX(100%); }
  50%      { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .show-cal-page.flip-next,
  .show-cal-page.flip-prev,
  .show-cal-page.flip-next::after,
  .show-cal-page.flip-prev::after { animation: none; }
}

/* ============================================================
   FOOTER — final, comprehensive layout (overrides any prior rules)
   ============================================================ */
.powfu-footer {
  background:
    linear-gradient(180deg, #1f130a 0%, #14090a 100%);
  color: var(--ink-cream);
  padding: 72px 0 28px;
  margin-top: 80px;
  border-top: 1px solid rgba(255, 248, 232, 0.08);
  position: relative;
}
.powfu-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  width: 6px; height: 6px;
  background: var(--ink-bone);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(255, 220, 160, 0.4);
}

/* Old inner rule from earlier design — suppress so it doesn't conflict */
.powfu-footer-inner { display: none !important; }

/* top brand band */
.powfu-footer-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding-bottom: 56px;
  border-bottom: 1px dashed rgba(255, 248, 232, 0.12);
  margin-bottom: 56px;
}
.powfu-footer-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(56px, 9vw, 92px);
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1;
  color: var(--ink-cream);
}
.powfu-footer-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: rgba(255, 248, 232, 0.65);
  max-width: 480px;
  margin: 0;
  line-height: 1.5;
}
.powfu-footer-socials {
  margin-top: 10px;
}
.powfu-footer-socials .social-link {
  background: rgba(255, 248, 232, 0.04);
  color: var(--ink-cream);
  border-color: rgba(255, 248, 232, 0.15);
}
.powfu-footer-socials .social-link:hover {
  background: rgba(232, 184, 106, 0.15);
  color: #E8B86A;
  border-color: #E8B86A;
}

/* four-column nav */
.powfu-footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
  padding-bottom: 48px;
  margin-bottom: 32px;
  border-bottom: 1px dashed rgba(255, 248, 232, 0.08);
}
.powfu-footer-col h4 {
  font-family: var(--font-serif-sc);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 248, 232, 0.5);
  margin: 0 0 16px;
  font-weight: 500;
}
.powfu-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.powfu-footer-links li { margin: 0; }
.powfu-footer-links a {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: rgba(255, 248, 232, 0.78);
  text-decoration: none;
  letter-spacing: 0;
  transition: color 200ms ease, padding-left 200ms ease;
  display: inline-block;
}
.powfu-footer-links a:hover {
  color: #E8B86A;
  padding-left: 4px;
}

/* bottom strip */
.powfu-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.powfu-footer-bottom small {
  font-family: var(--font-serif-sc);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 248, 232, 0.4);
}
.powfu-footer-bottom-r {
  font-style: italic;
}

@media (max-width: 900px) {
  .powfu-footer-cols { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
@media (max-width: 540px) {
  .powfu-footer { padding-top: 56px; }
  .powfu-footer-cols { grid-template-columns: 1fr; gap: 28px; }
  .powfu-footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
  .powfu-footer-mark { font-size: 56px; }
}

/* ============================================================
   ABOUT — QUOTES GRID
   Sourced direct-quote cards on the About page. Two columns on
   wide screens, single column on mobile. The cards feel like a
   pull-quote section in a magazine spread: a large opening
   curly-quote glyph, italic body, and a small attribution line.
   ============================================================ */
.about-quotes { padding-top: 12px; }

.quotes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 28px;
}
@media (max-width: 720px) {
  .quotes-grid { grid-template-columns: 1fr; gap: 22px; }
}

.quote-card {
  margin: 0;
  padding: 28px 30px 22px;
  border-left: 2px solid var(--ink-espresso, #674636);
  background: rgba(255, 248, 232, 0.04);
  position: relative;
}
.quote-body {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.62;
  color: var(--fg-1, var(--ink-espresso-deep));
  position: relative;
}
.quote-mark {
  font-family: var(--font-display);
  font-style: normal;
  font-size: 1.6em;
  line-height: 0;
  color: var(--ink-espresso, #674636);
  opacity: 0.55;
  vertical-align: -0.18em;
  margin-right: 2px;
}
.quote-mark.is-close { margin-left: 2px; margin-right: 0; }
.quote-attr {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-2, #8c7660);
}
.quote-source { font-weight: 500; color: var(--fg-1); }
.quote-date::before { content: "·"; margin-right: 8px; opacity: 0.5; }

/* ============================================================
   PAPER CRINKLES — extra realism on the AboutBio aged paper.
   Three additional layered ::after-style overlays:
     • a faint horizontal mid-fold (where the letter was folded
       in half before being sent)
     • a few small crease shadows around the edges
     • a low-opacity SVG of soft wrinkle lines, rotated so each
       artist would draw it differently — gives the eye something
       to land on without overwhelming the prose.
   Mix-blend-mode: multiply keeps every layer reading as aged ink
   on warm cream rather than overlay-grey.
   ============================================================ */
/* ============================================================
   ABOUT — RECOGNITION PANEL
   (See block below — formerly two separate sections, now one.)
   ============================================================ */

/* ============================================================
   ABOUT — RECOGNITION PANEL
   One unified card. A featured stat strip up top calls out the
   four headline numbers; below it, ONE continuous table lists
   every award, certification, and chart peak with identical row
   geometry, so the whole panel reads as a single document.
   ============================================================ */
.about-recognition { padding-top: 56px; padding-bottom: 56px; }
.about-recognition .section-head { margin-bottom: 28px; }

/* —— The card itself ——————————————————————————————————————— */
.recog-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border-faint);
  border-radius: 10px;
  padding: clamp(24px, 4vw, 44px) clamp(20px, 4vw, 44px);
  box-shadow:
    0 1px 0 var(--border-faint),
    0 28px 56px -32px rgba(75, 47, 34, 0.20);
}

/* —— Featured stat strip ————————————————————————————————————
   Four hero stats, evenly distributed across the top. Thin
   vertical hairlines separate them — like the masthead numbers
   on a financial paper. */
.recog-headline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 8px 0 26px;
}
.recog-stat {
  text-align: center;
  padding: 8px 14px;
  position: relative;
}
/* hairline divider between stats (skip the leading edge) */
.recog-stat + .recog-stat::before {
  content: "";
  position: absolute;
  left: 0; top: 18%; bottom: 18%;
  width: 1px;
  background: var(--border-faint);
}
.recog-stat-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1;
  color: var(--ink-espresso-deep);
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  margin-bottom: 8px;
}
.recog-stat-x {
  font-size: 0.42em;
  font-style: italic;
  font-weight: 400;
  color: var(--ink-espresso);
  margin-left: 2px;
  letter-spacing: 0.02em;
  transform: translateY(-0.4em);
  display: inline-block;
}
.recog-stat-n {
  font-size: 1em;
  font-weight: 500;
  margin-left: 4px;
  color: var(--ink-espresso-deep);
}
.recog-stat-lbl {
  font-family: var(--font-serif-sc, "Cormorant Garamond", serif);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-espresso-deep);
  margin-bottom: 3px;
}
.recog-stat-sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.3;
}

/* —— Rule between the headline and the table —————————————— */
.recog-rule {
  position: relative;
  height: 1px;
  background: var(--border-faint);
  margin: 8px 0 26px;
  text-align: center;
}
.recog-rule-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  padding: 0 14px;
  background: var(--bg-panel);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-espresso);
  opacity: 0.65;
  line-height: 1;
}

/* —— Table column header —————————————————————————————————— */
.recog-list-header {
  display: grid;
  grid-template-columns: 56px 110px 1fr 130px;
  gap: 16px;
  align-items: center;
  padding: 0 4px 10px;
  border-bottom: 1px solid var(--ink-espresso);
  margin-bottom: 4px;
  font-family: var(--font-serif-sc, "Cormorant Garamond", serif);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-espresso-deep);
}
.recog-list-header .recog-col-result { text-align: right; }

/* —— Row list ———————————————————————————————————————————— */
.recog-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.recog-item {
  display: grid;
  grid-template-columns: 56px 110px 1fr 130px;
  gap: 16px;
  align-items: center;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border-faint);
  transition: background-color 140ms ease;
}
.recog-item:last-child { border-bottom: none; }
.recog-item:hover { background: rgba(218, 195, 156, 0.10); }

.recog-year {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 15px;
  color: var(--fg-2);
  line-height: 1;
}

.recog-kind {
  display: flex;
  align-items: center;
  gap: 8px;
}
.recog-kind-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--ink-espresso);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}
.recog-item.is-award .recog-kind-dot { background: #c19a5e; }   /* gold */
.recog-item.is-cert  .recog-kind-dot { background: var(--ink-sage-deep); }
.recog-item.is-chart .recog-kind-dot { background: var(--ink-espresso); }

.recog-kind-label {
  font-family: var(--font-serif-sc, "Cormorant Garamond", serif);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.recog-body { min-width: 0; }
.recog-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  color: var(--fg-1);
  line-height: 1.3;
  margin: 0;
}
.recog-detail {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.35;
  margin-top: 2px;
}

.recog-result {
  text-align: right;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-espresso-deep);
  line-height: 1.1;
  letter-spacing: 0.005em;
}
.recog-item.is-nom .recog-result {
  font-weight: 400;
  color: var(--fg-3);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* —— Responsive: stack year+kind left, body+result right ———— */
@media (max-width: 720px) {
  .recog-headline { grid-template-columns: repeat(2, 1fr); gap: 8px 0; padding-bottom: 18px; }
  .recog-headline .recog-stat + .recog-stat::before { display: none; }
  .recog-headline .recog-stat:nth-child(odd) { border-right: 1px solid var(--border-faint); }
  .recog-headline .recog-stat:nth-child(-n+2) { border-bottom: 1px solid var(--border-faint); padding-bottom: 18px; }
  .recog-headline .recog-stat:nth-last-child(-n+2) { padding-top: 18px; }
  .recog-stat-num { font-size: 38px; }
  .recog-stat-lbl { font-size: 11px; }

  .recog-list-header { display: none; }
  .recog-item {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "kind   result"
      "body   body";
    gap: 6px 12px;
    padding: 14px 4px;
  }
  .recog-year { display: none; }
  .recog-kind   { grid-area: kind; }
  .recog-body   { grid-area: body; }
  .recog-result { grid-area: result; font-size: 14px; }
  .recog-item.is-nom .recog-result { font-size: 11px; }
}

@media (max-width: 480px) {
  .recog-panel { padding: 18px 16px; border-radius: 8px; }
}

/* ============================================================
   ABOUT — ALL LINKS BUTTON GRID
   One consolidated row of every social + streaming + commerce
   link Powfu maintains. Auto-flowing grid so it adapts to width.
   ============================================================ */
.about-all-links { padding-top: 40px; padding-bottom: 56px; }
.all-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 22px;
}
.all-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border-faint);
  border-radius: 6px;
  background: var(--bg-panel);
  color: var(--fg-1);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
  position: relative;
}
.all-link:hover {
  background: var(--ink-espresso-deep);
  color: var(--ink-cream);
  border-color: var(--ink-espresso-deep);
  transform: translateY(-1px);
}
.all-link:hover .all-link-arrow { opacity: 1; transform: translate(2px, -2px); }
.all-link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  color: inherit;
  flex-shrink: 0;
}
.all-link-label { flex: 1; }
.all-link-arrow {
  opacity: 0.4;
  transition: opacity 160ms ease, transform 160ms ease;
}
/* Tiny left-edge accent stripe per kind, for at-a-glance grouping */
.all-link::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: var(--ink-sage-deep);
  opacity: 0.6;
  transition: opacity 160ms ease;
}
.all-link.al-kind-stream::before { background: var(--ink-espresso); }
.all-link.al-kind-social::before { background: var(--ink-sage-deep); }
.all-link.al-kind-other::before  { background: #a0876a; }
.all-link:hover::before { opacity: 1; }

/* ============================================================
   PRESS PAGE — magazine-style masthead + mixed-size grid.
   The page emulates the front of a newspaper: a banded
   masthead at the top, then a CSS-grid of articles where each
   card spans a different number of columns + rows. Cards lean
   into newspaper typography — black serif italic, eyebrows with
   a small dot separator, and a faint hairline border.
   ============================================================ */

/* —— Masthead band —— */
.press-masthead {
  padding: 72px 0 28px;
  background: var(--bg);
  text-align: center;
  /* Need relative positioning + isolation so the absolute-positioned
     photo backdrop sits behind the content, not behind the whole page. */
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Atmospheric photo behind the press masthead — a rainy rooftop
   illustration tinted heavily toward cream so the dark espresso
   typography on top stays readable. Same recipe as the other page
   heroes (warm-sepia photo filter), but with a much stronger cream
   wash over it because this hero's text is dark-on-light rather
   than light-on-dark like shows/music. */
.press-masthead-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.press-masthead-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Same warm sepia treatment as NaturePhoto so it feels of-a-piece
     with the music / shows hero photos. */
  filter: saturate(0.55) contrast(1.04) brightness(0.94) sepia(0.18);
  display: block;
}
.press-masthead-bg-overlay {
  position: absolute;
  inset: 0;
  /* —— LIGHTER CREAM WASH ——
     The overlay was previously 86%/78%/84% opaque which essentially
     buried the photo. The artist wanted to actually see the rainy
     rooftop illustration underneath. New gradient is much more
     transparent (45%/35%/50%) — enough cream tint to keep the
     dark blackletter masthead type readable, but transparent
     enough that the photo's silhouettes, color, and atmosphere
     come through. To compensate for the lighter wash, the press
     masthead type below now has a soft cream text-shadow for legibility. */
  background:
    linear-gradient(
      180deg,
      rgba(255, 248, 232, 0.45) 0%,
      rgba(255, 248, 232, 0.32) 50%,
      rgba(252, 243, 222, 0.55) 100%
    );
}
/* Text-shadow on the masthead title compensates for the more
   transparent overlay — gives the dark serif/blackletter a soft
   cream halo so it stays legible against the now-visible photo. */
.press-masthead-title,
.press-masthead-side,
.press-masthead-row,
.press-tagline {
  text-shadow:
    0 1px 0 rgba(255, 248, 232, 0.85),
    0 0 12px rgba(255, 248, 232, 0.55);
}
.press-masthead-inner {
  /* Just a positioning context so the content sits above z-index:-1
     backdrop on browsers that ignore isolation. */
  position: relative;
}
.press-rule {
  height: 1px;
  background: var(--ink-espresso-deep);
  opacity: 0.85;
  margin: 4px 0;
}
.press-rule + .press-rule { display: none; }
.press-rule-sm { opacity: 0.4; }
.press-masthead-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  padding: 16px 4px;
}
.press-masthead-title {
  margin: 0;
  font-family: "UnifrakturMaguntia", var(--font-display), serif;
  font-weight: 400;
  font-size: clamp(48px, 6.5vw, 92px);
  line-height: 1;
  color: var(--ink-espresso-deep);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.press-masthead-side {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-serif-sc, "Cormorant Garamond", serif);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.press-masthead-side.is-left  { text-align: right; }
.press-masthead-side.is-right { text-align: left;  }
.press-masthead-edition,
.press-masthead-date {
  /* Was 500-weight — bumped to 800 for clearer readability against
     the now-visible photo backdrop. Slightly larger size too. */
  font-weight: 800;
  font-size: 14px;
  color: var(--ink-espresso-deep);
  letter-spacing: 0.02em;
}
.press-masthead-tag {
  /* Bolder + larger so the secondary line under the date carries
     proper editorial weight. Italic stays for the magazine-tagline
     feel. */
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.04em;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-espresso-deep);
}
.press-masthead-eyebrow {
  margin-top: 16px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-espresso-deep);
  text-align: center;
  line-height: 1.5;
}
.press-masthead-cta {
  display: inline-block;
  font-family: var(--font-serif-sc, "Cormorant Garamond", serif);
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-espresso-deep);
  background: rgba(75, 47, 34, 0.06);
  border: 1px solid rgba(75, 47, 34, 0.20);
  border-radius: 999px;
  padding: 3px 12px;
  margin: 0 3px;
  text-decoration: none;
  vertical-align: baseline;
  transition: background-color 160ms ease, transform 160ms ease, border-color 160ms ease;
}
.press-masthead-cta:hover {
  background: rgba(75, 47, 34, 0.14);
  border-color: rgba(75, 47, 34, 0.36);
  transform: translateY(-1px);
}
@media (max-width: 720px) {
  .press-masthead { padding-top: 56px; }
  .press-masthead-row { grid-template-columns: 1fr; text-align: center; gap: 10px; }
  .press-masthead-side { font-size: 10px; }
  .press-masthead-side.is-left,
  .press-masthead-side.is-right { text-align: center; }
  .press-masthead-title { white-space: normal; line-height: 0.95; }
}

/* —— Front-page grid —— */
.press-frontpage { padding-top: 36px; padding-bottom: 56px; }
.press-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 22px;
  grid-auto-flow: dense;          /* lets short cards backfill behind tall ones */
}

/* Default card chrome — applies to every press card */
.press-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--border-faint);
  border-radius: 4px;
  text-decoration: none;
  color: var(--fg-1);
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.press-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 36px -22px rgba(43, 29, 21, 0.45);
  border-color: var(--ink-espresso);
}

.press-card-photo {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56%;
  overflow: hidden;
}
.press-card-photo .nature-photo,
.press-card-photo .nature-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.press-card-body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.press-card-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-serif-sc, "Cormorant Garamond", serif);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.press-card-source { font-weight: 600; color: var(--ink-espresso-deep); }
.press-card-dot    { opacity: 0.5; }
.press-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--ink-espresso-deep);
  line-height: 1.18;
}
.press-card-blurb {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0;
}
.press-card-link {
  margin-top: auto;
  padding-top: 6px;
  font-family: var(--font-serif-sc, "Cormorant Garamond", serif);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-espresso-deep);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* —— Size variants —————————————————————————————————————————— */
.press-card--hero {
  grid-column: span 8;
  grid-row: span 2;
}
.press-card--hero .press-card-title { font-size: clamp(28px, 3.4vw, 42px); }
.press-card--hero .press-card-photo { padding-bottom: 48%; }
.press-card--hero .press-card-body  { padding: 28px 32px 30px; gap: 14px; }

.press-card--lg-r {
  grid-column: span 4;
  grid-row: span 1;
}
.press-card--lg-r .press-card-title { font-size: 20px; }
.press-card--lg-r .press-card-photo { padding-bottom: 50%; }
.press-card--lg-r .press-card-body  { padding: 18px 20px 20px; gap: 8px; }
.press-card--lg-r .press-card-blurb { font-size: 13px; }

.press-card--md {
  grid-column: span 4;
}
.press-card--md .press-card-title { font-size: 19px; }
.press-card--md .press-card-photo { padding-bottom: 60%; }
.press-card--md .press-card-body  { padding: 18px 20px; gap: 8px; }

.press-card--sm {
  grid-column: span 3;
}
.press-card--sm .press-card-title { font-size: 16px; line-height: 1.25; }
.press-card--sm .press-card-body  { padding: 16px 18px; gap: 6px; }

/* —— Pull-quote breaker —————————————————————————————————————— */
.press-pull-quote {
  grid-column: 1 / -1;
  margin: 12px 0;
  padding: 36px 32px;
  background: var(--ink-espresso-deep);
  color: var(--ink-cream);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  isolation: isolate;
}
.press-pull-quote::before,
.press-pull-quote::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px;
  height: 1px;
  background: rgba(255, 248, 232, 0.25);
}
.press-pull-quote::before { top: 8px; }
.press-pull-quote::after  { bottom: 8px; }
.press-pull-quote-body {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.45;
  color: var(--ink-cream);
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
}
.press-pull-mark {
  font-style: normal;
  font-size: 1.4em;
  line-height: 0;
  vertical-align: -0.18em;
  opacity: 0.55;
  margin-right: 2px;
}
.press-pull-mark.is-close { margin-left: 2px; margin-right: 0; }
.press-pull-quote-attr {
  font-family: var(--font-serif-sc, "Cormorant Garamond", serif);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255, 248, 232, 0.7);
}
.press-pull-quote-attr em {
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.05em;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink-cream);
}

/* Press contact footer — small typography between two thin rules */
.press-contact { padding: 24px 0 80px; }
.press-contact-inner { text-align: center; }
.press-contact .press-foot {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--fg-2);
  margin: 18px 0;
}

/* —— Press grid responsiveness ——————————————————————————————— */
@media (max-width: 1000px) {
  .press-card--hero { grid-column: span 12; }
  .press-card--lg-r { grid-column: span 6; }
  .press-card--md   { grid-column: span 6; }
  .press-card--sm   { grid-column: span 6; }
}
@media (max-width: 640px) {
  .press-grid { gap: 16px; }
  .press-card--hero,
  .press-card--lg-r,
  .press-card--md,
  .press-card--sm { grid-column: span 12; }
  .press-card--hero { grid-row: auto; }
  .press-card--hero .press-card-title { font-size: 24px; }
  .press-pull-quote { padding: 24px 20px; margin: 4px 0; }
}

/* ============================================================
   PRESS — DESK SCRIBBLES
   Two columns of handwritten quotes and doodles down the left
   and right page gutters, like graffiti accumulated across a
   wooden school desk over an entire semester. The columns span
   the full HEIGHT of the press page — so as you scroll, new
   scribbles come into view because there's more "desk" below.
   Each individual scribble stays put on the page; nothing moves
   in response to scroll. It's just one tall, fixed-content
   background, revealed as you scroll past it.
   Hidden on viewports too narrow to host gutters without
   crowding the content column.
   ============================================================ */
.press-page-stage {
  position: relative;   /* anchor for the absolute scribble columns */
}

.press-scribbles {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(120px, 12vw, 180px);
  pointer-events: none;
  z-index: 2;       /* above page bg, below banner/cards */
  overflow: hidden;
  animation: scribbleFadeIn 900ms ease-out 160ms both;
}
.press-scribbles.is-left  { left: 0; padding-left: 4px;  padding-right: 4px; }
.press-scribbles.is-right { right: 0; padding-left: 4px; padding-right: 4px; }

@keyframes scribbleFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Hide the scribbles on viewports where the gutter would shrink
   beneath the press content. At < 1180px the press grid spans the
   full container, so there is no gutter to fill. */
@media (max-width: 1180px) {
  .press-scribbles { display: none; }
}

/* Each scribble is absolutely positioned at top% of the column,
   centered horizontally, then rotated for that "scratched in"
   feel. Whitespace is preserved so multi-line quotes break the
   way they were typed. */
.scribble {
  position: absolute;
  left: 50%;
  font-family: "Caveat", "Sacramento", cursive;
  white-space: pre-line;
  text-align: center;
  line-height: 1.1;
  letter-spacing: 0.01em;
  transform-origin: 50% 50%;
  /* slight rough edge — like ink that bled into the wood grain */
  text-shadow: 0 0 1px currentColor;
  pointer-events: none;
  user-select: none;
}

.scribble-quote.is-italic { font-style: italic; }
.scribble-quote.is-strike {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

/* "Carved in" style — bigger, blockier letters with a darker
   pseudo-shadow that suggests the letters were dug into wood. */
.scribble-quote.is-carved {
  font-family: var(--font-display, "Newsreader", serif);
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-shadow:
    0 0 1px currentColor,
    1px 0 0 currentColor,
    0 1px 0 currentColor,
    1px 1px 1px rgba(0,0,0,0.25);
}

/* "Heart-around-initials" style — a heart drawn around the
   text. Implemented with a ::before glyph since adding a real
   SVG would complicate the data structure. */
.scribble-quote.is-heart {
  position: absolute;
  padding: 2px 8px 4px;
}
.scribble-quote.is-heart::before {
  content: "";
  position: absolute;
  inset: -8px -10px -2px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 50'><path d='M30 46 C8 31, 4 16, 14 8 C 22 3, 28 11, 30 14 C 32 11, 38 3, 46 8 C 56 16, 52 31, 30 46 Z' fill='none' stroke='%238c2f2f' stroke-width='1.6'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: -1;
}

.scribble-doodle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   BANNER ICON ROWS — streaming alternatives left of Listen,
   socials right of Listen. Small mono icons in the banner ink
   color, with a subtle hover lift. Hidden on narrow viewports
   where they would crowd the nav.
   ============================================================ */
.powfu-banner-icons {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.powfu-banner-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--fg-2);
  text-decoration: none;
  border-radius: 4px;
  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
}
.powfu-banner-icons a:hover {
  color: var(--ink-espresso-deep);
  background: rgba(103, 70, 54, 0.08);
  transform: translateY(-1px);
}
.powfu-banner-icons a:focus-visible {
  outline: 2px solid var(--ink-espresso-deep);
  outline-offset: 2px;
}

/* Banner-right gap. Only one icon row remains (socials + Spotify
   as the last icon) so we no longer need separate margin tweaks
   between rows. The whole row tucks up next to the cart. */
.powfu-banner-right { gap: 10px; }
.powfu-banner-icons.is-socials { margin-right: 4px; }

/* Hide the social/streaming row on narrow viewports. Cart and
   hamburger remain visible. Mobile users can still reach
   socials + Spotify via the footer / about page. */
@media (max-width: 880px) {
  .powfu-banner-icons.is-socials { display: none; }
}

/* ============================================================
   ABOUT — SIDE QUOTES BACKGROUND
   Editorial pull-quote columns in the about-page side gutters.
   Anchored to the full height of the page so new quotes appear
   as the reader scrolls. Restrained, single-color treatment
   intentionally distinct from the press-page school-desk
   scribbles — this is a magazine profile spread, not graffiti.
   ============================================================ */
.about-page-stage {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  padding-bottom: clamp(64px, 8vw, 120px);
}

/* —— EDITORIAL VARIANT (June 2026) ——
   The wooden-table photograph + cream-tint overlay that used to
   live on .about-page-stage are gone. This variant runs on the
   site's default cream background (--bg) instead — clean stage,
   no fixed image, no overlay. A thin paper-grain shimmer is layered
   in for tactility (subtle, < 5% opacity) so the surface doesn't
   read as flat. */
.about-page-stage--editorial {
  background:
    /* very faint warm noise — barely there, gives the cream depth */
    radial-gradient(120% 80% at 20% 0%,  rgba(74, 47, 34, 0.04), transparent 70%),
    radial-gradient(120% 80% at 80% 100%, rgba(74, 47, 34, 0.03), transparent 70%),
    var(--bg, #FFF8E8);
}
.about-page-stage--editorial::before { display: none; }   /* legacy cream wash, not used */
.about-page-stage--editorial .about-recognition .wrap-narrow {
  /* No wood underneath anymore — drop the paper-plaque card so the
     achievements section reads flat against the cream stage like
     the rest of the site. */
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: clamp(32px, 5vw, 64px) clamp(20px, 3vw, 40px);
}

/* ============================================================
   ABOUT ME — editorial profile spread
   ============================================================ */
.aboutme {
  position: relative;
  padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 80px) clamp(56px, 8vw, 112px);
  color: var(--ink-espresso, #4A2F22);
  overflow: hidden;        /* clip the pull-quote breakouts on narrow screens */
}

/* Top eyebrow strip — left label · hairline rule · right metadata. */
.aboutme-strip {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto clamp(40px, 6vw, 72px);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(74, 47, 34, 0.62);
}
.aboutme-strip-l, .aboutme-strip-r { white-space: nowrap; }
.aboutme-strip-dash {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(74, 47, 34, 0.28) 18%, rgba(74, 47, 34, 0.28) 82%, transparent 100%);
}

/* Hero — display headline with a ghost quotation mark behind it. */
.aboutme-hero {
  position: relative;
  max-width: 1180px;
  margin: 0 auto clamp(48px, 7vw, 84px);
  text-align: center;
  padding-top: clamp(8px, 2vw, 20px);
}
.aboutme-quotemark {
  position: absolute;
  top: -0.18em;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Newsreader", Georgia, serif;
  font-weight: 200;
  font-style: italic;
  font-size: clamp(180px, 26vw, 360px);
  line-height: 1;
  color: rgba(74, 47, 34, 0.06);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.aboutme-eyebrow {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-family: "Cormorant Garamond", "Newsreader", Georgia, serif;
  font-style: italic;
  font-size: clamp(15px, 1.8vw, 19px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(74, 47, 34, 0.7);
  margin-bottom: clamp(18px, 2.4vw, 28px);
}
.aboutme-eyebrow::before,
.aboutme-eyebrow::after {
  content: "";
  display: inline-block;
  width: clamp(28px, 4vw, 56px);
  height: 1px;
  background: rgba(74, 47, 34, 0.4);
  vertical-align: middle;
  margin: 0 16px;
}
.aboutme-title {
  position: relative;
  z-index: 1;
  font-family: "Newsreader", Georgia, serif;
  font-weight: 300;
  font-size: clamp(48px, 9.5vw, 132px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink-espresso-deep, #2B1D15);
}
.aboutme-title-pn { font-weight: 300; opacity: 0.7; }

/* [Powfu] — the bracketed nickname inside the headline gets a very
   faint white halo. Single-stop text-shadow at low opacity reads as
   a whisper of light around just those characters — not a glow ring,
   not a neon outline. Per the artist's note ("really really light"):
   one shadow, low alpha, no animation. */
.aboutme-title-powfu {
  display: inline-block;
  color: var(--ink-espresso-deep, #2B1D15);
  text-shadow:
    0 0 8px  rgba(255, 255, 255, 0.32),
    0 0 18px rgba(255, 255, 255, 0.16);
}
.aboutme-title-italic {
  font-style: italic;
  font-weight: 300;
  color: rgba(74, 47, 34, 0.78);
  /* On wide viewports the italic phrase drops below the name for
     a more editorial split between subject and descriptor. */
  display: inline;
}
@media (min-width: 760px) {
  .aboutme-title-italic { display: block; font-size: 0.62em; margin-top: 8px; }
}
.aboutme-lede {
  position: relative;
  z-index: 1;
  font-family: "Newsreader", Georgia, serif;
  font-style: italic;
  font-size: clamp(16px, 1.7vw, 21px);
  line-height: 1.5;
  letter-spacing: 0.01em;
  max-width: 640px;
  margin: clamp(20px, 3vw, 36px) auto 0;
  color: rgba(74, 47, 34, 0.72);
}

/* Body — centered narrow column with absolute pull-quote breakouts. */
.aboutme-body {
  position: relative;
  max-width: 640px;
  margin: 0 auto clamp(56px, 8vw, 96px);
  padding: 0 clamp(0px, 2vw, 24px);
}
.aboutme-p {
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(16.5px, 1.45vw, 18.5px);
  line-height: 1.78;
  letter-spacing: 0.005em;
  margin: 0 0 clamp(20px, 2.4vw, 28px);
  color: rgba(43, 29, 21, 0.92);
}
.aboutme-p em {
  font-style: italic;
  color: var(--ink-espresso-deep, #2B1D15);
  font-weight: 500;
}
.aboutme-p--first {
  /* Slightly larger lede paragraph that opens the body. */
  font-size: clamp(17.5px, 1.6vw, 20.5px);
}
.aboutme-dropcap {
  float: left;
  font-family: "Newsreader", Georgia, serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(60px, 7vw, 92px);
  line-height: 0.86;
  padding: 4px 12px 0 0;
  color: var(--ink-espresso-deep, #2B1D15);
}
.aboutme-p--closer {
  font-style: italic;
  color: rgba(43, 29, 21, 0.85);
}
.aboutme-sign {
  margin: clamp(28px, 4vw, 40px) 0 0;
  text-align: right;
  font-family: "Cormorant Garamond", "Newsreader", Georgia, serif;
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 22px);
  color: rgba(74, 47, 34, 0.72);
  letter-spacing: 0.02em;
}

/* Year markers — small caps marginalia floating outside the column. */
.aboutme-yr {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(74, 47, 34, 0.42);
  pointer-events: none;
}
.aboutme-yr-num {
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 200;
  letter-spacing: 0;
  color: rgba(74, 47, 34, 0.34);
  font-feature-settings: "lnum" 1;
  margin-bottom: 4px;
}
.aboutme-yr-sub { white-space: nowrap; }
.aboutme-yr--top {
  top: -28px;
  left: clamp(-180px, -16vw, -60px);
}
.aboutme-yr--bot {
  bottom: clamp(40px, 6vw, 80px);
  right: clamp(-180px, -16vw, -60px);
}
@media (max-width: 900px) {
  /* On narrow screens the marginalia would overlap the column —
     pull them off-screen so the bio stays clean. They reappear on
     wider viewports as decorative breath marks. */
  .aboutme-yr { display: none; }
}

/* Pull-quote breakouts — italic display serif, slight rotation,
   floating in the margins on wide viewports, inline on narrow. */
.aboutme-pull {
  font-family: "Newsreader", Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: rgba(74, 47, 34, 0.84);
  position: relative;
  max-width: 320px;
  margin: clamp(32px, 5vw, 52px) auto;
  padding-left: 22px;
  /* Hairline accent rule on the left edge — like a quote rule
     in a print magazine. */
  border-left: 1.5px solid rgba(74, 47, 34, 0.35);
}
.aboutme-pull-mark {
  position: absolute;
  top: -0.3em;
  left: 4px;
  font-size: 2.2em;
  line-height: 1;
  font-style: normal;
  color: rgba(74, 47, 34, 0.18);
  pointer-events: none;
}
.aboutme-pull-text { position: relative; z-index: 1; }
@media (min-width: 1100px) {
  /* On wide screens the pull-quotes break out into the side margins
     so the bio column stays uninterrupted. Rotations are gentle —
     just enough to feel hand-placed without breaking legibility. */
  .aboutme-pull {
    position: absolute;
    margin: 0;
    width: 280px;
  }
  .aboutme-pull--right {
    top: clamp(60px, 8vw, 120px);
    right: clamp(-340px, -22vw, -280px);
    transform: rotate(1.5deg);
  }
  .aboutme-pull--left {
    top: 52%;
    left: clamp(-340px, -22vw, -280px);
    border-left: none;
    border-right: 1.5px solid rgba(74, 47, 34, 0.35);
    padding-left: 0;
    padding-right: 22px;
    text-align: right;
    transform: rotate(-1.5deg);
  }
  .aboutme-pull--left .aboutme-pull-mark {
    left: auto;
    right: 4px;
  }
}

/* Centerpiece pull-quote — full-width below the bio. */
.aboutme-centerpiece {
  position: relative;
  max-width: 880px;
  margin: 0 auto clamp(48px, 7vw, 80px);
  padding: clamp(36px, 5vw, 64px) clamp(40px, 6vw, 80px);
  text-align: center;
  font-family: "Newsreader", Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 3.2vw, 38px);
  line-height: 1.32;
  letter-spacing: -0.005em;
  color: var(--ink-espresso-deep, #2B1D15);
  /* Hairline top + bottom rules. */
  border-top: 1px solid rgba(74, 47, 34, 0.22);
  border-bottom: 1px solid rgba(74, 47, 34, 0.22);
}
.aboutme-centerpiece p { margin: 0; }
.aboutme-centerpiece-mark,
.aboutme-centerpiece-mark-end {
  position: absolute;
  font-family: "Newsreader", Georgia, serif;
  font-weight: 200;
  font-style: normal;
  font-size: clamp(80px, 10vw, 140px);
  line-height: 1;
  color: rgba(74, 47, 34, 0.14);
  pointer-events: none;
  user-select: none;
}
.aboutme-centerpiece-mark { top: 8px;    left: clamp(8px, 2vw, 24px); }
.aboutme-centerpiece-mark-end { bottom: -16px; right: clamp(8px, 2vw, 24px); }

/* Asterism between the bio spread and the awards section. */
.aboutme-asterism {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: clamp(24px, 4vw, 48px) auto 0;
  font-size: 16px;
  color: rgba(74, 47, 34, 0.42);
  letter-spacing: 0.6em;
}
.aboutme-asterism span:nth-child(2) { font-size: 22px; opacity: 0.6; }

/* (Legacy wood-fixed-attachment mobile rules removed — the editorial
   variant has no wood background to scroll-stabilize.) */
@media (max-width: 720px) {
  .about-page-stage .about-recognition .wrap-narrow {
    padding: 28px 20px;
  }
}

.about-side-quotes {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(180px, 14vw, 240px);
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  animation: aboutQuoteFadeIn 1100ms ease-out 180ms both;
}
.about-side-quotes.is-left  { left: 0;  padding: 0 16px; }
.about-side-quotes.is-right { right: 0; padding: 0 16px; }

@keyframes aboutQuoteFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Hidden on narrow viewports where the gutters disappear. */
@media (max-width: 1180px) {
  .about-side-quotes { display: none; }
}

/* Each pull-quote — figure with quote body, hairline, attribution. */
.about-quote {
  position: absolute;
  left: 50%;
  width: calc(100% - 24px);
  margin: 0;
  text-align: center;
  pointer-events: none;
  transform-origin: 50% 50%;
}

/* Quote body — italic Newsreader, low-opacity espresso ink.
   Typographic curly quote marks wrap the text via ::before/::after. */
.about-quote-text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  line-height: 1.46;
  letter-spacing: 0.005em;
  color: var(--ink-espresso-deep);
  opacity: 0.42;
  margin: 0 0 10px;
  padding: 0;
  border: none;
  quotes: "\201C" "\201D" "\2018" "\2019";
}
.about-quote-text::before {
  content: open-quote;
  margin-right: 1px;
  font-size: 1.1em;
  line-height: 0;
  vertical-align: -0.12em;
  opacity: 0.7;
}
.about-quote-text::after {
  content: close-quote;
  margin-left: 1px;
  font-size: 1.1em;
  line-height: 0;
  vertical-align: -0.12em;
  opacity: 0.7;
}

/* The thin hairline rule separating quote from attribution. */
.about-quote-rule {
  width: 28px;
  height: 1px;
  margin: 0 auto 8px;
  background: var(--ink-espresso-deep);
  opacity: 0.32;
}

/* Attribution line — small-caps serif, very low opacity. */
.about-quote-attr {
  font-family: var(--font-serif-sc, "Cormorant Garamond", serif);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-espresso-deep);
  opacity: 0.5;
  line-height: 1.4;
  font-weight: 500;
}
.about-quote-source { font-weight: 600; }
.about-quote-sep    { margin: 0 6px; opacity: 0.55; }
.about-quote-year   { font-style: italic; text-transform: none; letter-spacing: 0.06em; }

/* Emphasized quotes — bumped opacity, slightly more presence.
   Used for the two anchor lines per column ("Music from the
   mountains.", "Screw it I guess I'll upload it."). */
.about-quote.is-emphasized .about-quote-text { opacity: 0.55; }
.about-quote.is-emphasized .about-quote-rule { opacity: 0.42; width: 36px; }
.about-quote.is-emphasized .about-quote-attr { opacity: 0.62; }

/* ============================================================
   PRESS — INTERVIEWS GRID
   A uniform 4-up grid of clickable video thumbnails sitting
   inside the same press-frontpage wrap as the article cards.
   The "On Camera · NN Interviews" rule above it functions as a
   chapter break — same section, different format.
   ============================================================ */
.press-interviews {
  margin-top: 56px;
}

/* —— Editorial chapter rule with centered label ——————————————
   Two thin hairlines flanking a small-caps label. Reads as a
   continuation marker, not a hard section break. */
.press-interviews-divider {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 36px;
}
.press-interviews-divider::before,
.press-interviews-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ink-espresso);
  opacity: 0.42;
}
.press-interviews-divider-text {
  font-family: var(--font-serif-sc, "Cormorant Garamond", serif);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-espresso-deep);
  font-weight: 600;
  white-space: nowrap;
}
.press-interviews-divider-dot {
  margin: 0 10px;
  opacity: 0.55;
  font-style: italic;
}

/* —— Grid: 4 columns desktop, 3 tablet, 2 mobile —————————— */
.press-interviews-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 980px) {
  .press-interviews-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .press-interviews-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .press-interviews { margin-top: 40px; }
  .press-interviews-divider { gap: 14px; margin-bottom: 24px; }
  .press-interviews-divider-text { font-size: 10.5px; letter-spacing: 0.22em; }
}

/* —— Video thumbnail card — framed-print style ——————————————
   Each card is now a cream paper polaroid: cream gradient backdrop,
   hairline espresso border, layered drop-shadow giving physical
   depth, and a labeled title strip at the bottom. The thumbnail
   itself sits inside an inner photo window with its own inset
   border. Reads as a curated archive of interview clips rather
   than a strip of bare YouTube thumbnails. Hover lifts the card
   and intensifies the shadow stack so the print appears to rise
   off the cream-soft page. */
.press-video-card {
  position: relative;
  width: 100%;
  padding: 8px 8px 0;       /* matte border: 8px around the photo, the title's own padding extends the bottom */
  margin: 0;
  border: 0;
  background: linear-gradient(180deg, #FBF3DE 0%, #F4E9CD 100%);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  text-align: left;
  font-family: var(--font-serif);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 4px rgba(43, 29, 21, 0.18),
    0 10px 20px -8px rgba(43, 29, 21, 0.4),
    /* hairline outline that defines the paper edge */
    inset 0 0 0 1px rgba(74, 47, 34, 0.32);
  transition: transform 240ms ease, box-shadow 240ms ease;
}
.press-video-card:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 3px 6px rgba(43, 29, 21, 0.22),
    0 18px 32px -10px rgba(43, 29, 21, 0.55),
    inset 0 0 0 1px rgba(74, 47, 34, 0.42);
}
.press-video-card:focus-visible {
  outline: 2px solid var(--ink-espresso-deep);
  outline-offset: 3px;
}

/* —— THE PHOTO WINDOW ——
   The thumbnail itself sits inside this frame, which has its own
   deeper inset shadow so the image reads as a print inside a
   paper card rather than a flat tile. 16:9 aspect locked. */
.press-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0d0a07;
  border-radius: 1px;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.25),
    inset 0 2px 8px rgba(0, 0, 0, 0.32);
}

.press-video-thumb {
  width: 100%;
  height: 100%;
  /* YouTube's hqdefault is 480x360 (4:3) with letterbox bars at
     top and bottom. object-fit: cover with a 16:9 container will
     crop those bars away naturally, leaving just the video. */
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 380ms ease, filter 240ms ease;
}
.press-video-card:hover .press-video-thumb {
  transform: scale(1.04);
  filter: brightness(0.78);
}

.press-video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.press-video-play-disc {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(15, 10, 7, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: background-color 240ms ease, transform 240ms ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.press-video-play-disc svg {
  margin-left: 3px;   /* optical center for triangle */
}
.press-video-card:hover .press-video-play-disc {
  background: var(--ink-espresso-deep);
  transform: scale(1.08);
}

/* —— TITLE STRIP ——
   Lower matte of the card carries the interview number label,
   set in serif small-caps so it reads as a deliberate caption
   rather than UI chrome. */
.press-video-title {
  padding: 10px 6px 14px;
  text-align: center;
  font-family: var(--font-serif-sc, "Cormorant Garamond", serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-espresso-deep);
}

/* ============================================================
   VIDEO LIGHTBOX
   Centered iframe player on a dimmed, blurred backdrop. No
   panel chrome around the iframe — just the video. Close on
   × button, backdrop click, or Escape.
   ============================================================ */
.press-video-modal {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(10, 6, 4, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: pressVideoFadeIn 220ms ease-out;
}
@keyframes pressVideoFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.press-video-modal-frame {
  position: relative;
  width: 100%;
  max-width: 1080px;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.6);
  animation: pressVideoScaleIn 260ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes pressVideoScaleIn {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.press-video-modal-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.press-video-modal-close {
  position: absolute;
  top: 20px;
  right: 22px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 180ms ease, transform 180ms ease;
  z-index: 2;
}
.press-video-modal-close:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: scale(1.05);
}
@media (max-width: 640px) {
  .press-video-modal { padding: 16px; }
  .press-video-modal-close { top: 10px; right: 12px; width: 32px; height: 32px; font-size: 19px; }
}

/* ============================================================
   SINGLES MAP — illustrated print + lightbox
   The map is presented like a hung print: full bleed inside the
   wrap, no card chrome, with a quiet "click to enlarge" hint in
   the lower-right that only emphasizes on hover. Click opens a
   centered lightbox at near-fullscreen for reading the detail.
   ============================================================ */
.singles-map-frame {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  /* No zoom interaction in normal mode — only the hotspots are
     interactive; the cursor should stay default unless we're in
     calibration mode (handled below). */
  cursor: default;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  transition: transform 360ms ease, box-shadow 360ms ease;
  outline-offset: 4px;
}
.singles-map-frame:hover {
  /* keep the gentle lift on hover for visual feedback that the map
     is the focal element, even though clicking it does nothing now */
  transform: translateY(-2px);
  box-shadow: 0 24px 48px -16px rgba(50, 35, 22, 0.32);
}
.singles-map-frame.is-calibrating { cursor: crosshair; }
.singles-map-frame.is-calibrating:hover { transform: none; }

.singles-map-img {
  display: block;
  width: 100%;
  height: auto;
  /* slight tonal nudge so the map sits in the page palette */
  filter: contrast(1.02) saturate(1.04);
  transition: filter 360ms ease;
  user-select: none;
  -webkit-user-drag: none;
}
.singles-map-frame:hover .singles-map-img {
  filter: contrast(1.04) saturate(1.08) brightness(1.02);
}

/* ─── HOTSPOTS ────────────────────────────────────────────── */

.singles-map-hotspots {
  position: absolute;
  inset: 0;
  pointer-events: none;       /* lets clicks pass through to frame */
  z-index: 5;
}

.singles-map-hotspot {
  position: absolute;
  width: 30px;
  height: 30px;
  margin-left: -15px;          /* circles: center via negative margin */
  margin-top: -15px;
  border-radius: 50%;
  pointer-events: auto;        /* but the hotspots themselves are clickable */
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* rectangular hotspot — sized via inline style (% of map),
   centered via translate(-50%, -50%), slightly rounded corners */
.singles-map-hotspot.is-rect {
  width: auto;
  height: auto;
  margin-left: 0;
  margin-top: 0;
  border-radius: 4px;
}
.singles-map-hotspot:focus-visible {
  outline: 2px solid var(--ink-espresso-deep);
  outline-offset: 4px;
  border-radius: 50%;
}
.singles-map-hotspot.is-rect:focus-visible {
  outline-offset: 2px;
  border-radius: 6px;
}

/* The red dot was the visible indicator marking each hotspot on the
   map. Hidden by default per design: hotspots should be invisible
   until hovered (then the popup card alone provides the feedback).
   The hover/focus rules below still bump up the dot's size & opacity,
   so calibration mode and any future opt-in re-enabling still work. */
.singles-map-hotspot-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(163, 61, 61, 0.50);
  box-shadow:
    0 0 0 2px rgba(255, 248, 232, 0.55),
    0 0 6px rgba(163, 61, 61, 0.35);
  opacity: 0;                                            /* invisible default */
  transition: opacity 220ms ease, width 220ms ease, height 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}
.singles-map-hotspot:hover .singles-map-hotspot-dot,
.singles-map-hotspot:focus-visible .singles-map-hotspot-dot {
  width: 14px;
  height: 14px;
  background: rgba(163, 61, 61, 0.95);
  opacity: 0;                                            /* still invisible on hover */
  box-shadow:
    0 0 0 3px rgba(255, 248, 232, 0.9),
    0 0 16px rgba(163, 61, 61, 0.55);
}

/* ─── POPUPS ──────────────────────────────────────────────── */

.singles-map-popup {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  transform: translateX(-50%) translateY(4px);
  min-width: 180px;
  max-width: 240px;
  padding: 12px 14px 10px;
  background: rgba(255, 248, 232, 0.97);
  border: 1px solid rgba(74, 47, 34, 0.42);
  border-radius: 4px;
  box-shadow:
    0 12px 28px -10px rgba(43, 29, 21, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  visibility: hidden;
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
  pointer-events: none;
  z-index: 6;
  text-align: left;
  white-space: normal;
}
.singles-map-hotspot.popup-below .singles-map-popup {
  bottom: auto;
  top: calc(100% + 14px);
  transform: translateX(-50%) translateY(-4px);
}
.singles-map-hotspot.popup-right .singles-map-popup {
  left: 0;
  transform: translateX(-10%) translateY(4px);
}
.singles-map-hotspot.popup-left .singles-map-popup {
  left: auto;
  right: 0;
  transform: translateX(10%) translateY(4px);
}
.singles-map-hotspot:hover .singles-map-popup,
.singles-map-hotspot:focus-visible .singles-map-popup {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.singles-map-hotspot.popup-right:hover .singles-map-popup,
.singles-map-hotspot.popup-right:focus-visible .singles-map-popup {
  transform: translateX(-10%) translateY(0);
}
.singles-map-hotspot.popup-left:hover .singles-map-popup,
.singles-map-hotspot.popup-left:focus-visible .singles-map-popup {
  transform: translateX(10%) translateY(0);
}

/* popup pointer / tail */
.singles-map-popup::after {
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -6px;
  width: 10px;
  height: 10px;
  background: rgba(255, 248, 232, 0.97);
  border: 1px solid rgba(74, 47, 34, 0.42);
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
.singles-map-hotspot.popup-above .singles-map-popup::after {
  bottom: -6px;
}
.singles-map-hotspot.popup-below .singles-map-popup::after {
  top: -6px;
  border: 1px solid rgba(74, 47, 34, 0.42);
  border-bottom: none;
  border-right: none;
}

.singles-map-popup-name {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-espresso-deep);
  line-height: 1.25;
  margin-bottom: 4px;
}
.singles-map-popup-sub {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.35;
  margin-bottom: 8px;
}
.singles-map-popup-cta {
  display: block;
  font-family: var(--font-serif-sc, "Cormorant Garamond", serif);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-espresso-deep);
  font-weight: 600;
  border-top: 1px dashed rgba(74, 47, 34, 0.3);
  padding-top: 8px;
}

/* ─── CALIBRATION MODE ────────────────────────────────────── */

.singles-map-hotspot.is-calibrating .singles-map-hotspot-dot {
  width: 12px;
  height: 12px;
  opacity: 1;
  background: rgba(163, 61, 61, 1);
  box-shadow:
    0 0 0 3px rgba(255, 248, 232, 0.95),
    0 0 12px rgba(163, 61, 61, 0.7);
}
.singles-map-hotspot-label {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  background: rgba(43, 29, 21, 0.92);
  color: var(--ink-cream);
  border-radius: 2px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 7;
}

.singles-map-cal-hud {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: rgba(43, 29, 21, 0.94);
  color: var(--ink-cream);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  pointer-events: none;
  max-width: 280px;
}
.singles-map-cal-hud strong {
  font-family: var(--font-serif-sc, "Cormorant Garamond", serif);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 4px;
}
.singles-map-cal-hud code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #FFE2A8;
}
.singles-map-cal-hud em {
  font-size: 10px;
  font-style: italic;
  opacity: 0.75;
}

/* mobile: popups need to be narrower */
@media (max-width: 600px) {
  .singles-map-hotspot { width: 36px; height: 36px; margin-left: -18px; margin-top: -18px; }
  .singles-map-popup { min-width: 150px; max-width: 200px; font-size: 13px; }
  .singles-map-popup-name { font-size: 14px; }
}

/* ============================================================
   HONORS RECEIVED — compact three-column ledger
   Replaces the older recognition panel (big 4-stat strip on
   top + single tall list below). The new layout uses the
   horizontal axis: a one-line headline ribbon over a 3-up
   grid of tight item stacks (Awards · Certifications · Chart
   Peaks). All 23 items from the dossier are still present —
   the column layout just trades vertical space for horizontal.
   ============================================================ */

/* —— headline ribbon —— */
.honors-headline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 18px;
  padding: 16px 4px;
  margin: 4px 0 28px;
  border-top: 1px solid rgba(75, 47, 34, 0.22);
  border-bottom: 1px solid rgba(75, 47, 34, 0.22);
}
.honors-headline-item {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  white-space: nowrap;
}
.honors-headline-num {
  font-family: var(--font-display, "Newsreader", serif);
  font-style: italic;
  font-weight: 600;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-espresso-deep);
}
.honors-headline-lbl {
  font-family: var(--font-serif-sc, "Cormorant Garamond", serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.honors-headline-sep {
  color: var(--fg-3);
  font-size: 16px;
  opacity: 0.4;
}

/* —— three-column grid —— */
.honors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}

.honors-col-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(75, 47, 34, 0.40);
}
.honors-col-title {
  font-family: var(--font-serif-sc, "Cormorant Garamond", serif);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-espresso-deep);
}
.honors-col-count {
  font-family: var(--font-display, "Newsreader", serif);
  font-style: italic;
  font-size: 12px;
  color: var(--fg-3);
  font-weight: 400;
}

/* —— items inside each column —— */
.honors-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.honors-item {
  padding: 9px 0;
  border-bottom: 1px solid rgba(75, 47, 34, 0.10);
}
.honors-item:last-child { border-bottom: 0; }
.honors-item.is-tight { padding: 8px 0; }

.honors-item-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.honors-item-meta {
  font-family: var(--font-serif-sc, "Cormorant Garamond", serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-2);
  line-height: 1.4;
  /* allow long region names like "US Hot Rock & Alt Songs" to
     wrap under their chip rather than truncating */
  flex: 1;
  min-width: 0;
}
.honors-item-name {
  font-family: var(--font-display, "Newsreader", serif);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--ink-espresso-deep);
  margin-top: 4px;
}
.honors-item-sub {
  font-family: var(--font-serif-sc, "Cormorant Garamond", serif);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: 3px;
  font-style: italic;
}

/* —— result chips on the right side of each item —— */
.honors-chip {
  font-family: var(--font-serif-sc, "Cormorant Garamond", serif);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.4;
}
.honors-chip.is-won   { color: #8c6a2f; }       /* warm gold for wins */
.honors-chip.is-nom   { color: var(--fg-3); }   /* muted for nominations */
.honors-chip.is-cert  { color: var(--ink-espresso); font-weight: 600; }
.honors-chip.is-chart {
  color: var(--ink-espresso-deep);
  font-family: var(--font-display, "Newsreader", serif);
  font-style: italic;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* —— responsive collapses —— */
@media (max-width: 980px) {
  .honors-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 720px) {
  .honors-grid { grid-template-columns: 1fr; gap: 24px; }
  .honors-headline {
    gap: 10px 18px;
    padding: 14px 0;
  }
  .honors-headline-num { font-size: 18px; }
  .honors-headline-lbl { font-size: 9px; letter-spacing: 0.16em; }
}

/* ============================================================
   PAST SHOWS — SCRIBBLE STAGE
   Confined-to-section graffiti where the old formal "first
   proper run" date list used to live. Each past show is a
   handwritten date · city · venue scribble in one of three
   ink palettes (warm pencil, pen blue, faded older pencil),
   scattered with rotations and mixed sizes. A few doodles
   and quiet notes fill the gaps. Stage is contained — does
   NOT bleed into other sections or page gutters.
   ============================================================ */
/* Past-show scribbles spill across the FULL page width as a
   graffiti background — no contained paper, no centered wrap.
   The stage sits directly beneath the horizontal show-moments
   reel, so its top padding is minimal. */
.past-scribbles-section {
  position: relative;
  padding: 0;
  margin: 0;
}

.past-scribbles-stage {
  position: relative;
  width: 100%;
  height: clamp(900px, 95vw, 1200px);
  /* No background and no rounded corners — scribbles sit
     directly on the page cream like marks on a long wall, not
     on a discrete piece of paper. */
  background: transparent;
  border-radius: 0;
  overflow: hidden;
}

/* Every scribble — base reset */
.past-scrib {
  position: absolute;
  white-space: pre-line;
  pointer-events: none;
  font-family: "Caveat", "Sacramento", cursive;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-shadow: 0 0 1px currentColor;  /* ink-bleed feel */
  user-select: none;
}

/* —— Palettes — different "writing instruments" —————————————— */
.past-scrib.is-pencil { color: #3a2a1c; }
.past-scrib.is-blue   { color: #2c3a5f; }
.past-scrib.is-faded  { color: #5a4630; }
.past-scrib.is-red    { color: #8c2f2f; }

/* —— Tag header — biggest piece of graffiti on the stage ——
   Reads like "the first proper run" carved/inked across the
   top, with a smaller tour-name caption underneath. */
.past-scrib-tag {
  /* Permanent Marker — chunky sharpie strokes. Caveat is a softer
     fallback if PM fails to load. The slight letter-spacing mimics
     a wide marker tip; line-height is tight to keep the text
     reading like a single confident scrawl. */
  font-family: "Permanent Marker", "Caveat", "Marker Felt", cursive;
  font-style: normal;
  font-weight: 400;
  text-transform: lowercase;
  letter-spacing: 0.005em;
  line-height: 1;
  color: #1a1108; /* sharpie ink — near black with a hint of warmth */
  /* Tiny ink-bleed shadow rather than the carved Newsreader stack
     used before. Sharpie ink is flat and slightly thick from the
     marker tip; we just imply a single soft ink halo. */
  text-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}
.past-scrib-subtag {
  font-family: var(--font-serif-sc, "Cormorant Garamond", serif);
  font-style: italic;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #5a4630;
  opacity: 0.75;
  white-space: nowrap;
}

/* —— Show scribbles —— */
.past-show-scrib {
  width: clamp(140px, 17vw, 200px);
  opacity: 0.85;
}
.past-show-stack { text-align: center; }
.past-show-inline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}
.psc-date {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.05;
}
.psc-date.is-big { font-size: 28px; }
.psc-city {
  font-size: 18px;
  margin-top: 2px;
}
.psc-venue {
  font-family: var(--font-display, "Newsreader", serif);
  font-style: italic;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  margin-top: 4px;
  opacity: 0.72;
  line-height: 1.25;
}
.psc-sep {
  opacity: 0.55;
  font-size: 18px;
  font-weight: 400;
  margin: 0 1px;
}

/* —— Doodles + small notes —— */
.past-scrib-doodle {
  opacity: 0.7;
}
.past-scrib-note {
  font-family: var(--font-display, "Newsreader", serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.03em;
  opacity: 0.7;
  white-space: nowrap;
}
.past-scrib-note.is-faded { opacity: 0.55; }

/* —— Responsive: the show scribbles need room. Below tablet,
   the stage gets taller so all six shows still fit without
   crowding. The smallest viewports stack everything into a
   simple vertical scroll, abandoning the spatial layout. —— */
@media (max-width: 900px) {
  .past-scribbles-stage {
    height: clamp(1600px, 220vw, 2600px);
  }
  .past-show-scrib { width: clamp(140px, 32vw, 200px); }
}
@media (max-width: 560px) {
  /* On phone, drop the absolute-positioned layout entirely
     and stack the show scribbles as a centered list — the
     spatial graffiti doesn't work at this width and we don't
     want shows overlapping or off-screen. */
  .past-scribbles-stage {
    height: auto;
    padding: 24px 8px 32px;
    overflow: visible;
  }
  .past-scribbles-stage .past-scrib {
    position: static;
    transform: none !important;
    display: block;
    margin: 14px auto;
    text-align: center;
    width: auto;
  }
  .past-scrib-tag { font-size: 32px !important; }
  .past-scrib-subtag { display: block; margin-bottom: 18px; }
}

/* ============================================================
   FOOTER × SONG TICKER — ticker lives inside the footer now.

   The PowfuSongTicker used to be a standalone <section> mounted
   above the footer. The artist asked for it to be visually
   connected to the footer, so the JSX now renders it as the
   footer's first child. These rules take care of the visual side:

     1. The footer's `padding-top` (the breathing room above the
        "powfu" wordmark) is removed — the ticker sits flush at
        the very top of the footer instead.
     2. The brand band (.powfu-footer-top) gets that breathing
        room added back below the ticker so the layout below
        looks identical to before.
     3. The ticker's bottom hairline (already declared on
        .powfu-ticker via `border-bottom`) now functions as the
        divider between the ticker band and the brand band of
        the footer — reads as a single, integrated unit.

   These rules sit at the end of the stylesheet on purpose so
   they override the three earlier `.powfu-footer { padding ... }`
   declarations elsewhere in the file. */
.powfu-footer { padding-top: 0; }
.powfu-footer .powfu-ticker {
  /* Ticker spans the full width of the footer with no horizontal
     gutters. The existing internal masking gradient (60px each side)
     still fades the entries at the edges. */
  margin: 0;
  width: 100%;
}
.powfu-footer .powfu-footer-top {
  /* Add back the top breathing room the footer used to have, but
     now it sits between the ticker and the wordmark. */
  padding-top: 72px;
}

/* ============================================================
   MOBILE OPTIMIZATION PASS — appended at end of file on purpose
   so these rules win every cascade conflict against the older
   per-component rules scattered throughout. Two tiers:

     ≤ 768px : tablets, large phones in landscape (most fixes)
     ≤ 480px : phones in portrait (further tightening + touch)

   Desktop (> 768px) is completely untouched by everything below.

   General principles applied:
     • Horizontal padding inside containers shrinks from 28–32px
       down to 16px / 14px to give content more horizontal room
     • Vertical section padding shrinks from 96px to 56–44px
     • Two-column grids collapse to one column at 768px
     • Hero photos shift from 2:1 (very short on portrait phones)
       to 4:3 with a min-height so the photo actually fills view
     • Touch targets sized ≥ 44px where they matter (singles map,
       buttons, modal close)
     • Display-font titles clamp down so they don't blow past
       the viewport edge
   ============================================================ */

/* —— tier 1: tablets + landscape phones ————————————————————— */
@media (max-width: 768px) {

  /* —— LAYOUT CONTAINERS ————————————————————————————————————— */
  /* Tighter horizontal padding everywhere — the existing 28-32px
     gutters eat too much screen on phones. site.css's .wrap has
     32px which we also override here. */
  .wrap, .wrap-narrow {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .section    { padding: 56px 0; }
  .section-sm { padding: 36px 0; }

  /* —— BANNER ————————————————————————————————————————————————
     Already has a hamburger drawer at 900px; just tighten padding
     and gap for very small screens. */
  .powfu-banner-inner {
    padding: 10px 16px !important;
    gap: 12px;
  }
  .powfu-banner-sub-inner { padding: 6px 16px; }

  /* —— HOME / INTERIOR HEROES ——————————————————————————————
     Desktop locks aspect-ratio: 2/1 which is correct for the
     landscape photos. On portrait phones that means the hero is
     only ~50vh tall — way too short to read. Switch to 4:3 with
     a generous min-height so the photo dominates the fold and
     stays viscerally hero-sized. */
  .powfu-hero,
  .powfu-interior {
    aspect-ratio: 4 / 3;
    min-height: 520px;
    max-height: 88vh;
  }

  /* The interior "back outside" button already has its own 540px
     rule that drops the text label; nothing further needed. */

  /* —— SECTION HEADERS / HERO TYPOGRAPHY ——————————————————————
     PageHeader's title is clamped at clamp(48–84px) on desktop;
     on phones the upper end is way too big. */
  .page-header-title {
    font-size: clamp(48px, 13vw, 72px) !important;
    line-height: 1;
  }
  .page-header-sub {
    font-size: 15px;
    line-height: 1.5;
  }
  .page-header { padding: 80px 0 56px; }
  .page-header-eyebrow { font-size: 10px; }

  /* —— SINGLES MAP (music page) ——————————————————————————————
     Desktop hides every hotspot dot (opacity:0) — visitors find
     them by hovering. On touch there's no hover, so without a
     visible marker the map looks completely non-interactive. Show
     a soft visible dot per hotspot so users can see "this is
     tappable". The dot remains a hairline, not a beacon — the
     map illustration stays the focus. */
  .singles-map-hotspot {
    /* Bump up tap target to 44px square per Apple/Google guidance.
       Negative margins keep the centre point on the hotspot
       coordinates. */
    width: 44px;
    height: 44px;
    margin-left: -22px;
    margin-top: -22px;
  }
  .singles-map-hotspot.is-rect {
    /* Rect hotspots are sized in % via inline style — leave the
       inline geometry alone, just override the circular default
       margins. */
    width: auto;
    height: auto;
    margin-left: 0;
    margin-top: 0;
  }
  .singles-map-hotspot-dot {
    opacity: 0.55 !important;
    width: 10px;
    height: 10px;
    background: rgba(163, 61, 61, 0.85);
    box-shadow:
      0 0 0 2px rgba(255, 248, 232, 0.85),
      0 0 8px rgba(163, 61, 61, 0.35);
  }
  /* Rect-style hotspots don't get a dot — they're shapes, not
     points — so don't paint the dot inside them. */
  .singles-map-hotspot.is-rect .singles-map-hotspot-dot {
    display: none;
  }
  /* Skip the hover popup entirely on touch — it never works
     reliably (first tap shows popup, navigation interrupts).
     The aria-label on the anchor still gives screen readers
     the song name, and tapping any dot opens its Spotify page
     directly. */
  .singles-map-popup { display: none !important; }

  /* —— MY RECS COLLAGE ——————————————————————————————————————
     Existing rules at 600px already disable transforms. Add a
     line-height bump so the wrapped track titles don't crash. */
  .my-recs { padding: 56px 0; }

  /* —— ALBUM FEATURES ———————————————————————————————————————
     Currently a hard 2-col grid with no mobile rule — the art is
     min-280px wide and the body is the rest, so on a 400px phone
     the body column is 90px wide. Collapse to single column. */
  .album-feature {
    grid-template-columns: 1fr !important;
    gap: 28px;
  }
  .album-feature.is-reversed { direction: ltr; }
  .album-feature-art .nature-photo {
    max-width: 380px;
    margin: 0 auto;
  }
  .album-feature-title {
    font-size: clamp(24px, 6.5vw, 32px) !important;
  }
  .album-feature-blurb { font-size: 15px; }
  .album-features-list { gap: 56px; }

  /* —— DBS (death-bed coffee for your head) ——————————————————
     Has its own rule at 800px that collapses to 1-col; certificate
     positioning can scoot in further on phones. */
  .dbs-art-cert {
    right: 8px; bottom: 8px;
    width: 76px; height: 76px;
  }
  .dbs-art-cert span { font-size: 28px; }
  .dbs-art-cert small { font-size: 8px; }

  /* —— PRESS MASTHEAD ———————————————————————————————————————
     Desktop has a 3-col row: left meta | "Press" | right meta.
     On phones the side metadata gets crushed to nothing. Stack
     to a single centered column. */
  .press-masthead { padding: 48px 0 24px; }
  .press-masthead-row {
    grid-template-columns: 1fr !important;
    gap: 14px;
    padding: 12px 4px;
  }
  .press-masthead-side {
    align-items: center !important;
    text-align: center !important;
  }
  .press-masthead-side.is-left,
  .press-masthead-side.is-right { text-align: center !important; }
  .press-masthead-title {
    font-size: clamp(42px, 13vw, 72px) !important;
  }
  .press-masthead-edition,
  .press-masthead-date,
  .press-masthead-tag { font-size: 10px; letter-spacing: 0.18em; }
  .press-masthead-eyebrow { font-size: 14px; padding: 0 8px; }

  /* —— PRESS PULL QUOTE ————————————————————————————————————— */
  .press-pull-quote { padding: 28px 18px; }

  /* —— FOOTER ————————————————————————————————————————————————
     Four columns collapse at 800px already; tighten further. */
  .powfu-footer { padding-bottom: 24px; }
  .powfu-footer .powfu-footer-top { padding-top: 48px; }
  .powfu-footer-cols { gap: 28px !important; padding: 32px 0; }
  .powfu-footer-mark { font-size: clamp(48px, 12vw, 72px) !important; }
  .powfu-footer-tagline { font-size: 14px; }

  /* —— TICKER ————————————————————————————————————————————————
     Slow it down on small screens — items go by too fast when
     the viewport is narrow. */
  .powfu-ticker-track { animation-duration: 50s; gap: 22px; }
  .powfu-ticker-item  { font-size: 13px; }
  .powfu-ticker-art   { width: 36px; height: 36px; }

  /* —— ABOUT LETTER / ACHIEVEMENTS ————————————————————————————
     Letter padding shrinks for more image room. Achievements
     "plaque" needs less inner padding. */
  .about-letter { padding: 40px 12px; }
  .about-page-stage .about-recognition .wrap-narrow {
    padding: 28px 18px !important;
  }
  .honors-headline {
    gap: 8px 12px !important;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* —— SHOWS HERO ———————————————————————————————————————————
     Existing shows-header is 480px tall on desktop; that's right
     for the photo but the title sits awkwardly low. Tighten. */
  .shows-header {
    min-height: 360px !important;
    padding: 64px 0 48px !important;
  }

  /* —— SHOWS TICKETS ————————————————————————————————————————
     Already has 700px rules; ensure CTA button is full-width on
     phones so it's a comfortable thumb target. */
  .shows-ticket-cta { padding: 10px 16px; min-height: 44px; }

  /* —— SHOW REEL — modal video player ————————————————————————
     Existing 640px rules handle most of this; just ensure the
     video doesn't overflow on tiny screens. */

  /* —— CABIN WALL-CLOSEUP MODAL ——————————————————————————————
     Already has 640px rules; nothing else needed. */

  /* —— BUTTONS (general) —————————————————————————————————————
     Give all primary buttons a 44px minimum tap height. */
  .btn-ink, .btn-ghost {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* —— tier 2: portrait phones ————————————————————————————————— */
@media (max-width: 480px) {

  .wrap, .wrap-narrow {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .section    { padding: 44px 0; }
  .section-sm { padding: 28px 0; }

  /* Page header titles shrink one more notch */
  .page-header-title {
    font-size: clamp(42px, 14vw, 60px) !important;
  }
  .page-header { padding: 64px 0 44px; }

  /* Heroes get a touch shorter on portrait phones — 4:3 still but
     min-height eased so vertical scrolling kicks in sooner. */
  .powfu-hero,
  .powfu-interior {
    min-height: 460px;
  }

  /* Banner padding tightest here */
  .powfu-banner-inner { padding: 8px 12px !important; gap: 10px; }

  /* Singles map hotspots — keep the 44px tap target but lighten
     the visible dot a bit so it doesn't dominate the illustration. */
  .singles-map-hotspot-dot {
    width: 8px;
    height: 8px;
    opacity: 0.45 !important;
  }

  /* Press masthead title smaller still */
  .press-masthead-title {
    font-size: clamp(38px, 14vw, 56px) !important;
  }

  /* Footer mark scales down */
  .powfu-footer-mark { font-size: clamp(40px, 14vw, 60px) !important; }

  /* Show reel + ticker height fine-tune */
  .show-reel-frame.orientation-vertical   { width: 138px; }
  .show-reel-frame.orientation-horizontal { width: 240px; }
  .show-reel-play { width: 38px; height: 38px; }

  /* Modal close buttons — bigger on phones (already 32px at 640px,
     bump to 38 for actual fat-thumb-friendliness) */
  .powfu-interior-closeup-close,
  .show-video-modal-close {
    width: 38px;
    height: 38px;
    font-size: 22px;
  }

  /* Album feature art shrinks max-width */
  .album-feature-art .nature-photo { max-width: 320px; }
}

/* —— horizontal overflow guard ——————————————————————————————
   Belt-and-braces: if anything DOES manage to overflow the
   viewport horizontally on mobile, this clips it at the
   .s-powfu wrapper level. Important: clipping on html/body
   instead would silently break the .powfu-banner sticky
   positioning (sticky needs a scroll context whose ancestors
   are not overflow:hidden). The wrapper sits OUTSIDE the
   sticky context the banner uses, so clipping here is safe.
   `overflow-x: clip` is the modern, safer version of
   `hidden` — it doesn't create a new scroll container the
   way `hidden` does, so layers like fixed-position modals
   above (cabin closeup, video lightbox) still cover the
   viewport correctly. */
@media (max-width: 768px) {
  .s-powfu { overflow-x: clip; }
}

/* ============================================================
   PAGE: VERSES — scripture page reached via the cabin cross.
   Parchment-meets-wood aesthetic with scattered ambient crosses,
   four themed groups of verses, each verse on a paper-like card
   with sculpted typography. Designed as a quiet, contemplative
   reading experience — no nav surface, no CTAs, just verses.
   ============================================================ */

.verses-page {
  position: relative;
  min-height: 100vh;
  /* Wood-grain background matches the about page so the cabin's
     interior atmosphere extends naturally into this secret page.
     Fixed attachment on desktop, falls back to scroll on phones
     (iOS Safari handles fixed poorly with large textures). */
  background-image: url("assets/about-wood.jpg?v=1");
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-color: #b07a52;
  padding: clamp(72px, 8vw, 128px) 0 clamp(96px, 10vw, 160px);
  /* isolation creates a stacking context so the background crosses
     (absolute, z-index 0) and the content (relative, z-index 1)
     stack within this page and don't leak above the page banner. */
  isolation: isolate;
  overflow: hidden;
}
@media (max-width: 820px) {
  .verses-page { background-attachment: scroll; }
}

/* —— BACKGROUND CROSSES —— */
.verses-bg-crosses {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* A faint cream wash sits behind the crosses so the wood texture
     doesn't completely swallow them. Very low alpha — barely there. */
  background: linear-gradient(180deg, rgba(255, 248, 232, 0.18), rgba(255, 248, 232, 0.10));
}
.verses-bg-cross {
  position: absolute;
  display: block;
  pointer-events: none;
  /* The cross is built entirely from the two pseudo-elements below.
     The span itself is just a positioning container; size attribute
     is set inline on width + height so each cross can be a different
     scale. */
}
.verses-bg-cross::before,
.verses-bg-cross::after {
  content: "";
  position: absolute;
  background: rgba(43, 29, 21, 1);
  /* The pseudo-elements inherit the parent's opacity (set inline),
     so a 0.12 opacity on the span = both bars at 0.12 effective
     alpha against the wood. */
}
.verses-bg-cross::before {
  /* Vertical bar — full height, ~16% of the width, dead-centered
     horizontally. */
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 16%;
}
.verses-bg-cross::after {
  /* Horizontal crossbar — ~70% of the width, positioned ~30% down
     from the top of the cross. Height ~12% so it's proportionally
     correct for a Latin cross silhouette. */
  left: 15%;
  right: 15%;
  top: 28%;
  height: 12%;
}

/* —— CONTENT WRAPPER ——
   The wrap-narrow gives a centered reading column; relative + z-index
   pulls the content above the absolute-positioned background. */
.verses-content {
  position: relative;
  z-index: 1;
}

/* —— PAGE HEADER ——
   Eyebrow + title + lead + decorative rule. Same display-typography
   system as the rest of the site (chiseled extrusion + cream pill
   eyebrow + italic lead), so the page feels of-a-piece. */
.verses-head {
  text-align: center;
  margin: 0 auto clamp(56px, 7vw, 96px);
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.verses-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 7px 22px;
  margin-bottom: 22px;
  font-family: var(--font-serif-sc, "Cormorant Garamond", serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--ink-espresso-deep);
  background: linear-gradient(180deg, #FBF3DE 0%, #F4E9CD 100%);
  border: 1px solid rgba(74, 47, 34, 0.42);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 4px 10px -4px rgba(20, 12, 8, 0.3);
}
.verses-eyebrow::before,
.verses-eyebrow::after {
  content: "\271D"; /* tiny cross glyph either side */
  font-family: serif;
  font-size: 13px;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--ink-espresso-deep);
  opacity: 0.65;
}
.verses-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(54px, 7vw, 96px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink-espresso-deep);
  margin: 0 0 24px;
  text-shadow:
    -2px -2px 0 rgba(255, 248, 232, 0.5),
    2px 2px 0 #4A2F22,
    3px 3px 0 #3a2419,
    4px 4px 0 #3a2419,
    5px 5px 0 #2B1D15,
    6px 6px 0 #2B1D15,
    7px 7px 0 #1d130d,
    8px 8px 0 #1d130d,
    14px 22px 30px rgba(20, 12, 8, 0.55);
}
.verses-lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.55;
  color: var(--ink-espresso-deep);
  margin: 0 0 28px;
  max-width: 560px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
/* Decorative rule under the lead, with a tiny cross glyph centered
   on it — drawn via a flex container with two hairlines either side
   of a Latin cross character. Pure decoration. */
.verses-rule {
  width: clamp(180px, 22vw, 280px);
  height: 14px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.verses-rule::before,
.verses-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--ink-espresso-deep) 100%
  );
  opacity: 0.55;
}
.verses-rule::after {
  background: linear-gradient(
    90deg,
    var(--ink-espresso-deep) 0%,
    transparent 100%
  );
}
.verses-rule {
  /* Inject the cross glyph in the middle via a CSS-counter-trick:
     we'll add it as content on a pseudo-element. Wait — already used
     ::before and ::after for the side rules. Instead, use a real
     character via background svg image. Easiest: insert a span in
     JSX. But to avoid JSX changes, we use a much simpler approach:
     position the cross via a smaller pseudo on the parent. Since
     we've already used both pseudos, set the rule to render the
     cross via background-image (svg data URI) center.

     The two ::before/::after each take 50% width (flex:1). The cross
     symbol is rendered via the parent's background-image. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18'%3E%3Crect x='5' y='0' width='2' height='18' fill='%234A2F22'/%3E%3Crect x='1' y='5' width='10' height='2.4' fill='%234A2F22'/%3E%3C/svg%3E")
    center / 12px 18px no-repeat;
}

/* —— VERSE GROUPS ——
   Each group is a category section: title + list of verse cards. */
.verses-group {
  margin: 0 0 clamp(64px, 8vw, 96px);
}
.verses-group-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--ink-espresso-deep);
  text-align: center;
  margin: 0 0 36px;
  padding-bottom: 14px;
  position: relative;
  text-shadow:
    -1px -1px 0 rgba(255, 248, 232, 0.45),
    1px 1px 0 #6e4933,
    2px 2px 0 #4A2F22,
    3px 3px 0 #3a2419,
    4px 4px 0 #2B1D15,
    8px 14px 18px rgba(43, 29, 21, 0.4);
}
.verses-group-title::after {
  /* Centered tapered hairline rule under each group title — same
     gradient recipe used on the music page section headings. */
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: clamp(80px, 9vw, 140px);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--ink-espresso-deep) 22%,
    var(--ink-espresso-deep) 78%,
    transparent 100%
  );
  box-shadow: 0 1px 2px rgba(20, 12, 8, 0.35);
}

.verses-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 32px);
}

/* —— THE VERSE CARD ——
   Each verse sits on a parchment-cream paper slip with the reference
   small-caps tag at the top, the verse text in display italic below.
   The card has a layered shadow that lifts it off the wood, a
   hairline border, and a small resting rotation (alternating
   directions on nth-child) so the column looks like a stack of
   reading-room slips, not aligned tiles. */
.verse-card {
  position: relative;
  padding: clamp(24px, 3.5vw, 44px) clamp(28px, 4vw, 56px);
  background: linear-gradient(180deg, #FDF6E0 0%, #F4E9CD 100%);
  border: 1px solid rgba(74, 47, 34, 0.34);
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 3px 6px rgba(20, 12, 8, 0.15),
    0 14px 30px -12px rgba(20, 12, 8, 0.4),
    0 32px 60px -28px rgba(20, 12, 8, 0.4);
  transform: rotate(-0.25deg);
  transition: transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.verse-card:nth-child(even) { transform: rotate(0.3deg); }
.verse-card:nth-child(3n)   { transform: rotate(-0.15deg); }
.verse-card:hover {
  transform: translateY(-3px) rotate(0deg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 4px 8px rgba(20, 12, 8, 0.18),
    0 22px 40px -14px rgba(20, 12, 8, 0.5),
    0 44px 76px -30px rgba(20, 12, 8, 0.5);
}
/* Small ornamental cross at the top-left corner of each card, like
   a printer's mark. Rendered via background-image SVG for crispness. */
.verse-card::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 16px;
  width: 14px;
  height: 21px;
  opacity: 0.45;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 18'%3E%3Crect x='5' y='0' width='2' height='18' fill='%234A2F22'/%3E%3Crect x='1' y='5' width='10' height='2.4' fill='%234A2F22'/%3E%3C/svg%3E") center / contain no-repeat;
}
.verse-ref {
  display: inline-block;
  font-family: var(--font-serif-sc, "Cormorant Garamond", serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-espresso-deep);
  padding: 4px 14px;
  margin: 0 0 18px 24px;     /* left margin clears the printer's mark */
  background: rgba(74, 47, 34, 0.08);
  border: 1px solid rgba(74, 47, 34, 0.28);
  border-radius: 4px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}
.verse-text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.9vw, 24px);
  line-height: 1.55;
  color: var(--ink-espresso-deep);
  margin: 0;
  /* Hanging quote marks would be lovely here but they tend to break
     across browser implementations of `hanging-punctuation`. Skip
     and rely on the italic display serif to carry the scriptural
     feel. */
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  /* Drop cap on first letter — a quiet old-print touch. */
}
.verse-text::first-letter {
  font-size: 1.15em;
  font-weight: 500;
  color: var(--ink-espresso-deep);
}

/* —— PAGE FOOTER ORNAMENT ——
   A single oversized cross glyph centered below the last group as a
   visual amen. */
.verses-footer {
  text-align: center;
  margin-top: clamp(48px, 6vw, 80px);
  opacity: 0.4;
}
.verses-footer-ornament {
  font-family: serif;
  font-size: clamp(48px, 6vw, 80px);
  line-height: 1;
  color: var(--ink-espresso-deep);
}