/*
Theme Name: RC
Theme URI: https://raphaelcannito.ca
Author: Raphael Cannito
Description: Cinematic editorial portfolio theme for an award-winning creative director. Bellefair serif + Plus Jakarta Sans (tight tracking, bundled locally), signature flame-bar hero, discipline chapters with embedded featured-project strips, filterable work index, editorial Info page, full-bleed case-study pages, unified white pill buttons, AODA/WCAG-AA colour system, hidden easter eggs. Blur-crossfade navigation — no loaders.
Version: 0.1.3
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: rc-lumen
*/

/* ================= FONTS (bundled, OFL) ================= */
@font-face {
  font-family: 'Bellefair';
  src: url('assets/fonts/Bellefair-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('assets/fonts/PlusJakartaSans-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 200 800; font-style: normal; font-display: swap;
}

/* ================= TOKENS ================= */
:root {
  --bg:        #0E0F13;
  --surface:   #17181D;
  --ink:       #E6E7EB;
  /* AODA/WCAG AA: muted inks hold ≥4.5:1 on their backgrounds */
  --ink-mute:  rgba(230, 231, 235, 0.72);
  --ink-faint: rgba(230, 231, 235, 0.42);
  --line:      rgba(230, 231, 235, 0.16);
  --accent:      #FF5A1F;  /* decorative + text on dark (≈6:1 on --bg) */
  --accent-deep: #A63800;  /* text/CTA surfaces on light (≥4.5:1 under white) */

  /* light-section palette */
  --paper:      #E6E7EB;
  --paper-deep: #D8D9DF;
  --char:       #242733;
  --warm-paper: #E9E5DC;   /* warm card beige */

  /* hero bar palette — the RC flame ramp (swap in one place) */
  --flame-soft: #FC931A;
  --flame:      #FF4A09;
  --flame-mid:  #FE6F12;
  /* kept for pills/eggs */
  --gradient-color-1: #ffffff;
  --gradient-color-2: #FC931A;
  --gradient-color-3: #FF4A09;
  --gradient-color-4: #FE6F12;

  /* header adapts over light sections */
  --hdr-ink:  #E6E7EB;
  --hdr-line: rgba(230, 231, 235, 0.22);
  --hdr-bg:   rgba(14, 15, 19, 0.45);

  --f-display: 'Bellefair', Georgia, serif;
  --f-body:    'Plus Jakarta Sans', 'Helvetica Neue', sans-serif;
  --track-tight: -0.02em; /* Plus Jakarta runs wide — keep it tight */

  --fs-hero:   clamp(2.9rem, 8.6vw, 8.5rem);
  --fs-big:    clamp(2.4rem, 8.6vw, 7.5rem);
  --fs-medium: clamp(2rem, 4.4vw, 4rem);
  --fs-h3:     clamp(1.35rem, 2.4vw, 2.1rem);
  --fs-lede:   clamp(1.05rem, 1.5vw, 1.35rem);
  --fs-kicker: 0.75rem;

  --ease: cubic-bezier(0.16, 1, 0.3, 1); /* the RC house ease (outExpo) */
  --fast: 0.35s;
  --slow: 1.2s;

  --pad:   clamp(1.1rem, 1.4vw, 1.6rem);
  --band:  clamp(5rem, 12vw, 11rem);
  --radius: 10px;
}

/* light sections re-map the same variables */
.theme-light {
  --bg:        var(--paper);
  --surface:   var(--paper-deep);
  --ink:       var(--char);
  --ink-mute:  rgba(36, 39, 51, 0.74);
  --ink-faint: rgba(36, 39, 51, 0.45);
  --line:      rgba(36, 39, 51, 0.18);
  --accent:    var(--accent-deep); /* AODA: accent text on paper */
  background: var(--bg);
  color: var(--ink);
}

/* keyboard access — visible focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px;
}
.skip-link:focus {
  position: fixed; top: 1rem; left: 1rem; z-index: 9999;
  width: auto; height: auto; clip: auto; overflow: visible;
  background: var(--char); color: #fff; padding: 0.8em 1.4em; border-radius: 999px;
  font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase;
}
body.over-light {
  --hdr-ink:  var(--char);
  --hdr-line: rgba(36, 39, 51, 0.3);
  --hdr-bg:   rgba(230, 231, 235, 0.55);
}
body.over-light .brand-logo { filter: invert(1) hue-rotate(180deg); }

/* ================= BASE ================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-weight: 300;
  font-size: min(22px, max(16px, 1.15vw));
  letter-spacing: var(--track-tight);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--fast) var(--ease); }
a:hover { color: var(--accent); }
h1, h2, h3 { font-family: var(--f-display); font-weight: 400; margin: 0; letter-spacing: 0; }
p { margin: 0 0 1em; }
::selection { background: var(--accent); color: #fff; }

.main-pad { padding-left: var(--pad); padding-right: var(--pad); }
.page-frame { will-change: filter, opacity; }

.kicker {
  font-family: var(--f-body); font-weight: 500;
  font-size: var(--fs-kicker); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute);
  display: block;
}
.muted { color: var(--ink-mute); }
.medium-title { font-size: var(--fs-medium); line-height: 1.05; letter-spacing: -0.01em; }
.lede { font-size: var(--fs-lede); color: var(--ink-mute); max-width: 60ch; }
.statement { font-family: var(--f-display); font-size: var(--fs-medium); line-height: 1.06; max-width: 22ch; text-wrap: balance; }

.arrow-link {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: var(--fs-kicker); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
}
.arrow-link::after { content: "\2192"; transition: transform var(--fast) var(--ease); }
.arrow-link:hover::after { transform: translateX(6px); }

/* ---- buttons: one system — white pill, black text, sliding label ---- */
.btn, .nav-cta, .menu-toggle, .menu-close {
  display: inline-flex; align-items: center; gap: 0.6em;
  border: 1px solid rgba(17, 18, 20, 0.12); border-radius: 999px;
  padding: 0.9em 1.7em;
  font-family: var(--f-body);
  font-size: var(--fs-kicker); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #111214; background: #ffffff; cursor: pointer;
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.btn:hover, .nav-cta:hover, .menu-toggle:hover, .menu-close:hover {
  background: #F0F0F0; color: #111214;
  box-shadow: 0 8px 24px rgba(10, 11, 14, 0.16);
}
/* variant classes kept for markup compatibility — all resolve to white */
.btn.dark, .btn.paper, .btn.fill { background: #ffffff; border-color: rgba(17, 18, 20, 0.12); color: #111214; }
.btn.dark:hover, .btn.paper:hover, .btn.fill:hover { background: #F0F0F0; color: #111214; }

.btn-label { display: inline-block; position: relative; overflow: hidden; }
.btn-label i { display: block; font-style: normal; transition: transform 0.5s var(--ease); }
.btn-label::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 100%; width: 100%;
  transition: transform 0.5s var(--ease);
}
.btn:hover .btn-label i, .nav-cta:hover .btn-label i, .menu-toggle:hover .btn-label i, .menu-close:hover .btn-label i { transform: translateY(-100%); }
.btn:hover .btn-label::after, .nav-cta:hover .btn-label::after, .menu-toggle:hover .btn-label::after, .menu-close:hover .btn-label::after { transform: translateY(-100%); }

/* ================= HEADER (adaptive) ================= */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 900; pointer-events: none; }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 1rem var(--pad); }
.header-left, .header-right { display: flex; align-items: center; gap: 1rem; pointer-events: auto; }
.header-left { gap: 1.6rem; }
.brand { display: inline-flex; align-items: center; }
.brand-logo { height: 2.4rem; width: auto; transition: filter var(--fast) var(--ease); }
/* nav: bare links + a hover marker that glides between them;
   no container chrome */
.site-nav {
  position: relative; display: flex; align-items: center; gap: 0.4rem;
  margin-left: clamp(1rem, 3vw, 3.5rem);
}
.site-nav a {
  position: relative; z-index: 2;
  font-size: var(--fs-kicker); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--hdr-ink); padding: 0.6em 1.15em; border-radius: 999px;
  transition: color var(--fast) var(--ease), opacity var(--fast) var(--ease);
}
.site-nav:hover a:not(:hover) { opacity: 0.55; }
.nav-hover {
  position: absolute; z-index: 1; top: 50%; height: 2.3em;
  transform: translateY(-50%);
  left: 0; width: 0; border-radius: 999px;
  background: currentColor; color: var(--hdr-ink); opacity: 0;
  transition: left 0.4s var(--ease), width 0.4s var(--ease), opacity 0.25s var(--ease);
}
.site-nav:hover .nav-hover { opacity: 0.14; }
/* header buttons share the white system above */
.menu-toggle { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

@media (max-width: 860px) {
  .site-nav { display: none; }
  .brand-logo { height: 2rem; }
  .nav-cta, .menu-toggle { padding: 0.75em 1.2em; }
}

/* ================= MENU SHEET ================= */
.menu-sheet {
  position: fixed; inset: 0; z-index: 950;
  background: rgba(14, 15, 19, 0.88);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  display: none; flex-direction: column; justify-content: flex-end;
  padding: var(--pad); padding-bottom: 3rem; gap: 3rem; opacity: 0;
  color: #E6E7EB;
}
.menu-sheet.is-open-basic { display: flex; opacity: 1; }
.menu-close { position: absolute; top: 1rem; right: var(--pad); z-index: 2; }
.sheet-nav { display: flex; flex-direction: column; gap: 0.1em; }
.sheet-nav a { font-family: var(--f-display); font-size: clamp(2.6rem, 8vw, 6.5rem); line-height: 1.05; width: fit-content; }
.sheet-nav .idx { font-family: var(--f-body); font-size: 0.75rem; font-weight: 500; color: rgba(230,231,235,0.4); vertical-align: super; margin-right: 0.6em; }
.sheet-word { display: inline-block; }
.sheet-meta { display: flex; gap: 2.5rem; flex-wrap: wrap; border-top: 1px solid rgba(230,231,235,0.16); padding-top: 1.5rem; }
.sheet-meta a { font-size: var(--fs-kicker); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(230,231,235,0.6); }
.sheet-meta a:hover { color: var(--accent); }

/* ================= 1. BANNER HERO — RC flame bars ================= */
/* Light stage: a bank of flex bars, each a
   vertical white → amber → flame → white gradient whose stops breathe
   and lean toward the cursor, with film grain over everything. */
.hero-banner {
  min-height: 100svh; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 16vh var(--pad) 12vh;
  background: #0B0E14; /* dark stage — hero type is all white */
}
/* soft dark pool behind the centre so white type holds AA over the band */
.hero-banner::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(58% 52% at 50% 52%, rgba(8, 9, 12, 0.62) 0%, rgba(8, 9, 12, 0.28) 60%, transparent 100%);
}
@media (min-width: 861px) { .hero-banner { min-height: 105vh; } }
.gradient-bars { position: absolute; inset: 0; z-index: 0; display: flex; }
.gradient-bars .bar { flex: 1 1 0%; height: 100%; transform: scaleX(1.1); will-change: background; }
/* no-JS / reduced-motion: one static band in the same colours */
.gradient-bars:empty {
  background: linear-gradient(#0B0E14 0%, var(--flame-soft, #FC931A) 34%, var(--flame, #FF4A09) 46%, var(--flame-mid, #FE6F12) 52%, var(--flame, #FF4A09) 58%, var(--flame-soft, #FC931A) 70%, #0B0E14 100%);
}
.film-grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transform: scale(1.05); }
.hero-shade {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(255,255,255,0.55), rgba(255,255,255,0.8));
}
.hero-content { position: relative; z-index: 2; text-align: center; max-width: min(1680px, 96vw); }
.hero-kicker { margin-bottom: clamp(1.4rem, 3vh, 2.4rem); color: #ffffff; }
.hero-title { font-size: var(--fs-hero); line-height: 1.04; letter-spacing: -0.01em; color: #ffffff; white-space: nowrap; }
.hero-title .hline { display: block; }
.hero-sub { margin: clamp(1.6rem, 3.4vh, 2.6rem) auto 0; max-width: 44ch; font-size: var(--fs-lede); color: #ffffff; }
.hero-actions { display: flex; justify-content: center; gap: 0.8rem; margin-top: clamp(1.4rem, 3vh, 2.2rem); }

/* inline headline pills */
.pill {
  display: inline-block; vertical-align: baseline;
  height: 0.78em; aspect-ratio: 2.35;
  border-radius: 999px; overflow: hidden; position: relative;
  margin: 0 0.12em; transform: translateY(0.08em);
  background: linear-gradient(120deg, var(--flame-soft) 0%, var(--flame-mid) 55%, var(--flame) 100%);
}
.pill img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.01); transition: transform 0.8s var(--ease); }
.pill em {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--f-body); font-style: normal; font-weight: 500;
  font-size: clamp(0.52rem, 0.9vw, 0.8rem); letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff; background: rgba(10, 10, 12, 0.55); /* AODA: label holds AA over imagery */
  opacity: 0; transform: translateY(30%); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.pill:hover img { transform: scale(1.12); }
.pill:hover em { opacity: 1; transform: none; }
.pill-lg { aspect-ratio: 2.9; }
.pill-tint { background: linear-gradient(120deg, #FF9500 0%, #6E5BFF 55%, #0FA4A0 100%); }
.pill-tint em { opacity: 1; transform: none; background: rgba(10, 10, 12, 0.55); }

/* animated gradient pill (Meet Raphael) */
.pill-anim {
  background: linear-gradient(115deg, var(--flame-soft), var(--flame-mid), var(--flame), #6E5BFF, var(--flame-soft));
  background-size: 320% 100%;
  animation: pill-flow 7s linear infinite;
}
.pill-anim em { opacity: 1; transform: none; background: rgba(10, 10, 12, 0.55); }
@keyframes pill-flow { to { background-position: 320% 0; } }
@media (prefers-reduced-motion: reduce) { .pill-anim { animation: none; } }

/* project-reel pill (See the work) — JS cycles the frames */
.pill-flash { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
[data-flash] em { opacity: 1; transform: none; background: rgba(10, 10, 12, 0.55); }

/* 3-strip slice hover on the pills */
.pill-slices { position: absolute; inset: 0; display: block; }
.pill-slice { position: absolute; left: 0; width: 100%; height: 33.4%; will-change: transform; }
.pill-tint .pill-slice { background-image: linear-gradient(120deg, #FF9500 0%, #6E5BFF 55%, #0FA4A0 100%); background-size: 100% 300%; }
.pill-tint .pill-slice:nth-child(1) { background-position: 50% 0%; }
.pill-tint .pill-slice:nth-child(2) { background-position: 50% 50%; }
.pill-tint .pill-slice:nth-child(3) { background-position: 50% 100%; }

/* ================= 2. DISCIPLINE CHAPTERS ================= */
/* One continuous unit: white serif statement +
   button over the full-bleed stage, featured-project strip at the
   bottom of the same image. */
.chapters { position: relative; }
.chapter { position: relative; }
.chapter-stage {
  position: relative; min-height: 118svh;
  display: flex; flex-direction: column;
  justify-content: space-between; align-items: center;
  padding: 16vh var(--pad) 5vh;
  overflow: hidden;
}
.chapter-media { position: absolute; inset: 0; overflow: hidden; background: var(--char); }
.chapter-media img { position: absolute; inset: 0; width: 100%; height: 118%; object-fit: cover; will-change: transform; }
.stage-tint {
  position: absolute; inset: 0;
  background:
    radial-gradient(90% 110% at 82% 0%, var(--chapter-accent, #FF5A1F) 0%, transparent 55%),
    linear-gradient(160deg, #191B22 0%, #0E0F13 100%);
  background:
    radial-gradient(90% 110% at 82% 0%, var(--chapter-accent, #FF5A1F) 0%, transparent 55%),
    radial-gradient(120% 130% at 8% 100%, color-mix(in srgb, var(--chapter-accent, #FF5A1F) 55%, #0E0F13) 0%, transparent 60%),
    linear-gradient(160deg, #191B22 0%, #0E0F13 100%);
}
.chapter-media img + .stage-tint { opacity: 0.35; }
.stage-mark {
  position: absolute; right: 4vw; bottom: -4vw;
  font-family: var(--f-display); font-size: clamp(12rem, 34vw, 34rem); line-height: 1;
  color: rgba(230, 231, 235, 0.1); user-select: none;
}
/* AODA: guarantees ≥4.5:1 for the white heading over any stage art */
.stage-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10, 11, 14, 0.66) 0%, rgba(10, 11, 14, 0.28) 45%, rgba(10, 11, 14, 0.3) 100%);
}
.stage-heading {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
  text-align: center; color: #F0F1F5;
  margin-bottom: clamp(2rem, 5vh, 4rem);
}
.stage-heading .kicker { color: rgba(240, 241, 245, 0.85); }
.chapter-title { font-size: var(--fs-medium); line-height: 1.08; max-width: 34ch; color: #F0F1F5; }
.btn.paper { background: var(--paper); border-color: var(--paper); color: var(--char); }
.btn.paper:hover { background: #fff; border-color: #fff; color: var(--accent-deep); }

/* featured-project strip: one rounded unit — warm text
   panel left, three preview tiles right, tight gaps */
.chapter-embed {
  position: relative; z-index: 3;
  display: flex; gap: 8px; width: 100%; max-width: 1440px;
  height: clamp(250px, 40vh, 430px);
  background: rgba(233, 229, 220, 0.88);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-radius: 12px; overflow: hidden; padding: 8px;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.chapter-embed:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(10, 11, 14, 0.35); }
.embed-panel {
  flex: 0 1 460px; min-width: min(300px, 100%);
  display: flex; flex-direction: column;
  padding: clamp(1.2rem, 2.2vw, 2.4rem);
  color: var(--char);
}
.embed-panel .kicker { color: rgba(36, 39, 51, 0.78); }
.embed-panel h3 {
  font-size: clamp(1.4rem, 2.2vw, 2.1rem); line-height: 1.22;
  color: #2A3040; max-width: 24ch;
  margin: auto 0 0.7rem; /* kicker top, title pulled to centre-bottom */
  transition: transform 0.5s var(--ease);
}
.chapter-embed:hover .embed-panel h3 { transform: translateX(8px); }
.embed-panel .client { color: rgba(36, 39, 51, 0.78); margin-bottom: auto; }
.embed-previews { flex: 1; display: flex; gap: 8px; min-width: 0; }
.preview-tile {
  display: block; flex: 1; height: 100%;
  border-radius: 6px; overflow: hidden;
  background: var(--chapter-accent, #FF5A1F);
  background: linear-gradient(150deg, color-mix(in srgb, var(--chapter-accent, #FF5A1F) 75%, #fff) 0%, var(--chapter-accent, #FF5A1F) 45%, color-mix(in srgb, var(--chapter-accent, #FF5A1F) 40%, #0E0F13) 100%);
  transition: transform 0.6s var(--ease), filter 0.6s var(--ease);
}
.preview-tile img { width: 100%; height: 100%; object-fit: cover; }
.preview-tile:nth-child(2) { filter: saturate(0.75) brightness(0.92); }
.preview-tile:nth-child(3) { filter: saturate(0.5) brightness(0.8); }
.preview-tile.has-img { filter: none; }
.chapter-embed:hover .preview-tile { transform: scale(1.02); }

/* ================= 3. WORKS CAROUSEL ================= */
.works { padding-top: var(--band); padding-bottom: var(--band); }
.works-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); flex-wrap: wrap; }
.works-track {
  display: flex; gap: clamp(1rem, 2vw, 2rem);
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  padding: 0 var(--pad); cursor: grab;
}
.works-track::-webkit-scrollbar { display: none; }
.works-track.is-dragging { cursor: grabbing; }
.works-track.is-dragging a { pointer-events: none; }
.work-card { flex: 0 0 auto; width: min(380px, 72vw); }
.work-card-img {
  aspect-ratio: 0.76; overflow: hidden; border-radius: var(--radius);
  background: var(--surface); position: relative;
  clip-path: inset(0 0 100% 0);
}
.work-card-img.is-open { clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--ease); }
.no-js .work-card-img { clip-path: none; }
.work-card-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); transition: transform var(--slow) var(--ease); }
.work-card:hover .work-card-img img { transform: scale(1.09); }
.work-card h3 { font-size: clamp(1.25rem, 1.9vw, 1.7rem); line-height: 1.25; margin: 1.1rem 0 0.4rem; max-width: 24ch; }

/* ================= 4. AWARD BANNER (dark) ================= */
.award-banner {
  position: relative; overflow: hidden;
  padding: var(--band) var(--pad);
  text-align: center;
}
.award-title { font-size: var(--fs-big); line-height: 1.06; margin: 1.6rem 0; position: relative; z-index: 2; white-space: nowrap; }
.award-title .hline { display: block; }
.award-banner .kicker, .award-note { position: relative; z-index: 2; }
.award-note { margin: 0 auto; max-width: 44ch; font-size: var(--fs-lede); color: var(--ink-mute); }
.trail-img {
  position: absolute; top: 0; left: 0; z-index: 1;
  width: clamp(120px, 15vw, 240px); aspect-ratio: 0.8;
  object-fit: cover; border-radius: var(--radius);
  pointer-events: none; opacity: 0; will-change: transform, opacity;
}
.trail-img.trail-tint { background: linear-gradient(135deg, var(--trail-a, #FF5A1F), var(--trail-b, #2F5BFF)); }

/* ================= FOOTER — traditional, clear, clean (light) ================= */
.site-footer { border-top: 1px solid rgba(36, 39, 51, 0.1); }
.footer-body { padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: 1.6rem; }
.footer-cta {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1.6rem; flex-wrap: wrap;
  padding-bottom: clamp(2.5rem, 5vw, 4rem); margin-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
}
.footer-cta .kicker { margin-bottom: 0.9rem; }
.footer-statement { font-size: var(--fs-medium); line-height: 1.05; max-width: 16ch; }
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.footer-about p { color: var(--ink-mute); max-width: 34ch; font-size: 0.95rem; margin: 1.2rem 0 0; }
.footer-grid .kicker { margin-bottom: 1.1rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-grid li { color: var(--ink-mute); font-size: 0.95rem; }
.footer-grid a { color: var(--ink-mute); }
.footer-grid a:hover { color: var(--accent); }
.footer-base {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: 1.4rem;
}
.footer-base small { color: var(--ink-faint); font-size: 0.85rem; }
.footer-clock { color: var(--ink-mute); }
.site-footer .brand-logo { filter: invert(1) hue-rotate(180deg); height: 2.2rem; }
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-about { grid-column: 1 / -1; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: 1.8rem; } }

/* ================= INNER PAGES ================= */
.wrap { padding-left: var(--pad); padding-right: var(--pad); max-width: 1720px; margin: 0 auto; }
.band { padding-top: var(--band); padding-bottom: var(--band); }
.band + .band { border-top: 1px solid var(--line); }
.band-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); flex-wrap: wrap; }
.band-head .kicker { margin-bottom: 1.2rem; }

.cs-hero { min-height: 82svh; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 22vh; padding-bottom: clamp(2.5rem, 6vh, 5rem); }
.cs-hero .kicker { margin-bottom: 1.6rem; }
.cs-title { font-size: clamp(2.4rem, 8vw, 7.5rem); line-height: 1.02; max-width: 16ch; text-wrap: balance; }
.cs-meta { display: flex; justify-content: space-between; align-items: center; gap: 2rem; margin-top: 2.6rem; flex-wrap: wrap; }
.cs-services { font-size: var(--fs-kicker); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.cs-cover { border-radius: var(--radius); overflow: hidden; }
.cs-cover img, .cs-cover video { width: 100%; }
.split-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(2rem, 5vw, 5rem); }
.split-band .label { position: sticky; top: 7rem; align-self: start; }
@media (max-width: 900px) { .split-band { grid-template-columns: 1fr; } .split-band .label { position: static; } }
.cs-body { font-size: var(--fs-lede); color: var(--ink-mute); max-width: 60ch; }
.cs-body p:first-child::first-letter { color: var(--ink); }
.cs-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 2rem); }
.cs-gallery img { border-radius: var(--radius); width: 100%; }
.cs-gallery .full { grid-column: 1 / -1; }
@media (max-width: 767px) { .cs-gallery { grid-template-columns: 1fr; } }
.cs-impact { font-family: var(--f-display); font-size: var(--fs-medium); line-height: 1.1; max-width: 26ch; text-wrap: balance; }
.cs-stats { display: flex; gap: clamp(2rem, 6vw, 5rem); margin-top: 3rem; flex-wrap: wrap; }
.cs-stats div { font-size: 0.95rem; color: var(--ink-mute); }
.next-project { display: block; }
.next-project .kicker { margin-bottom: 1.4rem; }
.next-project .work-title { font-family: var(--f-display); font-size: var(--fs-medium); line-height: 1.05; transition: color var(--fast) var(--ease); }
.next-project:hover .work-title { color: var(--accent); }

.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
@media (max-width: 1100px) { .project-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .project-grid { grid-template-columns: 1fr; } }

.holding { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }

/* ================= WORK PAGE — grid first, filters ride the bars ================= */
.work-grid-section { padding-top: clamp(3.5rem, 8vw, 6rem); padding-bottom: var(--band); }
.work-grid-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem); flex-wrap: wrap;
}
.work-grid-head .kicker { margin-bottom: 0.8rem; }
.grid-count { font-family: var(--f-display); font-size: clamp(1.8rem, 3.6vw, 3.2rem); margin: 0; }
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.8rem, 3.5vw, 3.5rem) clamp(1rem, 2vw, 2rem); }
@media (max-width: 760px) { .work-grid { grid-template-columns: 1fr; } }
.grid-card { display: block; transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.grid-card.is-hidden { display: none; }
.grid-card-img {
  display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius);
  background: var(--surface); position: relative;
}
.grid-card-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); transition: transform var(--slow) var(--ease); }
.grid-card:hover .grid-card-img img { transform: scale(1.09); }
.grid-card-tint {
  position: absolute; inset: 0;
  background: linear-gradient(150deg, var(--card-accent, #FF4A09) 0%, color-mix(in srgb, var(--card-accent, #FF4A09) 45%, #0E0F13) 100%);
  transition: transform var(--slow) var(--ease);
}
.grid-card:hover .grid-card-tint { transform: scale(1.06); }
.grid-card h3 { font-size: clamp(1.2rem, 1.8vw, 1.6rem); line-height: 1.25; margin: 1rem 0 0.3rem; max-width: 26ch; }

/* filters band — light plate rows over the live gradient bars */
.work-filters {
  position: relative; overflow: hidden;
  padding: 18vh 0 clamp(4rem, 9vw, 7rem);
  background: #fff; color: #16181F;
}
.filters-gl { position: absolute; inset: 0; z-index: 0; }
.filters-gl .gradient-bars { position: absolute; inset: 0; display: flex; }
.filters-gl .film-grain { position: absolute; inset: 0; opacity: 0.3; }
.work-filters__head { position: relative; z-index: 1; margin-bottom: clamp(1.4rem, 3vh, 2.4rem); }
.work-filters__head .kicker { color: rgba(22, 24, 31, 0.8); }
.filter-row {
  display: block; width: 100%; position: relative; z-index: 1; text-align: left;
  background: none; border: 0; border-top: 1px solid rgba(22, 24, 31, 0.25);
  color: #16181F; cursor: pointer; padding: 0; font-family: inherit;
  overflow: hidden;
}
.filter-row:last-of-type { border-bottom: 1px solid rgba(22, 24, 31, 0.25); }
/* plate: scaleY reveal from the bottom */
.filter-bg {
  position: absolute; inset: 0; background: rgba(240, 241, 245, 0.85);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.45s var(--ease);
}
.filter-row:hover .filter-bg, .filter-row[aria-pressed="true"] .filter-bg { transform: scaleY(1); }
.filter-inner {
  position: relative; display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
  align-items: baseline; gap: 1.2rem;
  padding-top: clamp(1.1rem, 2.2vw, 1.8rem); padding-bottom: clamp(1.1rem, 2.2vw, 1.8rem);
}
.filter-idx, .filter-count { color: rgba(22, 24, 31, 0.8); }
.filter-title {
  display: block; font-family: var(--f-display);
  font-size: clamp(1.5rem, 3.6vw, 3rem); line-height: 1.05;
  color: #16181F;
  transition: transform 0.5s var(--ease), color var(--fast) var(--ease);
}
.filter-row:hover .filter-title { transform: translateX(10px); }
.filter-row[aria-pressed="true"] .filter-title { color: var(--accent-deep); }
.filter-note {
  display: block; margin-top: 0.5rem; max-width: 52ch;
  color: rgba(22, 24, 31, 0.78); font-size: 0.88rem; font-weight: 400;
}
.filter-count { white-space: nowrap; }
.filter-reset { position: relative; z-index: 1; background: none; border: 0; color: var(--accent-deep); cursor: pointer; padding-top: 1.2rem; padding-bottom: 0; font-family: inherit; }
@media (max-width: 767px) {
  .filter-inner { grid-template-columns: 1fr; gap: 0.4rem; }
  .filter-idx { display: none; }
}

/* ================= INFO PAGE ================= */
.info-page { padding-top: 20vh; padding-bottom: clamp(3rem, 7vw, 6rem); }
.info-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 900px) { .info-grid { grid-template-columns: 1fr; } }
.info-photo { position: sticky; top: 7rem; border-radius: var(--radius); overflow: hidden; max-width: 480px; }
@media (max-width: 900px) { .info-photo { position: static; max-width: 380px; } }
.info-photo img { width: 100%; display: block; }
.info-title { font-size: clamp(3.5rem, 9vw, 8rem); line-height: 1; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.info-intro p { font-size: var(--fs-lede); color: var(--ink-mute); max-width: 54ch; margin-bottom: 1.4em; }
.info-intro p:first-child { color: var(--ink); font-size: clamp(1.2rem, 2vw, 1.6rem); }

.info-rows { list-style: none; margin: 0; padding: 0; }
.info-rows li { border-top: 1px solid var(--line); }
.info-rows li:last-child { border-bottom: 1px solid var(--line); }
.info-row {
  display: grid; grid-template-columns: 8rem minmax(0, 1fr) auto;
  align-items: baseline; gap: 1.5rem; width: 100%;
  padding: clamp(1.3rem, 2.4vw, 2rem) 0;
  background: none; border: 0; color: var(--ink); cursor: pointer;
  text-align: left; font-family: inherit;
}
.info-row.is-static { cursor: default; }
.info-value {
  font-family: var(--f-display); font-size: clamp(1.3rem, 2.6vw, 2.2rem);
  line-height: 1.15; transition: transform 0.5s var(--ease), color var(--fast) var(--ease);
}
a.info-row:hover .info-value, button.info-row:hover .info-value { color: var(--accent); transform: translateX(10px); }
.action-hint { white-space: nowrap; }
@media (max-width: 640px) {
  .info-row { grid-template-columns: 1fr; gap: 0.35rem; }
  .action-hint { display: none; }
}

.scroll-hint { letter-spacing: 0.22em; }

.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pillar { background: var(--bg); padding: clamp(1.8rem, 3vw, 2.8rem); transition: background var(--fast) var(--ease); }
.pillar:hover { background: var(--surface); }
.pillar h3 { font-size: 1.4rem; margin-bottom: 0.8rem; }
.pillar p { color: var(--ink-mute); font-size: 0.95rem; margin: 0; }
.pillar .kicker { margin-bottom: 1.4rem; color: var(--accent); }

.statement-block .lede { margin-top: 2rem; }
.statement-block .btn { margin-top: 2.5rem; }

.contact-hero { min-height: 56svh; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 22vh; padding-bottom: 4rem; }
.contact-channels { display: flex; flex-direction: column; gap: 0.5rem; }
.contact-channels .kicker { margin-bottom: 0.4rem; }
.contact-channels a { font-family: var(--f-display); font-size: clamp(1.1rem, 1.8vw, 1.5rem); line-height: 1.3; width: fit-content; }
.contact-place { font-family: var(--f-display); font-size: clamp(1.1rem, 1.8vw, 1.5rem); line-height: 1.5; margin: 0; }
.contact-links { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 2.5rem; }
.contact-links a { font-family: var(--f-display); font-size: var(--fs-h3); width: fit-content; }
.contact-form-area { max-width: 760px; }
.contact-form-area input, .contact-form-area textarea, .wpcf7 input, .wpcf7 textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line);
  color: var(--ink); font-family: var(--f-body); font-size: var(--fs-lede);
  padding: 1.1em 0; outline: none; transition: border-color var(--fast) var(--ease);
}
.contact-form-area input:focus, .contact-form-area textarea:focus, .wpcf7 input:focus, .wpcf7 textarea:focus { border-color: var(--accent); }
.contact-form-area ::placeholder, .wpcf7 ::placeholder { color: var(--ink-faint); }
.contact-form-area [type="submit"], .wpcf7 [type="submit"] {
  width: auto; border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  font-size: var(--fs-kicker); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.95em 1.9em; margin-top: 2rem; background: transparent; color: var(--ink);
}
.contact-form-area [type="submit"]:hover, .wpcf7 [type="submit"]:hover { border-color: var(--accent); color: var(--accent); }

.journal-item { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; border-top: 1px solid var(--line); padding: clamp(1.5rem, 3vw, 2.5rem) 0; }
.journal-item:last-child { border-bottom: 1px solid var(--line); }
.journal-thumb { aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius); background: var(--surface); }
.journal-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--slow) var(--ease); }
.journal-item:hover .journal-thumb img { transform: scale(1.06); }
.journal-item h3 { font-size: var(--fs-h3); margin-bottom: 0.6rem; }
@media (max-width: 767px) { .journal-item { grid-template-columns: 1fr; } }

.panel { position: relative; display: block; overflow: hidden; border-radius: var(--radius); }
.panel-media { aspect-ratio: 0.76; overflow: hidden; background: var(--surface); }
.panel-media img, .panel-media video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); transition: transform var(--slow) var(--ease); }
.panel:hover .panel-media img { transform: scale(1.09); }
.panel-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1.2rem, 2.6vw, 2.2rem); background: linear-gradient(to top, rgba(0,0,0,0.72), transparent); }
.panel-caption .kicker { color: rgba(255,255,255,0.65); }
.panel-caption h3 { font-size: var(--fs-h3); line-height: 1.15; color: #fff; margin: 0.4rem 0; }
.panel-caption .client { font-size: var(--fs-kicker); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; }

/* ================= MOTION STATES ================= */
.lw { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
[data-lines] .hline, .lw .li { display: block; will-change: transform; }
[data-lines-auto] { visibility: hidden; }
.no-js [data-lines-auto] { visibility: visible; }

[data-rise], .reveal { opacity: 0; transform: translateY(30px); }
.no-js [data-rise], .no-js .reveal, [data-rise].is-in, .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

[data-focus] { visibility: hidden; }
.no-js [data-focus] { visibility: visible; }
[data-focus] .w { display: inline-block; will-change: transform, filter, opacity; }

/* ---- easter eggs ---- */
body.party .cursor-orb { animation: orb-hue 1.6s linear infinite; }
@keyframes orb-hue { to { filter: hue-rotate(360deg); } }
body.party ::selection { background: #6E5BFF; color: #fff; }
.rc-toast {
  position: fixed; bottom: 2rem; left: 50%; transform: translate(-50%, 20px);
  z-index: 9999; background: var(--char); color: #fff;
  padding: 0.9em 1.6em; border-radius: 999px;
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.rc-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; }
.cursor-orb {
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9998;
  width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--accent); mix-blend-mode: difference;
  transition: width var(--fast) var(--ease), height var(--fast) var(--ease), margin var(--fast) var(--ease), background var(--fast) var(--ease);
}
.cursor-orb.is-hover { width: 56px; height: 56px; margin: -28px 0 0 -28px; background: #fff; }

/* ================= MOBILE PERFECTION ================= */
@media (max-width: 860px) {
  :root { --band: clamp(4rem, 16vw, 6rem); }
  .hero-title { white-space: normal; }
  body { font-size: 16px; }
  .hero-banner { padding-top: 20vh; }
  .hero-title { font-size: clamp(2.7rem, 13.5vw, 5rem); line-height: 1.08; }
  .pill { height: 0.82em; }
  .hero-sub { font-size: 1rem; max-width: 32ch; }
  .chapter-heading { min-height: 88svh; padding: 14vh var(--pad) 16vh; gap: 1.2rem; }
  .chapter-title { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .chapter-stage { min-height: 104svh; padding-top: 14vh; }
  .chapter-heading, .stage-heading { gap: 1.2rem; }
  .chapter-title { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .chapter-embed { flex-direction: column; height: auto; }
  .embed-panel { flex: none; padding: 1.2rem; }
  .embed-panel h3 { margin: 0.8rem 0 0.6rem; }
  .embed-previews { width: 100%; height: 110px; }
  .stage-mark { font-size: 42vw; right: 2vw; bottom: -8vw; }
  .award-title { font-size: clamp(2.3rem, 11vw, 4rem); white-space: normal; }
  .award-note { font-size: 1rem; max-width: 34ch; }
  .footer-cta { flex-direction: column; align-items: flex-start; }
  .cs-hero { min-height: 62svh; padding-top: 18vh; }
  .works-head { margin-bottom: 1.8rem; }
}
@media (max-width: 480px) {
  .hero-actions .btn { width: 100%; justify-content: center; }
  .embed-info h3 { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  [data-rise], .reveal { opacity: 1; transform: none; }
  [data-focus], [data-lines-auto] { visibility: visible; }
  .work-card-img { clip-path: none; }
  .chapter-heading { position: static; min-height: 0; }
}


/* ================= CASE STUDY ================= */
.cs-h { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.cs-h-media { position: absolute; inset: 0; }
.cs-h-media img, .cs-h-media video { position: absolute; inset: 0; width: 100%; height: 118%; object-fit: cover; will-change: transform; }
.cs-h-tint {
  position: absolute; inset: 0;
  background:
    radial-gradient(90% 110% at 82% 0%, var(--flame) 0%, transparent 55%),
    linear-gradient(160deg, #191B22 0%, #0E0F13 100%);
}
.cs-h-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 11, 14, 0.78) 0%, rgba(10, 11, 14, 0.2) 55%, rgba(10, 11, 14, 0.35) 100%); }
.cs-h-content { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(2rem, 6vh, 4.5rem); color: #F0F1F5; }
.cs-h-content .kicker { color: rgba(240, 241, 245, 0.85); margin-bottom: 1.2rem; }
.cs-h-title { font-size: clamp(2.6rem, 8vw, 7.5rem); line-height: 1.02; max-width: 18ch; color: #F0F1F5; text-wrap: balance; }
.cs-h-meta { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-top: 2rem; flex-wrap: wrap; }
.cs-tags { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.cs-tag { font-size: var(--fs-kicker); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(240, 241, 245, 0.85); }
.cs-h-aside { display: flex; align-items: baseline; gap: 1.6rem; }
.cs-h-aside .kicker { color: rgba(240, 241, 245, 0.85); margin: 0; }
.cs-h-aside .arrow-link { color: #fff; }

.cs-dynamic { padding-top: clamp(3rem, 7vw, 6rem); }
.text-section { padding-top: clamp(3rem, 7vw, 6rem); padding-bottom: clamp(3rem, 7vw, 6rem); }
.text-section-top { margin-bottom: clamp(1.6rem, 3.5vw, 3rem); }
.text-section-top .kicker { margin-bottom: 1.2rem; }
.text-section-title { font-size: var(--fs-medium); line-height: 1.08; max-width: 24ch; text-wrap: balance; }
.text-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); max-width: 1200px; }
.text-col { color: var(--ink-mute); font-size: 1rem; line-height: 1.7; max-width: 56ch; }
.text-col p:first-child::first-letter { color: var(--ink); }
.cs-stats-row { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.cs-stat { font-family: var(--f-display); font-size: clamp(1.3rem, 2.4vw, 2rem); color: var(--ink); line-height: 1.3; }

.media-row { display: grid; grid-template-columns: 1fr; gap: clamp(0.8rem, 1.6vw, 1.6rem); padding: clamp(0.8rem, 1.6vw, 1.6rem) var(--pad); }
.media-row.has-2 { grid-template-columns: 1fr 1fr; }
.media-row.full { padding-left: 0; padding-right: 0; }
.media-item { margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--surface); clip-path: inset(0 0 100% 0); }
.media-row.full .media-item { border-radius: 0; }
.media-item.is-open { clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--ease); }
.no-js .media-item { clip-path: none; }
.media-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 700px) { .media-row.has-2 { grid-template-columns: 1fr; } }

.next-stage { min-height: 85svh; }
.next-stage .stage-heading { margin-top: auto; }

/* WP niceties */
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.alignwide, .alignfull { max-width: none; }