/* =========================================================
   Amanda Nigri — Marketing Portfolio
   Palette: #888888 grey · #F0E0EB pastel pink · #FFFFFF off-white
   ========================================================= */

:root{
  --grey:      #888888;
  --grey-dk:   #5a5a5a;
  --grey-ink:  #3f3d3e;
  --pink:      #f0e0eb;
  --pink-dp:   #e3c8d8;
  --pink-lt:   #f9f1f5;
  --white:     #ffffff;
  --paper:     #fbf8f6;
  --paper-warm:#f5efe9;
  /* sampled from the pink border of the hero artwork */
  --nav-bg:    #f2e2ee;

  --serif:  "EB Garamond", "Times New Roman", Times, serif;
  --script: "Italianno", "Snell Roundhand", cursive;
  --hand:   "Caveat", "Bradley Hand", cursive;

  --nav-h: 62px;
  --maxw: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(1rem, .95rem + .25vw, 1.125rem);
  line-height:1.72;
  color:var(--grey-ink);
  background:var(--paper);
  overflow-x:hidden;
  /* subtle paper grain */
  background-image:
    radial-gradient(circle at 20% 12%, rgba(240,224,235,.55), transparent 45%),
    radial-gradient(circle at 82% 78%, rgba(240,224,235,.42), transparent 48%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
  background-attachment:fixed, fixed, fixed;
}

img{ max-width:100%; height:auto; display:block; }

::selection{ background:var(--pink-dp); color:var(--grey-ink); }

.script{
  font-family:var(--script);
  font-size:1.65em;
  line-height:0;
  color:var(--grey);
  font-weight:400;
  padding-right:.02em;
}

.handwritten{
  font-family:var(--hand);
  font-size:1.25em;
  color:var(--grey);
  letter-spacing:.01em;
}

/* ---------- reveal animation ---------- */
.reveal{
  opacity:0;
  transform:translateY(26px) rotate(-.4deg);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
  will-change:opacity, transform;
}
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.10s; }
.reveal[data-delay="2"]{ transition-delay:.20s; }
.reveal[data-delay="3"]{ transition-delay:.30s; }

/* =========================================================
   NAV / TRACKLIST
   ========================================================= */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  height:var(--nav-h);
  display:flex; align-items:center; gap:1.5rem;
  padding:0 clamp(1rem,4vw,2.5rem);
  /* always visible — sampled from the pink border of the hero artwork */
  background:var(--nav-bg);
  border-bottom:1px solid transparent;
  transition:box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.nav.is-scrolled{
  border-bottom-color:rgba(136,136,136,.18);
  box-shadow:0 6px 26px -18px rgba(63,61,62,.5);
}

.nav__mark{
  display:flex; align-items:baseline; gap:.06em;
  text-decoration:none; color:var(--grey-ink);
  font-size:1.35rem; letter-spacing:.06em;
  flex-shrink:0;
}
.nav__mark .script{ font-size:2.1em; color:var(--grey-dk); }
.nav__mark-rest{ font-family:var(--serif); }

.nav__list{
  display:flex; align-items:center; gap:clamp(.9rem,2.2vw,2rem);
  margin-left:auto;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.16em;
}
.nav__list a{
  position:relative;
  color:var(--grey);
  text-decoration:none;
  padding:.4rem 0;
  white-space:nowrap;
  transition:color .3s var(--ease);
}
.nav__list a em{
  font-style:normal;
  font-size:.72em;
  opacity:.5;
  margin-right:.4em;
  letter-spacing:.05em;
}
.nav__list a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1.5px; background:var(--grey-dk);
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav__list a:hover{ color:var(--grey-ink); }
.nav__list a:hover::after,
.nav__list a.is-active::after{ transform:scaleX(1); }
.nav__list a.is-active{ color:var(--grey-ink); }

/* ---------- player ---------- */
.player{
  flex-shrink:0;
  display:flex; align-items:center; gap:.5rem;
  height:36px; padding:0 .85rem;
  border:1px solid rgba(136,136,136,.4);
  border-radius:999px;
  background:var(--white);
  color:var(--grey-dk);
  cursor:pointer;
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .2s var(--ease);
}
.player:hover{ border-color:var(--grey); transform:translateY(-1px); }
.player:active{ transform:translateY(0); }
/* ---------- now playing ----------
   The title is longer than the room for it, so it scrolls. It stays in
   the button whether or not the track is playing — the label switches
   between naming what is playing and what is queued up. */
.player__now{
  display:flex;
  align-items:baseline; gap:.4em;
  min-width:0;
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--grey);
}
/* "Play:" is narrower than "Playing:", so the button would jump 24px on
   every toggle. The wider word is reserved as an invisible sizer and the
   visible label is laid over it — the box stays put either way. */
.player__label{
  flex-shrink:0;
  position:relative;
  opacity:.75;
  visibility:hidden;
}
.player__label::before{
  content:"Playing:";
  visibility:visible;
  position:absolute; left:0; top:0;
  white-space:nowrap;
}
.player:not([aria-pressed="true"]) .player__label::before{ content:"Play:"; }

/* the viewport: fixed width, clips whatever overflows */
.marquee{
  position:relative;
  display:inline-block;
  width:9em;
  overflow:hidden;
  /* dissolve both edges so the text doesn't pop in and out at a hard
     line — the mask is the only thing marking where the box ends */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 1.2em, #000 calc(100% - 1.2em), transparent);
  mask-image:linear-gradient(90deg, transparent, #000 1.2em, #000 calc(100% - 1.2em), transparent);
}
/* the track: this is what moves, and it is as wide as its content */
.marquee__track{
  display:flex;
  width:max-content;
  animation:marquee 11s linear infinite;
}
/* Two copies sit side by side, so translating the track by exactly half
   its width puts the second copy where the first began — a seamless loop
   rather than a scroll-and-reset. */
.marquee__text{
  flex:0 0 auto;
  padding-right:2.5em;
  white-space:nowrap;
}
@keyframes marquee{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}
.player:hover .marquee__track{ animation-play-state:paused; }

@media (prefers-reduced-motion:reduce){
  /* no scroll: show the title still, trimmed with an ellipsis */
  .marquee{ -webkit-mask-image:none; mask-image:none; }
  .marquee__track{ animation:none !important; }
  .marquee__text{
    overflow:hidden; text-overflow:ellipsis;
    max-width:9em; padding-right:0;
  }
  .marquee__text + .marquee__text{ display:none; }
}

.player__icon{ display:block; width:15px; height:15px; }
.player__icon svg{ width:100%; height:100%; fill:currentColor; }
.player__pause{ display:none; }
.player[aria-pressed="true"] .player__play{ display:none; }
.player[aria-pressed="true"] .player__pause{ display:block; }

.player__bars{ display:flex; align-items:flex-end; gap:2px; height:14px; }
.player__bars i{
  width:2px; height:4px; background:var(--grey);
  border-radius:1px;
  transition:height .2s var(--ease);
}
.player[aria-pressed="true"] .player__bars i{
  animation:eq .9s ease-in-out infinite;
  background:var(--grey-dk);
}
.player[aria-pressed="true"] .player__bars i:nth-child(2){ animation-delay:.15s; }
.player[aria-pressed="true"] .player__bars i:nth-child(3){ animation-delay:.3s; }
.player[aria-pressed="true"] .player__bars i:nth-child(4){ animation-delay:.45s; }
@keyframes eq{ 0%,100%{ height:4px; } 50%{ height:13px; } }

/* ---------- mobile toggle ---------- */
.nav__toggle{
  display:none;
  position:fixed; top:12px; right:14px; z-index:70;
  width:40px; height:38px;
  border:1px solid rgba(136,136,136,.4); border-radius:8px;
  background:var(--white);
  cursor:pointer;
  padding:0;
}
.nav__toggle span{
  display:block; width:17px; height:1.5px;
  margin:3.5px auto; background:var(--grey-dk);
  transition:transform .35s var(--ease), opacity .25s var(--ease);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

/* =========================================================
   TAPE / DECORATION
   ========================================================= */
.tape{
  position:absolute; z-index:3;
  width:88px; height:26px;
  background:linear-gradient(102deg, rgba(240,224,235,.9), rgba(249,241,245,.78));
  border-left:1px dashed rgba(136,136,136,.28);
  border-right:1px dashed rgba(136,136,136,.28);
  box-shadow:0 1px 5px rgba(63,61,62,.10);
  pointer-events:none;
}
.tape--tl{ top:-13px; left:-16px; transform:rotate(-24deg); }
.tape--br{ bottom:-11px; right:-14px; transform:rotate(-16deg); }

/* =========================================================
   HERO — full-bleed cover artwork
   ---------------------------------------------------------
   The artwork is 16:9 and composed edge-to-edge: the name sits
   hard left, Amanda hard right. So we only crop it on wide
   viewports (where cropping costs nothing vertically) and fall
   back to a contained layout on narrow ones, where a cover-crop
   would eat the name or the portrait.
   ========================================================= */
.hero{
  position:relative;
  width:100%;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--pink);
  isolation:isolate;
}

.hero__media{
  position:absolute; inset:0;
  z-index:0;
  animation:heroIn 1.5s var(--ease) both;
}
.hero__img{
  width:100%; height:100%;
  object-fit:cover;
  /* keep Amanda (right) and the name (left) both in frame for as
     long as possible; bias slightly up so the bottom scrapbook
     row is what gets trimmed first */
  object-position:center 38%;
}

@keyframes heroIn{
  from{ opacity:0; transform:scale(1.045); }
  to  { opacity:1; transform:scale(1); }
}

/* Legibility scrim + a soft fade into the page below.
   The bottom of the artwork is dense collage (passport, mic,
   cassettes), so the scrim has to be opaque enough there to
   carry text — it doubles as the transition into the page. */
.hero__overlay{
  position:absolute; inset:0; z-index:1;
  pointer-events:none;
  background:
    linear-gradient(to top,
      var(--paper) 0%,
      rgba(251,248,246,.95) 7%,
      rgba(251,248,246,.72) 13%,
      rgba(251,248,246,.28) 20%,
      transparent 28%);
}

.hero__meta{
  position:relative; z-index:2;
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding:0 clamp(1rem,5vw,3rem) clamp(.9rem,2vh,1.4rem);
  display:flex; flex-direction:column; gap:.85rem;
  text-align:center;
  align-items:center;
  animation:settleIn 1.15s var(--ease) .5s both;
}
.hero__eyebrow{
  /* sits last in the hero, hard against the bottom edge */
  margin:auto 0 0;
  padding-top:.35rem;
  font-size:clamp(.66rem,1.4vw,.75rem);
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--grey-ink);
}
.hero__tag{
  margin:0;
  font-family:var(--hand);
  font-size:clamp(1.45rem,3.4vw,2.15rem);
  line-height:1.3;
  color:var(--grey-ink);
}

@keyframes settleIn{
  from{ opacity:0; transform:translateY(24px); }
  to  { opacity:1; transform:translateY(0); }
}


/* ---------------------------------------------------------
   Narrow / portrait viewports: stop cropping. Show the whole
   artwork against a matched pink field so nothing is lost.
   --------------------------------------------------------- */
@media (max-aspect-ratio:1/1){
  /* Stack instead of crop: artwork on top at its natural ratio,
     text beneath it. Nothing gets cut off the sides. */
  .hero{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:stretch;
    gap:clamp(1.5rem,4vh,2.5rem);
    padding:calc(var(--nav-h) + clamp(2rem,7vh,4rem)) 0 clamp(.9rem,2vh,1.4rem);
    background:linear-gradient(180deg, var(--pink) 0%, var(--pink) 55%, var(--paper) 100%);
  }

  .hero__media{
    position:relative;
    inset:auto;
    width:100%;
    flex:0 0 auto;
  }
  .hero__img{
    width:100%;
    height:auto;
    max-height:58svh;
    object-fit:contain;
    object-position:center;
  }

  /* the stacked layout needs no scrim — text sits on clean ground */
  .hero__overlay{ display:none; }

  .hero__meta{
    position:relative;
    /* absorb the leftover height so the eyebrow still lands at the
       very bottom of the hero, as it does on wide screens */
    flex:1;
    justify-content:flex-end;
    padding:0 clamp(1.25rem,6vw,2.5rem);
    gap:.75rem;
  }
}

/* =========================================================
   INTERLUDE / TRACKLIST
   ========================================================= */
.interlude{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(4rem,11vh,8rem) clamp(1rem,5vw,3rem);
  border-top:1px solid rgba(136,136,136,.16);
  border-bottom:1px solid rgba(136,136,136,.16);
  background:var(--paper);
}

/* background video — always covers the whole section.
   Inset is negative so the 1px top/bottom borders don't leave a seam. */
.interlude__bg{
  position:absolute; inset:-1px;
  z-index:0;
  width:calc(100% + 2px); height:calc(100% + 2px);
  object-fit:cover;
  pointer-events:none;
}
/* white wash to knock the video's saturation back */
.interlude__dither{
  position:absolute; inset:-1px;
  z-index:1;
  background:rgba(255,255,255,.9);
  pointer-events:none;
}

.interlude__inner{
  position:relative; z-index:2;
  max-width:760px; margin-inline:auto; text-align:center;
}
.interlude__kicker{
  margin:0 0 .5rem;
  font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; color:var(--grey);
}
.interlude__title{
  margin:0 0 1rem;
  font-size:clamp(2rem,5vw,3rem);
  font-weight:400; letter-spacing:.01em;
}
.interlude__note{
  margin:0 auto 2.5rem;
  max-width:52ch;
  color:var(--grey-dk);
}
.interlude__songs{
  list-style:none; margin:0; padding:0;
  text-align:left;
  border-top:1px solid rgba(136,136,136,.22);
}
.interlude__songs li{ border-bottom:1px solid rgba(136,136,136,.22); }
.interlude__songs a{
  display:flex; align-items:baseline; gap:1.25rem;
  padding:.95rem .5rem;
  text-decoration:none; color:var(--grey-ink);
  transition:background .3s var(--ease), padding-left .3s var(--ease);
}
.interlude__songs a:hover{ background:rgba(240,224,235,.5); padding-left:1.1rem; }
.interlude__part{
  flex:0 0 5.5rem;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--grey);
}
.interlude__what{ font-size:1.05rem; }

/* =========================================================
   SECTION SHELL
   ========================================================= */
.section{
  /* keep the vertical rhythm in one place so the scroll anchor can
     cancel it out below */
  --sec-pad-y:clamp(4.5rem,12vh,9rem);

  position:relative;
  max-width:var(--maxw);
  margin-inline:auto;
  padding:var(--sec-pad-y) clamp(1rem,5vw,3rem);

  /* Anchoring on the box edge would park the section's whole top
     padding under the nav as dead space. Pull the target up by that
     padding (less a small breathing gap) so the heading lands just
     below the bar instead. */
  scroll-margin-top:calc(var(--nav-h) + 1.25rem - var(--sec-pad-y));
}
.section__head{ margin-bottom:clamp(2.25rem,5vh,3.5rem); }

.part{
  margin:0 0 .35rem;
  font-size:.7rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--grey);
}
.part::before{
  content:"❋"; margin-right:.65em; opacity:.55; letter-spacing:0;
}
.part--loud{ color:var(--grey-dk); }

.section__title{
  margin:0;
  font-size:clamp(2.1rem,5.5vw,3.4rem);
  font-weight:400; line-height:1.15; letter-spacing:.005em;
}
.section__sub{
  margin:.85rem 0 0;
  max-width:56ch;
  color:var(--grey-dk);
}

.lede{ font-size:1.1em; }

/* =========================================================
   POLAROID / SNAPSHOT
   ========================================================= */
.polaroid{
  position:relative;
  margin:0;
  background:var(--white);
  /* the deep lower margin is the caption well; frames without a
     caption get an even border instead of a band of empty white */
  padding:.7rem .7rem 2.9rem;
  box-shadow:
    0 1px 3px rgba(63,61,62,.07),
    0 14px 34px -20px rgba(63,61,62,.45);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.polaroid:not(:has(figcaption)){ padding-bottom:.9rem; }
.polaroid img{ width:100%; object-fit:cover; }
.polaroid figcaption{
  position:absolute; left:0; right:0; bottom:.85rem;
  text-align:center;
  font-family:var(--hand);
  font-size:1.02rem;
  color:var(--grey);
}
.polaroid--lg img{ aspect-ratio:3/4; }

/* =========================================================
   ABOUT
   ========================================================= */
/* =========================================================
   ABOUT — scrapbook decoration
   ---------------------------------------------------------
   Three transparent PNG layers. The stamps tuck UNDER the
   camera/film strip; the passports and matcha sit in the
   margins. All are decorative and click-through.
   ========================================================= */
.section--about{ position:relative; }

.deco{
  position:absolute;
  pointer-events:none;
  user-select:none;
  z-index:0;
}
/* top right, clear of the fixed nav — dropped by ~2 lines of body copy */
.deco--passports{
  right:clamp(-1rem,0vw,1.5rem);
  top:calc(clamp(1rem,3vh,3rem) + 3.6rem);
  width:clamp(230px,30vw,400px);
}
/* bottom right, under the closing line */
.deco--matcha{
  right:clamp(-1.5rem,-1vw,1rem);
  bottom:clamp(0rem,2vh,2.5rem);
  width:clamp(220px,29vw,395px);
}

.about__grid{
  position:relative;
  z-index:1;                /* content sits above the stamps */
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}

.about__text p{ margin:0 0 1.15rem; }
.about__text strong{ font-weight:600; color:var(--grey-ink); }
.about__sign{ margin-top:1.75rem; }

/* =========================================================
   FILM STRIP + CAMERA VIEWER
   ---------------------------------------------------------
   The camera sits horizontally. Its transparent screen cutout,
   measured against the 900x599 art, is:
       left 4.67%  top 26.04%  width 64.00%  height 69.12%
   Those numbers drive --ap-* below.

   A VERTICAL film strip runs through that window: it is far
   taller than the camera, scrolls slowly, and its ends are
   dissolved by an alpha gradient (mask-image) so the overflow
   fades out instead of stopping at a hard edge.
   ========================================================= */
.about__viewer{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  transform:rotate(-1.2deg);
}

.viewer{
  --ap-left:4.67%;
  --ap-top:26.04%;
  --ap-width:64.00%;
  --ap-height:69.12%;
  /* how far the film runs past the camera, top and bottom */
  --spill:clamp(4.5rem,13vh,8.5rem);

  position:relative;
  width:min(100%, 430px);
  padding-block:var(--spill);
}

/* ---- masked track: clips + fades the film's long overflow ---- */
.viewer__mask{
  /* wider than the aperture on each side, so the sprocket edges pass
     under the camera body instead of showing beside it */
  --bleed:3.2%;

  position:absolute;
  z-index:1;
  left:calc(var(--ap-left) - var(--bleed));
  width:calc(var(--ap-width) + (var(--bleed) * 2));
  top:0;
  bottom:0;
  overflow:hidden;

  /* alpha gradient: opaque through the camera window, fading to
     nothing at both far ends of the spill */
  -webkit-mask-image:linear-gradient(to bottom,
      transparent 0%,
      rgba(0,0,0,.55) 8%,
      #000 26%,
      #000 74%,
      rgba(0,0,0,.55) 92%,
      transparent 100%);
  mask-image:linear-gradient(to bottom,
      transparent 0%,
      rgba(0,0,0,.55) 8%,
      #000 26%,
      #000 74%,
      rgba(0,0,0,.55) 92%,
      transparent 100%);
}

/* ---- the film itself ---- */
.viewer__rail{
  position:relative;
  display:flex; flex-direction:column;
  gap:7px;
  padding:9px 0;
  background:
    repeating-linear-gradient(to bottom,
      transparent 0 10px,
      rgba(251,248,246,.9) 10px 19px,
      transparent 19px 29px),
    linear-gradient(180deg,#4a4446,#3a3536);
  background-size:8px 29px, 100% 100%;
  background-position:left 4px top, 0 0;
  background-repeat:repeat-y, no-repeat;
  box-shadow:0 12px 34px -18px rgba(63,61,62,.65);
  animation:filmRoll 48s linear infinite;
}
/* mirrored sprocket column on the right edge */
.viewer__rail::after{
  content:"";
  position:absolute; top:0; bottom:0; right:4px;
  width:8px;
  background:repeating-linear-gradient(to bottom,
    transparent 0 10px,
    rgba(251,248,246,.9) 10px 19px,
    transparent 19px 29px);
  pointer-events:none;
}

/* The rail holds two identical sets of 6 frames, so translating it
   by exactly half its height loops with no visible seam. */
@keyframes filmRoll{
  from{ transform:translateY(0); }
  to  { transform:translateY(-50%); }
}
.viewer:hover .viewer__rail{ animation-play-state:paused; }

.neg{
  position:relative;
  /* clears the sprocket columns so photos fill the window */
  margin:0 15px;
  aspect-ratio:1;
  flex:0 0 auto;
  overflow:hidden;
  background:#2e2a2b;
}
.neg img{
  width:100%; height:100%;
  object-fit:cover;
  /* negatives read cooler and slightly flatter than the page */
  filter:saturate(.9) contrast(1.03);
}

/* ---- the camera, sitting on top of the film ---- */
.viewer__frame{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  height:auto;
  pointer-events:none;
  filter:drop-shadow(0 18px 34px rgba(63,61,62,.42));
}

.viewer__caption{
  margin:1.1rem 0 0;
  text-align:center;
  color:var(--grey);
}

/* =========================================================
   SKILLS
   ---------------------------------------------------------
   A full-bleed grey band, same construction as the Chorus: the
   section drops its own measure so the colour reaches both edges,
   and each direct child re-applies it so the content stays on the
   page's column.
   ========================================================= */
.section--skills{
  --ink:      #ffffff;   /* primary text on grey */
  --ink-soft: #f2f2f2;   /* body copy */
  --ink-dim:  #e2e2e2;   /* labels, captions */
  --line:     rgba(255,255,255,.28);

  max-width:none;
  padding-inline:0;
  background:#919191;
  color:var(--ink-soft);
  isolation:isolate;
}
.section--skills > *{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:clamp(1rem,5vw,3rem);
}

/* the grey is dark enough that the page's greys would sink into it */
.section--skills .part{ color:var(--ink-dim); }
.section--skills .section__title{ color:var(--ink); }
.section--skills .script{ color:var(--ink); }
.section--skills .section__sub{ color:var(--ink-soft); }
.section--skills .pl__title{ color:var(--ink); }
.section--skills .pl__owner{ color:var(--ink-soft); }
.section--skills .pl__meta{ color:var(--ink-dim); }
.section--skills .pl__sort{ color:var(--ink-dim); }
.section--skills .skills__note{ color:var(--ink); }

/* The primary control was near-black for the pale page; on grey it loses
   its contrast, so it flips to white and stays the brightest thing here. */
.section--skills .pl__btn--play{
  background:var(--white);
  border-color:var(--white);
  color:var(--grey-ink);
}
.section--skills .pl__btn--play:hover{
  background:var(--pink-lt);
  border-color:var(--pink-lt);
  color:var(--grey-ink);
}

/* Playlist layout — album panel on the left, tracklist on the right.
   Structure borrowed from a music-app playlist page. The track icons are
   the real brand logos, so this is the one place colour enters the page. */
.pl{
  display:grid;
  grid-template-columns:minmax(230px,300px) minmax(0,1fr);
  gap:clamp(1.75rem,4vw,3.5rem);
  align-items:start;
}

/* ---------- album panel ---------- */
.pl__album{
  position:sticky;
  top:calc(var(--nav-h) + 2rem);
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.pl__art{
  width:100%;
  background:var(--white);
  padding:.55rem;
  border-radius:3px;
  box-shadow:
    0 1px 3px rgba(63,61,62,.07),
    0 16px 38px -22px rgba(63,61,62,.5);
  transform:rotate(-1.2deg);
  transition:transform .5s var(--ease);
}
.pl__art:hover{ transform:rotate(0) scale(1.015); }
.pl__art img{ width:100%; border-radius:2px; }

.pl__title{
  margin:1.5rem 0 .75rem;
  font-size:clamp(1.35rem,2.6vw,1.7rem);
  font-weight:500;
  line-height:1.25;
}
.pl__owner{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  margin:0 0 .75rem;
  font-size:.92rem;
  color:var(--grey-dk);
}
.pl__avatar{
  display:grid; place-items:center;
  width:26px; height:26px;
  border-radius:50%;
  background:var(--pink-dp);
  color:var(--grey-ink);
  font-family:var(--script);
  font-size:1.5rem;
  line-height:1;
  padding-top:.32em;
}
.pl__meta{
  margin:0 0 1.4rem;
  font-size:.76rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--grey);
  line-height:1.85;
}

.pl__controls{
  display:flex; align-items:center; justify-content:center; gap:.85rem;
}
.pl__btn{
  display:grid; place-items:center;
  width:40px; height:40px;
  border:1px solid rgba(136,136,136,.35);
  border-radius:50%;
  background:var(--white);
  color:var(--grey-dk);
  cursor:pointer;
  padding:0;
  text-decoration:none;
  transition:background .3s var(--ease), border-color .3s var(--ease),
             transform .25s var(--ease), color .3s var(--ease);
}
.pl__btn svg{ width:17px; height:17px; fill:currentColor; }
.pl__btn:hover{
  background:var(--pink-lt);
  border-color:var(--pink-dp);
  color:var(--grey-ink);
  transform:translateY(-2px);
}
.pl__btn--play{
  width:56px; height:56px;
  background:var(--grey-ink);
  border-color:var(--grey-ink);
  color:var(--white);
}
.pl__btn--play svg{ width:24px; height:24px; }
.pl__btn--play:hover{
  background:var(--grey-dk);
  border-color:var(--grey-dk);
  color:var(--white);
}
.pl__ico-pause{ display:none; }
.pl__btn--play[aria-pressed="true"] .pl__ico-play{ display:none; }
.pl__btn--play[aria-pressed="true"] .pl__ico-pause{ display:block; }

/* ---------- tracklist ---------- */
.pl__sort{
  display:flex; align-items:center; gap:.55rem;
  margin:0 0 1rem;
  padding-left:.35rem;
  font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--grey);
}
.pl__sort svg{
  width:17px; height:17px; fill:none;
  stroke:currentColor; stroke-width:1.6; stroke-linecap:round;
}

.pl__list{
  list-style:none; margin:0; padding:0;
  /* two columns, as requested — items flow top-to-bottom per column */
  columns:2;
  column-gap:clamp(1rem,2.5vw,2rem);
}

/* Each row is a solid light chip on the grey band — the columns leave a
   gap between rows, so the fill needs its own margin to not run together. */
.trk{
  display:flex; align-items:center; gap:.85rem;
  padding:.62rem .7rem;
  margin-bottom:.4rem;
  border-radius:10px;
  background:#e2e2e2;
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.trk:hover{ background:var(--pink-lt); transform:translateY(-1px); }

/* Full-colour brand marks, so the tile stays a quiet white chip and lets
   the logos carry the colour — no border tint fighting them on hover. */
.trk__ico{
  flex-shrink:0;
  display:grid; place-items:center;
  width:38px; height:38px;
  padding:5px;
  border-radius:3px;
  background:var(--white);
  border:1px solid rgba(136,136,136,.22);
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.trk__ico img{
  width:100%; height:100%;
  object-fit:contain;
}
.trk:hover .trk__ico{
  border-color:var(--pink-dp);
  transform:translateY(-1px);
}

.trk__body{
  min-width:0;
  display:flex; flex-direction:column; gap:.1rem;
  flex:1;
}
.trk__name{
  font-size:.97rem;
  line-height:1.3;
  color:var(--grey-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.trk__sub{
  font-size:.78rem;
  line-height:1.35;
  color:var(--grey);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.trk__time{
  flex-shrink:0;
  font-size:.8rem;
  color:var(--grey);
  font-variant-numeric:tabular-nums;
}

.skills__note{ margin:2.75rem 0 0; text-align:center; }
.skills__note em{ font-style:italic; }

/* =========================================================
   CHORUS — the loud section
   ---------------------------------------------------------
   The only dark band on a pink page. Duda's campaign brand is
   red-and-black, so the ground is a warm charcoal and every bit
   of colour comes from the artwork itself — there is deliberately
   no red painted anywhere in this stylesheet. Tokens are scoped
   to the section so the shared components (.tags, .cs-list,
   .stats, .phone) invert without being forked.
   ========================================================= */
.section--chorus{
  --ink:      #efeaec;   /* primary text on dark */
  --ink-soft: #b9b1b5;   /* secondary */
  --ink-dim:  #8d8589;   /* labels, captions */
  --line:     rgba(239,234,236,.16);
  --card:     rgba(255,255,255,.045);

  max-width:none;
  padding-inline:0;
  /* warm charcoal — brown-grey rather than black, so it reads as a
     deepened version of --grey-ink instead of a foreign colour */
  background:linear-gradient(180deg, #423d3d 0%, #363233 16%, #302d2e 55%, #3a3637 100%);
  color:var(--ink);
  isolation:isolate;
}
.section--chorus::before{ content:none; }

/* The band butts straight against the paper page. A soft wash at each
   end would only muddy the charcoal, so the edges stay crisp and the
   section reads as a deliberate cut — like a record changing side. */

/* every inner block shares the page's measure */
.section--chorus > *{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:clamp(1rem,5vw,3rem);
}

.section--chorus .part{ color:var(--ink-dim); }
.section--chorus .part--loud{ color:var(--ink-soft); }
.section--chorus .section__title{ color:var(--ink); }
.section--chorus .script{ color:var(--ink-soft); }
.section--chorus .cs-label{ color:var(--ink-dim); }
.section--chorus .cs-list li::marker{ color:var(--ink-dim); }

/* ---------- opening band ---------- */
.chorus__open{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
.chorus__portrait{
  margin:0;
  order:2;                       /* portrait right, copy left */
  transform:rotate(1.4deg);
}
.chorus__portrait img{
  width:100%;
  border-radius:2px;
  box-shadow:0 24px 60px -28px rgba(0,0,0,.85);
}
.chorus__hook{ order:1; min-width:0; }

.chorus__lead{ max-width:52ch; }
.chorus__project{
  margin:0 0 .5rem;
  font-size:clamp(1.3rem,2.8vw,1.85rem);
  font-weight:500; line-height:1.3;
  color:var(--ink);
}
.chorus__role{
  margin:0 0 1.15rem;
  font-size:.78rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-dim);
}
.chorus__blurb{ margin:0; font-size:1.08em; color:var(--ink-soft); }

/* ---------- stats ---------- */
.stats{
  display:grid;
  /* three across, always — an orphaned third stat on its own row
     reads as a mistake rather than a rhythm */
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.75rem,2vw,1.75rem);
  margin:clamp(2.25rem,5vh,3.5rem) 0 0;
  padding:clamp(1.5rem,3vw,2.25rem) 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.stat{ text-align:center; }
.stat__num{
  display:block;
  font-size:clamp(2.4rem,6vw,3.6rem);
  line-height:1;
  color:var(--ink);
  letter-spacing:-.01em;
}
.stat__num--text{
  font-size:clamp(1.35rem,3vw,1.9rem);
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding-top:.55rem;
}
.stat__arrow{ color:var(--ink-dim); font-size:.85em; }
.stat__label{
  display:block; margin-top:.6rem;
  /* tighter tracking than the light-ground default: three stats share
     one row here, and the long middle label wraps otherwise */
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-dim); line-height:1.65;
  text-wrap:balance;
}
.stat__label em{
  font-style:normal; text-transform:none; letter-spacing:.02em;
  font-size:1.05em; opacity:.85;
}

/* =========================================================
   ACTS — the four movements of the case study
   ========================================================= */
.act{ margin-top:clamp(3.5rem,9vh,6.5rem); }

.act__head{
  display:flex; align-items:baseline; gap:1rem;
  margin-bottom:clamp(1.5rem,3.5vh,2.25rem);
  padding-bottom:.75rem;
  border-bottom:1px solid var(--line);
}
.act__num{
  margin:0;
  font-size:.72rem; letter-spacing:.28em;
  color:var(--ink-dim);
  font-variant-numeric:tabular-nums;
}
.act__title{
  margin:0;
  font-size:clamp(1.45rem,3.4vw,2.1rem);
  font-weight:400; line-height:1.2;
  color:var(--ink);
}

/* ---------- collapsible acts (accordion) ----------
   The four acts load closed, showing only their heads. One opens at a
   time; clicking an open title closes it again. The panel animates via
   the 0fr→1fr grid-row trick, so no heights are measured in JS. */
.act--collapsible{
  margin-top:clamp(1.75rem,4vh,2.5rem);
  scroll-margin-top:calc(var(--nav-h) + 1rem);
}
.act--collapsible .act__head{ margin-bottom:0; }

/* the title becomes a button but keeps the h3's voice */
.act__toggle{
  display:inline-flex; align-items:center; gap:.6em;
  font:inherit; color:inherit; letter-spacing:inherit;
  background:none; border:0; padding:0;
  text-align:left;
  cursor:pointer;
}
.act__toggle:focus-visible{
  outline:1.5px solid var(--ink-soft);
  outline-offset:4px;
}
/* the caret — points down when closed, up when open */
.act__toggle::after{
  content:"";
  flex:0 0 auto;
  width:.42em; height:.42em;
  margin-top:-.25em;
  border-right:1.5px solid var(--ink-dim);
  border-bottom:1.5px solid var(--ink-dim);
  transform:rotate(45deg);
  transition:transform .45s var(--ease), border-color .3s var(--ease);
}
.act__toggle:hover::after{ border-color:var(--ink); }
.act--open .act__toggle::after{
  transform:rotate(225deg);
  margin-top:.25em;
}

.act__panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .55s var(--ease);
}
.act__panel-inner{
  overflow:hidden;
  min-width:0;
  /* restores the breathing room the head gave up while collapsed */
  padding-top:clamp(1.5rem,3.5vh,2.25rem);
}
.act--open .act__panel{ grid-template-rows:1fr; }

@media (prefers-reduced-motion:reduce){
  .act__panel,
  .act__toggle::after{ transition:none; }
}

.act__body{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(1.75rem,4vw,3.25rem);
  align-items:start;
}
.act__text p{ margin:0 0 1.05rem; color:var(--ink-soft); }
.act__text > :last-child{ margin-bottom:0; }
.act__text .cs-list{ color:var(--ink-soft); }

/* Act 1 pairs copy with a landscape laptop, so the media column needs
   the wider track — the reverse of Act 2's portrait carousel. The laptop
   is much shorter than the copy beside it, so it centres against it
   instead of hanging off the top. */
.act__body--split{
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  align-items:center;
}
/* three columns: two stacked frames, the copy, two stacked frames.
   Side tracks are 0.8fr — 80% of their original 1fr — so the frames
   read smaller and the middle column absorbs the freed width. */
.act__body--triptych{
  grid-template-columns:minmax(0,.8fr) minmax(0,1.75fr) minmax(0,.8fr);
  align-items:start;
}
/* the copy centres against the taller image columns beside it */
.act__body--triptych .act__text{ align-self:center; }
.trip__col{
  display:flex; flex-direction:column;
  gap:clamp(1.1rem,2.5vw,1.75rem);
  min-width:0;
}
.trip__item{ margin:0; min-width:0; }
.trip__item img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:contain;
  /* the letterbox reads as a mat around the artwork, not a gap */
  background:rgba(0,0,0,.22);
  border-radius:2px;
  box-shadow:0 18px 44px -24px rgba(0,0,0,.9);
  transition:transform .5s var(--ease);
}
.trip__item:hover img{ transform:translateY(-4px); }
.trip__item figcaption{
  margin:.6rem 0 0;
  font-family:var(--hand);
  font-size:.98rem;
  color:var(--ink-dim);
  text-align:center;
}

.act__intro{
  max-width:62ch;
  margin-bottom:clamp(1.75rem,4vh,2.5rem);
}
.act__intro p{ margin:0; color:var(--ink-soft); font-size:1.05em; }

/* ---------- tour-date strip ----------
   Reads as a continuation of the paragraph above it, so it keeps the
   prose's left edge and only takes a rule to separate the two. */
.dates{
  list-style:none;
  margin:clamp(1.5rem,3.5vh,2.25rem) 0 0;
  padding:0;
  border-top:1px solid var(--line);
}
.date{
  display:grid;
  grid-template-columns:5.5rem minmax(0,1fr);
  gap:.25rem 1rem;
  padding:.9rem .25rem;
  border-bottom:1px solid var(--line);
  transition:background .3s var(--ease), padding-left .3s var(--ease);
}
.date:hover{ background:rgba(255,255,255,.045); padding-left:.9rem; }
.date__when{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-dim);
  padding-top:.3em;
}
.date__what{ font-size:1.08em; color:var(--ink); }
.date__note{
  grid-column:2;
  font-size:.8rem; color:var(--ink-dim);
}

/* =========================================================
   SHOTS — the media itself, framed as lightly as possible
   ========================================================= */
.shot{ margin:0; }
.shot img{
  width:100%;
  border-radius:2px;
  box-shadow:0 18px 44px -24px rgba(0,0,0,.9);
}
.shot figcaption,
.shot__cap{
  margin:.7rem 0 0;
  font-family:var(--hand);
  font-size:1.02rem;
  color:var(--ink-dim);
  text-align:center;
}
.shot--wide{ margin-top:clamp(1.75rem,4vh,2.75rem); }
.shot--hero{
  max-width:760px;
  margin-inline:auto;
}

/* Screenshots of documents (calendars, inboxes, whiteboards) are mostly
   white and glare against the charcoal. Knock them back at rest and
   restore them on hover, so they sit in the page but stay readable. */
.shot--doc img{
  filter:brightness(.9) contrast(.96);
  transition:filter .45s var(--ease), transform .45s var(--ease);
}
.shot--doc:hover img{
  filter:none;
  transform:translateY(-2px);
}

/* ---------- calendar in the pink MacBook ----------
   Same technique as .laptop / .tablet: the screen sits behind the frame
   art, positioned on the measured cutout. This lid is a thin outline
   rather than a solid bezel, so the screen carries its own dark backing —
   there is no art behind it to hide a seam. */
/* The right-hand column of Act 1: laptop with the ticket beneath it. */
.act__media{
  display:flex; flex-direction:column;
  gap:clamp(1.25rem,3vh,2rem);
  min-width:0;
}

/* Sits in the right-hand column of .act__body, so it fills its track
   rather than centring itself in the full measure. */
.pinkbook{ margin:0; }

/* A cutout with a torn edge — it reads as a physical object dropped on
   the page, so it gets no frame or mat, only a shadow that follows the
   artwork's own silhouette. */
.ticket{
  margin:0;
  align-self:center;
  width:min(100%, 420px);
  transform:rotate(-1.6deg);
  transition:transform .5s var(--ease);
}
.ticket img{
  width:100%;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.55));
}
.ticket:hover{ transform:rotate(0) translateY(-3px); }
.pinkbook__stage{
  --ap-left:13.53%;
  --ap-top:7.99%;
  --ap-width:73.60%;
  --ap-height:79.94%;

  position:relative;
  width:100%;
}
.pinkbook__screen{
  position:absolute;
  z-index:1;
  left:var(--ap-left);
  top:var(--ap-top);
  width:var(--ap-width);
  height:var(--ap-height);
  overflow:hidden;
  background:#141314;
}
.pinkbook__screen img{
  width:100%; height:100%;
  object-fit:cover;
  /* a white document on a dark page — knocked back at rest, restored
     on hover, matching the .shot--doc treatment */
  filter:brightness(.92) contrast(.96);
  transition:filter .45s var(--ease);
}
.pinkbook:hover .pinkbook__screen img{ filter:none; }
.pinkbook__frame{
  position:relative;
  z-index:2;
  display:block;
  width:100%; height:auto;
  pointer-events:none;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.5));
}
.pinkbook figcaption{
  margin:.9rem 0 0;
  font-family:var(--hand);
  font-size:1.02rem;
  color:var(--ink-dim);
  text-align:center;
}

/* ---------- single-frame gallery ----------
   One image at a time in the column beside the copy. The slides are a
   mix of portrait posters and landscape screenshots, so the rail keeps
   a fixed aspect and each image is contained inside it — otherwise the
   arrows would jump every time the ratio changed. */
.gal{
  display:flex; flex-direction:column;
  min-width:0;
}
.gal__rail{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  border-radius:2px;
}
.gal__rail::-webkit-scrollbar{ display:none; }

.gal__item{
  flex:0 0 100%;
  margin:0;
  scroll-snap-align:center;
  min-width:0;
}
.gal__item img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:contain;
  /* the letterbox reads as a mat around the artwork, not a gap */
  background:rgba(0,0,0,.22);
  border-radius:2px;
  box-shadow:0 18px 44px -24px rgba(0,0,0,.9);
}
.gal__item figcaption{
  margin:.7rem 0 0;
  font-family:var(--hand);
  font-size:1.02rem;
  color:var(--ink-dim);
  text-align:center;
}
/* document screenshots glare on the dark ground, same as .shot--doc */
.gal__item--doc img{
  filter:brightness(.9) contrast(.96);
  transition:filter .45s var(--ease);
}
.gal__item--doc:hover img{ filter:none; }

.gal__nav{
  display:flex; justify-content:center; gap:.5rem;
  margin-top:1rem;
}
/* the shared button is built for the light page — invert it here */
.section--chorus .carousel__btn{
  background:rgba(255,255,255,.06);
  border-color:var(--line);
  color:var(--ink-soft);
}
.section--chorus .carousel__btn:hover{
  background:rgba(255,255,255,.13);
  border-color:rgba(239,234,236,.34);
  color:var(--ink);
}

/* ---------- lanes (the main campaign) ---------- */
.lane{
  margin-top:clamp(2.25rem,5.5vh,3.5rem);
  padding:clamp(1.25rem,3vw,2rem);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:3px;
}
.lane__title{
  margin:0 0 1.25rem;
  font-size:.76rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-dim);
  padding-bottom:.6rem;
  border-bottom:1px solid var(--line);
}
.lane__body{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3rem);
  align-items:start;
}
/* phone · copy · phone — the list centres between the two frames */
.lane__body--twin{
  grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr) minmax(0,.85fr);
}
.lane__body--twin .lane__list{ align-self:center; }

.lane__list{ margin:0; color:var(--ink-soft); }
.lane__media{
  display:flex; flex-direction:column; align-items:center;
  width:100%;
}
/* the iPhone frame is shared with the Bridge — just cap it here */
.lane__media .phone{ max-width:230px; }
/* a loose photo in a lane shouldn't tower over the list beside it */
.lane__media > .shot{ max-width:300px; }

/* ---------- horizontal media strip ---------- */
.strip{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:clamp(.85rem,2vw,1.35rem);
  margin-top:clamp(1.5rem,3.5vh,2.25rem);
  padding-top:clamp(1.25rem,3vh,1.75rem);
  border-top:1px solid var(--line);
}
.strip .shot img{
  aspect-ratio:4/5;
  object-fit:cover;
  transition:transform .6s var(--ease);
}
.strip .shot:hover img{ transform:scale(1.03); }
.strip--results{ border-top:0; padding-top:0; }
.strip--results .shot img{ aspect-ratio:3/2; }

/* =========================================================
   THE ACT I → ACT II HINGE
   The strategic turn of the whole campaign, given its own beat.
   ========================================================= */
.hinge{
  margin-top:clamp(3.5rem,9vh,6.5rem);
  padding-block:clamp(2.25rem,6vh,3.75rem);
  text-align:center;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.hinge__kicker{
  margin:0 0 .9rem;
  font-size:.7rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-dim);
}
.hinge__acts{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(1rem,4vw,2.5rem);
  margin:0 0 1.25rem;
  font-size:clamp(1.6rem,4.5vw,2.6rem);
  line-height:1;
  color:var(--ink);
}
.hinge__acts em{
  font-style:normal;
  font-family:var(--script);
  font-size:1.5em;
  line-height:0;
  color:var(--ink-soft);
}
.hinge__arrow{ color:var(--ink-dim); font-size:.7em; }
.hinge__note{
  margin:0 auto;
  max-width:58ch;
  color:var(--ink-soft);
}
.hinge__note strong{ color:var(--ink); font-weight:600; }

/* ---------- results ---------- */
/* results: hero shot left, the wins list beside it */
.act__body--results{
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  align-items:center;
}
/* both were sized for a stacked, centred layout — release them here */
.act__body--results .shot--hero{
  max-width: 400px;
  margin-inline:0;
}
.act__body--results .wins{
  margin:0;
  max-width:none;
}

.wins{
  list-style:none;
  margin:clamp(1.75rem,4vh,2.5rem) auto 0;
  padding:0;
  max-width:64ch;
}
.wins li{
  position:relative;
  padding:.7rem 0 .7rem 1.9rem;
  border-bottom:1px solid var(--line);
  color:var(--ink-soft);
}
.wins li:first-child{ border-top:1px solid var(--line); }
.wins li::before{
  content:"❋";
  position:absolute; left:.15rem; top:.72rem;
  font-size:.72em;
  color:var(--ink-dim);
}
.wins strong{ color:var(--ink); font-weight:600; }

/* ---------- role ---------- */
.act--role{
  margin-top:clamp(3rem,7vh,4.5rem);
  padding-top:clamp(1.75rem,4vh,2.5rem);
  border-top:1px solid var(--line);
}
.act--role .cs-label{ margin-top:0 !important; }
.section--chorus .tags li{
  background:rgba(255,255,255,.06);
  border-color:var(--line);
  color:var(--ink-soft);
}
.section--chorus .tags li:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(239,234,236,.32);
  color:var(--ink);
}

/* ---------- shared case-study bits still used elsewhere ---------- */
.cs-label{
  margin:1.4rem 0 .55rem !important;
  font-family:var(--hand); font-size:1.15em; color:var(--grey);
}

.cs-list{ margin:0 0 1.05rem; padding-left:1.15rem; }
.cs-list li{ margin-bottom:.45rem; }
.cs-list li::marker{ color:var(--pink-dp); }

/* ---------- tags ---------- */
.tags{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.tags li{
  padding:.42rem .85rem;
  font-size:.8rem;
  background:var(--white);
  border:1px solid rgba(136,136,136,.25);
  border-radius:999px;
  color:var(--grey-dk);
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.tags li:hover{ background:var(--pink-lt); border-color:var(--pink-dp); }

/* =========================================================
   BRIDGE
   ========================================================= */
.bridge__card{
  /* light grey panel, a shade cooler than the page */
  --panel:#f2f1f0;

  background:linear-gradient(168deg, #f7f6f5 0%, var(--panel) 55%, #eceaea 100%);
  border:1px solid rgba(136,136,136,.26);
  border-radius:3px;
  padding:clamp(1.5rem,4vw,3rem);
  box-shadow:0 1px 3px rgba(63,61,62,.05), 0 20px 46px -32px rgba(63,61,62,.5);
}

/* ---------- top row: copy 1/3, laptop 2/3 ---------- */
.bridge__top{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:clamp(1.75rem,4vw,3.25rem);
  align-items:center;
}
.bridge__intro{ text-align:left; }
.bridge__intro .lede{ margin:0; }

/* ---------- topic buttons: side by side, centred below the row ---------- */
.bridge__topics{
  display:flex; flex-wrap:wrap;
  justify-content:center; align-items:center;
  gap:1rem;
  margin-top:clamp(2rem,4.5vh,3rem);
}
/* same pill as the Success Case "expand" control */
.topic{
  display:inline-flex; align-items:center; gap:.7rem;
  padding:.85rem 1.6rem;
  font-family:var(--serif); font-size:.8rem;
  letter-spacing:.19em; text-transform:uppercase;
  color:var(--grey-ink);
  background:var(--white);
  border:1px solid rgba(136,136,136,.42);
  border-radius:999px;
  cursor:pointer;
  transition:background .35s var(--ease), border-color .35s var(--ease), transform .25s var(--ease);
}
.topic{ text-decoration:none; }
.topic:hover{ background:var(--pink-lt); border-color:var(--grey); transform:translateY(-2px); }
.topic:active{ transform:translateY(0); }
.topic__arrow{
  flex-shrink:0;
  display:grid; place-items:center;
  width:16px; height:16px;
  transition:transform .4s var(--ease);
}
.topic__arrow svg{
  width:16px; height:16px; fill:none;
  stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
/* they jump downward, so the arrow nudges down on hover */
.topic:hover .topic__arrow{ transform:translateY(3px); }

/* ---------- MacBook-framed carousel ----------
   Aperture measured from the 1000x628 frame art:
     left 8.90%  top 5.25%  width 82.20%  height 81.21% */
.bridge__media{
  display:flex; flex-direction:column; align-items:center;
}
.laptop{
  --ap-left:8.90%;
  --ap-top:5.25%;
  --ap-width:82.20%;
  --ap-height:81.21%;

  position:relative;
  width:100%;
}
/* the screen sits behind the frame art, exactly over the cutout */
.laptop__screen{
  position:absolute;
  z-index:1;
  left:var(--ap-left);
  top:var(--ap-top);
  width:var(--ap-width);
  height:var(--ap-height);
  overflow:hidden;
  background:#1c1a1b;
}
.laptop__frame{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  height:auto;
  pointer-events:none;
  filter:drop-shadow(0 16px 30px rgba(63,61,62,.34));
}

/* ---------- auto-scrolling reel ----------
   The horizontal counterpart of the About film strip: the rail holds two
   identical sets of slides and slides left by exactly half its width, so
   the loop closes on itself with no visible seam. These are analytics
   panels rather than photographs, so the pace is slow enough to read a
   figure before it leaves and hovering stops it outright. */
.screen__reel{
  position:relative;
  height:100%;
  overflow:hidden;
  background:#0b0b0d;
}
.screen__rail{
  display:flex;
  height:100%;
  width:max-content;
  animation:reelRoll 27s linear infinite;
}
.screen__reel:hover .screen__rail{ animation-play-state:paused; }

.screen__slide{
  flex:0 0 auto;
  margin:0;
  height:100%;
  position:relative;
}
.screen__slide img{
  width:auto; height:100%;
  /* contained, not cropped: every figure on the panel has to stay legible */
  object-fit:contain;
  display:block;
}

@keyframes reelRoll{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}

@media (prefers-reduced-motion:reduce){
  /* the blanket reduced-motion rule kills the animation; without a rail
     that scrolls, let the visitor scroll it themselves */
  .screen__reel{ overflow-x:auto; }
  .screen__rail{ animation:none !important; transform:none !important; }
}

.laptop__caption{
  margin:.9rem 0 0;
  text-align:center;
  color:var(--grey);
}

.bridge__skills{
  margin-top:2.25rem; padding-top:1.5rem;
  border-top:1px solid rgba(136,136,136,.3);
}
.bridge__skills .cs-label{ margin-top:0 !important; }
.bridge__skills .tags li{ background:rgba(255,255,255,.78); }

/* =========================================================
   INTERNSHIP SUBSECTIONS
   ---------------------------------------------------------
   Sit directly on the page (no panel) and read one level
   quieter than a top-level section heading.
   ========================================================= */
.section--sub{
  --sec-pad-y:clamp(2.75rem,7vh,5rem);
}
.sub__head{ margin-bottom:clamp(1.75rem,4vh,2.75rem); }
.sub__kicker{
  margin:0 0 .45rem;
  font-size:.68rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--grey);
}
.sub__kicker::before{ content:"—"; margin-right:.6em; opacity:.5; }
.sub__title{
  margin:0;
  /* deliberately smaller than .section__title */
  font-size:clamp(1.5rem,3.2vw,2.15rem);
  font-weight:400; line-height:1.2;
}
.sub__lede{
  margin:.85rem 0 0;
  color:var(--grey-dk);
}
.sub__label{
  margin:0 0 .8rem;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--grey);
}
.sub__todo{
  margin:0;
  padding:2rem 1.5rem;
  text-align:center;
  border:1.5px dashed rgba(136,136,136,.35);
  border-radius:3px;
  background:rgba(255,255,255,.45);
}

/* ---------- row: phone + tile ---------- */
.sub__row{
  display:grid;
  grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  gap:clamp(1.5rem,4vw,3rem);
  align-items:start;
}

/* ---------- iPhone-framed reel ----------
   Aperture measured from the 460x908 frame art:
     left 7.39%  top 6.39%  width 85.22%  height 90.53% */
/* the reel column: label row matches the tile's, so both align.
   The inner width is capped to the phone so the label sits flush
   with the frame rather than the column edge. */
.reel{
  display:flex; flex-direction:column;
  align-items:center;
  min-width:0;
}
.reel .sub__label{
  width:100%;
  max-width:290px;
}
.phone{
  --ap-left:7.39%;
  --ap-top:2%;
  --ap-width:86%;
  --ap-height:95%;

  position:relative;
  margin:0;
  width:100%;
  max-width:290px;
  align-self:center;
}
.phone__screen{
  position:absolute;
  z-index:1;
  left:var(--ap-left);
  top:var(--ap-top);
  width:var(--ap-width);
  height:var(--ap-height);
  overflow:hidden;
  border-radius:7%/3.4%;
  background:#141314;
  /* the clip has to apply to the painted video too, not just the box */
  isolation:isolate;
}
.phone__screen video{
  width:100%; height:100%;
  /* the reel is 9:16 but the aperture is taller and narrower — contain
     keeps the whole frame inside the bezel instead of bleeding past it */
  object-fit:contain;
  display:block;
  background:#141314;
}
.phone__frame{
  position:relative;
  z-index:2;
  display:block;
  width:100%; height:auto;
  /* sits above the video, so clicks must reach the controls */
  pointer-events:none;
  filter:drop-shadow(0 16px 28px rgba(63,61,62,.34));
}

/* ---------- 2x3 tile ---------- */
.tile{
  display:flex; flex-direction:column;
  min-width:0;
}
.tile__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.5rem,1.2vw,.85rem);
}
.tile__cell{
  margin:0;
  overflow:hidden;
  background:var(--pink-lt);
  border-radius:2px;
  aspect-ratio:4/5;
}
.tile__cell img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease);
}
.tile__cell:hover img{ transform:scale(1.05); }

/* the brand row splits evenly: 2x2 tile beside the iPad */
.sub__row--brand{
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  /* stretch both columns to the taller one (the tile) so the iPad
     column has room to centre its frame against it */
  align-items:stretch;
}
.tile__grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }

/* ---------- iPad-framed carousel ----------
   Aperture measured from the 900x689 frame art:
     left 3.33%  top 4.50%  width 93.22%  height 90.71%
   The Oficina slides are 4:3 (1.333) and the aperture is 1.342,
   so they fill it with no letterboxing. */
.pad{
  display:flex; flex-direction:column;
  min-width:0;
}
/* The label stays pinned at the top so it lines up with the tile's
   label; everything below it centres in the remaining height. */
.pad__body{
  flex:1;
  display:flex; flex-direction:column; justify-content:center;
  min-height:0;
}
.tablet{
  --ap-left:3.33%;
  --ap-top:4.50%;
  --ap-width:93.22%;
  --ap-height:90.71%;

  position:relative;
  margin:0;
  width:100%;
}
.tablet__screen{
  position:absolute;
  z-index:1;
  left:var(--ap-left);
  top:var(--ap-top);
  width:var(--ap-width);
  height:var(--ap-height);
  overflow:hidden;
  background:#141314;
}
.tablet__track{
  display:flex;
  height:100%;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.tablet__track::-webkit-scrollbar{ display:none; }
.tablet__slide{
  flex:0 0 100%;
  margin:0;
  height:100%;
  scroll-snap-align:center;
}
.tablet__slide img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.tablet__frame{
  position:relative;
  z-index:2;
  display:block;
  width:100%; height:auto;
  pointer-events:none;
  filter:drop-shadow(0 16px 30px rgba(63,61,62,.34));
}
.tablet__nav{
  display:flex; justify-content:center; gap:.5rem;
  margin-top:1rem;
}

/* ---------- frameless carousel ---------- */
.sub__carousel{ margin-top:clamp(2rem,5vh,3.25rem); }
.carousel__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  margin-bottom:.85rem;
}
.carousel__head .sub__label{ margin:0; }
.carousel__nav{ display:flex; gap:.5rem; }
.carousel__btn{
  display:grid; place-items:center;
  width:34px; height:34px;
  border:1px solid rgba(136,136,136,.4);
  border-radius:50%;
  background:var(--white);
  color:var(--grey-dk);
  cursor:pointer;
  padding:0;
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .25s var(--ease);
}
.carousel__btn:hover{
  background:var(--pink-lt);
  border-color:var(--grey);
  transform:translateY(-2px);
}
.carousel__btn svg{
  width:16px; height:16px; fill:none;
  stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}

.carousel{
  display:flex;
  gap:clamp(.75rem,2vw,1.25rem);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  padding-bottom:.25rem;
}
.carousel::-webkit-scrollbar{ display:none; }
.carousel__item{
  flex:0 0 clamp(190px, 25%, 280px);
  margin:0;
  scroll-snap-align:start;
  overflow:hidden;
  border-radius:2px;
  background:var(--pink-lt);
  aspect-ratio:4/5;
}
.carousel__item img,
.carousel__item video{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  background:#141314;
}

/* =========================================================
   OUTRO / BOARD
   ---------------------------------------------------------
   A full-bleed pink band in the nav's own tint. Same construction
   as the Chorus and the Verse: the section drops its measure so the
   colour reaches both edges, and each direct child re-applies it.
   ========================================================= */
.section--outro{
  max-width:none;
  padding-inline:0;
  background:var(--nav-bg);
}
.section--outro > *{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:clamp(1rem,5vw,3rem);
}

/* Names each body of work inside the Outro. Quieter than a section
   heading — these are labels on one shelf, not new sections. */
/* Only the block margins are set here: a `margin:0 0 …` shorthand would
   zero the inline ones too, defeating the `margin-inline:auto` that
   centres every other child of the band — the label would then start at
   the viewport edge instead of on the page's column. */
.works__label{
  margin-block:0 clamp(1.25rem,3vh,1.75rem);
  font-size:.72rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--grey);
}
.works__label::before{ content:"—"; margin-right:.6em; opacity:.5; }
/* every label after the first opens a new shelf, so it needs air above
   it — whichever kind of block it follows */
.board + .works__label,
.works__carousel + .works__label,
.projector + .works__label{ margin-top:clamp(3.5rem,8vh,5.5rem); }

.board{
  display:grid;
  /* the four photos across one row on a wide page */
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(1.5rem,3.5vw,2.75rem);
  align-items:start;
}
.board__item{ transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
/* 2:3 matches the photoshoot frames, so the portraits are shown whole
   rather than cropped to a shorter box. */
.board__item img{ aspect-ratio:2/3; object-fit:cover; }
.board__item:nth-child(1){ transform:rotate(-2.2deg); }
.board__item:nth-child(2){ transform:rotate(1.5deg); }
.board__item:nth-child(3){ transform:rotate(-1deg); }
.board__item:nth-child(4){ transform:rotate(2.4deg); }
.board__item:nth-child(5){ transform:rotate(-1.7deg); }
.board__item:nth-child(6){ transform:rotate(1.2deg); }
.board__item:hover{
  transform:rotate(0) translateY(-6px);
  box-shadow:0 1px 3px rgba(63,61,62,.07), 0 22px 42px -22px rgba(63,61,62,.5);
  z-index:4;
}
.note{
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:.6rem;
  /* tracks the photo frames beside it */
  aspect-ratio:2/3;
  padding:1.5rem;
  text-align:center;
  /* near-white, not pink: the section ground is pink now, and a tinted
     card on it reads as a hole rather than a piece of paper */
  background:
    repeating-linear-gradient(180deg, transparent, transparent 27px, rgba(136,136,136,.14) 27px, rgba(136,136,136,.14) 28px),
    #fdfbfc;
}
.note__small{ margin:0; font-size:.86rem; color:var(--grey); line-height:1.6; }

/* ---------- graphic design scroller ----------
   Reuses the Semana do Chocolate carousel. Its label sits in the header
   beside the arrows, so it takes the em-dash of the label above it to
   keep the two shelves reading as a pair. */
.works__carousel{ margin-top:clamp(3rem,7vh,4.5rem); }
.works__carousel .sub__label::before{ content:"—"; margin-right:.6em; opacity:.5; }
/* the pieces are finished artwork with their own frames and scatter, so
   they sit on the page rather than in a tinted well */
.works__carousel .carousel__item{ background:transparent; }

/* ---------- projector screen ----------
   Aperture measured against the 1600x899 frame art (the white screen
   between the two roller bars):
     left 51.19%  top 12.12%  width 45.75%  height 84.09%
   The art carries its own popcorn/clapperboard still-life on the left,
   so the whole thing sits on the page unframed. */
.projector{ margin-top:clamp(1.5rem,4vh,2.5rem); }
.projector__stage{
  --ap-left:51.19%;
  --ap-top:12.12%;
  --ap-width:45.75%;
  --ap-height:84.09%;

  position:relative;
  width:100%;
}
/* The screen in the art is painted opaque white, not cut out, so the
   video sits ON TOP of the frame rather than behind it. */
.projector__screen{
  position:absolute;
  z-index:2;
  left:var(--ap-left);
  top:var(--ap-top);
  width:var(--ap-width);
  height:var(--ap-height);
  overflow:hidden;
  /* the reel is vertical and the screen is square, so the video is
     contained and this backing shows either side of it */
  background:#141314;
}
.projector__screen video{
  width:100%; height:100%;
  object-fit:contain;
  display:block;
  background:#141314;
}
.projector__frame{
  position:relative;
  z-index:1;
  display:block;
  width:100%; height:auto;
  pointer-events:none;
}

@media (max-width:700px){
  /* the still-life shrinks the screen past usefulness on a phone —
     drop the frame and show the reel on its own */
  .projector__stage{ padding-bottom:0; }
  .projector__frame{ display:none; }
  .projector__screen{
    position:relative;
    left:auto; top:auto;
    width:min(100%,320px);
    height:auto;
    aspect-ratio:464/664;
    margin-inline:auto;
    border-radius:3px;
  }
}

/* =========================================================
   CONTACT
   ========================================================= */
.section--contact{ text-align:center; }

/* Contact details beside the pinned note. The details keep their own
   centred measure; the row just sets the two side by side and centres
   the pair as a unit. */
.contact__row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(2.5rem,9%,7rem);
}
/* In the row the box shrinks to its content and drops its auto margins:
   as a flex item those absorb all the free space (~200px a side), which
   pushed the note far off to the right no matter how small the gap. */
.contact__inner{ max-width:640px; margin-inline:auto; }
.contact__row > .contact__inner{
  max-width:max-content;
  margin-inline:0;
}

.contact__note{
  flex:0 0 auto;
  width:clamp(200px,22vw,260px);
  transform:rotate(2deg);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.contact__note:hover{
  transform:rotate(0) translateY(-6px);
  box-shadow:0 1px 3px rgba(63,61,62,.07), 0 22px 42px -22px rgba(63,61,62,.5);
}
/* the note reads as a pinned card here, not a photo — it needs no
   caption well below it */
.contact__note .note{ aspect-ratio:4/5; }
.contact__title{ margin-bottom:.75rem; }
.contact__sub{ margin:0 auto 2.5rem; max-width:44ch; color:var(--grey-dk); }

.contact__links{
  list-style:none; margin:0 0 2.5rem; padding:0;
  border-top:1px solid rgba(136,136,136,.22);
}
.contact__links li{ border-bottom:1px solid rgba(136,136,136,.22); }
.contact__links a{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:1rem .35rem;
  text-decoration:none; color:var(--grey-ink);
  transition:background .3s var(--ease), padding .3s var(--ease);
}
.contact__links a:hover{ background:rgba(240,224,235,.55); padding-inline:1rem; }
.contact__k{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--grey);
}
.contact__v{ font-size:1.02rem; }

.contact__thanks{ font-size:1.5em; }

.foot{
  margin-top:clamp(3rem,8vh,5rem);
  padding-top:1.75rem;
  border-top:1px solid rgba(136,136,136,.2);
}
.foot p{
  margin:0;
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--grey);
}
.foot .script{ font-size:1.9em; text-transform:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  /* one column of tracks before the rows get too cramped to read */
  .pl__list{ columns:1; }
}

@media (max-width:900px){
  .about__grid{ grid-template-columns:1fr; }
  .about__photo{ max-width:340px; margin-inline:auto; }

  /* the stacked layout has no room for the side decoration */
  .deco--passports{ display:none; }
  .deco--matcha{
    position:static;
    width:min(78%,320px);
    margin:2.5rem auto 0;
  }

  /* ---- chorus stacks ---- */
  .chorus__open{ grid-template-columns:1fr; }
  /* portrait leads on narrow screens — it's the strongest image */
  .chorus__portrait{ order:1; max-width:420px; margin-inline:auto; }
  .chorus__hook{ order:2; }
  .act__body,
  .lane__body,
  .lane__body--twin{ grid-template-columns:1fr; }
  /* stacked, the copy leads rather than sitting between the two phones */
  .lane__body--twin .lane__list{ order:-1; }
  /* the gallery stops being a side column and centres under the copy */
  .gal{ max-width:420px; margin-inline:auto; width:100%; }

  /* stacked, the copy should lead rather than sit between the two pairs */
  .act__body--triptych .act__text{ order:-1; }
  .trip__col{ max-width:420px; margin-inline:auto; width:100%; }

  /* stack the intro above the laptop */
  .bridge__top{ grid-template-columns:1fr; }
  .bridge__media{ max-width:520px; margin-inline:auto; width:100%; }

  /* phone above the tile; tile above the iPad */
  .sub__row,
  .sub__row--brand{ grid-template-columns:1fr; }
  .pad{ max-width:560px; margin-inline:auto; width:100%; }

  /* stack the album panel above the tracklist */
  .pl{ grid-template-columns:1fr; }
  .pl__album{
    position:static;
    max-width:330px;
    margin-inline:auto;
  }
}

@media (max-width:780px){
  /* the note drops below the details rather than squeezing beside them */
  .contact__row{ flex-direction:column; }
  .contact__note{ width:min(70%,230px); }

  .nav__toggle{ display:block; }
  .nav{
    height:auto;
    flex-wrap:wrap;
    align-items:flex-start;
    padding-block:.85rem;
    gap:.85rem;
  }
  .nav__list{
    order:3;
    flex-basis:100%;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    margin-left:0;
    max-height:0; overflow:hidden;
    transition:max-height .45s var(--ease);
  }
  .nav.is-open{ border-bottom-color:rgba(136,136,136,.18); }
  .nav.is-open .nav__list{ max-height:340px; }
  .nav__list a{
    display:block; width:100%;
    padding:.62rem 0;
    border-bottom:1px solid rgba(136,136,136,.14);
  }
  .nav__list a::after{ display:none; }
  .player{ margin-left:auto; margin-right:52px; }
  /* the bar wraps here and renders ~79px tall — keep the variable
     honest or anchored headings end up tucked behind it */
  :root{ --nav-h:80px; }
}

@media (max-width:520px){
  .interlude__songs a{ flex-direction:column; gap:.15rem; }
  .interlude__part{ flex-basis:auto; }
  .contact__links a{ flex-direction:column; align-items:flex-start; gap:.15rem; }

  /* Three stats in a 430px row crush the Act I → Act II pair. Let the
     two counters share the top row and give the acts the full width. */
  .stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.75rem 1rem;
  }
  .stats .stat:last-child{ grid-column:1 / -1; }

}

/* =========================================================
   MOTION / PRINT
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }

  /* The blanket rule above would snap the film to its end frame.
     Hold it still at the start instead. */
  .viewer__rail{
    animation:none !important;
    transform:translateY(0) !important;
  }
}

@media print{
  .nav,.nav__toggle,.player{ display:none !important; }
  body{ background:#fff; }
  .reveal{ opacity:1 !important; transform:none !important; }

  /* Browsers drop background colours when printing, which would leave the
     chorus as pale text on white. Flip it back to ink on paper. */
  .section--chorus{
    background:none !important;
    color:var(--grey-ink) !important;
    --ink:      var(--grey-ink);
    --ink-soft: var(--grey-ink);
    --ink-dim:  var(--grey);
    --line:     rgba(136,136,136,.3);
    --card:     transparent;
  }
  .section--chorus .tags li{
    background:none !important;
    border-color:rgba(136,136,136,.4) !important;
    color:var(--grey-dk) !important;
  }
  .shot--doc img{ filter:none !important; }
  .act,.lane,.hinge{ break-inside:avoid; }

  /* print every act open, without its caret */
  .act__panel{ grid-template-rows:1fr !important; }
  .act__toggle::after{ display:none; }
}