/* ============================================================================
   dannybarros.com

   Ported from the approved design, _source/dannybarros_FINAL_stacked.html.
   Rule order, selectors and values are unchanged except where marked "FIX:"
   or "ADD:" — those are documented in the README under "Deviations from the
   source". Nothing here is a redesign.
   ========================================================================= */

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/anton-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../assets/fonts/archivo-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- tokens -------------------------------------------------------------- */

:root {
  --bg: #000;
  --card: #0B0B0B;
  --ink: #F4F4F4;
  --body: #A8A8A8;
  --mute: #787878;
  --line: #1B1B1B;
  --red: #D40000;
}

/* --- base ---------------------------------------------------------------- */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Archivo', sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--red); color: #fff; }
img { display: block; max-width: 100%; height: auto; } /* ADD: height:auto, so width/height attrs cannot distort */

/* ADD: keyboard focus ring. Invisible to mouse users, so no visual drift. */
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* ADD: skip link, off-screen until focused. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  padding: .75rem 1.1rem;
  background: var(--red);
  color: #fff;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
}

/* --- utilities ----------------------------------------------------------- */

.anton { font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase; }
.k { font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 700; color: var(--red); }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }

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

nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.05rem 2rem;
  background: rgba(0, 0, 0, .9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
nav .wm { font-family: 'Anton', sans-serif; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; }
nav ul { display: flex; gap: 2rem; list-style: none; }
nav ul a { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--mute); transition: color .25s; }
nav ul a:hover { color: var(--ink); }

/* --- reveal -------------------------------------------------------------- */

.rv { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; }
.rv.in { opacity: 1; transform: none; }

/* --- sections ------------------------------------------------------------ */

section { padding: 10rem 0; border-top: 1px solid var(--line); }
header.hero { border-top: 0; }

.shead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 4rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1.5rem;
}
.shead h2 { font-family: 'Anton', sans-serif; font-size: clamp(1.9rem, 3.6vw, 2.9rem); text-transform: uppercase; line-height: 1; }
.shead .k { white-space: nowrap; }

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

.hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 3.5rem;
  align-items: center;
  padding: 7rem 2rem 5rem;
  max-width: 1320px;
  margin: 0 auto;
}
.hero .ph { overflow: hidden; opacity: 0; animation: fade 1.1s .4s forwards; }
.hero .ph img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center 6%; }
.hero .k { opacity: 0; animation: fade .9s .15s forwards; display: block; }
.hero h1 {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(3rem, 6.4vw, 6.6rem);
  line-height: .98;
  margin-top: 1.2rem;
  opacity: 0;
  transform: translateY(26px);
  animation: up 1s .3s cubic-bezier(.2, .7, .2, 1) forwards;
}
.hero .rule { width: 56px; height: 3px; background: var(--red); margin-top: 1.8rem; opacity: 0; animation: fade .9s .7s forwards; }
.hero .dek { margin-top: 1.6rem; max-width: 30rem; color: #C6C6C6; line-height: 1.75; opacity: 0; animation: fade .9s .85s forwards; }

@keyframes up { to { opacity: 1; transform: none; } }
@keyframes fade { to { opacity: 1; } }

/* --- breath (scroll-lit statement) --------------------------------------- */

/* FIX: the source declared `padding:11rem 0`, which — because it is authored
   after `.wrap` at equal specificity — also wiped out `.wrap`'s horizontal
   gutter. The statement line ended up flush to the screen edge at 390px and
   32px left of every other section on desktop. Restoring the gutter here. */
.breath { padding: 11rem 2rem; }
.breath .line {
  font-family: 'Anton', sans-serif;
  font-size: clamp(1.8rem, 4.1vw, 3.4rem);
  line-height: 1.22;
  text-transform: uppercase;
  max-width: 58rem;
}
.breath .line .w { color: #232323; transition: color .2s; }
.breath .line .w.lit { color: var(--ink); }
.breath .line .w.red.lit { color: var(--red); }

/* --- about --------------------------------------------------------------- */

.bio .grid { display: grid; grid-template-columns: 7fr 5fr; gap: 5rem; align-items: start; }
.bio .lede { font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.62; color: #E6E6E6; font-weight: 500; }
.bio .cols { margin-top: 2.6rem; display: grid; gap: 1.6rem; }
.bio .cols p { color: var(--body); line-height: 1.95; font-size: 1rem; }
.bio .side { position: sticky; top: 104px; transition-delay: .15s; }
.bio .side img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center 10%; }

/* FIX: `.wrap` (0,1,0) outranks `section` (0,0,1), so every section that also
   carries `.wrap` — About, Career, Contact — loses `section`'s vertical padding
   outright. That is specificity, not source order, so it is inherited from the
   approved design rather than introduced here. Everywhere else a neighbour
   supplies the gap (Artists is the one section without `.wrap`, and keeps its
   full 10rem), but About and Career are both `.wrap`, so their shared boundary
   collapsed to 0. Restored on the same 10rem/6rem scale every other section
   transition already uses. */
#about { padding-bottom: 10rem; }

.close { margin-top: 5.5rem; max-width: 52rem; }
.close .rule { width: 44px; height: 3px; background: var(--red); margin-bottom: 1.6rem; }
.close p { font-size: clamp(1.2rem, 1.9vw, 1.55rem); line-height: 1.6; color: #EDEDED; font-weight: 500; }

/* --- career (sticky stacking cards) -------------------------------------- */

/* The gap is the scroll runway. A card stays on stage for
   (its own height + this gap - 34px of sticky offset step) of scrolling before
   the next one stacks over it, so widening the gap is the only lever that buys
   reading time without touching the motion, easing, or native scrolling.
   1.8rem gave ~390-440px per card; 9.5rem gives ~510-570px, about +30%. */
.stack { display: grid; gap: 9.5rem; }
.scard { position: sticky; background: var(--card); border: 1px solid #1E1E1E; padding: 2.8rem; }
.scard .top { display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; }
.scard h3 { font-family: 'Anton', sans-serif; font-size: clamp(1.5rem, 2.6vw, 2.2rem); text-transform: uppercase; line-height: 1.05; }
.scard .role { display: block; margin-top: .5rem; }
.scard .txt { margin-top: 1.3rem; display: grid; gap: 1.2rem; }
.scard .txt p { color: var(--body); line-height: 1.85; max-width: 46rem; font-size: .97rem; }
.scard:nth-child(1) { top: 92px; }
.scard:nth-child(2) { top: 126px; }
.scard:nth-child(3) { top: 160px; }

.role { color: var(--red); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; }
.yr { color: var(--mute); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }

/* --- artists (marquee) ---------------------------------------------------- */

.nameTag { font-family: 'Anton', sans-serif; font-size: .95rem; text-transform: uppercase; letter-spacing: .02em; }

.mq { overflow: hidden; padding: .6rem 0; }
.mq .track { display: flex; width: max-content; }

/* FIX: the source drifted the track by a flat -50%. One set of five cards is
   1346px (5 x 250 + 5 x 19.2 gap) but half the ten-card track is 1336.35px,
   so the loop jumped ~10px per cycle and left ~104px of dead black at the
   right edge on wide screens. The gap is now a per-card margin — visually
   identical inside `overflow:hidden` — which makes one set an exact fraction
   of the track. js/main.js measures that set, clones enough copies to cover
   the viewport, and sets --mq-shift / --mq-duration. The animation only runs
   once that has happened, so a no-JS visitor gets a clean static row. */
.mq[data-mq-ready] .track { animation: drift var(--mq-duration, 55s) linear infinite; }
.mq:hover .track,
.mq:focus-within .track { animation-play-state: paused; } /* ADD: focus-within, for keyboard users */
.mq.rev .track { animation-direction: reverse; }

@keyframes drift { to { transform: translateX(calc(-1 * var(--mq-shift, 50%))); } }

.mcard { width: 250px; flex: 0 0 auto; margin-right: 1.2rem; }
.mcard .ph { overflow: hidden; aspect-ratio: 4/5; background: var(--card); }
.mcard .ph img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.85) grayscale(1); transition: filter .35s; }
.mcard:hover .ph img { filter: brightness(1.02) grayscale(1); }
.mcard .n { padding-top: .75rem; margin-top: .75rem; border-top: 1px solid #2A2A2A; }

/* --- contact -------------------------------------------------------------- */

.contact .k { display: block; }
.contact h2 { font-family: 'Anton', sans-serif; font-size: clamp(2.6rem, 7.5vw, 6.5rem); line-height: .95; text-transform: uppercase; margin-top: 1.2rem; }
.contact h2 span { color: transparent; -webkit-text-stroke: 2px var(--red); }
.contact .mail {
  display: inline-block;
  margin-top: 2.2rem;
  font-family: 'Anton', sans-serif;
  font-size: clamp(1.15rem, 2.2vw, 1.7rem);
  text-transform: uppercase;
  border-bottom: 3px solid var(--red);
  padding-bottom: .4rem;
  transition: color .25s;
}
.contact .mail:hover { color: var(--red); }

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

footer { border-top: 1px solid var(--line); }
footer .in {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.3rem 0;
  color: var(--mute);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  flex-wrap: wrap;
  gap: .9rem;
}
.soc { display: flex; gap: 1.1rem; align-items: center; }
.soc a { color: var(--mute); transition: color .25s; display: inline-flex; }
.soc a:hover { color: var(--ink); }
.soc svg { width: 19px; height: 19px; }

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 920px) {
  nav ul { display: none; }
  .wrap { padding: 0 1.15rem; }
  nav { padding: 1rem 1.15rem; }
  section { padding: 6rem 0; }
  .breath { padding: 7rem 1.15rem; } /* FIX: gutter restored, see above */
  .hero { grid-template-columns: 1fr; gap: 2.2rem; padding: 6rem 1.15rem 3rem; }
  .hero .ph { order: -1; }
  .bio .grid { grid-template-columns: 1fr; gap: 2.6rem; }
  .bio .side { position: relative; top: 0; max-width: 420px; }
  .close { margin-top: 3.6rem; }
  .scard { padding: 1.8rem; }
  #about { padding-bottom: 6rem; } /* FIX: matches `section`'s mobile scale */
}

/* FIX: `.shead .k` is `white-space:nowrap`, so on narrow screens the longest
   kicker ("Three Companies, Two Decades") could not fit beside its heading and
   pushed the page ~19px wider than the viewport — a horizontal scrollbar on
   every iPhone-width device. Letting the heading row wrap keeps the kicker
   intact and the desktop layout untouched. */
@media (max-width: 560px) {
  .shead { flex-wrap: wrap; gap: .85rem 2rem; }

  /* 250px cards showed only ~1.4 per row at 390px, which read as a stack of
     stills rather than a drift. 135px + .7rem puts the pitch at 146px, so
     ~2.7 cards sit in a 390px viewport with the third clipped at the edge —
     enough to signal movement. js/main.js pairs this with a faster phone
     px/sec so the shorter set still cycles in ~50s rather than racing. */
  .mcard { width: 135px; margin-right: .7rem; }
  .nameTag { font-size: .78rem; letter-spacing: .01em; }
  .mcard .n { padding-top: .55rem; margin-top: .55rem; }
}

/* --- reduced motion ------------------------------------------------------- */

/* The source handled this in JS only, which meant the hero still played its
   entrance before the script ran. Doing it in CSS as well makes it immediate. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .hero .ph,
  .hero .k,
  .hero h1,
  .hero .rule,
  .hero .dek { opacity: 1; transform: none; animation: none; }
  .mq .track,
  .mq[data-mq-ready] .track { animation: none; }
  .breath .line .w { color: var(--ink); transition: none; }
  .breath .line .w.red { color: var(--red); }
}

/* --- 404 ------------------------------------------------------------------ */

.notfound {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.7rem;
  padding: 7rem 2rem 5rem;
}
.notfound .wm { font-family: 'Anton', sans-serif; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; }
.notfound .code { font-family: 'Anton', sans-serif; font-size: clamp(3.5rem, 13vw, 8rem); line-height: .9; text-transform: uppercase; margin-top: 1.4rem; }
.notfound .rule { width: 56px; height: 3px; background: var(--red); }
.notfound p { color: var(--body); line-height: 1.8; max-width: 26rem; }
.notfound .home {
  font-family: 'Anton', sans-serif;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 3px solid var(--red);
  padding-bottom: .38rem;
  margin-top: .6rem;
  transition: color .25s;
}
.notfound .home:hover { color: var(--red); }