/* ============================================================
   WE DON'T EXIST  ·  editorial / monochrome / type-forward
   Modeled on Pretty Bird, Moldyroom, Canada.
   Dials: VARIANCE 7 · MOTION 5 · DENSITY 3.

   Locks:
     Theme   = light only (editorial, print-emulating)
     Accent  = none. The ONLY color on the page comes from the
               work itself: thumbnails sit in grayscale and bloom
               to full color on hover.
     Corners = sharp (radius 0) everywhere.
     Type    = Newsreader (display serif, echoes the wordmark)
               Space Grotesk (UI / labels / short body)
               Space Mono (micro labels: role, index)
   ============================================================ */

:root {
  --paper:    #FAFAF8;   /* gallery near-white */
  --paper-2:  #F1F0EC;   /* faint panel for media wells */
  --ink:      #121110;   /* near-black */
  --ink-2:    #2A2926;
  --mute:     #6E6C66;   /* secondary text */
  --mute-2:   #A3A199;   /* faint text */
  --line:     rgba(18, 17, 16, 0.16);
  --line-soft:rgba(18, 17, 16, 0.08);

  --serif:   "Newsreader", Georgia, "Times New Roman", serif;
  --grotesk: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --mono:    "Space Mono", ui-monospace, "SFMono-Regular", monospace;

  --max: 1480px;
  --pad: clamp(1.25rem, 5vw, 4.5rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--grotesk);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
::selection { background: var(--ink); color: var(--paper); }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.0;
}

/* tiny mono label used for ROLE / index / nav meta */
.mono {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
}

/* ---------- reveal-on-scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* faint top grain, fixed, never on a scrolling element */
.grain {
  position: fixed; inset: 0; z-index: 80; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  height: 68px;
  border-bottom: 1px solid transparent;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
}
.nav.is-stuck {
  background: rgba(250, 250, 248, 0.82);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border-bottom-color: var(--line);
}
.nav__inner {
  max-width: var(--max); height: 100%; margin: 0 auto; padding: 0 var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
/* wordmark: real logo image drops in at assets/logo.svg; serif text is the
   live fallback and what shows until the file exists. */
.wordmark { display: inline-flex; align-items: center; line-height: 1; }
.wordmark__img { height: 22px; width: auto; }
.wordmark__txt {
  font-family: var(--serif); font-weight: 700; font-size: 1.32rem;
  letter-spacing: -0.02em; color: var(--ink);
}
.nav__links { display: flex; align-items: center; gap: 1.9rem; }
.nav__links a {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink);
  padding-bottom: 2px; border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.nav__links a:hover, .nav__links a[aria-current="page"] { border-bottom-color: var(--ink); }
.nav__menu { display: none; background: none; border: 0; cursor: pointer; padding: 0.5rem; }
.nav__menu span { display: block; width: 22px; height: 1.5px; background: var(--ink); margin: 5px 0; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }

/* ============================================================
   HERO  —  the contact sheet IS the hero
   A full-bleed auto-playing grid of the films. It plays in grayscale (the
   only-colour-from-the-work lock) and blooms to full colour under a cursor
   lens. A minimal caption sits on a paper fade at the foot.
   ============================================================ */
.hero {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hero__caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  max-width: var(--max); margin: 0 auto;
  padding: 0 var(--pad) clamp(2.4rem, 6vh, 4rem);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.2rem 2.5rem; flex-wrap: wrap;
}
.hero__desc {
  font-family: var(--grotesk); font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--ink-2); max-width: 42ch; line-height: 1.4;
}
.hero__cta {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  border-bottom: 1px solid var(--ink); padding-bottom: 3px; white-space: nowrap;
  transition: opacity 0.3s var(--ease);
}
.hero__cta:hover { opacity: 0.6; }

/* ============================================================
   HERO contact sheet  —  auto-play + colour-under-cursor
   ============================================================ */
.hero__develop {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  contain: layout paint;
  --r: clamp(300px, 34vw, 520px);   /* color reveal radius */
}
.hero__reel {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: var(--paper-2);
}
/* grayscale veil everywhere EXCEPT a soft hole at the cursor (colour shows
   through). At rest the hole is off-screen, so the whole grid reads grayscale. */
.hero__desat {
  position: absolute; inset: 0; z-index: 1;
  -webkit-backdrop-filter: grayscale(1) contrast(1.05) brightness(0.98);
          backdrop-filter: grayscale(1) contrast(1.05) brightness(0.98);
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--mx, -999px) var(--my, -999px), transparent 0, transparent 48%, #000 72%);
          mask-image: radial-gradient(circle var(--r) at var(--mx, -999px) var(--my, -999px), transparent 0, transparent 48%, #000 72%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  will-change: -webkit-mask-image, mask-image;
}
/* paper fades: top keeps the nav legible, bottom carries the caption */
.hero__develop::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, #FAFAF8 0%, rgba(250,250,248,0) 13%, rgba(250,250,248,0) 80%, #FAFAF8 100%);
}

/* Reduced motion: video paused in JS; show a still, fully grayscale grid (no lens). */
@media (prefers-reduced-motion: reduce) {
  .hero__desat { -webkit-mask-image: none; mask-image: none; will-change: auto; }
}
/* Touch / no-hover: grayscale auto-play, no cursor lens. */
@media (hover: none), (pointer: coarse) {
  .hero__desat { -webkit-mask-image: none; mask-image: none; }
}

/* Load-in: a paper grid that flickers away tile-by-tile to reveal the films.
   Columns / rows / per-tile delays are set in JS; the overlay is removed once done. */
.hero__intro {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  overflow: hidden;   /* clip the partial cells the cover-crop pushes off-screen */
}
.hero__intro-tile { position: absolute; background: var(--paper); will-change: opacity; }
.hero__intro.is-playing .hero__intro-tile {
  animation: tileFlicker var(--dur, 0.62s) steps(1, end) var(--d, 0s) both;
}
@keyframes tileFlicker {
  0%, 12%  { opacity: 1; }     /* paper — film hidden */
  16%, 24% { opacity: 0; }     /* first flash of film */
  28%, 38% { opacity: 1; }     /* blink back to paper */
  42%, 56% { opacity: 0; }     /* film */
  60%      { opacity: 0.8; }   /* faint paper ghost */
  68%      { opacity: 0; }
  80%      { opacity: 0.32; }  /* last flicker */
  100%     { opacity: 0; }     /* film fully revealed */
}
@media (prefers-reduced-motion: reduce) { .hero__intro { display: none; } }

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
section { padding-left: var(--pad); padding-right: var(--pad); }
.wrap { max-width: var(--max); margin: 0 auto; }

.sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem 2rem; flex-wrap: wrap;
  padding: clamp(4rem, 11vh, 8rem) 0 2.2rem;
  border-bottom: 1px solid var(--line);
}
.sec-head h2 { font-size: clamp(2rem, 5.2vw, 4.2rem); letter-spacing: -0.02em; }
.sec-head__note { color: var(--mute); font-size: 0.95rem; max-width: 34ch; }

/* ============================================================
   WORK  (grid / list, grayscale → color on hover)
   ============================================================ */
.work { padding-top: clamp(0.5rem, 2vh, 1.5rem); padding-bottom: clamp(3rem, 9vh, 7rem); }

.work__grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: clamp(1.1rem, 2.2vw, 2.2rem) clamp(1rem, 2vw, 1.8rem);
  padding-top: 0;
}
/* uniform grid: every work item is the same size (3-up on desktop) */
.work-item,
.work-item.s2,
.work-item.s3,
.work-item.s6 { grid-column: span 2; display: block; }

.work-item__media {
  position: relative; overflow: hidden; background: var(--paper-2);
  aspect-ratio: 16 / 9;
}
.work-item__media img,
.work-item__media video {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.03) brightness(0.99);
  transform: scale(1.001);
  transition: filter 0.6s var(--ease), transform 1s var(--ease);
}
.work-item:hover .work-item__media img,
.work-item:hover .work-item__media video,
.work-item:focus-visible .work-item__media img,
.work-item:focus-visible .work-item__media video,
.work-item.is-inview .work-item__media img,
.work-item.is-inview .work-item__media video {
  filter: grayscale(0) contrast(1) brightness(1);
  transform: scale(1.04);
}
/* hairline frame + watch cue */
.work-item__media::after {
  content: "WATCH"; position: absolute; left: 0.85rem; bottom: 0.7rem;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.18em; color: var(--paper);
  background: rgba(18,17,16,0.55); padding: 0.25rem 0.5rem;
  opacity: 0; transform: translateY(6px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  backdrop-filter: blur(2px);
}
.work-item:hover .work-item__media::after,
.work-item:focus-visible .work-item__media::after,
.work-item.is-inview .work-item__media::after { opacity: 1; transform: none; }
.work-item:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.work-item__meta {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: 0.15rem 1rem; padding-top: 0.85rem;
}
.work-item__role {
  grid-column: 1 / -1;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--mute);
}
.work-item__title {
  font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em;
  font-size: clamp(1.12rem, 1.7vw, 1.7rem); line-height: 1.05;
}
.work-item.s2 .work-item__title { font-size: clamp(1.05rem, 1.4vw, 1.35rem); }
.work-item__artist { grid-column: 1; color: var(--mute); font-size: 0.9rem; }
.work-item__views {
  grid-column: 2; align-self: baseline;
  font-family: var(--mono); font-size: 0.66rem; color: var(--mute-2); white-space: nowrap;
}

/* ---- LIST view ---- */
.work__grid.is-list { display: block; }
.work__grid.is-list .work-item,
.work__grid.is-list .work-item.s3,
.work__grid.is-list .work-item.s6 {
  grid-column: auto;
  display: grid; grid-template-columns: clamp(120px, 18vw, 230px) 1fr auto;
  align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(0.9rem, 2vh, 1.4rem) 0; border-bottom: 1px solid var(--line-soft);
}
.work__grid.is-list .work-item__meta {
  grid-template-columns: 1fr; padding-top: 0; gap: 0.2rem;
}
.work__grid.is-list .work-item__title { font-size: clamp(1.3rem, 2.4vw, 2.1rem); }
.work__grid.is-list .work-item__views { grid-column: auto; align-self: center; text-align: right; }
.work__grid.is-list .work-item__media::after { display: none; }

/* ============================================================
   MARQUEE  (collaborators — one per page)
   ============================================================ */
.marquee {
  overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-top: clamp(2.5rem, 7vh, 5rem); padding: 0;
}
.marquee__track {
  display: flex; align-items: center; gap: 2.5rem; white-space: nowrap; width: max-content;
  padding: 1.5rem 0; animation: marquee 46s linear infinite;
}
.marquee__track span {
  font-family: var(--serif); font-weight: 500; font-style: italic;
  font-size: clamp(1.4rem, 3.4vw, 2.8rem); letter-spacing: -0.01em; color: var(--ink);
}
.marquee__track i { color: var(--mute-2); font-style: normal; font-size: 0.9rem; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; white-space: normal; width: auto; justify-content: center; gap: 1rem 2rem; }
}

/* ============================================================
   STUDIO  (split: portrait + editorial bio)
   ============================================================ */
.studio {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
  padding-top: clamp(4.5rem, 11vh, 8rem); padding-bottom: clamp(4.5rem, 11vh, 8rem);
}
.studio__media { background: var(--paper-2); overflow: hidden; }
.studio__media img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  filter: grayscale(1) contrast(1.03);
}
.studio__text h2 { font-size: clamp(1.9rem, 4vw, 3.4rem); max-width: 17ch; letter-spacing: -0.018em; }
.studio__text p { margin-top: 1.4rem; color: var(--ink-2); max-width: 50ch; font-size: 1.02rem; }
.studio__text p.muted { color: var(--mute); }
.studio__link {
  display: inline-block; margin-top: 2rem;
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  border-bottom: 1px solid var(--ink); padding-bottom: 3px; transition: opacity 0.3s var(--ease);
}
.studio__link:hover { opacity: 0.6; }

/* ============================================================
   CAPABILITIES  (typographic list, not cards)
   ============================================================ */
.cap { max-width: var(--max); margin: 0 auto; padding-bottom: clamp(3.5rem, 9vh, 7rem); }
.cap__list { list-style: none; border-top: 1px solid var(--line); }
.cap__row {
  display: grid; grid-template-columns: 3.5rem 1fr; gap: clamp(1rem, 4vw, 3.5rem);
  align-items: baseline; padding: clamp(1.5rem, 3.5vh, 2.6rem) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.4s var(--ease);
}
.cap__row:hover { padding-left: 0.5rem; }
.cap__no { font-family: var(--mono); font-size: 0.72rem; color: var(--mute-2); }
.cap__row h3 { font-size: clamp(1.4rem, 2.8vw, 2.4rem); font-weight: 600; letter-spacing: -0.015em; }
.cap__row p { margin-top: 0.5rem; color: var(--mute); max-width: 52ch; font-size: 0.98rem; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact {
  max-width: var(--max); margin: 0 auto; text-align: center;
  padding-top: clamp(5rem, 13vh, 9rem); padding-bottom: clamp(5rem, 13vh, 9rem);
}
.contact h2 { font-size: clamp(2.8rem, 11vw, 9rem); letter-spacing: -0.03em; line-height: 0.94; }
.contact h2 em { font-style: italic; font-weight: 500; }
.contact__email {
  display: inline-block; margin-top: 2.2rem;
  font-family: var(--serif); font-size: clamp(1.2rem, 3vw, 2rem);
  border-bottom: 1px solid var(--line); padding-bottom: 0.25rem;
  transition: border-color 0.3s var(--ease);
}
.contact__email:hover { border-bottom-color: var(--ink); }
.contact__socials {
  margin-top: 2.6rem; display: flex; gap: 1.6rem; justify-content: center; flex-wrap: wrap;
}
.contact__socials a {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--mute);
  padding-bottom: 2px; border-bottom: 1px solid transparent; transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.contact__socials a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-top: 1px solid var(--line); }
.footer__inner {
  max-width: var(--max); margin: 0 auto; padding: 2rem var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.footer__mark { font-family: var(--serif); font-weight: 700; font-size: 1.1rem; }
.footer__legal { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; color: var(--mute-2); }
.footer__top {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute);
  transition: color 0.3s var(--ease);
}
.footer__top:hover { color: var(--ink); }

/* ============================================================
   VIDEO MINI-PLAYER (lightbox)
   ============================================================ */
.player {
  position: fixed; inset: 0; z-index: 100;
  display: none; align-items: center; justify-content: center;
  padding: clamp(1.5rem, 5vw, 4rem);
}
.player.is-open { display: flex; }
.player__scrim {
  position: absolute; inset: 0; cursor: pointer;
  background: rgba(18, 17, 16, 0.5);           /* semi-transparent: the page stays visible behind */
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: scrimIn 0.35s var(--ease) both;
}
@keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }
.player__box {
  position: relative; z-index: 1;
  width: 100%; max-width: 940px; aspect-ratio: 16 / 9;
  background: #000;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.4);  /* shadow behind it */
  animation: playerPop 0.4s var(--ease) both;
}
@keyframes playerPop {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to { opacity: 1; transform: none; }
}
.player__frame { position: absolute; inset: 0; }
.player__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.player__close {
  position: absolute; top: -2.4rem; right: 0; z-index: 2;
  background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(250, 250, 248, 0.85); transition: color 0.25s var(--ease);
}
.player__close:hover { color: var(--paper); }
@media (prefers-reduced-motion: reduce) {
  .player__scrim, .player__box { animation: none; }
}

/* ============================================================
   PHOTOGRAPHY  (placeholder / coming-soon)
   ============================================================ */
.page-hero {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(6rem, 13vh, 9rem) var(--pad) clamp(2rem, 5vh, 4rem);
}
.page-hero h1 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.5rem, 5.5vw, 4.5rem); letter-spacing: -0.03em; line-height: 0.9;
}
.page-hero p {
  margin-top: 1.1rem; font-family: var(--mono); font-size: 0.85rem;
  letter-spacing: 0.1em; color: var(--mute);
}
.covers {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(0.5rem, 2vh, 1.5rem) var(--pad) clamp(2rem, 6vh, 4rem);
}
.covers__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.8rem, 4vh, 3rem) clamp(1.1rem, 2vw, 2rem);
}
.cover-item { display: block; }
.cover-item__media {
  position: relative; overflow: hidden; background: var(--paper-2);
  aspect-ratio: 1 / 1;
}
.cover-item__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.03) brightness(0.99);
  transform: scale(1.001);
  transition: filter 0.6s var(--ease), transform 1s var(--ease);
}
.cover-item:hover .cover-item__media img,
.cover-item:focus-visible .cover-item__media img,
.cover-item.is-inview .cover-item__media img {
  filter: grayscale(0) contrast(1) brightness(1);
  transform: scale(1.04);
}
.cover-item__media::after {
  content: "Listen"; position: absolute; left: 0.85rem; bottom: 0.7rem;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper);
  background: rgba(18,17,16,0.55); padding: 0.25rem 0.5rem;
  opacity: 0; transform: translateY(6px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.cover-item:hover .cover-item__media::after,
.cover-item:focus-visible .cover-item__media::after,
.cover-item.is-inview .cover-item__media::after { opacity: 1; transform: none; }
.cover-item:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.cover-item__meta {
  display: grid; grid-template-columns: 1fr; gap: 0.18rem; padding-top: 0.95rem;
}
.cover-item__role {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--mute);
}
.cover-item__title {
  font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em;
  font-size: clamp(1.15rem, 1.5vw, 1.6rem); line-height: 1.08;
}
.cover-item__artist { color: var(--mute); font-size: 0.9rem; }
.cover-item__credit {
  margin-top: 0.4rem;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.02em;
  line-height: 1.55; color: var(--mute-2);
}
.photo-note {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--pad) clamp(6rem, 14vh, 10rem);
  display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
}
.photo-note p { color: var(--mute); max-width: 40ch; }
.photo-note a {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  border-bottom: 1px solid var(--ink); padding-bottom: 3px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .work-item.s6 { grid-column: span 2; }
}
@media (max-width: 860px) {
  .studio { grid-template-columns: 1fr; }
  .studio__media { max-width: 460px; }
  .work-item, .work-item.s2, .work-item.s3, .work-item.s6 { grid-column: span 3; }   /* 2-up, uniform */
  .work__grid { grid-template-columns: repeat(6, 1fr); }
  .covers__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  /* mobile: the nav is a defined frosted-paper bar (desktop floats transparent over the hero) */
  .nav {
    background: rgba(250, 250, 248, 0.92);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
            backdrop-filter: blur(12px) saturate(120%);
    border-bottom-color: var(--line);
  }
  .nav__links {
    display: none;
  }
  .nav__links.is-open {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1.3rem;
    position: absolute; top: 68px; left: 0; right: 0; padding: 1.8rem var(--pad);
    background: rgba(250,250,248,0.97);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
  }
  .nav__menu { display: block; }
}
@media (max-width: 540px) {
  .work__grid, .work__grid.is-list { grid-template-columns: 1fr; }
  .work-item, .work-item.s2, .work-item.s3, .work-item.s6 { grid-column: span 1; }
  .work__grid.is-list .work-item,
  .work__grid.is-list .work-item.s3,
  .work__grid.is-list .work-item.s6 { grid-template-columns: 96px 1fr; }
  .work__grid.is-list .work-item__views { display: none; }
  .covers__grid { grid-template-columns: 1fr; }
}