/* ==========================================================================
   Nelson Beato — site styles
   Palette, type and spacing are defined once in :root; components below.
   ========================================================================== */

/* ---------- Tokens ---------- */

:root {
  color-scheme: dark;

  /* Colour — sampled from the original site, contrast raised where needed */
  --bg: #16120f;
  --bg-raised: #1f1a16;
  --ink: #ede6db;
  --ink-2: rgb(237 230 219 / 0.74);
  --ink-3: rgb(237 230 219 / 0.56);
  --line: rgb(237 230 219 / 0.12);
  --line-strong: rgb(237 230 219 / 0.26);
  --gold: #b69457;
  --gold-bright: #d2b277;

  /* Type */
  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "DM Serif Display", Georgia, "Times New Roman", serif;

  /* Layout */
  --max: 1360px;
  --pad: clamp(20px, 4.4vw, 64px);
  --bleed: max(var(--pad), (100vw - var(--max)) / 2 + var(--pad));
  --header-h: 84px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 1059px) {
  :root { --header-h: 68px; }
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
  position: relative;
  isolation: isolate;
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Fine film grain on the background only (sits behind all content). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  background-image: 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' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

a { color: inherit; text-decoration: none; }

button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

ul { margin: 0; padding: 0; list-style: none; }

h1, h2, p, figure { margin: 0; }

::selection { background: var(--gold); color: var(--bg); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--gold);
  color: var(--bg);
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform 0.3s var(--ease-out);
}
.skip-link:focus { transform: none; }

/* Small uppercase label used for eyebrows, nav and controls */
.eyebrow,
.label {
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-transform: uppercase;
}
.eyebrow { color: var(--gold); }

/* Serif ampersand inside the extended sans (Archivo's "&" reads like a 6 when small) */
.amp {
  font-family: var(--font-serif);
  font-weight: 400;
  font-stretch: 100%;
  letter-spacing: 0;
  font-size: 1.12em;
  line-height: 0;
  padding-inline: 0.04em;
}
.section-title .amp { color: var(--gold); padding-inline: 0.02em 0.08em; }

/* ---------- Buttons & links ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 52px;
  padding: 0 28px;
  border: 1px solid var(--gold);
  font-size: 0.8125rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: 0.75rem; }

.btn-primary { background: var(--gold); color: var(--bg); }
.btn-primary:hover { background: var(--gold-bright); border-color: var(--gold-bright); }

.btn-outline { color: var(--gold); border-color: rgb(182 148 87 / 0.6); }
.btn-outline:hover { background: var(--gold); border-color: var(--gold); color: var(--bg); }

.btn .arrow {
  width: 24px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  transition: transform 0.45s var(--ease-out);
}
.btn:hover .arrow { transform: translateX(4px); }

.text-link {
  position: relative;
  display: inline-block;
  padding: 10px 0;
  font-size: 0.8125rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.text-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.16em;
  bottom: 4px;
  height: 1px;
  background: var(--line-strong);
  transition: background-color 0.35s;
}
.text-link:hover::after { background: var(--gold); }

/* ---------- Social icons ---------- */

.social { display: flex; align-items: center; gap: 2px; }

.social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--ink-3);
  transition: color 0.3s;
}
.social a:hover { color: var(--gold-bright); }
.social svg { width: 18px; height: 18px; }

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header-h);
  border-bottom: 1px solid transparent;
  transition: transform 0.6s var(--ease-out), height 0.5s var(--ease-out), border-color 0.4s;
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(22 18 15 / 0.84);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  opacity: 0;
  transition: opacity 0.4s;
}

.site-header.is-scrolled { height: calc(var(--header-h) - 12px); border-bottom-color: var(--line); }
.site-header.is-scrolled::before { opacity: 1; }
.site-header.is-hidden { transform: translateY(-101%); }

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: 100%;
}

.brand { display: flex; align-items: center; gap: 22px; }

.wordmark {
  font-family: var(--font-serif);
  font-size: 1.625rem;
  line-height: 1;
  white-space: nowrap;
  transition: color 0.3s;
}
.wordmark:hover { color: var(--gold-bright); }

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(22px, 2.5vw, 40px);
}

.primary-nav a:not(.btn) {
  position: relative;
  display: block;
  padding: 10px 0;
  font-size: 0.8125rem;
  font-weight: 500;
  font-stretch: 112%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color 0.3s;
}

.primary-nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.16em;
  bottom: 3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease-out);
}

.primary-nav a:not(.btn):hover { color: var(--ink); }
.primary-nav a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left; }
.primary-nav a[aria-current="page"] { color: var(--gold); }
.primary-nav a[aria-current="page"]::after { transform: scaleX(1); }
.primary-nav .btn { margin-left: 4px; }

.menu-toggle {
  display: none;
  align-items: center;
  gap: 14px;
  height: 44px;
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.menu-toggle-icon { position: relative; width: 24px; height: 9px; }

.menu-toggle-icon::before,
.menu-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.45s var(--ease-out), top 0.45s var(--ease-out);
}
.menu-toggle-icon::before { top: 0; }
.menu-toggle-icon::after { top: calc(100% - 1.5px); }

.menu-toggle[aria-expanded="true"] .menu-toggle-icon::before { top: calc(50% - 0.75px); transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon::after { top: calc(50% - 0.75px); transform: rotate(-45deg); }

@media (max-width: 1239px) {
  .site-header .social { display: none; }
}

@media (max-width: 1059px) {
  .primary-nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .wordmark { font-size: 1.4375rem; }
}

/* ---------- Mobile menu ---------- */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: calc(var(--header-h) + 24px) var(--pad) calc(28px + env(safe-area-inset-bottom));
  overflow-y: auto;
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease-out), visibility 0s linear 0.45s;
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s var(--ease-out);
}

.mobile-menu nav a {
  display: block;
  padding: 8px 0;
  font-size: clamp(1.875rem, 8.4vw, 3.25rem);
  font-weight: 800;
  font-stretch: 125%;
  letter-spacing: 0.03em;
  line-height: 1.1;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease-out), transform 0.7s var(--ease-out), color 0.3s;
  transition-delay: calc(var(--i) * 45ms + 60ms);
}

.mobile-menu.is-open nav a { opacity: 1; transform: none; }
.mobile-menu nav a:hover { color: var(--gold-bright); }
.mobile-menu nav a[aria-current="page"] { color: var(--gold); }
.mobile-menu .social { margin-left: -10px; }

html.menu-open,
html.menu-open body { overflow: hidden; }

/* ---------- Reveal on scroll (only when JS is running) ---------- */

.js [data-reveal],
.js .credit-section .reveal-item {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out);
  transition-delay: var(--delay, 0ms);
}

.js [data-reveal].is-visible,
.js .credit-section.is-visible .reveal-item {
  opacity: 1;
  transform: none;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--header-h) + clamp(52px, 7.5vw, 116px));
  padding-bottom: clamp(36px, 4.5vw, 64px);
  text-align: center;
}

/* Soft warm light behind the title */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(46% 38% at 50% 38%, rgb(182 148 87 / 0.1), transparent 72%);
  pointer-events: none;
}

.hero-title {
  /* padding-left balances the trailing letter-spacing so the word is truly centred */
  padding-left: 0.07em;
  font-size: clamp(2.75rem, 8.6vw, 8.75rem);
  font-weight: 800;
  font-stretch: 125%;
  letter-spacing: 0.07em;
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--gold);
}

.hero-kicker {
  margin-top: clamp(20px, 2.4vw, 34px);
  padding-left: 0.48em;
  font-size: clamp(0.8125rem, 1.4vw, 1.25rem);
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: 0.48em;
  text-transform: uppercase;
}

.hero-lede {
  max-width: 46ch;
  margin: clamp(22px, 2.8vw, 34px) auto 0;
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  line-height: 1.65;
  color: var(--ink-2);
  text-wrap: balance;
}

.hero-index { margin-top: clamp(44px, 5.5vw, 76px); }

.hero-index ul { display: flex; justify-content: center; }
.hero-index li + li { border-left: 1px solid var(--line); }

.hero-index a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 4px clamp(18px, 2.6vw, 42px);
}

.hero-index-count {
  font-size: clamp(1.5rem, 2.3vw, 2.125rem);
  font-weight: 600;
  font-stretch: 125%;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  transition: color 0.3s;
}

.hero-index-label {
  font-size: 0.6875rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-3);
  transition: color 0.3s;
}

.hero-index a:hover .hero-index-count { color: var(--gold-bright); }
.hero-index a:hover .hero-index-label { color: var(--ink); }

@media (max-width: 899px) {
  .hero-index ul {
    display: block;
    max-width: 400px;
    margin-inline: auto;
    border-top: 1px solid var(--line);
  }
  .hero-index li { border-bottom: 1px solid var(--line); }
  .hero-index li + li { border-left: 0; }
  .hero-index a {
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    padding: 15px 2px;
  }
  .hero-index-count { font-size: 1.125rem; }
}

/* ---------- Credit sections + carousel ---------- */

.credit-section {
  --per-view: 4;
  --grid-cols: 6;
  --gap: clamp(14px, 1.7vw, 24px);
  --ratio: 4 / 5;
  padding-block: clamp(44px, 6vw, 88px);
  overflow-x: clip;
}

.credit-section[data-layout="landscape"] { --per-view: 3; --grid-cols: 4; --ratio: 16 / 9; }

@media (max-width: 1199px) {
  .credit-section { --per-view: 3; --grid-cols: 4; }
  .credit-section[data-layout="landscape"] { --per-view: 2; --grid-cols: 3; }
}
@media (max-width: 899px) {
  .credit-section { --per-view: 2.35; --grid-cols: 3; }
  .credit-section[data-layout="landscape"] { --per-view: 1.5; --grid-cols: 2; }
}
@media (max-width: 599px) {
  .credit-section { --per-view: 1.42; --grid-cols: 2; }
  .credit-section[data-layout="landscape"] { --per-view: 1.12; --grid-cols: 2; }
}

.credit-inner {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "title    toggle   nav"
    "carousel carousel carousel"
    "progress progress count"
    "more     more     more";
  align-items: end;
  column-gap: clamp(16px, 2.2vw, 32px);
}

.section-title {
  grid-area: title;
  font-size: clamp(1.75rem, 4.4vw, 4rem);
  font-weight: 800;
  font-stretch: 125%;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
  text-wrap: balance;
}

/* "View all" toggle */
.view-toggle {
  grid-area: toggle;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
  transition: color 0.3s;
}
.view-toggle:hover { color: var(--ink); }
.view-toggle-count { color: var(--gold); font-variant-numeric: tabular-nums; }
.view-toggle[aria-expanded="true"] .view-toggle-count { display: none; }

.view-toggle-icon {
  width: 12px;
  height: 12px;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 5px 5px,
    linear-gradient(currentColor, currentColor) 100% 0 / 5px 5px,
    linear-gradient(currentColor, currentColor) 0 100% / 5px 5px,
    linear-gradient(currentColor, currentColor) 100% 100% / 5px 5px;
  background-repeat: no-repeat;
  opacity: 0.8;
}

/* Prev / next arrows */
.carousel-nav { grid-area: nav; display: flex; }

.carousel-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 48px;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  transition: color 0.3s, border-color 0.3s, opacity 0.3s;
}
.carousel-btn + .carousel-btn { margin-left: -1px; }

.carousel-btn svg {
  width: 28px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  transition: transform 0.45s var(--ease-out);
}

.carousel-btn:hover:not([aria-disabled="true"]) { z-index: 1; color: var(--gold-bright); border-color: rgb(182 148 87 / 0.75); }
.carousel-btn[data-dir="prev"]:hover:not([aria-disabled="true"]) svg { transform: translateX(-4px); }
.carousel-btn[data-dir="next"]:hover:not([aria-disabled="true"]) svg { transform: translateX(4px); }
.carousel-btn[aria-disabled="true"] { opacity: 0.32; cursor: default; }

/* Scroller: aligned to the content edge on the left, bleeding to the viewport edge on the right */
.carousel {
  grid-area: carousel;
  position: relative;
  margin-top: clamp(26px, 3vw, 42px);
  margin-right: calc(-1 * var(--bleed));
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel:focus-visible { outline-offset: 8px; }
.carousel.is-animating,
.carousel.is-dragging { scroll-snap-type: none; }
.carousel.is-dragging { cursor: grabbing; user-select: none; }

@media (hover: hover) and (pointer: fine) {
  .credit-section:not(.is-static):not([data-expanded="true"]) .carousel { cursor: grab; }
  .credit-section:not(.is-static):not([data-expanded="true"]) .carousel.is-dragging { cursor: grabbing; }
}

/* Cards past the content edge fade toward the background: a hint of what's next */
.credit-inner::after {
  content: "";
  grid-area: carousel;
  justify-self: end;
  align-self: stretch;
  z-index: 1;
  width: var(--bleed);
  margin-top: clamp(26px, 3vw, 42px);
  margin-right: calc(-1 * var(--bleed));
  background: linear-gradient(90deg, rgb(22 18 15 / 0), rgb(22 18 15 / 0.82));
  pointer-events: none;
}

.carousel-track { display: flex; gap: var(--gap); }

/* Trailing space so the last card can line up with the content edge */
.carousel-track::after {
  content: "";
  flex: 0 0 max(1px, calc(var(--bleed) - var(--gap)));
}

/* Progress line + counter */
.carousel-progress {
  grid-area: progress;
  position: relative;
  align-self: center;
  height: 2px;
  margin-top: clamp(24px, 2.8vw, 34px);
  overflow: hidden;
  background: linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat;
}

.carousel-thumb {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--visible, 0.25) * 100%);
  background: var(--gold);
  transform: translateX(calc(var(--progress, 0) * (100% / var(--visible, 0.25) - 100%)));
}

.carousel-count {
  grid-area: count;
  margin-top: clamp(24px, 2.8vw, 34px);
  padding-left: 20px;
  font-size: 0.75rem;
  font-weight: 500;
  font-stretch: 112%;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink-3);
}
.carousel-count [data-range] { color: var(--ink); }

/* Collapse button shown at the end of an expanded grid */
.collapse-more {
  grid-area: more;
  justify-self: center;
  display: none;
  margin-top: clamp(36px, 4vw, 56px);
}

/* Everything fits on screen: no controls needed */
.credit-section.is-static .view-toggle,
.credit-section.is-static .carousel-nav,
.credit-section.is-static .carousel-progress,
.credit-section.is-static .carousel-count { display: none; }

/* Expanded "View all" grid */
.credit-section[data-expanded="true"] .carousel {
  margin-right: 0;
  overflow: visible;
  scroll-snap-type: none;
}
.credit-section[data-expanded="true"] .carousel-track {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  row-gap: clamp(26px, 3vw, 44px);
}
.credit-section[data-expanded="true"] .carousel-track::after,
.credit-section[data-expanded="true"] .credit-inner::after,
.credit-section.is-static .credit-inner::after,
.credit-section[data-expanded="true"] .carousel-nav,
.credit-section[data-expanded="true"] .carousel-progress,
.credit-section[data-expanded="true"] .carousel-count { display: none; }
.credit-section[data-expanded="true"] .collapse-more { display: inline-flex; }
.credit-section[data-expanded="true"] .credit-card {
  animation: card-in 0.7s var(--ease-out) both;
  animation-delay: calc(min(var(--i), 16) * 24ms);
}
.credit-section[data-expanded="true"] .credit-name { font-size: 0.9375rem; }

@keyframes card-in {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
}

/* Phones: "View all" sits under the title, full-bleed scroller, arrows move under the cards */
@media (max-width: 719px) {
  .credit-inner {
    grid-template-areas:
      "title    title    title"
      "toggle   toggle   toggle"
      "carousel carousel carousel"
      "progress count    nav"
      "more     more     more";
  }
  .view-toggle { justify-self: start; min-height: 40px; margin-top: 6px; }
  .credit-inner::after { display: none; }
  .carousel {
    margin-top: 16px;
    margin-inline: calc(-1 * var(--pad));
    padding-inline-start: var(--pad);
    scroll-padding-inline-start: var(--pad);
  }
  .carousel-track::after { flex-basis: max(1px, calc(var(--pad) - var(--gap))); }
  .carousel-nav { margin-top: 22px; }
  .carousel-btn { width: 50px; height: 44px; }
  .carousel-count { padding-inline: 16px; }
  .credit-section[data-expanded="true"] .carousel { margin-inline: 0; padding-inline-start: 0; }
}

/* ---------- Credit card ---------- */

.credit-card {
  flex: 0 0 calc((100cqi - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
  min-width: 0;
  scroll-snap-align: start;
}

.credit-media {
  position: relative;
  aspect-ratio: var(--ratio);
  overflow: hidden;
  background: var(--bg-raised);
}

/* Hairline edge so dark photos don't melt into the background */
.credit-media::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgb(237 230 219 / 0.07);
  pointer-events: none;
}

.credit-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  -webkit-user-drag: none;
  user-select: none;
  transition: transform 1.4s var(--ease-out), opacity 0.8s var(--ease-out);
}
.js .credit-media img { opacity: 0; }
.js .credit-media img.is-loaded { opacity: 1; }

.credit-caption {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 12px;
  margin-top: 14px;
  padding-top: 13px;
}

/* Hairline above the caption that draws in gold on hover */
.credit-caption::before,
.credit-caption::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
}
.credit-caption::before { background: var(--line); }
.credit-caption::after {
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s var(--ease-out);
}

.credit-name {
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  font-weight: 500;
  line-height: 1.35;
}

.credit-num {
  font-size: 0.6875rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}

.credit-note {
  grid-column: 1 / -1;
  margin-top: 5px;
  font-size: 0.6875rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Resting photos sit slightly dimmed (as on the original site) and lift on hover */
@media (hover: hover) and (pointer: fine) {
  .credit-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--bg);
    opacity: 0.2;
    pointer-events: none;
    transition: opacity 0.7s var(--ease-out);
  }
  .credit-card:hover .credit-media::before { opacity: 0; }
  .credit-card:hover .credit-media img { transform: scale(1.045); }
  .credit-card:hover .credit-caption::after { transform: scaleX(1); }
}

/* ---------- Photo galleries ---------- */

.photo-section { padding-block: clamp(44px, 6vw, 88px); }

.photo-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 32px;
  margin-bottom: clamp(24px, 3vw, 40px);
}

.photo-count {
  padding-bottom: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}

/* Justified rows: each photo grows in proportion to its width, so rows end flush
   and every photo keeps its full shape (no cropping). */
.gallery {
  --row-h: 300px;
  --gap: clamp(6px, 0.8vw, 12px);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}

/* Soaks up the spare room on the last row so it isn't stretched */
.gallery::after { content: ""; flex-grow: 100000; }

.photo {
  position: relative;
  flex-grow: calc(var(--ar) * 100);
  flex-basis: calc(var(--ar) * var(--row-h));
  min-width: 0;
  overflow: hidden;
  background: var(--bg-raised);
}
.photo[hidden] { display: none; }

.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgb(237 230 219 / 0.07);
  pointer-events: none;
}

.photo-link { position: relative; display: block; aspect-ratio: var(--ar); }
.photo-link:focus-visible { outline-offset: -3px; }

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  transition: transform 1.2s var(--ease-out), opacity 0.8s var(--ease-out);
}
.js .photo img { opacity: 0; }
.js .photo img.is-loaded { opacity: 1; }

.photo-caption {
  position: absolute;
  inset: auto 0 0;
  padding: 30px 12px 10px;
  background: linear-gradient(rgb(14 11 9 / 0), rgb(14 11 9 / 0.78));
  font-size: 0.625rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .photo-link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--bg);
    opacity: 0.16;
    pointer-events: none;
    transition: opacity 0.7s var(--ease-out);
  }
  .photo:hover .photo-link::before { opacity: 0; }
  .photo:hover img { transform: scale(1.04); }
}

.photo.is-new {
  animation: card-in 0.7s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 30ms);
}

.gallery-more {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 3.5vw, 44px);
}
.gallery-more .btn[hidden] { display: none; }

@media (max-width: 1199px) { .gallery { --row-h: 250px; } }
@media (max-width: 899px) { .gallery { --row-h: 210px; } }
@media (max-width: 599px) { .gallery { --row-h: 150px; } }

/* ---------- Full-screen photo viewer ---------- */

html.lightbox-open { overflow: hidden; }

.lightbox {
  --lb-x: clamp(16px, 6vw, 112px);
  --lb-top: clamp(68px, 9vh, 96px);
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: rgb(14 11 9 / 0.97);
  color: var(--ink);
}
.lightbox[open] {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  animation: lightbox-in 0.35s var(--ease-out);
}
.lightbox::backdrop { background: rgb(0 0 0 / 0.6); }

@keyframes lightbox-in {
  from { opacity: 0; }
}

.lightbox-stage { position: relative; min-height: 0; touch-action: pan-y; }

/* Centred and scaled to fit the space above the controls */
.lightbox-img {
  position: absolute;
  inset: var(--lb-top) var(--lb-x) 12px;
  max-width: calc(100% - 2 * var(--lb-x));
  max-height: calc(100% - var(--lb-top) - 12px);
  margin: auto;
  opacity: 0;
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.45);
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity 0.45s var(--ease-out);
}
.lightbox-img.is-loaded { opacity: 1; }

.lightbox-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 14px var(--lb-x) calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}

.lightbox-info {
  display: flex;
  align-items: baseline;
  gap: 18px;
  min-width: 0;
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.lightbox-caption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lightbox-caption:empty { display: none; }
.lightbox-count { font-variant-numeric: tabular-nums; color: var(--ink-3); white-space: nowrap; }

.lightbox-close {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line-strong);
  transition: color 0.3s, border-color 0.3s;
}
.lightbox-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.lightbox-close:hover { color: var(--gold-bright); border-color: rgb(182 148 87 / 0.75); }

/* ---------- Booking ---------- */

.booking {
  padding-block: clamp(72px, 10vw, 160px);
  border-top: 1px solid var(--line);
}

.booking-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(48px, 7vw, 112px);
}

/* The photo uses the shared gold-edge treatment (.framed, further down) */
.booking-media { max-width: 440px; }

.booking-title {
  margin-top: 20px;
  font-size: clamp(2.25rem, 5vw, 4.75rem);
  font-weight: 800;
  font-stretch: 125%;
  letter-spacing: 0.03em;
  line-height: 1;
  text-transform: uppercase;
  text-wrap: balance;
}
.booking-title em { font-style: normal; color: var(--gold); }

.booking-text {
  max-width: 38ch;
  margin-top: 26px;
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  line-height: 1.65;
  color: var(--ink-2);
}

.booking-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 32px;
  margin-top: 40px;
}

@media (max-width: 859px) {
  .booking-inner { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Footer ---------- */

.site-footer {
  padding: clamp(48px, 6vw, 80px) 0 calc(28px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px 48px;
}

.footer-wordmark {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  line-height: 1;
  transition: color 0.3s;
}
.footer-wordmark:hover { color: var(--gold-bright); }

.footer-nav ul { display: flex; flex-wrap: wrap; gap: 8px 28px; }

.footer-nav a {
  display: block;
  padding: 6px 0;
  font-size: 0.75rem;
  font-weight: 500;
  font-stretch: 112%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color 0.3s;
}
.footer-nav a:hover,
.footer-nav a[aria-current="page"] { color: var(--ink); }

.site-footer .social { margin-right: -10px; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: clamp(36px, 5vw, 60px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.to-top {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color 0.3s;
}
.to-top svg {
  width: 10px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  transition: transform 0.45s var(--ease-out);
}
.to-top:hover { color: var(--gold-bright); }
.to-top:hover svg { transform: translateY(-3px); }

@media (max-width: 719px) {
  .footer-top { flex-direction: column; align-items: flex-start; }
  .site-footer .social { margin-left: -10px; margin-right: 0; }
}

.noscript { padding-block: 48px; color: var(--ink-2); text-align: center; }

/* ==========================================================================
   Main Page, About Me, Music and Contact
   ========================================================================== */

/* ---------- Shared pieces ---------- */

/* The name, set tight and heavy as on the original Main Page and About Me */
.display-name {
  font-size: clamp(3.5rem, 9.2vw, 8.75rem);
  font-weight: 800;
  font-stretch: 100%;
  letter-spacing: -0.025em;
  line-height: 0.88;
  text-transform: uppercase;
}

.rule {
  display: block;
  width: 64px;
  height: 1px;
  background: var(--gold);
}

.section { padding-block: clamp(72px, 9vw, 140px); }
.section + .section { border-top: 1px solid var(--line); }

.section-head {
  margin-bottom: clamp(36px, 4.5vw, 64px);
  text-align: center;
}
.section-head .rule { width: 48px; margin: 20px auto 0; }

/* Portrait with a solid gold "projection": a gold copy of the photo offset down and to
   the right, showing as an even strip along the right side and the bottom (after the
   gold edge on the original About Me photo). On first view the photo starts covered in
   gold; the gold wipes off to the right, then the projection slides out from behind.
   Without JavaScript (or with reduced motion) the photo simply shows with its projection. */
.framed {
  --edge: clamp(8px, 0.9vw, 12px);
  position: relative;
  isolation: isolate;
  margin: 0 var(--edge) var(--edge) 0;
}
.framed img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--bg-raised);
}

/* The projection */
.framed::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(160deg, var(--gold-bright), var(--gold) 45%, #9a783c);
  transform: translate(var(--edge), var(--edge));
}

/* The gold cover that wipes away to reveal the photo */
.framed::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--gold);
  clip-path: inset(0 0 0 100%);
  pointer-events: none;
}

.js .framed[data-reveal]::after {
  clip-path: inset(0);
  transition: clip-path 1.15s cubic-bezier(0.77, 0, 0.18, 1) 0.4s;
}
.js .framed[data-reveal].is-visible::after { clip-path: inset(0 0 0 100%); }

.js .framed[data-reveal]::before {
  transform: none;
  transition: transform 0.9s var(--ease-out) 1.25s;
}
.js .framed[data-reveal].is-visible::before { transform: translate(var(--edge), var(--edge)); }

/* Cards: "What I Do" on the Main Page and the two disciplines on Music */
.pillars {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: clamp(14px, 1.7vw, 24px);
}
.pillars-two { --cols: 2; max-width: 1040px; margin-inline: auto; }

.pillar {
  padding: clamp(36px, 3.6vw, 56px) clamp(20px, 2.2vw, 36px);
  border: 1px solid var(--line);
  background: linear-gradient(rgb(237 230 219 / 0.025), rgb(237 230 219 / 0));
  text-align: center;
  transition: border-color 0.6s var(--ease-out);
}

.pillar-num {
  font-size: 0.6875rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}

.pillar-title {
  margin: 16px 0 0;
  font-size: clamp(1.125rem, 1.5vw, 1.4375rem);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: 0.06em;
  line-height: 1.15;
  text-transform: uppercase;
  text-wrap: balance;
}

.pillar-text {
  max-width: 32ch;
  margin: 18px auto 0;
  line-height: 1.65;
  color: var(--ink-2);
  text-wrap: pretty;
}

.pillar .rule {
  width: 36px;
  margin: 30px auto 0;
  transition: width 0.7s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .pillar:hover { border-color: rgb(182 148 87 / 0.45); }
  .pillar:hover .rule { width: 72px; }
}

/* One per row before any title would have to wrap, so the cards always match */
@media (max-width: 979px) {
  .pillars,
  .pillars-two { --cols: 1; max-width: 560px; margin-inline: auto; }
}

/* ---------- Main Page: hero ---------- */

.home-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: max(640px, min(100svh, 1400px));
  padding-top: calc(var(--header-h) + 48px);
  padding-bottom: clamp(64px, 10vh, 120px);
  overflow: hidden;
}

.home-hero-media,
.home-hero-media img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}
/* The full-width shot from the Wix Main Page. On narrower screens the crop trims the
   left edge first, so Nelson ends up to the right of the text. */
.home-hero-media img { object-fit: cover; object-position: 7% 30%; }

/* Shade behind the text (it follows the text column on very wide screens), a light
   overall dim as on the original, and fades under the header and into the page below */
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, var(--bg) 0%, rgb(22 18 15 / 0) 26%),
    linear-gradient(rgb(22 18 15 / 0.7) 0%, rgb(22 18 15 / 0) 22%),
    linear-gradient(90deg, rgb(22 18 15 / 0.86) 0, rgb(22 18 15 / 0.6) calc(var(--bleed) + 360px), rgb(22 18 15 / 0) calc(var(--bleed) + 720px)),
    rgb(22 18 15 / 0.16);
}

.home-hero-copy { max-width: 620px; }
.home-hero .display-name { margin-top: 22px; font-size: clamp(3.5rem, 8.4vw, 8rem); }

.home-hero-lede {
  max-width: 34ch;
  margin-top: 30px;
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  line-height: 1.6;
  color: rgb(237 230 219 / 0.86);
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 16px;
  margin-top: 40px;
}

/* Portrait screens: the tall crop sits at the top (2:3, full width) and fades into the
   page; the text starts below Nelson's face and hands instead of covering them. */
@media (max-aspect-ratio: 4 / 5) {
  .home-hero {
    min-height: 0;
    padding-top: min(100vw, 580px);
    padding-bottom: clamp(56px, 8vh, 88px);
  }
  /* Fades out (rather than to a flat colour) so the page's grain carries on without a seam */
  .home-hero-media {
    bottom: auto;
    height: min(150vw, 860px);
    -webkit-mask-image: linear-gradient(#000 48%, transparent 98%);
    mask-image: linear-gradient(#000 48%, transparent 98%);
  }
  .home-hero-media img { object-position: 50% 0%; }
  .home-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to top, rgb(22 18 15 / 0.85) 0%, rgb(22 18 15 / 0.5) 30%, rgb(22 18 15 / 0) 50%),
      linear-gradient(rgb(22 18 15 / 0.6) 0%, rgb(22 18 15 / 0) 16%);
  }
  .home-hero::before { content: none; }
}

@media (max-width: 479px) {
  .hero-actions .btn { flex: 1 1 100%; }
}

/* ---------- Main Page: stages band ---------- */

.stages {
  padding-block: clamp(32px, 4vw, 52px);
  border-block: 1px solid var(--line);
  text-align: center;
}

.stages-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 22px;
  border-top: 1px solid var(--line);
}

.stages-list li {
  padding: 16px 8px;
  border-bottom: 1px solid var(--line);
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.14em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--ink-2);
}

@media (max-width: 899px) { .stages-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .stages-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stages-list li { padding-block: 12px; font-size: 0.6875rem; }
}

/* ---------- Main Page: selected credits ---------- */

.featured-head { margin-bottom: 0; }
.featured-head .section-title { margin-top: 18px; }

.featured-lede {
  max-width: 44ch;
  margin: 20px auto 0;
  color: var(--ink-2);
  text-wrap: balance;
}

.featured-more {
  display: flex;
  justify-content: center;
  margin-top: clamp(36px, 4vw, 56px);
}

.featured-grid {
  --ratio: 4 / 5;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(14px, 1.7vw, 24px);
  margin-top: clamp(28px, 3vw, 42px);
}
.featured-grid a { display: block; }

@media (max-width: 1059px) { .featured-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) { .featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- About Me + Contact: text beside photo (as on the original pages) ---------- */

.split-hero {
  padding-top: calc(var(--header-h) + clamp(40px, 5vw, 88px));
  padding-bottom: clamp(72px, 8vw, 128px);
}

.split-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(48px, 6vw, 104px);
  max-width: 1280px;
}

.split-hero-media { justify-self: end; width: 100%; max-width: 560px; }

/* Contact: the photo leads the page */
.split-hero-photo .split-hero-inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.split-hero-photo .split-hero-media { max-width: 640px; }

/* The large, widely spaced "About Me" label from the original */
.eyebrow-lg { font-size: clamp(0.875rem, 1.2vw, 1.25rem); letter-spacing: 0.32em; }

.split-hero .display-name { margin-top: 22px; font-size: clamp(3.25rem, 7.2vw, 7.5rem); }
.split-hero .contact-title { font-size: clamp(2.75rem, 5vw, 5rem); }

.roles {
  margin-top: 30px;
  font-size: clamp(0.9375rem, 1.35vw, 1.3125rem);
  font-weight: 800;
  font-stretch: 125%;
  letter-spacing: 0.07em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--gold);
}
.roles span { white-space: nowrap; }

.split-hero .rule { margin-top: 34px; }

.split-hero-lede {
  max-width: 38ch;
  margin-top: 30px;
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  line-height: 1.6;
  color: var(--ink);
  text-wrap: pretty;
}

.split-hero .contact-list { margin-top: 40px; }

@media (max-width: 859px) {
  .split-hero-inner,
  .split-hero-photo .split-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .split-hero-media,
  .split-hero-photo .split-hero-media { justify-self: start; max-width: 460px; }
}

/* ---------- About Me: biography ---------- */

.bio { border-top: 1px solid var(--line); }

.bio-roles {
  max-width: 26em;
  margin: 22px auto 0;
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  font-weight: 800;
  font-stretch: 125%;
  letter-spacing: 0.03em;
  line-height: 1.3;
  text-transform: uppercase;
  text-wrap: balance;
}
.bio-roles span { white-space: nowrap; }

/* Four quick facts in a row, between the heading and the story */
.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1080px;
  margin: 0 auto clamp(48px, 6vw, 80px);
  border-block: 1px solid var(--line);
  text-align: center;
}
.facts div { padding: 22px clamp(12px, 1.6vw, 24px); }
.facts div + div { border-left: 1px solid var(--line); }

.facts dt {
  font-size: 0.6875rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.facts dd {
  margin: 8px 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: balance;
}

@media (max-width: 859px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts div:nth-child(3) { border-left: 0; }
  .facts div:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 479px) {
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts div + div { border-left: 0; border-top: 1px solid var(--line); }
}

/* The full biography: one centered reading column */
.prose { max-width: 68ch; margin-inline: auto; }

.prose p {
  font-size: clamp(1.0625rem, 1.15vw, 1.1875rem);
  line-height: 1.8;
  color: var(--ink-2);
  text-wrap: pretty;
}
.prose p + p { margin-top: 1.4em; }

.prose .lead {
  font-size: clamp(1.25rem, 1.65vw, 1.5rem);
  line-height: 1.6;
  color: var(--ink);
}

/* ---------- Music: tracks ---------- */

.tracks { padding: clamp(16px, 2vw, 32px) 0 clamp(72px, 9vw, 140px); }

.track-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(36px, 4vw, 56px) clamp(20px, 3vw, 48px);
  max-width: 1040px;
  margin-inline: auto;
}

.track-cover {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--bg-raised);
}

/* Hairline edge, as on the credit photos */
.track-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgb(237 230 219 / 0.07);
  pointer-events: none;
}

.track-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: transform 1.4s var(--ease-out), opacity 0.8s var(--ease-out);
}
.track-cover img.is-loaded { opacity: 1; }

/* No cover art yet: a monogram on warm dark */
.track-cover.no-art {
  display: grid;
  place-items: center;
  background: radial-gradient(70% 70% at 50% 40%, rgb(182 148 87 / 0.14), transparent 70%), var(--bg-raised);
}
.track-cover.no-art::before {
  content: "NB";
  font-family: var(--font-serif);
  font-size: clamp(4rem, 9vw, 7rem);
  line-height: 1;
  color: rgb(182 148 87 / 0.55);
}

.track-play {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--bg);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.35);
  transition: background-color 0.3s, transform 0.45s var(--ease-out);
}
.track-play svg { width: 22px; height: 22px; fill: currentColor; }
.track-play:hover:not(:disabled) { background: var(--gold-bright); transform: scale(1.06); }
.track-play:focus-visible { outline-offset: 3px; }
.track-play:disabled {
  background: rgb(22 18 15 / 0.72);
  color: var(--ink-3);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  cursor: default;
}

.track-body { position: relative; margin-top: 16px; padding-top: 16px; }

/* Hairline above the title that draws in gold while the track plays */
.track-body::before,
.track-body::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
}
.track-body::before { background: var(--line); }
.track-body::after {
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s var(--ease-out);
}

.track-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.track-title {
  margin: 0;
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  font-weight: 700;
  font-stretch: 112%;
  line-height: 1.2;
}

.track-num {
  font-size: 0.6875rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}

.track-artist {
  margin-top: 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.track-scrub {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.track-time {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}

.track-status:empty { display: none; }
.track-status {
  margin-top: 12px;
  font-size: 0.6875rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Seek bar: a hairline that fills in gold */
.track-range {
  --p: 0%;
  width: 100%;
  height: 24px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.track-range:disabled { cursor: default; opacity: 0.5; }
.track-range:focus-visible { outline-offset: 2px; }

.track-range::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(var(--gold), var(--gold)) 0 0 / var(--p) 100% no-repeat, var(--line-strong);
}
.track-range::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  margin-top: -5px;
  border: 0;
  border-radius: 50%;
  background: var(--gold-bright);
  opacity: 0;
  transition: opacity 0.3s;
  -webkit-appearance: none;
  appearance: none;
}
.track-range::-moz-range-track { height: 2px; background: var(--line-strong); }
.track-range::-moz-range-progress { height: 2px; background: var(--gold); }
.track-range::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: var(--gold-bright);
  opacity: 0;
  transition: opacity 0.3s;
}

.track.is-playing .track-range::-webkit-slider-thumb,
.track-range:hover::-webkit-slider-thumb,
.track-range:focus-visible::-webkit-slider-thumb { opacity: 1; }
.track.is-playing .track-range::-moz-range-thumb,
.track-range:hover::-moz-range-thumb,
.track-range:focus-visible::-moz-range-thumb { opacity: 1; }
.track-range:disabled::-webkit-slider-thumb { opacity: 0; }
.track-range:disabled::-moz-range-thumb { opacity: 0; }

.track.is-playing .track-body::after { transform: scaleX(1); }
.track.is-playing .track-cover img { transform: scale(1.03); }

@media (hover: hover) and (pointer: fine) {
  .track:not(.is-unavailable):hover .track-cover img { transform: scale(1.03); }
}

/* ---------- Contact ---------- */

.contact-list {
  max-width: 520px;
  margin-top: 28px;
  border-top: 1px solid var(--line);
}

.contact-row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 20px;
  min-height: 72px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.contact-row[hidden] { display: none; }

.contact-label {
  font-size: 0.6875rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.contact-email {
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  font-weight: 500;
  overflow-wrap: anywhere;
  transition: color 0.3s;
}
.contact-email:hover { color: var(--gold-bright); }

.copy-btn {
  min-height: 40px;
  font-size: 0.6875rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  transition: color 0.3s;
}
.copy-btn:hover { color: var(--gold-bright); }
.copy-btn[hidden] { display: none; }

.contact-row .social { margin-left: -10px; }

/* On the Contact page itself, the header's Contact button shows as selected */
.primary-nav .btn[aria-current="page"] { background: var(--gold); border-color: var(--gold); color: var(--bg); }

@media (max-width: 479px) {
  .contact-row { grid-template-columns: minmax(0, 1fr) auto; }
  .contact-label { grid-column: 1 / -1; }
}

/* ---------- Footer brand: wordmark, tagline, social icons ---------- */

.site-footer .footer-top { align-items: flex-start; }
.site-footer .footer-nav { padding-top: 4px; }

.footer-brand { display: grid; justify-items: start; gap: 14px; }
.footer-mark { width: 72px; height: auto; margin-bottom: 10px; }
.site-footer .footer-brand .social { margin: 4px 0 0 -10px; }

.footer-tagline {
  font-size: 0.6875rem;
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: 0.2em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- Very small phones (about 320 px wide) ---------- */

@media (max-width: 359px) {
  .hero-title { font-size: 2.25rem; }
  .section-title { font-size: 1.5rem; }
  .bio-roles { font-size: 1.0625rem; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .js [data-reveal],
  .js .credit-section .reveal-item { opacity: 1; transform: none; }
}