/* ============================================================
   Victoria Grace — pink smoke on black
   ============================================================ */

:root{
  --ink:        #060407;
  --ink-2:      #0c0810;
  --plum:       #2a0a1e;
  --rose:       #e84a8c;
  --rose-soft:  #f7a0c4;
  --blush:      #ffe2ee;
  --paper:      #f4e9ee;
  --muted:      rgba(244,233,238,.58);
  --hair:       rgba(247,160,196,.20);

  --display: "Italiana", "Cormorant Garamond", Georgia, serif;
  --serif:   "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:    "Jost", "Avenir Next", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --measure: 62ch;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(1rem,.95rem + .25vw,1.075rem);
  line-height:1.75;
  letter-spacing:.012em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--rose); color:#fff; padding:.6rem 1rem;
}
.skip:focus{ left:0; }

::selection{ background:var(--rose); color:#fff; }

/* ── type ─────────────────────────────────────────────────── */
h1,h2,h3{ font-weight:300; margin:0; }

h2{
  font-family:var(--serif);
  font-size:clamp(2rem,1.2rem + 3.4vw,4.25rem);
  line-height:1.06;
  letter-spacing:-.005em;
  margin:0 0 1.4rem;
}

.eyebrow, .section-label{
  font-size:.66rem;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--rose-soft);
  font-weight:400;
  margin:0 0 1.4rem;
}

.lede{
  font-family:var(--serif);
  font-size:clamp(1.15rem,1rem + .7vw,1.5rem);
  line-height:1.6;
  color:rgba(244,233,238,.78);
  max-width:46ch;
  font-style:italic;
  font-weight:300;
}

.quiet{ color:var(--muted); }
.center{ text-align:center; }
.center .lede{ margin-inline:auto; }

.wrap{ max-width:1180px; margin-inline:auto; padding-inline:var(--gutter); position:relative; z-index:2; }
.wrap--narrow{ max-width:720px; }

section{ padding-block:clamp(5.5rem,12vh,10rem); position:relative; }

/* ── buttons ──────────────────────────────────────────────── */
.btn{
  display:inline-block;
  padding:.95em 2.4em;
  border:1px solid var(--hair);
  border-radius:100px;
  font-size:.72rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--paper);
  background:rgba(255,255,255,.02);
  backdrop-filter:blur(6px);
  transition:border-color .5s, background .5s, color .5s, box-shadow .5s;
}
.btn:hover, .btn:focus-visible{
  border-color:var(--rose-soft);
  background:rgba(232,74,140,.10);
  box-shadow:0 0 40px -12px var(--rose);
}
.btn--solid{
  background:linear-gradient(100deg,var(--rose),#b82f6d);
  border-color:transparent;
  color:#fff;
}
.btn--solid:hover{ box-shadow:0 0 60px -10px var(--rose); }

/* ── nav ──────────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem;
  padding:1.1rem var(--gutter);
  transition:background .6s, backdrop-filter .6s, padding .6s, border-color .6s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(6,4,7,.72);
  backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--hair);
  padding-block:.75rem;
}
.nav__mark{
  font-family:var(--display);
  font-size:1.35rem;
  letter-spacing:.22em;
  text-decoration:none;
  color:var(--blush);
}
.nav__links{ display:flex; gap:clamp(1rem,2.4vw,2.4rem); }
.nav__links a{
  font-size:.68rem; letter-spacing:.26em; text-transform:uppercase;
  text-decoration:none; color:var(--muted); transition:color .4s;
}
.nav__links a:hover{ color:var(--blush); }
@media (max-width:640px){ .nav__links{ display:none; } }

/* ── hero ─────────────────────────────────────────────────── */
.hero{
  min-height:100svh;
  display:grid; place-items:center;
  padding-block:9rem 6rem;
  overflow:hidden;
  isolation:isolate;
}
.hero__art{ position:absolute; inset:0; z-index:-1; }
.hero__art img{
  width:100%; height:100%; object-fit:cover;
  opacity:.85;
  transform:scale(1.06);
  animation:drift 34s ease-in-out infinite alternate;
}
.hero__art::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 58%, transparent 0%, rgba(6,4,7,.55) 62%, var(--ink) 100%),
    linear-gradient(to bottom, rgba(6,4,7,.85), transparent 32%, transparent 62%, var(--ink) 100%);
}
.hero__glow{
  position:absolute; width:44vmax; height:44vmax; left:50%; top:56%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(232,74,140,.24), transparent 62%);
  filter:blur(40px);
  pointer-events:none;
  transition:transform 1.4s cubic-bezier(.2,.7,.2,1);
}
@keyframes drift{
  from{ transform:scale(1.06) translate3d(-1.2%,0,0); }
  to  { transform:scale(1.12) translate3d(1.6%,-1.4%,0); }
}
@media (prefers-reduced-motion:reduce){ .hero__art img{ animation:none; } }

.hero__inner{ text-align:center; padding-inline:var(--gutter); max-width:1000px; }
.hero__name{
  font-family:var(--display);
  font-size:clamp(2.9rem,.5rem + 10.5vw,9.5rem);
  line-height:.94;
  text-wrap:balance;
  letter-spacing:.055em;
  color:var(--blush);
  margin:0 0 1.4rem;
  text-shadow:0 0 70px rgba(232,74,140,.55), 0 0 160px rgba(232,74,140,.28);
}
.hero__line{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.05rem,.9rem + .8vw,1.6rem);
  color:rgba(255,226,238,.8);
  margin:0 auto 2.8rem;
  max-width:34ch;
}
.hero__cta{ display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; }

.scroll-cue{
  position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%);
  width:1px; height:64px; background:linear-gradient(var(--hair),transparent);
  overflow:hidden;
}
.scroll-cue span{
  position:absolute; inset:0; background:var(--rose-soft);
  animation:cue 2.6s ease-in-out infinite;
}
@keyframes cue{ 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(100%)} }

/* ── about ────────────────────────────────────────────────── */
.about__grid{
  max-width:1180px; margin-inline:auto; padding-inline:var(--gutter);
  display:grid; gap:clamp(2.5rem,6vw,5.5rem);
  grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  align-items:center;
}
@media (max-width:840px){ .about__grid{ grid-template-columns:1fr; } }

.frame{ margin:0; position:relative; }
.frame img{
  width:100%; aspect-ratio:3/4; object-fit:cover;
  border-radius:2px;
  filter:saturate(1.05) contrast(1.05);
}
.frame::after{
  content:""; position:absolute; inset:0;
  border:1px solid var(--hair);
  transform:translate(14px,14px);
  pointer-events:none;
}
.frame figcaption{
  margin-top:1rem; font-size:.66rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--muted);
}
.about__text p{ max-width:var(--measure); }
.about__text p + p{ margin-top:1.15rem; }

/* ── signature ────────────────────────────────────────────── */
.signature{ background:linear-gradient(var(--ink),var(--ink-2) 40%,var(--ink)); overflow:hidden; }
.signature__art{ position:absolute; inset:auto -20% -30% -20%; z-index:0; opacity:.5; }
.signature__art img{ width:100%; }

.setlist{ list-style:none; margin:3rem 0 0; padding:0; }
.setlist li{ border-top:1px solid rgba(247,160,196,.12); }
.setlist li:last-child{ border-bottom:1px solid rgba(247,160,196,.12); }

.setlist__row, .feature{
  display:flex; align-items:baseline; gap:1.3rem;
  width:100%; padding:.9rem .2rem; margin:0;
  background:none; border:0; color:inherit; text-align:left; cursor:pointer;
  font:inherit; letter-spacing:inherit;
  transition:padding-left .55s cubic-bezier(.2,.7,.2,1), background .5s;
}
.setlist__row:hover, .setlist__row:focus-visible,
.feature:hover, .feature:focus-visible{ padding-left:1.1rem; outline:none; }
.setlist__row:focus-visible, .feature:focus-visible{
  background:rgba(232,74,140,.08);
  box-shadow:inset 2px 0 0 var(--rose);
}
.setlist__n{
  font-size:.66rem; letter-spacing:.24em; color:var(--rose-soft);
  min-width:2.4rem; opacity:.75; flex:none;
}
.setlist__t{
  font-family:var(--serif);
  font-size:clamp(1.45rem,1rem + 2.1vw,2.9rem);
  line-height:1.15;
  transition:color .5s, text-shadow .5s;
}
.setlist__d, .feature__d{
  margin-left:auto; flex:none;
  font-size:.66rem; letter-spacing:.2em; color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.setlist__row:hover .setlist__t, .setlist__row.is-playing .setlist__t{
  color:var(--blush);
  text-shadow:0 0 34px rgba(232,74,140,.7);
}

/* play cue: a triangle that turns into three dancing bars while playing */
.setlist__cue, .feature__cue{
  flex:none; width:1.1rem; height:1.1rem; position:relative;
  align-self:center; opacity:0; transition:opacity .4s;
}
.feature__cue{ order:-1; opacity:.55; }
.setlist__row:hover .setlist__cue, .setlist__row:focus-visible .setlist__cue,
.feature:hover .feature__cue{ opacity:.85; }
.setlist__row.is-playing .setlist__cue, .feature.is-playing .feature__cue{ opacity:1; }

.ico-play, .ico-bars{ position:absolute; inset:0; }
.ico-play{
  border-left:.62rem solid var(--rose-soft);
  border-top:.42rem solid transparent;
  border-bottom:.42rem solid transparent;
  height:0; width:0; top:.13rem; left:.16rem;
}
.ico-bars{ display:none; align-items:flex-end; gap:.14rem; }
.ico-bars b{ width:.14rem; background:var(--rose); animation:eq .9s ease-in-out infinite; }
.ico-bars b:nth-child(1){ height:55%; animation-delay:-.2s; }
.ico-bars b:nth-child(2){ height:100%; }
.ico-bars b:nth-child(3){ height:70%; animation-delay:-.45s; }
@keyframes eq{ 0%,100%{ transform:scaleY(.35) } 50%{ transform:scaleY(1) } }
.is-playing .ico-play{ display:none; }
.is-playing .ico-bars{ display:flex; }
@media (prefers-reduced-motion:reduce){ .ico-bars b{ animation:none; } }

/* ── listen ───────────────────────────────────────────────── */
.listen{ overflow:hidden; }
.listen__art{ position:absolute; inset:0; z-index:0; opacity:.32; }
.listen__art img{ width:100%; height:100%; object-fit:cover; }
.listen__art::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(var(--ink),rgba(6,4,7,.55) 45%,var(--ink));
}
.player{
  margin:3rem 0 2.5rem;
  border:1px solid var(--hair);
  border-radius:3px;
  background:rgba(6,4,7,.55);
  backdrop-filter:blur(10px);
  padding:.6rem;
  box-shadow:0 40px 120px -50px rgba(232,74,140,.6);
}
.player iframe{ display:block; border-radius:2px; }

/* ── repertoire ───────────────────────────────────────────── */
.rep-grid{
  list-style:none; margin:3rem 0 0; padding:0;
  columns:2; column-gap:clamp(1.5rem,4vw,4rem);
}
@media (max-width:720px){ .rep-grid{ columns:1; } }
.rep-grid li{
  break-inside:avoid;
  padding:.72rem 0;
  border-bottom:1px solid rgba(247,160,196,.10);
  font-family:var(--serif);
  font-size:1.22rem;
  display:flex; justify-content:space-between; align-items:baseline; gap:1.5rem;
  transition:color .4s;
}
.rep-grid li:hover{ color:var(--blush); }
.rep-grid em{
  font-family:var(--sans); font-style:normal;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); text-align:right; flex:none; max-width:11rem;
}

/* ── booking ──────────────────────────────────────────────── */
.booking{ overflow:hidden; }
.booking__art{ position:absolute; inset:-15% -10% auto -10%; z-index:0; opacity:.42; }
.booking__art img{ width:100%; }
.contact{
  font-family:var(--serif);
  font-size:clamp(1.4rem,1rem + 2vw,2.4rem);
  margin:2.2rem 0 1.6rem;
}
.contact a{
  text-decoration:none;
  border-bottom:1px solid var(--hair);
  padding-bottom:.15em;
  transition:border-color .5s, color .5s;
}
.contact a:hover{ color:var(--blush); border-color:var(--rose); }
.social{ display:flex; gap:1.8rem; justify-content:center; flex-wrap:wrap; margin:0; }
.social a{
  font-size:.68rem; letter-spacing:.28em; text-transform:uppercase;
  text-decoration:none; color:var(--muted); transition:color .4s;
}
.social a:hover{ color:var(--rose-soft); }

/* ── footer ───────────────────────────────────────────────── */
.foot{
  border-top:1px solid rgba(247,160,196,.10);
  padding:2.4rem var(--gutter);
  display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  font-size:.68rem; letter-spacing:.14em; color:var(--muted);
}
.foot__note{ max-width:52ch; }

/* ── reveal ───────────────────────────────────────────────── */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ── featured tracks ──────────────────────────────────────── */
.features{ list-style:none; margin:3rem 0 2.5rem; padding:0; }
.features li{ border-top:1px solid rgba(247,160,196,.12); }
.features li:last-child{ border-bottom:1px solid rgba(247,160,196,.12); }
.feature{ gap:1.1rem; align-items:center; padding-block:1.05rem; }
.feature__t{
  font-family:var(--serif);
  font-size:clamp(1.25rem,1rem + 1.1vw,1.8rem);
  line-height:1.2;
  transition:color .5s, text-shadow .5s;
}
.feature:hover .feature__t, .feature.is-playing .feature__t{
  color:var(--blush); text-shadow:0 0 30px rgba(232,74,140,.6);
}
.feature__a{
  font-style:normal; font-size:.66rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--rose-soft); opacity:.75;
}
@media (max-width:560px){ .feature__a{ display:none; } }

/* SoundCloud ships a light widget only — inverting the element gives it a
   dark skin without touching the cross-origin document. */
.sc{
  filter:invert(1) hue-rotate(180deg) saturate(1.12) contrast(1.02);
  border-radius:3px;
  overflow:hidden;
  background:#fff;
}
.sc iframe{ display:block; }

/* ── now playing bar ──────────────────────────────────────── */
.np{
  position:fixed; inset:auto 0 0 0; z-index:60;
  background:rgba(6,4,7,.86);
  backdrop-filter:blur(20px) saturate(140%);
  border-top:1px solid var(--hair);
  box-shadow:0 -30px 80px -40px rgba(232,74,140,.75);
  transform:translateY(100%);
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.np.is-open{ transform:none; }
.np[hidden]{ display:none; }
.np__inner{
  max-width:1180px; margin-inline:auto;
  padding:.7rem var(--gutter) .85rem;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.15rem 1rem;
  align-items:center;
}
.np__meta{ margin:0; display:flex; align-items:baseline; gap:.9rem; min-width:0; }
.np__title{
  font-family:var(--serif); font-size:1.15rem; color:var(--blush);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.np__artist{
  font-style:normal; font-size:.62rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--rose-soft); opacity:.75; flex:none;
}
.sc--np{ grid-column:1 / -1; }
.np__close{
  grid-row:1; grid-column:2;
  background:none; border:1px solid var(--hair); border-radius:50%;
  color:var(--muted); width:2rem; height:2rem; line-height:1; font-size:1.1rem;
  cursor:pointer; transition:color .4s, border-color .4s;
}
.np__close:hover{ color:var(--blush); border-color:var(--rose-soft); }
body.has-np{ padding-bottom:190px; }

/* ── booking form ─────────────────────────────────────────── */
.form{
  margin:3.2rem 0 2.4rem;
  display:grid; gap:1.35rem 1.6rem;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (max-width:620px){ .form{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:.5rem; min-width:0; }
.field--wide{ grid-column:1 / -1; }
.field--trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.field label{
  font-size:.62rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--rose-soft); opacity:.8;
}
.field label span{ letter-spacing:.14em; text-transform:none; color:var(--muted); opacity:.8; }
.field input, .field select, .field textarea{
  font-family:var(--sans); font-size:1rem; font-weight:300; color:var(--paper);
  color-scheme:dark;
  background:rgba(255,255,255,.03);
  border:1px solid var(--hair);
  border-radius:2px;
  padding:.85em 1em;
  width:100%;
  transition:border-color .4s, background .4s, box-shadow .4s;
}
.field textarea{ resize:vertical; line-height:1.6; }
.field select{
  appearance:none; cursor:pointer; padding-right:2.8rem;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f7a0c4' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1.1rem center;
  background-size:.7rem auto;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;
  border-color:var(--rose-soft);
  background:rgba(232,74,140,.07);
  box-shadow:0 0 40px -18px var(--rose);
}
.field input::placeholder, .field textarea::placeholder{ color:rgba(244,233,238,.32); }
.field.is-bad input, .field.is-bad textarea{ border-color:#e8557a; }
.form__foot{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.form__note{ margin:0; font-size:.8rem; color:var(--muted); }
.form__note.is-good{ color:var(--rose-soft); }
.form__note.is-bad{ color:#f08aa6; }

@media (max-width:560px){
  .hero__name{ letter-spacing:.02em; }
  .hero__inner{ padding-inline:1.1rem; }
  .rep-grid li{ font-size:1.1rem; gap:1rem; }
  .rep-grid em{ max-width:8.5rem; }
  .setlist li{ gap:.9rem; }
  .track__head{ flex-wrap:wrap; gap:.35rem; }
}

/* ── portraits ────────────────────────────────────────────── */
.portraits{ padding-bottom:clamp(4rem,9vh,7rem); }
.portraits h2{ line-height:1.02; }

.strip{
  margin-top:clamp(2.5rem,6vh,4.5rem);
  padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.9rem,2vw,1.8rem);
  align-items:start;
}
.strip__item{ margin:0; overflow:hidden; }
.strip__item img{
  width:100%; height:100%; object-fit:cover;
  aspect-ratio:3/4;
  transform:scale(1.02);
  transition:transform 1.4s cubic-bezier(.2,.7,.2,1), filter 1.4s;
  filter:saturate(1.02);
}
.strip__item:hover img{ transform:scale(1.06); filter:saturate(1.12) brightness(1.06); }

/* editorial stagger — repeats every row of four */
.strip{ row-gap:clamp(1.4rem,3vw,2.6rem); }
.strip__item:nth-child(4n+1){ margin-top:0; }
.strip__item:nth-child(4n+2){ margin-top:clamp(1.5rem,5vw,5rem); }
.strip__item:nth-child(4n+3){ margin-top:clamp(.6rem,2vw,2rem); }
.strip__item:nth-child(4n+4){ margin-top:clamp(2.4rem,7vw,7rem); }
.strip__item:nth-child(2) img,
.strip__item:nth-child(6) img,
.strip__item:nth-child(11) img,
.strip__item:nth-child(14) img{ aspect-ratio:2/3; }

@media (max-width:900px){
  .strip{
    display:flex; gap:.9rem;
    overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:1rem;
    scrollbar-width:none;
  }
  .strip::-webkit-scrollbar{ display:none; }
  .strip__item{ flex:0 0 72%; margin-top:0 !important; scroll-snap-align:center; }
  .strip__item img{ aspect-ratio:3/4 !important; }
}

/* ── clips that live inside a picture frame ───────────────── */
.frame, .strip__item{ position:relative; }
.clip{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.2s ease;
  pointer-events:none;
}
.clip.is-on{ opacity:1; }
.frame .clip{ border-radius:2px; }
@media (prefers-reduced-motion:reduce){ .clip{ display:none; } }

/* ── the layer the page slides over ───────────────────────── */
.underlay{
  position:fixed; inset:0; z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.underlay img{
  width:100%; height:100%; object-fit:cover; object-position:50% 42%;
  transform:scale(1.04);
}
.underlay::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 0%, rgba(6,4,7,.35) 70%, rgba(6,4,7,.8) 100%),
    linear-gradient(rgba(6,4,7,.25), rgba(6,4,7,.05) 40%, rgba(6,4,7,.45));
}

/* everything else rides above it, opaque, so she only shows in the windows */
.nav, main, .foot, .np{ position:relative; z-index:1; }
.hero, .about, .portraits, .listen, .repertoire, .booking, .foot{
  background-color:var(--ink);
}
.signature{ background-image:linear-gradient(var(--ink),var(--ink-2) 40%,var(--ink)); }

.window{
  position:relative; z-index:1;
  height:min(80vh,780px);
  background:transparent;
}
.window--short{ height:min(52vh,460px); }
.window::before,
.window::after{
  content:""; position:absolute; left:0; right:0; height:26%;
  pointer-events:none;
}
.window::before{ top:0;    background:linear-gradient(var(--ink),transparent); }
.window::after { bottom:0; background:linear-gradient(transparent,var(--ink)); }
@media (max-width:700px){
  .window{ height:min(58vh,520px); }
  .window--short{ height:min(38vh,320px); }
  .underlay img{ object-position:50% 38%; }
}

/* ── hero text moves into the black side of the picture ───── */
@media (min-width:900px){
  .hero{ place-items:center start; }
  .hero__inner{
    text-align:left;
    max-width:min(52vw,620px);
    margin-left:max(var(--gutter), calc(50vw - 660px));
    padding-inline:0;
  }
  .hero__line{ margin-inline:0; }
  .hero__cta{ justify-content:flex-start; }
  .hero__art::after{
    background:
      radial-gradient(90% 80% at 72% 50%, transparent 0%, rgba(6,4,7,.28) 60%, rgba(6,4,7,.72) 100%),
      linear-gradient(to right, rgba(6,4,7,.86) 0%, rgba(6,4,7,.5) 38%, transparent 62%),
      linear-gradient(to bottom, rgba(6,4,7,.8), transparent 28%, transparent 68%, var(--ink) 100%);
  }
}

/* ── representation ───────────────────────────────────────── */
.representation{ background-color:var(--ink); }
.rep{
  display:grid; gap:clamp(2rem,5vw,4.5rem);
  grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  align-items:start;
  margin-top:.5rem;
}
@media (max-width:840px){ .rep{ grid-template-columns:1fr; } }
.rep__text p{ max-width:var(--measure); }
.rep__text p + p{ margin-top:1.15rem; }

.card{
  border:1px solid var(--hair);
  border-radius:2px;
  padding:clamp(1.6rem,3vw,2.2rem);
  background:rgba(255,255,255,.02);
  backdrop-filter:blur(6px);
}
.card__mark{
  font-family:var(--display);
  font-size:1.5rem; letter-spacing:.24em;
  color:var(--blush);
  margin:0 0 1.4rem;
}
.card__name{ font-family:var(--serif); font-size:1.35rem; margin:0 0 .35rem; }
.card__role{
  font-size:.62rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--rose-soft); opacity:.8; margin:0 0 1.5rem;
}
.card__lines{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.card__lines a{
  font-size:.9rem; letter-spacing:.04em; text-decoration:none;
  color:rgba(244,233,238,.8);
  border-bottom:1px solid transparent;
  transition:color .4s, border-color .4s;
}
.card__lines a:hover{ color:var(--blush); border-bottom-color:var(--rose); }

/* ── the underlay can play film ───────────────────────────── */
.underlay__video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:50% 42%;
  opacity:0; transition:opacity 2s ease;
}
.underlay__video.is-on{ opacity:1; }

.soundcloud-out{ margin-top:clamp(2.5rem,5vh,3.5rem); }

/* ── JM&A mark ────────────────────────────────────────────── */
.card__logo{
  width:clamp(96px,42%,132px);
  height:auto;
  margin:0 0 1.5rem;
  opacity:.92;
}
.foot__left{ display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; }
.foot__jma{
  display:inline-flex; align-items:center; gap:.6rem;
  text-decoration:none; color:var(--muted);
  transition:color .4s, opacity .4s;
  opacity:.7;
}
.foot__jma span{ font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; }
.foot__jma img{ width:52px; height:auto; }
.foot__jma:hover{ opacity:1; color:var(--blush); }

/* ── mailing-list popup ───────────────────────────────────── */
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.modal{
  position:fixed; inset:0; z-index:90;
  display:grid; place-items:center;
  padding:var(--gutter);
}
.modal[hidden]{ display:none; }
.modal__scrim{
  position:absolute; inset:0;
  background:rgba(4,2,6,.72);
  backdrop-filter:blur(10px) saturate(120%);
  opacity:0; transition:opacity .7s ease;
}
.modal__box{
  position:relative;
  width:min(460px,100%);
  padding:clamp(2rem,5vw,2.8rem);
  background:linear-gradient(var(--ink-2),var(--ink));
  border:1px solid var(--hair);
  border-radius:3px;
  box-shadow:0 60px 140px -60px rgba(232,74,140,.85);
  overflow:hidden;
  opacity:0; transform:translateY(18px) scale(.985);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.modal.is-open .modal__scrim{ opacity:1; }
.modal.is-open .modal__box{ opacity:1; transform:none; }

.modal__smear{
  position:absolute; inset:-30% -20% auto -20%;
  width:140%; opacity:.5; pointer-events:none;
}
.modal__close{
  position:absolute; top:.7rem; right:.9rem;
  background:none; border:0; cursor:pointer;
  color:var(--muted); font-size:1.5rem; line-height:1;
  padding:.3rem .5rem; transition:color .4s;
}
.modal__close:hover{ color:var(--blush); }

.modal__eyebrow{
  position:relative;
  font-size:.62rem; letter-spacing:.36em; text-transform:uppercase;
  color:var(--rose-soft); margin:0 0 1rem;
}
.modal__title{
  position:relative;
  font-family:var(--serif);
  font-size:clamp(2rem,1.4rem + 2vw,2.7rem);
  line-height:1.05; margin:0 0 .8rem;
  color:var(--blush);
}
.modal__copy{
  position:relative;
  margin:0 0 1.5rem;
  color:rgba(244,233,238,.72);
  max-width:32ch;
}
.modal__form{ position:relative; display:grid; gap:.9rem; }
.modal__row{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
@media (max-width:420px){ .modal__row{ grid-template-columns:1fr; } }
.field--tight{ gap:.35rem; }
.field--tight label{ font-size:.58rem; letter-spacing:.24em; }
.field--tight input{ padding:.7em .9em; font-size:.95rem; }
.modal__form .btn{ justify-self:start; margin-top:.3rem; padding-inline:2.2em; }
.field.is-bad input{ border-color:#e8557a; }
.modal__note{
  position:relative;
  margin:1rem 0 0; min-height:1.2em;
  font-size:.8rem; color:var(--muted);
}
.modal__note.is-good{ color:var(--rose-soft); }
.modal__note.is-bad{ color:#f08aa6; }

@media (prefers-reduced-motion:reduce){
  .modal__scrim, .modal__box{ transition:none; }
}