/* Nilanjan Karmakar — nilanjankarmakar.in
   A photographic catalogue on a dark ground (#131313), two typefaces, a 4/8/12-column grid.
   Everything the pages need; no framework, no reset library. */

/* ------------------------------
   0. Fonts (self-hosted, latin subsets, only the weights in use)
   ------------------------------ */
@font-face { font-family: 'Inter'; src: url('../assets/fonts/Inter-400-600.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('../assets/fonts/Newsreader-400-500.woff2') format('woff2'); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('../assets/fonts/Newsreader-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
/* Metric-matched fallbacks: while the web fonts arrive the system faces are sized to the same advance widths and
   vertical metrics, so the swap moves nothing (measured with fontTools against Arial and Georgia). */
@font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('Helvetica'); size-adjust: 105.58%; ascent-override: 91.76%; descent-override: 22.85%; line-gap-override: 0%; }
@font-face { font-family: 'Newsreader Fallback'; src: local('Georgia'); size-adjust: 93.92%; ascent-override: 78.26%; descent-override: 28.22%; line-gap-override: 0%; }

/* ------------------------------
   1. Tokens
   ------------------------------ */
:root, [data-theme="dark"] {
   --paper: #D9D9D9;
   --paper-2: #CDCDCD;
   --ink: #181818;
   --ink-2: #6E6A63;
   --line: rgba(24, 24, 24, .14);
   --line-strong: rgba(24, 24, 24, .45);
   --rust: #7E6655;
   --focus: #181818;
   --scrim: rgba(217, 217, 217, .72);
   --foot-rgb: 217, 217, 217;
   --foot-ink: #181818;
   --foot-line: rgba(24, 24, 24, .45);
   color-scheme: light;
}
:root[data-theme="dark"] {
   --paper: #181818; --paper-2: #242320; --ink: #F4F1EA; --ink-2: #B6B0A7;
   --line: rgba(244, 241, 234, .16); --line-strong: rgba(244, 241, 234, .52); --rust: #C9AE96; --focus: #F4F1EA; --scrim: rgba(24, 24, 24, .72);
   --foot-rgb: 24, 24, 24; --foot-ink: #F4F1EA; --foot-line: rgba(244, 241, 234, .52);
   color-scheme: dark;
}
:root {
  --haze-rgb: 255, 255, 255;            /* hero head/text haze: always light, because the words are always dark over the sky */

  --sans: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --serif: 'Newsreader', 'Newsreader Fallback', 'Iowan Old Style', 'Palatino Linotype', Georgia, 'Times New Roman', serif;

  --gutter: 1.25rem;
  --gap: .75rem;
  --cols: 4;
  --max: 1472px;                       /* 1600px including the desktop gutters */
  --header-h: 4rem;

  /* Type scale — six steps, no more. Headlines are elegant rather than loud: nothing on the page competes with a
     photograph, and every step is fluid (no jumps at a breakpoint). */
  --t-label: .75rem;                                                  /* metadata, captions, section labels */
  --t-body: clamp(1rem, .96rem + .2vw, 1.0625rem);                    /* interface and short prose */
  --t-serif: clamp(1.05rem, .98rem + .35vw, 1.25rem);                 /* editorial body */
  --t-project: clamp(1.15rem, 1.02rem + .5vw, 1.5rem);                /* work and film titles */
  --t-subsection: clamp(1.4rem, 1.15rem + .9vw, 2rem);                /* Image · Video, sub-headings */
  --t-section: clamp(1.6rem, 1.25rem + 1.3vw, 2.5rem);                /* section titles */
  --t-page: clamp(2rem, 1.5rem + 2.4vw, 3.5rem);                      /* page titles */
  --t-hero: clamp(2.25rem, 1.5rem + 2.3vw, 3.625rem);                 /* the statement, once per site: strong, never louder than the photograph */

  --ease: cubic-bezier(.2, .6, .2, 1);
  --dur: 320ms;
}
@media (min-width: 600px) { :root { --gutter: 4vw; --gap: 1.5vw; --cols: 8; --header-h: 4.5rem; } }
@media (min-width: 1024px) { :root { --gutter: 4rem; --gap: 2rem; --cols: 12; --header-h: 5rem; } }

/* ------------------------------
   2. Base
   ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; min-height: 100vh;
  background: var(--paper); color: var(--ink);
  font: 400 var(--t-body) / 1.55 var(--sans);
  font-feature-settings: 'ss01' 0, 'cv11' 1;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
body.is-locked { overflow: hidden; }
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 400; letter-spacing: -.012em; line-height: 1.05; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
img, picture, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--paper); }
[hidden] { display: none !important; }
main { display: block; }
main:focus { outline: none; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.serif { font-family: var(--serif); font-size: var(--t-serif); line-height: 1.42; letter-spacing: -.004em; }
.label { font-family: var(--sans); font-size: clamp(.75rem, .72rem + .08vw, .8125rem); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4; }
.muted { color: var(--ink-2); }
.section-label { display: flex; gap: .75em; color: var(--ink-2); }
.section-title { font-size: var(--t-section); margin-top: .5rem; letter-spacing: -.015em; }
.section-head { margin-bottom: clamp(1.5rem, 3vw, 3rem); }
.section-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.page-title { font-size: var(--t-page); margin-top: .75rem; max-width: 22ch; }
.page-intro { margin-top: 1.25rem; max-width: 40ch; color: var(--ink-2); }
.page-head { padding-block: calc(var(--header-h) + clamp(2rem, 6vw, 5rem)) clamp(2rem, 4vw, 3.5rem); }
.section { padding-block: clamp(4rem, 9vw, 8rem); }
.section + .section { padding-top: 0; }
.section .section-title { font-size: var(--t-subsection); }   /* home: headings stay well below the hero statement */

/* Books: one bibliographic entry at a time, presented as a printed object rather than a store card. */
.books { padding-block: clamp(2rem, 6vw, 6rem) clamp(7rem, 16vw, 15rem); }
.books__list { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(2rem, 7vw, 7rem) var(--gap); }
.book { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 1.5rem var(--gap); align-items: end; }
.book__cover { grid-column: 1 / -1; width: min(100%, 36rem); border: 1px solid var(--line); }
.book__detail { grid-column: 1 / -1; max-width: 30rem; }
.book__title { margin-top: .7rem; font-size: clamp(2.2rem, 1.6rem + 2.8vw, 4.75rem); font-weight: 400; letter-spacing: 0; }
.book__subtitle { margin-top: .75rem; color: var(--ink-2); }
.book__meta { margin-top: 1.5rem; color: var(--ink-2); }
.book__detail .textlink { margin-top: 1.5rem; }
@media (min-width: 800px) {
   .book__cover { grid-column: 2 / span 5; }
   .book__detail { grid-column: 8 / span 4; padding-bottom: clamp(1rem, 4vw, 4rem); }
}

/* Home: a restrained photography-book sequence, with the frame always leading. */
.site-header--over { background: var(--paper); color: var(--ink); }
.brand { font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.nav__list { gap: 1.75rem; }
.nav__link { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }
.hero { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; padding-top: calc(var(--header-h) + clamp(2rem, 5vw, 4.5rem)); }
.hero__media { aspect-ratio: 3 / 2; background-color: var(--paper-2); }
.hero__foot { width: 100%; margin-top: .75rem; }
.hero__scroll { color: var(--ink-2); }
.hero__nav-btn { background: transparent; color: var(--paper); mix-blend-mode: difference; }
.hero__nav-btn:hover { background: transparent; }
.home-intro { padding-block: clamp(7rem, 15vw, 15rem) clamp(6rem, 12vw, 12rem); }
.home-intro__grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 2rem var(--gap); }
.home-intro__label { grid-column: 1 / -1; color: var(--ink-2); line-height: 1.7; }
.home-intro__body { grid-column: 1 / -1; }
.home-intro__title { max-width: 28ch; font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.5rem); font-weight: 400; line-height: 1.32; letter-spacing: 0; }
.home-intro__disciplines { margin-top: 2rem; color: var(--ink-2); }
.recent { padding-top: 0; background: transparent; }
.recent__list { border: 0; }
.recent .section-label { margin-bottom: 1rem; }
.story { border: 0; padding-block: clamp(2.5rem, 7vw, 7rem); }
.story__meta { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.story:nth-child(even) .story__media { grid-column: 1 / -1; }
.story:nth-child(even) .story__text { grid-column: 1 / -1; margin-left: auto; max-width: 28rem; }
.the-work { padding-top: clamp(8rem, 16vw, 17rem); }
.the-work .work-grid { margin-top: clamp(3rem, 7vw, 7rem); }
.about-home { padding-top: clamp(10rem, 18vw, 18rem); }
.home-gallery { padding-top: clamp(9rem, 16vw, 16rem); }
.cta { padding-top: clamp(10rem, 18vw, 18rem); }
@media (min-width: 800px) {
   .site-header--over:not(.is-scrolled):not(.is-menu-open) { background: transparent; color: var(--ink); --focus: var(--ink); }
   .hero__media { width: min(84vw, 1220px); margin-left: auto; }
   .home-intro__label { grid-column: 1 / span 3; }
   .home-intro__body { grid-column: 5 / span 6; }
   .story:nth-child(even) .story__media { grid-column: 5 / span 7; }
   .story:nth-child(even) .story__text { grid-column: 1 / span 3; grid-row: 1; align-self: end; margin: 0; }
}
@media (min-width: 1024px) {
   .hero__media { width: min(82vw, 1320px); }
   .story:nth-child(3n) .story__media { grid-column: 1 / span 8; }
   .story:nth-child(3n) .story__text { grid-column: 10 / span 3; }
}

/* The second home composition: an almost-empty opening, then a paced photographic monograph. */
.hero--opening { position: relative; display: block; width: 100%; min-height: 100svh; margin: 0; padding: 0; }
.hero--opening .hero__identity { position: absolute; z-index: 2; top: calc(var(--header-h) + 1.75rem); left: var(--gutter); }
.hero__name { font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .15em; line-height: 1.5; text-transform: uppercase; }
.hero--opening .hero__identity .label { margin-top: .65rem; color: var(--ink-2); font-size: .6rem; line-height: 1.65; }
.hero__opening-figure { position: absolute; top: 16vh; left: 50%; width: min(64vw, 880px); transform: translateX(-37%); }
.hero__opening-figure .media { aspect-ratio: 2 / 3; }
.hero__place { position: absolute; bottom: 2rem; left: var(--gutter); color: var(--ink-2); font-size: .6rem; line-height: 1.65; }
.hero--opening .hero__scroll { position: absolute; right: var(--gutter); bottom: 2rem; display: inline-flex; gap: .7rem; color: var(--ink-2); font-size: .6rem; }
.first-reveal { padding: clamp(3rem, 9vw, 9rem) 0 clamp(9rem, 18vw, 18rem); }
.first-reveal__figure { width: min(94%, 1380px); margin-left: auto; }
.first-reveal__companions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 3vw, 3.5rem); width: min(65%, 780px); margin: clamp(6rem, 14vw, 14rem) auto 0 0; }
.first-reveal__companion:last-child { transform: translateY(clamp(2rem, 5vw, 5rem)); }
.home-statement { min-height: 88svh; display: grid; align-items: center; padding-block: clamp(6rem, 14vw, 14rem); }
.home-statement h2 { max-width: 19ch; margin-left: 8.333%; font-size: clamp(1.8rem, 1.2rem + 2vw, 3.75rem); font-weight: 400; line-height: 1.22; letter-spacing: 0; }
.project-index { padding-block: clamp(6rem, 14vw, 14rem); border-top: 1px solid var(--line); }
.project-index__heading { margin-top: .8rem; font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.project-index__list { margin-top: clamp(2.5rem, 6vw, 6rem); }
.project-index__item { border-top: 1px solid var(--line); }
.project-index__item:last-child { border-bottom: 1px solid var(--line); }
.project-index__item a { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; align-items: baseline; padding-block: 1.3rem; }
.project-index__item .label { color: var(--ink-2); font-size: .62rem; }
.project-index__title { font-size: clamp(1.4rem, 1.1rem + 1.25vw, 2.75rem); line-height: 1.15; transition: padding-left 600ms var(--ease); }
.project-index__item a:hover .project-index__title { padding-left: .75rem; }
.photo-essay { padding-block: clamp(7rem, 16vw, 17rem); }
.photo-essay__grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(5rem, 12vw, 13rem) var(--gap); }
.essay__frame { grid-column: 1 / -1; }
.essay__caption { margin-top: .55rem; color: var(--ink-2); font-size: .58rem; }
.essay__frame .media, .featured-story__frame .media, .motion-teaser__still .media { transition: transform 700ms var(--ease); }
.essay__frame a:hover .media, .featured-story__frame .media:hover, .motion-teaser__still .media:hover { transform: scale(1.01); }
.essay__caption { font-size: .75rem; letter-spacing: .13em; }
.essay__frame--2, .essay__frame--5 { margin-left: auto; width: 46%; }
.essay__frame--3 { width: 50%; }
.essay__frame--6 { width: 52%; }
.essay__frame--8 { width: 56%; margin-inline: auto; }
.essay__frame--2, .essay__frame--5, .essay__frame--6 { margin-block: clamp(2rem, 5vw, 5rem); }
.essay__frame--5 { margin-bottom: clamp(4rem, 8vw, 8rem); }
.essay__frame--8 { margin-bottom: clamp(5rem, 10vw, 10rem); }
.featured-story { padding-block: clamp(6rem, 14vw, 14rem); background: #111; color: #F3F1EB; }
.featured-story__intro { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(2rem, 4vw, 4rem) var(--gap); }
.featured-story__intro > .label { grid-column: 1 / -1; color: #AAA49B; }
.featured-story__intro h2 { grid-column: 1 / -1; font-size: clamp(3rem, 2rem + 5vw, 7rem); font-weight: 400; letter-spacing: 0; }
.featured-story__copy { grid-column: 1 / -1; max-width: 34ch; color: #D7D1C8; }
.featured-story .textlink { grid-column: 1 / -1; width: max-content; color: #F3F1EB; }
.featured-story__frames { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(3rem, 8vw, 9rem) var(--gap); margin-top: clamp(6rem, 12vw, 12rem); }
.featured-story__frame { grid-column: 1 / -1; }
.featured-story__frame:nth-child(even) { width: 58%; margin-left: auto; }
.featured-story__frame:nth-child(4) { margin-top: clamp(3rem, 7vw, 7rem); }
.contact-sheet { padding-block: clamp(8rem, 16vw, 16rem); }
.contact-sheet .wrap { width: min(100%, var(--max)); }
.contact-sheet__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.contact-sheet__cell { aspect-ratio: 1; }
.contact-sheet__cell span { position: absolute; right: .35rem; bottom: .3rem; color: #F3F1EB; font-size: .55rem; mix-blend-mode: difference; }
.motion-teaser { padding-block: clamp(10rem, 19vw, 19rem); }
.motion-teaser__grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(3rem, 8vw, 8rem) var(--gap); align-items: end; }
.motion-teaser__head { grid-column: 1 / -1; }
.motion-teaser__head h2 { margin-top: 1rem; font-size: clamp(2rem, 1.4rem + 2vw, 3.5rem); font-weight: 400; letter-spacing: 0; }
.motion-teaser__meta { margin-top: 1.5rem; color: var(--ink-2); }
.motion-teaser__head .textlink { margin-top: 1.25rem; }
.motion-teaser__still { grid-column: 1 / -1; }
.motion-teaser__still .media { margin-left: auto; width: min(100%, 1180px); }
.about-home { padding-block: clamp(8rem, 16vw, 16rem); }
.about-home__grid { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.about-home__figure { grid-column: 2 / -1; }
.about-home__body { grid-column: 1 / span 6; margin-top: clamp(2rem, 10vw, 10rem); }
.about-home__body .section-title::before { content: 'About / NK'; display: block; margin-bottom: 1rem; font-family: var(--sans); font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.home-gallery { padding-block: clamp(6rem, 13vw, 13rem); }
.gallery-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.gallery-link, .gallery-block { min-height: 17rem; padding-block: 1rem; border-top: 1px solid var(--line); }
.cta { padding-block: clamp(11rem, 20vw, 20rem); }
.cta .section-title { font-size: clamp(2rem, 1.5rem + 2.5vw, 4rem); }
.cta__email { margin-top: 2.5rem; font-family: var(--serif); font-size: clamp(1.4rem, 1.1rem + 1vw, 2.15rem); line-height: 1.2; }
.cta__email a { border-bottom: 1px solid currentColor; }
.cta__meta { margin-top: 1rem; color: var(--ink-2); }
.cta__top { margin-top: clamp(7rem, 14vw, 14rem); text-align: right; }
.cta__top a { color: var(--ink-2); }
@media (min-width: 800px) {
   .first-reveal__figure { width: 94%; }
   .essay__frame--1 { grid-column: 1 / span 9; }
   .essay__frame--2 { grid-column: 10 / span 3; width: 100%; }
   .essay__frame--3 { grid-column: 2 / span 4; width: 100%; }
   .essay__frame--4 { grid-column: 1 / -1; width: 100%; }
   .essay__frame--5 { grid-column: 6 / span 4; width: 100%; }
   .essay__frame--6 { grid-column: 1 / span 4; width: 112%; }
   .essay__frame--7 { grid-column: 2 / span 11; width: 100%; }
   .essay__frame--8 { grid-column: 5 / span 6; width: 100%; }
   .featured-story__intro > .label { grid-column: 1 / span 2; }
   .featured-story__intro h2 { grid-column: 4 / -1; }
   .featured-story__copy { grid-column: 6 / span 5; }
   .featured-story .textlink { grid-column: 6 / span 4; }
   .featured-story__frame:nth-child(1) { grid-column: 1 / span 9; }
   .featured-story__frame:nth-child(2) { grid-column: 7 / span 5; width: 100%; }
   .featured-story__frame:nth-child(3) { grid-column: 2 / span 7; }
   .featured-story__frame:nth-child(4) { grid-column: 9 / span 4; grid-row: 4; width: 100%; }
   .motion-teaser__head { grid-column: 1 / span 3; }
   .motion-teaser__still { grid-column: 4 / -1; }
}
@media (max-width: 599px) {
   .hero__opening-figure { top: 18vh; width: 78vw; transform: translateX(-50%); }
   .first-reveal__companions { grid-template-columns: 1fr; width: 72%; margin-left: auto; }
   .first-reveal__companion:last-child { width: 82%; margin-top: 2rem; margin-left: auto; }
   .home-statement { min-height: 70svh; }
   .home-statement h2 { margin-left: 0; }
   .featured-story__frame:nth-child(even) { width: 76%; }
   .featured-story__frame:nth-child(4) { width: 66%; }
   .motion-teaser { padding-block: clamp(8rem, 20vw, 11rem); }
   .motion-teaser__still { width: 94%; margin-left: auto; }
   .motion-teaser__still .media { width: 100%; }
   .gallery-links { grid-template-columns: 1fr; }
   .about-home__figure, .about-home__body { grid-column: 1 / -1; }
   .about-home__body { margin-top: 2.5rem; }
}

.arrow { display: inline-block; width: 1em; height: 1em; margin-left: .5em; vertical-align: -.1em; flex: none; }
.textlink { position: relative; display: inline-flex; align-items: center; padding-block: .5rem .35rem; }
.textlink::after { content: ''; position: absolute; left: 0; right: 0; bottom: .1rem; height: 1px; background: currentColor; opacity: .32; transition: opacity var(--dur) var(--ease); }
.textlink:hover::after { opacity: 1; }
.textlink .arrow { transition: transform var(--dur) var(--ease); }
.textlink:hover .arrow { transform: translateX(.2em); }
/* the lead link of a section: the same typographic style, a little more presence */
.textlink--lead { font-size: .9375rem; letter-spacing: .01em; }
.actions { display: flex; flex-wrap: wrap; gap: 1.75rem 2.5rem; margin-top: 2rem; }
@media (max-width: 599px) { .actions { gap: 1rem 2rem; } .textlink { padding-block: .65rem .5rem; } }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .1em;
  min-height: 3rem; padding: .8rem 1.4rem; border: 1px solid var(--line-strong);
  font-family: var(--sans); font-size: .875rem; font-weight: 500; letter-spacing: .02em;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.button:hover { border-color: var(--ink); }
.button--solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.button--solid:hover { background: transparent; color: var(--ink); }
.button[disabled], .button[aria-disabled="true"] { opacity: .55; cursor: progress; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 200; padding: .75rem 1rem; background: var(--ink); color: var(--paper); font-size: .875rem; }
.skip-link:focus { top: 1rem; }

/* ------------------------------
   3. Header and navigation
   ------------------------------ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  background: var(--paper); color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
@media (min-width: 800px) { .site-header--over:not(.is-scrolled):not(.is-menu-open) { background: transparent; color: #111; --focus: #111; } }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 1.5rem; }
.brand { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; }
.nav { display: none; }
.nav__list { display: flex; gap: 2.25rem; }
.nav__item { position: relative; }
.nav__link { font-size: .875rem; font-weight: 500; letter-spacing: .02em; padding: .5rem 0; border-bottom: 1px solid transparent; }
.nav__link:hover, .nav__link[aria-current="page"] { border-bottom-color: currentColor; }
.nav__submenu { position: absolute; z-index: 2; top: calc(100% + .5rem); left: -.75rem; display: grid; gap: .25rem; min-width: max-content; padding: .625rem .75rem; border: 1px solid var(--line); background: var(--paper); color: var(--ink); opacity: 0; pointer-events: none; transform: translateY(-.25rem); transition: opacity .15s ease, transform .15s ease; }
.nav__submenu a { display: block; padding: .3rem 0; font-size: .8125rem; }
.nav__submenu a:hover, .nav__submenu a:focus-visible { text-decoration: underline; text-underline-offset: .2em; }
.nav__item--work:hover .nav__submenu, .nav__item--work:focus-within .nav__submenu { opacity: 1; pointer-events: auto; transform: translateY(0); }
.site-header__tools { display: flex; align-items: center; gap: 1rem; }
.theme { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%; }
.theme:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.nav-toggle { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; margin-right: -.5rem; }
.nav-toggle__bars { width: 22px; height: 1px; background: currentColor; position: relative; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; box-shadow: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before, .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { content: ''; position: absolute; inset: 0; background: currentColor; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: rotate(-45deg); }
@media (min-width: 800px) {
  .nav { display: block; }
  .nav-toggle { display: none; }
}
/* without JavaScript the primary nav is always shown and script-only controls are hidden */
html.no-js .nav { display: block; }
html.no-js .nav-toggle, html.no-js .theme, html.no-js .filters, html.no-js .seq__more, html.no-js .film__play { display: none; }
html.no-js .site-header__inner { flex-wrap: wrap; height: auto; padding-block: .75rem; }
html.no-js .site-header { height: auto; position: sticky; }

/* Mobile sheet: a full-height panel beneath the header with a visible close control. */
.mnav { position: fixed; inset: var(--header-h) 0 0 0; z-index: 99; background: var(--paper); color: var(--ink); overflow: auto; border-top: 1px solid var(--line); }
.mnav__inner { display: flex; flex-direction: column; min-height: 100%; padding-block: 2rem 1.5rem; }
.mnav__list { display: flex; flex-direction: column; }
.mnav__link { display: block; font-family: var(--serif); font-size: clamp(2rem, 8vw, 3rem); line-height: 1.1; padding: .45em 0; border-bottom: 1px solid var(--line); }
.mnav__link[aria-current="page"] { color: var(--ink-2); }
.mnav__subnav { display: flex; gap: 1.25rem; padding: .8rem 0 1rem; border-bottom: 1px solid var(--line); }
.mnav__subnav a { font-size: .8125rem; letter-spacing: .02em; }
.mnav__foot { margin-top: auto; padding-top: 2rem; }
.mnav__close { align-self: flex-start; margin-top: 1.5rem; min-height: 2.75rem; padding: .5rem 1rem; border: 1px solid var(--line-strong); font-size: .875rem; }
.site-header.is-menu-open { background: var(--paper); color: var(--ink); }
@media (min-width: 800px) { .mnav { display: none !important; } }

/* ------------------------------
   4. Images
   ------------------------------ */
.media { display: block; position: relative; width: 100%; overflow: hidden; background-color: var(--paper-2); background-size: cover; background-position: center; }
.media img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur) var(--ease), transform 900ms var(--ease); }
.media img.is-loading { opacity: 0; }
.media img.is-error { opacity: 0; }
a.media:focus-visible { outline-offset: 4px; }
.figure__caption { margin-top: .75rem; color: var(--ink-2); }
.card__link { display: block; color: inherit; }
.card__link:hover .media img { transform: scale(1.012); }
.card__caption { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem 1.5rem; flex-wrap: wrap; margin-top: .85rem; }
.card__title { font-family: var(--serif); font-size: var(--t-project); font-weight: 400; letter-spacing: -.008em; line-height: 1.25; }
.card__meta { display: flex; gap: .75em; flex-wrap: wrap; color: var(--ink-2); }
.card__meta span { white-space: nowrap; }
.card__meta .is-place, .project__meta .is-place { white-space: normal; }   /* a long location wraps instead of pushing the card wider */
.card__meta span:not(:last-child)::after { content: '·'; margin-left: .75em; }   /* the separator stays with the item before it, never starts a line */

/* ------------------------------
   5. Hero — the photograph in full. Phones: image, then the words.
      Wide screens: the frame fills the viewport; the words sit in the
      open sky at the top-left and the controls on the sand at the foot,
      away from the rider and the structure.
   ------------------------------ */
.hero { position: relative; display: grid; padding-top: var(--header-h); }
.hero__media { position: relative; aspect-ratio: var(--ar, 3 / 2); background-size: cover; background-position: center; background-color: var(--paper-2); overflow: hidden; }
/* slideshow: slides are stacked in the one box (the rider frame's ratio); a change is a short crossfade, moved only by the visitor */
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 500ms var(--ease); }
.hero__slide.is-active { opacity: 1; }
.hero__slide picture, .hero__slide img { width: 100%; height: 100%; }
.hero__media img { object-fit: cover; object-position: var(--focus, 50% 50%); }   /* cover, never stretch; --focus keeps each frame's subject when a viewport crops it */
.hero__slide img { transform: scale(var(--trim, 1)); }   /* --trim hides a light export edge; pixels untouched */
.hero__text, .hero__actions, .hero__foot { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.hero__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap; }
.hero__tools { display: flex; align-items: center; gap: 1.5rem; }
/* slider arrows: positioned against .hero__media, the photograph's own box in every layout */
.hero__nav { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
html.no-js .hero__nav { display: none; }   /* the controls are in the first paint (no layout shift) and gone without JavaScript */
.hero__nav-btn { position: absolute; top: 50%; left: .75rem; width: 2rem; height: 2rem; transform: translateY(-50%); display: grid; place-items: center; color: #F1F0EC; background: rgba(19, 19, 19, .55); pointer-events: auto; transition: background-color var(--dur) var(--ease); }
.hero__nav-btn[data-hero-next] { left: auto; right: .75rem; }
.hero__nav-btn::after { content: ''; position: absolute; inset: -.375rem; }   /* 44px touch target */
.hero__nav-btn:hover { background: rgba(19, 19, 19, .75); }
.hero__nav-btn .arrow { margin: 0; transition: transform var(--dur) var(--ease); }
.hero__nav-btn[data-hero-prev]:hover .arrow { transform: translateX(-2px); }
.hero__nav-btn[data-hero-next]:hover .arrow { transform: translateX(2px); }
.hero__nav-btn:focus-visible { outline: 2px solid #F1F0EC; outline-offset: 2px; box-shadow: 0 0 0 4px #131313; }   /* light ring on a dark band */
@media (min-width: 800px) and (min-height: 560px) and (min-aspect-ratio: 5/4) { .hero__nav-btn { left: 1.75rem; } .hero__nav-btn[data-hero-next] { right: 1.75rem; } }
/* phones: a smaller mark near the edge clears the rider (6.9vw in); the 44px target grows inward */
@media (max-width: 599px) {
  .hero__nav-btn { --m: min(1.375rem, calc(6.8vw - 3px)); left: .125rem; width: var(--m); height: var(--m); font-size: .875rem; }
  .hero__nav-btn[data-hero-next] { right: .125rem; }
  .hero__nav-btn[data-hero-prev]::after { inset: calc((var(--m) - 2.75rem) / 2) calc(var(--m) - 2.625rem) calc((var(--m) - 2.75rem) / 2) -.125rem; }
  .hero__nav-btn[data-hero-next]::after { inset: calc((var(--m) - 2.75rem) / 2) -.125rem calc((var(--m) - 2.75rem) / 2) calc(var(--m) - 2.625rem); }
}
.hero__text { padding-top: 2rem; }
.hero__title { font-size: var(--t-hero); line-height: 1; letter-spacing: -.018em; max-width: 10ch; }
.hero__support { margin-top: 1.25rem; max-width: 26ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hero__foot { margin-top: 1rem; }
.hero__actions { padding-bottom: 1rem; }
.hero__caption { display: grid; gap: .2rem; color: var(--ink-2); }
.hero__caption-title { font-family: var(--serif); font-size: var(--t-body); line-height: 1.3; }
.hero__caption-cat { font-size: var(--t-label); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.hero__caption a { justify-self: start; border-bottom: 1px solid transparent; margin-bottom: -1px; }
.hero__caption a:hover { border-bottom-color: currentColor; }
.hero__scroll { display: none; }

.hero__title { text-wrap: pretty; }
.hero__support { color: color-mix(in srgb, var(--ink) 78%, transparent); }
.hero__actions .button { min-width: 10.5rem; }

.home-gallery { padding-top: clamp(5rem, 11vw, 10rem); }
.home-gallery .section-head { max-width: 32rem; }
.gallery-link, .gallery-block { position: relative; min-height: 11rem; align-content: space-between; }
.gallery-link__title { transition: transform var(--dur) var(--ease); }
.gallery-link:hover .gallery-link__title { transform: translateX(.15rem); }
/* the Video half while no film is published: the same rhythm and columns as the Image half, without a dead link */
.gallery-block__title { font-family: var(--serif); font-size: var(--t-project); line-height: 1.1; letter-spacing: -.012em; }
.gallery-block__note { color: var(--ink-2); }

@media (min-width: 800px) and (min-height: 560px) and (min-aspect-ratio: 5/4) {
  .hero { padding-top: 0; min-height: 100svh; grid-template-rows: 1fr auto auto; grid-template-columns: 1fr; overflow: hidden; }   /* the text haze extends past the block; never let it widen the page */
  .hero__media { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
  /* readability treatments, behind words only: a haze under the header band and a field of light at the top-left */
  .hero__media::before, .hero__media::after { content: ''; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
  .hero__media::before { top: 0; height: calc(var(--header-h) * 1.5); background: linear-gradient(to bottom, rgba(var(--haze-rgb), .82), rgba(var(--haze-rgb), .45) 55%, rgba(var(--haze-rgb), 0)); }
  .hero__media::after { bottom: 0; height: 32%; background: linear-gradient(to top, rgba(var(--foot-rgb), .74), rgba(var(--foot-rgb), .4) 50%, rgba(var(--foot-rgb), 0)); }   /* links ≥ 4.5:1 on every frame */
  .hero__text { position: relative; z-index: 2; grid-area: 1 / 1 / 2 / 2; align-self: start; justify-self: start; width: auto; max-width: min(100% - 2 * var(--gutter), 40rem); margin-left: max(var(--gutter), calc((100% - var(--max)) / 2)); margin-right: 0; padding-top: calc(var(--header-h) + clamp(1.5rem, 4vh, 3.5rem)); }
  /* the haze is sized by the text block itself, so the words always sit on paper light whatever the frame holds behind them */
  .hero__text::before { content: ''; position: absolute; z-index: -1; inset: 0 -7rem -2.5rem -50vw; pointer-events: none;
    background: linear-gradient(90deg, rgba(var(--haze-rgb), .88) 0, rgba(var(--haze-rgb), .88) calc(100% - 9rem), rgba(var(--haze-rgb), .5) calc(100% - 4rem), rgba(var(--haze-rgb), 0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 75%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 75%, transparent 100%); }
  .hero__title, .hero__support { color: #111; }
  .hero__foot, .hero__scroll, .hero__caption { color: var(--foot-ink); }
  .hero__title { max-width: 9ch; }
  .hero__support { max-width: 24ch; font-size: clamp(1.1rem, 1rem + .45vw, 1.35rem); }
  .hero__actions { grid-area: 2 / 1 / 3 / 2; z-index: 2; margin-top: 0; }
  .hero__actions .button { border-color: var(--foot-line); color: var(--foot-ink); background: rgba(var(--foot-rgb), .45); }
  .hero__actions .button--solid { background: var(--foot-ink); color: rgb(var(--foot-rgb)); border-color: var(--foot-ink); }
  .hero__actions .button--solid:hover { background: rgba(var(--foot-rgb), .8); color: var(--foot-ink); }
  .hero__foot { grid-area: 3 / 1 / 4 / 2; z-index: 2; margin-top: 1.25rem; padding-bottom: 1.5rem; }
  .hero__scroll { display: inline-flex; align-items: center; gap: .75rem; padding-block: .45rem; }
  .hero__scroll-line { width: 2.5rem; height: 1px; background: currentColor; }
}
@media (min-width: 1024px) {
   .hero__text { max-width: 46rem; }
   .hero__title { max-width: 8ch; }
   .hero__actions { gap: 1rem; }
   .gallery-link { min-height: 15rem; }
}
/* shorter laptop screens: the statement is sized by the viewport's height as well as its width and sits closer to
   the header, so the words always clear the rider and the controls keep to the sand */
@media (min-width: 800px) and (max-height: 860px) and (min-aspect-ratio: 5/4) {
  .hero__title { font-size: min(var(--t-hero), 7.2vh); }
  .hero__support { margin-top: .9rem; }
  .hero__text { padding-top: calc(var(--header-h) + clamp(.75rem, 2.2vh, 2rem)); }
}
@media (min-width: 800px) and (min-height: 560px) and (max-height: 760px) and (min-aspect-ratio: 5/4) {
  .hero__support { max-width: 30ch; }
  .hero__text { padding-top: calc(var(--header-h) + 1rem); }
  .hero__media img { object-position: var(--focus-short, var(--focus)); }
}
@media (min-width: 800px) and (max-width: 1399px) and (min-height: 761px) and (min-aspect-ratio: 5/4) {
  .hero__text { padding-top: calc(var(--header-h) + 1.25rem); }
}

/* ------------------------------
   6. Home — Recent work, The work, About, gallery, enquiry
   ------------------------------ */
/* Recent work: one entry after another — the photograph, and beside it the title, metadata, the owner's words, the link */
.recent__title { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.recent__list { border-top: 1px solid var(--line); }
.story { position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 1.25rem var(--gap); padding-block: clamp(1.75rem, 3.5vw, 3rem); border-bottom: 1px solid var(--line); }
.story__media, .story__text { grid-column: 1 / -1; }
.story__link::before { content: ''; position: absolute; inset: 0; }   /* one named link per entry; its target is the whole entry */
.story:hover .media img { transform: scale(1.012); }
.story:hover .textlink::after { opacity: 1; }
.story:hover .textlink .arrow { transform: translateX(.2em); }
.story__title { font-size: var(--t-project); line-height: 1.2; }
.story__meta { display: flex; flex-wrap: wrap; gap: .75em; margin-top: .5rem; color: var(--ink-2); }
.story__meta span { white-space: nowrap; }
.story__meta span:not(:last-child)::after { content: '·'; margin-left: .75em; }
.story__meta .is-place { white-space: normal; }
.story__summary { margin-top: 1rem; max-width: 36ch; text-wrap: pretty; }
.story__link { display: inline-block; margin-top: .75rem; }
@media (min-width: 800px) {
  .story__media { grid-column: 1 / span 4; }
  .story__text { grid-column: 5 / -1; }
  .story--portrait .story__media { grid-column: 1 / span 3; }
  .story--portrait .story__text { grid-column: 4 / -1; }
}
@media (min-width: 1024px) {
  .story__media { grid-column: 1 / span 5; }
  .story__text { grid-column: 7 / span 6; }
  .story--portrait .story__media { grid-column: 1 / span 3; }
}

/* The work: a line counted from the content, the owner's print wording, then every photograph */
.the-work__head { align-items: flex-end; }
.the-work__intro { margin-top: .75rem; }
.the-work__intro, .the-work__prints { color: var(--ink-2); }

/* About: the photograph left, the words right; a portrait takes a narrower column than a landscape frame */
.about-home__grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(1.75rem, 4vw, 3rem) var(--gap); align-items: start; }
.about-home__figure, .about-home__body { grid-column: 1 / -1; }
.about-home__bio { margin-top: 1rem; max-width: 36ch; }
.about-home__text { margin-top: 1rem; max-width: 36ch; color: var(--ink-2); text-wrap: pretty; }
.about-home__body .textlink { margin-top: 1.25rem; }
@media (min-width: 800px) {
  .about-home__figure { grid-column: 1 / span 4; }
  .about-home__body { grid-column: 5 / -1; }
  .about-home--portrait .about-home__figure { grid-column: 1 / span 3; }
  .about-home--portrait .about-home__body { grid-column: 4 / -1; }
}
@media (min-width: 1024px) {
   .about-home__figure { grid-column: 1 / span 8; }
   .about-home__body { grid-column: 10 / span 3; }
  .about-home--portrait .about-home__figure { grid-column: 1 / span 5; }
  .about-home--portrait .about-home__body { grid-column: 7 / span 5; }
}

/* home: two large links into the Gallery page */
.gallery-links { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--gap); }
.gallery-link, .gallery-block { grid-column: 1 / -1; display: grid; gap: .5rem; padding: clamp(1.5rem, 3vw, 2.5rem) 0; border-top: 1px solid var(--line); }
.gallery-links > :last-child { border-bottom: 1px solid var(--line); }
.gallery-link__title { font-family: var(--serif); font-size: var(--t-project); line-height: 1.1; letter-spacing: -.012em; }
.gallery-link__meta, .gallery-block__meta { color: var(--ink-2); }
.gallery-link__go { display: inline-flex; align-items: center; margin-top: .5rem; }
.gallery-link__go .arrow { transition: transform var(--dur) var(--ease); }
.gallery-link:hover .gallery-link__go .arrow { transform: translateX(.25em); }
@media (min-width: 600px) { .gallery-link, .gallery-block { grid-column: span 4; border-top: 1px solid var(--line); } .gallery-links > :last-child { border-bottom: 0; } .gallery-links { border-bottom: 1px solid var(--line); } }
@media (min-width: 1024px) { .gallery-link, .gallery-block { grid-column: span 6; } }

/* gallery page: Image · Video sections, each with category groups */
.subnav { position: sticky; top: var(--header-h); z-index: 50; background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.subnav__inner { display: flex; gap: 2rem; }
.subnav__link { display: inline-block; padding: .9rem 0; font-size: .875rem; font-weight: 500; letter-spacing: .02em; border-bottom: 1px solid transparent; margin-bottom: -1px; }
.subnav__link:hover, .subnav__link.is-current { border-bottom-color: currentColor; }
.subnav__link:focus-visible { outline-offset: -3px; }   /* the ring stays inside the bar, never under the fixed header */
html.no-js .subnav { position: static; }             /* without JavaScript the header has no fixed height to pin to */
.gallery-section { padding-block: clamp(3rem, 7vw, 6rem) 0; scroll-margin-top: 3.5rem; }   /* html scroll-padding already clears the header; this clears the sticky Image | Video bar */
.gallery-section:last-of-type { padding-bottom: clamp(4rem, 9vw, 8rem); }
/* with films in it, the Video section becomes a quiet dark room: the page ground changes, nothing else */
.gallery-section--video[data-theme="dark"] { background: var(--paper); color: var(--ink); margin-top: clamp(3rem, 7vw, 6rem); padding-block: clamp(3rem, 7vw, 6rem) clamp(4rem, 9vw, 8rem); }
.gallery-section__title { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.gallery-section__note { color: var(--ink-2); margin: -.5rem 0 clamp(1.5rem, 3vw, 2.5rem); }
.gallery-group { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line); scroll-margin-top: 3.5rem; }
.gallery-group__title { display: flex; align-items: baseline; gap: 1rem; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.gallery-group--video .gallery-group__title { margin-bottom: 0; }
.gallery-group--video .film-grid { margin-top: clamp(1.25rem, 2.5vw, 2rem); }
.film-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3rem) var(--gap); }
.film__sentinel { grid-column: 1 / -1; width: 1px; height: 1px; overflow: hidden; }
.film { grid-column: 1 / -1; }
@media (min-width: 600px) { .film { grid-column: span 4; } }
@media (min-width: 1024px) { .film { grid-column: span 6; } }
.film__media { position: relative; overflow: hidden; background: #0D0D0D; }
.film__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.film__media iframe, .film__media video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #0D0D0D; }
.film__media.is-loading iframe { opacity: 0; }
.film__status { position: absolute; left: 1rem; bottom: 1rem; color: #F1F0EC; background: rgba(13, 13, 13, .7); padding: .5rem .75rem; }
.film__status:empty { padding: 0; background: transparent; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }   /* present for assistive tech, invisible when empty */
.film__media.is-failed .film__status { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }   /* announced, not shown twice */
.film__close { position: absolute; top: .75rem; right: .75rem; min-height: 2.5rem; padding: .4rem .8rem; background: rgba(13, 13, 13, .75); color: #F1F0EC; border: 1px solid rgba(241, 240, 236, .5); font-size: .8125rem; font-weight: 500; }
.film__close:hover { background: #0D0D0D; border-color: #F1F0EC; }
.film__fail { position: absolute; inset: 0; display: grid; place-content: center; gap: .75rem; padding: 1.5rem; text-align: center; background: rgba(13, 13, 13, .82); color: #F1F0EC; font-family: var(--serif); font-size: 1.125rem; }
.film__fail a { text-decoration: underline; text-underline-offset: .2em; font-family: var(--sans); font-size: .875rem; }
.film__again { font-family: var(--sans); font-size: .875rem; font-weight: 500; border: 1px solid rgba(241, 240, 236, .5); padding: .5rem .9rem; color: #F1F0EC; justify-self: center; }
.film__desc { margin-top: .5rem; color: var(--ink-2); max-width: 48ch; }
.film__credits { margin: .75rem 0 0; display: grid; gap: .3rem; }
.film__credits div { display: grid; grid-template-columns: 6.5rem 1fr; gap: .75rem; }
.film__credits dt { color: var(--ink-2); }
.film__credits dd { margin: 0; }
.showreel { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line); }
.showreel__film { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--gap); }
.showreel__film > * { grid-column: 1 / -1; }
@media (min-width: 1024px) { .showreel__film .film__media { grid-column: 1 / span 10; } .showreel__film .film__desc { grid-column: 1 / span 6; } }
.film .card__caption { display: block; }
.film .card__meta { margin-top: .35rem; }
.film__external { margin-top: .6rem; }
.film__external a { border-bottom: 1px solid var(--line-strong); }
.film__media :focus-visible { outline-color: #F1F0EC; }
.film__play { position: absolute; left: 1rem; bottom: 1rem; display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: .5rem 1rem; background: rgba(13, 13, 13, .7); color: #F1F0EC; border: 1px solid rgba(241, 240, 236, .5); font-size: .875rem; font-weight: 500; }
.film__play:hover { background: #0D0D0D; border-color: #F1F0EC; }
.film__play-mark { width: 0; height: 0; border-style: solid; border-width: .4rem 0 .4rem .7rem; border-color: transparent transparent transparent currentColor; }

.cta { border-top: 1px solid var(--line); padding-top: clamp(4rem, 9vw, 8rem) !important; }
.cta__grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--gap); }
.cta__grid > * { grid-column: 1 / -1; }
.cta__text { max-width: 36ch; }
.cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
@media (min-width: 800px) { .cta__grid > :first-child { grid-column: 1 / span 4; } .cta__body { grid-column: 5 / -1; } }
@media (min-width: 1024px) { .cta__grid > :first-child { grid-column: 1 / span 5; } .cta__body { grid-column: 6 / span 6; } }

/* ------------------------------
   8. Work index — filters and the controlled grid
   ------------------------------ */
.filters { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding-block: 1rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.filters__list { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.filter { min-height: 2.5rem; padding: .25rem 0; font-size: .875rem; font-weight: 500; letter-spacing: .02em; color: var(--ink-2); border-bottom: 1px solid transparent; }
.filter:hover { color: var(--ink); }
.filter[aria-pressed="true"] { color: var(--ink); border-bottom-color: currentColor; }
.work-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 0 var(--gap); }
/* Each planned row is two tracks — photographs, then captions — shared by every card in it (subgrid), so the
   photographs meet on one baseline however long a caption is; the space between planned rows is the caption's padding. */
.work-grid .card { grid-row: span 2; display: grid; grid-template-rows: subgrid; }
.work-grid .card__link { grid-row: 1 / span 2; display: grid; grid-template-rows: subgrid; }
.work-grid .media { align-self: end; }   /* photographs on one baseline, captions in their own track */
.work-grid .card__caption { padding-bottom: clamp(2rem, 4vw, 3.5rem); }   /* the row gap lives in the caption, so photographs above it share one baseline */
.work-grid .card { grid-column: 1 / -1; }
.work-grid .card[style] { grid-column: var(--so, auto) / span var(--sm); }
@media (min-width: 600px) { .work-grid .card[style] { grid-column: var(--so-t, auto) / span var(--st); } }
@media (min-width: 1024px) { .work-grid .card[style] { grid-column: var(--so-d, auto) / span var(--sd); } }
.work-grid__empty { padding: 4rem 0; text-align: center; color: var(--ink-2); }
.work-index { padding-bottom: clamp(4rem, 9vw, 8rem); }

/* ------------------------------
   9. Project pages
   ------------------------------ */
.project__head { padding-top: calc(var(--header-h) + clamp(2rem, 6vw, 5rem)); padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.crumbs { display: flex; gap: .75em; color: var(--ink-2); flex-wrap: wrap; }
.crumbs a:hover { color: var(--ink); }
.project__meta { display: flex; gap: .75em; flex-wrap: wrap; color: var(--ink-2); margin-top: 2rem; }
.project__meta span { white-space: nowrap; }
.project__meta span:not(:last-child)::after { content: '·'; margin-left: .75em; }
.project__title { font-size: var(--t-page); margin-top: .75rem; max-width: 20ch; }
.project__desc { margin-top: 1.25rem; max-width: 44ch; color: var(--ink-2); }
.project__text-wrap { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--gap); padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.project__text { grid-column: 1 / -1; display: grid; gap: 1.25em; max-width: 62ch; }
.project__lead { font-size: clamp(1.35rem, 1.05rem + 1.2vw, 2rem); line-height: 1.3; }
.project__ps { color: var(--ink-2); font-style: italic; }
@media (min-width: 800px) { .project__text { grid-column: 3 / -1; } }
@media (min-width: 1024px) { .project__text { grid-column: 4 / span 8; } }
.sequence { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem) var(--gap); align-items: end; }
.seq { grid-column: 1 / -1; }
.seq[style] { grid-column: span var(--sm); }
.seq--closing-portrait, .seq--modest { grid-column: 1 / -1; }
@media (min-width: 600px) { .seq[style] { grid-column: var(--so-t, auto) / span var(--st); } .seq--closing-portrait { grid-column: 2 / span 6; } .seq--modest { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .seq[style] { grid-column: var(--so-d, auto) / span var(--sd); } .seq--closing-portrait { grid-column: 4 / span 6; } .seq--modest { grid-column: 3 / span 8; } }
.seq--full .figure__caption { max-width: 60ch; }
html.js .seq.is-deferred { display: none; }
.seq__more { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding-block: clamp(2rem, 4vw, 3.5rem); }
.seq__status { color: var(--ink-2); }
.seq__end { display: flex; align-items: center; gap: 1rem; margin-top: clamp(2rem, 4vw, 3.5rem); color: var(--ink-2); }
.seq__end-line { width: 2.5rem; height: 1px; background: currentColor; }
.seq__load { display: inline-flex; align-items: center; min-height: 3rem; padding: .8rem 1.4rem; border: 1px solid var(--line-strong); font-size: .875rem; font-weight: 500; }
.seq__load:hover { border-color: var(--ink); }
.project__foot { margin-top: clamp(3rem, 7vw, 6rem); padding-bottom: clamp(4rem, 9vw, 8rem); }
.project__print { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; padding-block: 1.5rem; border-top: 1px solid var(--line); }
.project__print .label { color: var(--ink-2); }
.project__nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; padding-block: 1.5rem; border-top: 1px solid var(--line); }
.project__nav-link { display: flex; flex-direction: column; gap: .35rem; padding-block: .3rem; }
.project__nav-link .label { display: inline-flex; align-items: center; color: var(--ink-2); }
.project__nav-link .arrow { margin: 0 .5em 0 0; }
.project__nav-link--next { text-align: right; align-items: flex-end; }
.project__nav-link--next .arrow { margin: 0 0 0 .5em; }
.project__nav-link--index { align-self: center; padding-block: .5rem; }
.project__nav-link .serif { font-size: 1.125rem; }
.project__nav-link:hover .serif { text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 599px) {
  .project__nav { grid-template-columns: 1fr 1fr; }
  .project__nav-link--index { grid-column: 1 / -1; order: 3; align-self: start; padding-top: .5rem; }
}

/* ------------------------------
   10. About, contact, prose, 404
   ------------------------------ */
.about__grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3rem) var(--gap); padding-bottom: clamp(4rem, 9vw, 8rem); }
.about__photo, .about__body { grid-column: 1 / -1; }
.about__statement { display: grid; gap: 1.1em; }
.about__statement p:first-child { font-size: clamp(1.35rem, 1.05rem + 1.4vw, 2.1rem); line-height: 1.3; }
.about__h2 { margin-top: clamp(2rem, 4vw, 3rem); }
.about__practice { margin-top: .75rem; display: grid; gap: .25em; }
.facts { margin: clamp(2rem, 4vw, 3rem) 0 0; display: grid; gap: .75rem; }
.facts__row { display: grid; grid-template-columns: 10rem 1fr; gap: 1rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.facts__row dt { color: var(--ink-2); }
.facts__row dd { margin: 0; }
.about__avail { margin-top: .75rem; }
.about__note { margin-top: 1.25rem; }
.about__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 600px) { .about__photo { grid-column: 1 / span 4; } .about__body { grid-column: 5 / -1; } }
@media (min-width: 1024px) { .about__photo { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start; } .about__body { grid-column: 7 / span 6; } }

.contact__grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 4rem) var(--gap); padding-bottom: clamp(4rem, 9vw, 8rem); }
.contact__direct, .contact__form { grid-column: 1 / -1; }
.contact__line { display: grid; gap: .35rem; padding-block: 1rem; border-top: 1px solid var(--line); font-family: var(--serif); font-size: 1.25rem; overflow-wrap: anywhere; }
.contact__line a:hover { text-decoration: underline; text-underline-offset: .2em; }
.contact__small { margin-top: 1.5rem; text-transform: none; letter-spacing: .01em; font-weight: 400; font-size: .8125rem; line-height: 1.55; max-width: 34ch; }
.contact__small a { text-decoration: underline; text-underline-offset: .2em; }
@media (min-width: 800px) { .contact__direct { grid-column: 1 / span 3; } .contact__form { grid-column: 4 / -1; } }
@media (min-width: 1024px) { .contact__direct { grid-column: 1 / span 4; } .contact__form { grid-column: 6 / span 7; } }

.form__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem 1.5rem; }
@media (min-width: 600px) { .form__grid { grid-template-columns: 1fr 1fr; } .form__row--wide { grid-column: 1 / -1; } }
.form__row { display: grid; gap: .5rem; min-width: 0; }
.form__row label { font-size: .875rem; font-weight: 500; }
.form__opt { color: var(--ink-2); font-weight: 400; }
.form__row input, .form__row select, .form__row textarea { width: 100%; min-height: 3rem; padding: .7rem .85rem; background: transparent; border: 1px solid var(--line-strong); border-radius: 0; color: var(--ink); }
.form__row textarea { resize: vertical; min-height: 9rem; }
.form__row ::placeholder { color: var(--ink-2); opacity: 1; }
.form__row select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1.1rem) 50%, calc(100% - .8rem) 50%; background-size: .3rem .3rem; background-repeat: no-repeat; padding-right: 2.25rem; }
.form__row input:focus-visible, .form__row select:focus-visible, .form__row textarea:focus-visible { border-color: var(--ink); outline-offset: 2px; }
.form__row.is-invalid input, .form__row.is-invalid textarea, .form__row.is-invalid select { border-color: var(--rust); }
.form__error { font-size: .8125rem; color: var(--rust); }
.form__row--check { display: grid; grid-template-columns: auto 1fr; gap: .5rem .75rem; align-items: start; }
.form__row--check input { width: 1.1rem; height: 1.1rem; min-height: 0; margin-top: .2rem; padding: 0; accent-color: var(--ink); }
.form__row--check label { font-weight: 400; line-height: 1.5; }
.form__row--check label a { text-decoration: underline; text-underline-offset: .2em; }
.form__row--check .form__error { grid-column: 1 / -1; }
.form__row--trap { position: absolute !important; left: -200vw; width: 1px; height: 1px; overflow: hidden; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem; }
.form__status { text-transform: none; letter-spacing: .01em; font-weight: 400; font-size: .875rem; color: var(--ink-2); max-width: 40ch; }
.form__status.is-error { color: var(--rust); }
.form__done { padding: 2rem 0; border-top: 1px solid var(--line); }
.form__done h2 { font-size: var(--t-section); }
.form__done p { margin-top: 1rem; max-width: 40ch; }

.prose { padding-bottom: clamp(4rem, 9vw, 8rem); }
.prose__body { max-width: 62ch; display: grid; gap: 1.1em; }
.prose__body h2 { font-size: 1.5rem; margin-top: 1rem; }
.prose__body a { text-decoration: underline; text-underline-offset: .2em; }
.notfound { padding-block: calc(var(--header-h) + clamp(4rem, 12vw, 9rem)) clamp(6rem, 14vw, 12rem); }
.notfound__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.5rem; }

/* ------------------------------
   11. Footer
   ------------------------------ */
.site-footer { border-top: 1px solid var(--line); padding-block: clamp(2.5rem, 5vw, 4rem); }
.footer__grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 2rem var(--gap); align-items: start; }
.footer__grid > * { grid-column: 1 / -1; min-width: 0; }
.footer__name { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; }
.footer__place { margin-top: .35rem; }
.footer__grid > :first-child .label { text-wrap: balance; }
.footer__contact { display: grid; gap: .35rem; justify-items: start; }
.footer__line { overflow-wrap: anywhere; }
.footer__line:hover { text-decoration: underline; text-underline-offset: .2em; }
.footer__social { display: flex; gap: 1.25rem; margin-top: .5rem; }
.footer__meta { display: grid; gap: .35rem; color: var(--ink-2); }
@media (min-width: 600px) { .footer__grid > :nth-child(1) { grid-column: 1 / span 4; } .footer__grid > :nth-child(2) { grid-column: 5 / span 2; } .footer__grid > :nth-child(3) { grid-column: 7 / span 2; text-align: right; } }
@media (min-width: 1024px) { .footer__grid > :nth-child(1) { grid-column: 1 / span 5; } .footer__grid > :nth-child(2) { grid-column: 6 / span 4; } .footer__grid > :nth-child(3) { grid-column: 10 / span 3; } }

/* ------------------------------
   12. Viewer — one photograph in a dark room
   ------------------------------ */
.viewer { position: fixed; inset: 0; z-index: 300; background: #0D0D0D; color: #F1F0EC; }
.viewer__dialog { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr; }
.viewer__bar { display: flex; justify-content: space-between; align-items: center; padding: 1rem var(--gutter); min-height: var(--header-h); }
.viewer__count { font-variant-numeric: tabular-nums; }
.viewer__close { min-height: 2.75rem; padding: .5rem .9rem; border: 1px solid rgba(241, 240, 236, .5); font: inherit; }
.viewer__close:hover { border-color: #F1F0EC; }
.viewer__stage { display: grid; grid-template-rows: 1fr auto; min-height: 0; padding: 0 var(--gutter) 1.25rem; }
.viewer__frame { min-height: 0; display: grid; place-items: center; }
.viewer__frame picture, .viewer__frame img { max-width: 100%; max-height: calc(100svh - var(--header-h) - 5rem); width: auto; height: auto; object-fit: contain; }
.viewer__caption { text-align: center; padding-top: 1rem; font-family: var(--serif); font-size: 1rem; color: rgba(241, 240, 236, .8); min-height: 1.5rem; }
.viewer__nav { position: absolute; top: 50%; width: 3rem; height: 3rem; margin-top: -1.5rem; display: grid; place-items: center; border: 1px solid rgba(241, 240, 236, .3); color: #F1F0EC; background: rgba(13, 13, 13, .5); }
.viewer__nav:hover { border-color: #F1F0EC; }
.viewer__nav--prev { left: max(.5rem, calc(var(--gutter) - 1.5rem)); }
.viewer__nav--next { right: max(.5rem, calc(var(--gutter) - 1.5rem)); }
.viewer__nav .arrow { margin: 0; width: 1.1rem; height: 1.1rem; }
.viewer :focus-visible { outline-color: #F1F0EC; }
@media (max-width: 599px) { .viewer__nav { top: auto; bottom: .75rem; margin: 0; } }
@media (max-height: 500px) { .subnav { position: static; } .viewer__bar { min-height: 2.75rem; padding-block: .4rem; } .viewer__frame picture, .viewer__frame img { max-height: calc(100svh - 2.75rem - 2.75rem); } .viewer__caption { padding-top: .4rem; } .viewer__stage { padding-bottom: .5rem; } }

/* ------------------------------
   13. Motion, print, review overlay
   ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; scroll-behavior: auto !important; }
  .card__link:hover .media img { transform: none; }
}
@media print { .site-header, .site-footer, .viewer, .hero__scroll, .form { display: none !important; } .hero { padding-top: 0; } }

html.review-mode .review { position: fixed; right: 1rem; bottom: 1rem; z-index: 400; max-width: min(24rem, calc(100vw - 2rem)); padding: 1rem 1.1rem; background: #111; color: #FFFFFF; font-size: .8125rem; line-height: 1.45; box-shadow: 0 8px 30px rgba(0, 0, 0, .35); }
html.review-mode .review__title { font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .7rem; margin-bottom: .5rem; }
html.review-mode .review__list { display: grid; gap: .3rem; }
html.review-mode .review__foot { margin-top: .75rem; color: #b9b5ad; }
html.review-mode [data-content-status] { outline: 1px dashed rgba(154, 90, 60, .7); outline-offset: 2px; }
.media__missing { position: absolute; inset: auto 0 0 0; padding: .75rem; color: var(--ink); background: var(--paper-2); }
.figure__caption { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.figure__hint { color: var(--ink-2); }
.figure__hint::before { content: '↗'; margin-right: .5em; }