/* garretttucker.com
   Palette: stage black #050505 · spotlight white #FFFFFF · speaker gray #2B2B2B · cable gray #8C8C8C
            pedalboard cobalt #2457FF · chrome yellow #F2DF2E (reserved)
   Type:    Cormorant Garamond capitals for the name · Instrument Serif for section titles · Inter for UI and body
   Hero:    one viewport tall, photo covers and crops; the name block is anchored to the dark wall in the photo. */

:root {
  --black: #050505;
  --white: #ffffff;
  --speaker: #2b2b2b;
  --gray: #8c8c8c;
  --cobalt: #2457ff;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;

  --gutter: 64px;
  --rail: 80px;
  --max: 1280px;
  --focus-x: 50%;
  --focus-y: 0.55;
  --hero-p: 0;                 /* 0 at the top of the page, 1 once the hero has scrolled away (set by script) */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); color-scheme: dark; }
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
em { font-style: italic; }
button { font: inherit; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

/* ---------- shared type ---------- */

.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.16);
  margin-bottom: 56px;
}
.sec-head .h2 { margin: 0; }
.sec-meta {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.02em;
  color: var(--gray);
  text-align: right;
  flex-shrink: 0;
  max-width: 22em;
}

.h2 {
  margin: 0 0 28px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 4.6vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  max-width: 14em;
}

.lede { font-size: 22px; line-height: 1.45; margin: 0 0 20px; }
p { margin: 0 0 18px; }

.link { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.link:hover { color: var(--cobalt); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px 0 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.btn--dark { background: var(--black); color: var(--white); }
.btn--dark:hover { background: var(--cobalt); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- masthead build-in ----------
   html.has-intro  = first paint: everything parked
   html.is-revealed = run the sequence (band, words, name, nav, then the photo wipes in and settles)
   html.is-settled  = scroll-driven motion takes over */

/* name rises in first, letters tightening as they land */
html.has-intro .hero__first, html.has-intro .hero__last { opacity: 0; transform: translateY(40px); letter-spacing: 0.22em; }
html.is-revealed .hero__first, html.is-revealed .hero__last { opacity: 1; transform: none; letter-spacing: 0.08em; transition: opacity 1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1), letter-spacing 1.3s cubic-bezier(.2,.7,.2,1); }
html.is-revealed .hero__first { transition-delay: .1s; }
html.is-revealed .hero__last { transition-delay: .25s; }

/* nav links drop in one by one */
html.has-intro .nav__links a { opacity: 0; transform: translateY(-12px); }
html.is-revealed .nav__links a { opacity: 1; transform: none; transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
html.is-revealed .nav__links a:nth-child(1) { transition-delay: 1.5s; }
html.is-revealed .nav__links a:nth-child(2) { transition-delay: 1.6s; }
html.is-revealed .nav__links a:nth-child(3) { transition-delay: 1.7s; }
html.is-revealed .nav__links a:nth-child(4) { transition-delay: 1.8s; }
html.is-revealed .nav__links a:nth-child(5) { transition-delay: 1.9s; }

/* the photograph wipes in from the band's edge and settles from a slight zoom */
html.has-intro .hero__media { clip-path: inset(0 100% 0 0); }
html.is-revealed .hero__media { clip-path: inset(0 0 0 0); transition: clip-path 1.5s cubic-bezier(.6,0,.2,1) .6s; }
html.has-intro .hero__photo { transform: scale(1.1); }
html.is-revealed .hero__photo { transform: scale(1); transition: transform 2.4s cubic-bezier(.2,.7,.2,1) .6s; }

/* the band's words and ticks appear as the photo reaches them */
html.has-intro .hero__roles span { opacity: 0; transform: translateY(-14px); }
html.is-revealed .hero__roles span { opacity: 1; transform: none; transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
html.is-revealed .hero__roles span:nth-child(1) { transition-delay: 1.2s; }
html.is-revealed .hero__roles span:nth-child(3) { transition-delay: 1.35s; }
html.is-revealed .hero__roles span:nth-child(5) { transition-delay: 1.5s; }
html.has-intro .hero__roles i { transform: scaleY(0); }
html.is-revealed .hero__roles i { transform: none; transition: transform .7s cubic-bezier(.2,.7,.2,1) 1.5s; }

/* once settled, the type lifts away with the scroll */
html.is-settled .hero__intro { opacity: calc(1 - var(--hero-p) * 1.8); transform: translateY(calc(var(--hero-p) * -60px)); }
html.is-settled .hero__roles { opacity: calc(1 - var(--hero-p) * 1.4); }

/* ---------- nav ---------- */

.nav {
  position: fixed;
  z-index: 40;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px var(--gutter);
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--black);
  transition: color .4s ease, padding .5s cubic-bezier(.2,.7,.2,1);
}
/* the black bar drops down from the top edge when the page starts to scroll */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(5,5,5,0.92);
  backdrop-filter: blur(10px);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
.nav > * { position: relative; }
.nav.is-scrolled { color: var(--white); padding: 16px var(--gutter); }
.nav.is-scrolled::before { transform: scaleY(1); }

/* the name tracks in from the left, letters tightening as it lands */
.nav__mark {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.3em;
  text-decoration: none;
  opacity: 0;
  transform: translateX(-18px);
  pointer-events: none;
  white-space: nowrap;
  transition: opacity .45s ease, transform .7s cubic-bezier(.2,.7,.2,1), letter-spacing .8s cubic-bezier(.2,.7,.2,1);
}
.nav__mark em { font-style: inherit; }
.nav.is-named .nav__mark { opacity: 1; transform: none; letter-spacing: 0.08em; pointer-events: auto; }

.nav__toggle { display: none; }
.nav__links { display: flex; gap: 36px; }
.nav__links a { position: relative; text-decoration: none; padding: 4px 0; }
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); }
.nav__progress {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 2px;
  background: var(--cobalt);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  transition: opacity .4s .2s;
}
.nav.is-scrolled .nav__progress { opacity: 1; }
html.lb-open .nav { opacity: 0; pointer-events: none; }

/* ---------- hero ---------- */

.hero {
  position: sticky;            /* pinned: the rest of the page slides up over it */
  top: 0;
  z-index: 0;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--black);
}
main > section, .footer { position: relative; z-index: 1; }
.hero__media {
  position: absolute;
  inset: 0;
  transform: scale(calc(1 + var(--hero-p) * 0.08)) translateY(calc(var(--hero-p) * 6%));
  transform-origin: 50% 35%;
  will-change: transform;
}
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus-x) calc(var(--focus-y) * 100%);
  transform-origin: 50% 40%;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background: var(--black);
  opacity: calc(var(--hero-p) * 0.7);
  pointer-events: none;
}
.hero__intro {
  position: absolute;
  z-index: 2;
  left: calc(var(--rail) + 56px);
  /* Row 240 of the 1200-row photo is the top of the dark wall beside Garrett. */
  top: calc(var(--focus-y) * 100svh - (1200 * var(--focus-y) - 240) * (100vw / 1600) + 46px);
}
.hero__intro { display: flex; }
.hero__name { margin: 0; font-weight: 400; display: flex; flex-direction: column; align-items: flex-start; }
.hero__first, .hero__last { display: block; }

/* Roles: a solid black band down the left edge of the hero, full height.
   The three words read upward, spaced along the band with hairlines between them. */
.hero__roles {
  position: absolute;
  z-index: 3;
  left: 0; top: 0; bottom: 0;
  width: var(--rail);
  margin: 0;
  background: var(--black);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: flex;
  align-items: center;
  justify-content: center;         /* the word group is centred on the band's full height */
  padding: 0;
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
}
.hero__roles span { padding: 0 0 0.32em; }
.hero__roles i { flex: 0 0 48px; width: 1px; margin: 24px 0; background: rgba(255,255,255,0.32); }

/* The name: Cormorant Garamond capitals, two lines, wide tracking. */
.hero__first, .hero__last {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(56px, 5.9vw, 96px);
  line-height: 0.96;
  letter-spacing: 0.08em;
}

@media (min-aspect-ratio: 1.65 / 1) { :root { --focus-y: 0.36; } }
@media (min-aspect-ratio: 1.95 / 1) { :root { --focus-y: 0.22; } }
@media (max-aspect-ratio: 4 / 3) {
  :root { --focus-x: 42%; }
  .hero__intro { top: calc(20svh + 46px); }
}

/* ---------- reveals ---------- */

[data-reveal] { transition: opacity .9s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
[data-reveal]:not([data-reveal="stagger"]):not(.is-in) { opacity: 0; transform: translateY(32px); }
[data-reveal="scale"]:not(.is-in) { transform: translateY(24px) scale(.97); }
[data-reveal="stagger"] > * { transition: opacity .9s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
[data-reveal="stagger"]:not(.is-in) > * { opacity: 0; transform: translateY(28px); }
.sec-head[data-reveal] { border-top-color: transparent; transition: border-color 1.2s ease .2s; }
.sec-head[data-reveal].is-in { border-top-color: rgba(255,255,255,0.16); }
.music .sec-head[data-reveal].is-in, .photos .sec-head[data-reveal].is-in { border-top-color: rgba(5,5,5,0.14); }
.booking .wrap[data-reveal] { border-top-color: transparent; }
.booking .wrap[data-reveal].is-in { border-top-color: rgba(255,255,255,0.35); }

/* ---------- music (white) ---------- */

.music { background: var(--white); color: var(--black); padding: 128px 0 136px; }
.music__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: start; }
.music__title {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(56px, 7vw, 108px);
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.music__meta { color: var(--speaker); margin: 0 0 36px; font-size: 17px; max-width: 26em; }
.tracks { list-style: none; margin: 12px 0 0; padding: 0; counter-reset: t; border-top: 1px solid rgba(5,5,5,0.12); }
.tracks li {
  counter-increment: t;
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(5,5,5,0.12);
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.1;
}
.tracks li::before {
  content: counter(t, decimal-leading-zero);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--gray);
  width: 28px;
  flex-shrink: 0;
}
.tracks li span { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.tracks li::before { transition: color .25s; }
.tracks li:hover span { transform: translateX(8px); }
.tracks li:hover::before { color: var(--cobalt); }
.tracks li:last-child span { color: var(--cobalt); }

/* ---------- story (black) ---------- */

.story { padding: 136px 0; background: var(--black); }
.story__grid { display: grid; grid-template-columns: 5fr 6fr; gap: 96px; align-items: center; }
.story__photo { margin: 0; overflow: hidden; aspect-ratio: 4 / 5; --py: 0%; }
.story__photo img { width: 100%; height: 116%; margin-top: -8%; object-fit: cover; transform: translateY(var(--py)); will-change: transform; }
.story__text p { color: rgba(255,255,255,0.78); max-width: 34em; }
.story__text .lede { color: var(--white); }

/* ---------- highlights (black) ---------- */

.highlights { padding: 0 0 136px; background: var(--black); }
.highlights .sec-head { margin-bottom: 40px; }
.highlights__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.hl__title { margin: 0 0 8px; font-family: var(--serif); font-weight: 400; font-size: 34px; letter-spacing: -0.01em; }
.hl__list { list-style: none; margin: 0; padding: 0; }
.hl__list li { display: grid; gap: 2px; padding: 18px 0 18px 0; border-top: 1px solid rgba(255,255,255,0.14); position: relative; transition: padding-left .35s cubic-bezier(.2,.7,.2,1); }
.hl__list li::before { content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 1px; background: var(--cobalt); transition: width .35s cubic-bezier(.2,.7,.2,1); }
.hl__list li:hover { padding-left: 28px; }
.hl__list li:hover::before { width: 16px; }
.hl__list strong { font-weight: 500; font-size: 18px; }
.hl__list span { color: var(--gray); font-size: 15px; }

/* ---------- live (black, photo backdrop) ---------- */

.live { position: relative; padding: 136px 0; overflow: hidden; background: #151515; }
.live .sec-head { border-top-color: rgba(255,255,255,0.2); }
.live__bgwrap { position: absolute; inset: -12% 0; --py: 0%; transform: translateY(var(--py)); will-change: transform; }
.live__bg { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: 0.3; }
.live .wrap { position: relative; }
.video { position: relative; aspect-ratio: 4 / 3; max-width: 960px; margin-inline: auto; background: var(--black); overflow: hidden; cursor: pointer; box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
.video img, .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.video__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 88px; height: 88px;
  border-radius: 50%;
  border: 0;
  background: var(--white);
  color: var(--black);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s, color .2s, transform .2s;
}
.video__play::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.7);
  animation: breathe 2.6s ease-out infinite;
  pointer-events: none;
}
@keyframes breathe { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }
.video__play:hover { background: var(--cobalt); color: var(--white); transform: translate(-50%, -50%) scale(1.06); }
.video__play:hover::after { animation-play-state: paused; opacity: 0; }
.video__play svg { margin-left: 4px; }
.live__more { margin: 28px 0 0; font-size: 15px; font-weight: 500; letter-spacing: 0.02em; text-align: center; }

/* ---------- photos: contact sheet ---------- */

.photos { padding: 136px 0; background: var(--white); color: var(--black); }
.photos .sec-head { margin-bottom: 48px; border-top-color: rgba(5,5,5,0.14); }
.photos .h2 { max-width: none; }

/* Full-bleed grid, tight gutters. Black and white until hovered; click opens the viewer. */
.gridV {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(160px, 17vw, 260px);
  grid-auto-flow: dense;
  gap: 6px;
  padding: 0 6px;
}
.gridV__item { margin: 0; overflow: hidden; background: #ececec; cursor: zoom-in; position: relative; }
.gridV__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  --drift: 0%;
  transform: scale(1.12) translateY(var(--drift));   /* oversized so the scroll drift never shows an edge */
  transition: filter .5s ease, transform .15s linear;
  will-change: transform;
}
.gridV__item:hover img { filter: grayscale(0); }
.gridV__item--big { grid-column: span 2; grid-row: span 2; }
.gridV__item--wide { grid-column: span 2; }
.gridV__item--tall { grid-row: span 2; }

/* reveal on scroll */
.gridV__item.will-reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.gridV__item.will-reveal.is-in { opacity: 1; transform: none; }

/* full-screen viewer */
.lb {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(5,5,5,0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .35s ease;
}
.lb[hidden] { display: none; }
.lb.is-open { opacity: 1; }
html.lb-open { overflow: hidden; }
.lb__stage { margin: 0; max-width: calc(100vw - 160px); display: flex; flex-direction: column; align-items: center; padding: 56px 0; }
.lb__img { max-width: 100%; max-height: calc(100vh - 170px); width: auto; height: auto; object-fit: contain; transition: opacity .3s ease; }
.lb__img.is-switching { opacity: 0; }
.lb__cap { padding-top: 18px; font-size: 14px; line-height: 20px; letter-spacing: 0.02em; color: var(--gray); }
.lb__close, .lb__nav {
  position: absolute;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(5,5,5,0.5);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.lb__close:hover, .lb__nav:hover { border-color: var(--white); background: rgba(255,255,255,0.1); }
.lb__close { top: 28px; right: 28px; }
.lb__nav { top: 50%; transform: translateY(-50%); }
.lb__nav--prev { left: 28px; }
.lb__nav--next { right: 28px; }


/* ---------- booking (cobalt) ---------- */

.booking { background: var(--cobalt); color: var(--white); padding: 136px 0; }
.booking .wrap { border-top: 1px solid rgba(255,255,255,0.35); padding-top: 32px; }
.booking__title {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 6.4vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.02em;
  max-width: 10em;
}
.booking__copy { font-size: 19px; max-width: 32em; color: rgba(255,255,255,0.85); margin: 0 0 48px; }
.booking__contact { display: flex; flex-wrap: wrap; gap: 20px 48px; align-items: baseline; }
.booking__email {
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.1;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0.4));
  background-repeat: no-repeat;
  background-size: 0% 2px, 100% 2px;
  background-position: left 100%, left 100%;
  padding-bottom: 4px;
  transition: background-size .5s cubic-bezier(.2,.7,.2,1);
}
.booking__email:hover { background-size: 100% 2px, 100% 2px; }

/* ---------- footer ---------- */

.footer { padding: 48px 0; background: var(--black); }
.footer__grid { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer__mark { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; text-transform: uppercase; font-size: 20px; letter-spacing: 0.08em; }
.footer__mark em { font-style: normal; }
.footer__links { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; font-size: 14px; font-weight: 500; letter-spacing: 0.02em; }
.footer__links a { text-decoration: none; color: rgba(255,255,255,0.8); }
.footer__links a:hover { color: var(--white); }
.footer__copy { margin: 0; font-size: 13px; color: var(--gray); }

@media (prefers-reduced-motion: reduce) {
  .hero { position: relative; }
  .hero__media, .hero::after, html.is-settled .hero__intro, html.is-settled .hero__roles { transform: none; opacity: 1; }
  .hero::after { opacity: 0; }
  .video__play::after { animation: none; }
  [data-reveal], [data-reveal="stagger"] > * { transition: none; }
}

/* ---------- tablet ---------- */

@media (max-width: 960px) {
  :root { --gutter: 40px; }
  .music__grid, .story__grid, .highlights__grid { grid-template-columns: 1fr; gap: 48px; }
  .story__photo { max-width: 520px; }
  .music, .story, .live, .booking, .photos { padding: 96px 0; }
  .highlights { padding-bottom: 96px; }
}

/* ---------- phones ---------- */

@media (max-width: 720px) {
  :root { --gutter: 24px; --focus-x: 55%; }
  body { font-size: 16px; }
  .nav { padding: 14px var(--gutter); }
  .nav.is-scrolled { padding: 12px var(--gutter); }
  .nav__mark { font-size: 17px; letter-spacing: 0.1em; }
  .nav.is-named .nav__mark { letter-spacing: 0.1em; }

  /* hamburger: a circle that reads on the photo, two lines that fold into an X */
  .nav__toggle {
    display: flex;
    position: relative;
    z-index: 2;
    margin-left: auto;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(5,5,5,0.35);
    background: rgba(255,255,255,0.55);
    padding: 0;
    cursor: pointer;
    transition: background .3s, border-color .3s;
  }
  .nav__toggle span {
    position: absolute;
    left: 13px; right: 13px;
    height: 1.5px;
    background: var(--black);
    transition: transform .4s cubic-bezier(.2,.7,.2,1), top .4s cubic-bezier(.2,.7,.2,1), background .3s;
  }
  .nav__toggle span:nth-child(1) { top: 17px; }
  .nav__toggle span:nth-child(2) { top: 25px; }
  .nav.is-scrolled .nav__toggle, .nav.is-open .nav__toggle { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.35); }
  .nav.is-scrolled .nav__toggle span, .nav.is-open .nav__toggle span { background: var(--white); }
  .nav.is-open .nav__toggle span:nth-child(1) { top: 21px; transform: rotate(45deg); }
  .nav.is-open .nav__toggle span:nth-child(2) { top: 21px; transform: rotate(-45deg); }

  /* the menu: full-screen black, big capitals, links step in */
  .nav__links {
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 22px;
    padding: 0 var(--gutter);
    background: var(--black);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
  }
  html .nav__links a {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 34px;
    line-height: 1;
    letter-spacing: 0.12em;
    color: var(--white);
    padding: 6px 0;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1);
    transition-delay: 0s;
  }
  .nav__links a::after { height: 1px; }
  .nav.is-open { color: var(--white); }
  .nav.is-open .nav__mark { opacity: 1; transform: none; letter-spacing: 0.1em; pointer-events: auto; z-index: 2; }
  .nav.is-open .nav__links { opacity: 1; pointer-events: auto; }
  .nav.is-open .nav__links a { opacity: 1; transform: none; }
  .nav.is-open .nav__links a:nth-child(1) { transition-delay: .12s; }
  .nav.is-open .nav__links a:nth-child(2) { transition-delay: .18s; }
  .nav.is-open .nav__links a:nth-child(3) { transition-delay: .24s; }
  .nav.is-open .nav__links a:nth-child(4) { transition-delay: .3s; }
  .nav.is-open .nav__links a:nth-child(5) { transition-delay: .36s; }
  .nav.is-open::before { transform: scaleY(1); }
  html.menu-open { overflow: hidden; }
  html.menu-open .nav__progress { opacity: 0; }
  /* Phones: the hero fills the tallest viewport (toolbar collapsed) and pads its bottom by the toolbar
     height, so the black extends under Safari's translucent bar while the name stays in the visible area. */
  .hero {
    position: relative;
    height: auto;
    display: flex;
    flex-direction: column;
    --bar: calc(100lvh - 100svh + 96px + env(safe-area-inset-bottom, 0px));   /* generous cover for the browser's bottom bar */
    min-height: calc(100vh + 96px);
    min-height: calc(100lvh + var(--bar));                                     /* box is border-box, so the extra must be added here too */
    padding-bottom: var(--bar);
  }
  /* the photo frame takes every pixel above the name; the image fills it with a cover crop
     (absolute, not flex-stretched, because Safari won't stretch an image in a flex row) */
  .hero__media { position: relative; flex: 1 1 auto; min-height: 58svh; transform: none; }
  .hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 45%; }
  .hero::after { display: none; }
  html.is-settled .hero__intro, html.is-settled .hero__roles { opacity: 1; transform: none; }
  .hero__intro { position: static; padding: 20px var(--gutter) 12px; }
  .hero__intro { flex-direction: column; }
  .hero__roles { position: static; width: auto; writing-mode: horizontal-tb; transform: none; padding: 0 var(--gutter) 40px; background: transparent; gap: 12px; white-space: normal; flex-wrap: wrap; letter-spacing: 0.22em; font-size: 11px; }
  .hero__roles i { flex: 0 0 auto; width: 1px; height: 12px; margin: 0; }
  .hero__first, .hero__last { font-size: 56px; }
  .hero__roles { font-size: 11px; letter-spacing: 0.26em; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .sec-meta { text-align: left; }
  .gridV { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 34vw; gap: 4px; padding: 0 4px; }
  .gridV__item--big, .gridV__item--wide { grid-column: span 2; }
  .gridV__item--big, .gridV__item--tall { grid-row: span 1; }
  .lb__stage { max-width: calc(100vw - 32px); }
  .lb__img { max-height: calc(100vh - 140px); }
  .lb__nav { display: none; }
  .lb__close { top: 16px; right: 16px; }
  .tracks li { font-size: 22px; }
  .footer__grid { flex-direction: column; align-items: flex-start; }
  .footer__links { flex-wrap: wrap; gap: 16px 20px; }
}