/* ————— palettes: ported from MEDIA_PACK v3 templates.json ————— */

[data-palette="studio-black"] { --bg:#111210; --ink:#f7f4ec; --accent:#ff5a3c; --surface:#2a2b28; }
[data-palette="paper-red"]    { --bg:#f7f4ec; --ink:#191816; --accent:#b93230; --surface:#e5dfd2; }
[data-palette="cobalt-lemon"] { --bg:#153fbd; --ink:#fffdf2; --accent:#ffd33f; --surface:#0d2f92; }
[data-palette="forest-rose"]  { --bg:#17372d; --ink:#f7eedc; --accent:#f08b7d; --surface:#2c5145; }
[data-palette="gallery-blue"] { --bg:#fafaf7; --ink:#111827; --accent:#2456d9; --surface:#e5e8e7; }
[data-palette="plum-mist"]    { --bg:#3c1936; --ink:#fff4f5; --accent:#f0a3b7; --surface:#5c2a52; }
[data-palette="signal-acid"]  { --bg:#111315; --ink:#f9faf8; --accent:#c9ff43; --surface:#2a2d2d; }
[data-palette="sky-ink"]      { --bg:#dce9f2; --ink:#14202b; --accent:#e44f3c; --surface:#c3d7e5; }
[data-palette="wine-blush"]   { --bg:#521927; --ink:#fff6e9; --accent:#f3b8c5; --surface:#6f2637; }
[data-palette="parchment"]    { --bg:#f3ecdd; --ink:#2e2618; --accent:#9c6b1f; --surface:#e6dcc6; }
[data-palette="darkroom"]     { --bg:#0c0c0c; --ink:#eeeeea; --accent:#ff4d00; --surface:#1c1c1b; }
[data-palette="newsprint"]    { --bg:#f2efe7; --ink:#171614; --accent:#1f4fd8; --surface:#e3ded2; }
/* the extended set — swatch-only in the UI, ids exist for persistence */
[data-palette="espresso"]     { --bg:#1a120b; --ink:#f3e9dc; --accent:#d97b29; --surface:#2e2015; }
[data-palette="ink-teal"]     { --bg:#0b1d1f; --ink:#e6f4f1; --accent:#2ec4b6; --surface:#143133; }
[data-palette="midnight-rose"]{ --bg:#171226; --ink:#f0eaf7; --accent:#ff6f91; --surface:#251d3d; }
[data-palette="bottle"]       { --bg:#0f2417; --ink:#eef5e9; --accent:#ffd166; --surface:#1c3a26; }
[data-palette="graphite-red"] { --bg:#1b1b1d; --ink:#ececec; --accent:#e63946; --surface:#2a2a2d; }
[data-palette="plum-lime"]    { --bg:#2a1030; --ink:#f5eafa; --accent:#c5e063; --surface:#3d1a46; }
[data-palette="navy-coral"]   { --bg:#10192e; --ink:#edf1fa; --accent:#ff7f6e; --surface:#1c2a4a; }
[data-palette="charcoal-sky"] { --bg:#202226; --ink:#e8ecef; --accent:#7fb7ff; --surface:#2e3138; }
[data-palette="oxide"]        { --bg:#241412; --ink:#f4e8e2; --accent:#c96f4a; --surface:#382019; }
[data-palette="moss-gold"]    { --bg:#1d2415; --ink:#f0f0e0; --accent:#d4a017; --surface:#2c3721; }
[data-palette="bone-teal"]    { --bg:#f4f1ea; --ink:#16211f; --accent:#0f766e; --surface:#e4ded1; }
[data-palette="shell-coral"]  { --bg:#faf3ee; --ink:#27201c; --accent:#e2604c; --surface:#f0e2d8; }
[data-palette="mist-navy"]    { --bg:#eef1f4; --ink:#131c2b; --accent:#29457a; --surface:#dde3ea; }
[data-palette="sage-plum"]    { --bg:#eff2e9; --ink:#232919; --accent:#7a3b69; --surface:#e0e5d5; }
[data-palette="sand-ink"]     { --bg:#efe7d7; --ink:#201a10; --accent:#b3541e; --surface:#e2d5bd; }
[data-palette="cloud-red"]    { --bg:#f7f7f7; --ink:#191919; --accent:#d62828; --surface:#e9e9e9; }
[data-palette="linen-forest"] { --bg:#f5efe6; --ink:#1e2a20; --accent:#2d6a4f; --surface:#e8dfd0; }
[data-palette="powder-rust"]  { --bg:#e9eef2; --ink:#24211e; --accent:#b5533c; --surface:#d8e0e6; }
[data-palette="cream-violet"] { --bg:#f8f4ec; --ink:#241f2e; --accent:#6d4bd8; --surface:#ece4d6; }
[data-palette="paper-cobalt"] { --bg:#f2f2ed; --ink:#10151a; --accent:#0466c8; --surface:#e2e2d8; }

/* derived tokens — themeable hairlines and secondary text without extra vars */
[data-palette] {
  --muted: color-mix(in srgb, var(--ink) 58%, var(--bg));
  --line: color-mix(in srgb, var(--ink) 26%, var(--bg));
  --font-serif: 'Instrument Serif', serif;
  --font-sans: 'Libre Franklin', sans-serif;
  --font-mono: 'DM Mono', monospace;
  --font-body: 'Inter', sans-serif;
  --font-black: 'Archivo Black', sans-serif;
}

/* ————— character axes: image tone × type voice × edges ————— */
/* every template inherits these — a template's own art direction (e.g. Dossier's
   grayscale) loads later and wins where it insists */

[data-voice="fraunces"]  { --font-serif: 'Fraunces', serif; }
[data-voice="cormorant"] { --font-serif: 'Cormorant Garamond', serif; --font-mono: 'Space Mono', monospace; }

[data-fx="mono"] .pg img  { filter: grayscale(1) contrast(1.06); }
[data-fx="warm"] .pg img  { filter: sepia(.26) contrast(1.04) saturate(1.12); }
[data-fx="vivid"] .pg img { filter: saturate(1.28) contrast(1.08); }

[data-edges="soft"] .pg img, [data-edges="soft"] .pg .yt iframe { border-radius: 12px; }

/* ————— shared scroll-reveal: sections rise in as they enter ————— */
.stage.animate .pg > * {
  opacity: 0; transform: translateY(16px);
  transition: opacity .65s cubic-bezier(.2, .7, .2, 1), transform .65s cubic-bezier(.2, .7, .2, 1);
}
.stage.animate .pg > .in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .stage.animate .pg > * { opacity: 1; transform: none; transition: none; }
}

/* ————— the stage every template renders into ————— */

.stage {
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  container-type: inline-size;
  container-name: page;
  font-family: var(--font-body);
}

.pg { min-height: 100%; }
.pg img { max-width: 100%; display: block; }
.pg a { color: inherit; text-decoration: none; }
.pg figure, .pg blockquote, .pg dl, .pg dd { margin: 0; }
.pg h1, .pg h2, .pg h3, .pg p { margin: 0; }

.pg .yt { aspect-ratio: 16/9; }
.pg .yt iframe { width: 100%; height: 100%; border: 0; }

.pg .soc {
  font: 500 10px/1 var(--font-mono);
  letter-spacing: .08em; text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 4px;
}
.pg .soc:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* shared track list — token-driven so it sits well in any template */
.pg .tracks { border-top: 1px solid var(--line); }
.pg .track-row {
  display: grid; grid-template-columns: 34px minmax(0, 1.3fr) minmax(0, 1fr) auto;
  gap: 14px; align-items: center; min-height: 54px;
  border-bottom: 1px solid var(--line);
}
.pg .tr-num { font: 400 9px var(--font-mono); letter-spacing: .1em; color: var(--muted); }
.pg .track-row strong { font-weight: 600; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg .tr-pub { font: 400 8px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg .tr-links { display: flex; gap: 5px; }
.pg .tr-links a {
  font: 500 8px var(--font-mono); letter-spacing: .06em;
  padding: 4px 7px; border: 1px solid var(--line); border-radius: 999px;
  transition: border-color .15s, color .15s;
}
.pg .tr-links a:hover { border-color: var(--accent); color: var(--accent); }
@container page (max-width: 560px) {
  .pg .track-row { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .pg .tr-pub { display: none; }
}

/* the seam — add sections from the page (edit mode only) */
.pg .seam { display: none; }
.stage.inline-editing .pg .seam {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: 1.6rem clamp(1.2rem, 5cqw, 3.4rem) 2rem;
  padding: .8rem 1rem;
  border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 10px;
}
.stage.inline-editing .pg .seam span {
  font: 500 9px var(--font-mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
}
.stage.inline-editing .pg .seam button {
  padding: .3rem .8rem; cursor: pointer;
  background: none; border: 1px solid var(--line); border-radius: 999px;
  font: 500 .74rem var(--font-body); color: var(--ink);
  transition: border-color .15s, color .15s;
}
.stage.inline-editing .pg .seam button:hover { border-color: var(--accent); color: var(--accent); }

/* edit aids: adders, section controls, photo tiles (edit mode only) */
.add-mini, .add-tile, .sec-ctl, .seam-restore { display: none; }
.stage.inline-editing .add-mini {
  display: block; cursor: pointer; list-style: none;
  padding: .25rem .6rem; margin-top: .3rem;
  border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 7px; width: max-content;
  font: 500 .72rem var(--font-body); color: var(--muted);
  transition: color .15s, border-color .15s;
}
.stage.inline-editing .add-mini:hover { color: var(--accent); border-color: var(--accent); }
.stage.inline-editing .add-mini::before { content: none; }
.stage.inline-editing .add-tile {
  display: grid; place-items: center; cursor: pointer;
  min-height: 72px; aspect-ratio: 1;
  background: none;
  border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 8px;
  font: 300 1.6rem var(--font-body); color: var(--muted);
  transition: color .15s, border-color .15s;
}
.stage.inline-editing .add-tile:hover { color: var(--accent); border-color: var(--accent); }
.stage.inline-editing .sec-ctl {
  position: absolute; top: .3rem; right: .3rem; z-index: 6;
  display: flex; gap: .2rem;
  opacity: 0; transition: opacity .15s ease;
}
.stage.inline-editing [data-sec] { position: relative; }
.stage.inline-editing .sec-wrap { position: relative; }
.stage.inline-editing .sec-wrap .sec-ctl { top: 50%; transform: translateY(-50%); }
.stage.inline-editing [data-sec]:hover .sec-ctl,
.stage.inline-editing .sec-wrap:hover .sec-ctl,
.stage.inline-editing .sec-ctl:hover { opacity: 1; }
.stage.inline-editing .sec-ctl button {
  width: 1.7rem; height: 1.7rem; cursor: pointer;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg) 82%, var(--ink));
  color: var(--bg); border: none; border-radius: 6px;
  font: 500 .8rem var(--font-body);
}
.stage.inline-editing .sec-ctl button:hover:not(:disabled) { background: var(--accent); }
.stage.inline-editing .sec-ctl button:disabled { opacity: .35; cursor: default; }
.stage.inline-editing .seam-restore {
  display: inline-block; cursor: pointer;
  padding: .3rem .8rem; margin-left: auto;
  background: none; border: 1px solid var(--line); border-radius: 999px;
  font: 500 .72rem var(--font-body); color: var(--muted);
}
.stage.inline-editing .seam-restore:hover { color: var(--accent); border-color: var(--accent); }
.stage.inline-editing .pg .seam .seam-sep {
  width: 1px; height: 1.1rem; background: var(--line); margin: 0 .2rem;
}
.pg .seam .seam-sep { display: none; }
.stage.inline-editing .pg .seam .seam-sep { display: block; }

/* image-section expander: closed grids keep only the first 12 */
.xsec-images:not(.open) .xsec-grid img.xtra { display: none; }
button.xsec-more {
  cursor: pointer; background: none; border: 1px solid var(--line);
  border-radius: 999px; padding: .35rem .9rem; margin-top: .6rem;
  font: 500 .74rem var(--font-body); color: var(--muted);
  transition: color .15s, border-color .15s;
}
button.xsec-more:hover { color: var(--accent); border-color: var(--accent); }

/* inline editing affordances — overlays only, never layout */
.stage.inline-editing [data-edit] {
  cursor: text;
  border-radius: 2px;
  transition: box-shadow .15s ease;
}
.stage.inline-editing [data-edit]:hover {
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent);
}
.stage.inline-editing [data-edit]:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* the pitch site's typing word — accent-lit with a blinking caret */
.pg .pt-word { color: var(--accent); font-style: italic; }
.pg .pt-word::after {
  content: ''; display: inline-block;
  width: .06em; height: .85em; margin-left: .05em;
  background: currentColor; vertical-align: baseline;
}
@media (prefers-reduced-motion: no-preference) {
  .pg .pt-word::after { animation: pt-blink 1s steps(1) infinite; }
  @keyframes pt-blink { 50% { opacity: 0; } }
}

/* ————— flex zone: user-created sections, house-styled by tokens ————— */
.pg .xsec-zone { padding: clamp(2.4rem, 7cqw, 4.4rem) clamp(1.2rem, 5cqw, 3.4rem); display: grid; gap: clamp(2rem, 5cqw, 3.2rem); }
.pg .xsec-h {
  font-family: var(--font-serif); font-size: clamp(2rem, 6.5cqw, 3.4rem); line-height: .95;
  padding-top: 1.2rem; border-top: 1px solid var(--line);
}
.pg .xsec-title {
  margin-bottom: 1rem;
  font: 500 9px var(--font-mono); letter-spacing: .24em; text-transform: uppercase;
  color: var(--accent);
}
.pg .xsec-text p { max-width: 62ch; font-size: .98rem; line-height: 1.75; }
.pg .xsec-list ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2.4rem; }
.pg .xsec-list li {
  display: flex; gap: .9em; align-items: baseline; break-inside: avoid;
  padding: .5rem 0; border-bottom: 1px solid var(--line);
  font-weight: 500; font-size: .92rem;
}
.pg .xsec-list li span { font: 400 8px var(--font-mono); color: var(--muted); letter-spacing: .1em; }
.pg .xsec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pg .xsec-grid img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.pg .xsec-more { margin-top: .9rem; font: 500 9px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
@container page (max-width: 620px) {
  .pg .xsec-list ul { columns: 1; }
  .pg .xsec-grid { grid-template-columns: repeat(2, 1fr); }
}

.pg .colophon {
  margin-top: 3.4rem;
  font: 400 8px/1 var(--font-mono);
  letter-spacing: .3em; text-transform: uppercase;
  opacity: .55;
}

/* mono micro-label used across all three systems */
.pg .f-kicker, .pg .d-kicker {
  font: 500 10px/1.5 var(--font-mono);
  letter-spacing: .1em; text-transform: uppercase;
}

/* ======================= FOLIO — paper catalogue ========================= */

.pg-folio { padding-bottom: 0; }

.pg-folio .f-head {
  min-height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 clamp(1rem, 3.4cqw, 2.1rem);
  border-bottom: 1px solid var(--line);
}
.pg-folio .f-head .logo { max-height: 38px; }
.pg-folio .f-wordmark { font: 400 clamp(1.2rem, 2.6cqw, 1.6rem)/1 var(--font-serif); }
.pg-folio .f-meta { color: var(--muted); font: 400 9px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }

.pg-folio .f-hero {
  display: grid; grid-template-columns: 1fr .62fr .3fr;
  gap: clamp(1.4rem, 3cqw, 2.2rem); align-items: stretch;
  padding: clamp(2.4rem, 6cqw, 3.6rem) clamp(1rem, 3.4cqw, 2.6rem) 2.4rem;
  border-bottom: 1px solid var(--line);
}
.pg-folio .f-intro { align-self: center; padding-left: 2cqw; }
.pg-folio .f-intro .f-kicker { max-width: 270px; margin-bottom: clamp(1.4rem, 3cqw, 2.1rem); color: var(--muted); }
.pg-folio h1 {
  margin-bottom: clamp(1.4rem, 3.4cqw, 2.1rem);
  font: 400 clamp(3.4rem, 12.5cqw, 8.6rem)/.72 var(--font-serif);
  letter-spacing: 0; text-wrap: balance;
}
.pg-folio h1 i { display: block; margin-left: 12%; color: var(--accent); }
.pg-folio .f-lede { max-width: 430px; margin-bottom: 1.8rem; font: 400 clamp(.95rem, 1.9cqw, 1.05rem)/1.6 var(--font-serif); }
.pg-folio .f-listen {
  display: inline-flex; align-items: center; gap: 13px;
  padding: 13px 0 10px; border-bottom: 1px solid var(--ink);
  font: 500 9px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
}
.pg-folio .f-listen span {
  width: 24px; height: 24px; display: grid; place-items: center;
  border: 1px solid; border-radius: 50%; font-size: 7px;
}
.pg-folio .f-listen:hover { color: var(--accent); }
.pg-folio .f-portrait { min-height: 420px; display: grid; grid-template-rows: minmax(0,1fr) auto; gap: 9px; }
.pg-folio .f-portrait img { height: 100%; min-height: 0; object-fit: cover; border: 1px solid var(--line); }
.pg-folio figcaption { color: var(--muted); font: 400 8px/1.5 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.pg-folio .f-note { align-self: end; display: grid; gap: 1.15rem; }
.pg-folio .f-stat { font: 400 9px/1.6 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pg-folio .f-stat span { display: block; color: var(--accent); font: 400 2.1rem/1.1 var(--font-serif); }

.pg-folio .f-works { padding: clamp(3.4rem, 9cqw, 6.4rem) clamp(1rem, 3.4cqw, 2.6rem); }
.pg-folio .f-works header {
  display: grid; grid-template-columns: .8fr 2fr; align-items: end;
  margin-bottom: clamp(1.8rem, 4cqw, 3rem);
}
.pg-folio .f-works header p { color: var(--muted); font: 400 8px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.pg-folio .f-works h2 { font: 400 clamp(3rem, 9.5cqw, 5.6rem)/.78 var(--font-serif); }
.pg-folio .f-list { border-top: 1px solid color-mix(in srgb, var(--ink) 45%, var(--bg)); }
.pg-folio .f-row {
  min-height: 76px; display: grid;
  grid-template-columns: 48px minmax(0, 1.3fr) auto; align-items: center; gap: 18px;
  padding: .5rem 8px; border-bottom: 1px solid var(--line);
  transition: background .2s ease, color .2s ease;
}
.pg-folio .f-row:hover { background: var(--accent); color: var(--bg); }
.pg-folio .f-num { color: var(--muted); font: 400 12px var(--font-serif); }
.pg-folio .f-row:hover .f-num, .pg-folio .f-row:hover .f-tag { color: inherit; }
.pg-folio .f-row strong { font: 400 clamp(1.3rem, 3cqw, 1.75rem)/1.05 var(--font-serif); }
.pg-folio .f-tag { color: var(--muted); font: 400 8px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.pg-folio .f-more { margin-top: 1.1rem; color: var(--muted); font: 400 9px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }

.pg-folio .f-feature {
  display: grid; grid-template-columns: 1.35fr .65fr;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.pg-folio .f-feature figure {
  min-height: 460px; display: grid; grid-template-rows: minmax(0,1fr) auto; gap: 8px;
  padding: 22px; border-right: 1px solid var(--line);
}
.pg-folio .f-feature figure img { height: 100%; object-fit: cover; }
.pg-folio .f-feature .f-blank { min-height: 0; padding: 0; }
.pg-folio .f-feature > div { align-self: center; padding: clamp(1.8rem, 5cqw, 3.6rem); }
.pg-folio .f-feature .f-kicker.accent { color: var(--accent); margin: 1.6rem 0 .9rem; }
.pg-folio .f-feature .f-kicker.accent:first-child { margin-top: 0; }
.pg-folio .f-feature dl { border-top: 1px solid var(--line); }
.pg-folio .f-feature dl div {
  display: grid; grid-template-columns: 44px 1fr; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
  font: 400 9px/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}
.pg-folio .f-feature dt { color: var(--muted); }
.pg-folio .f-inline { font: 400 10px/2 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }

.pg-folio .f-reel { max-width: 780px; margin: 0 auto; padding: clamp(2.4rem, 6cqw, 4rem) clamp(1rem, 3.4cqw, 2.6rem); }
.pg-folio .f-gallery {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  padding: clamp(2.4rem, 6cqw, 4rem) clamp(1rem, 3.4cqw, 2.6rem);
}
.pg-folio .f-gallery figure { display: grid; gap: 8px; }
.pg-folio .f-gallery img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border: 1px solid var(--line); }
.pg-folio .f-gallery .f-more { grid-column: 1 / -1; margin: 0; }

.pg-folio .f-contact {
  padding: clamp(3rem, 8cqw, 5.4rem) clamp(1.4rem, 8cqw, 5.6rem) 2.6rem;
  background: var(--ink); color: var(--bg);
}
.pg-folio .f-contact .f-kicker { margin-bottom: clamp(1.8rem, 5cqw, 3.4rem); opacity: .7; }
.pg-folio .f-contact h2 { font: 400 clamp(3rem, 11cqw, 6.8rem)/.8 var(--font-serif); }
.pg-folio .f-contact h2 i { color: var(--accent); }
.pg-folio .f-links {
  display: flex; flex-wrap: wrap; gap: 1.4rem;
  margin-top: clamp(2.6rem, 7cqw, 5rem); padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--bg) 60%, transparent);
}

@container page (max-width: 700px) {
  .pg-folio .f-hero { grid-template-columns: 1fr; }
  .pg-folio .f-intro { padding-left: 0; }
  .pg-folio .f-note { display: flex; gap: 2rem; }
  .pg-folio .f-portrait { min-height: 0; height: 62cqh; }
  .pg-folio .f-works header { grid-template-columns: 1fr; gap: 1rem; }
  .pg-folio .f-feature { grid-template-columns: 1fr; }
  .pg-folio .f-feature figure { border-right: 0; border-bottom: 1px solid var(--line); }
  .pg-folio .f-gallery { grid-template-columns: 1fr 1fr; }
  .pg-folio .f-row { grid-template-columns: 30px minmax(0,1fr); }
  .pg-folio .f-tag { display: none; }
}

/* ── Folio: xsec flex-zone — catalogue voice ───────────────────────── */
.pg-folio .xsec-zone { padding-left: clamp(1rem, 3.4cqw, 2.6rem); padding-right: clamp(1rem, 3.4cqw, 2.6rem); border-top: 1px solid var(--line); }
.pg-folio .xsec-h { font-size: clamp(2.2rem, 7cqw, 4rem); }
.pg-folio .xsec-title { color: var(--muted); }

/* ── Folio: motion & detail polish ─────────────────────────────────── */

.pg-folio ::selection { background: var(--accent); color: var(--bg); }

/* Portrait — clip scaled image inside the portrait column */
.pg-folio .f-portrait { overflow: hidden; }
.pg-folio .f-portrait img {
  transition: transform .9s cubic-bezier(.22, 1, .36, 1);
}
.pg-folio .f-portrait:hover img { transform: scale(1.03); }

/* Gallery figures — clip so scale doesn't bleed outside the cell */
.pg-folio .f-gallery figure { overflow: hidden; }
.pg-folio .f-gallery img {
  transition: transform .85s cubic-bezier(.22, 1, .36, 1);
}
.pg-folio .f-gallery figure:hover img { transform: scale(1.04); }

/* f-listen CTA — accent fills the circle on hover */
.pg-folio .f-listen { transition: color .2s ease, border-bottom-color .2s ease; }
.pg-folio .f-listen:hover { border-bottom-color: var(--accent); }
.pg-folio .f-listen span {
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.pg-folio .f-listen:hover span {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

@media (prefers-reduced-motion: no-preference) {
  /* Accent hairline draws left→right on the f-list border when works enters view */
  .pg-folio .f-list { position: relative; }
  .pg-folio .f-list::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.1s cubic-bezier(.22, 1, .36, 1) .2s;
  }
  .stage.animate .pg-folio .f-works.in .f-list::before { transform: scaleX(1); }

  /* Production rows cascade in from the left when the section enters */
  .stage.animate .pg-folio .f-works .f-row {
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity .45s ease, transform .45s ease;
  }
  .stage.animate .pg-folio .f-works.in .f-row         { opacity: 1; transform: none; }
  .stage.animate .pg-folio .f-works.in .f-row:nth-child(1)    { transition-delay: .08s; }
  .stage.animate .pg-folio .f-works.in .f-row:nth-child(2)    { transition-delay: .15s; }
  .stage.animate .pg-folio .f-works.in .f-row:nth-child(3)    { transition-delay: .22s; }
  .stage.animate .pg-folio .f-works.in .f-row:nth-child(4)    { transition-delay: .29s; }
  .stage.animate .pg-folio .f-works.in .f-row:nth-child(5)    { transition-delay: .36s; }
  .stage.animate .pg-folio .f-works.in .f-row:nth-child(6)    { transition-delay: .43s; }
  .stage.animate .pg-folio .f-works.in .f-row:nth-child(7)    { transition-delay: .50s; }
  .stage.animate .pg-folio .f-works.in .f-row:nth-child(n+8)  { transition-delay: .57s; }
}

/* ===================== DOSSIER — monochrome file ========================= */

.pg-doss { background: var(--bg); }

.pg-doss .d-hero {
  position: relative; min-height: clamp(480px, 96cqh, 720px); overflow: hidden;
  background: #101010; color: #f6f3ec;
}
.pg-doss .d-hero .d-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%;
  filter: grayscale(1) contrast(1.13) brightness(.72);
}
.pg-doss .d-hero::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.18); pointer-events: none; }
.pg-doss .d-hero .logo { position: absolute; z-index: 3; top: 24px; right: 26px; max-height: 42px; }
.pg-doss .d-copy { position: absolute; z-index: 2; inset: clamp(1.8rem, 6cqw, 3.2rem) clamp(1.2rem, 6cqw, 3.2rem) auto; }
.pg-doss .d-kicker { margin-bottom: clamp(1.2rem, 4cqw, 2.4rem); font-weight: 600; }
.pg-doss h1 {
  display: grid;
  font: 800 clamp(3rem, 12.5cqw, 7rem)/.78 var(--font-sans);
  text-transform: uppercase; letter-spacing: 0;
}
.pg-doss h1 .d-outline { margin-left: 12%; color: transparent; -webkit-text-stroke: 2px #fff; }
.pg-doss .d-vitals {
  position: absolute; z-index: 2; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(3, minmax(110px, 1fr));
  border-top: 1px solid rgba(255,255,255,.65); border-left: 1px solid rgba(255,255,255,.65);
  background: rgba(8,8,8,.72);
}
.pg-doss .d-vitals div { min-height: 72px; display: grid; align-content: center; gap: 7px; padding: 10px 18px; border-right: 1px solid rgba(255,255,255,.35); }
.pg-doss .d-vitals dt { color: #9f9e99; font: 400 8px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.pg-doss .d-vitals dd { font: 700 15px var(--font-sans); text-transform: uppercase; }

.pg-doss .d-credits { padding: clamp(3rem, 9cqw, 5.6rem) clamp(1.2rem, 4.6cqw, 3.4rem) clamp(3.4rem, 10cqw, 6.8rem); }
.pg-doss .d-credits header {
  display: grid; grid-template-columns: 1fr 2fr auto; align-items: end;
  margin-bottom: clamp(1.8rem, 5cqw, 3.4rem);
}
.pg-doss .d-credits header p { font: 500 9px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.pg-doss .d-credits h2 { font: 800 clamp(2.6rem, 8.8cqw, 4.6rem)/.8 var(--font-sans); text-transform: uppercase; }
.pg-doss .d-credits header span { color: var(--muted); font: 400 9px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.pg-doss .d-table { border-top: 3px solid var(--ink); }
.pg-doss .d-row {
  min-height: 66px; display: grid; grid-template-columns: 1.6fr 1fr 58px;
  align-items: center; gap: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 45%, var(--bg));
  font-size: 12px;
}
.pg-doss .d-row strong { font: 700 15px var(--font-sans); }
.pg-doss .d-row span { color: var(--muted); font: 400 9px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.pg-doss .d-row span:last-child { text-align: right; }
.pg-doss .d-head { min-height: 38px; }
.pg-doss .d-head span { color: var(--muted); font-size: 8px; }
.pg-doss .d-more { margin-top: 1.1rem; color: var(--muted); font: 400 9px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }

.pg-doss .d-reel { max-width: none; margin: 0; padding: 0 clamp(1.2rem, 4.6cqw, 3.4rem) clamp(3rem, 8cqw, 5rem); }

.pg-doss .d-gallery {
  padding: clamp(3rem, 9cqw, 6rem) clamp(1.2rem, 4.6cqw, 3.4rem) clamp(3.6rem, 11cqw, 7.4rem);
  background: #151515; color: #f3f0e9;
}
.pg-doss .d-frames { display: grid; grid-template-columns: 1.35fr .65fr; gap: 30px; }
.pg-doss .d-frames figure { position: relative; min-width: 0; }
.pg-doss .d-frames img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.pg-doss .d-wide { height: clamp(300px, 58cqh, 480px); }
.pg-doss .d-tall { height: clamp(240px, 44cqh, 380px); margin-top: clamp(60px, 16cqh, 150px); }
.pg-doss .d-frames figcaption { display: flex; justify-content: space-between; gap: 20px; margin-top: 10px; font: 400 8px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.pg-doss .d-frames figcaption span { color: #888984; }
.pg-doss .d-gallery blockquote { width: min(680px, 86%); margin: clamp(3rem, 9cqw, 5.6rem) auto 0; }
.pg-doss .d-gallery blockquote p { margin-bottom: 20px; font: 400 clamp(1.5rem, 4.4cqw, 2.4rem)/1.08 var(--font-serif); }
.pg-doss .d-gallery cite { color: var(--accent); font: 500 8px var(--font-mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; }

.pg-doss .d-extra {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem;
  padding: clamp(2.6rem, 7cqw, 4.4rem) clamp(1.2rem, 4.6cqw, 3.4rem);
}
.pg-doss .d-extra p { margin-bottom: 1rem; color: var(--accent); font: 600 9px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.pg-doss .d-extra ul { margin: 0; padding: 0; list-style: none; }
.pg-doss .d-extra li { padding: .45rem 0; border-bottom: 1px solid var(--line); font: 600 12px var(--font-sans); }

.pg-doss .d-contact { padding: clamp(3rem, 9cqw, 5.6rem) clamp(1.2rem, 4.6cqw, 3.4rem) 2.4rem; background: var(--accent); color: #111; }
.pg-doss .d-contact > p { margin-bottom: clamp(1.8rem, 6cqw, 2.8rem); font: 500 9px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.pg-doss .d-contact h2 { font: 800 clamp(3rem, 11.5cqw, 6rem)/.84 var(--font-sans); text-transform: uppercase; }
.pg-doss .d-contact > div {
  display: flex; align-items: end; justify-content: space-between; gap: 40px; flex-wrap: wrap;
  margin-top: clamp(2.6rem, 8cqw, 5rem); padding-top: 20px; border-top: 2px solid #111;
}
.pg-doss .d-contact address { font: 500 12px/1.7 var(--font-sans); font-style: normal; }
.pg-doss .d-contact nav { display: flex; flex-wrap: wrap; gap: 22px; }
.pg-doss .d-contact .soc { color: #111; }

@container page (max-width: 620px) {
  .pg-doss h1 .d-outline { margin-left: 6%; -webkit-text-stroke-width: 1px; }
  .pg-doss .d-vitals { left: 0; border-left: 0; }
  .pg-doss .d-vitals div { min-height: 60px; padding: 8px 10px; }
  .pg-doss .d-credits header { grid-template-columns: 1fr auto; gap: 12px; }
  .pg-doss .d-credits header p { grid-column: 1 / -1; }
  .pg-doss .d-row { grid-template-columns: 1fr auto; }
  .pg-doss .d-row span:nth-child(2) { display: none; }
  .pg-doss .d-frames { grid-template-columns: 1fr; }
  .pg-doss .d-tall { margin-top: 0; }
  .pg-doss .d-extra { grid-template-columns: 1fr; }
}

/* ── Dossier · filmic motion ─────────────────────────────────────────────── */

/* Accent selection tint */
.pg-doss ::selection { background: var(--accent); color: var(--bg); }

/* Film grain: whisper of texture over the hero photograph.
   ::before sits above the bg image and below the dark ::after overlay.
   z-index: 1 raises it above the auto-stacked .d-bg. */
.pg-doss .d-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .04;
  mix-blend-mode: overlay;
  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='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Ken Burns on the hero background image — one-shot, 22 s ease-out */
@keyframes doss-ken-burns {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
@media (prefers-reduced-motion: no-preference) {
  .pg-doss .d-bg { animation: doss-ken-burns 22s ease-out both; }
}

/* Credits stagger — rows cascade in when the section scroll-reveals.
   The section itself fades via the shared .pg > * rule; rows follow with delay. */
@media (prefers-reduced-motion: no-preference) {
  .stage.animate .pg-doss .d-credits .d-row {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .45s ease, transform .45s ease;
  }
  .stage.animate .pg-doss .d-credits.in .d-row { opacity: 1; transform: none; }
  .stage.animate .pg-doss .d-credits.in .d-row:nth-child(1)  { transition-delay: .04s; }
  .stage.animate .pg-doss .d-credits.in .d-row:nth-child(2)  { transition-delay: .09s; }
  .stage.animate .pg-doss .d-credits.in .d-row:nth-child(3)  { transition-delay: .14s; }
  .stage.animate .pg-doss .d-credits.in .d-row:nth-child(4)  { transition-delay: .19s; }
  .stage.animate .pg-doss .d-credits.in .d-row:nth-child(5)  { transition-delay: .24s; }
  .stage.animate .pg-doss .d-credits.in .d-row:nth-child(6)  { transition-delay: .29s; }
  .stage.animate .pg-doss .d-credits.in .d-row:nth-child(7)  { transition-delay: .34s; }
  .stage.animate .pg-doss .d-credits.in .d-row:nth-child(8)  { transition-delay: .39s; }
  .stage.animate .pg-doss .d-credits.in .d-row:nth-child(9)  { transition-delay: .44s; }
  .stage.animate .pg-doss .d-credits.in .d-row:nth-child(10) { transition-delay: .48s; }
  .stage.animate .pg-doss .d-credits.in .d-row:nth-child(11) { transition-delay: .52s; }
}

/* Gallery frames: brighten from the grade on hover */
.pg-doss .d-frames img { transition: filter .55s ease; }
.pg-doss .d-frames figure:hover img {
  filter: grayscale(.3) contrast(1.04) brightness(1.08);
}

/* Contact links: quiet accent underline draws in on hover.
   Overrides the shared .soc text-decoration: underline. */
.pg-doss .d-contact .soc {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: background-size .32s ease;
}
.pg-doss .d-contact .soc:hover { background-size: 100% 1px; }

/* ==================== PATCHBAY — live console ============================ */

.pg-patch { font-family: var(--font-mono); }

.pg-patch .p-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem clamp(1rem, 3cqw, 1.6rem);
}
.pg-patch .p-head .logo { max-height: 36px; }
.pg-patch .p-logo {
  padding: .2em .35em; background: var(--ink); color: var(--bg);
  font: 400 1.05rem/1 var(--font-black); text-transform: uppercase;
}
.pg-patch .p-head p { font: 500 8px/1.5 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

.pg-patch .p-hero { position: relative; height: clamp(440px, 92cqh, 680px); overflow: hidden; background: #111; color: #fff; }
.pg-patch .p-hero > img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  filter: saturate(1.15) contrast(1.08) brightness(.8);
}
.pg-patch .p-hero::after { content: ''; position: absolute; inset: 0; border: 12px solid var(--accent); pointer-events: none; }
.pg-patch .p-copy { position: absolute; z-index: 2; inset: auto 5% 8%; }
.pg-patch .p-copy > p { margin-bottom: 16px; color: var(--accent); font: 600 9px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.pg-patch h1 {
  display: grid;
  font: 400 clamp(2.8rem, 13cqw, 7.6rem)/.74 var(--font-black);
  text-transform: uppercase; letter-spacing: 0;
}
.pg-patch h1 .p-accent { margin-left: 15%; color: var(--accent); }
.pg-patch .p-play {
  position: absolute; z-index: 3; right: 12px; bottom: 12px;
  min-height: 50px; display: flex; align-items: center; gap: 14px; padding: 0 20px;
  background: var(--accent); color: var(--bg);
  font: 500 9px var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
}
.pg-patch .p-play > span { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid; border-radius: 50%; font-size: 8px; }

.pg-patch .p-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--ink); }
.pg-patch .p-stat { padding: 1.3rem clamp(1rem, 3cqw, 1.6rem); border-right: 1px solid var(--ink); }
.pg-patch .p-stat:last-child { border-right: 0; }
.pg-patch .p-stat b { display: block; font: 400 clamp(1.8rem, 6cqw, 3rem)/1 var(--font-black); color: var(--accent); -webkit-text-stroke: 1px color-mix(in srgb, var(--ink) 40%, transparent); }
.pg-patch .p-stat span { font: 500 8px var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

.pg-patch .p-console { padding: clamp(2.8rem, 8cqw, 5rem) clamp(1rem, 3cqw, 1.6rem) clamp(3.4rem, 10cqw, 6.6rem); }
.pg-patch .p-console header { display: grid; grid-template-columns: 1fr 2fr; align-items: end; margin-bottom: 2.4rem; }
.pg-patch .p-console header > p { font: 600 8px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.pg-patch .p-console h2, .pg-patch .p-bill h2, .pg-patch .p-contact h2 {
  font: 400 clamp(2.4rem, 9cqw, 4.8rem)/.8 var(--font-black); text-transform: uppercase;
}
.pg-patch .p-deck { display: grid; grid-template-columns: 1fr 1.1fr .86fr; border: 1px solid var(--ink); border-right: 0; }
.pg-patch .p-art { position: relative; min-height: 440px; overflow: hidden; border-right: 1px solid var(--ink); background: var(--accent); }
.pg-patch .p-art img { height: 100%; object-fit: cover; filter: saturate(.45) contrast(1.2); mix-blend-mode: multiply; }
.pg-patch .p-art span { position: absolute; left: 13px; top: 13px; padding: 7px 8px; background: var(--bg); color: var(--ink); font: 600 8px var(--font-mono); text-transform: uppercase; }
.pg-patch .p-art-alt { background: var(--surface); }
.pg-patch .p-queue { min-width: 0; border-right: 1px solid var(--ink); background: var(--surface); }
.pg-patch .p-queue > p {
  min-height: 44px; display: flex; align-items: center; padding: 0 16px;
  border-bottom: 1px solid var(--ink); color: var(--muted);
  font: 500 8px var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
}
.pg-patch .p-track {
  min-height: 72px; display: grid; grid-template-columns: 28px minmax(0,1fr) 27px;
  align-items: center; gap: 10px; padding: 0 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 45%, var(--surface));
  transition: background .15s ease, color .15s ease;
}
.pg-patch .p-track:hover { background: var(--accent); color: var(--bg); }
.pg-patch .p-track > span { font: 400 8px var(--font-mono); }
.pg-patch .p-track strong { overflow: hidden; font: 400 clamp(.85rem, 2.4cqw, 1.05rem)/1.15 var(--font-black); text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.pg-patch .p-track i { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid; border-radius: 50%; font-size: 7px; font-style: normal; }
.pg-patch .p-more { padding: 1rem 14px 1.2rem; color: var(--muted); font: 500 8px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }

.pg-patch .p-reel { padding: 0 clamp(1rem, 3cqw, 1.6rem) clamp(2.8rem, 8cqw, 5rem); }
.pg-patch .p-reel iframe { border: 1px solid var(--ink); }

.pg-patch .p-bill {
  display: grid; grid-template-columns: .55fr 1fr; gap: 22px;
  padding: clamp(2.8rem, 8cqw, 5.6rem) clamp(1rem, 3cqw, 1.6rem);
  background: var(--surface);
}
.pg-patch .p-bill-title p { margin-bottom: 22px; color: var(--accent); font: 600 8px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.pg-patch .p-bill h2 span { color: var(--accent); }
.pg-patch .p-tour { border-top: 1px solid color-mix(in srgb, var(--ink) 55%, var(--surface)); }
.pg-patch .p-tour > div {
  min-height: 78px; display: grid; grid-template-columns: 44px 1fr auto;
  align-items: center; column-gap: 16px; padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 55%, var(--surface));
}
.pg-patch .p-tour time { color: var(--accent); font: 500 9px var(--font-mono); }
.pg-patch .p-tour strong { font: 400 clamp(1rem, 2.8cqw, 1.35rem) var(--font-black); text-transform: uppercase; }
.pg-patch .p-tour span { color: var(--muted); font: 400 8px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }

.pg-patch .p-notes { padding: clamp(3rem, 9cqw, 6rem) 8%; }
.pg-patch .p-notes > p { margin-bottom: 2rem; color: var(--accent); font: 600 8px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.pg-patch .p-notes div { width: min(640px, 78%); margin-left: auto; }
.pg-patch .p-notes div p { font: 400 11px/1.9 var(--font-mono); }

.pg-patch .p-contact { padding: clamp(2.8rem, 8cqw, 5rem) 8% 2.2rem; background: var(--accent); color: var(--bg); }
.pg-patch .p-contact > div > p { margin-bottom: 20px; font: 600 8px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.pg-patch .p-contact nav {
  display: flex; flex-wrap: wrap; gap: 24px;
  margin-top: clamp(2.2rem, 7cqw, 4rem); padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--bg) 60%, transparent);
}
.pg-patch .p-contact .soc { color: inherit; }

@container page (max-width: 640px) {
  .pg-patch .p-hero::after { border-width: 7px; }
  .pg-patch h1 .p-accent { margin-left: 6%; }
  .pg-patch .p-stats { grid-template-columns: 1fr; }
  .pg-patch .p-stat { border-right: 0; border-bottom: 1px solid var(--ink); }
  .pg-patch .p-stat:last-child { border-bottom: 0; }
  .pg-patch .p-console header { grid-template-columns: 1fr; gap: 1.2rem; }
  .pg-patch .p-deck { grid-template-columns: 1fr; border-right: 1px solid var(--ink); }
  .pg-patch .p-art { min-height: 320px; border-right: 0; border-bottom: 1px solid var(--ink); }
  .pg-patch .p-art-alt { display: none; }
  .pg-patch .p-queue { border-right: 0; }
  .pg-patch .p-bill { grid-template-columns: 1fr; }
  .pg-patch .p-notes div { width: 100%; }
}

/* ——— PATCHBAY: motion polish ——————————————————————————————————————————— */

.pg-patch ::selection { background: var(--accent); color: var(--bg); }

/* Keyframes (defined at root, applied only under no-preference) */
@keyframes p-icon-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.18); }
}

@media (prefers-reduced-motion: no-preference) {

  /* 1 — hero accent frame: clip-path draws in once the section enters view */
  .stage.animate .pg-patch .p-hero::after {
    clip-path: inset(8px);
    opacity: 0;
    transition: clip-path .9s cubic-bezier(.2,.7,.2,1) .4s,
                opacity    .6s ease                     .4s;
  }
  .stage.animate .pg-patch .p-hero.in::after { clip-path: inset(0); opacity: 1; }

  /* 2 — stat numbers: tick-slide up when stats row enters view */
  .stage.animate .pg-patch .p-stats .p-stat b {
    opacity: 0;
    transform: translateY(60%);
    transition: opacity .45s ease, transform .5s cubic-bezier(.2,.7,.2,1);
  }
  .stage.animate .pg-patch .p-stats.in .p-stat b  { opacity: 1; transform: none; }
  .stage.animate .pg-patch .p-stats.in .p-stat:nth-child(1) b { transition-delay:   0ms; }
  .stage.animate .pg-patch .p-stats.in .p-stat:nth-child(2) b { transition-delay:  80ms; }
  .stage.animate .pg-patch .p-stats.in .p-stat:nth-child(3) b { transition-delay: 160ms; }

  /* 3 — track-queue rows cascade in when the console section enters view */
  .stage.animate .pg-patch .p-queue .p-track {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .28s ease, transform .28s cubic-bezier(.2,.7,.2,1);
  }
  .stage.animate .pg-patch .p-console.in .p-queue .p-track { opacity: 1; transform: none; }
  .stage.animate .pg-patch .p-console.in .p-track:nth-child(1) { transition-delay:  55ms; }
  .stage.animate .pg-patch .p-console.in .p-track:nth-child(2) { transition-delay: 110ms; }
  .stage.animate .pg-patch .p-console.in .p-track:nth-child(3) { transition-delay: 165ms; }
  .stage.animate .pg-patch .p-console.in .p-track:nth-child(4) { transition-delay: 220ms; }
  .stage.animate .pg-patch .p-console.in .p-track:nth-child(5) { transition-delay: 275ms; }
  .stage.animate .pg-patch .p-console.in .p-track:nth-child(6) { transition-delay: 330ms; }
  .stage.animate .pg-patch .p-console.in .p-track:nth-child(7) { transition-delay: 385ms; }
  .stage.animate .pg-patch .p-console.in .p-track:nth-child(8) { transition-delay: 440ms; }

  /* 4 — play-circle icon: gentle pulse on row hover */
  .pg-patch .p-track:hover i { animation: p-icon-pulse 1.4s ease-in-out infinite; }
}

/* ——— PATCHBAY: xsec flex zone override —————————————————————————————————— */
.pg-patch .xsec-zone { border-top: 1px solid var(--ink); padding-inline: clamp(1rem, 3cqw, 1.6rem); }
.pg-patch .xsec-h { font: 400 clamp(1.8rem, 5cqw, 2.8rem)/1.05 var(--font-black); text-transform: uppercase; border: none; padding: 0; }
.pg-patch .xsec-title { font: 600 8px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.pg-patch .xsec-list li { font: 400 clamp(.85rem, 2.4cqw, 1rem) var(--font-mono); }
.pg-patch .xsec-list li span { font-size: 7px; }