/* ============================================================
   Jim English Music — design tokens
   Palette pulled from the studio itself: near-black room,
   neon-coral OPEN signage, warm piano-string gold, ivory paper.
   ============================================================ */
:root {
  --bg: #0b0b0c;
  --bg-raised: #141315;
  --bg-raised-2: #1b191a;
  --fg: #f3efe9;
  --fg-dim: #9c968e;
  --fg-faint: #6b6660;
  --accent: #ff5a4e;
  --accent-dim: #b8433a;
  --gold: #d9a94e;
  --line: rgba(243, 239, 233, 0.12);
  --line-strong: rgba(243, 239, 233, 0.22);

  --font-display: "Fraunces", Georgia, serif;
  --font-ui: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1320px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* organic, off-circle fade for the hero portrait. Each blob's radius
     is kept small enough, relative to its own distance to the nearest
     box edge, that its gradient actually finishes (reaches true zero)
     before the edge — an oversized radius here does the opposite of
     what it looks like it should: the "transparent" stop is a percent
     of the radius itself, so a too-large ellipse never fully fades out
     inside the box and leaves a faint hard-ish edge. Several small,
     safely-sized blobs at different centers union into one irregular,
     edge-safe silhouette instead of a single circular vignette. */
  --sound-mask:
    radial-gradient(ellipse 44% 34% at 52% 38%, black 30%, transparent 96%),
    radial-gradient(ellipse 40% 32% at 46% 62%, black 22%, transparent 96%),
    radial-gradient(ellipse 24% 30% at 28% 50%, black 16%, transparent 96%),
    radial-gradient(ellipse 26% 18% at 68% 22%, black 12%, transparent 96%);
}

* { box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }

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

::selection { background: var(--accent); color: #0b0b0c; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.eyebrow {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.01em;
}

em, .italic { font-style: italic; font-family: var(--font-display); }

p { margin: 0 0 1em; color: var(--fg-dim); max-width: 62ch; }

/* ---------------- nav ---------------- */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem var(--gutter);
  background: linear-gradient(180deg, rgba(11,11,12,0.85), rgba(11,11,12,0));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.mark {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--fg);
}

.mark .dial {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--fg);
  position: relative;
  flex: none;
}
.mark .dial::after {
  content: "";
  position: absolute;
  top: 3px; left: 50%;
  width: 1.5px; height: 8px;
  background: var(--fg);
  transform: translateX(-50%);
}

.nav-links {
  display: flex;
  gap: clamp(1.2rem, 2vw, 2.4rem);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nav-links a {
  position: relative;
  padding-bottom: 3px;
  color: var(--fg);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ---------------- hero / waveform ---------------- */
.hero {
  position: relative;
  min-height: 88svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding-top: 6rem;
  padding-bottom: 1.5rem;
}

#waveform {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.55;
}

.hero-inner { position: relative; z-index: 2; }

.hero h1 {
  font-size: clamp(2.4rem, 6.4vw, 5.6rem);
  line-height: 1.02;
  max-width: 16ch;
}

.hero .lede {
  margin-top: 1.6rem;
  max-width: 46ch;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
}

.hero-meta {
  margin-top: 2.6rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--fg);
  padding: 0.95rem 1.6rem;
  border-radius: 999px;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.btn:hover { background: var(--accent); color: var(--fg); transform: translateY(-2px); }

.btn-ghost {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--line-strong);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

/* ---------------- sections ---------------- */
section { position: relative; padding: clamp(4rem, 9vw, 7.5rem) 0; }

.cta-band { padding-top: clamp(1.5rem, 4vw, 2.5rem); }

.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

.rule-gold {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent 60%);
}

/* ---------------- sound scene ---------------- */
.story-split { padding-top: clamp(0.25rem, 1vw, 0.75rem); padding-bottom: clamp(1rem, 2.5vw, 1.8rem); }
.selected-work { padding-top: clamp(1rem, 2.5vw, 1.8rem); }
.story-split-grid {
  display: grid;
  grid-template-columns: minmax(220px, 360px) 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

.sound-frame {
  position: relative;
  overflow: visible;
  width: 100%;
  aspect-ratio: 4 / 4.3;
  max-width: 360px;
  margin: 0;
}

.sound-crown {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 34% 20% at 54% 16%, rgba(60,42,29,0.95), transparent 72%),
    radial-gradient(ellipse 24% 15% at 42% 13%, rgba(24,17,12,0.92), transparent 70%),
    radial-gradient(ellipse 20% 13% at 64% 17%, rgba(46,32,22,0.75), transparent 70%);
  filter: blur(24px);
  pointer-events: none;
}

.sound-photo { position: absolute; inset: 0; }
.sound-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(1) contrast(1.1) brightness(0.94);
  display: block;
  -webkit-mask-image: var(--sound-mask);
  mask-image: var(--sound-mask);
}
.sound-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(217,169,78,0.18), rgba(255,90,78,0.12) 55%, transparent 78%);
  mix-blend-mode: color;
  pointer-events: none;
  -webkit-mask-image: var(--sound-mask);
  mask-image: var(--sound-mask);
}

.sound-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.sound-fx stop.s1 { stop-color: var(--gold); stop-opacity: 0.5; }
.sound-fx stop.s2 { stop-color: var(--gold); stop-opacity: 0; }

.sound-fx .aura {
  fill: url(#auraGradient);
  animation: aura-breathe 4.5s ease-in-out infinite;
  transform-origin: 555px 150px;
}
@keyframes aura-breathe {
  0%, 100% { opacity: 0.35; transform: scale(0.92); }
  50% { opacity: 0.6; transform: scale(1.08); }
}

.sound-fx .steam {
  fill: #ffffff;
  opacity: 0;
  filter: blur(5px);
  animation: steam-rise 24s ease-out forwards;
}
.sound-fx .steam.gold { fill: #f3d99a; }
.sound-fx .steam.accent { fill: #ffb3ab; }
@keyframes steam-rise {
  0% { opacity: 0; transform: translate(0,0) scale(0.6,0.6); }
  16% { opacity: 0.5; transform: translate(calc(var(--dx,20px) * 0.25), calc(var(--dy,-160px) * 0.2)) scale(0.85,1); }
  72% { opacity: 0.44; transform: translate(calc(var(--dx,20px) * 0.82), calc(var(--dy,-160px) * 0.82)) scale(1.4,1.9); }
  100% { opacity: 0; transform: translate(var(--dx,20px), var(--dy,-160px)) scale(1.8,2.6); }
}

.sound-fx .dot {
  fill: #ffffff;
  opacity: 0;
  filter: blur(1.6px);
  animation: dot-drift 19s ease-out forwards;
}
.sound-fx .dot.gold { fill: #f3d99a; }
.sound-fx .dot.accent { fill: #ffb3ab; }
@keyframes dot-drift {
  0% { opacity: 0; transform: translate(0,0) scale(0.6); }
  15% { opacity: 0.85; }
  72% { opacity: 0.78; transform: translate(calc(var(--dx,15px) * 0.82), calc(var(--dy,-110px) * 0.82)) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx,15px), var(--dy,-110px)) scale(1); }
}

.sound-red-highlights {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 18%, rgba(255,0,0,0.4), transparent 28%),
    radial-gradient(circle at 80% 30%, rgba(255,0,0,0.3), transparent 26%),
    radial-gradient(circle at 18% 66%, rgba(255,0,0,0.36), transparent 30%),
    radial-gradient(circle at 60% 78%, rgba(255,0,0,0.26), transparent 24%),
    radial-gradient(circle at 45% 45%, rgba(255,0,0,0.2), transparent 30%);
  mix-blend-mode: color;
  pointer-events: none;
  -webkit-mask-image: var(--sound-mask);
  mask-image: var(--sound-mask);
}

@media (prefers-reduced-motion: reduce) {
  .sound-fx .aura { animation: none; opacity: 0.45; }
  .sound-fx .steam, .sound-fx .dot { display: none; }
}

@media (max-width: 700px) {
  .story-split-grid { grid-template-columns: 1fr; }
  .sound-frame { border-radius: 10px; aspect-ratio: 4 / 4.6; max-width: 300px; margin: 0 auto; }
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.6rem;
  flex-wrap: wrap;
}

.section-head h2 {
  font-size: clamp(1.7rem, 3vw, 2.6rem);
}

/* ---------------- work grid ---------------- */
.tile {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-raised);
  cursor: pointer;
  isolation: isolate;
}

.tile img, .tile video {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease), opacity 0.4s ease;
}
.tile video { position: absolute; inset: 0; opacity: 0; }
.tile.playing video { opacity: 1; }
.tile.playing img { opacity: 0; }
.tile:hover img, .tile:hover video { transform: scale(1.05); }

.tile-info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1rem 1.1rem;
  background: linear-gradient(0deg, rgba(0,0,0,0.75), transparent 70%);
  z-index: 2;
}
.tile-info .client {
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 0.2rem;
}
.tile-info .title { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--fg); }

.tile-cat {
  position: absolute;
  top: 0.9rem; right: 0.9rem;
  z-index: 2;
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim);
  background: rgba(11,11,12,0.55);
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

/* tiles with no available photo/frame — client name set as the visual */
.tile-text {
  display: flex;
  align-items: flex-end;
  background:
    radial-gradient(120% 140% at 15% 0%, rgba(217,169,78,0.16), transparent 60%),
    linear-gradient(155deg, var(--bg-raised-2), var(--bg-raised) 70%);
}
.tile-text::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(115deg, transparent 0 26px, var(--line) 26px 27px);
  opacity: 0.5;
}
.tile-text .tile-info { background: none; position: relative; }
.tile-text:hover { background:
    radial-gradient(120% 140% at 15% 0%, rgba(217,169,78,0.26), transparent 60%),
    linear-gradient(155deg, var(--bg-raised-2), var(--bg-raised) 70%);
}
.tile-text:hover .tile-info .title { color: var(--gold); }
.tile-text { cursor: default; }

/* filter tabs */
.filters {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.filters button {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  color: var(--fg-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  transition: all 0.25s var(--ease);
}
.filters button:hover { color: var(--fg); border-color: var(--line-strong); }
.filters button.active { color: var(--bg); background: var(--fg); border-color: var(--fg); }

.filters-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2.4rem;
}
.social-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  color: var(--fg-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  transition: all 0.25s var(--ease);
}
.social-toggle svg { width: 0.6rem; height: auto; transition: transform 0.25s var(--ease); }
.social-toggle:hover { color: var(--fg); border-color: var(--line-strong); }
.social-toggle.active { color: var(--bg); background: var(--fg); border-color: var(--fg); }
.social-toggle.active svg { transform: rotate(180deg); }

.marquee-nav {
  display: flex;
  gap: 0.6rem;
  flex: none;
}
.marquee-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 2.2rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg-dim);
  cursor: pointer;
  transition: all 0.25s var(--ease);
}
.marquee-arrow svg { width: 70%; height: auto; display: block; }
.marquee-arrow:hover { color: var(--fg); border-color: var(--line-strong); background: var(--bg-raised); }
.marquee-arrow:active { transform: scale(0.94); }

/* ---------------- services (compact, paired with hero portrait) ---------------- */
.services-compact h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  margin: 0.4rem 0 1.1rem;
}
.service-list { display: flex; flex-direction: column; }
.service-row {
  display: flex;
  gap: 1.3rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--line);
}
.service-list .service-row:last-child { border-bottom: 1px solid var(--line); }
.service-row .num {
  flex: none;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: var(--gold);
  letter-spacing: 0.1em;
  padding-top: 0.2rem;
}
.service-row h3 { font-size: 1.1rem; margin: 0 0 0.4rem; }
.service-row p { font-size: 0.9rem; margin: 0; color: var(--fg-dim); }

/* ---------------- selected work carousel ---------------- */
.carousel {
  overflow: hidden;
  margin-top: 2.6rem;
}
.carousel-track {
  display: flex;
  gap: 1.1rem;
  width: max-content;
  padding: 0 var(--gutter);
  animation: carousel-scroll 40s linear infinite;
}
.carousel-track:hover { animation-play-state: paused; }
.carousel .tile {
  flex: 0 0 clamp(220px, 26vw, 300px);
  height: clamp(160px, 20vw, 220px);
}
@keyframes carousel-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .carousel-track { animation: none; overflow-x: auto; }
}

/* ---------------- portfolio page marquee ---------------- */
.portfolio-marquee {
  overflow: hidden;
}
.portfolio-track {
  display: flex;
  gap: 1.1rem;
  width: max-content;
  padding: 0 var(--gutter);
  will-change: transform;
}
.portfolio-track .tile {
  flex: 0 0 clamp(240px, 27vw, 340px);
  height: clamp(180px, 22vw, 260px);
}

/* ---------------- social media (separate, click-to-reveal) ---------------- */
.social-section { padding-top: clamp(1.5rem, 4vw, 3rem); padding-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.social-marquee .tile {
  flex: 0 0 clamp(150px, 14vw, 190px);
  height: clamp(266px, 25vw, 338px); /* 9:16-ish, matches the source clips */
}
/* once a category has been picked, the strip stops driving itself
   and becomes a normal scrollable strip the viewer controls */
.portfolio-marquee.is-manual {
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* old Edge */
}
.portfolio-marquee.is-manual::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) {
  .portfolio-marquee { overflow-x: auto; }
}

/* ---------------- clients marquee ---------------- */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.8rem 0;
}
.marquee-track {
  display: flex;
  gap: 3.5rem;
  width: max-content;
  animation: scroll 34s linear infinite;
  font-family: var(--font-ui);
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  color: var(--fg-faint);
  white-space: nowrap;
}
.marquee-track span { flex: none; }
@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------------- about ---------------- */
.about-hero {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: flex-end;
  padding-top: 8rem;
}
.about-hero img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.5) saturate(1.1);
}
.about-hero .wrap { position: relative; z-index: 2; padding-bottom: 3rem; }

.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

/* A printed-photo treatment, on purpose the opposite of the home
   hero's dark, masked, black-and-white portrait — full color, sharp
   edges, a slight tilt and a taped-up corner, like a photo pinned to
   a studio wall rather than a moody dissolve. */
.about-portrait {
  position: relative;
  max-width: 270px;
  margin: 1.5rem auto 0;
  padding: 0.7rem 0.7rem 1.8rem;
  background: var(--fg);
  border-radius: 2px;
  transform: rotate(-2.5deg);
  box-shadow: 0 24px 48px rgba(0,0,0,0.5), 0 6px 16px rgba(0,0,0,0.35);
  transition: transform 0.4s var(--ease);
}
.about-portrait:hover { transform: rotate(-1deg) scale(1.02); }
.about-portrait img {
  display: block;
  width: 100%;
  border-radius: 1px;
}
.about-portrait::before {
  content: "";
  position: absolute;
  top: -0.9rem;
  left: 50%;
  width: 4.6rem;
  height: 1.6rem;
  background: rgba(217, 169, 78, 0.4);
  border: 1px solid rgba(217, 169, 78, 0.6);
  transform: translateX(-50%) rotate(-3deg);
}

.strengths {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1.6rem;
}
.strengths span {
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.32rem 0.65rem;
  color: var(--fg-dim);
}

.timeline { margin-top: 3rem; }
.timeline-row {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 1.5rem;
  padding: 1.3rem 0;
  border-top: 1px solid var(--line);
}
.timeline-row:last-child { border-bottom: 1px solid var(--line); }
.timeline-row .yr { font-family: var(--font-ui); color: var(--gold); font-size: 0.85rem; letter-spacing: 0.04em; }
.timeline-row h3 { font-size: 1.15rem; margin-bottom: 0.3rem; }
.timeline-row p { font-size: 0.92rem; margin: 0; }

/* ---------------- contact ---------------- */
.contact-hero {
  min-height: 90svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.contact-hero h1 {
  font-size: clamp(2.2rem, 7vw, 5.2rem);
}
.contact-email {
  display: inline-block;
  margin-top: 2rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.4rem, 4vw, 2.4rem);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 0.3rem;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.contact-email:hover { color: var(--accent); border-color: var(--accent); }

.contact-details {
  margin-top: 3rem;
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--fg-dim);
}
.contact-details a:hover { color: var(--fg); }

/* ---------------- footer ---------------- */
footer {
  padding: 3rem 0 2.4rem;
  border-top: 1px solid var(--line);
}
.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.78rem;
  color: var(--fg-dim);
  letter-spacing: 0.04em;
}
.footer-row a:hover { color: var(--fg); }

/* ---------------- lightbox ---------------- */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(6,6,7,0.94);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4vw;
}
.lightbox.open { display: flex; }
.lightbox video, .lightbox img {
  max-width: 100%;
  max-height: 84vh;
  border-radius: 4px;
}
.lightbox-caption {
  position: absolute;
  bottom: 3vw; left: 4vw;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--fg);
}
.lightbox-close {
  position: absolute;
  top: 2.2rem; right: var(--gutter);
  font-family: var(--font-ui);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  cursor: pointer;
}
.lightbox-close:hover { border-color: var(--accent); color: var(--accent); }

/* ---------------- reveal ---------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---------------- responsive ---------------- */
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .nav-links { gap: 1rem; font-size: 0.7rem; }
}

@media (max-width: 640px) {
  /* Line breaks in headings are hand-placed for desktop line length —
     at phone widths they fight the browser's own wrap and strand
     single words on their own line, so drop them and let it reflow. */
  br.lg-break { display: none; }
}

@media (max-width: 560px) {
  .timeline-row { grid-template-columns: 1fr; gap: 0.3rem; }
  .contact-details { flex-direction: column; gap: 0.8rem; }
  #waveform { opacity: 0.28; }
  .hero { padding-top: 7rem; }
}

@media (max-width: 480px) {
  .site-nav { padding: 1.1rem var(--gutter); }
  .mark { font-size: 0.8rem; gap: 0.4rem; white-space: nowrap; }
  .mark .dial { width: 24px; height: 24px; }
  .nav-links { gap: 0.55rem; font-size: 0.6rem; }
}