/* ============================================================
   vitchev-petrov.com — "The Gatefold"
   ------------------------------------------------------------
   TUNING — the handful of values worth adjusting by eye.
   Change a number, reload, judge. Nothing else needs touching.
   ============================================================ */
:root {
  --paper: #F5F4F1;          /* page stock (the plaster walls measure 244–250) */
  --glass-alpha: .50;        /* how strong the frosted "vellum" panels tint (0.4 lighter … 0.6 stronger) */
  --halo-alpha: .18;         /* soft paper wash behind the cover logo — desktop */
  --halo-alpha-phone: .30;   /* same wash on phones, where the sky behind it is darker */
  --lamp-alpha: .42;         /* billboard lamp glow strength */
  --ambient-alpha: .10;      /* blurred album artwork breathing through the panels; 0 turns it off */

  /* palette */
  --white: #FFFFFF;
  --ink: #14161B;
  --text: #2A2E36;
  --slate: #5B6170;
  --hair: #D8D3CA;
  --gold: #C9A24A;
  --cobalt: #2F5DA8;
  --cream: #F4F1EC;
  --lamp: #F2C98A;
  --screen: #060607;

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: Manrope, "Helvetica Neue", Arial, system-ui, sans-serif;
  --gutter: 5vw;
  --panel-w: clamp(440px, 40vw, 660px);
  --vh: 100vh;
}
@supports (height: 100svh) { :root { --vh: 100svh; } }

/* ---------- fonts (self-hosted) ---------- */
@font-face { font-family: "Cormorant Garamond"; font-weight: 300; font-style: normal; font-display: swap; src: url(/fonts/cormorant-garamond-latin-300-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 300; font-style: normal; font-display: swap; src: url(/fonts/cormorant-garamond-latin-ext-300-normal.woff2) format("woff2"); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 300; font-style: normal; font-display: swap; src: url(/fonts/cormorant-garamond-cyrillic-300-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 300; font-style: italic; font-display: swap; src: url(/fonts/cormorant-garamond-latin-300-italic.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 300; font-style: italic; font-display: swap; src: url(/fonts/cormorant-garamond-latin-ext-300-italic.woff2) format("woff2"); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 300; font-style: italic; font-display: swap; src: url(/fonts/cormorant-garamond-cyrillic-300-italic.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/cormorant-garamond-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/cormorant-garamond-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 400; font-style: italic; font-display: swap; src: url(/fonts/cormorant-garamond-latin-400-italic.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 400; font-style: italic; font-display: swap; src: url(/fonts/cormorant-garamond-latin-ext-400-italic.woff2) format("woff2"); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 400; font-style: italic; font-display: swap; src: url(/fonts/cormorant-garamond-cyrillic-400-italic.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: normal; font-display: swap; src: url(/fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: normal; font-display: swap; src: url(/fonts/cormorant-garamond-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: normal; font-display: swap; src: url(/fonts/cormorant-garamond-cyrillic-500-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: Manrope; font-weight: 200 800; font-style: normal; font-display: swap; src: url(/fonts/manrope-latin-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Manrope; font-weight: 200 800; font-style: normal; font-display: swap; src: url(/fonts/manrope-latin-ext-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: Manrope; font-weight: 200 800; font-style: normal; font-display: swap; src: url(/fonts/manrope-cyrillic-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; background: var(--paper); }
body {
  margin: 0; background: var(--paper); color: var(--text);
  font-family: var(--sans); font-weight: 400; font-size: clamp(15.5px, 1.05vw, 17.5px); line-height: 1.62;
  overflow-x: clip; -webkit-font-smoothing: antialiased;
}
img, picture { display: block; max-width: 100%; }
h1, h2, h3, p, figure, blockquote, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.cover :focus-visible, .back :focus-visible, body[data-ground="photo"] .folio :focus-visible { outline-color: var(--cream); }
.play:focus-visible { outline: none; }
.play:focus-visible .play__circle { outline: 2px solid var(--cream); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--gutter); top: -60px; z-index: 100; background: var(--ink); color: var(--cream); padding: 10px 14px; font: 500 11.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; }
.skip:focus { top: 12px; }

main > * { position: relative; z-index: 2; }

/* the reveal system: hidden only when JS runs (GSAP animates them in) */
.js .reveal { opacity: 0; }
.js.no-motion .reveal { opacity: 1; }
/* the cover's parts are hidden before the entrance runs, so a warm-cache load never flashes the photo first */
.js:not(.no-motion) .cover__stage, .js:not(.no-motion) .cover__logo, .js:not(.no-motion) .cover__type { opacity: 0; }
/* the cover's optional dissolve (data-sequence="dissolve" on #cover): the empty road is painted first; the golden road and the duo fade in over it */
.cover:not([data-sequence="dissolve"]) .cover__layer { display: none; }
.js:not(.no-motion) .cover[data-sequence="dissolve"] .cover__layer--gold, .js:not(.no-motion) .cover[data-sequence="dissolve"] .cover__img { opacity: 0; }

/* ---------- shared type ---------- */
.grid { width: min(100% - 2 * var(--gutter), 1440px); margin-inline: auto; }
.display { font-family: var(--serif); font-weight: 300; font-size: clamp(44px, 6vw, 92px); line-height: 1; letter-spacing: -.015em; color: var(--ink); }
.display--xl { font-size: clamp(52px, 7vw, 116px); line-height: .98; letter-spacing: -.02em; }
.caps, .label, .folio-row, .lead-in { text-transform: uppercase; }
.folio-row { display: flex; justify-content: space-between; gap: 24px; font: 500 11.5px/1 var(--sans); letter-spacing: .18em; color: var(--slate); padding-bottom: 14px; margin-bottom: 40px; background: linear-gradient(90deg, var(--gold) 6px, var(--hair) 6px) no-repeat 0 100% / 100% 1px; }
.folio-row > span:first-child { white-space: nowrap; flex-shrink: 0; }
.folio-row__right { text-align: right; }
.rule { height: 1px; background: linear-gradient(90deg, var(--gold) 6px, var(--hair) 6px); }
.rule--cream { background: linear-gradient(90deg, var(--gold) 6px, rgba(244,241,236,.5) 6px); width: 44px; }
.rule-inline { display: inline-block; width: 22px; height: 1px; vertical-align: middle; margin-right: 12px; background: linear-gradient(90deg, var(--gold) 6px, var(--hair) 6px); }
.label { font: 500 11.5px/1 var(--sans); letter-spacing: .18em; color: var(--slate); }
.lead-in { font-weight: 600; font-size: 13px; letter-spacing: .12em; color: var(--ink); }
em, .role { font-family: var(--serif); font-style: italic; font-weight: 400; }

/* ---------- fixed instruments ---------- */
.progress { position: fixed; top: 0; left: 0; width: 100%; height: 1px; background: var(--gold); transform-origin: 0 50%; transform: scaleX(0); z-index: 60; pointer-events: none; }
.loader { position: fixed; left: 0; top: calc(var(--vh) / 2); width: 100%; height: 1px; background: var(--gold); transform-origin: 50% 50%; transform: scaleX(0); z-index: 5; pointer-events: none; display: none; }
.js .loader { display: block; }

.folio { position: fixed; left: var(--gutter); bottom: 28px; z-index: 50; font: 500 11.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--slate); transition: color .3s; }
body[data-ground="photo"] .folio { color: rgba(244,241,236,.85); }
.folio__btn { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; margin-left: -12px; border-radius: 3px; color: inherit; background: rgba(245,244,241,.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
body[data-ground="white"] .folio__btn { background: rgba(255,255,255,.85); }
body[data-ground="photo"] .folio__btn { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.folio__cur { display: inline-block; min-width: 9em; text-align: left; transition: opacity .3s; }
.folio__cur.is-swapping { opacity: 0; }
.folio__tick { width: 6px; height: 1px; background: var(--gold); }
.folio__word { font-weight: 400; }
.folio__list { position: absolute; left: -16px; bottom: 100%; margin-bottom: 8px; padding: 12px 16px 14px; min-width: 300px; border-radius: 3px; background: rgba(245,244,241,.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 24px 60px -20px rgba(20,22,27,.28); color: var(--slate); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .24s, transform .24s, visibility 0s .24s; }
body[data-ground="photo"] .folio__list { background: rgba(20,22,27,.82); border-color: rgba(255,255,255,.12); color: rgba(244,241,236,.85); }
.folio.is-open .folio__list { opacity: 1; visibility: visible; transform: none; transition: opacity .24s, transform .24s; }
.folio__list a { display: flex; align-items: baseline; gap: 14px; height: 32px; color: inherit; text-decoration: none; opacity: .75; }
.folio__list a:hover { opacity: 1; }
.folio__list b { font-weight: 500; color: var(--slate); min-width: 2em; }
@media (hover: hover) and (min-width: 1024px) {
  .folio:hover .folio__list { opacity: 1; visibility: visible; transform: none; transition: opacity .24s, transform .24s; }
}

/* ============================================================
   01 · COVER
   ============================================================ */
.cover { position: sticky; top: 0; z-index: 0; height: var(--vh); min-height: 560px; overflow: hidden; background: var(--ink); }
.cover__stage { position: absolute; inset: 0; transform-origin: 75% 50%; }
.cover__img, .cover__img img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cover__img img { object-fit: cover; object-position: 75% 50%; }
.cover__layer, .cover__layer img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cover__layer img { object-fit: cover; }
.cover__layer--day img { object-position: 50% 50%; }
.cover__layer--gold img { object-position: 58% 50%; }
.cover__scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(to top, rgba(20,22,27,.45), transparent); }
.cover__ui { position: absolute; inset: 0; pointer-events: none; }
.cover__logo { position: absolute; left: var(--gutter); top: 8svh; top: 8vh; width: clamp(300px, 28vw, 560px); filter: drop-shadow(0 0 1px rgba(255,255,255,.35)) drop-shadow(0 2px 14px rgba(255,255,255,.22)); }
@supports (top: 8svh) { .cover__logo { top: 8svh; } }
.cover__logo { margin: 0; font-size: inherit; font-weight: inherit; line-height: 0; }
.cover__logo img { width: 100%; height: auto; position: relative; }
.cover__halo { position: absolute; inset: -20% -20%; background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(245,244,241,var(--halo-alpha)), transparent 70%); }
.cover__type { position: absolute; left: var(--gutter); bottom: max(9vh, 88px); max-width: min(64vw, 580px); color: var(--cream); }
@supports (bottom: 9svh) { .cover__type { bottom: max(9svh, 88px); } }
.cover__rule { margin-bottom: 18px; }
/* The names stand beside the quote, their two lines sharing a left edge, and the last of them
   sitting on the same line as the bottom of "personal" (last-baseline where the browser has it). */
.cover__pair { display: flex; align-items: flex-end; gap: clamp(20px, 2.4vw, 40px); }
@supports (align-items: last baseline) { .cover__pair { align-items: last baseline; } }
.cover__credits { display: block; flex: 0 0 auto; font: 500 12px/1.4 var(--sans); letter-spacing: .18em; color: rgba(244,241,236,.92); text-align: left; margin: 0; }
.cover__who { display: block; }
.cover__who + .cover__who { margin-top: 7px; }
.cover__who em { font-size: 17px; letter-spacing: 0; text-transform: none; margin-left: 6px; }
.cover__dot { display: none; }   /* the two names read as two lines under the quote, so the separator is gone */
.cover__line { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(28px, 2.4vw, 44px); line-height: 1.15; max-width: 7.4em; }

@media (max-height: 520px) and (orientation: landscape) {
  .cover__logo { width: clamp(200px, 28vw, 560px); max-width: 58vh; top: 6vh; }
  .cover__type { bottom: 64px; max-width: min(78vw, 620px); }
  .cover__line { font-size: 24px; }
  .cover__credits { margin-bottom: 8px; }
}

/* ============================================================
   02 · THE DUO
   ============================================================ */
.duo { background: var(--paper); padding: 12vh 0 14vh; box-shadow: 0 -30px 60px rgba(20,22,27,.22); }
.duo__display { white-space: nowrap; margin-bottom: -.55em; position: relative; z-index: 2; }
.duo__spread { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; align-items: end; }
.duo__plate { grid-column: 1 / span 8; aspect-ratio: 16 / 9; overflow: hidden; }
/* Only the top edge is washed into the paper, so the headline that overhangs the plate sits on paper, not on the
   photograph, and the crowns of their heads melt into the page rather than starting on a hard edge.
   A long, soft ramp: nothing at the very top, a fifth visible a sixth of the way down, fully opaque at 34% of the
   plate. Their hair begins at 29%, so it arrives already softened. Raise the last number to fade less, lower it to
   fade more. Sides and bottom stay clean. */
@media (min-width: 900px) {
  .duo__plate {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.05) 10%, rgba(0,0,0,.18) 18%, rgba(0,0,0,.45) 25%, rgba(0,0,0,.78) 30%, #000 34%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.05) 10%, rgba(0,0,0,.18) 18%, rgba(0,0,0,.45) 25%, rgba(0,0,0,.78) 30%, #000 34%);
  }
}
.duo__plate img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform: scale(1.04); }
.duo__col { grid-column: 9 / span 4; max-width: 40ch; padding-top: calc(clamp(44px, 6vw, 92px) * .7); }
.duo__col p + p { margin-top: 1.2em; }
.duo__quote { grid-column: 3 / span 8; margin: 72px auto 0; width: min(100%, 880px); }
.duo__quote .rule { margin-bottom: 28px; }
.duo__quote p { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(22px, 2vw, 32px); line-height: 1.38; color: var(--ink); }

/* ============================================================
   03 / 04 · SIDES
   ============================================================ */
.sides { position: relative; }
.side { position: relative; }
.side__photo img { width: 100%; height: 100%; object-fit: cover; }
.side--a .side__photo img { object-position: 22% 50%; }
.side--b .side__photo img { object-position: 78% 50%; }
.ambient { display: none; }

/* the vellum sheet */
.panel { position: relative; z-index: 3; display: flex; flex-direction: column; border-radius: 3px;
  background: linear-gradient(160deg, rgba(255,255,255,.58) 0%, rgba(232,226,216,var(--glass-alpha)) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(115%); backdrop-filter: blur(18px) saturate(115%);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 40px 90px -20px rgba(20,22,27,.18), 0 2px 6px rgba(20,22,27,.05); }
.panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,0) 35%, rgba(20,22,27,.07) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .panel { background: rgba(240,237,231,.94); } }
.folio-row--panel { margin-bottom: 0; align-items: baseline; }
.role { font-size: 17px; color: var(--ink); text-transform: none; letter-spacing: 0; }
.panel__name { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 3vw, 48px); line-height: 1.05; letter-spacing: -.01em; color: var(--ink); margin: 18px 0 22px; }
.panel__body { position: relative; }
.panel__scroll { position: relative; }
.bio { font-size: 15px; line-height: 1.58; color: var(--text); }
.bio + .bio { margin-top: 1em; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 22px 0 10px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.stat { padding: 16px 0; display: flex; flex-direction: column; gap: 6px; }
.stat + .stat { border-left: 1px solid var(--hair); padding-left: 16px; }
.stat__n { font-family: var(--serif); font-weight: 300; font-size: 34px; line-height: 1; color: var(--ink); }
.stat__c { font: 500 11px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--slate); }
.stats__source { font-size: 12.5px; line-height: 1.5; color: var(--slate); margin-bottom: 22px; }
.lead-quote { margin: 26px 0 8px; }
.lead-quote p { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 20px; line-height: 1.35; color: var(--ink); }
.lead-quote cite { display: block; margin-top: 10px; font: 500 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; font-style: normal; color: var(--slate); }
.lead-quote--note { margin-top: 22px; }
.lead-quote--note p { font-size: 19px; }
.roman { font-style: normal; }
.press { margin-top: 10px; }
.press__summary { list-style: none; cursor: default; font: 500 11.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--slate); padding: 14px 0 6px; }
.press__summary::-webkit-details-marker { display: none; }
.marginalia { padding: 14px 0; border-top: 1px solid var(--hair); }
.marginalia p { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 18px; line-height: 1.4; color: var(--text); }
.marginalia cite { display: block; margin-top: 8px; font: 500 10.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; font-style: normal; color: var(--slate); }

/* discography */
.disco { margin-top: 28px; }
.disco__head { display: flex; justify-content: space-between; gap: 16px; font: 500 11.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--slate); padding: 12px 0 12px; background: rgba(245,244,241,.92); border-bottom: 1px solid var(--hair); }
.disco__timeline, .disco__hint { display: none; }
.album a { display: grid; grid-template-columns: 72px 1fr auto; gap: 18px; align-items: center; padding: 14px 6px 14px 0; text-decoration: none; color: inherit; border-bottom: 1px solid rgba(216,211,202,.7); transition: background-color .22s; position: relative; }
.album a:hover { background: rgba(20,22,27,.035); }
.album picture { width: 72px; height: 72px; }
.album img { width: 72px; height: 72px; border: 1px solid rgba(20,22,27,.12); transition: box-shadow .22s; }
.album a:hover img { box-shadow: 0 8px 20px rgba(20,22,27,.16); }
.album__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.album__title { font: 500 15px/1.3 var(--sans); color: var(--ink); }
.album__sub { font: 400 12.5px/1.4 var(--sans); color: var(--slate); }
.album__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.album__year { font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
.album__listen { font: 500 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--slate); opacity: 0; transition: opacity .22s; white-space: nowrap; }
.album a:hover .album__listen { opacity: 1; }
.tag { display: inline-block; vertical-align: 2px; margin-left: 8px; padding: 2px 5px; border: 1px solid var(--gold); border-radius: 2px; font: 600 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.spine { display: none; }

/* ---- the pinned stage: only when JS runs it (desktop, mouse, motion allowed) — JS adds html.stage ---- */
.stage .sides { height: var(--vh); overflow: hidden; }
.stage .side { position: absolute; inset: 0; display: flex; align-items: center; }
.stage .side--a { justify-content: flex-end; padding-right: 6vw; }
.stage .side--b { justify-content: flex-start; padding-left: 6vw; }
.stage .side__photo { position: absolute; inset: 0; z-index: 1; }
.stage .side--b .side__photo { z-index: 2; --w: 108vw;
  -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--w) - 8vw), #000 var(--w)); mask-image: linear-gradient(90deg, transparent calc(var(--w) - 8vw), #000 var(--w)); }
.stage .side--b .panel { opacity: 0; visibility: hidden; }
.stage .ambient { display: block; position: absolute; top: 50%; width: 58vw; aspect-ratio: 1; z-index: 2; pointer-events: none; opacity: var(--ambient-alpha); transform: translateY(-50%); }
.stage .side--a .ambient { right: calc(6vw + var(--panel-w) / 2); transform: translate(50%, -50%); }
.stage .side--b .ambient { left: calc(6vw + var(--panel-w) / 2); transform: translate(-50%, -50%); }
.ambient img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s; }
.ambient img.is-on { opacity: 1; }
.stage .panel { width: var(--panel-w); height: min(80vh, 800px); height: min(80svh, 800px); }
.stage .panel__head { padding: 40px 44px 0; }
.stage .panel__body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(20,22,27,.28) transparent; padding: 0 32px 0 44px; }
.stage .panel__body::after { content: ""; position: sticky; bottom: 0; display: block; height: 40px; margin-top: -40px; background: linear-gradient(to bottom, transparent, rgba(240,237,231,.95)); pointer-events: none; }
.stage .panel__scroll { padding-bottom: 48px; }
.stage .disco__head { position: sticky; top: 0; z-index: 2; }
.stage .spine { display: block; position: absolute; left: -26px; top: 0; bottom: 0; width: 1px; background: var(--hair); }
.stage .spine i { position: absolute; left: 0; width: 8px; height: 1px; background: var(--slate); opacity: .5; transform: scaleX(0); transform-origin: 0 50%; transition: background-color .3s, opacity .3s; }
.stage .spine i.is-on { transform: scaleX(1); }
.stage .spine i.is-active { background: var(--gold); opacity: 1; width: 12px; }
.stage .press__summary { pointer-events: none; }
@media (max-height: 800px) { .stage .panel { height: min(84vh, 800px); height: min(84svh, 800px); } .stage .panel__head { padding: 32px 36px 0; } .stage .panel__body { padding: 0 24px 0 36px; } }

/* ---- stacked sides: phones, tablets, touch laptops, reduced motion, no JS ---- */
html:not(.stage) .side { padding-bottom: 56px; background: var(--paper); }
html:not(.stage) .side__photo { height: 62vh; height: 62svh; min-height: 380px; }
html:not(.stage) .side--a .side__photo img { object-position: 22% 0; }   /* anchored to the top: a short band crops legs, never heads */
html:not(.stage) .side--b .side__photo img { object-position: 78% 0; }
/* The card: only its top 72px (the part over the photograph) is frosted glass; the rest is plain paper,
   so phones are not blurring a 2000px-tall panel on every scroll frame. */
html:not(.stage) .panel { width: min(calc(100% - 32px), 760px); margin: -72px auto 0; padding: 84px 22px 24px; border-radius: 4px;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: linear-gradient(to bottom, transparent 72px, rgba(240,237,231,.94) 72px); }
html:not(.stage) .panel::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 72px; z-index: -1; border-radius: 4px 4px 0 0;
  background: linear-gradient(160deg, rgba(255,255,255,.58) 0%, rgba(232,226,216,var(--glass-alpha)) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(115%); backdrop-filter: blur(18px) saturate(115%); }
html:not(.stage) .panel__name { margin: 16px 0 18px; }
html:not(.stage) .bio { font-size: 15.5px; line-height: 1.55; }
html:not(.stage) .stat__n { font-size: 30px; }
html:not(.stage) .press__summary { cursor: pointer; }
html:not(.stage) .press__summary::after { content: "+"; float: right; font-size: 14px; }
html:not(.stage) .press[open] .press__summary::after { content: "–"; }
/* horizontal, swipeable discography */
html:not(.stage) .disco__head { position: static; }
html:not(.stage) .disco__timeline { display: block; position: relative; height: 26px; margin: 18px 0 6px; }
html:not(.stage) .disco__timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 20px; height: 1px; background: var(--hair); }
html:not(.stage) .disco__timeline i { position: absolute; top: 17px; width: 1px; height: 8px; background: var(--slate); opacity: .45; transition: background-color .12s, opacity .12s; }
html:not(.stage) .disco__timeline i.is-active { background: var(--gold); opacity: 1; height: 12px; top: 15px; }
html:not(.stage) .disco__timeline b { position: absolute; top: 0; transform: translateX(-50%); font: 500 10px/1 var(--sans); letter-spacing: .08em; color: var(--slate); }
html:not(.stage) .disco__strip { margin: 0 -22px;   /* the fade lives on the wrapper, not the scroller (Safari would scroll the mask with the tiles) */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
html:not(.stage) .disco__list { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 22px; padding: 6px 22px 12px; scrollbar-width: none; }
html:not(.stage) .disco__list::-webkit-scrollbar { display: none; }
html:not(.stage) .album { flex: 0 0 128px; width: 128px; min-width: 0; scroll-snap-align: start; }
html:not(.stage) .album a { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 0; border: 0; width: 128px; }
html:not(.stage) .album__text { width: 100%; min-width: 0; }
html:not(.stage) .album picture, html:not(.stage) .album img { width: 128px; height: 128px; }
html:not(.stage) .album__title { font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html:not(.stage) .album__sub { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:not(.stage) .album__meta { align-items: flex-start; }
html:not(.stage) .album__year { font-size: 17px; }
html:not(.stage) .album__listen { display: none; }
html:not(.stage) .tag { margin-left: 6px; }
html:not(.stage) .disco__hint { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 6px; font: 500 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--slate); transition: opacity .3s; }
html:not(.stage) .disco__hint.is-hidden { opacity: 0; }
html:not(.stage) .disco__arrow { color: var(--gold); font-size: 16px; }

/* ============================================================
   05 · VIDEOS
   ============================================================ */
.videos { background: var(--white); padding: 14vh 0 12vh; }
.videos__sub { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(20px, 1.6vw, 26px); color: var(--slate); margin-top: 12px; }
.board-wrap { position: relative; }
.board { position: relative; width: min(92vw, 1640px); aspect-ratio: 1672 / 941; margin: 6vh auto 0; }
.screen { position: absolute; left: 22.25%; top: 14.77%; width: 67.17%; height: 49.1%; background: var(--screen); overflow: hidden; border-radius: 2px; z-index: 1; }
.screen__ambient { position: absolute; inset: -6%; background: center / cover no-repeat; filter: blur(24px) brightness(.28) saturate(1.2); opacity: 0; transition: opacity .6s; }
.board.is-playing .screen__ambient { opacity: 1; background-image: url(/img/poster-understandable-640.jpg); }   /* fetched only when a video plays */
.glow { position: absolute; left: 22.25%; top: 14.77%; width: 67.17%; height: 49.1%; z-index: 2; pointer-events: none; mix-blend-mode: screen; transition: opacity .4s; }
.glow i { position: absolute; inset: 0; opacity: 0; background: linear-gradient(to bottom, rgba(242,201,138,.16), transparent 35%), radial-gradient(ellipse 34% 70% at var(--x) 0%, rgba(242,201,138,var(--lamp-alpha)), transparent 70%); }
.glow i:nth-child(1) { --x: 12.4%; } .glow i:nth-child(2) { --x: 39%; } .glow i:nth-child(3) { --x: 66.1%; } .glow i:nth-child(4) { --x: 92.6%; }
.no-motion .glow i { opacity: 1; }
.board.is-playing .glow { opacity: 0; }
.board__img { position: relative; z-index: 3; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, #000 86%, transparent 100%); }
.board__img img { width: 100%; height: auto; }

.play { position: absolute; inset: 0; display: block; color: var(--cream); text-decoration: none; }
.play__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.play--screen .play__poster { filter: brightness(.45); }
.no-motion .play--screen .play__poster { filter: none; }
.play__ui { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.play__circle { width: 76px; height: 76px; border-radius: 50%; border: 1px solid var(--cream); background: rgba(20,22,27,.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: grid; place-items: center; color: var(--gold); transition: transform .22s, background-color .22s; }
.play__circle svg { margin-left: 3px; }
.play:hover .play__circle { transform: scale(1.04); background: rgba(20,22,27,.42); }
.play__word { font: 500 11.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.play__ui--corner { align-items: flex-start; justify-content: flex-end; padding: 24px; }
.play__circle--s { width: 56px; height: 56px; }
.screen iframe, .card__media iframe, .board__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.screen iframe { left: 13.45%; width: 73.1%; }   /* a 16:9 feed centred on the wider billboard screen */
.screen.is-live .play { display: none; }

.board__player { display: none; }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 10vh; width: min(100% - 2 * var(--gutter), 1200px); }
.card__media { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; border: 1px solid rgba(20,22,27,.10); box-shadow: 0 24px 60px -20px rgba(20,22,27,.22); background: var(--screen); transition: box-shadow .5s; isolation: isolate; }
.card__media .play__poster { transition: transform .5s; }
.card:hover .card__media { box-shadow: 0 30px 70px -20px rgba(20,22,27,.32); }
.card:hover .play__poster { transform: scale(1.02); }
.card__title { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 1.6vw, 26px); line-height: 1.15; color: var(--ink); margin-top: 20px; }
.card__sub { font: 500 11.5px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--slate); margin-top: 8px; }

@media (max-width: 1023px) {
  .board-wrap { overflow: hidden; }
  .board { width: 130vw; max-width: none; left: -22.6vw; margin-top: 4vh; }   /* left, not transform: the reveal animation owns transform */
  .play__circle { width: 56px; height: 56px; }
  .board__player:not([hidden]) { display: block; margin: 16px; }
  .board__close { display: block; min-height: 44px; font: 500 11.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--slate); margin-left: auto; }
  .board__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--screen); }
}
@media (max-width: 899px) {
  .cards { grid-template-columns: 1fr; gap: 24px; }
  .card__media { border-radius: 12px; }
  .play__circle--s { width: 48px; height: 48px; }
  .card__title { font-size: 22px; }
}

/* ============================================================
   06 · ITINERARY
   ============================================================ */
.itin { background: var(--paper); padding: 14vh 0 14vh; }
.itin__groups { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; margin-top: 56px; align-items: start; }
.itin__group .label { display: block; padding-bottom: 14px; border-bottom: 1px solid var(--hair); margin-bottom: 8px; }
.gig { display: grid; grid-template-columns: 96px 1fr auto; gap: 24px; align-items: center; padding: 18px 0; border-bottom: 1px solid rgba(216,211,202,.7); }
.gig__date { display: flex; align-items: baseline; gap: 8px; }
.gig__day { font-family: var(--serif); font-weight: 300; font-size: 40px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 1.15em; }
.gig__month { font: 500 11px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--slate); display: flex; flex-direction: column; }
.gig__where { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gig__venue { font: 500 16px/1.3 var(--sans); color: var(--ink); }
.gig__city { font: 400 13px/1.4 var(--sans); color: var(--slate); }
.gig__note { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 17px; color: var(--slate); margin-left: 12px; }
.gig__link { font: 500 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); text-decoration: none; padding: 12px 0; white-space: nowrap; border-bottom: 1px solid transparent; transition: border-color .22s, color .22s; }
.gig__link:hover { border-color: var(--cobalt); color: var(--cobalt); }
.gig__link--time { color: var(--slate); }
.gig--past .gig__venue, .gig--past .gig__day { color: var(--slate); }
.gig--past .gig__day { font-size: 28px; font-weight: 400; }
.itin__empty { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 22px; line-height: 1.35; color: var(--slate); padding: 20px 0; }
@media (max-width: 899px) {
  .itin__groups { grid-template-columns: 1fr; gap: 48px; margin-top: 40px; }
  .gig { grid-template-columns: 72px 1fr; gap: 16px; padding: 16px 0; }
  .gig__day { font-size: 32px; }
  .gig__right { grid-column: 2; display: flex; gap: 16px; align-items: center; margin-top: -6px; }
  .gig__note { margin-left: 0; }
}
@media (min-width: 900px) { .gig__right { display: flex; align-items: center; gap: 20px; justify-content: flex-end; } }

/* ============================================================
   07 · BACK COVER
   ============================================================ */
.back { background: var(--ink); color: var(--cream); }
.back__photo { position: relative; height: 78vh; height: 78svh; min-height: 520px; overflow: hidden; }
.back__photo picture, .back__photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.back__photo img { object-fit: cover; object-position: 62% 40%; }
.back__photo::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 62% 66% at 0% 0%, rgba(20,22,27,.72), transparent 70%); }
.back__photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(to top, rgba(20,22,27,.78), rgba(20,22,27,.45) 55%, transparent); }
.back__text { position: absolute; left: var(--gutter); top: 12vh; max-width: 34ch; z-index: 2; text-shadow: 0 1px 18px rgba(0,0,0,.35); }
@supports (top: 12svh) { .back__text { top: 12svh; } }
.back__name { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(30px, 3vw, 46px); line-height: 1.1; margin-bottom: 18px; }
.back__line { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(24px, 2.2vw, 36px); line-height: 1.2; margin-top: 18px; }
/* The links and the colophon sit half as far above the foot of the photograph as they used to (was 10svh). */
.back__foot { position: absolute; left: 0; right: 0; bottom: 64px; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding: 0 var(--gutter) 5vh; pointer-events: none; }
@supports (padding-bottom: 5svh) { .back__foot { padding-bottom: 5svh; } }
.back__foot > * { pointer-events: auto; }
.back__text--phone { display: none; }
.back__links { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.back__links a { display: inline-block; font: 500 12px/44px var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--cream); border-bottom: 1px solid transparent; line-height: 44px; transition: border-color .22s; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.back__links a:hover { border-color: rgba(244,241,236,.7); }
.back__colophon { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font: 400 11.5px/1.5 var(--sans); color: rgba(244,241,236,.6); text-align: right; }
.spine-band { height: 64px; background: var(--ink); display: grid; place-items: center; }
.spine-band i { width: 6px; height: 1px; background: var(--gold); }

/* ============================================================
   PHONE / TABLET LAYOUTS (portrait cover, stacked columns)
   ============================================================ */
@media (max-width: 1100px) and (orientation: portrait) {
  .cover { display: grid; grid-template-rows: 56fr 44fr; background: var(--paper); min-height: 0; }
  .cover__stage { position: relative; grid-row: 1; height: 100%; }
  .cover__img img, .cover__layer img { object-position: 50% 0; }   /* anchored to the top: a short viewport crops the road, never the heads */
  .cover__scrim { display: none; }
  .cover__logo { left: 16px; top: 10px; width: 60vw; }
  .cover__halo { background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(245,244,241,var(--halo-alpha-phone)), transparent 70%); }
  .cover__ui { position: static; display: contents; }
  .cover__logo { position: absolute; z-index: 2; }
  .cover__type { position: relative; grid-row: 2; left: auto; bottom: auto; max-width: none; padding: 28px 20px; color: var(--ink); border-top: 1px solid var(--hair); background: var(--paper); display: flex; flex-direction: column; justify-content: center; }
  .cover__rule { background: linear-gradient(90deg, var(--gold) 6px, var(--hair) 6px); }
  .cover__pair { flex-direction: column; align-items: flex-start; gap: 16px; }
  .cover__line { max-width: none; }
  .cover__credits { color: var(--slate); }
  .cover__who + .cover__who { margin-top: 6px; }
  .cover__line { font-size: 28px; line-height: 1.2; }
  @media (max-width: 369px) { .cover__line { font-size: 25px; } }
  /* tablets: a taller photo row and a smaller logo, so both heads stay clear of it */
  @media (min-width: 600px) { .cover { grid-template-rows: 64fr 36fr; } .cover__logo { width: min(60vw, 320px); } }
}
@media (max-width: 1023px) {
  .cover { min-height: 0; }
  .folio { left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }
  .folio__btn { margin-left: 0; background: rgba(245,244,241,.88); }
  body[data-ground="photo"] .folio__btn { background: rgba(20,22,27,.38); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); text-shadow: none; }
  body[data-ground="white"] .folio__btn { background: rgba(255,255,255,.9); }
  .folio__list { position: fixed; inset: 0; margin: 0; padding: 24px 20px calc(100px + env(safe-area-inset-bottom)); background: rgba(245,244,241,.96); display: flex; flex-direction: column; overflow-y: auto; transform: none; }
  .folio__list li:first-child { margin-top: auto; }   /* bottom-aligned, but scrollable when the viewport is short */
  @media (max-height: 500px) { .folio__list a { min-height: 40px; font-size: 22px; } }
  body[data-ground] .folio__list { background: rgba(245,244,241,.96); border: 0; box-shadow: none; color: var(--ink); border-radius: 0; }
  .folio__list a { height: auto; min-height: 56px; padding: 8px 0; align-items: baseline; font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.1; letter-spacing: 0; text-transform: none; color: var(--ink); opacity: 1; }
  .folio__list b { font: 500 12px/1 var(--sans); letter-spacing: .18em; color: var(--slate); }
  .folio.is-open .folio__btn { color: var(--slate); position: relative; z-index: 2; }
  .progress { height: 2px; }
}
@media (max-width: 899px) {
  .duo { padding: 64px 0; }
  .duo__display { white-space: normal; margin-bottom: 40px; font-size: clamp(40px, 10vw, 64px); line-height: 1.02; }
  .duo__spread { display: block; }
  .duo__plate { width: 100vw; margin-left: calc(50% - 50vw); aspect-ratio: 4 / 5; max-height: 80vh; }
  .duo__col { max-width: none; margin-top: 40px; }
  .duo__quote { margin-top: 56px; }
  .videos { padding: 80px 0 72px; }
  .back__photo { height: 56vh; height: 56svh; min-height: 0; }
  .back__photo img { object-position: 66% 45%; }
  .back__photo .back__text { display: none; }
  .back__text--phone { display: block; position: static; max-width: 30ch; margin-bottom: 36px; text-shadow: none; }
  .back__name { font-size: 30px; }
  .back__line { font-size: 22px; line-height: 1.3; font-weight: 400; }
  .back__foot { position: static; display: block; padding: 40px 20px calc(48px + env(safe-area-inset-bottom)); background: var(--ink); }
  .back__links { flex-direction: column; gap: 0; }
  .back__colophon { align-items: flex-start; text-align: left; margin-top: 28px; }
  .itin { padding: 80px 0; }
}
@media (min-width: 640px) and (max-width: 899px) {
  .duo__plate { aspect-ratio: 16 / 9; }
}

/* ============================================================
   07 · PRESS KIT
   ============================================================ */
.press-kit { background: var(--paper); padding: 14vh 0 14vh; }
/* One photograph, standing full height on the right; the heading, the line under it and the download
   list share the left seven columns, so the links sit close to their thumbnails. */
.press-kit__lower { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 32px; align-items: start; }
.press-kit__title { grid-column: 1 / span 7; grid-row: 1; }
.press-kit__sub { grid-column: 1 / span 7; grid-row: 2; margin-top: 14px; max-width: 34ch;
  font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(20px, 1.6vw, 26px); color: var(--slate); }
.downloads { grid-column: 1 / span 7; grid-row: 3; margin-top: 64px; border-top: 1px solid var(--hair); }
.press-kit__portrait { grid-column: 9 / span 4; grid-row: 1 / span 3; margin: 0; align-self: stretch; }   /* the photograph's foot always lands on the list's */
.press-kit__portrait picture { display: block; height: 100%; min-height: 420px; overflow: hidden; background: var(--ink); }
.press-kit__portrait img { width: 100%; height: 100%; object-fit: cover; }
.dl__link { display: grid; grid-template-columns: 96px 1fr auto; gap: 24px; align-items: center; padding: 18px 0; border-bottom: 1px solid rgba(216,211,202,.7); text-decoration: none; color: inherit; transition: background-color .22s; }
.dl__link:hover { background: rgba(20,22,27,.03); }
.dl__thumb { width: 96px; height: 64px; display: block; }
.dl__thumb img { width: 96px; height: 64px; object-fit: cover; border: 1px solid rgba(20,22,27,.12); }
.dl__thumb--page img { object-position: 50% 0; background: #fff; }
.dl__thumb--zip { display: grid; place-items: center; border: 1px solid var(--hair); background: var(--white); font-family: var(--serif); font-weight: 400; font-size: 20px; color: var(--ink); }
.dl__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dl__title { font: 500 16px/1.3 var(--sans); color: var(--ink); }
.dl__meta { font: 400 12.5px/1.4 var(--sans); color: var(--slate); }
.dl__action { font: 500 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); white-space: nowrap; padding: 12px 0; border-bottom: 1px solid transparent; transition: border-color .22s, color .22s; }
.dl__link:hover .dl__action { border-color: var(--cobalt); color: var(--cobalt); }
@media (max-width: 899px) {
  .press-kit { padding: 80px 0; }
  /* stacked: heading, line, photograph, downloads */
  .press-kit__lower { display: flex; flex-direction: column; }
  .press-kit__title, .press-kit__sub, .downloads, .press-kit__portrait { grid-column: auto; grid-row: auto; }
  .press-kit__portrait { margin: 40px 0 48px; align-self: auto; }
  .press-kit__portrait picture { height: auto; min-height: 0; aspect-ratio: 3094 / 4869; }
  .downloads { margin-top: 0; }
  .dl__link { grid-template-columns: 72px 1fr; gap: 16px; padding: 16px 0; }
  .dl__thumb, .dl__thumb img { width: 72px; height: 48px; }
  .dl__thumb--zip { font-size: 17px; }
  .dl__action { grid-column: 2; justify-self: start; padding: 4px 0 0; }
}

/* ============================================================
   08 · CONTACT
   ============================================================ */
/* The card always sits over the photograph's sky. The sky is flat #BFBFBF along the image's top edge
   (measured: RGB 191,191,191, stddev 1.0), so on phones the section simply continues that sky upward
   and the photograph is pinned to the bottom — the seam is invisible and the text is never on paper. */
.contact { position: relative; height: 86vh; height: 86svh; min-height: 640px; overflow: hidden; background: var(--paper); color: var(--ink); }
.contact__photo, .contact__photo picture, .contact__photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.contact__photo img { object-fit: cover; object-position: 50% 30%; }
.contact__body { position: absolute; inset: 0; z-index: 2; padding: 40px var(--gutter) 0; }
.contact__folio { color: var(--slate); background-image: linear-gradient(90deg, var(--gold) 6px, rgba(20,22,27,.28) 6px); }
.contact__card { position: absolute; left: 50%; top: clamp(84px, 11%, 150px); transform: translateX(-50%); width: min(92vw, 620px); text-align: center; }
.contact__lead { font: 400 clamp(13px, .95vw, 15px)/1.5 var(--sans); color: var(--text); }
.contact__mail { display: inline-block; margin-top: 8px; font-family: var(--serif); font-weight: 400; font-size: clamp(21px, 2.1vw, 30px); line-height: 1.15; letter-spacing: -.01em; color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(20,22,27,.35); padding-bottom: 2px; transition: border-color .22s, color .22s; }
.contact__mail:hover { color: var(--cobalt); border-color: var(--cobalt); }
.contact__rule { width: 44px; margin: 24px auto; }
@media (max-width: 899px) {
  .contact { height: auto; min-height: 0; overflow: hidden; padding-top: clamp(230px, 44svh, 330px);
    background-color: #BFBFBF;
    background-image: linear-gradient(#B4B4B4, #BFBFBF);   /* the sky, continued upward to the photograph's own top row */
    background-size: 100% calc(clamp(230px, 44svh, 330px) + 2px); background-repeat: no-repeat; }
  .contact__photo { position: relative; aspect-ratio: 2763 / 1720; }   /* the whole frame, uncropped: both men stay in it */
  .contact__photo picture, .contact__photo img { position: absolute; }
  .contact__body { padding: 20px var(--gutter) 0; }   /* the same inset as .grid, so the folio rule lines up with every other section */
  .contact__card { top: clamp(60px, 12%, 112px); width: min(92vw, 460px); }
  .contact__lead { font-size: 13.5px; }
  .contact__mail { font-size: 22px; }
  .contact__rule { margin: 20px auto; }
}
@media (max-width: 899px) and (max-height: 520px) {   /* phones held sideways: less extended sky, card near the top */
  .contact { padding-top: 34svh; background-size: 100% calc(34svh + 2px); }
  .contact__card { top: 44px; }
}

/* ============================================================
   BACKGROUND MUSIC — the sound button (top-right)
   ============================================================ */
.sound { position: fixed; top: 14px; right: 16px; z-index: 55; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--slate);
  background: rgba(245,244,241,.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: color .3s, background-color .3s; }
body[data-ground="white"] .sound { background: rgba(255,255,255,.85); }
body[data-ground="photo"] .sound { color: rgba(244,241,236,.92); background: rgba(20,22,27,.38); }
.sound__bars { display: flex; align-items: flex-end; gap: 3px; height: 14px; }
.sound__bars i { width: 2px; height: 14px; border-radius: 1px; background: currentColor; transform-origin: 50% 100%; transform: scaleY(.35); transition: transform .3s, opacity .3s; }
.sound[data-state="idle"] .sound__bars i:nth-child(1) { transform: scaleY(.5); }
.sound[data-state="idle"] .sound__bars i:nth-child(2) { transform: scaleY(.85); }
.sound[data-state="idle"] .sound__bars i:nth-child(3) { transform: scaleY(.4); }
.sound[data-state="on"] .sound__bars i { animation: sound-bars 1.6s ease-in-out infinite alternate; }
.sound[data-state="on"] .sound__bars i:nth-child(2) { animation-duration: 2.1s; animation-delay: -.7s; }
.sound[data-state="on"] .sound__bars i:nth-child(3) { animation-duration: 1.3s; animation-delay: -.3s; }
@keyframes sound-bars { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
.sound[data-state="off"] .sound__bars i { transform: scaleY(.25); opacity: .6; }
.sound[data-state="off"]::after { content: ""; position: absolute; width: 20px; height: 1px; background: currentColor; transform: rotate(-45deg); }
.sound:hover { color: var(--ink); }
body[data-ground="photo"] .sound:hover { color: var(--cream); }
@media (max-width: 1023px) { .sound { top: calc(12px + env(safe-area-inset-top)); right: 12px; } .folio.is-open ~ .sound { opacity: 0; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) { .sound[data-state="on"] .sound__bars i { animation: none; transform: scaleY(.8); } }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
  .js .reveal { opacity: 1; }
  .js .cover__stage, .js .cover__logo, .js .cover__type, .js .cover__img, .js .cover__layer--gold { opacity: 1; }
  .js .loader { display: none; }
}