/* ------------------------------------------------------------------
   TOKENS
------------------------------------------------------------------ */
:root {
  --bg:      #0E1311;
  --surface: #161C19;
  --text:    #E8E4DA;
  --muted:   #8A9089;
  --sage:    #6B7F6E;                     /* accent — almost never */
  --rule:    rgba(232, 228, 218, .12);
  --rule-2:  rgba(232, 228, 218, .32);

  --serif: "Newsreader", "Iowan Old Style", "Palatino", Georgia, serif;
  --sans:  "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:  "DM Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --ease: cubic-bezier(.32, .08, .24, 1);
  --inset: clamp(1.25rem, 6vw, 6.5rem);
  --max: 96rem;
  --section: clamp(6rem, 12vw, 13rem);
}

/* ------------------------------------------------------------------
   BASE
------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: .9375rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video, svg { display: block; max-width: 100%; }
h1, h2, h3, p, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
::selection { background: rgba(107, 127, 110, .35); }
:focus-visible { outline: 1px solid var(--text); outline-offset: 5px; }

/* Grain — the only texture on the page. A tiled SVG noise layer,
   alpha-mapped so it reads as sparse bright specks, not a grey wash. */


.skip {
  position: absolute; left: var(--inset); top: -100%; z-index: 70;
  padding: .75rem 1rem; background: var(--text); color: var(--bg);
  font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; text-decoration: none;
}
.skip:focus { top: 1rem; }

.inset { padding-inline: var(--inset); max-width: var(--max); margin-inline: auto; }

/* Type roles */
.label, .marker {
  font-family: var(--mono); font-size: .6875rem; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase; line-height: 1.5; color: var(--muted);
}
.marker { margin-bottom: clamp(3rem, 6vw, 5rem); }
.marker::before {
  content: ""; display: inline-block; width: 1.5rem; height: 1px;
  background: currentColor; opacity: .7; margin-right: .9rem; vertical-align: middle;
}

.button {
  display: inline-block;
  font-family: var(--mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; line-height: 1;
  padding: .95em 1.6em;
  background: var(--text); color: var(--bg);
  text-decoration: none; border: 0; border-radius: 0; cursor: pointer;
  transition: opacity .5s var(--ease);
}
.button:hover { opacity: .85; }

/* Image frames --------------------------------------------------------
   Every media slot is a .frame with an aspect ratio; the media inside
   fills it. A slot takes either an <img> or a <video> — see the WORK
   comment for the video pattern.
------------------------------------------------------------------ */
.frame { position: relative; aspect-ratio: var(--ratio, 3 / 2); overflow: hidden; background: var(--surface); }
.frame__media { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }

/* ------------------------------------------------------------------
   HEADER
------------------------------------------------------------------ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(1.1rem, 2.4vw, 1.75rem) var(--inset);
  color: var(--text);
  transition: background-color .6s var(--ease);
}
.site-header.is-scrolled { background-color: rgba(14, 19, 17, .55); }
.wordmark {
  font-family: var(--mono); font-weight: 500; font-size: .75rem;
  letter-spacing: .24em; text-transform: uppercase; text-decoration: none; color: inherit;
}

/* ------------------------------------------------------------------
   1. HERO
------------------------------------------------------------------ */
.hero {
  position: relative; height: 100vh; height: 100svh; min-height: 34rem;
  overflow: hidden; background: var(--bg);
}
.hero__media { position: absolute; inset: 0; will-change: transform; }
.hero__video, .hero__poster { width: 100%; height: 100%; object-fit: cover; }
.hero__veil { position: absolute; inset: 0; background: rgba(14, 19, 17, .45); }
.hero__line {
  position: absolute; left: var(--inset); right: var(--inset); bottom: 7rem;
  max-width: 18ch;
  font-family: var(--serif); font-weight: 300; font-optical-sizing: auto;
  font-size: clamp(2.6rem, 1.6rem + 5.2vw, 6.75rem);
  line-height: 1.02; letter-spacing: -.015em; text-wrap: balance;
  opacity: 0; animation: fadein 1.6s var(--ease) .4s forwards;
}
/* Sound toggle — the only control on the page. Sits opposite the hero line. */
.sound {
  position: absolute; right: calc(var(--inset) - .75rem); bottom: 6.25rem; z-index: 5;
  display: flex; align-items: center; gap: .7rem;
  padding: .75rem; background: none; border: 0; cursor: pointer;
  color: var(--text); font-family: var(--mono); font-size: .6875rem;
  letter-spacing: .2em; text-transform: uppercase; line-height: 1;
  opacity: 0; animation: fadein 1.6s var(--ease) 1.2s forwards;
}
.sound__text { opacity: .65; transition: opacity .5s var(--ease); }
.sound:hover .sound__text { opacity: 1; }
.sound__bars { display: flex; align-items: flex-end; gap: 2px; height: .75rem; }
.sound__bars i { display: block; width: 1px; height: 20%; background: currentColor; opacity: .8; }
.sound.is-on .sound__bars i { animation: bars 1.5s var(--ease) infinite; }
.sound.is-on .sound__bars i:nth-child(2) { animation-delay: .25s; }
.sound.is-on .sound__bars i:nth-child(3) { animation-delay: .5s; }
.sound.is-on .sound__bars i:nth-child(4) { animation-delay: .1s; }
@keyframes bars { 0%, 100% { height: 20%; } 50% { height: 100%; } }
@media (max-width: 47.99em) { .sound { bottom: 1.4rem; } }

.hero__scroll {
  position: absolute; left: 50%; bottom: 2rem; width: 1px; height: 3.25rem;
  opacity: 0; animation: fadein 1.6s var(--ease) 1.2s forwards;
}
.hero__scroll::before {
  content: ""; position: absolute; inset: 0; background: rgba(232, 228, 218, .75);
  transform-origin: 50% 0; animation: scrollline 3.4s var(--ease) 1.4s infinite;
}
@keyframes fadein { to { opacity: 1; } }
@keyframes scrollline {
  0%   { transform: scaleY(0); transform-origin: 50% 0; }
  45%  { transform: scaleY(1); transform-origin: 50% 0; }
  55%  { transform: scaleY(1); transform-origin: 50% 100%; }
  100% { transform: scaleY(0); transform-origin: 50% 100%; }
}

/* ------------------------------------------------------------------
   2. STATEMENT
------------------------------------------------------------------ */
.statement { padding-block: clamp(8rem, 20vw, 20rem); text-align: center; }
.statement p {
  margin-inline: auto; max-width: 40ch;
  font-size: clamp(1rem, .95rem + .3vw, 1.125rem); line-height: 1.75; text-wrap: pretty;
}

/* ------------------------------------------------------------------
   3. WORK
------------------------------------------------------------------ */
.work { padding-block: 0 var(--section); }
.piece { margin: 0; }
.piece .label { display: block; margin-top: 1.1rem; }
.piece:hover .frame__media,
.piece:focus-within .frame__media { transform: scale(1.02); }

/* Full-bleed pieces sit outside the inset container */
.piece--bleed { margin-block: clamp(4rem, 9vw, 9rem); }
.piece--bleed .label { padding-inline: var(--inset); max-width: var(--max); margin-inline: auto; }
.work > .piece--bleed:first-of-type { margin-top: 0; }
.work > .piece--bleed:last-child { margin-bottom: 0; }

.work__grid { display: grid; grid-template-columns: 1fr; row-gap: clamp(3.5rem, 8vw, 6rem); }
@media (max-width: 47.99em) {
  .work__grid > .piece--portrait { width: 80%; }
  .work__grid > .piece--portrait:nth-child(odd) { justify-self: end; }
}
@media (min-width: 48em) {
  .work__grid { grid-template-columns: repeat(2, 1fr); column-gap: 5vw; row-gap: clamp(4rem, 7vw, 6rem); align-items: start; }
  .work__grid > .piece:nth-child(2) { margin-top: 6rem; }
  .work__grid > .piece:nth-child(3) { grid-column: 1 / -1; width: 84%; justify-self: end; }
  .work__grid > .piece:nth-child(4) { width: 70%; }
}
@media (min-width: 64em) {
  .work__grid { grid-template-columns: repeat(12, 1fr); column-gap: 4vw; row-gap: clamp(6rem, 9vw, 9rem); }
  .work__grid > .piece { width: auto; margin-top: 0; justify-self: stretch; }
  .work__grid > .piece:nth-child(1) { grid-column: 2 / 6; }
  .work__grid > .piece:nth-child(2) { grid-column: 7 / 13; margin-top: 9rem; }
  .work__grid > .piece:nth-child(3) { grid-column: 4 / 13; }
  .work__grid > .piece:nth-child(4) { grid-column: 1 / 6; }
}

/* ------------------------------------------------------------------
   4. SERVICES
------------------------------------------------------------------ */
.services { padding-block: var(--section); }
.services__list { border-top: 1px solid var(--rule); }
.services__row {
  display: grid; grid-template-columns: 1fr; gap: .9rem;
  padding-block: clamp(2.5rem, 5vw, 5rem);
  border-bottom: 1px solid var(--rule);
}
.services__name {
  font-family: var(--mono); font-weight: 500; font-size: .75rem;
  letter-spacing: .22em; text-transform: uppercase; line-height: 1.6; color: var(--text);
}
.services__desc { max-width: 42ch; font-size: 1rem; line-height: 1.7; color: var(--text); }
@media (min-width: 48em) {
  .services__row { grid-template-columns: 5fr 7fr; column-gap: 4vw; align-items: baseline; }
}

/* ------------------------------------------------------------------
   5. ABOUT
------------------------------------------------------------------ */
.about { padding-block: 0 var(--section); }
.about__grid { display: grid; grid-template-columns: 1fr; row-gap: 3rem; }
.about__grid .marker { margin-bottom: 0; }
.about__image { width: 70%; --ratio: 4 / 5; }
.about__text p { max-width: 44ch; }
.about__text p + p { margin-top: 1.2em; }
@media (min-width: 48em) { .about__image { width: 55%; } }
@media (min-width: 64em) {
  .about__grid { grid-template-columns: repeat(12, 1fr); column-gap: 4vw; align-items: start; }
  .about__grid .marker { grid-column: 1 / -1; margin-bottom: clamp(2rem, 4vw, 3rem); }
  .about__image { grid-column: 1 / 6; width: 100%; }
  .about__text { grid-column: 7 / 12; margin-top: clamp(4rem, 9vw, 11rem); }
}

/* ------------------------------------------------------------------
   6. CONTACT — barely lifted surface
------------------------------------------------------------------ */
.contact { background: var(--surface); padding-block: clamp(6rem, 12vw, 12rem); }
.contact__grid { display: grid; grid-template-columns: 1fr; row-gap: 4rem; }
.contact__aside .marker { margin-bottom: 2.5rem; }
.contact__aside p { max-width: 32ch; margin-bottom: 2rem; color: var(--muted); }
.contact__email {
  display: inline-block; font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); line-height: 1.3;
  color: var(--text); text-decoration: none; border-bottom: 1px solid var(--rule-2); padding-bottom: .15em;
  transition: border-color .5s var(--ease);
}
.contact__email:hover { border-color: var(--text); }

.field { display: flex; flex-direction: column; margin-bottom: 2.25rem; }
.field label { font-family: var(--mono); font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: .6rem; }
.field input, .field textarea {
  font: inherit; color: var(--text); background: transparent;
  border: 0; border-bottom: 1px solid var(--rule-2); border-radius: 0;
  padding: .6rem 0; transition: border-color .5s var(--ease);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--text); }
.field textarea { resize: vertical; min-height: 5.5rem; }
.form .button { margin-top: .5rem; }
.form__note { margin-top: 1.25rem; min-height: 1.4em; font-size: .8125rem; color: var(--muted); }
@media (min-width: 64em) {
  .contact__grid { grid-template-columns: repeat(12, 1fr); column-gap: 4vw; }
  .contact__aside { grid-column: 1 / 5; }
  .form { grid-column: 7 / 13; }
}

/* ------------------------------------------------------------------
   FOOTER
------------------------------------------------------------------ */
.footer { padding-block: clamp(3rem, 6vw, 5rem); }
.footer__grid { display: flex; flex-direction: column; gap: 1.5rem; }
.footer__meta { font-size: .8125rem; line-height: 1.6; color: var(--muted); }
.footer__meta p + p { margin-top: .15rem; }
@media (min-width: 48em) {
  .footer__grid { flex-direction: row; justify-content: space-between; align-items: flex-end; }
  .footer__meta { text-align: right; }
}

/* ------------------------------------------------------------------
   MOTION — scroll reveals (only when JS is present)
------------------------------------------------------------------ */
.reveal { opacity:1; transform:none; }
html.js .reveal.is-in { opacity: 1; transform: translateY(0); }
html.js .work__grid > .piece:nth-child(2).reveal { transition-delay: .12s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity:1; transform:none; }
  .hero__line, .hero__scroll, .sound { animation: none; opacity: 1; }
  .hero__scroll::before, .sound.is-on .sound__bars i { animation: none; }
  .sound.is-on .sound__bars i { height: 60%; }
  .frame__media { transition: none; }
  .piece:hover .frame__media { transform: none; }
}

/* Portfolio refinement: retain the original palette and typographic roles. */
html { scroll-padding-top: 6.5rem; }
.site-header { gap: 1.5rem; background: linear-gradient(rgba(14,19,17,.45),transparent); }
.site-header.is-scrolled { background: rgba(14,19,17,.96); }
.site-nav { display:flex; align-items:center; gap:clamp(1.2rem,3vw,2.5rem); }
.nav-link { font-family:var(--mono); font-size:.75rem; letter-spacing:.13em; text-transform:uppercase; text-decoration:none; padding-block:.8rem; }
.nav-link:hover { text-decoration:underline; text-underline-offset:.4em; }
.label,.marker { font-size:.75rem; letter-spacing:.15em; }
.button { min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
.hero__veil { background:linear-gradient(180deg,rgba(14,19,17,.12) 20%,rgba(14,19,17,.15) 45%,rgba(14,19,17,.78) 100%); }
.hero__line { bottom:9rem; }
.hero__eyebrow { position:absolute; left:var(--inset); top:8rem; color:var(--text); font-size:.7rem; letter-spacing:.13em; }
.hero__watch { position:absolute; left:var(--inset); bottom:4.5rem; }
.text-link { display:inline-flex; align-items:center; gap:1.2rem; min-height:44px; color:var(--text); text-decoration:none; border-bottom:1px solid var(--rule-2); font-size:.85rem; }
.text-link:hover { border-color:var(--text); }
.motion-control { position:absolute; right:var(--inset); bottom:4.5rem; min-height:44px; border:1px solid var(--rule-2); background:rgba(14,19,17,.45); color:var(--text); font-family:var(--mono); font-size:.7rem; padding:.6rem 1rem; cursor:pointer; }
.motion-control[hidden] { display:none; }
.statement { padding-block:clamp(4rem,8vw,8rem); }
.statement p { max-width:49ch; }
.work { padding-bottom:0; }
.project-card { display:block; color:inherit; text-decoration:none; }
.project-card .frame__media { transition:transform .8s var(--ease); }
.project-card:hover .frame__media { transform:scale(1.015); }
.project-card:focus-visible { outline-offset:8px; }
.project-card__caption { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding-block:1.6rem; }
.project-card__title { font-family:var(--serif); font-weight:300; font-size:clamp(2rem,3.5vw,3.25rem); line-height:1.15; margin-bottom:.45rem; }
.project-card__arrow { font-size:1.7rem; }
.work-feature { margin-bottom:clamp(4rem,8vw,8rem); }
.work-photo { max-width:68rem; margin:0 auto; }
.work-photo .frame { --ratio: 3 / 2; }
.services { padding-top:var(--section); }
.services__row { padding-block:clamp(2rem,4vw,4rem); }
.about__text p:first-child { font-size:1.1rem; }
.contact__grid { display:block; }
.contact__aside { max-width:46rem; }
.contact__aside p { max-width:38ch; }
.contact__email { font-size:clamp(1.1rem,3vw,2rem); overflow-wrap:anywhere; }
.contact { padding-block:clamp(4rem,8vw,8rem); border-top:1px solid var(--rule); }
.project-page .site-header { background:var(--bg); }
.project-intro { padding-top:clamp(9rem,14vw,13rem); padding-bottom:clamp(2.5rem,5vw,5rem); }
.project-intro .label { margin-bottom:1.25rem; }
.project-title { font-family:var(--serif); font-size:clamp(3.5rem,9vw,8rem); font-weight:300; line-height:1; letter-spacing:-.02em; max-width:12ch; }
.project-summary { max-width:41ch; margin-top:2rem; font-size:1.1rem; }
.film-frame { position:relative; background:#000; aspect-ratio:16 / 9; }
.film-start { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); padding:1rem 1.5rem; background:rgba(14,19,17,.8); color:var(--text); border:1px solid var(--rule-2); font:inherit; font-size:.9rem; cursor:pointer; min-height:48px; }
.film-start[hidden] { display:none; }
.work > .inset > .marker { margin-bottom:2rem; }
.film-frame video { width:100%; height:100%; object-fit:contain; }
.film-meta { display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; padding-block:1.25rem; border-bottom:1px solid var(--rule); }
.film-note { color:var(--muted); font-size:.85rem; margin-top:1.5rem; max-width:48ch; }
.stills { padding-block:clamp(4rem,8vw,8rem); }
.stills__grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,3vw,3rem); }
.stills img { width:100%; height:auto; }
.stills__wide { grid-column:1 / -1; margin-top:clamp(1rem,3vw,3rem); }
.project-next { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding-block:3rem; border-top:1px solid var(--rule); }
.photo-sequence { display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(3rem,8vw,7rem) 4vw; padding-bottom:var(--section); }
.photo-sequence figure { grid-column:1 / -1; }
.photo-sequence img { width:100%; height:auto; }
.photo-sequence .portrait-left { grid-column:2 / 6; }
.photo-sequence .portrait-right { grid-column:8 / 12; margin-top:6rem; }
.photo-sequence .landscape-inset { grid-column:3 / 12; }
.photo-sequence .landscape-small { grid-column:1 / 10; }
.photo-sequence .photo-break { border-top:1px solid var(--rule); padding-top:2rem; grid-column:1 / -1; }
.gallery-back { padding-bottom:3rem; }
@media(max-width:47.99em) {
 .site-header { gap:.5rem; }
 .wordmark { font-size:.65rem; letter-spacing:.16em; }
 .site-nav { gap:1rem; }
 .nav-link { font-size:.65rem; }
 .site-nav .button { padding-inline:1rem; font-size:.65rem; letter-spacing:.12em; }
 .hero { min-height:40rem; }
 .hero__eyebrow { top:6.5rem; max-width:25ch; }
 .hero__line { bottom:10rem; font-size:clamp(2.8rem,8.5vw,4rem); max-width:14ch; }
 .hero__watch { bottom:5.5rem; }
 .motion-control { bottom:1rem; }
 .hero__video { object-position:46% center; }
 .project-card__caption { gap:1rem; align-items:flex-start; }
 .project-card__caption .label { font-size:.66rem; letter-spacing:.09em; }
 .project-card__arrow { font-size:1.25rem; }
 .work-feature .frame { --ratio: 3 / 2 !important; }
 .about__image { width:85%; }
 .project-intro { padding-top:8rem; }
 .project-summary { font-size:1rem; }
 .stills__grid { grid-template-columns:1fr; gap:2rem; }
 .stills__wide { margin-top:0; }
 .photo-sequence { grid-template-columns:1fr; gap:3rem; }
 .photo-sequence figure,.photo-sequence .portrait-left,.photo-sequence .portrait-right,.photo-sequence .landscape-inset,.photo-sequence .landscape-small,.photo-sequence .photo-break { grid-column:1 / -1; min-width:0; }
 .photo-sequence .portrait-left { width:82%; justify-self:start; }
 .photo-sequence .portrait-right { width:82%; margin-top:0; justify-self:end; }
 .film-meta { font-size:.65rem; }
 .project-next { align-items:flex-start; }
}
@media(prefers-reduced-motion:reduce) { .project-card .frame__media { transition:none; } .project-card:hover .frame__media { transform:none; } }

/* Preserve the original opening; reveal a compact project browser beneath it. */
.hero__line { bottom:7rem; max-width:18ch; font-size:clamp(2.6rem,1.6rem + 5.2vw,6.75rem); }
.hero__veil { background:rgba(14,19,17,.45); pointer-events:none; }
.hero__slides,.hero__slide { position:absolute; inset:0; }
.hero__slide { transform:translateX(100%); transition:transform 850ms var(--ease); }
.hero__slide.is-active { transform:translateX(0); }
.hero__slide.is-before { transform:translateX(-100%); }
.hero__video { object-position:center; }
.hero__choices { position:absolute; left:var(--inset); bottom:1.2rem; display:flex; align-items:center; gap:.6rem; font-family:var(--mono); font-size:.6875rem; }
.hero__choices button,.hero__controls button,.work-arrows button { background:none; border:0; color:var(--text); cursor:pointer; min-width:44px; min-height:44px; font:inherit; }
.hero__choices button { opacity:.45; border-bottom:1px solid transparent; }
.hero__choices button[aria-pressed="true"] { opacity:1; border-color:var(--text); }
.hero__choices a { margin-left:.8rem; text-decoration:none; }
.hero__choices a:hover { text-decoration:underline; text-underline-offset:5px; }
.hero__controls { position:absolute; right:var(--inset); bottom:5.5rem; display:flex; gap:1rem; font-family:var(--mono); font-size:.6875rem; }
.hero__controls [hidden] { display:none; }
.hero__scroll { bottom:1.5rem; height:2rem; }
.statement { padding-block:clamp(3rem,6vw,6rem); }
.work-browser { padding-bottom:0; overflow:hidden; }
.work-browser__heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.4rem; }
.work-browser__heading .marker { margin:0; }
.work-arrows { display:flex; gap:.6rem; }
.work-arrows button { border:1px solid var(--rule-2); font-size:1.2rem; }
.work-arrows button:disabled { opacity:.25; cursor:default; }
.project-track { display:flex; gap:2rem; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--inset); padding:0 var(--inset) 1rem; scrollbar-width:thin; scrollbar-color:var(--rule-2) transparent; }
.project-track .project-card { flex:0 0 54%; min-width:0; scroll-snap-align:start; }
.project-track .project-card__caption { padding-top:1.1rem; padding-bottom:.5rem; }
.project-track .project-card__title { font-size:clamp(1.8rem,3vw,2.8rem); }
.project-track .label { font-size:.65rem; letter-spacing:.08em; }
.services { padding-block:clamp(3rem,6vw,6rem); }
.services__list { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.services__row { display:block; padding-block:1.5rem; }
.services__name { margin-bottom:1rem; }
.about { padding-block:clamp(3rem,6vw,6rem); }
.project-intro { padding-top:8.5rem; padding-bottom:2.5rem; }
.project-title { font-size:clamp(3.5rem,7vw,6.5rem); max-width:none; }
.project-summary { margin-top:1.25rem; max-width:52ch; }
.project-context { display:grid; grid-template-columns:1fr 1fr; gap:3rem; padding-top:2rem; }
.project-context h2 { margin-bottom:1rem; }
.project-context p { max-width:45ch; font-size:.95rem; }
.stills { padding-block:3rem; }
.stills__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.stills__grid figure { min-width:0; margin:0; }
.stills__grid img { display:block; aspect-ratio:16 / 9; object-fit:cover; }
.photo-sequence { grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; align-items:start; padding-bottom:3rem; }
.photo-sequence figure,.photo-sequence .portrait-left,.photo-sequence .portrait-right,.photo-sequence .landscape-inset,.photo-sequence .landscape-small { grid-column:auto; margin:0; width:100%; min-width:0; }
.photo-sequence .photo-break { grid-column:1 / -1; padding-top:1.5rem; }
.photo-sequence figure img { display:block; width:100%; height:auto; }
@media(max-width:47.99em) {
 .hero { min-height:34rem; }
 .hero__line { bottom:8rem; }
 .hero__choices { gap:.1rem; bottom:3.4rem; }
 .hero__choices a { margin-left:.7rem; }
 .hero__controls { bottom:.55rem; left:var(--inset); right:auto; }
 .hero__scroll { left:auto; right:var(--inset); bottom:1rem; }
 .project-track { gap:1rem; }
 .project-track .project-card { flex-basis:86%; }
 .services__list { grid-template-columns:1fr; gap:0; }
 .services__row { padding-block:1.25rem; }
 .services__desc { max-width:none; }
 .project-context { grid-template-columns:1fr; gap:1.75rem; }
 .stills__grid { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:1rem; padding-bottom:1rem; }
 .stills__grid figure { flex:0 0 88%; scroll-snap-align:start; }
 .photo-sequence { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.2rem; }
 .photo-sequence figure,.photo-sequence .portrait-left,.photo-sequence .portrait-right,.photo-sequence .landscape-inset,.photo-sequence .landscape-small { grid-column:auto; width:100%; }
}
@media(prefers-reduced-motion:reduce) { .hero__slide { transition:none; } }

/* Single-page content: texture belongs to the ground, never to the imagery. */
:root { --bg:#101A16; --surface:#19231E; --muted:#B1B6AB; }
body { font-size:1rem; }
.content-ground { background-color:var(--bg); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.045' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero__veil { background:linear-gradient(180deg,rgba(0,0,0,.12),transparent 30%,rgba(0,0,0,.10) 50%,rgba(0,0,0,.5)); }
.hero__line { text-shadow:0 2px 24px rgba(0,0,0,.22); }
.site-header { background:linear-gradient(rgba(0,0,0,.25),transparent); }
.site-header.is-scrolled { background:rgba(16,26,22,.97); }
.label,.marker { color:var(--muted); letter-spacing:.1em; font-size:.75rem; }
.statement p { font-size:1.05rem; }
.inline-project { flex:0 0 76%; min-width:0; scroll-snap-align:start; scroll-margin-top:7rem; }
.inline-project__heading { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-bottom:1.25rem; }
.inline-project__heading h3 { font-family:var(--serif); font-weight:300; font-size:clamp(2.4rem,4vw,3.5rem); line-height:1.1; margin-top:.4rem; }
.project-number { font: .8rem var(--mono); color:var(--muted); }
.inline-project__context { display:grid; grid-template-columns:1.6fr 1fr; gap:2rem; padding-block:1.5rem; }
.inline-project__context p { max-width:54ch; line-height:1.6; }
.project-credit { font-size:.8rem; color:var(--muted); }
.project-credit span { color:var(--text); }
.project-stills { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.project-stills img { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.film-start { background:rgba(0,0,0,.65); }
.photo-edit { padding-block:4rem 1rem; }
.photo-edit__heading { display:flex; justify-content:space-between; gap:2rem; align-items:baseline; margin-bottom:1.5rem; }
.photo-edit__heading .marker { margin:0; }
.photo-edit__heading p { font-size:.9rem; color:var(--muted); }
.photo-edit__grid { display:grid; grid-template-columns:1.3fr .7fr 1.3fr; gap:1.5rem; align-items:center; }
.photo-edit__grid img { width:100%; height:auto; }
.about__grid { display:block; }
.about__text { display:grid; grid-template-columns:1fr 1fr; column-gap:3rem; max-width:none; }
.about__text p:first-child { font-family:var(--serif); font-size:clamp(1.8rem,3vw,2.6rem); line-height:1.2; grid-row:span 2; }
.about__text p { font-size:1rem; }
.enquiry { display:grid; grid-template-columns:1fr 1.25fr; gap:clamp(2rem,6vw,6rem); }
.contact__email { font-size:clamp(1rem,1.8vw,1.4rem); }
.enquiry__fields { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.field label { font-family:var(--sans); font-size:.9rem; letter-spacing:0; text-transform:none; color:var(--text); }
.field input,.field textarea { font-size:1rem; background:rgba(0,0,0,.08); border-bottom:1px solid rgba(232,228,218,.45); border-radius:0; }
#enquiry-form .button { gap:2rem; margin-top:1.3rem; }
#enquiry-form .button:disabled { opacity:.6; cursor:wait; }
.form-status { min-height:1.7em; margin-top:1rem; font-size:.9rem; }
.form-status[data-state="error"] { color:#EFBCAC; }
.footer { background:var(--bg); }
@media(max-width:47.99em) {
 .inline-project { flex-basis:91%; }
 .inline-project__heading { padding-bottom:1rem; }
 .inline-project__heading .label { font-size:.68rem; }
 .inline-project__context { grid-template-columns:1fr; gap:.8rem; padding-block:1.1rem; }
 .inline-project__context p { font-size:.95rem; }
 .inline-project__context .project-credit { font-size:.75rem; }
 .project-stills { gap:.5rem; }
 .photo-edit { padding-top:3rem; }
 .photo-edit__heading { display:block; }
 .photo-edit__heading p { margin-top:1rem; }
 .photo-edit__grid { grid-template-columns:1fr 1fr; gap:1rem; }
 .photo-edit__grid figure:first-child { grid-column:1/-1; }
 .about__text { display:block; }
 .enquiry { grid-template-columns:1fr; gap:2rem; }
 .enquiry__fields { grid-template-columns:1fr; gap:0; }
}

/* Near-black forest, film-emulsion texture, and distinct editorial sections. */
:root { --bg:#0B100E; --surface:#151A17; --muted:#B4B5A9; --rule:rgba(228,226,212,.16); }
.content-ground { background:#0B100E url('/media/surface-texture.svg') repeat; background-size:360px; }
.statement { position:relative; padding-block:clamp(3.8rem,8vw,7rem); border-bottom:1px solid var(--rule); }
.statement p { font:300 clamp(1.35rem,2.35vw,2rem)/1.45 var(--serif); max-width:39ch; color:#D8D6C9; }
.work-browser { padding-block:3.5rem 4rem; background:rgba(3,5,4,.72); border-bottom:1px solid rgba(228,226,212,.21); }
.work-browser__heading { margin-bottom:2rem; }
.project-position { align-self:center; margin-right:.8rem; font:.7rem var(--mono); color:var(--muted); }
.project-track { gap:2rem; padding-block:.3rem 1rem; }
.inline-project { position:relative; flex-basis:78%; border:1px solid rgba(228,226,212,.24); padding:clamp(1rem,2.2vw,2rem); background:#111512 url('/media/surface-texture.svg') repeat; box-shadow:0 18px 55px rgba(0,0,0,.2); }
.project-surface { transition:filter 800ms var(--ease),opacity 800ms var(--ease); }
.focus-enabled .inline-project:not(.is-active) .project-surface { filter:blur(7px); opacity:.45; pointer-events:none; user-select:none; }
.focus-enabled .inline-project.is-active { border-color:rgba(228,226,212,.38); }
.project-focus { position:absolute; inset:0; width:100%; border:0; padding:2rem; color:var(--text); background:linear-gradient(110deg,rgba(225,227,218,.04),rgba(9,13,11,.10)); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); cursor:pointer; text-align:left; }
.project-focus[hidden] { display:none; }
.project-focus span { position:absolute; top:2rem; left:2rem; font:400 .8rem/1.7 var(--mono); letter-spacing:.04em; }
.project-focus b { display:block; font-weight:400; font-size:1.3rem; margin-top:.6rem; }
.inline-project__heading { padding-bottom:1.35rem; }
.inline-project__heading h3 { font-size:clamp(2.2rem,3.5vw,3.15rem); }
.film-frame { outline:1px solid rgba(228,226,212,.15); outline-offset:5px; margin:5px; }
.playback-options { display:flex; justify-content:space-between; align-items:center; padding-top:1rem; font:.7rem var(--mono); color:var(--muted); }
.playback-options select { background:#171D19; color:var(--text); font:inherit; border:1px solid var(--rule); padding:.45rem .5rem; margin-left:.3rem; border-radius:0; }
.inline-project__context { padding-block:1.25rem; }
.inline-project__context p { font-size:.95rem; }
.inline-project__context .project-credit { font-size:.75rem; }
.project-stills { gap:.8rem; }
.project-stills figure { padding:4px; border:1px solid var(--rule); background:#060807; }
.photo-edit { max-width:none; padding-block:clamp(3rem,6vw,5.5rem); background:#181B18 url('/media/surface-texture.svg') repeat; border-bottom:1px solid rgba(228,226,212,.22); }
.photo-edit__heading p { font:300 1.2rem/1.45 var(--serif); color:#C2C3B8; }
.photo-edit__grid { gap:clamp(1rem,2.5vw,2.5rem); }
.photo-edit__grid figure { padding:clamp(6px,.8vw,12px); border:1px solid rgba(228,226,212,.27); background:#0A0D0B; box-shadow:0 14px 34px rgba(0,0,0,.24); }
.services { background:rgba(8,11,9,.34); border-bottom:1px solid var(--rule); padding-block:3.5rem; }
.services__list { gap:2.5rem; }
.services__row { border-top:1px solid rgba(228,226,212,.28); }
.services__name { font-size:.76rem; letter-spacing:.08em; }
.services__desc { font:300 1.2rem/1.55 var(--serif); color:#D1D1C4; }
.about { background:rgba(0,0,0,.23); border-bottom:1px solid var(--rule); }
.about__text { grid-template-columns:1.1fr 1fr; gap:0 4rem; }
.about__text p:first-child { font-size:clamp(2.2rem,3.5vw,3.5rem); line-height:1.15; }
.about-founder { display:block; margin-top:1.1rem; font:400 .75rem var(--mono); letter-spacing:.06em; color:var(--muted); }
.about__text p:not(:first-child) { font:300 1.2rem/1.55 var(--serif); color:#D1D1C4; }
.contact { border-top:0; background:#0A0D0B url('/media/surface-texture.svg') repeat; }
.contact__aside>p { font:300 clamp(1.8rem,3vw,2.6rem)/1.2 var(--serif); max-width:18ch; color:var(--text); }
.field label,.form-status { font-family:var(--serif); font-size:1.05rem; }
.hero__slides,.hero__line { will-change:transform; }
.hero__line { transform:translate3d(0,var(--hero-text-offset,0px),0); }
.hero__slides { transform:translate3d(0,var(--hero-media-offset,0px),0); }
.hero__choices,.hero__controls,.hero__scroll { transform:translate3d(0,var(--hero-text-offset,0px),0); }
.motion-ready .reveal-item { transition:opacity 900ms var(--ease),transform 900ms var(--ease),filter 900ms var(--ease); }
.motion-ready .reveal-item:not(.is-in) { opacity:0; transform:translateY(18px); filter:blur(4px); }
@media(max-width:47.99em) {
 .work-browser { padding-block:2.4rem 2.7rem; }
 .inline-project { flex-basis:93%; padding:1rem; }
 .project-focus { padding:1rem; }
 .project-focus span { top:1rem; left:1rem; font-size:.68rem; }
 .project-track { gap:1rem; }
 .project-position { margin-right:.1rem; font-size:.65rem; }
 .inline-project__heading h3 { font-size:2.25rem; }
 .inline-project__heading .label { font-size:.6rem; letter-spacing:.06em; }
 .project-stills { gap:.45rem; }
 .project-stills figure { padding:2px; }
 .inline-project__context p { font-size:.9rem; }
 .photo-edit__grid { gap:1rem; }
 .services__list { gap:1rem; }
 .about__text p:first-child { margin-bottom:2rem; }
 .statement p { font-size:1.4rem; }
}
@media(prefers-reduced-motion:reduce) {
 .hero__slides,.hero__line,.hero__choices,.hero__controls,.hero__scroll { transform:none !important; }
 .project-surface,.motion-ready .reveal-item { transition:none; }
 .motion-ready .reveal-item:not(.is-in) { opacity:1; transform:none; filter:none; }
}

/* October revision: photographic surface, restrained mounts, and scroll holds. */
.content-ground { background-color:#101813; background-size:720px; }
.hero-chapter { height:124svh; min-height:42rem; }
.hero { position:sticky; top:0; }
.statement { min-height:52svh; padding-block:10svh 12svh; }
.statement>.inset { position:sticky; top:38svh; }
.statement p { max-width:34ch; font-size:clamp(1.7rem,3vw,2.6rem); line-height:1.35; }
.work-browser { overflow:clip; background:#090D0B; padding-top:0; }
.work-browser__heading { position:sticky; top:var(--header-height,6rem); z-index:3; max-width:none; padding-top:1.4rem; padding-bottom:1.4rem; margin-bottom:.5rem; background:rgba(9,13,11,.96); border-bottom:1px solid var(--rule); }
.inline-project { background:#101511; box-shadow:none; border-color:rgba(213,206,186,.22); padding:clamp(1rem,2vw,1.8rem); }
.inline-project.is-active { box-shadow:inset 0 2px rgba(208,199,174,.24); }
.inline-project__heading { padding-bottom:1rem; }
.film-frame { outline:none; margin:0; border:1px solid rgba(213,206,186,.21); padding:6px; background:#050706; }
.film-frame video { display:block; background:#050706; }
.project-stills figure { padding:0; border:0; background:#050706; }
.project-stills img { border:1px solid rgba(213,206,186,.14); }
.photo-edit { background:#1C211B url('/media/surface-texture.svg') repeat; background-size:720px; }
.photo-edit__grid figure { padding:8px 8px 19px; border:1px solid rgba(210,202,180,.22); background:#0B100D; box-shadow:none; }
.photo-edit__grid figure:nth-child(2) { margin-top:2.5rem; }
.services { background:transparent; padding-block:4.5rem; }
.services__list { border-top:0; }
.services__name { color:#D4D0C2; }
.services__row { display:flex; flex-direction:column; }
.services__formats { margin-top:auto; padding-top:1.6rem; font:400 .65rem/1.8 var(--mono); letter-spacing:.025em; color:#A6AC9E; }
.services__desc { font-size:1.2rem; line-height:1.5; }
.about { background:rgba(0,0,0,.28); }
.contact { background:#0C120F url('/media/surface-texture.svg') repeat; background-size:720px; }
.motion-ready .reveal-item { transition:opacity 950ms var(--ease),transform 1100ms var(--ease),filter 1000ms var(--ease); }
.motion-ready .reveal-item:not(.is-in) { opacity:0; transform:translateY(30px); filter:blur(7px); }
.motion-ready .reveal-item.is-in { opacity:1; transform:none; filter:none; }
.work-browser__heading.reveal-item { transform:none !important; filter:none !important; }
@media(min-width:48em) {
 .project-track { align-items:start; }
 .inline-project { flex-basis:78%; }
 .project-stills img { width:100%; aspect-ratio:2.2; object-fit:cover; }
}
@media(max-width:47.99em) {
 .hero-chapter { height:116svh; min-height:39.5rem; }
 .statement { min-height:46svh; padding-block:9svh 10svh; }
 .statement>.inset { top:30svh; }
 .statement p { font-size:1.8rem; }
 .work-browser__heading { top:var(--header-height,4.4rem); padding-top:1rem; padding-bottom:1rem; }
 .photo-edit__grid figure:nth-child(2) { margin-top:0; }
 .services { padding-block:3rem; }
 .services__desc { font-size:1.16rem; }
 .inline-project { flex-basis:93%; }
}
@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 .hero-chapter { height:auto; min-height:0; }
 .hero,.statement>.inset,.work-browser__heading { position:relative; top:auto; }
 .statement { min-height:0; }
 .motion-ready .reveal-item { transition:none; }
 .motion-ready .reveal-item:not(.is-in) { opacity:1; filter:none; transform:none; }
}