/* subhranshusingh.com
   Layout idea: the 3:4 frame his films are cut to is the one screen every project plays in.
   The showreel fills the first screen; then the frame stays pinned while the projects pass, and
   returns as the portrait in About and the closing picture. Off-white ground so the films read as prints. */

@font-face {
  font-family: "TikTok Sans Self";
  src: url("../fonts/tiktok-sans.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-stretch: 75% 150%;
  font-display: swap;
}

:root {
  color-scheme: light;
  /* colour: one ground, one ink, one dark field; the films bring the colour */
  --bg: #ecebe8;
  --surface: #e1e0dc;
  --ink: #141210;
  --muted: #59544e;
  --line: #cfcac3;            /* quiet lines between questions on the light ground */
  --field: #141210;
  --field-ink: #ecebe8;
  --field-muted: #b4ada4;
  --field-line: #3d3934;      /* the quiet rules between the How I work rows */
  --field-rule: #7a736b;      /* the one brighter rule that opens the How I work list */
  --accent: #141210;
  --accent-hover: #3b3632;
  --accent-ink: #ecebe8;
  --film-ink: #ecebe8;        /* text laid over the showreel: the site's own off-white */
  --film-ink-hover: #ffffff;

  /* type: one family, wide capitals for display, normal width for reading */
  --font: "TikTok Sans Self", "TikTok Sans", "Helvetica Neue", Arial, sans-serif;
  /* 11 Nov (stage 5): one step quieter so the films lead, not the type */
  --step-small: 13px;
  --step-body: clamp(15px, 0.875rem + 0.15vw, 17px);
  --step-lead: clamp(17px, 0.95rem + 0.3vw, 20px);
  --step-head: clamp(28px, 2.5vw, 44px);

  /* space */
  --margin: clamp(16px, 2.2vw, 32px);
  --gutter: clamp(12px, 1.7vw, 24px);
  --section: clamp(96px, 11vw, 176px);
  --nav-h: 72px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-body);
  line-height: 1.55;
  font-stretch: 100%;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: inherit; }
ul, ol, dl, dd, blockquote, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: var(--bg); padding: 10px 14px; z-index: 20; text-decoration: none; }
.skip:focus { left: var(--margin); }

/* the display voice */
.display {
  font-weight: 560;
  font-stretch: 125%;
  text-transform: uppercase;
  font-size: var(--step-head);
  line-height: 1.0;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* frame: one pair of margins and one 12-column grid everywhere */
.wrap {
  padding-left: max(var(--margin), env(safe-area-inset-left, 0px));
  padding-right: max(var(--margin), env(safe-area-inset-right, 0px));
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}

/* navigation: wordmark, three links */
.nav {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: 14px;
  position: relative;
  z-index: 3;
}
.nav .mark { text-decoration: none; font-weight: 600; }
.nav ul { display: flex; gap: 28px; }
.nav ul a { text-decoration: none; }
.nav a:hover, .nav a:focus-visible { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }

/* button: flat, square, one fill */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  border-radius: 0;
  transition: background-color 180ms ease, transform 140ms ease;
}
.btn:hover { background: var(--accent-hover); }
.btn:active { transform: scale(0.98); }

.textlink { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; transition: text-decoration-color 180ms ease; }
.textlink:hover { text-decoration-color: transparent; }

/* ---------- Home: the showreel fills the first screen, the nav laid over it ---------- */
.over { position: absolute; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 3; color: var(--film-ink); }
.over :focus-visible { outline-color: var(--film-ink); }
.hero { position: relative; isolation: isolate; min-height: 100svh; display: grid; place-items: center; background: var(--field); color: var(--film-ink); overflow: hidden; }
.hero-film { position: absolute; inset: 0; z-index: -2; }
.hero-film img, .hero-film video { width: 100%; height: 100%; object-fit: cover; }
/* a soft shade behind the words and the nav, so they read over any shot; it does a job, it is not decoration */
.hero-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 48% 42% at 50% 58%, rgba(11, 10, 9, 0.62), rgba(11, 10, 9, 0) 100%), linear-gradient(to bottom, rgba(11, 10, 9, 0.45), rgba(11, 10, 9, 0) 140px); } /* taste-skill-ignore */
/* 11 Nov (stage 5): centred, a little below the middle. The sentence breaks after "film," so its second line
   is the longer one: the block widens back out under the headline instead of narrowing into a V */
.hero-mid { padding-block: calc(var(--nav-h) + 12svh) 72px; }
.hero-copy { display: flex; flex-direction: column; align-items: center; text-align: center; row-gap: 26px; }
.hero-row { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.hero .display { font-size: clamp(32px, 3.05vw, 60px); } /* 11 Nov stage 5: was 3.9vw up to 78px (and 5.2vw up to 104px before that) */
.hero-mid p { font-size: var(--step-lead); line-height: 1.4; }
.br-wide { display: inline; }
.btn-film { background: var(--film-ink); color: var(--ink); min-height: 52px; padding: 0 30px; font-size: 16px; }
.btn-film:hover { background: var(--film-ink-hover); }

/* ---------- Home: the work beside one pinned frame ---------- */
.showcase { display: flex; justify-content: center; align-items: stretch; gap: clamp(40px, 4vw, 80px); padding-top: var(--nav-h); padding-bottom: 64px; }
/* the 64px below matches the space under the pinned frame, so when the last project lets go the frame keeps its gap above How I work */
/* text and frame as one centred pair: the text first, its column ending a short step before the frame,
   vertically centred on it. The top padding equals the frame's pinned position, so it sticks without a jump. */
.showcase-text { flex: 0 1 auto; width: clamp(340px, 36vw, 620px); min-width: 0; }
.stage-col { flex: none; width: min(50%, calc((100svh - var(--nav-h) - 64px) * 0.75)); }

.stage {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + var(--nav-h));
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}
.stage-frame {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #0b0a09;
}
.stage-frame .loop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 520ms ease, transform 900ms cubic-bezier(.2,.7,.2,1);
}
.stage-frame .loop.on { opacity: 1; transform: none; }
.stage-frame:hover .loop.on { transform: scale(1.015); }
.stage-cap { font-size: var(--step-small); color: var(--muted); min-height: 1.5em; }
.stage-cap a { color: var(--ink); }

/* Work: one project at a time. The reel is tall scroll room; its pin holds every project
   stacked in one place, and only the one in view is shown. Next / Prev sit at the bottom. */
.work { --step: 75svh; }
.reel { position: relative; }
.js .reel { height: calc(100svh - var(--nav-h) + (var(--n) - 1) * var(--step)); }
.js .reel-pin {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + var(--nav-h));
  height: calc(100svh - var(--nav-h));
}
.reel-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* centred on the frame: the 64px below matches the space under the frame */
  padding-bottom: 64px;
}
.js .reel-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 360ms ease, visibility 0s linear 360ms;
}
.js .reel-item.on { opacity: 1; visibility: visible; transition: opacity 480ms ease 120ms, visibility 0s; }
.js .reel-item .reel-body > * { transform: translateY(14px); transition: transform 620ms cubic-bezier(.2,.7,.2,1); }
.js .reel-item.on .reel-body > * { transform: none; }
.js .reel-item.on .reel-body > :nth-child(2) { transition-delay: 50ms; }
.js .reel-item.on .reel-body > :nth-child(3) { transition-delay: 100ms; }
.js .reel-item.on .reel-body > :nth-child(4) { transition-delay: 150ms; }
.no-js .reel-item { min-height: calc(100svh - var(--nav-h)); }

/* three groups: who and what I did / what it is and for whom / the action */
.reel-body { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }
.reel-id, .reel-about { display: flex; flex-direction: column; }
.reel-id { gap: 12px; }
.reel-about { gap: 3px; }
.reel-body h3 { max-width: 14ch; }
.reel-body .name { text-decoration: none; }
.reel-body a.name:hover, .reel-body a.name:focus-visible { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 3px; }
.reel-body .role { font-size: var(--step-lead); line-height: 1.3; font-weight: 520; max-width: 26ch; }
.reel-body .line { font-size: var(--step-body); line-height: 1.5; }
.reel-body .credit { font-size: var(--step-body); line-height: 1.5; color: var(--muted); }
.row-img { display: none; }
.row-img .loop { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; background: #0b0a09; }

/* a second, quieter button: the black fill stays for Book a project call */
.btn-quiet { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn-quiet:hover { background: var(--ink); color: var(--bg); }

.reel-nav { position: absolute; left: 0; bottom: 64px; /* on the frame's bottom line */ display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 2px; font-size: 14px; align-self: flex-start; }
.reel-nav a { display: contents; text-decoration: none; }
.reel-nav .k { color: var(--muted); text-align: right; }
.reel-nav .v { font-weight: 500; }
.reel-nav a:hover .v, .reel-nav a:focus-visible .v { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }

.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- How I work: the stages as full-width rows on a dark field ---------- */
.process { background: var(--field); color: var(--field-ink); padding-block: clamp(88px, 8.5vw, 136px); }
.process .grid { align-items: start; row-gap: clamp(28px, 2.6vw, 40px); }
.process-title { grid-column: 1 / -1; }
.process-intro { grid-column: 7 / -1; display: flex; flex-direction: column; gap: 20px; }
.process-intro p { font-size: var(--step-lead); line-height: 1.45; max-width: 36ch; }
.process-intro p + p { font-size: var(--step-body); color: var(--field-muted); max-width: 46ch; }
/* Rows sit between rules (asked for 9 Nov, a deliberate exception to the no-hairline rule).
   One brighter rule opens the list under the intro; quieter rules separate the rows and close it.
   Headings and sentences share the intro's column line (col 7), so everything hangs off two edges. */
.steps { grid-column: 1 / -1; list-style: none; margin: clamp(48px, 4.4vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: subgrid; row-gap: 0; }
.steps li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; padding-block: clamp(30px, 3vw, 48px); border-top: 1px solid var(--field-line); } /* taste-skill-ignore */
.steps li:first-child { border-top-color: var(--field-rule); } /* taste-skill-ignore */
.steps li:last-child { border-bottom: 1px solid var(--field-line); } /* taste-skill-ignore */
.steps h3 { grid-column: 1 / 6; grid-row: 1; font-size: var(--step-lead); font-weight: 500; line-height: 1.25; }
.steps p { grid-column: 7 / -1; grid-row: 1; color: var(--field-muted); font-size: var(--step-body); line-height: 1.55; max-width: 46ch; }

/* ---------- About: the portrait in the same 3:4 frame ---------- */
.about { padding-top: clamp(88px, 8.5vw, 136px); }
.about .grid { align-items: start; row-gap: 40px; }
.about-title { grid-column: 1 / -1; }
.about-photo { grid-column: 1 / 6; }
.about-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--surface); }
.about-text { grid-column: 7 / -1; display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.about-text .story { display: flex; flex-direction: column; gap: 18px; max-width: 58ch; }
.about-text .story p:first-child { font-size: var(--step-lead); line-height: 1.45; }
.about-text .where { font-weight: 500; }
.exp { display: flex; flex-direction: column; gap: 22px; margin-top: 12px; max-width: 62ch; }
.exp li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.exp .who { font-weight: 600; }
.exp .when { color: var(--muted); font-size: var(--step-small); }
.exp p { font-size: 15px; }
.about-text .cv { margin-top: 4px; }

/* ---------- Closing: the quote, then the call ---------- */
.closing { padding-top: var(--section); }
.closing .grid { align-items: end; row-gap: 40px; }
.closing-text { grid-column: 1 / 7; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.closing blockquote p { font-size: var(--step-lead); line-height: 1.42; max-width: 32ch; }
.closing figcaption { margin-top: 18px; color: var(--muted); font-size: 14px; }
.closing .alt { font-size: 14px; color: var(--muted); }
.closing .alt a { color: var(--ink); }
.closing-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: -16px; }
.btn-soft { background: #d9d7d2; color: var(--ink); }
.btn-soft:hover { background: var(--ink); color: var(--bg); }
.closing-photo { grid-column: 8 / -1; justify-self: end; width: min(100%, calc((100svh - 80px) * 0.75)); }
.closing-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

/* ---------- Footer: one quiet line ---------- */
.foot { padding-top: clamp(120px, 24svh, 220px); padding-bottom: 30px; }
.foot-line { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 24px; font-size: 14px; }
.foot-line .what { color: var(--muted); }
.foot-line ul { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }
.foot-line .year { justify-self: end; color: var(--muted); }

/* ---------- Project page ---------- */
.p-head { padding-top: clamp(32px, 6svh, 72px); }
.p-head h1 { margin-bottom: 18px; }
.p-head .line, .p-side .line { font-size: var(--step-lead); line-height: 1.4; max-width: 34ch; }
.p-side h1 { margin-bottom: 18px; }
.statement { font-size: var(--step-lead); line-height: 1.45; max-width: 36ch; }
.details { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; font-size: 15px; }
.details dt { color: var(--muted); font-size: var(--step-small); }
.details dd { margin-top: 2px; }

/* the film: its own shape, a dark fill while it loads, and three plain controls under it */
.p-film { min-width: 0; }
.p-film .film { display: block; width: 100%; height: auto; aspect-ratio: var(--fr); object-fit: cover; background: #0b0a09; cursor: pointer; }
/* full screen shows the whole film in its own shape (a 4:5 film gets bars at the sides, never a crop) */
.p-film .film:fullscreen { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; background: #000; }
.p-film .film:-webkit-full-screen { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; background: #000; }
/* opening a project page: hidden for a moment until it sits at the top, then a short fade */
html.opening body { opacity: 0; }
body { transition: opacity 220ms ease; }
.film-box { position: relative; }

/* vertical, square and upright films: text beside the film */
.p-vertical .p-main { padding-top: 0; align-items: start; }
.p-vertical .p-side { grid-column: 1 / 6; display: flex; flex-direction: column; gap: 36px; padding-top: clamp(32px, 6svh, 72px); }
.p-vertical .p-films { grid-column: 7 / -1; justify-self: end; width: min(100%, calc((100svh - 150px) * var(--ratio))); }
/* M Design: two upright films side by side */
.p-pair .p-films { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); width: min(100%, calc((100svh - 176px) * var(--ratio) * 2 + var(--gutter))); }
/* 11 Nov (stage 5): on desktop the upright films get the same split as the wide ones: the words fill the
   space up to the film, the title level with its top and the details level with its bottom; on very wide
   screens the pair is centred instead of leaving a gap in the middle */
@media (min-width: 1101px) {
  .p-vertical .p-main {
    --film-w: calc((100svh - var(--nav-h) - 72px) * var(--ratio)); --side-min: 380px; --side-max: 560px; --side-gap: clamp(40px, 4vw, 80px);
    grid-template-columns: minmax(0, 1fr) min(var(--film-w), calc(100% - var(--side-min) - var(--side-gap)));
    column-gap: var(--side-gap); align-items: stretch; padding-top: clamp(24px, 4svh, 40px);
    max-width: calc(var(--side-max) + var(--side-gap) + var(--film-w) + 2 * var(--margin)); margin-inline: auto;
  }
  .p-vertical .p-pair { --film-w: calc((100svh - var(--nav-h) - 110px) * var(--ratio) * 2 + var(--gutter)); }
  .p-vertical .p-side { grid-column: 1; padding-top: 0; gap: 28px; }
  .p-vertical .p-pair .p-side { padding-bottom: 34px; /* the films' names under them */ }
  .p-vertical .p-side > .details { margin-top: auto; gap: 12px; }
  .p-vertical .p-side .line, .p-vertical .statement { max-width: none; }
  .p-vertical .p-films { grid-column: 2; width: 100%; justify-self: stretch; }
}

/* wide films: the title on top, then the words beside the film; the film and its buttons fit the first screen */
/* 11 Nov (stage 5), layout B: the title row on top; the words fill whatever the film leaves, starting level with
   the film's top and ending level with its bottom. On very wide screens the whole block is centred instead of
   leaving a gap between the words and the film. */
.p-wide { --film-w: calc((100svh - var(--nav-h) - 140px) * 16 / 9); --side-max: 560px; --side-min: 380px; --side-gap: clamp(40px, 4vw, 80px); }
.p-wide .p-wide-box { max-width: calc(var(--side-max) + var(--side-gap) + var(--film-w)); margin-inline: auto; }
.p-wide .p-main { grid-template-columns: minmax(0, 1fr) min(var(--film-w), calc(100% - var(--side-min) - var(--side-gap))); column-gap: var(--side-gap); padding-top: clamp(24px, 4svh, 40px); align-items: stretch; }
.p-wide .p-side { grid-column: 1; display: flex; flex-direction: column; gap: 28px; }
.p-wide .p-side > .details { margin-top: auto; gap: 12px; } /* title level with the film's top, details level with its bottom */
.p-wide .statement { max-width: none; }
.p-wide .p-films { grid-column: 2; width: 100%; }

.stills { padding-top: var(--section); }
.stills h2 { margin-bottom: clamp(32px, 5svh, 56px); }
.stills-grid { display: grid; gap: var(--gutter); }
.stills-grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stills-grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stills-grid.lead img:first-child { grid-column: 1 / -1; }
.stills-grid img { width: 100%; aspect-ratio: var(--sar); object-fit: cover; background: var(--surface); } /* a soft fill while a still loads */

.next { padding-top: var(--section); }
.next .nn h2 { margin-bottom: 4px; color: var(--muted); }
.next-link { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; text-decoration: none; }
.next-link .nn { grid-column: 1 / 8; display: flex; flex-direction: column; gap: 14px; }
.next-link .nn .line { font-size: var(--step-body); color: var(--muted); }
.next-link .nn .go { font-size: var(--step-body); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.next-frame { grid-column: 10 / -1; display: block; overflow: hidden; background: #0b0a09; }
.next-frame .loop { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 400ms cubic-bezier(.2,.7,.2,1); }
.next-link:hover .loop { transform: scale(1.03); }
.next-link:hover .display { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 3px; }

/* project pages open with their title, then the film, in about a second */
.js .p-title > *, .js .p-side > :not(.p-title), .js .p-films { animation: rise 720ms cubic-bezier(.2,.7,.2,1) both; }
.js .p-title > :nth-child(2) { animation-delay: 70ms; }
.js .p-films { animation-delay: 140ms; }
.js .p-side > .statement { animation-delay: 210ms; }
.js .p-side > .details { animation-delay: 280ms; }

/* ---------- Entrance: content is visible at rest; it rises once as it enters ---------- */
.js .rise.in > * { animation: rise 720ms cubic-bezier(.2,.7,.2,1) both; }
.js .rise.in > *:nth-child(2) { animation-delay: 80ms; }
.js .rise.in > *:nth-child(3) { animation-delay: 160ms; }
.js .rise.in > *:nth-child(4) { animation-delay: 240ms; }
.js .rise.in > *:nth-child(5) { animation-delay: 320ms; }
.js .rise.in > *:nth-child(n+6) { animation-delay: 400ms; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
/* a block inside a block that already faded in only lifts, so nothing blinks out a second time */
.js .rise .rise.in > * { animation-name: lift; }
@keyframes lift { from { transform: translateY(24px); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js .rise.in > *, .js .rise .rise.in > * { animation: none; }
  .stage-frame .loop, .next-frame .loop { transition: none; transform: none; }
  .js .p-title > *, .js .p-side > :not(.p-title), .js .p-films { animation: none; }
  .js .reel-item, .js .reel-item.on, .js .reel-item .reel-body > * { transition: none; transform: none; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .stage { width: 100%; max-width: calc((100svh - var(--nav-h) - 64px) * 0.75); }
  .display { font-stretch: 110%; }
  .p-wide .statement { grid-column: 1 / 8; }
  .p-wide .details { grid-column: 9 / -1; }
  /* wide films at this size: the film across the page, the words under it */
  .p-wide .p-wide-box { max-width: none; }
  .p-wide .p-main { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .p-wide .p-side { display: contents; }
  .p-wide .p-title { grid-column: 1 / -1; grid-row: 1; padding-top: clamp(8px, 2svh, 32px); }
  .p-wide .p-films { grid-column: 1 / -1; grid-row: 2; width: 100%; margin-top: clamp(32px, 5svh, 56px); }
  .p-wide .p-side > .statement { grid-column: 1 / 8; grid-row: 3; margin-top: clamp(48px, 8svh, 96px); }
  .p-wide .p-side > .details { grid-column: 9 / -1; grid-row: 3; margin-top: clamp(48px, 8svh, 96px); }
  /* two upright films need the whole width: the title, then the films, then the words under them */
  .p-pair .p-side { display: contents; }
  .p-pair .p-title { grid-column: 1 / -1; grid-row: 1; padding-top: clamp(32px, 6svh, 72px); }
  .p-pair .p-films { grid-column: 1 / -1; grid-row: 2; justify-self: center; margin-top: clamp(32px, 5svh, 56px); width: min(100%, calc((100svh - 176px) * var(--ratio) * 2 + var(--gutter))); }
  .p-pair .p-side > .statement { grid-column: 1 / 8; grid-row: 3; margin-top: clamp(48px, 8svh, 96px); }
  .p-pair .p-side > .details { grid-column: 9 / -1; grid-row: 3; margin-top: clamp(48px, 8svh, 96px); }
}

/* ---------- Portrait screens (tablet held upright, a narrow tall window) ----------
   A pinned 3:4 frame needs a wide screen to fill its height. On a portrait screen it would be
   held small by its column and leave an empty band, so the work flows instead: each project
   is its frame with its text beside it, one after another. */
@media (min-width: 761px) and (orientation: portrait) {
  .showcase { padding-top: 0; padding-bottom: 0; }
  .showcase-text { width: 100%; }
  .stage-col { display: none; }
  .work { padding-top: var(--section); }
  .js .reel, .js .reel-pin { height: auto; position: static; }
  .reel-pin { display: flex; flex-direction: column; gap: clamp(64px, 9vw, 112px); }
  .js .reel-item, .reel-item {
    position: static; opacity: 1; visibility: visible; transition: none; min-height: 0; padding: 0;
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center;
  }
  .js .reel-item .reel-body > * { transform: none; transition: none; }
  .row-img { display: block; grid-column: 1 / 7; }
  .reel-body { grid-column: 8 / -1; }
  .reel-nav { display: none; }
}

/* ---------- Phone: its own composition ---------- */
@media (max-width: 760px) {
  :root { --nav-h: 60px; --section: 96px; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .grid > * { grid-column: 1 / -1 !important; }
  .nav { font-size: 14px; }
  .nav ul { gap: 18px; }
  .nav .hide-s { display: none; }
  .display { font-size: clamp(22px, 6.4vw, 32px); font-stretch: 115%; }

  .showcase { padding-top: 0; padding-bottom: 0; }
  .showcase-text { width: 100%; }
  .stage-col { display: none; }
  .hero .display { font-size: 26px; font-stretch: 112%; }
  .hero-copy { row-gap: 20px; }
  .hero-row { gap: 26px; }
  .hero-mid p { text-wrap: balance; }
  /* Phones: the 4:5 edit is shown whole, edge to edge. Its lower part fades into the dark field
     and the words sit across that fade, so they overlap the film without covering the shot. */
  .hero { min-height: 0; display: block; }
  .hero-film { position: relative; inset: auto; z-index: auto; aspect-ratio: 4 / 5; }
  .hero-film::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 42%; background: linear-gradient(to bottom, rgba(20, 18, 16, 0), rgba(20, 18, 16, 0.55) 45%, var(--field)); pointer-events: none; } /* taste-skill-ignore */
  .hero-shade { bottom: auto; height: 160px; background: linear-gradient(to bottom, rgba(11, 10, 9, 0.5), rgba(11, 10, 9, 0)); } /* taste-skill-ignore */
  .hero-mid { position: relative; margin-top: -24vw; padding-block: 0 56px; }
  .closing-actions { width: 100%; flex-direction: column; }
  .closing .btn { width: 100%; }
  .work { padding-top: 72px; }
  .js .reel, .js .reel-pin { height: auto; position: static; }
  .js .reel-item, .reel-item { position: static; opacity: 1; visibility: visible; transition: none; min-height: 0; padding: 0 0 64px; gap: 0; }
  .js .reel-item .reel-body > * { transform: none; transition: none; }
  .row-img { display: block; margin-bottom: 20px; }
  .reel-body { gap: 24px; }
  .reel-id { gap: 8px; }
  .reel-nav { display: none; }

  .steps li { grid-template-columns: minmax(0, 1fr); }
  .steps h3, .steps p { grid-column: 1; }
  .steps p { grid-row: auto; margin-top: 10px; }
  .about-photo, .about-text, .closing-text, .closing-photo { grid-column: 1 / -1; }
  .closing-photo { width: 100%; grid-row: 1; }
  .foot-line { grid-template-columns: minmax(0, 1fr); gap: 8px; font-size: 15px; }
  .foot-line ul { justify-content: flex-start; }
  .foot-line .year { justify-self: start; }

  .p-vertical .p-side { padding-top: 28px; gap: 32px; grid-row: 2; }
  .p-vertical .p-films { grid-row: 1; width: 100%; margin-top: 8px; }
  .p-pair .p-title, .p-pair .p-side > .statement, .p-pair .p-side > .details { grid-column: 1 / -1; }
  .p-pair .p-title { padding-top: 28px; }
  .p-pair .p-films { grid-row: 2; display: flex; flex-direction: column; gap: 40px; width: 100%; margin-top: 32px; }
  .p-pair .p-side > .statement { grid-row: 3; margin-top: 36px; }
  .p-pair .p-side > .details { grid-row: 4; margin-top: 32px; }
  .p-wide .p-title, .p-wide .p-side > .statement, .p-wide .p-side > .details { grid-column: 1 / -1; }
  .p-wide .p-title { padding-top: 28px; }
  .p-wide .p-films { margin-top: 32px; }
  .p-wide .p-side > .statement { grid-row: 3; margin-top: 36px; }
  .p-wide .p-side > .details { grid-row: 4; margin-top: 32px; }
  .br-wide { display: none; }
  .stills-grid { gap: 10px; }
  .stills-grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stills-grid.c2 { grid-template-columns: minmax(0, 1fr); }
  .next-link { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .next-link .nn, .next-frame { grid-column: 1; }
  .next-frame { grid-row: 1; }
}