/* ─── RESET & BASE ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* pure white so the page is seamless with the portrait's studio background */
  --bg:          #ffffff;
  --surface:     #f4f4f2;   /* placeholders, empty media */
  --ink:         #111111;   /* headings, primary text */
  --ink-2:       #555555;   /* body copy — 7.5:1 on white */
  --ink-3:       #767676;   /* captions, meta — 4.5:1, the AA floor */
  --line:        #e8e8e5;
  --line-strong: #cfcfcb;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1); /* long, decelerating — used for every reveal */
  --container: 1320px;
  --gutter: 1.25rem;
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; color: inherit; cursor: pointer; }
ul { list-style: none; }

::selection { background: var(--ink); color: var(--bg); }

:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

.skip-link {
  position: fixed;
  top: -100%; left: 1rem;
  z-index: 400;
  background: var(--ink);
  color: var(--bg);
  padding: 0.7rem 1.2rem;
  font-size: 0.8rem;
}
.skip-link:focus { top: 1rem; }

/* ─── SHARED LAYOUT ─────────────────────────────────────────────── */
section {
  padding: 5rem var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
  scroll-margin-top: 4rem; /* keep anchored headings clear of the fixed nav */
}

/* every content section opens on a hairline — the only ornament on the page.
   Drawn as a background so it lines up with the content, not the padding box */
section:not(#hero),
footer {
  background: linear-gradient(var(--line), var(--line)) var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat;
}

.section-heading {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-bottom: 2.5rem;
  text-align: center;
}

.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}
.section-head .section-heading { margin-bottom: 0; }

.section-subheading {
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
  text-align: center;
}

.text-link {
  display: inline-flex;
  align-self: flex-start; /* don't stretch when it sits in a flex column */
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  transition: gap 0.3s var(--ease), color 0.25s;
}
.text-link:hover { gap: 0.8rem; }

/* ─── NAV ───────────────────────────────────────────────────────── */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem var(--gutter);
  transition: transform 0.6s var(--ease-expo);
}

/* steps aside while scrolling down, returns on the way up. Only applied
   while hidden — any transform would make #navbar the containing block for
   the fixed mobile menu, so the resting state must stay `transform: none` */
#navbar.nav-hidden { transform: translate3d(0, -100%, 0); }

/* the scrolled background lives on a pseudo-element, not #navbar itself —
   backdrop-filter on #navbar would make it the containing block for the
   fixed-position mobile menu inside it, collapsing that menu to nav height */
#navbar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}

#navbar.scrolled::before {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: var(--line);
}

.nav-logo { font-size: 1rem; font-weight: 500; letter-spacing: -0.01em; z-index: 210; }

.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  padding: 0.6rem 0.4rem;
  z-index: 210;
}
.nav-toggle span { width: 22px; height: 1.5px; background: var(--ink); transition: transform 0.3s var(--ease); }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }

.nav-links {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
  padding: 0 var(--gutter);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
  z-index: 190;
}
.nav-links.is-open { opacity: 1; visibility: visible; }

.nav-links a {
  font-size: 2.25rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--ink-3); }

@media (min-width: 860px) {
  #navbar { padding: 1.5rem 2.5rem; }
  .nav-toggle { display: none; }
  .nav-links {
    position: static;
    flex-direction: row;
    gap: 2rem;
    padding: 0;
    opacity: 1;
    visibility: visible;
    background: none;
  }
  .nav-links a { font-size: 0.9rem; letter-spacing: 0; color: var(--ink-2); }
  .nav-links a:hover { color: var(--ink); }
}

/* ─── HERO ──────────────────────────────────────────────────────── */
/* Phones (<900px) — magazine cover. The portrait fills the screen from the
   bottom; "Yahya" runs across above the head, and a cut-out of the head is
   layered *over* the name so the hair tucks in front of the letters. Every
   position is derived from the photo's rendered width (--pw), so the overlap
   lands the same on every phone.
   Desktop (≥900px) — the portrait fills the screen and the text sits
   vertically centred in its empty left half. */

#hero {
  position: relative;
  max-width: none;
  padding: 0;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  /* photo width: head spans ~¾ of the screen, capped so the photo never
     takes more than ~72% of the screen height (keeps room for the name) */
  --pw: min(270vw, 128svh);
  --name-size: min(30vw, 21svh);
}

/* source photo is 2000×1126; the face is centred at x = 66.3% */
.hero-photo {
  position: absolute;
  bottom: 0;
  left: calc(50% - var(--pw) * 0.663);
  width: var(--pw);
  max-width: none;
  height: auto;
  aspect-ratio: 2000 / 1126;
  will-change: transform;
  /* `backwards` only: once the intro ends, the scroll-driven transform takes over */
  animation: heroPhotoIn 2.2s var(--ease-expo) backwards;
}

/* the cut-out is the head, cropped from x 1047–1609 / y 38–762 of the same
   2000×1126 photo — placed at exactly that spot on top of it */
.hero-cutout {
  position: absolute;
  z-index: 2;
  left: calc(50% - var(--pw) * 0.663 + var(--pw) * 0.5235);
  bottom: calc(var(--pw) * 0.182);
  width: calc(var(--pw) * 0.281);
  max-width: none;
  height: auto;
  pointer-events: none;
  animation: heroPhotoIn 2.2s var(--ease-expo) backwards;
  /* scale around the *photo's* centre during the intro so both layers stay locked together */
  transform-origin: -8.36% 72.5%;
}

/* soft white fade at the foot so the tagline reads cleanly over the shirt */
#hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 22%;
  z-index: 2;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.92) 70%);
  pointer-events: none;
}

.hero-content { position: static; }

.hero-name {
  position: absolute;
  z-index: 1;                                   /* above the photo, below the cut-out */
  left: 0;
  right: 0;
  text-align: center;
  /* the head's top sits 0.544·pw above the screen bottom; drop the name's
     baseline just below it so the hair overlaps the lower part of the letters */
  bottom: calc(var(--pw) * 0.544 - var(--name-size) * 0.34);
  font-size: var(--name-size);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.055em;
}

.hero-kicker {
  position: absolute;
  z-index: 3;
  left: var(--gutter);
  right: var(--gutter);
  text-align: center;
  bottom: calc(var(--pw) * 0.544 - var(--name-size) * 0.34 + var(--name-size) * 0.92 + 0.6rem);
  font-size: 0.85rem;
  color: var(--ink-3);
}

.hero-foot {
  position: absolute;
  z-index: 3;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 1.75rem;
  text-align: center;
}

.hero-tagline {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--ink-2);
  max-width: 22rem;
  margin: 0 auto 1rem;
}

/* intro: the portrait settles from a slight zoom, the name rises letter by
   letter from behind its own baseline, then the supporting lines follow */
.hero-name { clip-path: inset(-0.25em -0.3em -0.3em -0.3em); }
.hero-name .char {
  display: inline-block;
  animation: charRise 1.5s var(--ease-expo) calc(300ms + var(--i) * 70ms) backwards;
}
.hero-kicker  { animation: heroLineIn 1.4s var(--ease-expo) 200ms backwards; }
.hero-tagline { animation: heroLineIn 1.4s var(--ease-expo) 750ms backwards; }
.hero-content .text-link { animation: heroLineIn 1.4s var(--ease-expo) 900ms backwards; }

@keyframes heroPhotoIn { from { opacity: 0; transform: scale(1.08); } }
@keyframes charRise    { from { transform: translate3d(0, 175%, 0); } }
@keyframes heroLineIn  { from { opacity: 0; transform: translate3d(0, 18px, 0); } }

@media (min-width: 900px) {
  #hero { min-height: 640px; }
  #hero::after, .hero-cutout { display: none; }

  .hero-photo {
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: 75% 25%;
  }

  /* text block vertically centred in the left half — nudged slightly above
     true centre, where the eye expects a title to sit */
  .hero-content {
    position: relative;
    z-index: 1;
    height: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 2.5rem 8vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    will-change: transform, opacity;
  }
  .hero-name, .hero-kicker, .hero-foot { position: static; text-align: left; }
  .hero-name { margin-left: -0.04em; }  /* optical: pull the Y's overhang back onto the text edge */
  .hero-kicker { margin-bottom: 1rem; }
  .hero-name { font-size: clamp(3.5rem, 11vw, 9.5rem); margin-bottom: 1.5rem; }
  .hero-tagline { max-width: 24rem; margin: 0 0 2rem; }
}

/* ─── SHOWREEL ──────────────────────────────────────────────────── */
.video-wrapper { max-width: 100%; }

#showreel-content {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000; /* film plays in a dark frame, like a screening room */
  overflow: hidden;
}

#showreel-content iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ─── MEDIA PLACEHOLDER ─────────────────────────────────────────── */
.media-placeholder {
  position: relative;
  width: 100%; height: 100%;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: center;
  padding: 1.5rem;
  background: var(--surface);
  color: var(--ink-3);
}

.media-placeholder__tag {
  position: absolute;
  top: 0.9rem; left: 0.9rem;
  font-size: 0.7rem;
  color: var(--ink-3);
}

.media-placeholder__label { font-size: 0.85rem; max-width: 260px; }

/* ─── WORK GRID ─────────────────────────────────────────────────── */
/* the films are vertical (9:16), so the cards are too — no cropping */
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 0.75rem; }

.work-item { display: block; }

.work-media { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: var(--surface); }
.work-media img { transition: transform 1.6s var(--ease-expo) var(--reveal-delay, 0ms); }
.work-item:hover .work-media img { transform: scale(1.03); }

.work-duration {
  position: absolute;
  bottom: 0.6rem; right: 0.6rem;
  padding: 0.15rem 0.45rem;
  background: rgba(17, 17, 17, 0.7);
  color: #fff;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.work-caption { display: flex; flex-direction: column; gap: 0.1rem; padding-top: 0.8rem; }
.work-title { font-size: 0.95rem; font-weight: 500; }
.work-tag { font-size: 0.85rem; color: var(--ink-3); }
.work-item:hover .work-title { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 700px) {
  .work-grid { grid-template-columns: repeat(3, 1fr); gap: 3rem 1.25rem; }
}
@media (min-width: 1100px) {
  .work-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ─── FILTER BAR ────────────────────────────────────────────────── */
.filter-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1.25rem; }

.filter-btn {
  background: none;
  border: none;
  padding: 0.25rem 0;
  font-size: 0.9rem;
  color: var(--ink-3);
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.filter-btn:hover { color: var(--ink); }
.filter-btn.is-active { color: var(--ink); border-color: var(--ink); }

/* ─── ABOUT ──────────────────────────────────────────────────────── */
.about-intro { display: grid; gap: 2rem; }

.about-photo { height: auto; aspect-ratio: 1; max-width: 22rem; object-position: center 15%; }

.about-lead {
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  max-width: 32ch;
  margin-bottom: 1.5rem;
}

.about-block p { color: var(--ink-2); max-width: 60ch; }
.about-block p + p { margin-top: 1rem; }

@media (min-width: 900px) {
  .about-intro { grid-template-columns: minmax(0, 22rem) 1fr; gap: 4rem; align-items: end; }
}

/* services: a plain two-column list on hairlines */
.services-list { border-top: 1px solid var(--line); }
.services-list li {
  display: grid;
  gap: 0.2rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
.service-name { font-weight: 500; }
.service-note { color: var(--ink-3); font-size: 0.95rem; }

@media (min-width: 700px) {
  .services-list li { grid-template-columns: minmax(0, 18rem) 1fr; gap: 2rem; align-items: baseline; }
}

.about-sub { margin-top: 5rem; }

/* ─── GALLERIES ─────────────────────────────────────────────────── */
.stills-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.stills-grid img, .stills-grid .media-placeholder { aspect-ratio: 9 / 16; }

@media (min-width: 700px) { .stills-grid { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; } }
@media (min-width: 1100px) { .stills-grid { grid-template-columns: repeat(5, 1fr); } }

.street-year { color: var(--ink-3); font-size: 0.9rem; margin: -1rem 0 1.5rem; text-align: center; }

/* masonry via CSS columns — photos keep their own aspect ratio (portrait,
   landscape, square) instead of being force-cropped into a uniform cell */
.street-grid { column-count: 2; column-gap: 0.5rem; }
.street-grid img, .street-grid .media-placeholder {
  height: auto;
  aspect-ratio: auto;
  margin-bottom: 0.5rem;
  break-inside: avoid;
}

@media (min-width: 700px) {
  .street-grid { column-count: 3; column-gap: 0.75rem; }
  .street-grid img, .street-grid .media-placeholder { margin-bottom: 0.75rem; }
}

.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.gallery-grid img, .gallery-grid .media-placeholder { aspect-ratio: 4 / 3; }
@media (min-width: 700px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; } }

.bts-feature { height: auto; margin-bottom: 0.75rem; }

/* BTS shots are square — keep that aspect so nothing gets cropped oddly */
#bts-gallery img, #bts-gallery .media-placeholder { aspect-ratio: 1 / 1; }
@media (min-width: 1100px) { #bts-gallery { grid-template-columns: repeat(4, 1fr); } }

/* ─── CLIENTS ───────────────────────────────────────────────────── */
.clients-empty { color: var(--ink-3); }

/* two rows of logos drifting in opposite directions, edge to edge */
.marquee {
  display: grid;
  gap: 2.5rem;
  margin-inline: calc(50% - 50vw); /* break out of the container to full width */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee-row { overflow: hidden; }

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 45s linear infinite;
}
.marquee-row--reverse .marquee-track { animation-direction: reverse; }
.marquee:hover .marquee-track { animation-play-state: paused; }

.marquee-group {
  --logo-gap: 2.75rem;
  display: flex;
  align-items: center;
  gap: var(--logo-gap);
  padding-right: var(--logo-gap); /* matches the gap so the loop point is invisible */
}

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

/* the logo files are white-on-transparent (made for dark backgrounds) —
   invert renders them as black marks on white */
.marquee-logo {
  width: auto;
  height: 3rem; /* placeholder until script.js sizes each logo by area */
  object-fit: contain;
  filter: invert(1) grayscale(1);
  opacity: 0.6;
}
.marquee-name { font-weight: 500; color: var(--ink-3); white-space: nowrap; }

@media (min-width: 700px) {
  .marquee { gap: 3.5rem; }
  .marquee-group { --logo-gap: 4.5rem; }
}

/* reduced motion: no drifting — one static, centered set of logos */
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; margin-inline: 0; }
  .marquee-track { animation: none; width: auto; justify-content: center; }
  .marquee-group { flex-wrap: wrap; justify-content: center; gap: 2.5rem 3.5rem; padding: 0; }
  .marquee-group.is-copy,
  .marquee .is-repeat { display: none; }
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ─── CONTACT ───────────────────────────────────────────────────── */
.contact-lead {
  font-size: clamp(1.75rem, 5vw, 3.5rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.035em;
  max-width: 18ch;
  margin-bottom: 2rem;
}

.contact-list { display: grid; gap: 1.5rem; }
.contact-list dt { font-size: 0.85rem; color: var(--ink-3); margin-bottom: 0.2rem; }
.contact-list a {
  font-size: 1.15rem;
  font-weight: 500;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}
.contact-list a:hover { color: var(--ink-3); border-color: var(--ink-3); }
.contact-list .contact-email { font-size: clamp(1.25rem, 3.2vw, 2rem); letter-spacing: -0.02em; }

@media (min-width: 700px) {
  .contact-list { grid-template-columns: 2fr 1fr 1fr; align-items: end; }
}

.contact-note { color: var(--ink-3); margin-top: 2.5rem; }
.placeholder-note { color: var(--ink-3); }

/* ─── PROJECT MODAL ──────────────────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 300; }
.modal[hidden] { display: none; }

.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(17, 17, 17, 0.35);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.modal-panel {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  height: 100%;
  margin: 0 auto;
  padding-top: 4.5rem; /* clears the close button on phones */
  overflow-y: auto;
  background: var(--bg);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}

@media (min-width: 900px) {
  .modal-panel { height: auto; max-height: 92vh; margin: 4vh auto; padding-top: 0; }
}

.modal.is-open .modal-backdrop { opacity: 1; }
.modal.is-open .modal-panel { opacity: 1; transform: translateY(0); }

.modal-close,
.modal-nav {
  position: fixed;
  z-index: 2;
  width: 44px; height: 44px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  font-size: 1.25rem;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s;
}
.modal-close:hover, .modal-nav:hover { border-color: var(--ink); }

.modal-close { top: 1rem; right: 1rem; font-size: 1.5rem; }

.modal-nav { top: 50%; transform: translateY(-50%); display: none; }
.modal-prev { left: 1.25rem; }
.modal-next { right: 1.25rem; }
/* only where there's room beside the 1000px panel */
@media (min-width: 1200px) { .modal-nav { display: flex; } }

/* vertical film player — sized by height so the whole 9:16 frame fits on screen */
.modal-video {
  position: relative;
  aspect-ratio: 9 / 16;
  width: min(100%, calc(76vh * 9 / 16));
  margin: 0 auto;
  background: #000;
}
.modal-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.modal-body { padding: 2rem var(--gutter) 3rem; }

@media (min-width: 900px) {
  #project-modal-content { display: grid; grid-template-columns: auto 1fr; align-items: end; }
  .modal-video { width: calc(84vh * 9 / 16); margin: 0; }
  .modal-body { padding: 3rem; }
}

.project-kicker { font-size: 0.85rem; color: var(--ink-3); margin-bottom: 0.5rem; font-variant-numeric: tabular-nums; }
.project-title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 1rem; }
.project-desc { color: var(--ink-2); font-size: 1.05rem; max-width: 45ch; margin-bottom: 2rem; }

.project-meta { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.project-meta dt { font-size: 0.8rem; color: var(--ink-3); }
.project-meta dd { font-size: 0.95rem; }

/* ─── FOOTER ────────────────────────────────────────────────────── */
footer {
  max-width: var(--container);
  margin: 0 auto;
  padding: 2rem var(--gutter) 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: var(--ink-3);
}
.footer-links { display: flex; gap: 1.5rem; }
.footer-links a:hover { color: var(--ink); }

@media (min-width: 700px) {
  footer { flex-direction: row; justify-content: space-between; }
}

.noscript-note { max-width: var(--container); margin: 0 auto; padding: 2rem var(--gutter); color: var(--ink-2); }

/* ─── SCROLL REVEAL ─────────────────────────────────────────────── */
/* one quiet fade for everything — no slide, no stagger */
/* text & blocks: fade + rise */
.reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 1.1s var(--ease-expo) var(--reveal-delay, 0ms),
    transform 1.3s var(--ease-expo) var(--reveal-delay, 0ms);
}
.reveal.visible { opacity: 1; transform: none; }

/* headings: the text rises from behind an invisible edge (clip-path leaves
   room for descenders so nothing is cut once it's in place) */
.reveal-mask { clip-path: inset(-0.2em -0.5em -0.3em -0.5em); }
.reveal-mask .mask-inner {
  display: inline-block;
  transform: translate3d(0, 135%, 0);
  transition: transform 1.4s var(--ease-expo) var(--reveal-delay, 0ms);
}
.reveal-mask.visible .mask-inner { transform: none; }

/* images: a soft-edged curtain wipes upward; work thumbnails also settle
   from a zoom. Done with a mask, not clip-path — a fully clipped element has
   zero visible area, so IntersectionObserver never reports it as in view and
   it would never reveal. Masks don't affect intersection.
   The mask is twice the element's height: top half clear, bottom half opaque,
   with a feathered seam. Sliding it from 0% to 100% raises the opaque half
   up through the image. */
.reveal-media {
  -webkit-mask-image: linear-gradient(to top, #000 46%, transparent 54%);
          mask-image: linear-gradient(to top, #000 46%, transparent 54%);
  -webkit-mask-size: 100% 200%;
          mask-size: 100% 200%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 0 0%;
          mask-position: 0 0%;
  transition:
    -webkit-mask-position 1.6s var(--ease-expo) var(--reveal-delay, 0ms),
    mask-position 1.6s var(--ease-expo) var(--reveal-delay, 0ms);
}
.reveal-media.visible {
  -webkit-mask-position: 0 100%;
          mask-position: 0 100%;
}
.work-media.reveal-media img { transform: scale(1.18); }
.work-media.reveal-media.visible img { transform: none; }
.work-item:hover .work-media.reveal-media.visible img { transform: scale(1.03); }

/* ─── WIDER LAYOUT ──────────────────────────────────────────────── */
@media (min-width: 700px) {
  :root { --gutter: 2rem; }
  section { padding: 7rem var(--gutter); }
}

@media (min-width: 1100px) {
  :root { --gutter: 2.5rem; }
  section { padding: 9rem var(--gutter); }
}