/* ============================================================
   Gwonho
   Liquid glass: a living colour field under frosted panels.
   ============================================================ */

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; }

/* ---------- TOKENS ---------- */
:root {
  --base:    #05060a;
  --base-2:  #090b12;
  --text:    #f4f5fa;
  --text-2:  rgba(244, 245, 250, 0.66);
  --text-3:  rgba(244, 245, 250, 0.42);

  /* Section colours, re-set by JS as you scroll */
  --c1: #6d5cff;
  --c2: #22d3ff;
  --c3: #ff5fa2;

  --glass:        rgba(255, 255, 255, 0.038);
  --glass-strong: rgba(255, 255, 255, 0.07);
  --edge:         rgba(255, 255, 255, 0.11);
  --edge-bright:  rgba(255, 255, 255, 0.55);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display",
          "Helvetica Neue", "Segoe UI", Arial, sans-serif;

  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --maxw: 1180px;

  /* One knob for vertical rhythm. Every section uses it, so the whole
     page tightens or loosens from here. */
  --section-y: clamp(4.5rem, 9vw, 7.5rem);

  /* How fast the whole page changes colour between sections */
  --tint-speed: 1.4s;
}

/* ============================================================
   CROSS PAGE TRANSITION
   Chrome and Edge morph between index.html and photography.html
   natively. Browsers without view transitions get the JS fade in
   main.js instead, so the navigation never looks abrupt.
   ============================================================ */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: vtOut 0.42s var(--ease) both;
}
::view-transition-new(root) {
  animation: vtIn 0.55s var(--ease-out) both;
}
@keyframes vtOut {
  to { opacity: 0; transform: scale(0.985); filter: blur(6px); }
}
@keyframes vtIn {
  from { opacity: 0; transform: scale(1.015); filter: blur(10px); }
}

/* The heading is shared between the teaser and the gallery page, so it
   travels between the two rather than cross-fading. */
#galleryTitle { view-transition-name: gallery-title; }
.field { view-transition-name: liquid-field; }

/* JS fallback for browsers without the API */
body.leaving {
  opacity: 0; transform: scale(0.99); filter: blur(5px);
  transition: opacity 0.34s var(--ease), transform 0.34s var(--ease),
              filter 0.34s var(--ease);
}

/* ---------- BASE ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  font-family: var(--font);
  background: var(--base);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Content rides above the fixed field so glass has something to sample */
main { position: relative; z-index: 1; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap.narrow { max-width: 760px; }

::selection { background: var(--c2); color: #05060a; }
:focus-visible { outline: 2px solid var(--c2); outline-offset: 4px; border-radius: 6px; }

.svg-defs { position: absolute; width: 0; height: 0; }

/* ============================================================
   1. THE LIQUID FIELD
   Four huge soft light sources drifting forever behind everything.
   Their colours are swapped per section by JS, and the long
   transition is what makes the whole page melt between hues.
   ============================================================ */
/* Must stay at z-index 0, never negative. A negative z-index would put
   this behind the root background, where backdrop-filter cannot sample
   it, and every glass panel would composite against flat black. */
.field {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    /* Lift the foot of the frame. Without this the top gradient falls
       to flat base and the bottom of every screen reads as a black bar. */
    radial-gradient(130% 70% at 50% 100%,
      color-mix(in srgb, var(--c2) 10%, var(--base-2)), transparent 72%),
    radial-gradient(120% 90% at 50% 0%, var(--base-2), var(--base) 70%);
  transition: background var(--tint-speed) var(--ease);
  overflow: hidden;
}

.blobs {
  position: absolute; inset: -30%;
  /* Heavy blur plus a touch of desaturation is what turns four coloured
     circles into something that reads as light rather than paint */
  filter: blur(110px) saturate(88%);
  opacity: 0.52;
}

/* Soft-edged light sources, not solid discs. The transparent falloff
   is what keeps this reading as ambient light under glass. */
.blob {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  transition: background var(--tint-speed) var(--ease);
  will-change: transform;
}
.b1 {
  width: 62vw; height: 62vw; left: -6%; top: -4%;
  background: radial-gradient(circle at 50% 50%, var(--c1), transparent 66%);
  animation: float1 44s var(--ease) infinite alternate;
}
.b2 {
  width: 54vw; height: 54vw; right: -8%; top: 12%;
  background: radial-gradient(circle at 50% 50%, var(--c2), transparent 66%);
  animation: float2 53s var(--ease) infinite alternate;
}
.b3 {
  width: 50vw; height: 50vw; left: 22%; bottom: -10%;
  background: radial-gradient(circle at 50% 50%, var(--c3), transparent 68%);
  animation: float3 39s var(--ease) infinite alternate;
  opacity: 0.8;
}
.b4 {
  width: 38vw; height: 38vw; right: 18%; bottom: 6%;
  background: radial-gradient(circle at 50% 50%, var(--c2), transparent 70%);
  animation: float4 61s var(--ease) infinite alternate;
  opacity: 0.55;
}

@keyframes float1 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(18vw, 12vh, 0) scale(1.25); }
  100% { transform: translate3d(-6vw, 26vh, 0) scale(0.9); }
}
@keyframes float2 {
  0%   { transform: translate3d(0, 0, 0) scale(1.1); }
  50%  { transform: translate3d(-22vw, 18vh, 0) scale(0.85); }
  100% { transform: translate3d(-8vw, -10vh, 0) scale(1.3); }
}
@keyframes float3 {
  0%   { transform: translate3d(0, 0, 0) scale(0.95); }
  50%  { transform: translate3d(20vw, -7vh, 0) scale(1.3); }
  100% { transform: translate3d(-16vw, 5vh, 0) scale(1); }
}
@keyframes float4 {
  0%   { transform: translate3d(0, 0, 0) scale(1.2); }
  50%  { transform: translate3d(-14vw, -4vh, 0) scale(0.85); }
  100% { transform: translate3d(10vw, 10vh, 0) scale(1.15); }
}

/* Film grain keeps the gradients from banding */
.grain {
  position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.085; pointer-events: none;
  animation: grainShift 9s steps(6) infinite;
}
@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -2%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0, 0); }
}

/* Soft light that follows the cursor */
.pointer-glow {
  position: fixed; z-index: 0; left: 0; top: 0;
  width: 58rem; height: 58rem; margin: -29rem 0 0 -29rem;
  border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--c2) 34%, transparent), transparent 62%);
  filter: blur(40px);
  transition: opacity 0.8s var(--ease), background var(--tint-speed) var(--ease);
}
body.has-pointer .pointer-glow { opacity: 0.38; }

/* ============================================================
   2. GLASS
   ============================================================ */
.glass {
  position: relative;
  background: var(--glass);
  -webkit-backdrop-filter: blur(38px) saturate(200%) brightness(108%);
  backdrop-filter: blur(38px) saturate(200%) brightness(108%);
  border: 1px solid var(--edge);
  border-radius: 26px;
  box-shadow:
    /* rim light along the top edge, the tell of a real glass surface */
    inset 0 1px 0 0 var(--edge-bright),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 -20px 40px -30px rgba(255, 255, 255, 0.22),
    0 30px 80px -28px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  transition: transform 0.7s var(--ease), background-color 0.7s var(--ease),
              border-color 0.7s var(--ease), box-shadow 0.7s var(--ease);
}

/* A slow highlight that drifts across every panel on its own, so the
   glass looks lit rather than painted even when nothing is happening */
.glass::before {
  content: ""; position: absolute; inset: -1px; pointer-events: none;
  background:
    linear-gradient(115deg,
      transparent 34%,
      rgba(255, 255, 255, 0.05) 47%,
      rgba(255, 255, 255, 0.10) 50%,
      rgba(255, 255, 255, 0.04) 53%,
      transparent 66%),
    radial-gradient(120% 90% at 12% 0%,
      color-mix(in srgb, var(--c1) 14%, transparent), transparent 58%);
  background-size: 260% 100%, 100% 100%;
  background-position: 130% 0, 0 0;
  animation: sheen 14s var(--ease) infinite;
  transition: background var(--tint-speed) var(--ease);
}
@keyframes sheen {
  0%, 100% { background-position: 135% 0, 0 0; }
  50%      { background-position: -35% 0, 0 0; }
}

/* Specular sweep that slides across on hover */
.glass::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.16) 46%,
    rgba(255, 255, 255, 0.05) 54%,
    transparent 68%);
  transform: translateX(-130%);
  transition: transform 1.3s var(--ease-out);
}
.glass:hover::after { transform: translateX(130%); }


/* ============================================================
   3. CHROME
   ============================================================ */
.progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 200; pointer-events: none; }
.progress span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3));
  box-shadow: 0 0 14px color-mix(in srgb, var(--c2) 60%, transparent);
  transition: width 0.1s linear, background var(--tint-speed) var(--ease);
}

.nav {
  position: fixed; inset: 14px 0 auto 0; z-index: 150;
  display: flex; justify-content: center; padding-inline: var(--gutter);
  transition: transform 0.55s var(--ease), opacity 0.55s var(--ease);
}
.nav.hidden { transform: translateY(-140%); opacity: 0; }

.nav-glass {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem);
  padding: 9px 9px 9px 20px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(34px) saturate(200%) brightness(108%);
  backdrop-filter: blur(34px) saturate(200%) brightness(108%);
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 var(--edge-bright), 0 12px 40px -12px rgba(0,0,0,0.65);
}

.nav-logo { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; }
.nav-links { display: flex; gap: 0.25rem; }
.nav-links a {
  position: relative; font-size: 0.8125rem; color: var(--text-2);
  padding: 7px 14px; border-radius: 100px;
  transition: color 0.4s var(--ease), background-color 0.4s var(--ease);
}
.nav-links a:hover { color: var(--text); background: rgba(255,255,255,0.07); }
.nav-links a.active {
  color: var(--text);
  background: color-mix(in srgb, var(--c2) 22%, rgba(255,255,255,0.06));
}

/* ---------- SOUND PLAYER ---------- */
.player {
  position: fixed; left: var(--gutter); bottom: 22px; z-index: 150;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px 10px 10px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(22px) saturate(190%);
  backdrop-filter: blur(22px) saturate(190%);
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 var(--edge-bright), 0 14px 40px -14px rgba(0,0,0,0.7);
  transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease);
}
.player:hover { transform: translateY(-2px); }
.player.on {
  box-shadow: inset 0 1px 0 var(--edge-bright),
              0 14px 46px -12px color-mix(in srgb, var(--c2) 45%, transparent);
}

.player-btn {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.09);
  border: 1px solid var(--edge);
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.player-btn:hover { background: rgba(255,255,255,0.16); }
.player-btn[aria-pressed="true"] {
  background: color-mix(in srgb, var(--c2) 55%, transparent);
  border-color: color-mix(in srgb, var(--c2) 70%, transparent);
}
.power {
  width: 13px; height: 13px; border-radius: 50%;
  border: 1.8px solid currentColor; border-top-color: transparent;
  transform: rotate(-45deg);
  position: relative;
}
.power::before {
  content: ""; position: absolute; left: 50%; top: -4px;
  width: 1.8px; height: 7px; background: currentColor;
  transform: translateX(-50%) rotate(45deg); transform-origin: bottom;
}

.player-meta { display: flex; flex-direction: column; line-height: 1.25; }
.player-state { font-size: 0.75rem; font-weight: 500; }
.player-mood { font-size: 0.6875rem; color: var(--text-3); }

.viz { display: flex; align-items: flex-end; gap: 2px; height: 20px; }
.viz i {
  display: block; width: 2px; height: 2px; border-radius: 2px;
  background: var(--c2);
  transition: height 0.09s linear, background-color var(--tint-speed) var(--ease);
}

/* ============================================================
   4. TYPE + SECTIONS
   ============================================================ */
.section { position: relative; padding-block: var(--section-y); }

.tag {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-3);
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.tag.small { margin-bottom: 1rem; }

.display {
  font-size: clamp(2.5rem, 7.5vw, 5.5rem);
  font-weight: 600; line-height: 1.04; letter-spacing: -0.04em;
  text-wrap: balance;
}

.lede {
  font-size: clamp(1.0625rem, 1.9vw, 1.4375rem);
  line-height: 1.45; letter-spacing: -0.015em;
  color: var(--text-2); max-width: 46ch;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

/* ---------- REVEAL ---------- */
.reveal {
  opacity: 0; transform: translate3d(0, 34px, 0) scale(0.985);
  filter: blur(6px);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out),
              filter 1.1s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 100ms);
  will-change: opacity, transform, filter;
}
.reveal.in { opacity: 1; transform: none; filter: none; }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 100svh; display: grid; place-items: center;
  padding: 7rem var(--gutter) 8rem; text-align: center;
}
.hero-title { margin: 0; }
.line { display: block; overflow: hidden; padding-block: 0.08em; }
.line-in {
  display: block;
  font-size: clamp(3.25rem, 15vw, 11.5rem);
  font-weight: 600; line-height: 0.94; letter-spacing: -0.055em;
  background: linear-gradient(180deg, #ffffff 20%, rgba(255,255,255,0.62) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transform: translate3d(0, 108%, 0);
  animation: riseIn 1.6s var(--ease-out) 0.2s forwards;
}
@keyframes riseIn { to { transform: none; } }

.hero-sub {
  font-size: clamp(1.0625rem, 2.1vw, 1.4375rem);
  line-height: 1.45; letter-spacing: -0.015em; color: var(--text-2);
  margin: clamp(1.75rem, 4vw, 2.75rem) auto 0; max-width: 34ch;
}

/* Anchored to the foot of the hero rather than trailing the text, so the
   centred title is not left sitting above a half screen of nothing.
   It carries its own fade rather than .reveal, because sitting at the
   very bottom of the viewport puts it outside the observer's rootMargin
   on short screens, where it would never appear at all. */
.cue {
  position: absolute; left: 0; right: 0; bottom: clamp(1.75rem, 5vh, 3rem);
  margin-inline: auto; width: fit-content;
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.6rem;
  opacity: 0;
  animation: cueIn 0.9s var(--ease-out) 1.15s forwards;
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-3);
  transition: color 0.4s var(--ease);
}
@keyframes cueIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.cue:hover { color: var(--text); }
.cue svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  animation: bob 2.4s var(--ease) infinite;
}
@keyframes bob { 0%,100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(7px); opacity: 1; } }

/* ---------- THE NAME ---------- */
.card-def {
  padding: clamp(2rem, 5vw, 3.5rem);
  max-width: 600px;
  margin-bottom: 0;
}
.def-word {
  font-size: clamp(2.75rem, 9vw, 5.5rem);
  font-weight: 300; line-height: 1; letter-spacing: -0.045em;
}
.def-phon { font-size: 0.9375rem; color: var(--text-3); margin-top: 1rem; }
.def-phon em { font-style: italic; }
.def-list { margin-top: 1.75rem; display: grid; gap: 0.6rem; counter-reset: d; }
.def-list li {
  counter-increment: d;
  font-size: clamp(1rem, 1.8vw, 1.25rem); color: var(--text-2);
  display: flex; gap: 0.75rem;
}
.def-list li::before {
  content: counter(d) ".";
  color: var(--text-3); font-variant-numeric: tabular-nums;
}


/* ---------- CHIPS ---------- */
.chips {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.chip {
  position: relative;
  font-size: 0.8125rem; font-weight: 500; color: var(--text-2);
  padding: 9px 18px; border-radius: 100px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--edge);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: color 0.4s var(--ease), background-color 0.4s var(--ease),
              border-color 0.4s var(--ease), transform 0.4s var(--ease),
              box-shadow 0.5s var(--ease);
}
.chip:hover { color: var(--text); background: rgba(255, 255, 255, 0.1); transform: translateY(-2px); }
.chip[aria-expanded="true"] {
  color: var(--text);
  background: color-mix(in srgb, var(--c2) 26%, rgba(255, 255, 255, 0.08));
  border-color: color-mix(in srgb, var(--c2) 45%, transparent);
  box-shadow: 0 6px 24px -8px color-mix(in srgb, var(--c2) 65%, transparent);
}

/* Expanding explanation. Height is driven in px by main.js so it can
   animate, then released to auto so it stays responsive. */
.chip-panel {
  height: 0; overflow: hidden;
  transition: height 0.55s var(--ease);
}
.chip-panel-inner { padding-top: clamp(0.875rem, 2vw, 1.25rem); }

.chip-card { padding: clamp(1.25rem, 3vw, 1.75rem); max-width: 52ch; }
.chip-card h3 {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 0.75rem;
}
.chip-card p {
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  line-height: 1.6; color: var(--text-2);
}

/* ============================================================
   PHOTO SHOWCASE (home page)
   Deliberately the same footprint as a reel frame, so photography
   and video read as equal weight on the page.
   ============================================================ */
.teaser-strip {
  width: 100%;
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.pshow-frame {
  position: relative; width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 26px; overflow: hidden;
  border: 1px solid var(--edge);
  background: #06070b;
  box-shadow:
    inset 0 1px 0 var(--edge-bright),
    0 40px 90px -40px rgba(0, 0, 0, 0.95),
    0 0 70px -30px color-mix(in srgb, var(--c2) 55%, transparent);
  cursor: grab;
  touch-action: pan-y;
}
.pshow-frame:active { cursor: grabbing; }

.pshow-track {
  display: flex; height: 100%;
  transition: transform 0.75s var(--ease);
  will-change: transform;
}
.pshow-slide {
  flex: 0 0 100%; height: 100%; display: block;
  -webkit-user-select: none; user-select: none;
}
.pshow-slide img {
  width: 100%; height: 100%; object-fit: cover;
  -webkit-user-drag: none;
}

/* Arrows sit on the photo, right and left */
.pshow-nav {
  position: absolute; top: 50%; z-index: 2;
  transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: rgba(10, 12, 18, 0.42);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  opacity: 0.75;
  transition: opacity 0.35s var(--ease), background-color 0.35s var(--ease),
              transform 0.35s var(--ease);
}
.pshow-frame:hover .pshow-nav { opacity: 1; }
.pshow-nav:hover { background: rgba(20, 24, 34, 0.7); }
.pshow-nav.prev { left: clamp(0.75rem, 2vw, 1.25rem); }
.pshow-nav.next { right: clamp(0.75rem, 2vw, 1.25rem); }
.pshow-nav.prev:hover { transform: translateY(-50%) translateX(-3px); }
.pshow-nav.next:hover { transform: translateY(-50%) translateX(3px); }
.pshow-nav svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* Series name and position, bottom left of the frame */
.pshow-meta {
  position: absolute; z-index: 2;
  left: clamp(0.75rem, 2vw, 1.25rem); bottom: clamp(0.75rem, 2vw, 1.25rem);
  display: flex; align-items: center; gap: 0.7rem;
  padding: 8px 14px; border-radius: 100px;
  background: rgba(10, 12, 18, 0.42);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
  color: #fff;
}
.pshow-tag {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em;
}
.pshow-tag:empty { display: none; }
.pshow-count {
  font-size: 0.6875rem; letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.6); font-variant-numeric: tabular-nums;
}

.ts-go {
  display: inline-flex; align-items: center; gap: 0.6rem;
  white-space: nowrap;
  padding: 13px 22px; border-radius: 100px;
  font-size: 0.875rem; font-weight: 500;
  background: rgba(255, 255, 255, 0.055);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 var(--edge-bright);
  transition: background-color 0.5s var(--ease), transform 0.5s var(--ease);
}
.ts-go:hover { background: rgba(255, 255, 255, 0.12); transform: translateX(4px); }
.ts-go svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.5s var(--ease);
}
.ts-go:hover svg { transform: translateX(4px); }

/* ============================================================
   GALLERY PAGE
   ============================================================ */
.page-gallery main { padding-bottom: 4rem; }

/* Only has to clear the floating back button now, not a full nav bar */
.gal-head { padding: clamp(4.5rem, 7vw, 5.5rem) 0 clamp(1.5rem, 3vw, 2.25rem); }

/* Gallery pages carry a way out instead of a menu */
.back-fab {
  position: fixed; z-index: 150;
  top: clamp(14px, 2.5vw, 22px); left: clamp(14px, 2.5vw, 22px);
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.045);
  -webkit-backdrop-filter: blur(34px) saturate(200%) brightness(108%);
  backdrop-filter: blur(34px) saturate(200%) brightness(108%);
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 var(--edge-bright),
              0 14px 40px -16px rgba(0, 0, 0, 0.7);
  transition: color 0.4s var(--ease), transform 0.5s var(--ease),
              background-color 0.4s var(--ease);
}
.back-fab:hover {
  color: var(--text); transform: translateX(-3px);
  background: rgba(255, 255, 255, 0.1);
}
.back-fab svg {
  width: 19px; height: 19px; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

.back {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.8125rem; color: var(--text-2);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  transition: color 0.4s var(--ease), gap 0.4s var(--ease);
}
.back:hover { color: var(--text); gap: 0.75rem; }
.back svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* Filter bar with a pill that slides between options */
.filters {
  position: relative; display: inline-flex; flex-wrap: wrap; gap: 4px;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: 5px; border-radius: 100px;
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 var(--edge-bright);
}
.filter {
  position: relative; z-index: 1;
  font-size: 0.8125rem; font-weight: 500; color: var(--text-2);
  padding: 9px 20px; border-radius: 100px;
  transition: color 0.45s var(--ease);
}
.filter:hover { color: var(--text); }
.filter.is-on { color: var(--text); }

.filter-pill {
  position: absolute; z-index: 0; top: 5px; left: 5px;
  height: calc(100% - 10px); width: 0;
  border-radius: 100px;
  background: color-mix(in srgb, var(--c2) 30%, rgba(255, 255, 255, 0.1));
  box-shadow: 0 4px 18px -6px color-mix(in srgb, var(--c2) 60%, transparent);
  transition: transform 0.6s var(--ease), width 0.6s var(--ease),
              background-color var(--tint-speed) var(--ease);
}

.gal-count {
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-3); margin-top: clamp(1.5rem, 3vw, 2rem);
}

.gal-grid {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid; gap: clamp(0.75rem, 1.6vw, 1.125rem);
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(160px, 19vw, 250px);
}

.gshot {
  position: relative; overflow: hidden; border-radius: 22px;
  border: 1px solid var(--edge);
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 var(--edge-bright), 0 24px 60px -24px rgba(0,0,0,0.7);
  transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease);
}
.gshot.tall { grid-row: span 2; }
.gshot.wide { grid-column: span 2; }
.gshot:hover { transform: translateY(-5px); }

/* Entry animation, staggered by JS via --i */
.gshot.enter {
  opacity: 0; transform: translate3d(0, 26px, 0) scale(0.96); filter: blur(8px);
}
.gshot.enter.settled {
  opacity: 1; transform: none; filter: none;
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out),
              filter 0.8s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 45ms);
}
/* Held out of layout while a filter hides it */
.gshot.gone { display: none; }

.gshot img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.gshot:hover img { transform: scale(1.05); }
.gshot img.missing { opacity: 0; }

.gshot.no-img::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--c1) 28%, transparent),
    color-mix(in srgb, var(--c2) 20%, transparent));
  transition: background var(--tint-speed) var(--ease);
}
.gshot.no-img::after {
  content: "images/" attr(data-name);
  position: absolute; inset: auto 0 50% 0; transform: translateY(50%);
  text-align: center; font-size: 0.6875rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}


.gal-foot { margin-top: clamp(3rem, 6vw, 4.5rem); }

.gal-empty {
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
  font-size: 0.9375rem; color: var(--text-3);
  padding-block: clamp(2rem, 5vw, 3.5rem);
}
.gal-empty[hidden] { display: none; }

/* The frame a deep link landed on, so it is obvious which one you
   followed before the viewer opens over it */
.located {
  animation: located 3s var(--ease) 1;
}
@keyframes located {
  0%, 100% { box-shadow: inset 0 1px 0 var(--edge-bright), 0 26px 60px -28px rgba(0,0,0,0.8); }
  15%, 70% {
    box-shadow: inset 0 1px 0 var(--edge-bright),
                0 0 0 3px color-mix(in srgb, var(--c2) 75%, transparent),
                0 0 40px color-mix(in srgb, var(--c2) 45%, transparent);
  }
}

/* Which series the open photo belongs to */
.lb-stage figcaption b {
  font-size: 0.875rem; font-weight: 600; color: var(--text);
}

/* ============================================================
   SERIES (a named body of work inside a category)
   ============================================================ */
.series {
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
  transition: opacity 0.5s var(--ease);
}
.series[hidden] { display: none; }

.series-head {
  display: flex; gap: clamp(1rem, 2.5vw, 2rem);
  padding-block: clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2.25rem);
}
.series-rule {
  flex: none; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--c1), var(--c2));
  box-shadow: 0 0 20px color-mix(in srgb, var(--c2) 55%, transparent);
}
.series-kicker {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 0.6rem;
}
.series-title {
  font-size: clamp(1.75rem, 4.4vw, 3.25rem);
  font-weight: 600; line-height: 1.05; letter-spacing: -0.035em;
}
.series-title span {
  display: block; font-weight: 300; color: var(--text-2);
}
.series-note {
  margin-top: 0.9rem; font-size: 0.9375rem; color: var(--text-3);
}
.series-end {
  height: 1px; margin-top: clamp(1.75rem, 4vw, 2.75rem);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--c2) 45%, transparent), transparent 65%);
}

/* Editorial grid: a wide opener, then alternating weights */
.sh-grid {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(0.6rem, 1.4vw, 1rem);
  grid-auto-rows: clamp(170px, 21vw, 340px);
}
.sh-a  { grid-column: span 12; grid-row: span 2; }
.sh-12 { grid-column: span 12; }
.sh-7  { grid-column: span 7; }
.sh-6  { grid-column: span 6; }
.sh-5  { grid-column: span 5; }

.sh {
  position: relative; overflow: hidden; border-radius: 20px;
  border: 1px solid var(--edge);
  background: rgba(255, 255, 255, 0.04);
  cursor: zoom-in;
  box-shadow: inset 0 1px 0 var(--edge-bright), 0 26px 60px -28px rgba(0,0,0,0.8);
  transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease);
}
.sh:hover { transform: translateY(-4px); }
.sh img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.2s var(--ease), filter 0.6s var(--ease);
}
.sh:hover img { transform: scale(1.04); }


/* ============================================================
   LIGHTBOX
   ============================================================ */
.lb {
  position: fixed; inset: 0; z-index: 300;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(4, 5, 8, 0.86);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  backdrop-filter: blur(26px) saturate(160%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.lb[hidden] { display: none; }
.lb.open { opacity: 1; }

.lb-stage {
  display: flex; flex-direction: column; align-items: center;
  gap: 1rem; min-width: 0; min-height: 0;
}
.lb-stage img {
  max-width: 100%; max-height: calc(100svh - 10rem);
  width: auto; height: auto; object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9);
}
.lb-stage figcaption {
  display: flex; align-items: baseline; gap: 0.9rem;
  font-size: 0.875rem; color: var(--text-2);
}
.lb-stage figcaption span {
  font-size: 0.75rem; letter-spacing: 0.14em; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.lb-nav, .lb-close {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--edge);
  transition: background-color 0.35s var(--ease), transform 0.35s var(--ease),
              opacity 0.35s var(--ease);
}
.lb-nav:hover, .lb-close:hover { background: rgba(255,255,255,0.18); transform: scale(1.08); }
.lb-nav[disabled] { opacity: 0.25; pointer-events: none; }
.lb-close { position: absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); z-index: 2; }
.lb-nav svg, .lb-close svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

body.lb-open { overflow: hidden; }

/* ============================================================
   REEL
   ============================================================ */
.reel-wrap {
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter);
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid; gap: clamp(2rem, 4vw, 3rem);
}

.reel-label {
  display: flex; align-items: baseline; gap: 0.7rem;
  margin-top: 0.875rem; padding-inline: 0.25rem;
}
.reel-label b {
  font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em;
}
.reel-label span {
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-3);
}

.reel-frame {
  position: relative; overflow: hidden;
  border-radius: 26px;
  border: 1px solid var(--edge);
  background: #06070b;
  box-shadow:
    inset 0 1px 0 var(--edge-bright),
    0 40px 90px -40px rgba(0, 0, 0, 0.95),
    0 0 70px -30px color-mix(in srgb, var(--c2) 55%, transparent);
  transition: box-shadow 0.8s var(--ease);
}
.reel-frame video {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
  background: #06070b;
}

/* Sound toggle sits on the glass, bottom right of the frame */
.reel-sound {
  position: absolute; right: clamp(0.75rem, 2vw, 1.25rem);
  bottom: clamp(0.75rem, 2vw, 1.25rem); z-index: 2;
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 9px 16px 9px 12px; border-radius: 100px;
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.01em;
  color: #fff;
  background: rgba(10, 12, 18, 0.5);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: background-color 0.4s var(--ease), transform 0.4s var(--ease),
              border-color 0.4s var(--ease);
}
.reel-sound:hover { background: rgba(20, 24, 34, 0.68); transform: translateY(-2px); }
.reel-sound[aria-pressed="true"] {
  background: color-mix(in srgb, var(--c2) 42%, rgba(10,12,18,0.5));
  border-color: color-mix(in srgb, var(--c2) 60%, transparent);
}

.rs-ico { position: relative; width: 18px; height: 18px; flex: none; }
.rs-ico svg {
  position: absolute; inset: 0; width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.rs-ico .rs-on  { opacity: 0; transform: scale(0.8); }
.reel-sound[aria-pressed="true"] .rs-off { opacity: 0; transform: scale(0.8); }
.reel-sound[aria-pressed="true"] .rs-on  { opacity: 1; transform: none; }

/* ============================================================
   SOCIALS
   ============================================================ */
.socials {
  display: grid; gap: clamp(0.75rem, 1.6vw, 1.125rem);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: 720px;
}

.social {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 1rem;
  padding: clamp(1rem, 2.2vw, 1.375rem);
  border-radius: 20px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 var(--edge-bright), 0 24px 50px -30px rgba(0,0,0,0.8);
  transition: transform 0.5s var(--ease), background-color 0.5s var(--ease),
              border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.social:hover { transform: translateY(-4px); background: var(--glass-strong); }

/* Brand glow, kept to the hover so the page stays its own colour */
.social.yt:hover {
  border-color: rgba(255, 0, 0, 0.42);
  box-shadow: inset 0 1px 0 var(--edge-bright), 0 26px 55px -28px rgba(255, 0, 0, 0.5);
}
.social.ig:hover {
  border-color: rgba(221, 42, 123, 0.42);
  box-shadow: inset 0 1px 0 var(--edge-bright), 0 26px 55px -28px rgba(221, 42, 123, 0.5);
}

.social-mark { flex: none; width: 34px; height: 34px; display: grid; place-items: center; }
.social-mark svg { width: 30px; height: 30px; }

/* YouTube: greyscale at rest, brand red on hover */
.yt-body { fill: var(--text-2); transition: fill 0.45s var(--ease); }
.yt-play { fill: #06070b; }
.social.yt:hover .yt-body { fill: #FF0000; }

/* Instagram: outline glyph that fills with the brand gradient on hover */
.ig-shape {
  fill: none; stroke: var(--text-2); stroke-width: 1.9;
  transition: stroke 0.45s var(--ease);
}
.ig-dot { fill: var(--text-2); transition: fill 0.45s var(--ease); }
.social.ig:hover .ig-shape { stroke: url(#igGrad); }
.social.ig:hover .ig-dot { fill: url(#igGrad); }

.social-text { display: flex; flex-direction: column; line-height: 1.3; margin-right: auto; }
.social-text b { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; }
.social-text span { font-size: 0.8125rem; color: var(--text-3); }

.social-go {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: var(--text-3); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke 0.4s var(--ease), transform 0.4s var(--ease);
}
.social:hover .social-go { stroke: var(--text); transform: translate(2px, -2px); }

/* ---------- ASIDE ---------- */
.aside-note { text-align: center; }
.aside-body {
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  line-height: 1.62; color: var(--text-2);
  max-width: 44ch; margin-inline: auto;
}

/* ---------- CONTACT ---------- */
.mail {
  display: inline-block;
  font-size: clamp(1.125rem, 3vw, 2rem);
  font-weight: 500; letter-spacing: -0.025em;
  margin-top: clamp(2rem, 4vw, 2.75rem); padding-bottom: 6px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size 0.6s var(--ease), color 0.4s var(--ease);
}
.mail:hover { background-size: 100% 1px; color: var(--c2); }

/* The last section ends tighter than the rest, so the page does not
   finish on a band of empty padding */
.contact { padding-bottom: clamp(2rem, 4vw, 3rem); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-btn {
  display: inline-flex; align-items: center; gap: 0.65rem;
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding: 15px 26px; border-radius: 100px;
  font-size: 0.9375rem; font-weight: 500;
  background: color-mix(in srgb, var(--c2) 22%, rgba(255, 255, 255, 0.07));
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid color-mix(in srgb, var(--c2) 40%, var(--edge));
  box-shadow: inset 0 1px 0 var(--edge-bright),
              0 18px 44px -20px color-mix(in srgb, var(--c2) 60%, transparent);
  transition: transform 0.45s var(--ease), background-color 0.45s var(--ease),
              box-shadow 0.45s var(--ease);
}
.contact-btn:hover {
  transform: translateY(-3px);
  background: color-mix(in srgb, var(--c2) 34%, rgba(255, 255, 255, 0.1));
  box-shadow: inset 0 1px 0 var(--edge-bright),
              0 22px 54px -18px color-mix(in srgb, var(--c2) 75%, transparent);
}
.contact-btn svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.45s var(--ease);
}
.contact-btn:hover svg { transform: translateX(4px); }

/* ---------- overlay ---------- */
.cf {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  background: rgba(4, 5, 8, 0.82);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  opacity: 0; transition: opacity 0.36s var(--ease);
  overflow-y: auto;
}
.cf[hidden] { display: none; }
.cf.open { opacity: 1; }

.cf-panel {
  position: relative; width: min(560px, 100%);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: 26px;
  transform: translateY(16px) scale(0.98);
  transition: transform 0.5s var(--ease-out);
}
.cf.open .cf-panel { transform: none; }
/* The panel's own sweep would slide over the inputs */
.cf-panel::after { display: none; }

.cf-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--text-2);
  border: 1px solid var(--edge);
  background: rgba(255, 255, 255, 0.06);
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.cf-close:hover { color: var(--text); background: rgba(255, 255, 255, 0.14); }
.cf-close svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round;
}

.cf-title {
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 600; letter-spacing: -0.03em;
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}

.cf-row { display: grid; gap: 0.875rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .cf-row { grid-template-columns: 1fr; } }

.cf-field { display: block; margin-bottom: 0.875rem; }
.cf-field > span {
  display: block; margin-bottom: 0.4rem;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-3);
}
.cf-field input, .cf-field textarea {
  width: 100%; font: inherit; font-size: 0.9375rem; color: var(--text);
  padding: 12px 14px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--edge);
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
  resize: vertical;
}
.cf-field textarea { min-height: 120px; line-height: 1.55; }
.cf-field input:focus, .cf-field textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--c2) 65%, transparent);
  background: rgba(255, 255, 255, 0.08);
}

/* Honeypot. Kept out of sight without display:none, which some bots
   check for. */
.cf-trap {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

.cf-error {
  font-size: 0.8125rem; color: #ff8a8a;
  margin: 0.25rem 0 0.75rem;
}
.cf-error[hidden] { display: none; }


.cf-submit {
  position: relative; width: 100%; margin-top: 0.5rem;
  padding: 14px 22px; border-radius: 100px;
  font-size: 0.9375rem; font-weight: 600;
  background: color-mix(in srgb, var(--c2) 30%, rgba(255, 255, 255, 0.09));
  border: 1px solid color-mix(in srgb, var(--c2) 48%, var(--edge));
  box-shadow: inset 0 1px 0 var(--edge-bright);
  transition: background-color 0.35s var(--ease), transform 0.35s var(--ease),
              opacity 0.3s var(--ease);
}
.cf-submit:hover { background: color-mix(in srgb, var(--c2) 42%, rgba(255,255,255,0.12)); }
.cf-submit:active { transform: scale(0.99); }
.cf-submit:disabled { opacity: 0.75; cursor: default; }
.cf-submit.busy .cf-submit-label { opacity: 0; }

.cf-spinner {
  position: absolute; left: 50%; top: 50%;
  width: 17px; height: 17px; margin: -8.5px 0 0 -8.5px;
  border-radius: 50%; opacity: 0;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-top-color: #fff;
  transition: opacity 0.25s var(--ease);
}
.cf-submit.busy .cf-spinner { opacity: 1; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }


/* ---------- sent ---------- */
.cf-done { text-align: center; padding-block: clamp(1.5rem, 4vw, 2.5rem); }
.cf-done[hidden] { display: none; }
.cf-tick {
  display: grid; place-items: center; margin: 0 auto 1.25rem;
  width: 56px; height: 56px; border-radius: 50%;
  background: color-mix(in srgb, var(--c2) 26%, transparent);
  border: 1px solid color-mix(in srgb, var(--c2) 55%, transparent);
}
.cf-tick svg {
  width: 26px; height: 26px; fill: none; stroke: var(--text);
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.cf-done h2 {
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 600; letter-spacing: -0.03em;
}
.cf-done p { margin-top: 0.5rem; color: var(--text-2); font-size: 0.9375rem; }
.cf-again {
  margin-top: 1.75rem; padding: 11px 24px; border-radius: 100px;
  font-size: 0.875rem; font-weight: 500; color: var(--text-2);
  border: 1px solid var(--edge);
  background: rgba(255, 255, 255, 0.05);
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.cf-again:hover { color: var(--text); background: rgba(255, 255, 255, 0.12); }

.foot-row {
  display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between;
  margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,0.09);
  font-size: 0.75rem; color: var(--text-3);
}
.foot-row a:hover { color: var(--text); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .gal-grid { grid-template-columns: repeat(2, 1fr); }
  .nav-links { display: none; }
  .nav-glass { padding: 10px 20px; }
  .teaser-strip { grid-template-columns: repeat(3, 1fr); }
  .ts-go { grid-column: 1 / -1; justify-content: center; }
}
@media (max-width: 900px) {
  /* Series drops to halves, opener stays full width */
  .sh-7, .sh-5, .sh-6 { grid-column: span 6; }
}
@media (max-width: 620px) {
  .gal-grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .gshot.tall, .gshot.wide { grid-row: span 1; grid-column: span 1; }
  .sh-7, .sh-5, .sh-6, .sh-12 { grid-column: span 12; }
  .sh-a { grid-row: span 1; }
  .sh-grid { grid-auto-rows: clamp(200px, 55vw, 280px); }
  .lb { grid-template-columns: 1fr; }
  .lb-nav { position: absolute; bottom: 1.5rem; }
  .lb-prev { left: 25%; }
  .lb-next { right: 25%; }
  .filters { display: flex; width: 100%; justify-content: flex-start; }
  .filter { flex: 1; padding: 9px 12px; text-align: center; }
  .player { left: 12px; right: 12px; bottom: 12px; justify-content: center; }
  /* Clear the full width player pill */
  .cue { bottom: 6rem; }
  .blobs { filter: blur(50px); }
  /* vw-sized blobs are tiny on a narrow tall screen, so switch to vmax.
     Opacity comes down to stop them washing the whole screen out. */
  .blobs { opacity: 0.38; }
  .b1 { width: 58vmax; height: 58vmax; }
  .b2 { width: 50vmax; height: 50vmax; }
  .b3 { width: 46vmax; height: 46vmax; }
  .b4 { width: 36vmax; height: 36vmax; }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; filter: none; }
  .line-in { transform: none; }
  .big-text .w { color: var(--text); }
}