/*
 * SR&Co. studio site.
 * Same brand system as the print store (ink, logo gold, skewed gold bar),
 * set on warm paper so white-ground artwork reads as a printed plate.
 * Hanken Grotesk is the text face: a quiet grotesque, so the wide geometric letters of the
 * logo stay the logo's own. Headings are set semibold (600), not bold, for the same reason.
 * Instrument Serif italic is the one accent face: emphasis, numerals, pull quotes.
 */

@font-face {
  font-family: "Hanken Grotesk";
  src: url(/fonts/hanken-grotesk-var.woff2) format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url(/fonts/instrument-serif-italic.woff2) format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

:root {
  --paper: #f7f4ee;
  --paper-deep: #efeae1;
  --rail-paper: #fdfcfa;
  --plate: #ffffff;
  --ink: #231f20;
  --ink-2: #57504b;
  --ink-3: #7d756e;
  --line: rgb(35 31 32 / 0.14);
  --gold: #ab844e;
  --gold-ink: #86653a;
  --error: #a3312b;
  --night: #171415;
  --night-text: #f3efe8;
  --night-2: #aaa39b;
  --night-line: rgb(243 239 232 / 0.16);

  --sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;

  --rail: 0rem;
  --top: 4.5rem;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section: clamp(4.5rem, 11vw, 9.5rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-padding-top: calc(var(--top) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding-left: var(--rail);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

h1,
h2,
h3,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3 {
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

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

.skip {
  position: fixed;
  left: 1rem;
  top: 0.75rem;
  z-index: 50;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-200%);
}

.skip:focus {
  transform: none;
}

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

.wrap {
  width: 100%;
  max-width: 96rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section);
}

/* ---------- Brand rail (desktop) ---------- */

.rail {
  display: none;
}

.rail-window {
  display: none;
}

@media (min-width: 900px) {
  :root {
    --rail: 5rem;
    /* No top bar on a wide screen: the menu button sits in the rail, above the logo. */
    --top: 0rem;
  }

  /* The rail has no strip and no line: its pieces sit straight on the page. They stand in
     the same places, at the same sizes, as on the print store, so nothing shifts when a
     visitor crosses from one site to the other. */
  .rail {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    display: block;
    width: var(--rail);
  }

  .rail-logo {
    position: absolute;
    top: 5.5rem;
    left: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 9.25rem;
  }

  .rail-logo img {
    width: auto;
    max-width: none;
    height: 2rem;
    transform: rotate(-90deg);
  }

  /* Half-way between the logo and the tab, on the logo's centre line. */
  .rail-note {
    position: absolute;
    top: calc(50% + 2.5rem);
    left: 3.25rem;
    translate: -50% -50%;
    rotate: 180deg;
    writing-mode: vertical-rl;
    text-orientation: sideways;
    color: var(--ink-3);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .rail-talk {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 8.25rem;
    rotate: 180deg;
    writing-mode: vertical-rl;
    text-orientation: sideways;
    border-radius: 0.75rem;
    background: var(--ink);
    color: var(--paper);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 180ms var(--ease);
  }

  .rail-talk:hover {
    background: var(--gold-ink);
  }

  /* Too short a window to fit all three: the note gives way. */
  @media (max-height: 34rem) {
    .rail-note {
      display: none;
    }
  }

  /* Dark sections run on under the rail, to the edge of the window. */
  .reel,
  .night {
    position: relative;
    margin-left: calc(-1 * var(--rail));
    padding-left: var(--rail);
  }

  /* Over a dark section the pieces show in ivory. Each dark section carries its own copy
     of the rail behind a window cut to the section's outline. The copy is fixed to the
     screen like the real rail, so the two always sit one on the other, and the change
     from ink to ivory falls exactly on the section's edge, even half-way up the logo.
     The copy is for the eye only: clicks pass through it to the real pieces beneath. */
  .rail-window {
    position: absolute;
    inset: 0;
    z-index: 32;
    display: block;
    clip-path: inset(0);
    pointer-events: none;
  }

  .rail-on-dark .menu-button {
    position: absolute;
    top: 1.5rem;
    left: 2rem;
    border-color: var(--night-text);
    color: var(--night-text);
  }

  .rail-on-dark .rail-note {
    color: var(--night-2);
  }

  .rail-on-dark .rail-talk {
    background: var(--night-text);
    color: var(--night);
  }

  /* The copy answers when the real piece under it is hovered. */
  body:has(.rail > .rail-talk:hover) .rail-on-dark .rail-talk {
    background: var(--gold);
  }

  @media (hover: hover) {
    body:has(.site-nav .menu-button:hover) .rail-on-dark .menu-button {
      background: var(--night-text);
      color: var(--night);
    }
  }

  /* While the menu is open the rail stands on the drawer's paper, in ink: one sheet. */
  body::before {
    content: "";
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 29;
    width: var(--rail);
    background: var(--paper);
    opacity: 0;
    pointer-events: none;
  }

  html:has(.menu-panel:is(:popover-open, .is-open)) body::before {
    opacity: 1;
  }

  html:has(.menu-panel:is(:popover-open, .is-open)) .rail-window {
    opacity: 0;
    visibility: hidden;
  }

  .top-logo {
    display: none;
  }
}

/* ---------- Top bar ---------- */

/* Button first, then the logo, spaced as in the print store's bar. */
.top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--top);
  padding-inline: 1.5rem;
}

/* The frosted layer lives on a pseudo-element: a backdrop filter on the bar itself
   would make it the containing block for the fixed mobile menu panel. */
.top::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--paper) 93%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.top-logo img {
  width: auto;
  height: 2.25rem;
}

/* On a wide screen the bar is gone and takes no room. What is left of it is the menu
   button, pinned above the logo in the rail. */
@media (min-width: 900px) {
  .top {
    position: static;
    z-index: auto;
    display: block;
    height: 0;
    padding: 0;
  }

  .site-nav {
    position: fixed;
    inset: 1.5rem auto auto 2rem;
    z-index: 31;
  }

  .top::before {
    content: none;
  }

  /* Pages that do not open on a full-window hero keep some air above their first line. */
  main:not(:has(> .stage:first-child)) {
    padding-top: clamp(2.25rem, 4vw, 3.5rem);
  }
}

/* ---------- Menu ---------- */

/* One button opens one panel of links. The panel is a native popover: Escape, a click
   outside it, or the button again closes it. */
/* The button carries no word, only two bars. It is drawn like the site's outlined
   buttons, with the corners of the "Let's talk" tab at the foot of the rail. */
.menu-button {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 0.7rem;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}

.site-nav:has(.menu-panel:is(:popover-open, .is-open)) .menu-button {
  background: var(--ink);
  color: var(--paper);
}

@media (hover: hover) {
  .menu-button:hover {
    background: var(--ink);
    color: var(--paper);
  }
}

.menu-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
}

/* Two bars that cross into an × while the menu is open. */
.menu-icon i {
  position: absolute;
  width: 1.1rem;
  height: 2px;
  background: currentColor;
  transition: translate 300ms var(--ease), rotate 300ms var(--ease);
}

.menu-icon i:first-child { translate: 0 -0.22rem; }
.menu-icon i:last-child { translate: 0 0.22rem; }

.site-nav:has(.menu-panel:is(:popover-open, .is-open)) .menu-icon i:first-child {
  translate: 0;
  rotate: 45deg;
}

.site-nav:has(.menu-panel:is(:popover-open, .is-open)) .menu-icon i:last-child {
  translate: 0;
  rotate: -45deg;
}

.menu-panel {
  position: fixed;
  inset: var(--top) 0 0 0;
  flex-direction: column;
  gap: 2.5rem;
  justify-content: space-between;
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 2rem var(--gutter) 2.5rem;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  overflow: auto;
  overscroll-behavior: contain;
}

.menu-panel:not(:is(:popover-open, .is-open)) {
  display: none;
}

.menu-panel:is(:popover-open, .is-open) {
  display: flex;
}

.menu-panel::backdrop {
  background: transparent;
}

.menu-panel li a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.45rem;
  font-size: clamp(2.4rem, 11vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -0.034em;
  line-height: 1.05;
  text-decoration: none;
  transition: color 180ms var(--ease), translate 320ms var(--ease);
}

.menu-panel li a:hover {
  translate: 0.5rem 0;
}

.menu-panel li a:hover,
.menu-panel li a[aria-current="page"] {
  color: var(--gold-ink);
}

.menu-panel li em {
  flex: none;
  width: 1.75rem;
  color: var(--gold-ink);
  font-size: 1.1rem;
}

.menu-panel .arrow {
  color: var(--gold-ink);
  font-size: 0.42em;
  letter-spacing: 0;
}

.menu-panel p {
  line-height: 1.9;
}

.menu-panel p a {
  font-weight: 700;
  text-decoration-color: var(--gold);
  text-underline-offset: 0.25em;
}

/* Under the top bar the menu fills the screen, so the page behind it holds still. */
@media (max-width: 899px) {
  html:has(.menu-panel:is(:popover-open, .is-open)) {
    overflow: hidden;
  }
}

/* Beside the rail the menu is a drawer, and the page behind it dims. */
@media (min-width: 900px) {
  /* The print store's size for the button in the rail. */
  .menu-button {
    width: 2.5rem;
    height: 2.5rem;
  }

  .menu-panel {
    inset: 0 auto 0 var(--rail);
    width: min(34rem, 100vw - var(--rail));
    padding: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3.5rem);
    border-right: 1px solid var(--line);
  }

  /* The rail stays clear, so the button that closes the menu is still in plain view. */
  .menu-panel::backdrop {
    left: var(--rail, 5rem);
    background: rgb(23 20 21 / 0.4);
    /* The page behind goes softly out of focus, so the list of links is all that reads. */
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
  }
}

/* The panel wipes open from the edge it hangs on: down from the bar, or out from the rail. */
@media (prefers-reduced-motion: no-preference) {
  .menu-panel,
  .menu-panel::backdrop {
    transition:
      clip-path 480ms var(--ease),
      opacity 320ms var(--ease),
      display 480ms allow-discrete,
      overlay 480ms allow-discrete;
  }

  .menu-panel {
    clip-path: inset(0 0 100% 0);
  }

  .menu-panel::backdrop {
    opacity: 0;
  }

  .menu-panel:popover-open {
    clip-path: inset(0);
  }

  .menu-panel:popover-open::backdrop {
    opacity: 1;
  }

  @starting-style {
    .menu-panel:popover-open {
      clip-path: inset(0 0 100% 0);
    }

    .menu-panel:popover-open::backdrop {
      opacity: 0;
    }
  }

  @media (min-width: 900px) {
    .menu-panel {
      clip-path: inset(0 100% 0 0);
    }

    @starting-style {
      .menu-panel:popover-open {
        clip-path: inset(0 100% 0 0);
      }
    }

    body::before {
      transition: opacity 320ms var(--ease);
    }

    .rail-window {
      transition: opacity 320ms var(--ease), visibility 320ms;
    }
  }
}

/* ---------- Shared pieces ---------- */

.kicker {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--gold-ink);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.kicker::before {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 0.3rem;
  background: var(--gold);
  transform: skewX(38deg);
}

.night .kicker {
  color: var(--gold);
}

.display {
  font-size: clamp(2.3rem, 6.2vw, 5.5rem);
  letter-spacing: -0.038em;
  line-height: 0.96;
}

.display em {
  font-size: 1.12em;
  line-height: 0.8;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 3.25rem;
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--ink);
  border-radius: 0.875rem;
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}

.btn:hover {
  background: #3a3536;
  border-color: #3a3536;
}

.btn .arrow {
  transition: transform 260ms var(--ease);
}

.btn:hover .arrow {
  transform: translateX(0.25rem);
}

.btn-line {
  background: transparent;
  color: var(--ink);
}

.btn-line:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* Process inks: the mark that points to the print store. */
.inks {
  display: flex;
  padding-left: 0.35rem;
}

.inks i {
  width: 1.15rem;
  height: 1.15rem;
  margin-left: -0.35rem;
  border-radius: 50%;
  mix-blend-mode: multiply;
}

.inks i:nth-child(1) { background: #00a7e1; }
.inks i:nth-child(2) { background: #e6007e; }
.inks i:nth-child(3) { background: #ffe500; }
.inks i:nth-child(4) { background: var(--ink); }

/* A plate is a piece of work shown as a mounted print: white mat, fine edge, soft shadow. */
.plate {
  --mat: clamp(0.4rem, 0.85vw, 0.75rem);
  position: relative;
  padding: var(--mat);
  border: 1px solid rgb(35 31 32 / 0.13);
  background: var(--plate);
  box-shadow:
    0 1px 1px rgb(35 31 32 / 0.05),
    0 16px 28px -20px rgb(35 31 32 / 0.34);
  transition: transform 420ms var(--ease), border-color 220ms var(--ease);
}

/* The deeper shadow is its own layer, so a hover only animates opacity and transform. */
.plate::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: 0 36px 48px -28px rgb(35 31 32 / 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms var(--ease);
}

.plate img {
  width: 100%;
}

/* Linked plates lift off the wall and pick up a gold edge. */
a:focus-visible .plate {
  border-color: var(--gold);
  transform: translateY(-0.4rem);
}

a:focus-visible .plate::after {
  opacity: 1;
}

@media (hover: hover) {
  a:hover .plate {
    border-color: var(--gold);
    transform: translateY(-0.4rem);
  }

  a:hover .plate::after {
    opacity: 1;
  }
}

.cap {
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 0.9rem;
  align-items: baseline;
  padding-top: 0.95rem;
}

.cap .num {
  color: var(--gold-ink);
  font-family: var(--serif);
  font-size: 1.35rem;
  font-style: italic;
  line-height: 1;
}

.cap h2,
.cap h3 {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  letter-spacing: -0.022em;
  line-height: 1.15;
}

.cap .go {
  font-size: 1.1rem;
  opacity: 0;
  transform: translateX(-0.4rem);
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}

a:hover .cap .go,
a:focus-visible .cap .go {
  opacity: 1;
  transform: none;
}

.cap .tags {
  grid-column: 2 / -1;
  margin-top: 0.3rem;
  color: var(--ink-3);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tile a {
  display: block;
  text-decoration: none;
}

/* ---------- Home: hero ---------- */

/* A "stage" is a hero exactly as tall as the browser window under the top bar. */

.stage {
  /* The lean of the bar under the ampersand in the logo. */
  --angle: 9deg;
  position: relative;
  display: grid;
  /* The small viewport height: the hero fits the window even while a phone's toolbars show. */
  min-height: calc(100svh - var(--top));
  overflow: clip;
}

.stage-title {
  letter-spacing: -0.045em;
  line-height: 0.9;
}

.stage-title em {
  font-size: 1.1em;
  letter-spacing: -0.03em;
  line-height: 0.7;
}

.stage-title .word {
  display: inline-block;
}

.stage .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Previous, count, next, pause. */
.show-controls {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.show-controls[hidden],
.show-pause[hidden] {
  display: none;
}

/* Previous and next are the same plain arrow as every other link: gold, and a short slide on hover. */
.show-controls button:not(.show-pause) {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.show-controls .arrow {
  display: inline-block;
  color: var(--gold-ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  transition: transform 260ms var(--ease);
}

.show-controls button[data-prev]:hover .arrow,
.show-controls button[data-prev]:focus-visible .arrow {
  transform: translateX(-0.25rem);
}

.show-controls button[data-next]:hover .arrow,
.show-controls button[data-next]:focus-visible .arrow {
  transform: translateX(0.25rem);
}

.show-pause {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gold-ink);
  font: inherit;
  cursor: pointer;
}

.show-count {
  min-width: 4.6rem;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-style: italic;
  text-align: center;
}

.show-pause svg {
  width: 0.85rem;
  height: 0.85rem;
  fill: currentColor;
  transition: transform 260ms var(--ease);
}

.show-pause:hover svg,
.show-pause:focus-visible svg {
  transform: scale(1.12);
}

.show-pause .play,
.is-paused .show-pause .pause {
  display: none;
}

.is-paused .show-pause .play {
  display: block;
}

/* Nothing moves by itself for visitors who prefer reduced motion, so there is nothing to pause. */
@media (prefers-reduced-motion: reduce) {
  .stage .show-pause {
    display: none;
  }
}

/* The gold line on the open project. While the show runs it fills up, then the next one opens. */
.timer {
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--gold);
  pointer-events: none;
  scale: 0 1;
  transform-origin: left;
}

.is-active > .timer {
  scale: 1 1;
}

@media (prefers-reduced-motion: no-preference) {
  .is-auto:not(.is-paused) .is-active > .timer {
    animation: show-timer var(--pace, 6s) linear both;
  }

  /* Reading a project holds the show on it. */
  [data-show]:has([data-item]:hover) .timer,
  [data-show]:has([data-item] a:focus-visible) .timer {
    animation-play-state: paused;
  }

  .stage-title .word {
    animation: word-in 900ms var(--ease) both;
    animation-delay: calc(var(--w) * 70ms + 80ms);
  }
}

@keyframes show-timer {
  from { scale: 0 1; }
}

@keyframes word-in {
  from {
    opacity: 0;
    translate: 0 0.45em;
  }
}

/* Reel: one project at a time on a dark stage. The photo fades in from the left. */

.reel {
  grid-template-rows: minmax(0, 1fr) auto;
  background: var(--night);
  color: var(--night-text);
}

.reel .kicker {
  color: var(--gold);
}

.reel-lede {
  max-width: 24rem;
  color: var(--night-2);
  font-size: clamp(0.95rem, 1.2vw, 1.08rem);
}

.reel .btn {
  border-color: var(--night-text);
  background: var(--night-text);
  color: var(--night);
}

.reel .btn:hover {
  border-color: #fff;
  background: #fff;
}

.reel .btn-line {
  background: transparent;
  color: var(--night-text);
}

.reel .btn-line:hover {
  background: var(--night-text);
  color: var(--night);
}

.reel .show-controls .arrow {
  color: var(--gold);
}

.reel .show-controls .show-pause {
  color: var(--gold);
}

.reel-shots {
  position: absolute;
  inset: 0;
}

.reel-shot {
  position: absolute;
  inset: 0;
  opacity: 0;
}

/* The picture that was showing stays underneath while the next one wipes in over it. */
.reel-shot.is-active,
.reel-shot.was-active {
  opacity: 1;
}

.reel-shot.is-active {
  z-index: 1;
}

.reel-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--at-small, var(--at, 50% 50%));
}

.reel-shots::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top, var(--night) 6%, rgb(23 20 21 / 0.9) 44%, rgb(23 20 21 / 0.5) 62%, rgb(23 20 21 / 0.1) 86%);
}

.reel .kicker {
  display: none;
}

.reel-copy {
  position: relative;
  z-index: 3;
  display: grid;
  gap: clamp(1rem, 1.8vw, 1.5rem);
  align-self: end;
  justify-items: start;
  padding: 5rem var(--gutter) 1.5rem;
}

.reel .stage-title {
  max-width: 9.5ch;
  font-size: clamp(2.8rem, min(5.7vw, 10.5svh), 6.2rem);
}

.reel-index {
  position: relative;
  z-index: 3;
  display: flex;
  gap: 0.5rem;
  padding: 0 var(--gutter) 1.25rem;
}

.reel-index li {
  position: relative;
  flex: 0 0 2.4rem;
  min-width: 0;
}

.reel-index li.is-active {
  flex: 1 1 auto;
}

.reel-index li::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: rgb(243 239 232 / 0.28);
}

.reel-index .timer {
  inset: 0 0 auto;
}

.reel-index a {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  min-height: 2.75rem;
  padding-top: 0.85rem;
  color: rgb(243 239 232 / 0.75);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.35;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 300ms var(--ease);
}

.reel-index .num {
  color: var(--gold);
  font-size: 1.05rem;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
}

.reel-index .is-active a,
.reel-index a:hover {
  color: #fff;
}

.reel-index li:not(.is-active) .reel-name,
.reel-index li:not(.is-active) .go {
  display: none;
}

.reel-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reel .show-controls {
  position: absolute;
  z-index: 3;
  top: 0.75rem;
  right: var(--gutter);
}

.reel .show-controls > :not(.show-pause) {
  display: none;
}

.reel .show-pause {
  color: var(--gold);
}

/* Over a photograph the mark needs a little weight, without bringing the circle back. */
.reel .show-pause svg {
  width: 1.05rem;
  height: 1.05rem;
  filter: drop-shadow(0 1px 2px rgb(23 20 21 / 0.85));
}

@media (min-width: 900px) {
  .reel {
    grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  }

  /* The picture takes the right of the stage and dissolves into the dark side. */
  /* The stage also runs under the rail, so the inset is measured from the rail's edge. */
  .reel-shots {
    inset: 0 0 0 calc(var(--rail) + (100% - var(--rail)) * 0.3);
    /* Same wide fade as before, leaned 9° with the logo bar.
       The clear stop runs past the top of the box edge. An angled gradient
       is already partly open there, and that step reads as a hard line. */
    -webkit-mask-image: linear-gradient(
      calc(90deg - var(--angle)),
      transparent 0,
      transparent 18svh,
      #000 calc(18svh + 42%)
    );
    mask-image: linear-gradient(
      calc(90deg - var(--angle)),
      transparent 0,
      transparent 18svh,
      #000 calc(18svh + 42%)
    );
  }

  .reel-shot img {
    object-position: var(--at, 50% 50%);
  }

  .reel-shots::after {
    inset: 58% 0 0;
    background: linear-gradient(to top, rgb(23 20 21 / 0.86), rgb(23 20 21 / 0));
  }

  .reel .kicker {
    display: flex;
  }

  .reel-copy {
    grid-area: 1 / 1;
    align-self: center;
    padding: 2rem 0 2rem var(--gutter);
  }

  .reel .show-controls {
    position: relative;
    top: auto;
    right: auto;
    grid-area: 2 / 1;
    align-self: end;
    padding: 0 0 clamp(1rem, 2.2vw, 1.75rem) var(--gutter);
  }

  .reel .show-controls > button:not(.show-pause) {
    display: inline-flex;
  }

  .reel .show-controls > .show-count {
    display: block;
  }

  .reel .show-pause {
    color: var(--gold);
  }

  .reel .show-pause svg {
    width: 0.85rem;
    height: 0.85rem;
    filter: none;
  }

  .reel-index {
    display: grid;
    grid-area: 2 / 2;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(0.75rem, 1.4vw, 1.25rem);
    align-self: end;
    padding: 0 var(--gutter) clamp(1rem, 2.2vw, 1.75rem) clamp(3rem, 7vw, 7rem);
  }

  .reel-index a {
    display: grid;
    gap: 0.35rem;
    align-content: start;
    min-height: 4.6rem;
  }

  .reel-index li:not(.is-active) .reel-name {
    display: block;
  }

  .reel-index .go {
    display: none;
  }

  .reel-name {
    overflow: visible;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .reel-shot.is-active {
    animation: reel-wipe 1200ms var(--ease) both;
  }

  .reel-shot.is-active img,
  .reel-shot.was-active img {
    animation: reel-zoom 9s linear both;
  }
}

/* The next picture fades in. A clip here leaves a hard edge after the fade settles. */
@keyframes reel-wipe {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes reel-zoom {
  from { scale: 1.12; }
}

/* ---------- Dark band: disciplines ---------- */

.night {
  background: var(--night);
  color: var(--night-text);
}

.ticker {
  padding-block: clamp(2.5rem, 6vw, 5rem) 0;
  overflow: clip;
}

.ticker p {
  width: max-content;
  padding-inline: var(--gutter);
  color: transparent;
  font-size: clamp(3.6rem, 13vw, 12rem);
  font-weight: 600;
  letter-spacing: -0.042em;
  line-height: 1;
  white-space: nowrap;
  -webkit-text-stroke: 1px rgb(243 239 232 / 0.5);
}

.ticker p span {
  color: var(--gold);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  -webkit-text-stroke: 0;
}

/* ---------- Services ---------- */

.services {
  padding-block: clamp(3rem, 7vw, 6rem) var(--section);
}

.services-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 3rem;
  align-items: end;
  justify-content: space-between;
}

.services-head p {
  max-width: 21rem;
  color: var(--night-2);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
}

/* Three columns that share one baseline: number, title, lead, description, offerings, link. */
.services-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto auto auto auto;
  margin-top: clamp(2rem, 5vw, 4rem);
  border-block: 1px solid var(--night-line);
}

.service {
  display: grid;
  grid-row: span 6;
  grid-template-rows: auto auto auto auto auto auto;
  grid-template-rows: subgrid;
  align-items: start;
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 2.6vw, 2.75rem);
  border-left: 1px solid var(--night-line);
}

.service:first-child {
  padding-left: 0;
  border-left: 0;
}

.service:last-child {
  padding-right: 0;
}

.service .num {
  color: var(--gold);
  font-family: var(--serif);
  font-size: 1.6rem;
  font-style: italic;
  line-height: 1;
}

.service h3 {
  margin-top: clamp(2rem, 5vw, 4.5rem);
  font-size: clamp(1.6rem, 2.7vw, 2.5rem);
  letter-spacing: -0.034em;
  line-height: 1.04;
}

.service-lead {
  margin-top: 1.15rem;
  font-size: clamp(1.02rem, 1.25vw, 1.15rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.35;
  text-wrap: balance;
}

.service-body {
  margin-top: 0.85rem;
  color: var(--night-2);
}

.service-offers {
  margin-top: 1.15rem;
  color: var(--night-2);
  font-family: var(--serif);
  font-size: 1.08rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.45;
}

.service-link {
  display: inline-flex;
  gap: 0.65rem;
  align-items: center;
  min-height: 2.75rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
}

.service-link .label {
  padding-block: 0.3rem;
  border-bottom: 2px solid var(--gold);
  transition: border-color 180ms var(--ease);
}

.service-link .arrow {
  color: var(--gold);
  font-size: 1rem;
  transition: transform 260ms var(--ease);
}

.service-link:hover .label {
  border-color: currentColor;
}

.service-link:hover .arrow {
  transform: translateX(0.25rem);
}

.service-link[rel]:hover .arrow {
  transform: translate(0.2rem, -0.2rem);
}

/* On the dark band the inks sit as plain dots, with paper standing in for black. */
.night .inks i {
  mix-blend-mode: normal;
}

.night .inks i:nth-child(4) {
  background: var(--night-text);
}

.service-link .inks i {
  width: 0.8rem;
  height: 0.8rem;
  margin-left: -0.25rem;
}

.services-band {
  border-top: 1px solid var(--line);
}

.services.on-paper .services-head p,
.services.on-paper .service-body,
.services.on-paper .service-offers {
  color: var(--ink-2);
}

.services.on-paper .service-lead {
  color: var(--ink);
}

.services.on-paper .services-list,
.services.on-paper .service {
  border-color: var(--line);
}

.services.on-paper .service .num,
.services.on-paper .service-link .arrow {
  color: var(--gold-ink);
}

@media (max-width: 859px) {
  .services-list {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .service,
  .service:first-child,
  .service:last-child {
    display: flex;
    flex-direction: column;
    grid-row: auto;
    padding-inline: 0;
    border-left: 0;
  }

  .service + .service {
    border-top: 1px solid var(--night-line);
  }

  .services.on-paper .service + .service {
    border-color: var(--line);
  }

  .service h3 {
    margin-top: 1.25rem;
  }
}

/* ---------- Testimonials ---------- */

/* One quote at a time on a native scroll-snap track: swipe, keys and the
   numbered markers all work, and the markers double as the rotation timer. */
.voices-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  align-items: center;
  justify-content: space-between;
  min-height: 3rem;
}

.voices-title {
  font-size: clamp(1.5rem, 2.9vw, 2.5rem);
  letter-spacing: -0.034em;
}

.voices-title em {
  font-size: 1.12em;
  line-height: 0.8;
}

/* The quotes sit on the paper, a short step above the footer, on every page. */
.voices-band {
  padding-bottom: clamp(3.5rem, 8vw, 6.5rem);
}

.voices-markers {
  display: flex;
  gap: 0.75rem;
}

.voices-markers[hidden] {
  display: none;
}

.voices-markers button {
  display: grid;
  gap: 0.45rem;
  min-width: 3.25rem;
  padding: 0.55rem 0;
  border: 0;
  background: none;
  color: var(--ink-3);
  font-family: var(--serif);
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: color 180ms var(--ease);
}

.voices-markers button:hover,
.voices-markers button[aria-current="true"] {
  color: var(--ink);
}

.voices-markers i {
  position: relative;
  display: block;
  height: 2px;
  overflow: hidden;
  background: var(--line);
}

.voices-markers i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
}

.voices-markers button[aria-current="true"] i::after {
  transform: scaleX(1);
}

.voices-track {
  display: flex;
  /* The gap keeps the next quote's overhanging italics out of view. */
  gap: var(--gutter);
  align-items: start;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  padding-block: 0.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  touch-action: manipulation;
}

.voices.is-live .voices-track {
  scrollbar-width: none;
}

.voices-track > * {
  flex: 0 0 100%;
  scroll-snap-align: center;
}

@media (prefers-reduced-motion: no-preference) {
  .voices-track {
    scroll-behavior: smooth;
  }

  /* While the rotation runs, the current marker fills up and its end advances the quote. */
  .voices.is-auto .voices-markers button[aria-current="true"] i::after {
    animation: voice-timer 9s linear both;
  }

  .voices.is-auto:hover .voices-markers i::after,
  .voices.is-auto:focus-within .voices-markers i::after {
    animation-play-state: paused;
  }
}

@keyframes voice-timer {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* A quote is set at reading size: an opening mark, the words, then who said them. */
.pull {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(1rem, 2.5vw, 2.25rem);
}

.pull .mark {
  /* The glyph sits at the top of a tall box; the box is cut short so the words start beside it. */
  height: 0.62em;
  color: var(--gold);
  font-family: var(--serif);
  font-size: clamp(3.75rem, 7vw, 6rem);
  font-style: italic;
  line-height: 1;
}

.pull blockquote {
  max-width: 46rem;
}

.pull blockquote p {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.3vw, 2rem);
  font-style: italic;
  letter-spacing: -0.01em;
  line-height: 1.22;
}

.pull footer {
  margin-top: 1.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.pull footer span {
  color: var(--ink-3);
}

@media (max-width: 719px) {
  .pull {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Print store ---------- */

.print {
  padding-block: var(--section);
}

/* A sheet on the press: white stock, crop marks at the corners, ink dots in the slug. */
.print-card {
  --crop: clamp(0.75rem, 2vw, 1.5rem);
  --mark: rgb(35 31 32 / 0.55);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1.75rem, 3vw, 3.25rem);
  padding: clamp(1.5rem, 5vw, 4.5rem);
  border: 1px solid rgb(35 31 32 / 0.13);
  background: var(--plate);
  box-shadow:
    0 1px 1px rgb(35 31 32 / 0.05),
    0 26px 44px -30px rgb(35 31 32 / 0.4);
}

.print-card::before {
  content: "";
  position: absolute;
  inset: calc(var(--crop) * -1);
  pointer-events: none;
  background:
    linear-gradient(var(--mark), var(--mark)) left var(--crop) top 0 / 1px calc(var(--crop) - 0.3rem) no-repeat,
    linear-gradient(var(--mark), var(--mark)) left 0 top var(--crop) / calc(var(--crop) - 0.3rem) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) right var(--crop) top 0 / 1px calc(var(--crop) - 0.3rem) no-repeat,
    linear-gradient(var(--mark), var(--mark)) right 0 top var(--crop) / calc(var(--crop) - 0.3rem) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) left var(--crop) bottom 0 / 1px calc(var(--crop) - 0.3rem) no-repeat,
    linear-gradient(var(--mark), var(--mark)) left 0 bottom var(--crop) / calc(var(--crop) - 0.3rem) 1px no-repeat,
    linear-gradient(var(--mark), var(--mark)) right var(--crop) bottom 0 / 1px calc(var(--crop) - 0.3rem) no-repeat,
    linear-gradient(var(--mark), var(--mark)) right 0 bottom var(--crop) / calc(var(--crop) - 0.3rem) 1px no-repeat;
}

.print-top {
  grid-column: 1 / -1;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.print-card h2 {
  grid-column: 1;
  font-size: clamp(2.6rem, 6.4vw, 6.25rem);
  letter-spacing: -0.045em;
  line-height: 0.88;
}

.print-card h2 em {
  display: block;
  font-size: 1.1em;
  letter-spacing: -0.03em;
}

.print-body {
  grid-column: 2;
  align-self: center;
  max-width: 42rem;
}

.print-body p {
  color: var(--ink-2);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.5;
}

.print-body .print-lead {
  margin-bottom: 0.85rem;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.print-body .btn {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.print-body .btn:hover .arrow {
  transform: translate(0.2rem, -0.2rem);
}

.print-facts {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: 0.45rem clamp(1.25rem, 2.5vw, 2.5rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line);
}

.print-facts li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-row: span 2;
  column-gap: 0.75rem;
  row-gap: 0.4rem;
  grid-template-rows: auto auto;
  grid-template-rows: subgrid;
  align-items: start;
}

.print-facts li > span {
  grid-column: 1;
  grid-row: 1;
  color: var(--gold-ink);
  font-family: var(--serif);
  font-size: 1.45rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
}

.print-facts h3 {
  grid-column: 2;
  grid-row: 1;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.print-facts p {
  grid-column: 2;
  grid-row: 2;
  color: var(--ink-2);
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  font-weight: 500;
  line-height: 1.45;
}

@media (max-width: 859px) {
  .print-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .print-card h2,
  .print-body {
    grid-column: 1 / -1;
  }

  .print-facts {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 1.35rem;
  }

  .print-facts li {
    grid-row: auto;
    grid-template-rows: auto auto;
  }
}

/* ---------- Work index ---------- */

.page-head {
  padding-block: clamp(2.5rem, 7vw, 6rem) clamp(2rem, 5vw, 3.5rem);
}

.page-head h1 {
  margin-top: 1.25rem;
  font-size: clamp(4rem, 17vw, 16rem);
  letter-spacing: -0.05em;
  line-height: 0.8;
}

.page-head h1 em {
  font-size: 1.08em;
  letter-spacing: -0.03em;
}

.page-head .lede {
  max-width: 34rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  color: var(--ink-2);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
}

/* Same title block as the other pages, kept shorter so the wall still starts high on the page. */
.work-head {
  padding-block: clamp(2rem, 5vw, 4rem) clamp(1.75rem, 3.5vw, 2.75rem);
}

.work-head h1 {
  font-size: clamp(3.4rem, 11vw, 10.5rem);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
  margin: 0 0 clamp(2rem, 4vw, 3.5rem);
  padding: 1.25rem 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  position: relative;
}

.filters legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* Pinned to the corner of the group: left to find their own place, the hidden inputs
   landed past the right edge of the window and the page scrolled sideways. */
.filters input {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.filters label {
  display: inline-flex;
  gap: 0.5rem;
  align-items: baseline;
  padding: 0.55rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}

.filters label span {
  color: var(--ink-3);
  font-family: var(--serif);
  font-size: 0.95rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.filters label:hover {
  border-color: var(--ink);
}

.filters input:checked + label {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.filters input:checked + label span {
  color: var(--gold);
}

.filters input:focus-visible + label {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* A staggered wall, two pieces across so each one is shown large:
   rows keep the catalogue order and the right-hand column hangs lower. */
.wall {
  --hang: clamp(3rem, 9vw, 9rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem) var(--gutter);
  align-items: start;
  padding-bottom: var(--section);
}

@media (min-width: 640px) {
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile:nth-child(2n) { margin-top: var(--hang); }
}

.tile .cap h2 {
  font-size: clamp(1.15rem, 1.9vw, 1.65rem);
}

/* A filtered wall hangs straight, because the hidden tiles would break the rhythm. */
.work:has(.filters input:not(#f-all):checked) .tile {
  margin-top: 0;
}

/* ---------- Project ---------- */

.project-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem) var(--gutter);
  align-items: start;
  padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2.5rem, 6vw, 5rem);
}

.project-info {
  grid-column: 1 / span 5;
  position: sticky;
  top: calc(var(--top) + 1.5rem);
}

.project-lead {
  grid-column: 6 / -1;
}

.project-head.is-wide .project-info {
  grid-column: 1 / -1;
  position: static;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}

.project-head.is-wide .project-info > * {
  grid-column: 1 / span 7;
}

.project-head.is-wide .project-info > .crumbs {
  grid-column: 1 / -1;
}

.project-head.is-wide .project-info > .project-facts {
  grid-column: 9 / -1;
  grid-row: 3 / span 3;
  align-self: end;
  margin-top: 0;
}

.project-head.is-wide .project-lead {
  grid-column: 1 / -1;
}

.crumbs {
  display: flex;
  gap: 1.25rem;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.crumbs a {
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--gold-ink);
}

.crumbs .count {
  color: var(--ink-3);
}

.crumbs .count em {
  color: var(--gold-ink);
  font-size: 1.5rem;
  letter-spacing: 0;
  text-transform: none;
}

.project-info h1 {
  margin-top: clamp(1.5rem, 4vw, 3rem);
  font-size: clamp(2.5rem, 5.4vw, 5.25rem);
  letter-spacing: -0.042em;
  line-height: 0.94;
}

.project-info .summary {
  max-width: 34rem;
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  color: var(--ink-2);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
}

.project-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem 1.5rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}

.project-facts dt {
  color: var(--ink-3);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 2;
  text-transform: uppercase;
}

.project-facts dd {
  font-weight: 600;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.25rem, 4vw, 3.5rem) var(--gutter);
  align-items: start;
  padding-bottom: var(--section);
}

.gallery .shot.is-full { grid-column: 1 / -1; }
.gallery .shot.is-left { grid-column: 1 / span 6; }
.gallery .shot.is-right { grid-column: 7 / span 6; margin-top: clamp(2rem, 9vw, 8rem); }
.gallery .shot.is-solo { grid-column: 3 / span 8; }
.gallery .shot.is-solo.alt { grid-column: 5 / span 8; }

/* A project ends by handing over to the next one: a tile from the Our Work wall, laid on its side. */
.project-end {
  margin-bottom: clamp(3rem, 7vw, 6rem);
}

.project-end .crumbs {
  align-items: center;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.next {
  display: grid;
  grid-template-columns: clamp(6.5rem, 18vw, 15rem) minmax(0, 1fr);
  gap: 1rem clamp(1rem, 3.5vw, 3.5rem);
  align-items: center;
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  text-decoration: none;
}

.next .plate {
  --mat: clamp(0.3rem, 0.6vw, 0.55rem);
}

/* Every preview is cropped to the same shape, so the block keeps one height. */
.next .plate img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.next .cap {
  column-gap: clamp(0.6rem, 1.4vw, 1.25rem);
  padding-top: 0;
}

.next .cap .num {
  font-size: clamp(1.4rem, 3vw, 2.6rem);
}

.next .cap h2 {
  font-size: clamp(1.3rem, 3.4vw, 3rem);
  letter-spacing: -0.038em;
  line-height: 1;
  text-wrap: balance;
}

.next .cap .tags {
  margin-top: clamp(0.45rem, 1vw, 0.85rem);
}

/* The caption arrow, as on the wall and in every button, but always showing so touch screens get it too. */
.next .cap .go {
  color: var(--gold-ink);
  font-size: clamp(1.2rem, 2.4vw, 2.1rem);
  opacity: 1;
  transform: none;
  transition: transform 260ms var(--ease);
}

.next:hover .cap .go,
.next:focus-visible .cap .go {
  transform: translateX(0.25rem);
}

@media (max-width: 559px) {
  /* A long list of disciplines would make the block taller than its picture. */
  .next .cap .tags {
    display: none;
  }
}

@media (max-width: 859px) {
  .project-info,
  .project-lead,
  .project-head.is-wide .project-info > *,
  .project-head.is-wide .project-info > .project-facts {
    grid-column: 1 / -1;
    grid-row: auto;
    position: static;
  }

  .project-head.is-wide .project-info > .project-facts {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
  }

  .gallery .shot.is-left,
  .gallery .shot.is-right,
  .gallery .shot.is-solo,
  .gallery .shot.is-solo.alt {
    grid-column: 1 / -1;
    margin-top: 0;
  }
}

/* ---------- About ---------- */

/* Title and copy run down the left; the portrait stays alongside while they scroll. */
.about-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: clamp(2rem, 4vw, 3.25rem);
  align-items: start;
  padding-block: clamp(2rem, 5vw, 4rem) var(--section);
}

.about-title {
  grid-column: 1 / span 7;
}

.about-title h1 {
  margin-top: 1rem;
  font-family: var(--serif);
  font-size: clamp(5.5rem, 20vw, 19rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.74;
}

.about-title .intro {
  max-width: 19ch;
  margin-top: clamp(2rem, 5vw, 4rem);
  font-size: clamp(1.6rem, 3.2vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.about-head .portrait {
  grid-column: 8 / -1;
  grid-row: 1 / span 2;
  position: sticky;
  top: calc(var(--top) + 1.5rem);
}

.about-head .portrait img {
  width: 100%;
  filter: grayscale(1) contrast(1.04);
}

.about-head figcaption {
  margin-top: 0.9rem;
  color: var(--ink-3);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.about-text {
  grid-column: 1 / span 7;
  max-width: 41rem;
  color: var(--ink-2);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.6;
}

.about-text p + p {
  margin-top: 1.3em;
}

.about-text strong {
  color: var(--ink);
  font-weight: 700;
}

.about-text .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

@media (max-width: 859px) {
  .about-title,
  .about-text,
  .about-head .portrait {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .about-head .portrait {
    position: static;
    max-width: 30rem;
  }
}

/* ---------- Contact ---------- */

.contact {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2.5rem, 6vw, 5rem) var(--gutter);
  padding-block: clamp(2rem, 5vw, 4rem) var(--section);
}

.contact .direct {
  grid-column: 1 / span 5;
}

.contact form {
  grid-column: 7 / -1;
}

.direct .lede {
  max-width: 26rem;
  color: var(--ink-2);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
}

.direct dl {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.direct dt {
  margin-top: 1.5rem;
  color: var(--ink-3);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.direct dd a {
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.026em;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.direct dd a:hover {
  color: var(--gold-ink);
}

form label {
  display: block;
  margin-top: 1.75rem;
  color: var(--ink-2);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

form label:first-child {
  margin-top: 0;
}

input,
select,
textarea {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.7rem 0;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
}

textarea {
  min-height: 8.5rem;
  resize: vertical;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 0;
  border-bottom-color: var(--gold);
  box-shadow: 0 2px 0 var(--gold);
}

form .btn {
  margin-top: 2.25rem;
}

.brief-link {
  display: grid;
  gap: 1rem;
  justify-items: start;
  max-width: 26rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-weight: 600;
}

/* ---------- Creative brief ---------- */

.brief-head h1 {
  font-size: clamp(3rem, 9vw, 8.5rem);
  line-height: 0.86;
}

.brief-head .lede {
  max-width: 38rem;
}

.brief-form {
  padding-bottom: var(--section);
}

/* Each part of the brief: its number and title on the left, its questions on the right. */
.part {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.75rem var(--gutter);
  padding-block: clamp(2rem, 4.5vw, 3.5rem);
  border-top: 1px solid var(--line);
}

.part-head {
  grid-column: 1 / span 4;
}

/* On wide screens the part title stays alongside while its questions scroll. */
@media (min-width: 860px) {
  .part-head {
    position: sticky;
    top: calc(var(--top) + 1.5rem);
    align-self: start;
  }
}

.part-head .num {
  display: block;
  color: var(--gold-ink);
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-style: italic;
  line-height: 1;
}

.part-head h2 {
  margin-top: 0.5rem;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  letter-spacing: -0.034em;
  line-height: 1.05;
}

.part-head p {
  max-width: 18rem;
  margin-top: 0.6rem;
  color: var(--ink-2);
}

.part-fields {
  grid-column: 6 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 2.5rem) var(--gutter);
  align-content: start;
}

.field {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.field.half {
  grid-column: span 1;
}

.choices legend {
  padding: 0;
  color: var(--ink-2);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.req {
  color: var(--gold-ink);
  font-size: 1.2em;
  line-height: 1;
}

.hint {
  margin-top: 0.3rem;
  color: var(--ink-2);
  font-size: 0.95rem;
}

.hint a {
  color: var(--ink);
  font-weight: 600;
  text-decoration-color: var(--gold);
  text-underline-offset: 0.2em;
}

/* Choices are pills, like the filters on the Our Work page. The real checkbox or radio stays in place for keyboards and screen readers. */
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.pills input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.pills label {
  display: inline-flex;
  gap: 0.6rem;
  align-items: center;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.5rem 1.1rem;
  border: 1px solid rgb(35 31 32 / 0.32);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}

/* A small box (many) or dot (one) fills with gold when chosen, so the state never rests on colour alone. */
.pills label::before {
  content: "";
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.pills input[type="checkbox"] + label::before {
  border-radius: 0.12rem;
}

.pills label:hover {
  border-color: var(--ink);
}

.pills input:checked + label {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.pills input:checked + label::before {
  border-color: var(--gold);
  background: var(--gold);
}

.pills input:focus-visible + label {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Long answers get a sheet to write on, so the hint above reads as a hint and not as text already typed. */
.brief-form textarea {
  min-height: 7.5rem;
  margin-top: 0.7rem;
  padding: 0.8rem 0.95rem;
  border: 1px solid rgb(35 31 32 / 0.2);
  border-bottom-color: var(--ink);
  background: rgb(255 255 255 / 0.6);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.5;
}

/* A field is only marked wrong after someone has tried it. */
input:user-invalid,
select:user-invalid,
textarea:user-invalid {
  border-bottom-color: var(--error);
  box-shadow: 0 2px 0 var(--error);
}

.brief-send .part-fields {
  grid-column: 6 / -1;
}

.brief-send .btn {
  margin-top: 0;
}

form .btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

.brief-send .hint {
  margin-top: 1.25rem;
}

@media (max-width: 859px) {
  .part-head,
  .part-fields,
  .brief-send .part-fields {
    grid-column: 1 / -1;
  }
}

@media (max-width: 559px) {
  .field.half {
    grid-column: 1 / -1;
  }
}

.notice {
  display: inline-block;
  margin-bottom: 1.5rem;
  padding: 0.6rem 1rem;
  border-left: 3px solid var(--gold);
  background: var(--paper-deep);
  font-weight: 600;
}

@media (max-width: 859px) {
  .contact .direct,
  .contact form {
    grid-column: 1 / -1;
  }
}

/* ---------- Footer ---------- */

.foot {
  padding-block: clamp(3.5rem, 8vw, 7rem) 2rem;
}

.foot-cta {
  display: block;
  margin-top: 1.25rem;
  font-size: clamp(2.75rem, 8.6vw, 8rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.9;
  text-decoration: none;
  transition: color 220ms var(--ease);
}

.foot-cta em {
  font-size: 1.08em;
  letter-spacing: -0.03em;
}

.foot-cta .arrow {
  display: inline-block;
  color: var(--gold);
  font-size: 0.55em;
  transition: transform 320ms var(--ease);
}

.foot-cta:hover {
  color: var(--gold);
}

.foot-cta:hover .arrow {
  transform: translate(0.12em, -0.12em);
}

.legal {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--night-line);
  color: var(--night-2);
  font-size: 0.75rem;
}

.foot.is-quiet {
  padding-block: 1.5rem;
}

.foot.is-quiet .legal {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ---------- Motion (opt-in, compositor only) ---------- */

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 320ms;
  animation-timing-function: var(--ease);
}

::view-transition-group(*) {
  animation-duration: 520ms;
  animation-timing-function: var(--ease);
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rise {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }

    .drift {
      animation: drift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    .ticker p {
      animation: slide linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}

@keyframes rise {
  from {
    opacity: 0;
    translate: 0 2.5rem;
  }
}

@keyframes drift {
  from { translate: 0 2.25rem; }
  to { translate: 0 -2.25rem; }
}

@keyframes slide {
  from { translate: 4% 0; }
  to { translate: -38% 0; }
}