/* The Portrait direction, shared across the five preview pages.
   Concept spine: "the moment before" — she performed before she coached, so
   the imagery is theatrical and every page opens on the beat before someone
   steps up. All motion is CSS scroll-driven; no page ships script except the
   contact page, which reuses /landing.js for the form. */

:root {
  --deep: #0b3948; --mid: #416165; --accent: #8a2b3d;
  --ground: #071f28;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; margin: 0; }
html { -webkit-font-smoothing: antialiased; }
body { font-family: var(--sans); background: var(--ground); color: #eaf3f5; line-height: 1.55; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.inline { color: #e2a3ae; text-decoration-line: underline; text-decoration-color: rgba(226,163,174,.6);
  text-decoration-thickness: 1px; text-underline-offset: .22em; }
.inline:hover { text-decoration-color: #e2a3ae; }
a:focus-visible, button:focus-visible { outline: 2px solid #e2a3ae; outline-offset: 3px; border-radius: 2px; }
html { scroll-padding-top: 74px; }
::selection { background: rgba(138,43,61,.45); color: #fff; }

/* ---- Motion. Three verbs and a drawn line, nothing else. -------------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rise  { animation: rise linear both; animation-timeline: view(); animation-range: entry 5% cover 32%; }
    .rise2 { animation: rise linear both; animation-timeline: view(); animation-range: entry 12% cover 40%; }
    .wipe  { animation: wipe linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
    /* exit-range, because an element at document top can never reach a range
       that begins at cover 0%. The taller-than-viewport home backdrop gets the
       wider range so it travels through the whole dissolve. */
    .push  { animation: push linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    .backdrop .push { animation-range: contain 0% exit 100%; }
    /* Content on screen at first paint sits mid-range and can never play from
       its start, so it arrives half-faded. Ship its end state instead. */
    .pagehead .rise, .pagehead .rise2 { animation: none; }
    .work > div::before, .steps > div::before, .deflist > div::before,
    .proof > div::before, .quotes figure::before {
      animation: draw linear both; animation-timeline: view(); animation-range: entry 0% cover 30%;
    }
    /* The split photographs drift slowly inside their frames as they cross the
       viewport. Oversized by scale so the pan never exposes an edge. */
    .split figure img { scale: 1.12; animation: drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}
@keyframes drift { from { translate: 0 -4%; } to { translate: 0 4%; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* The first section after a page header can be above the fold at any width. */
    .pagehead + section .rise, .pagehead + section .rise2, .pagehead + section .wipe { animation: none; }
  }
}
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes push { from { transform: scale(1.14); } to { transform: scale(1); } }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---- Chrome ----------------------------------------------------------- */
.bar {
  position: fixed; inset: 0 0 auto; z-index: 6; height: 62px; display: flex; align-items: center;
  justify-content: space-between; padding-inline: clamp(20px,5vw,60px);
  background: linear-gradient(rgba(7,31,40,.88), rgba(7,31,40,0)); color: #fff;
}
.bar.solid { position: sticky; background: var(--ground); border-bottom: 1px solid rgba(255,255,255,.12); }
.bar .mk { font-family: var(--serif); font-size: 1rem; }
.bar .mk a { display: flex; align-items: center; gap: 13px; }
.bar .mk .nm { font-size: 1.16rem; letter-spacing: -.012em; white-space: nowrap; }
.bar .mk .mkrule { width: 1px; height: 22px; background: rgba(255,255,255,.35); }
.bar .mk .mksub { font: 500 8.5px/1.5 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: #cfe0e5; white-space: nowrap; }
.bar nav { display: flex; gap: 24px; font: 500 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.bar nav a { padding-bottom: 4px; border-bottom: 1px solid transparent; transition: color 180ms ease-out, border-color 180ms ease-out; }
.bar .mk a { border-bottom: 1px solid transparent; transition: border-color 180ms ease-out; }
.bar .mk a:hover, .bar .mk a:focus-visible { border-bottom-color: rgba(255,255,255,.45); }
.bar nav a:hover { color: #fff; }
.bar nav a[aria-current="page"] { color: #fff; border-bottom-color: rgba(255,255,255,.45); }
.bar nav a.on { color: #fff; border-bottom-color: var(--accent); }

footer { border-top: 1px solid rgba(255,255,255,.14);
  padding-block: clamp(56px, 7vw, 104px) 44px; padding-inline: clamp(20px,5vw,60px);
  display: grid; grid-template-columns: repeat(12,1fr); gap: clamp(18px,2.4vw,34px); align-items: start; }
footer .mk { grid-column: 1/4; font-family: var(--serif); font-size: .98rem; }
footer .stand { grid-column: 4/9; max-width: 34ch; font-size: .92rem; line-height: 1.6; color: #b9ced3; }
footer nav { grid-column: 9/13; display: flex; justify-content: flex-end; gap: 22px; flex-wrap: wrap;
  font: 500 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6); }
footer nav a:hover { color: #fff; }

/* ---- Layout ----------------------------------------------------------- */
/* Padding is proportional to what a section actually holds. A flat value meant
   the thin bands (a one-line statement, the proof strip) were two-thirds empty
   while the image blocks were fine. */
section { padding-block: clamp(56px, 6.5vw, 92px); padding-inline: clamp(20px,5vw,60px); }
section.tight { padding-block: clamp(40px, 4.5vw, 64px); }
/* Back-to-back splits zigzag; the pair reads as one composition, so no second gap. */
section.split + section.split { padding-top: 0; }
.grid { max-width: 84rem; margin-inline: auto; display: grid; grid-template-columns: repeat(12,1fr); gap: clamp(18px,2.4vw,34px); }
h2 { grid-column: 1/6; font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem,3.6vw,2.9rem); line-height: 1.04; letter-spacing: -.02em; color: #fff; }
.lead { grid-column: 7/12; font-size: 1.04rem; line-height: 1.68; color: #b9ced3; align-self: end; }
.lead p + p, .prose p + p { margin-top: 1rem; }
.prose { grid-column: 1/8; font-size: 1.04rem; line-height: 1.7; color: #b9ced3; }
.prose strong { color: #fff; font-weight: 500; }

/* ---- Page header: image-led, every inner page opens on one ------------ */
.pagehead { position: relative; overflow: clip; min-height: 62svh; display: grid; align-content: end; padding: clamp(120px,18vh,180px) clamp(20px,5vw,60px) clamp(48px,7vh,80px); }
.pagehead > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.pagehead::after { content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(7,31,40,.42) 0, rgba(7,31,40,.18) 40%, rgba(7,31,40,.78) 78%, var(--ground) 100%); }
.pagehead .in { position: relative; z-index: 2; max-width: 84rem; margin-inline: auto; width: 100%; }
/* Header type sits on photography, and a bright frame (the rehearsal room)
   can wash it out. The shadow buys legibility on any image. */
.pagehead .kicker, .pagehead h1, .pagehead .sub { text-shadow: 0 1px 2px rgba(7,31,40,.9), 0 1px 14px rgba(7,31,40,.85); }
/* A scrim that travels with the copy block. The vertical gradient is right for
   the three dark headers; the bright rehearsal/chairs frames need this too. */
.pagehead .in { isolation: isolate; }
.pagehead .in::before { content: ''; position: absolute; z-index: -1; inset: -48px -40px -48px -44px;
  background: linear-gradient(to right, rgba(7,31,40,.72) 0, rgba(7,31,40,.66) 30%, rgba(7,31,40,.55) 55%, rgba(7,31,40,0) 92%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent); }
.pagehead .kicker { font: 600 10px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: #f0c3cb; }
.pagehead h1 { margin-top: 14px; font-family: var(--serif); font-weight: 400; font-variation-settings: 'opsz' 72;
  font-size: clamp(2rem, 4.4vw, 3.8rem); line-height: 1.02; letter-spacing: -.024em; color: #fff; max-width: 22ch; text-wrap: balance; }
.pagehead .sub { margin-top: 18px; max-width: 52ch; font-size: 1.04rem; line-height: 1.64; color: #c8dbe0; }

/* The hero copy is on screen at first paint, so its entrance is the one
   time-based moment on the site: the same rise verb, staggered once. */
@media (prefers-reduced-motion: no-preference) {
  .heroCopy h1 { animation: rise 700ms cubic-bezier(.2,.7,.2,1) 80ms backwards; }
  .heroCopy p { animation: rise 700ms cubic-bezier(.2,.7,.2,1) 200ms backwards; }
  .heroCopy .go { animation: rise 700ms cubic-bezier(.2,.7,.2,1) 320ms backwards; }
}

/* ---- Home hero: her photograph, dissolving through the work list ------ */
.topmatter { position: relative; isolation: isolate; }
/* clip, not hidden: an overflow:hidden ancestor is a scroll container, which
   captures every descendant's view() timeline and freezes the animation. */
.backdrop { position: absolute; inset: 0; overflow: clip; z-index: 0; }
.backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 18%; }
.backdrop::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to bottom, transparent 0 34%, rgba(7,31,40,.26) 48%, rgba(7,31,40,.55) 60%,
      rgba(7,31,40,.80) 72%, rgba(7,31,40,.94) 84%, #071f28 96%),
    linear-gradient(100deg, rgba(7,31,40,.92) 0 30%, rgba(7,31,40,.58) 54%, rgba(7,31,40,.16) 100%);
}
/* Grid, not absolute positioning: on a short viewport the absolutely-placed
   copy grew up into the fixed bar. Now the hero grows to hold it. */
.stagehero { position: relative; z-index: 2; min-height: 100svh; display: grid; align-content: end;
  padding: clamp(82px,12vh,140px) clamp(20px,5vw,60px) clamp(48px,7vh,86px); }
.heroCopy { position: relative; z-index: 2; max-width: min(46ch, 48vw); }
.heroCopy h1 { font-family: var(--serif); font-weight: 400; font-variation-settings: 'opsz' 72;
  font-size: clamp(1.9rem, 3.5vw, 3.2rem); line-height: 1.06; letter-spacing: -.022em; color: #fff; text-wrap: balance; }
.heroCopy p { margin-top: 20px; max-width: 42ch; font-size: 1.02rem; line-height: 1.62; color: #c8dbe0; }
.over { position: relative; z-index: 2; padding-top: clamp(40px, 6vw, 90px); padding-bottom: clamp(48px, 5vw, 64px); }

/* ---- Buttons ---------------------------------------------------------- */
.go { display: inline-flex; align-items: center; gap: 14px; margin-top: 26px; padding: 17px 30px;
  background: var(--accent); color: #fff; font: 600 .8rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  transition: transform 220ms cubic-bezier(.16,1,.3,1), background-color 220ms ease-out; }
.go:hover { background: #9c3346; }
@media (prefers-reduced-motion: no-preference) { .go:hover { transform: translateY(-2px); } }
.go.quiet { background: transparent; border: 1px solid rgba(255,255,255,.4); }
.go.quiet:hover { background: rgba(255,255,255,.08); }

/* ---- Ruled index rows (the work list) --------------------------------- */
.work { grid-column: 1/13; margin-top: clamp(38px,5vw,70px); display: grid; gap: 0; }
.work > div { position: relative; display: grid; grid-template-columns: 3.4rem 15rem 1fr; gap: 26px; padding-block: 30px; align-items: baseline; }
.work > div::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: rgba(255,255,255,.16); transform-origin: left; }
.work .n { font: 600 10px/1 var(--sans); letter-spacing: .22em; color: #e2a3ae; }
.work h3 { font-family: var(--serif); font-weight: 400; font-size: 1.24rem; color: #fff; }
.work p { font-size: .94rem; line-height: 1.62; color: #b9ced3; }

/* ---- Proof strip ------------------------------------------------------ */
/* Five declared tracks: auto-fit can never divide five evenly, so the fifth
   stat sat orphaned on its own row with an empty track beside it. */
.proof { grid-column: 1/13; display: grid; grid-template-columns: repeat(5, minmax(0,1fr));
  align-items: start; gap: clamp(18px,2.4vw,34px); margin-top: clamp(38px,5vw,64px); }
.proof > div { position: relative; padding-top: 18px; }
.proof > div::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: rgba(255,255,255,.16); transform-origin: left; }
.proof .big { font-family: var(--serif); font-size: clamp(1.6rem,2.6vw,2.2rem); color: #fff; line-height: 1; }
.proof .what { margin-top: 8px; font: 500 10.5px/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); }

/* ---- Imagery ---------------------------------------------------------- */
.full { grid-column: 1/13; margin-top: clamp(38px,5vw,70px); aspect-ratio: 16/9; overflow: clip; }
.full img, .half img { width: 100%; height: 100%; object-fit: cover; }
.half { grid-column: span 6; aspect-ratio: 4/3; overflow: clip; }
.portraitcol { grid-column: 8/13; overflow: clip; aspect-ratio: 4/3; }
.portraitcol img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; }

/* ---- Quote band and quote wall ---------------------------------------- */
.quoteband { position: relative; overflow: clip; padding-block: clamp(84px, 9vw, 128px); }
.quoteband > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.quoteband::after { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(7,31,40,.62); }
.quoteband .grid { position: relative; z-index: 2; }
blockquote { grid-column: 2/11; font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem,3.4vw,2.7rem); line-height: 1.2; color: #fff; }
figcaption { grid-column: 2/11; margin-top: 22px; font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #cfe0e5; }

/* Grid, not multicol: two columns of unequal figures cannot balance, and the
   rag above the CTA measured up to 169px of hole. */
.quotes { grid-column: 1/13; margin-top: clamp(38px,5vw,64px); display: grid;
  grid-template-columns: repeat(2, 1fr); gap: clamp(18px,2.4vw,34px); align-items: start; }
.quotes figure { position: relative; padding-top: 22px; }
.quotes figure::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: rgba(255,255,255,.16); transform-origin: left; }
.quotes blockquote { font-size: 1.18rem; line-height: 1.42; grid-column: auto; }
.quotes figcaption { grid-column: auto; margin-top: 14px; font-size: 10px; color: rgba(255,255,255,.55); }

/* ---- CTA band --------------------------------------------------------- */
.cta { background: var(--mid); padding-block: clamp(48px, 5.5vw, 84px); }
.cta .copy { grid-column: 1/8; }
.cta h2 { grid-column: auto; }
.cta p { margin-top: 12px; max-width: 52ch; color: #eaf3f5; font-size: 1rem; line-height: 1.66; }
.cta .act { grid-column: 8/13; align-self: end; justify-self: start; }
/* Between the phone stack and ~940px the button label wraps; stack the band. */
@media (max-width: 939px) and (min-width: 861px) {
  .cta .copy { grid-column: 1/13; }
  .cta .act  { grid-column: 1/13; align-self: start; }
}

/* ---- Contact form (ids match /landing.js) ----------------------------- */
form.contact { grid-column: 1/8; display: grid; gap: 16px; margin-top: clamp(30px,4vw,50px); }
.field { display: grid; gap: 7px; }
.field label { font: 600 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.field input, .field textarea { font: 400 1.02rem/1.5 var(--sans); color: #fff; background: transparent;
  border: 0; border-bottom: 1px solid rgba(255,255,255,.36); border-radius: 0; padding: 12px 0; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid #e2a3ae; outline-offset: 3px; border-bottom-color: #e2a3ae; }
.field textarea { min-height: 9rem; resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.state { grid-column: 1/8; margin-top: 6px; padding: 14px 16px; font-size: .95rem; }
.state.ok { border: 1px solid rgba(127,181,154,.55); color: #d9efe4; background: rgba(255,255,255,.05); }
.state.err { border: 1px solid rgba(226,163,174,.55); color: #f3dde1; background: rgba(255,255,255,.05); }
.state[hidden] { display: none; }
.sidenote { grid-column: 8/13; align-self: start; margin-top: clamp(30px,4vw,50px); font-size: .95rem; line-height: 1.7; color: #b9ced3; }
.sidenote a { color: #e2a3ae; text-decoration-line: underline; text-decoration-color: rgba(226,163,174,.6); text-decoration-thickness: 1px; text-underline-offset: .22em; }

@media (max-width: 860px) {
  .grid > * { grid-column: 1/-1 !important; }
  .work > div { grid-template-columns: 1fr; gap: 8px; }
  .heroCopy { max-width: none; }
  .quotes { grid-template-columns: 1fr; }

  /* The nav used to `display: none` here, which left a phone visitor with no
     way to reach any page but the one they landed on. It becomes a scrollable
     rail under the wordmark instead: no JS, no hamburger, nothing to open. */
  .bar { height: auto; flex-direction: column; align-items: stretch; gap: 10px;
    padding-block: 12px; background: rgba(7,31,40,.94);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .bar nav { gap: 18px; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .bar nav::-webkit-scrollbar { display: none; }
  .bar nav a { white-space: nowrap; }
  /* The header is taller now, so the page headers need to clear it. */
  .pagehead { padding-top: clamp(150px, 24vh, 200px); }

  /* A 4:3 photograph covering a tall narrow viewport crops hard. At the
     desktop focal point the phone shows mostly hair, so pull the focus back
     onto her face and shorten the backdrop it has to fill. */
  .backdrop img { object-position: 56% 30%; filter: brightness(.68) saturate(.85); }
  /* A phone-width slice of a landscape portrait can never frame the face, so
     the photograph reads as lit texture here and the scrim keeps it abstract. */
  .backdrop::after { background:
    linear-gradient(to bottom, rgba(7,31,40,.34) 0 16%, rgba(7,31,40,.62) 36%, rgba(7,31,40,.82) 54%,
      rgba(7,31,40,.94) 72%, var(--ground) 100%); }
  .stagehero { min-height: 88svh; padding-top: clamp(100px,16vh,150px); }
}

@media (max-width: 860px) {
  .proof { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .proof > div:last-child { grid-column: 1 / -1; }
  footer { grid-template-columns: 1fr; padding-block: clamp(48px, 8vw, 72px) 32px; }
  footer .mk, footer .stand, footer nav { grid-column: 1/-1; }
  footer nav { justify-content: flex-start; }
}

@media (max-width: 480px) {
  /* All five links fit the rail; "Book a call" must never scroll out of sight. */
  .bar nav { gap: 12px; }
  .bar nav a { font-size: 9.5px; letter-spacing: .12em; padding-block: 6px; }
  .split figure, .split.flip figure { aspect-ratio: 3/2; }
  .steps { gap: 26px; }
  .tags span { padding: 8px 14px; font-size: .78rem; }
}

/* ---- Numbered steps: how it starts, what happens next ----------------- */
.steps { grid-column: 1/13; margin-top: clamp(38px,5vw,64px); display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem,1fr)); gap: clamp(24px,3vw,44px); }
.steps > div { position: relative; padding-top: 22px; }
.steps > div::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(255,255,255,.18); transform-origin: left; }
.steps .n { font: 600 10px/1 var(--sans); letter-spacing: .22em; color: #e2a3ae; }
.steps h3 { margin-top: 12px; font-family: var(--serif); font-weight: 400; font-size: 1.22rem; color: #fff; }
.steps p { margin-top: 8px; font-size: .94rem; line-height: 1.64; color: #b9ced3; }

/* ---- A statement band: one sentence, no image ------------------------- */
.statement { background: var(--deep); padding-block: clamp(56px, 7vw, 104px); }
.statement p { grid-column: 2/12; font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.4rem,2.8vw,2.2rem); line-height: 1.28; letter-spacing: -.012em; color: #fff; text-wrap: balance; }

/* ---- Split: copy one side, image the other --------------------------- */
.split .copy { grid-column: 1/6; align-self: center; }
.split .copy p { margin-top: 16px; font-size: 1.02rem; line-height: 1.7; color: #b9ced3; }
.split .copy p + p { margin-top: 1rem; }
.split figure { grid-column: 7/13; aspect-ratio: 3/2; overflow: clip; }
.split.flip .copy { grid-column: 8/13; }
.split.flip figure { grid-column: 1/7; }
/* Both children are pinned to row 1. Without this the flipped variant places
   the copy at column 8, and sparse auto-placement refuses to track back to
   column 1 for the figure, so it wraps to a second row. */
.split .copy, .split figure { grid-row: 1; }
/* Stacked on mobile, the copy leads and the photo follows; the row pin above
   would pile both children into one cell with the photo hiding the copy. */
@media (max-width: 860px) { .split .copy { grid-row: 1; } .split figure { grid-row: 2; } }
.split figure img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Definition list: sectors, FAQ ------------------------------------ */
.deflist { grid-column: 1/13; margin-top: clamp(38px,5vw,64px); }
.deflist > div { position: relative; display: grid; grid-template-columns: 18rem 1fr; gap: 28px; padding-block: 26px; align-items: baseline; }
.deflist > div::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(255,255,255,.16); transform-origin: left; }
.deflist dt, .deflist h3 { font-family: var(--serif); font-weight: 400; font-size: 1.18rem; color: #fff; margin: 0; }
.deflist dd, .deflist p { margin: 0; font-size: .96rem; line-height: 1.68; color: #b9ced3; }

/* ---- Tag row: sectors as chips --------------------------------------- */
.tags { grid-column: 1/13; margin-top: clamp(30px,4vw,52px); display: flex; flex-wrap: wrap; gap: 10px; }
.tags span { padding: 10px 18px; border: 1px solid rgba(255,255,255,.26); font: 500 .82rem/1 var(--sans); color: #d6e5e9; }

@media (max-width: 860px) {
  .split .copy, .split figure, .split.flip .copy, .split.flip figure { grid-column: 1/-1 !important; }
  .deflist > div { grid-template-columns: 1fr; gap: 8px; }
}

/* The band quote was a <figure style="display:contents"> so its children could
   be grid items directly. That strips the figure's role in several screen
   readers, breaking the tie between the quote and who said it. It is a real
   element now, spanning the columns its children used to. */
.bandquote { grid-column: 2/11; margin: 0; }
.bandquote blockquote, .bandquote figcaption { grid-column: auto; }
@media (max-width: 860px) { .bandquote { grid-column: 1/-1; } }

/* ---- The one scrolltelling moment: the stage gives way to the house. ----
   A 320svh scene pins a full-viewport stage. Scroll scrubs the ghost light
   into the red velvet auditorium while the copy hands over from her past to
   her clients' present. Pure CSS: the scene publishes a named view-timeline
   and the layers animate against it. Browsers without support (and reduced-
   motion users) get a single static frame with no dead scroll. */
.scene { position: relative; }
.scene .stick { position: relative; height: 100svh; overflow: clip; }
.scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scene .after { opacity: 0; }
.scene .stick::after { content: ''; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to top, rgba(7,31,40,.88) 0, rgba(7,31,40,.35) 34%, rgba(7,31,40,.12) 60%); }
.scene .copy { position: absolute; z-index: 3; left: clamp(20px,5vw,60px); right: clamp(20px,5vw,60px);
  bottom: clamp(44px,7vh,80px); max-width: 46ch; }
.scene .copy .kicker { font: 600 10px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: #f0c3cb; }
.scene .copy h2 { grid-column: auto; margin-top: 12px; font-size: clamp(1.7rem,3.2vw,2.7rem); }
.scene .copy p { margin-top: 14px; font-size: 1rem; line-height: 1.64; color: #d3e2e6; }
.scene .copyB { opacity: 0; pointer-events: none; }
.scene .copyA, .scene .copyB { position: absolute; inset: auto 0 0 0; }
/* Static fallback frame: the house, lit, with the closing line. */
.scene .after { opacity: 1; }
.scene .copyA { opacity: 0; }
.scene .copyB { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .scene { height: 230svh; view-timeline: --scene block; }
    .scene .stick { position: sticky; top: 0; }
    /* Start states restored, then scrubbed by the scene's own timeline. */
    .scene .after { opacity: 0; animation: sceneFade linear both; animation-timeline: --scene;
      animation-range: contain 18% contain 78%; }
    .scene .before { animation: scenePush linear both; animation-timeline: --scene;
      animation-range: contain 0% contain 80%; }
    .scene .copyA { opacity: 1; animation: sceneOut linear both; animation-timeline: --scene;
      animation-range: contain 18% contain 46%; }
    .scene .copyB { opacity: 0; animation: sceneIn linear both; animation-timeline: --scene;
      animation-range: contain 56% contain 90%; }
  }
}
@keyframes sceneFade { to { opacity: 1; } }
@keyframes scenePush { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes sceneOut { to { opacity: 0; transform: translateY(-14px); } }
@keyframes sceneIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---- Next chapter: the story hands you to the following page ---------- */
.next { display: block; position: relative; overflow: clip; background: var(--deep); text-decoration: none;
  padding-block: clamp(52px, 6.5vw, 92px); padding-inline: clamp(20px,5vw,60px); }
.next .kicker { grid-column: 1/-1; font: 600 10px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: #f0c3cb; }
.next .line { grid-column: 1/-1; margin-top: 12px; font-family: var(--serif); font-weight: 400; font-variation-settings: 'opsz' 72;
  font-size: clamp(1.7rem, 3.4vw, 2.9rem); line-height: 1.12; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
/* A drawn arrow: a hairline that extends on hover, tipped with a chevron.
   The same gesture as the band's underline, so the two read as one motion. */
.next .line .ar { position: relative; display: inline-block; width: 86px; height: .55em; margin-left: 10px; }
.next .line .ar::before { content: ''; position: absolute; left: 0; right: 1px; top: 50%; height: 1.5px; background: #e2a3ae;
  transform: scaleX(.63); transform-origin: left; }
.next .line .ar::after { content: ''; position: absolute; right: 1px; top: 50%; width: 11px; height: 11px;
  border-top: 1.5px solid #e2a3ae; border-right: 1.5px solid #e2a3ae; border-radius: 0;
  transform: translateX(-32px) translateY(-50%) rotate(45deg); transform-origin: center; margin-top: .75px; }
.next .where { grid-column: 1/-1; margin-top: 10px; font: 500 .95rem/1.5 var(--sans); color: #b9ced3; }
.next::after { content: ''; position: absolute; height: 1px; background: rgba(255,255,255,.22);
  left: clamp(20px,5vw,60px); right: clamp(20px,5vw,60px); bottom: clamp(28px,3.5vw,44px);
  transform: scaleX(0); transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  .next .line .ar::before, .next .line .ar::after { transition: transform 450ms cubic-bezier(.2,.7,.2,1); }
  .next::after { transition: transform 600ms cubic-bezier(.2,.7,.2,1); }
  .next:hover .line .ar::before, .next:focus-visible .line .ar::before { transform: scaleX(1); }
  .next:hover .line .ar::after, .next:focus-visible .line .ar::after { transform: translateX(0) translateY(-50%) rotate(45deg); }
  .next:hover::after, .next:focus-visible::after { transform: scaleX(1); }
  /* Cross-document view transition: the old page lifts away as the new one
     rises to meet it. Browsers without support just navigate. */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out 300ms cubic-bezier(.4,0,.2,1) both; }
  ::view-transition-new(root) { animation: vt-in 480ms 90ms cubic-bezier(.2,.7,.2,1) both; }
}
@keyframes vt-out { to { opacity: 0; transform: translateY(-24px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(28px); } }