/* =====================================================================
   DETROIT TROUBLE — EPK
   Direction A / Mini Design System v2
   ---------------------------------------------------------------------
   1. Tokens          4. Hero + CTA bar     7. FPO tags + unset links
   2. Fonts + base    5. Section frame      8. Video player
   3. Components      6. Sections 02–10     9. Responsive
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --black: #111111;            /* Furnace Black    */
  --cream: #F2EBDD;            /* Work Shirt Cream */
  --steel: #777875;            /* Shop Steel       */
  --red:   #A63C2E;            /* Oxide Red        */

  /* Shop Steel adjusted so small secondary text passes contrast */
  --steel-on-light: #5A5B58;
  --steel-on-dark:  #A9AAA6;

  --font-display: "Anton", "Arial Narrow", Impact, sans-serif;
  --font-label:   "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --rule:   1px solid var(--red);
  --gutter: clamp(1.25rem, 3.4vw, 3.5rem);   /* page side padding      */
  --gap:    clamp(1.25rem, 2.6vw, 2.75rem);  /* space either side of a rule */
  --pad-y:  clamp(2.25rem, 3.6vw, 3.75rem);  /* section top/bottom     */

  /* All photographs are graded to warm monochrome in the image files themselves
     (full-size masters: Photos/EPK Selects - Graded). No CSS filter is applied. */
}

/* ---------- 2. Fonts + base ---------- */
@font-face { font-family: "Anton"; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/anton-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap;
  src: url("../assets/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap;
  src: url("../assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/inter-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap;
  src: url("../assets/fonts/inter-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Latin Extended: only fetched for names such as "Popović" */
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/inter-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--black);
  color: var(--cream);
  font: 400 1rem/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
address { font-style: normal; }
strong { font-weight: 600; }

.page { max-width: 120rem; margin-inline: auto; overflow: hidden; }
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 10;
  padding: .75rem 1rem; background: var(--cream); color: var(--black);
  font: 600 1rem/1 var(--font-label); letter-spacing: .08em; text-transform: uppercase;
}
.skip-link:focus { top: 1rem; }

:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
.section--cream :focus-visible,
.cta-bar :focus-visible { outline-color: var(--black); }

/* ---------- 3. Components ---------- */

/* Arrow glyph drawn with a mask so it never depends on a font */
.btn--arrow::after, .btn--down::after, .text-link::after {
  content: ""; flex: none; display: inline-block;
  width: 1.25em; height: .62em; background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat;
          mask: var(--arrow) center / contain no-repeat;
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0 5h20.2l-3.6-3.6L17.9 0l6.1 6-6.1 6-1.3-1.4L20.2 7H0z'/%3E%3C/svg%3E");
}
.btn--down::after { transform: rotate(90deg); width: 1em; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .75em;
  min-height: 2.875rem; padding: .7em 1.5em;
  border: 1px solid transparent;
  font: 600 1.0625rem/1.1 var(--font-label);
  letter-spacing: .11em; text-transform: uppercase; text-decoration: none;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn--red   { background: var(--red);   color: var(--cream); }
.btn--black { background: var(--black); color: var(--cream); }
.btn--red[href]:hover   { background: var(--black); border-color: var(--red); }
.btn--black[href]:hover { background: var(--red); }
.section--cream .btn--red[href]:hover { border-color: var(--black); }

.text-link {
  font: 500 .75rem/1.4 var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  text-decoration: underline; text-decoration-color: var(--red);
  text-decoration-thickness: 1px; text-underline-offset: .4em;
}
.text-link::after { transform: rotate(-45deg); width: 1em; margin-left: .6em; }
.text-link[href]:hover { color: var(--red); }
.section--black .text-link[href]:hover { color: inherit; text-decoration-thickness: 2px; }

.label {
  font: 600 1.125rem/1.2 var(--font-label);
  letter-spacing: .12em; text-transform: uppercase;
}

/* Video poster: a link that plays in the on-page player */
.video {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 16 / 9; background: #000;
  outline: 1px solid rgba(242, 235, 221, .28); outline-offset: -1px;
}
.video--thumb { aspect-ratio: 4 / 3; }
.video img { width: 100%; height: 100%; object-fit: cover; }
.video__play {
  position: absolute; inset: 0; margin: auto;
  width: clamp(2.75rem, 4.6vw, 4.25rem); aspect-ratio: 1;
  border: 2px solid var(--cream); border-radius: 50%;
  background: rgba(17, 17, 17, .82);
  transition: background-color .15s;
}
.video__play::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 32%; height: 38%; transform: translateX(12%);
  background: var(--cream); clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.video--thumb .video__play { width: 2.75rem; }
.video[href]:hover .video__play { background: var(--red); }

/* ---------- 4. Hero + CTA bar ---------- */
.hero {
  --strip: clamp(2.5rem, 3.7vw, 3.5rem);     /* band under the horizontal rule */
  --edge:  clamp(1.25rem, 3.6vw, 3.75rem);  /* inset of the vertical rule     */
  position: relative;
  display: grid; grid-template-columns: 60% 40%;
  height: clamp(22rem, 39.5vw, 47.5rem);   /* Direction A v3 hero proportion */
  background: var(--black);
}
.hero::before {            /* horizontal Oxide Red rule */
  content: ""; position: absolute; z-index: 2;
  left: 0; right: 0; bottom: var(--strip); border-top: var(--rule);
}
.hero__photo { position: relative; min-height: 0; }
.hero__photo picture { display: block; width: 100%; height: 100%; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.hero__photo::after {      /* soft settle into the black field + floor */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(17,17,17,0) 90%, rgba(17,17,17,.8) 100%),
    linear-gradient(0deg, rgba(17,17,17,.62) 0, rgba(17,17,17,0) 24%),
    linear-gradient(200deg, rgba(17,17,17,.38) 0, rgba(17,17,17,0) 42%);
}
.hero__field {
  position: relative; min-height: 0;
  display: grid; grid-template-rows: minmax(0, 1fr) var(--strip);
  padding-right: var(--edge);
}
.hero__field::after {      /* vertical Oxide Red rule */
  content: ""; position: absolute; z-index: 2;
  top: 0; bottom: 0; right: var(--edge); border-left: var(--rule);
}
.hero__logo { display: grid; place-items: center; min-height: 0; padding: clamp(1rem, 2vw, 2rem); }
.hero__logo img { width: min(100%, 37rem); max-height: 100%; }
.hero__place {
  align-self: center; justify-self: end;
  padding-right: clamp(.9rem, 1.6vw, 1.5rem);
  font: 500 clamp(.625rem, .78vw, .75rem)/1 var(--font-mono);
  letter-spacing: .46em; text-transform: uppercase; white-space: nowrap;
}

.cta-bar {
  display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(.75rem, 2vw, 2rem);
  padding: clamp(.75rem, 1.1vw, 1rem) var(--gutter);
  background: var(--cream); color: var(--black);
  border-top: var(--rule); border-bottom: var(--rule);
}
.cta-bar .btn--red[href]:hover { border-color: var(--black); }

/* ---------- 5. Section frame ---------- */
.section {
  --head: 27%;
  display: grid; grid-template-columns: minmax(0, var(--head)) minmax(0, 1fr);
  padding: var(--pad-y) var(--gutter);
}
.section--cream { background: var(--cream); color: var(--black); --muted: var(--steel-on-light); }
.section--black { background: var(--black); color: var(--cream); --muted: var(--steel-on-dark); }

.section__head {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(.75rem, 1.5vw, 1.6rem);
  align-content: start; padding-right: var(--gap);
}
.section__num {
  font: 400 clamp(1.5rem, 2.3vw, 2.4rem)/1 var(--font-display);
  color: var(--red); padding-top: .12em;
}
.section__title {
  font: 400 clamp(3.25rem, 6.9vw, 7.1rem)/.95 var(--font-display);
  letter-spacing: .005em; text-transform: uppercase;
}
.section__title--md { font-size: clamp(3rem, 5.2vw, 5.4rem); }
.section__title--sm { font-size: clamp(2.6rem, 3.75vw, 3.9rem); line-height: 1; }
.section__meta {
  grid-column: 2; margin-top: 1.1rem;
  font: 500 .75rem/1.6 var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.section__meta + .section__meta { margin-top: .5rem; }
.section__meta--strong { color: inherit; letter-spacing: .2em; }
.section__meta .text-link { color: inherit; }

.section__body {
  display: grid; align-content: center;
  border-left: var(--rule); padding-left: var(--gap);
}

/* ---------- 6. Sections ---------- */

/* 02 Listen */
.tracks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.track {
  display: grid; grid-template-columns: minmax(6.5rem, 40%) minmax(0, 1fr);
  gap: clamp(1rem, 1.6vw, 1.5rem); align-items: center;
}
.track + .track { border-left: var(--rule); padding-left: var(--gap); }
.track:first-child { padding-right: var(--gap); }
.track__title { font: 600 clamp(1.5rem, 2.1vw, 2rem)/1.05 var(--font-label); letter-spacing: .06em; text-transform: uppercase; }
.track__note { margin-top: .35rem; font-size: .9375rem; line-height: 1.4; color: var(--muted); }
.track__links { margin-top: .9rem; }

/* 03 Watch */
.watch { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); }
.watch__primary { padding-right: var(--gap); }
.watch__secondary { border-left: var(--rule); padding-left: var(--gap); }
.watch__label { margin-bottom: .8rem; font: 600 1.125rem/1.2 var(--font-label); letter-spacing: .12em; text-transform: uppercase; }
.watch__more { margin-top: 1.25rem; }

/* 04 Live Proof */
.proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-self: start; }
.proof__col:first-child { padding-right: var(--gap); }
.proof__col + .proof__col { border-left: var(--rule); padding-left: var(--gap); }
.plain-list { margin-top: .9rem; font-size: 1.0625rem; line-height: 1.75; }
.plain-list .place { color: var(--muted); }
.plain-list .dot { color: var(--red); padding-inline: .15em; }

/* 05 The Band */
.band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--gap); align-items: start; }
.band__bio { font-size: 1rem; line-height: 1.65; max-width: 34rem; }
.band__bio p + p { margin-top: 1.1em; }
.band__figure img { width: 100%; }
.members { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem; }
.members li { padding-left: .75rem; border-left: var(--rule); }
.members__name { display: block; font: 600 clamp(.9rem, 1.12vw, 1.1rem)/1.15 var(--font-label); letter-spacing: .06em; text-transform: uppercase; }
.members__role { display: block; margin-top: .25rem; font-size: .8125rem; line-height: 1.35; color: var(--muted); }

/* 06 Press + Recognition */
.press { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.press li { padding-inline: var(--gap); }
.press li:first-child { padding-left: 0; }
.press li + li { border-left: var(--rule); }
.press__outlet { display: block; font: 400 clamp(1.5rem, 2.3vw, 2.3rem)/1.05 var(--font-display); letter-spacing: .02em; text-transform: uppercase; text-decoration: none; }
.press__outlet[href] { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.press__outlet[href]:hover { color: var(--red); }
.press__note { display: block; margin-top: .5rem; font-size: .9375rem; color: var(--muted); }

/* 07 Press Photos */
.photos { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; }
.photos__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.5rem, 1vw, 1rem); padding-right: var(--gap); }
.photos__grid li { aspect-ratio: 3 / 2; overflow: hidden; outline: 1px solid rgba(242, 235, 221, .28); outline-offset: -1px; }
.photos__grid img { width: 100%; height: 100%; object-fit: cover; }
.photos__cta { display: flex; align-items: center; border-left: var(--rule); padding-left: var(--gap); }
.photos__cta .btn, .production__cta .btn { max-width: 14.5rem; text-align: center; line-height: 1.35; }

/* 08 Live Production */
.production { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; }
.production__roster { padding-right: var(--gap); }
.roster { margin-top: .8rem; display: grid; gap: .3rem; }
.roster li { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .9rem; }
.roster__name { font-weight: 600; font-size: 1.0625rem; }
.roster__role { color: var(--muted); font-size: 1rem; }
.production__cta { display: flex; align-items: center; border-left: var(--rule); padding-left: var(--gap); }

/* 09 Connect */
.connect { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.connect li + li { border-left: var(--rule); }
.connect a {
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
  padding: .75rem .25rem; text-decoration: none;
  font: 600 1rem/1.1 var(--font-label); letter-spacing: .14em; text-transform: uppercase;
  transition: color .15s;
}
.connect svg { width: 1.9rem; height: 1.9rem; fill: currentColor; }
.connect svg[fill="none"] { fill: none; }
.connect a[href]:hover span { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: .35em; text-decoration-thickness: 2px; }

/* 10 Book */
.section--book { --head: 36%; padding-block: 0; }
.section--book .section__head,
.section--book .book__contact { padding-block: var(--pad-y); }
.section--book .section__body { align-content: stretch; }
.section--book .section__meta { letter-spacing: .08em; }
.book { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--gap); }
.book__contact { display: flex; flex-direction: column; align-items: flex-start; align-self: center; }
.book__line {
  font: 600 clamp(1.25rem, 1.75vw, 1.6rem)/1.3 var(--font-label); letter-spacing: .04em;
  text-decoration: none; padding-block: .2rem;
}
.book__line:hover { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: .25em; }
.book__where { margin: .9rem 0 1.4rem; color: var(--muted); }
.book__photo { position: relative; margin-right: calc(var(--gutter) * -1); background: var(--black); min-height: 14rem; }
.book__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% 50%; }
.book__photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(17,17,17,.75) 0, rgba(17,17,17,0) 35%);
}

/* Footer */
.footer {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem var(--gutter); background: var(--black); border-top: var(--rule);
}
.footer img { width: 3.25rem; height: auto; }
.footer p { font: 500 .6875rem/1 var(--font-mono); letter-spacing: .46em; text-transform: uppercase; }

/* ---------- 7. FPO tags + unset links ----------
   Unset links are removed by js/main.js (never shown as "pending").
   .fpo marks a temporary image; the tag shows only while
   EPK_SHOW_FPO = true in js/config.js. */
.fpo { position: relative; }
.show-fpo .fpo::after {
  content: "FPO"; position: absolute; top: .5rem; left: .5rem;
  padding: .2em .6em; background: var(--red); color: var(--cream);
  font: 500 .6875rem/1.3 var(--font-mono); letter-spacing: .16em;
}

/* Watch with no live video yet: the official video takes the lead */
.watch:not(:has(.watch__primary)) .watch__secondary {
  grid-column: 1 / -1; border-left: 0; padding-left: 0;
  display: grid; grid-template-columns: minmax(0, 40rem) minmax(0, 1fr); grid-template-rows: auto 1fr;
}
.watch:not(:has(.watch__primary)) .video { grid-column: 1; grid-row: 1 / 3; margin-right: var(--gap); }
.watch:not(:has(.watch__primary)) .watch__label,
.watch:not(:has(.watch__primary)) .watch__more { grid-column: 2; margin: 0; border-left: var(--rule); padding-left: var(--gap); }
.watch:not(:has(.watch__primary)) .watch__label { padding-bottom: 1.25rem; }

/* ---------- 8. Video player ---------- */
.player {
  width: min(92vw, calc((100vh - 7rem) * 16 / 9), 80rem);
  max-width: none; max-height: none; padding: 0; border: 0;
  background: transparent; color: var(--cream); overflow: visible;
}
.player::backdrop { background: rgba(17, 17, 17, .93); }
.player form { display: flex; justify-content: flex-end; margin-bottom: .6rem; }
.player__close {
  min-height: 2.75rem; padding: .5em 1em; cursor: pointer;
  background: transparent; color: var(--cream); border: 1px solid var(--red);
  font: 600 1rem/1 var(--font-label); letter-spacing: .14em; text-transform: uppercase;
}
.player__close:hover { background: var(--red); }
.player__frame { aspect-ratio: 16 / 9; background: #000; }
.player__frame iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- 9. Responsive ---------- */

/* Tablet: section heading moves above its content */
@media (max-width: 60rem) {
  .section, .section--book { grid-template-columns: minmax(0, 1fr); }
  .section__head { padding: 0 0 1.5rem; column-gap: 1rem; }
  .section__title, .section__title--md, .section__title--sm { font-size: clamp(2.75rem, 10.5vw, 5.5rem); line-height: .95; }
  .section__title br { display: none; }
  .section__num { font-size: 1.5rem; }
  .section__body { border-left: 0; padding-left: 0; border-top: var(--rule); padding-top: 1.75rem; }

  .watch:not(:has(.watch__primary)) .watch__secondary { display: flex; flex-direction: column; margin-top: 0; padding-top: 0; border-top: 0; }
  .watch:not(:has(.watch__primary)) .video { order: 2; margin-right: 0; width: 100%; max-width: 40rem; }
  .watch:not(:has(.watch__primary)) .watch__label { order: 1; border-left: 0; padding: 0 0 .8rem; }
  .watch:not(:has(.watch__primary)) .watch__more { order: 3; border-left: 0; padding: 0; margin-top: 1.25rem; }

  .band { grid-template-columns: minmax(0, 1fr); }
  .band__figure { order: -1; }
  .band__bio { max-width: 42rem; }

  .photos, .production { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .photos__grid, .production__roster { padding-right: 0; }
  .photos__cta, .production__cta { border-left: 0; padding-left: 0; }
  .photos__cta .btn, .production__cta .btn { max-width: none; }

  .connect { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.25rem; }
  .connect li:nth-child(3n + 1) { border-left: 0; }

  .section--book { padding-bottom: 0; }
  .section--book .section__head { padding-block: var(--pad-y) 1.5rem; }
  .section--book .book__contact { padding-block: 0 var(--pad-y); }
  .book { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .book__photo { margin-inline: calc(var(--gutter) * -1); aspect-ratio: 16 / 9; min-height: 0; }
  .book__photo::after { background: linear-gradient(180deg, rgba(17,17,17,.5) 0, rgba(17,17,17,0) 40%); }
}

/* Phone */
@media (max-width: 43.75rem) {
  .hero { grid-template-columns: minmax(0, 1fr); height: auto; }
  .hero::before { z-index: 2; }
  .hero__photo { aspect-ratio: 4 / 5; }
  .hero__photo::after { background: linear-gradient(0deg, rgba(17,17,17,.9) 0, rgba(17,17,17,0) 22%); }
  .hero__field { grid-template-rows: auto var(--strip); padding-right: var(--edge); }
  .hero__logo { padding: 1rem var(--edge) 2rem calc(var(--edge) * 2); }
  .hero__logo img { width: min(100%, 21rem); }
  .hero__place { letter-spacing: .4em; }

  .cta-bar { flex-direction: column; align-items: stretch; padding-block: 1rem; }
  .btn { min-height: 3rem; }

  .watch { grid-template-columns: minmax(0, 1fr); }
  .watch__primary { padding-right: 0; }
  .watch__secondary { border-left: 0; padding-left: 0; margin-top: 1.75rem; padding-top: 1.75rem; border-top: var(--rule); }

  .tracks, .proof, .press { grid-template-columns: minmax(0, 1fr); }
  .track:first-child, .proof__col:first-child { padding-right: 0; }
  .track + .track, .proof__col + .proof__col,
  .press li + li { border-left: 0; padding-left: 0; margin-top: 1.5rem; padding-top: 1.5rem; border-top: var(--rule); }
  .press li { padding-inline: 0; }
  .press__outlet { font-size: 1.9rem; }

  .members { gap: .5rem; }
  .members li { padding-left: .5rem; }
  .members__name { font-size: .9375rem; letter-spacing: .06em; }
  .members__role { font-size: .75rem; }

  .photos__grid { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .photos__cta .btn, .production__cta .btn, .book__contact .btn { width: 100%; max-width: none; }
  .roster li { display: block; }
  .roster li + li { margin-top: .4rem; }
  .roster__role { display: block; }

  .connect { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .connect li:nth-child(3n + 1) { border-left: var(--rule); }
  .connect li:nth-child(2n + 1) { border-left: 0; }
  .connect a { min-height: 3rem; }
  .book__line { font-size: 1.375rem; overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}