/* ==========================================================================
   soundguy.com — Adam Robinson
   Direction C — Expanded Grotesque
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, video, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* --- Tokens --------------------------------------------------------------- */
:root {
  --ink:      #000000;
  --ink-2:    #0B0B0C;
  --ink-3:    #141416;
  --hair:     rgba(255, 255, 255, .14);
  --hair-2:   rgba(255, 255, 255, .07);

  --paper:    #FFFFFF;
  --dim:      rgba(255, 255, 255, .62);
  --mute:     rgba(255, 255, 255, .40);

  --accent:   #FFD166;
  --accent-d: #8A6E28;

  --sans: 'Archivo', Helvetica, Arial, sans-serif;

  --gutter: clamp(1.25rem, 4.5vw, 3.25rem);
  --measure: 1560px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* --- Base ----------------------------------------------------------------- */
body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-variation-settings: 'wdth' 100;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

.wrap { max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(4rem, 9vw, 8rem); border-top: 1px solid var(--hair); }

/* --- Type ----------------------------------------------------------------- */
.kicker {
  font-size: .7rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  font-variation-settings: 'wdth' 112;
}

.kicker--mute { color: var(--mute); }

/* Reduced 25% from clamp(2.1rem, 7vw, 5.8rem). All three values scaled by
   0.75 so the type shrinks evenly at every window width rather than only at
   the extremes. Used for the hero headline and the Work page title. */
.xl {
  font-weight: 700;
  font-size: clamp(1.58rem, 5.25vw, 4.35rem);
  line-height: .94;
  letter-spacing: -.02em;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 122;
}

.lg {
  font-weight: 700;
  font-size: clamp(1.7rem, 4.4vw, 3.6rem);
  line-height: .96;
  letter-spacing: -.02em;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 120;
}

.md {
  font-weight: 700;
  font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 116;
}

/* --- Prose ----------------------------------------------------------------
   THE RULE FOR THIS SITE:
     Archivo (expanded, caps)  = names, labels, metadata, credits
     Newsreader italic         = anything that reads as a sentence

   If you add a new paragraph anywhere, give it .prose (or one of the classes
   below) so it doesn't fall back to default-width Archivo, which is the one
   thing on this page with no deliberate treatment.
   ------------------------------------------------------------------------ */
.body,
.prose {
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--dim);
  max-width: 62ch;
}

.body strong, .prose strong { color: var(--paper); font-weight: 400; }
.accent { color: var(--accent); }

/* --- Section head --------------------------------------------------------- */
.sec-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
  padding-bottom: 1.35rem;
  border-bottom: 1px solid var(--hair);
  margin-bottom: clamp(2.25rem, 4.5vw, 3.75rem);
}

.sec-head .kicker { margin-bottom: .85rem; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: 1rem 1.75rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 112;
  border: 1px solid var(--hair);
  transition: all .3s var(--ease);
}

.btn:hover { border-color: var(--accent); color: var(--accent); }

.btn--fill {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
}

.btn--fill:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }

.btn .arw { transition: transform .3s var(--ease); }
.btn:hover .arw { transform: translateX(5px); }

/* --- Header --------------------------------------------------------------- */
.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background .35s var(--ease), border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
}

/* Permanent scrim: nav sits over photography, so it can never rely on the
   image behind it being dark. This guarantees contrast on every frame. */
.site-head::before {
  content: '';
  position: absolute;
  inset: 0 0 -2.5rem 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .45) 55%, rgba(0, 0, 0, 0) 100%);
  transition: opacity .35s var(--ease);
}

.site-head.is-stuck::before { opacity: 0; }

.site-head.is-stuck {
  background: rgba(0, 0, 0, .88);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom-color: var(--hair);
}

.site-head__inner {
  position: relative;
  z-index: 1;
  max-width: var(--measure);
  margin-inline: auto;
  padding: 1.15rem var(--gutter);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.75rem);
}

.mark {
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 700;
  font-variation-settings: 'wdth' 115;
  flex-shrink: 0;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .7);
}

/* Discipline line, sitting beside the name */
.role {
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  font-variation-settings: 'wdth' 110;
  padding-left: clamp(1rem, 2vw, 1.75rem);
  border-left: 1px solid rgba(255, 255, 255, .22);
  white-space: nowrap;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .7);
}

.nav { margin-left: auto; display: flex; gap: clamp(.9rem, 1.9vw, 1.85rem); }

.nav a {
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .92);
  font-weight: 600;
  font-variation-settings: 'wdth' 110;
  padding-block: .4rem;
  position: relative;
  transition: color .25s var(--ease);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .85), 0 0 28px rgba(0, 0, 0, .5);
}

.nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}

.nav a:hover { color: var(--accent); }
.nav a:hover::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  margin-left: auto;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(0, 0, 0, .45);
  padding: .5rem .9rem;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
}

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

/* Hero and ticker share exactly one screen height, so the scrolling artist
   names are visible on load without scrolling. svh (not vh) means mobile
   browser chrome is accounted for, otherwise the ticker hides behind the
   Safari toolbar. */
.viewport {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.hero {
  position: relative;
  flex: 1 1 auto;
  /* Floor: on a short window the hero stops shrinking and the page scrolls
     normally rather than crushing the headline. */
  min-height: min(480px, 68svh);
  overflow: hidden;
  background: var(--ink);
  display: flex;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s ease-in-out;
  background: linear-gradient(160deg, #241018, #000);
}

.slide.is-on { opacity: 1; }

.slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide.is-on img { animation: drift 18s ease-out both; }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.07); } }

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.08) 30%, rgba(0,0,0,.93) 100%);
}

.hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding: clamp(6rem, 12vw, 9rem) var(--gutter) clamp(1.75rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero h1 { max-width: 15ch; }
.hero h1 b { font-weight: 700; color: var(--accent); }

/* --- Standfirst ----------------------------------------------------------
   Deliberately a different voice from the rest of the page: a serif set at
   deck size, against expanded grotesque caps.
   ------------------------------------------------------------------------ */
/* Newsreader italic — a literary serif against expanded grotesque caps:
   different voice, same century. This is the largest instance of the serif
   on the page; everything else descriptive follows from it. */
.hero__stand {
  margin-top: 1.6rem;
  max-width: 46ch;
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.15rem, 2.15vw, 1.75rem);
  line-height: 1.38;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 20px rgba(0, 0, 0, .55);
}

/* --- Hero foot + cover rotator -------------------------------------------- */
.hero__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 1.85rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(255, 255, 255, .26);
}

.hero__foot p {
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dim);
  font-variation-settings: 'wdth' 112;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .8);
}

.rotator {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.1rem;
  flex-wrap: wrap;
}

.dots { display: flex; gap: .5rem; align-items: center; }

.dot {
  width: 26px;
  height: 2px;
  background: rgba(255, 255, 255, .35);
  transition: background .35s var(--ease), width .35s var(--ease);
  padding: 0;
}

.dot.is-on { background: var(--accent); width: 44px; }
.dot:hover { background: rgba(255, 255, 255, .7); }

/* Matched to .work__role — the "FOH Engineer" / "Mix Engineer" credit on the
   work cards. Same amber, size, tracking, weight and width axis, so the cover
   caption reads as the same kind of information: a credit.

   The text-shadow is the one addition. Unlike the card credits this sits on
   top of photography, and amber on a bright frame needs the same protection
   the nav links get. */
.caption {
  font-family: var(--sans);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  font-variation-settings: 'wdth' 110;
  text-align: right;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .85), 0 0 28px rgba(0, 0, 0, .5);
  transition: opacity .5s var(--ease);
}

/* Artist name a shade heavier so it still reads as a name — but no longer a
   different colour, since the whole line is one credit now. */
.caption b { color: var(--accent); font-weight: 700; }
.caption.fading { opacity: 0; }

/* --- Marquee -------------------------------------------------------------- */
.marquee {
  flex: 0 0 auto;
  overflow: hidden;
  /* Trimmed from 1.5–2.5rem: every pixel here comes out of the hero, which
     now has to fit in the same screen. */
  padding-block: clamp(1rem, 2vw, 1.6rem);
  border-block: 1px solid var(--hair);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee__track { display: flex; width: max-content; animation: scroll 80s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; gap: 2.25rem; padding-right: 2.25rem; flex-shrink: 0; }

.marquee__group span {
  font-size: clamp(1.15rem, 2.4vw, 2.1rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.01em;
  font-variation-settings: 'wdth' 118;
  color: rgba(255, 255, 255, .22);
  white-space: nowrap;
  transition: color .3s var(--ease);
}

.marquee__group span:hover { color: var(--paper); }
.marquee__group i { color: var(--accent-d); font-style: normal; font-size: .7rem; }

@keyframes scroll { to { transform: translateX(-50%); } }

/* --- Stats ---------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr));
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
}

.stat { background: var(--ink); padding: clamp(1.5rem, 3vw, 2.4rem); }

.stat__n {
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  font-variation-settings: 'wdth' 118;
}

.stat__n span { color: var(--accent); }

.stat__l {
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mute);
  margin-top: .75rem;
  font-variation-settings: 'wdth' 110;
}

/* --- Work grid ------------------------------------------------------------ */
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}

.work { position: relative; background: var(--ink-2); border: 1px solid var(--hair); transition: border-color .35s var(--ease); }
.work:hover { border-color: var(--accent); }
.work--wide { grid-column: span 2; }

.work__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; cursor: pointer; }
.work__media img, .work__media iframe, .work__media video { width: 100%; height: 100%; object-fit: cover; border: 0; }
.work__media img { transition: transform .8s var(--ease), opacity .4s var(--ease); }
.work:hover .work__media img { transform: scale(1.05); }

.work__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.55));
  transition: background .35s var(--ease);
}

.work:hover .work__play { background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.4)); }
.work__play svg { width: 52px; height: 52px; transition: transform .35s var(--ease); }
.work:hover .work__play svg { transform: scale(1.09); }

.work__body { padding: 1.3rem 1.4rem 1.5rem; }
.work__artist { transition: color .3s var(--ease); }
.work:hover .work__artist { color: var(--accent); }

/* --- Card subtitles -------------------------------------------------------
   Newsreader italic, the same serif as the hero standfirst. The site now has
   one consistent rule: expanded grotesque caps for names and labels, serif
   italic for anything descriptive. Italic is also the correct form for a song
   title, and the face is already loaded — no extra request.

   .work__song = the piece.  .work__ctx = where it happened.
   Splitting them gives the card real hierarchy instead of one flat line.
   ------------------------------------------------------------------------ */
.work__song {
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 1.32rem;
  line-height: 1.25;
  letter-spacing: 0;
  margin-top: .45rem;
  color: var(--paper);
}

/* Weight 300, not 200. Newsreader's 200 is a hairline — at this size, on a
   black background, the thin strokes drop below the contrast threshold on
   many screens and the line disappears. Colour lifted from --mute (40%) to
   --dim (62%) for the same reason. */
.work__ctx {
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 1.02rem;
  line-height: 1.4;
  margin-top: .32rem;
  color: var(--dim);
}

.work__role {
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--hair-2);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  font-variation-settings: 'wdth' 110;
}

.work__note {
  display: block;
  margin-top: .5rem;
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 300;
  color: var(--dim);
  font-size: .96rem;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
}

/* Escape hatch on the YouTube-hosted cards. If an embed ever fails — a video
   pulled down, an ad-blocker eating the iframe, a corporate network blocking
   youtube.com — there is still a way through to the clip. */
.work__yt {
  display: inline-block;
  margin-top: .85rem;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  font-variation-settings: 'wdth' 110;
  color: var(--mute);
  border-bottom: 1px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}

.work__yt:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* --- Filter buttons ------------------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.filter {
  padding: .6rem 1.2rem;
  border: 1px solid var(--hair);
  border-radius: 100px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 110;
  color: var(--dim);
  white-space: nowrap;
  transition: color .25s var(--ease), border-color .25s var(--ease),
              background .25s var(--ease);
}

.filter:hover { color: var(--paper); border-color: var(--paper-mute, rgba(255,255,255,.45)); }

.filter[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
  font-weight: 700;
}

/* --- Call to action ------------------------------------------------------- */
.cta { text-align: center; }
.cta .lg, .cta .xl { max-width: 20ch; margin-inline: auto; }

.cta__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}

/* --- Credit list ----------------------------------------------------------
   Names only. In this trade the list of names is the qualification; roles
   and dates just get in the way of scanning it.
   ------------------------------------------------------------------------ */
/* Grid, not CSS columns. Multi-column fills one column top-to-bottom before
   starting the next, so name 1 and name 2 end up far apart vertically. Grid
   flows LEFT TO RIGHT across each row, which means the first names in
   credits.js are the first ones read — and the first ones on screen. */
.names {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  column-gap: clamp(1.5rem, 3.5vw, 3.5rem);
  list-style: none;
  border-top: 1px solid var(--hair);
}

.names li {
  padding: .72rem 0;
  border-bottom: 1px solid var(--hair-2);
  font-weight: 700;
  font-size: clamp(.95rem, 1.35vw, 1.1rem);
  text-transform: uppercase;
  letter-spacing: -.005em;
  font-variation-settings: 'wdth' 114;
  color: rgba(255, 255, 255, .82);
  transition: color .2s var(--ease), padding-left .25s var(--ease);
}

.names li:hover { color: var(--accent); padding-left: .5rem; }
.names li.hot { color: var(--paper); }
.names li.hot:hover { color: var(--accent); }

/* --- Disciplines ---------------------------------------------------------- */
.disc { border-top: 1px solid var(--hair); }

.disc__row {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(1.6rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--hair-2);
  align-items: start;
  transition: background .25s var(--ease);
}

.disc__row:hover { background: var(--ink-2); }
.disc__row:hover .md { color: var(--accent); }
.disc__n { font-size: .72rem; color: var(--accent); padding-top: .35rem; font-variation-settings: 'wdth' 108; letter-spacing: .1em; }

.disc__b {
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 300;
  color: var(--dim);
  font-size: 1.08rem;
  line-height: 1.55;
}
.md { transition: color .25s var(--ease); }

/* --- Press ---------------------------------------------------------------- */
.press-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }

.press-card {
  border: 1px solid var(--hair);
  padding: clamp(1.5rem, 2.8vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}

.press-card:hover { border-color: var(--accent); background: var(--ink-2); }

/* Outlet name and the dateline stay Archivo caps — they're labels. */
.press-card__o { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); font-weight: 700; font-variation-settings: 'wdth' 112; }
.press-card__m { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--hair-2); font-size: .74rem; color: var(--mute); letter-spacing: .08em; text-transform: uppercase; font-variation-settings: 'wdth' 106; }

/* The quote itself is speech, so it gets the serif. Weight 400 rather than
   300: these run several lines and are the thing you actually want read. */
.press-card__q {
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.14rem, 1.7vw, 1.35rem);
  line-height: 1.4;
  color: var(--paper);
}

/* --- Contact -------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }

.cline { display: block; padding-block: 1.35rem; border-bottom: 1px solid var(--hair-2); transition: padding-left .3s var(--ease); }
.cline:hover { padding-left: .8rem; }
.cline__l { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--mute); font-variation-settings: 'wdth' 110; }
.cline__v { font-size: clamp(1.05rem, 1.9vw, 1.45rem); font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; margin-top: .45rem; display: flex; align-items: center; gap: .6rem; font-variation-settings: 'wdth' 116; transition: color .25s var(--ease); }
.cline:hover .cline__v { color: var(--accent); }

.brief { list-style: none; display: grid; gap: 1.05rem; margin-top: 1.5rem; }

/* Label in Archivo caps, explanation in the serif — the same split used on
   the work cards. */
.brief li {
  padding-bottom: 1.05rem;
  border-bottom: 1px solid var(--hair-2);
  font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 300;
  color: var(--dim);
  font-size: 1.06rem;
  line-height: 1.5;
}

.brief li:last-child { border-bottom: 0; padding-bottom: 0; }

.brief b {
  font-family: var(--sans);
  font-style: normal;
  color: var(--paper);
  font-weight: 700;
  text-transform: uppercase;
  font-size: .8rem;
  letter-spacing: .1em;
  font-variation-settings: 'wdth' 112;
  display: block;
  margin-bottom: .3rem;
}

/* --- Footer --------------------------------------------------------------- */
.site-foot { border-top: 1px solid var(--hair); padding-block: clamp(3rem, 6vw, 4.5rem) 2.25rem; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(140px, 1fr)); gap: clamp(2rem, 5vw, 4rem); margin-bottom: 3rem; }
.foot-col h4 { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--mute); margin-bottom: 1.1rem; font-weight: 600; font-variation-settings: 'wdth' 110; }
.foot-col ul { list-style: none; display: grid; gap: .6rem; }
.foot-col a { color: var(--dim); font-size: .92rem; transition: color .25s var(--ease); }
.foot-col a:hover { color: var(--accent); }
.foot-base { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding-top: 1.75rem; border-top: 1px solid var(--hair-2); font-size: .68rem; color: var(--mute); letter-spacing: .16em; text-transform: uppercase; font-variation-settings: 'wdth' 108; }

/* --- Line-break control ---------------------------------------------------
   A hyphen is a legal break point, so "Trans-Siberian" will split across
   lines and leave "Trans-" hanging. .nowrap keeps a phrase whole at any
   width; .br-wide forces a break only where there's room for it to help.
   ------------------------------------------------------------------------ */
.nowrap { white-space: nowrap; }

/* Hidden on narrow screens: on a phone the text already wraps every couple
   of words, and a forced break there just creates a stranded short line. */
.br-wide { display: none; }

@media (min-width: 700px) {
  .br-wide { display: inline; }
}

/* --- Utility -------------------------------------------------------------- */
/* Fade-in on scroll — but ONLY when JavaScript is running.
   The .js class is added by a one-line script in the <head> of each page.
   Without it these rules don't apply, so if JavaScript is ever blocked or
   broken the content is simply visible rather than the page being blank.
   (This is why the Work page appeared empty once: 30 cards were injected
   AFTER the reveal observer had already run, so they never got .is-in and
   stayed at opacity 0.) */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

.skip { position: absolute; left: -9999px; background: var(--accent); color: var(--ink); padding: .75rem 1.25rem; z-index: 200; font-weight: 700; }
.skip:focus { left: 0; top: 0; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1100px) {
  .role { display: none; }
}

@media (max-width: 1000px) {
  .work--wide { grid-column: span 1; }
  .contact-grid { grid-template-columns: 1fr; }
  .disc__row { grid-template-columns: 3rem 1fr; }
  .disc__b { grid-column: 2; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .names { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav-toggle { display: block; }
  .nav {
    position: fixed;
    inset: 60px 0 auto 0;
    background: rgba(0, 0, 0, .96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--hair);
    flex-direction: column;
    gap: 0;
    padding: .5rem var(--gutter) 1.5rem;
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding-block: .95rem; font-size: .82rem; border-bottom: 1px solid var(--hair-2); text-shadow: none; }
  .nav a::after { display: none; }

  /* Also scaled 25%, or this would override .xl and undo the reduction on phones. */
  .hero h1 { font-size: clamp(1.39rem, 6.38vw, 2.25rem); font-variation-settings: 'wdth' 115; }
  .caption { text-align: left; }
  .names { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .slide.is-on img { animation: none; }
}