:root {
  --main-blue: #0009cc;
  --blue: var(--main-blue);
  --blue-deep: #03005f;
  --blue-soft: #2b27ff;
  --paper: #fbf8ec;
  --paper-soft: #ebe5d2;
  --mist: #cfccff;
  --gold: #d7bd67;
  --ink: #060018;
  --line: rgba(251, 248, 236, 0.42);
  --paper-line: rgba(0, 9, 204, 0.18);
  --shadow: rgba(2, 0, 54, 0.28);
  --display: Didot, "Bodoni 72", "Bodoni 72 Smallcaps", "Baskerville",
    "Times New Roman", serif;
  --utility: "Courier New", Courier, ui-monospace, monospace;
  --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;

  /* The top line of the page. The menu key and the hero copy are separate
     fixed/absolute elements, so they share a band and each centres inside it
     rather than trying to match baselines across two stacking contexts. */
  --head-top: 5rem;
  --head-band: 2.4rem;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--blue);
  color: var(--paper);
  font-size: 16px;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  background:
    linear-gradient(rgba(251, 248, 236, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(251, 248, 236, 0.04) 1px, transparent 1px),
    var(--blue);
  background-size: 48px 48px, 48px 48px, auto;
  color: var(--paper);
  font-family: var(--body);
  line-height: 1.5;
  letter-spacing: 0;
  overflow-x: hidden;
}

body.menu-open {
  overflow: hidden;
}

body.intro-loading {
  overflow: hidden;
}

.intro-loader {
  --intro-size: clamp(11rem, 28vmin, 20rem);
  align-items: center;
  background: var(--main-blue);
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  inset: 0;
  justify-content: center;
  opacity: 1;
  overflow-y: auto;
  padding: 3rem 6vw;
  pointer-events: auto;
  position: fixed;
  perspective: 900px;
  transition:
    opacity 420ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 420ms cubic-bezier(0.16, 1, 0.3, 1);
  visibility: visible;
  width: 100vw;
  z-index: 200;
}

.intro-loader.is-hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* The wheel yields room when it has a briefing to sit above. */
.intro-loader.has-brief {
  --intro-size: clamp(6.5rem, 15vmin, 10rem);
}

.intro-loader-wheel {
  display: grid;
  flex: none;
  place-items: center;
  transform-style: preserve-3d;
  width: var(--intro-size);
}

/* ==========================================================================
   Intro briefing. The categorisation is taught while the wheel turns, and the
   last card asks a question the visitor has to answer to get in.
   ========================================================================== */

.intro-brief {
  display: grid;
  gap: 1.5rem;
  justify-items: center;
  max-width: min(40rem, 86vw);
  text-align: center;
}

/* The rotating steps and the closing question share one cell, so the question
   lands exactly where the terms were and the block never resizes. */
.intro-slot {
  display: grid;
  place-items: center;
}

.intro-steps,
.intro-question {
  grid-area: 1 / 1;
}

.intro-steps {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
}

.intro-step {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(0.6rem);
  transition: opacity 360ms ease, transform 360ms ease;
}

.intro-step.is-current {
  opacity: 1;
  transform: none;
}

.intro-rule,
.intro-gloss {
  display: block;
  font-family: var(--utility);
  text-transform: uppercase;
}

.intro-rule {
  color: var(--mist);
  font-size: 0.78rem;
  margin-bottom: 0.75rem;
}

.intro-term {
  color: var(--paper);
  display: block;
  font-family: var(--display);
  font-size: clamp(2.6rem, 7vw, 4.2rem);
  line-height: 0.95;
  text-transform: uppercase;
}

.intro-gloss {
  color: var(--mist);
  font-size: 0.75rem;
  margin-top: 0.75rem;
  opacity: 0.82;
}

/* Reduced motion gets the whole rule at once instead of a rotation, so nothing
   shares a cell and everything simply stacks. */
.intro-loader.is-static .intro-slot {
  gap: 1.8rem;
}

.intro-loader.is-static .intro-steps {
  gap: 1.6rem;
}

.intro-loader.is-static .intro-step,
.intro-loader.is-static .intro-steps,
.intro-loader.is-static .intro-question {
  grid-area: auto;
}

/* Type comes from the shared .intro-rule and .intro-term inside it, so the
   question matches a card exactly. */
.intro-question {
  margin: 0;
  opacity: 0;
  transition: opacity 420ms ease;
}

.intro-question.is-current {
  opacity: 1;
}

/* Progress through the briefing: one dot per card, so the visitor can see how
   much is left before they commit to reading it. */
.intro-dots {
  display: flex;
  gap: 0.55rem;
  opacity: 1;
  transition: opacity 380ms ease;
}

.intro-dots.is-spent {
  opacity: 0;
}

.intro-dot {
  background: none;
  border: 1px solid var(--mist);
  border-radius: 50%;
  height: 0.42rem;
  opacity: 0.45;
  transition: background 300ms ease, border-color 300ms ease, opacity 300ms ease;
  width: 0.42rem;
}

.intro-dot.is-done {
  background: var(--mist);
  opacity: 0.55;
}

.intro-dot.is-current {
  background: var(--gold);
  border-color: var(--gold);
  opacity: 1;
}

/* One control carries the whole briefing, relabelled from Next to Yes, so the
   visitor's hand and the keyboard focus never have to move. Bare type
   throughout; the closing key takes a rule under the word as its only mark of
   being the door. */
.intro-key {
  background: none;
  border: 0;
  color: var(--gold);
  cursor: pointer;
  font-family: var(--utility);
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  opacity: 0;
  padding: 0.25rem 0.4rem;
  pointer-events: none;
  text-transform: uppercase;
  transition: color 200ms ease, opacity 320ms ease, visibility 320ms ease;
  visibility: hidden;
}

.intro-key.is-current {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.intro-key.is-final.is-current {
  border-bottom: 1px solid currentColor;
}

.intro-key:hover,
.intro-key:focus-visible {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

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

/* ==========================================================================
   Handover. On Yes, everything but the word PHOKUS is withdrawn and the veil
   clears, while a clone of that word travels to the homepage lockup over two
   seconds. The visitor never sees the word arrive; it was already there.
   ========================================================================== */

.intro-loader.is-merging {
  background: transparent;
  pointer-events: none;
  transition: background 1100ms ease;
}

.intro-loader.is-merging .intro-loader-wheel,
.intro-loader.is-merging .intro-steps,
.intro-loader.is-merging .intro-dots,
.intro-loader.is-merging .intro-key,
.intro-loader.is-merging .intro-question .intro-rule {
  opacity: 0;
  transition: opacity 520ms ease;
}

/* The question mark is dropped in place; the word itself is handed to the
   flying clone, so the original is hidden without a beat of overlap. */
.intro-term-mark {
  transition: opacity 700ms ease;
}

.intro-loader.is-merging .intro-term-mark {
  opacity: 0;
}

.intro-loader.is-merging .intro-term-word {
  opacity: 0;
  transition: none;
}

.brand-flier {
  pointer-events: none;
  position: fixed;
  transform-origin: 0 0;
  transition: transform 2000ms cubic-bezier(0.65, 0, 0.35, 1);
  white-space: nowrap;
  z-index: 220;
}

.intro-loader-image {
  animation:
    astrolabeCoinSpin 3000ms linear infinite,
    astrolabeGlow 3000ms ease-in-out infinite;
  backface-visibility: visible;
  filter: drop-shadow(0 0 1.1rem rgba(251, 248, 236, 0.38));
  transform-origin: center;
  width: 100%;
  will-change: opacity, transform;
}

@keyframes astrolabeCoinSpin {
  from {
    transform: rotateY(0deg);
  }

  to {
    transform: rotateY(360deg);
  }
}

@keyframes astrolabeGlow {
  0%,
  100% {
    opacity: 0.88;
  }

  50% {
    opacity: 1;
  }
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.display {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
}

.utility {
  font-family: var(--utility);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

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

.site-shell {
  max-width: 100%;
  min-height: 100vh;
  overflow: hidden;
  position: relative;
  width: 100%;
}

/* Home is exactly one viewport, and deliberately cannot scroll.
   The reel is not a scroll container: it moves its filmstrip by transform in
   response to a swipe, and its touch listener is passive, so it cannot cancel
   the browser's own scroll. Any document height left over therefore means one
   swipe drives the strip and the page together. Removing the scroll rather
   than fighting for the gesture is what keeps the two from competing.
   svh, not vh, so the reel is not cropped by mobile browser chrome. */
body[data-page="home"] {
  height: 100svh;
  overflow: hidden;
}

body[data-page="home"] .site-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* The reel takes the room the footer does not, so the split adapts on its own
   when the footer restacks on narrow screens. */
body[data-page="home"] main {
  flex: 1;
  min-height: 0;
}

body[data-page="home"] .footer {
  flex: none;
}

/* Elsewhere the footer is a destination reached by scrolling, so it can afford
   its full padding. On home it is permanently on screen and every pixel it
   takes comes out of the reel, where a stacked column would cost roughly a
   third of a small phone. It keeps stacking, since the lines will not fit on
   one row at this width, but loses the generous spacing. */
@media (max-width: 860px) {
  body[data-page="home"] .footer {
    gap: 0.45rem;
    padding-block: 1.2rem;
  }
}

/* The only persistent chrome: a single key floating over the page, so the
   wordmark is never duplicated against the page's own title. */
/* Bare type, no plate and no border, so it reads as part of the top line
   instead of as a floating control. Its label matches the hero prefix size and
   both centre in --head-band, which is what puts them on one line. */
.menu-toggle {
  align-items: center;
  background: none;
  border: 0;
  color: var(--mist);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.84rem;
  gap: 0.6rem;
  height: var(--head-band);
  justify-content: flex-end;
  padding: 0;
  position: fixed;
  right: 7vw;
  text-shadow: 0 1px 10px rgba(6, 0, 24, 0.9), 0 0 3px rgba(6, 0, 24, 0.7);
  text-transform: uppercase;
  top: var(--head-top);
  transition: color 180ms ease, opacity 180ms ease;
  z-index: 90;
}

.menu-toggle:hover {
  color: var(--gold);
}

.menu-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.menu-toggle-rule {
  background: currentColor;
  display: block;
  height: 1px;
  transition: transform 220ms ease;
  width: 1.1rem;
}

/* Stands in for the parked menu key: same slot, same type, same hairline, so a
   project page keeps one route out without reading as new chrome. The hairline
   leads the label here rather than trailing it, which is the only thing marking
   it as a way back rather than a way in. Delete this pair when the menu returns. */
.back-link {
  align-items: center;
  color: var(--mist);
  display: inline-flex;
  font-size: 0.84rem;
  gap: 0.6rem;
  height: var(--head-band);
  position: fixed;
  right: 7vw;
  text-decoration: none;
  text-shadow: 0 1px 10px rgba(6, 0, 24, 0.9), 0 0 3px rgba(6, 0, 24, 0.7);
  top: var(--head-top);
  transition: color 180ms ease;
  z-index: 90;
}

.back-link:hover {
  color: var(--gold);
}

.back-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.back-link-rule {
  background: currentColor;
  display: block;
  height: 1px;
  transition: width 220ms ease;
  width: 1.1rem;
}

.back-link:hover .back-link-rule {
  width: 1.7rem;
}

/* Each hairline answers to its own disclosure, not to the other one's. */
.menu-open [data-menu-toggle] .menu-toggle-rule,
.filter-toggle[aria-expanded="true"] .menu-toggle-rule {
  transform: rotate(90deg);
}

/* ==========================================================================
   Reel filter. Borrows the Menu button wholesale so the two read as one stack
   of controls rather than as two inventions.

   MENU PARKED: the filter normally sits one band lower than the Menu key. With
   that key commented out it takes the top band instead, or it would hang below
   an empty slot. To restore, put the band back on both offsets below:
     .filter-toggle  { top: calc(var(--head-top) + var(--head-band)); }
     .filter-options { top: calc(var(--head-top) + var(--head-band) * 2); }
   ========================================================================== */

.filter-toggle {
  top: var(--head-top);
}

.filter-options {
  display: grid;
  gap: 0.3rem;
  justify-items: end;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  right: 7vw;
  top: calc(var(--head-top) + var(--head-band));
  transform: translateY(-0.4rem);
  transition: opacity 240ms ease, transform 240ms ease, visibility 240ms ease;
  visibility: hidden;
  z-index: 90;
}

.filter.is-open .filter-options {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  visibility: visible;
}

/* The whole cluster stands down when the menu takes the screen. */
.menu-open .filter {
  opacity: 0;
  pointer-events: none;
}

.filter-option {
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--mist);
  cursor: pointer;
  font-family: var(--utility);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  padding: 0.05rem 0;
  text-shadow: 0 1px 10px rgba(6, 0, 24, 0.9), 0 0 3px rgba(6, 0, 24, 0.7);
  text-transform: uppercase;
  transition: border-color 180ms ease, color 180ms ease;
}

.filter-option:hover {
  color: var(--paper);
}

/* The rule under the word marks the live one, the same mark the intro's closing
   key uses. */
.filter-option[aria-pressed="true"] {
  border-bottom-color: currentColor;
  color: var(--gold);
}

.filter-option:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.site-menu {
  background: var(--main-blue);
  inset: 0;
  opacity: 0;
  overflow-y: auto;
  padding: 7rem 7vw 4rem;
  pointer-events: none;
  position: fixed;
  transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 320ms cubic-bezier(0.16, 1, 0.3, 1);
  visibility: hidden;
  z-index: 85;
}

.menu-open .site-menu {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.site-menu-inner {
  display: grid;
  gap: 0.2rem;
  justify-items: start;
  margin: 0 auto;
  max-width: 60rem;
}

.nav-link {
  border-bottom: 1px solid rgba(251, 248, 236, 0.16);
  color: var(--mist);
  display: block;
  font-family: var(--display);
  font-size: clamp(2.4rem, 7vw, 4.6rem);
  line-height: 1.18;
  padding: 0.5rem 0;
  text-transform: uppercase;
  width: 100%;
}

.nav-link:hover,
.nav-link[aria-current="page"] {
  color: var(--gold);
}

.nav-link:focus-visible {
  color: var(--gold);
  outline: 1px solid var(--gold);
  outline-offset: 4px;
}

.brand-lockup {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 2.6rem;
}

.brand-name {
  font-family: var(--display);
  font-size: 2.2rem;
  line-height: 0.78;
  text-transform: uppercase;
}

.brand-mark {
  align-items: center;
  display: flex;
  gap: 0.5rem;
}

.brand-dot {
  background: var(--gold);
  border-radius: 50%;
  height: 0.34rem;
  width: 0.34rem;
}

/* ==========================================================================
   Focus reel
   One index drives two layers: the full-bleed stage behind and the filmstrip
   in front. The cell inside the brackets is the project about to be entered.
   ========================================================================== */

/* The focus area is 9:16 because most project stills are vertical. Height is
   the input and width is derived, so the ratio holds at every breakpoint. */
.reel {
  --cell-height: clamp(14rem, 44svh, 24rem);
  --cell-gap: 0.55rem;
  --strip-width: calc(var(--cell-height) * 9 / 16);
  --focus-line: 50%;
  background: var(--main-blue);
  height: 100%;
  overflow: hidden;
  position: relative;
}

.reel-stage {
  inset: 0;
  position: absolute;
  z-index: 0;
}

.reel-stage-track {
  height: 100%;
  transform: translate3d(0, calc(var(--reel-offset, 0) * -100%), 0);
  transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* The stage is blurred so it reads as depth behind the strip rather than as a
   second image competing with it. The slight scale hides the soft edge that a
   blur leaves at the bounds of the element. */
.reel-plate {
  background-color: var(--main-blue);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(5px);
  height: 100%;
  transform: scale(1.1);
}

/* No blue cast: the stills are shown at their own colour. Two soft neutral
   gradients sit only where type lands, top-left and bottom, so the copy stays
   legible without tinting the image. */
.reel-veil {
  background:
    linear-gradient(
      160deg,
      rgba(6, 0, 24, 0.52) 0%,
      rgba(6, 0, 24, 0.18) 34%,
      transparent 58%
    ),
    linear-gradient(transparent 62%, rgba(6, 0, 24, 0.58) 100%);
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.reel-copy {
  inset-inline: 0;
  max-width: none;
  padding-inline: 7vw;
  position: absolute;
  top: var(--head-top);
  z-index: 3;
}

/* Centred in the band, not baseline-aligned, so the small prefix sits on the
   same line as both the brand and the menu key. */
.reel-copy-line {
  align-items: center;
  display: flex;
  margin: 0;
  min-height: var(--head-band);
  position: relative;
  width: 100%;
}

.reel-copy-prefix {
  color: var(--mist);
  font-family: var(--utility);
  font-size: 0.84rem;
  text-transform: uppercase;
}

.reel-copy-brand {
  color: var(--paper);
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  left: 50%;
  line-height: 1.05;
  position: absolute;
  text-transform: uppercase;
  transform: translateX(-50%);
  white-space: nowrap;
}

.reel-title {
  font-family: var(--display);
  font-size: clamp(3.6rem, 9vw, 7.6rem);
  font-weight: 400;
  line-height: 0.84;
  margin: 0 0 1.1rem;
  text-transform: uppercase;
}

.reel-deck {
  color: var(--paper);
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  line-height: 1.05;
  margin: 0;
  text-transform: uppercase;
}

.reel-viewport {
  height: 100%;
  inset-inline-start: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: var(--strip-width);
  z-index: 2;
}

.reel-strip {
  display: grid;
  gap: var(--cell-gap);
  list-style: none;
  margin: 0;
  padding: 0;
  opacity: 1;
  transform: translate3d(0, var(--strip-shift, 0px), 0);
  transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms ease;
  will-change: transform;
}

/* A filter change relays out the strip, which would otherwise be seen as a jump.
   The strip goes out, the set changes, the strip comes back. */
.reel.is-refiltering .reel-strip {
  opacity: 0;
}

.reel-cell {
  height: var(--cell-height);
  margin: 0;
  position: relative;
}

.reel-cell[hidden] {
  display: none;
}

/* The hairline keeps the strip legible as a strip even when neighbouring
   stills are tonally close to each other and to the stage behind. */
.reel-link {
  border: 1px solid rgba(251, 248, 236, 0.3);
  display: block;
  filter: saturate(0.65) brightness(0.72);
  height: 100%;
  opacity: 0.72;
  overflow: hidden;
  position: relative;
  transition: opacity 320ms ease, filter 320ms ease, border-color 320ms ease;
}

.reel-link img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.reel-cell-name {
  bottom: 0.3rem;
  color: var(--paper);
  font-family: var(--utility);
  font-size: 0.58rem;
  left: 0.4rem;
  opacity: 0;
  position: absolute;
  text-transform: uppercase;
  transition: opacity 240ms ease;
}

/* The focused cell fills the brackets exactly, so emphasis comes from tone and
   the hairline rather than from any change of size that would break 9:16. */
.reel-cell.is-active .reel-link {
  border-color: var(--paper);
  filter: none;
  opacity: 1;
}

.reel-cell.is-active .reel-cell-name {
  opacity: 0.85;
}

.reel-link:hover,
.reel-link:focus-visible {
  filter: none;
  opacity: 0.92;
}

.reel-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.reel-reticle {
  height: var(--cell-height);
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: var(--focus-line);
  transform: translate(-50%, -50%);
  width: var(--strip-width);
  z-index: 4;
}

.reticle-corner {
  border: 1px solid var(--gold);
  height: 0.85rem;
  position: absolute;
  width: 0.85rem;
}

.reticle-corner.tl {
  border-bottom: 0;
  border-right: 0;
  left: -0.35rem;
  top: -0.35rem;
}

.reticle-corner.tr {
  border-bottom: 0;
  border-left: 0;
  right: -0.35rem;
  top: -0.35rem;
}

.reticle-corner.bl {
  border-right: 0;
  border-top: 0;
  bottom: -0.35rem;
  left: -0.35rem;
}

.reticle-corner.br {
  border-left: 0;
  border-top: 0;
  bottom: -0.35rem;
  right: -0.35rem;
}

/* The strip sits above the scrim, so where the readout crosses a cell the type
   is carried by its own shadow rather than by the gradient behind it. */
.reel-readout {
  bottom: 3.2rem;
  left: 7vw;
  max-width: 22rem;
  position: absolute;
  text-shadow: 0 1px 12px rgba(6, 0, 24, 0.85), 0 0 3px rgba(6, 0, 24, 0.6);
  z-index: 3;
}

.reel-counter,
.reel-copy {
  text-shadow: 0 1px 12px rgba(6, 0, 24, 0.7);
}

.readout-name {
  font-family: var(--display);
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1;
  margin: 0 0 0.6rem;
  text-transform: uppercase;
}

.readout-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin: 0 0 0.7rem;
}

.readout-meta span {
  color: var(--gold);
  font-family: var(--utility);
  font-size: 0.76rem;
  text-transform: uppercase;
}

.readout-hint {
  color: var(--mist);
  font-family: var(--utility);
  font-size: 0.7rem;
  margin: 0;
  opacity: 0.8;
  text-transform: uppercase;
}

.reel-counter {
  bottom: 3.2rem;
  color: var(--mist);
  font-size: 0.76rem;
  position: absolute;
  right: 7vw;
  z-index: 3;
}

.eyebrow {
  color: var(--mist);
  display: block;
  font-family: var(--utility);
  font-size: 0.84rem;
  margin: 0 0 1.35rem;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.page-actions,
.contact-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.button {
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--paper);
  color: var(--blue);
  display: inline-flex;
  font-family: var(--utility);
  font-size: 0.92rem;
  font-weight: 700;
  justify-content: center;
  min-height: 3rem;
  min-width: 11rem;
  padding: 0.86rem 1.1rem;
  text-align: center;
  text-transform: uppercase;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease,
    border-color 160ms ease;
}

.button:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  transform: translateY(-2px);
}

.button.secondary {
  background: transparent;
  border-color: rgba(251, 248, 236, 0.62);
  color: var(--paper);
}

.button.secondary:hover {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--blue);
}

.section-band {
  padding: 6.5rem 7vw;
  position: relative;
}

.section-band.paper {
  background: var(--paper);
  color: var(--ink);
}

.section-band.blue {
  background:
    linear-gradient(rgba(251, 248, 236, 0.07) 1px, transparent 1px),
    var(--blue);
  background-size: 56px 56px, auto;
  color: var(--paper);
}

.section-header {
  align-items: end;
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.42fr);
  margin: 0 0 3.5rem;
}

.section-kicker {
  color: var(--gold);
  font-family: var(--utility);
  font-size: 0.82rem;
  margin: 0 0 0.9rem;
  text-transform: uppercase;
}

.paper .section-kicker {
  color: var(--blue);
}

.section-title {
  font-family: var(--display);
  font-size: 4.8rem;
  font-weight: 400;
  line-height: 0.9;
  margin: 0;
  max-width: 12ch;
  text-transform: uppercase;
}

.section-note {
  font-family: var(--utility);
  font-size: 0.92rem;
  margin: 0;
  max-width: 35rem;
  text-transform: uppercase;
}

.index-grid {
  border-top: 1px solid currentColor;
}

.index-row {
  align-items: center;
  border-bottom: 1px solid currentColor;
  display: grid;
  gap: 2rem;
  grid-template-columns: 6rem minmax(0, 1fr) minmax(14rem, 0.42fr) auto;
  padding: 1.25rem 0;
}

.index-row:hover {
  color: var(--gold);
}

.index-substrate {
  border-top: 1px solid currentColor;
  display: flex;
  flex-wrap: wrap;
  font-family: var(--utility);
  font-size: 0.82rem;
  gap: 0.9rem;
  margin: 0;
  opacity: 0.78;
  padding: 1.2rem 0 0;
  text-transform: uppercase;
}

.index-substrate a {
  color: var(--blue);
  text-decoration: underline;
}

.index-substrate a:hover {
  color: var(--gold);
}

.index-number,
.index-meta,
.index-command {
  font-family: var(--utility);
  font-size: 0.84rem;
  text-transform: uppercase;
}

.index-title {
  font-family: var(--display);
  font-size: 2.8rem;
  line-height: 1;
  text-transform: uppercase;
}

.split-feature {
  display: grid;
  gap: 4rem;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
}

.plate-image {
  aspect-ratio: 9 / 16;
  background:
    linear-gradient(rgba(0, 9, 204, 0.1), rgba(0, 9, 204, 0.1)),
    url("assets/HeroImage/phokus-muse-main-blue-vertical.webp") center / cover no-repeat;
  border: 1px solid currentColor;
  max-height: 40rem;
  min-height: 26rem;
  position: relative;
}

.plate-image::before,
.plate-image::after {
  content: "";
  position: absolute;
}

.plate-image::before {
  border: 1px solid rgba(251, 248, 236, 0.54);
  inset: 1.1rem;
}

.plate-image::after {
  background: var(--gold);
  bottom: 1.1rem;
  height: 0.5rem;
  left: 1.1rem;
  width: 5.5rem;
}

.feature-copy {
  align-self: center;
}

.feature-copy h3 {
  font-family: var(--display);
  font-size: 4rem;
  font-weight: 400;
  line-height: 0.92;
  margin: 0 0 1.5rem;
  text-transform: uppercase;
}

.feature-copy p {
  font-size: 1.08rem;
  margin: 0 0 2rem;
  max-width: 39rem;
}

.stat-list {
  display: grid;
  gap: 0.7rem;
  margin: 2.4rem 0 0;
}

.stat-item {
  border-bottom: 1px solid rgba(251, 248, 236, 0.36);
  display: grid;
  gap: 1rem;
  grid-template-columns: 7rem 1fr;
  padding: 0 0 0.7rem;
}

.paper .stat-item {
  border-color: var(--paper-line);
}

.stat-item span {
  color: var(--gold);
  font-family: var(--display);
  font-size: 2rem;
  line-height: 1;
}

.stat-item p {
  font-family: var(--utility);
  font-size: 0.84rem;
  margin: 0;
  text-transform: uppercase;
}

.page-hero {
  display: grid;
  gap: 3rem;
  grid-template-columns: minmax(0, 0.72fr) minmax(18rem, 0.45fr);
  min-height: 58svh;
  overflow: hidden;
  padding: var(--head-top) 7vw 5rem;
  position: relative;
}

/* Interior pages put their eyebrow in the same band as the menu key, so the top
   line of the site holds at one height on every page. */
.page-hero .eyebrow,
.project-hero .eyebrow {
  align-items: center;
  display: flex;
  min-height: var(--head-band);
}

.page-hero::after {
  background: radial-gradient(circle at right center, rgba(251, 248, 236, 0.16), transparent 32rem);
  content: "";
  inset: 0 0 0 auto;
  opacity: 0.24;
  position: absolute;
  width: 52%;
  z-index: 0;
}

.page-hero > * {
  position: relative;
  z-index: 1;
}

.page-hero-art {
  bottom: 0;
  opacity: 0.72;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  right: -3vw;
  top: 1.5rem;
  width: min(72vw, 62rem);
  z-index: 0;
}

.page-hero-art::after {
  background: linear-gradient(
    90deg,
    var(--blue) 0%,
    rgba(0, 9, 204, 0.82) 24%,
    rgba(0, 9, 204, 0) 56%
  );
  content: "";
  inset: 0;
  position: absolute;
}

.page-hero-art img {
  height: 100%;
  mix-blend-mode: screen;
  object-fit: cover;
  object-position: right bottom;
  width: 100%;
}

.page-title {
  font-family: var(--display);
  font-size: 7rem;
  font-weight: 400;
  line-height: 0.84;
  margin: 0 0 1.4rem;
  max-width: 11ch;
  text-transform: uppercase;
}

.page-deck {
  font-family: var(--display);
  font-size: 2rem;
  line-height: 1.08;
  margin: 0;
  max-width: 21ch;
  text-transform: uppercase;
}

.page-meta {
  align-self: end;
  border-left: 1px solid var(--line);
  padding-left: 1.3rem;
}

.page-meta p {
  font-family: var(--utility);
  font-size: 0.82rem;
  margin: 0.25rem 0;
  text-transform: uppercase;
}

.case-list {
  display: grid;
  gap: 1.1rem;
}

.case-item {
  border: 1px solid currentColor;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 9rem minmax(0, 1fr) minmax(13rem, 0.36fr);
  min-height: 13rem;
  padding: 1.2rem;
  position: relative;
}

.case-item::before {
  background:
    linear-gradient(135deg, rgba(251, 248, 236, 0.18), rgba(251, 248, 236, 0.04)),
    radial-gradient(circle at 72% 28%, rgba(215, 189, 103, 0.24), transparent 18rem);
  content: "";
  inset: 0;
  opacity: 0;
  position: absolute;
  transition: opacity 180ms ease;
}

.case-item:hover::before {
  opacity: 0.15;
}

.case-item > * {
  position: relative;
  z-index: 1;
}

.case-number {
  color: var(--gold);
  font-family: var(--utility);
  font-size: 0.84rem;
  text-transform: uppercase;
}

.case-title {
  font-family: var(--display);
  font-size: 3.6rem;
  font-weight: 400;
  line-height: 0.9;
  margin: 0 0 1rem;
  text-transform: uppercase;
}

.case-copy {
  font-size: 1rem;
  margin: 0;
  max-width: 44rem;
}

.case-meta {
  align-self: end;
  color: var(--mist);
  font-family: var(--utility);
  font-size: 0.8rem;
  text-transform: uppercase;
}

.paper .case-meta {
  color: var(--blue);
}

.gallery-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gallery-item {
  border: 1px solid currentColor;
  min-height: 22rem;
  overflow: hidden;
  padding: 1rem;
  position: relative;
}

.gallery-item::before {
  background:
    radial-gradient(circle at 72% 30%, rgba(215, 189, 103, 0.24), transparent 16rem),
    linear-gradient(135deg, rgba(251, 248, 236, 0.14), rgba(251, 248, 236, 0.03));
  content: "";
  inset: 0;
  opacity: 0.46;
  position: absolute;
}

.gallery-item:nth-child(1)::before {
  opacity: 0.38;
}

.gallery-item:nth-child(2)::before {
  opacity: 0.46;
}

.gallery-item:nth-child(3)::before {
  opacity: 0.54;
}

.gallery-item > * {
  position: relative;
  z-index: 1;
}

.gallery-label {
  font-family: var(--utility);
  font-size: 0.8rem;
  margin: 0 0 11rem;
  text-transform: uppercase;
}

.gallery-title {
  font-family: var(--display);
  font-size: 2.7rem;
  line-height: 0.95;
  margin: 0;
  text-transform: uppercase;
}

.manifest-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.manifest-item {
  background: rgba(251, 248, 236, 0.08);
  border: 1px solid rgba(251, 248, 236, 0.28);
  min-height: 13rem;
  padding: 1rem;
}

.manifest-item strong {
  color: var(--gold);
  display: block;
  font-family: var(--display);
  font-size: 2.1rem;
  font-weight: 400;
  line-height: 0.95;
  margin-bottom: 1.1rem;
  text-transform: uppercase;
}

.manifest-item span {
  color: var(--mist);
  display: block;
  font-family: var(--utility);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.about-grid {
  display: grid;
  gap: 4rem;
  grid-template-columns: minmax(0, 0.68fr) minmax(19rem, 0.42fr);
}

.about-copy {
  font-size: 1.13rem;
  max-width: 44rem;
}

.about-copy p {
  margin: 0 0 1.25rem;
}

.portrait-plate {
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(circle at 62% 28%, rgba(215, 189, 103, 0.3), transparent 18rem),
    linear-gradient(135deg, rgba(251, 248, 236, 0.14), rgba(251, 248, 236, 0.03));
  border: 1px solid currentColor;
  position: sticky;
  top: 8rem;
}

.portrait-plate::after {
  border: 1px solid rgba(0, 9, 204, 0.38);
  content: "";
  inset: 1rem;
  position: absolute;
}

.service-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.service-card {
  background: rgba(251, 248, 236, 0.08);
  border: 1px solid rgba(251, 248, 236, 0.38);
  min-height: 17rem;
  padding: 1.2rem;
}

.service-card strong {
  color: var(--gold);
  display: block;
  font-family: var(--display);
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 0.95;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}

.service-card p {
  color: var(--mist);
  font-size: 0.98rem;
  margin: 0;
}

.contact-layout {
  display: grid;
  gap: 4rem;
  grid-template-columns: minmax(0, 0.7fr) minmax(19rem, 0.44fr);
}

.contact-panel {
  border: 1px solid currentColor;
  padding: 1.3rem;
}

.contact-form {
  display: grid;
  gap: 1rem;
}

.field {
  display: grid;
  gap: 0.45rem;
}

.field label {
  font-family: var(--utility);
  font-size: 0.82rem;
  text-transform: uppercase;
}

.field input,
.field textarea {
  background: rgba(251, 248, 236, 0.1);
  border: 1px solid rgba(251, 248, 236, 0.5);
  color: var(--paper);
  min-height: 3.1rem;
  outline: none;
  padding: 0.82rem;
}

.field textarea {
  min-height: 9rem;
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  border-color: var(--gold);
}

.contact-note {
  color: var(--mist);
  font-family: var(--utility);
  font-size: 0.84rem;
  margin: 1rem 0 0;
  text-transform: uppercase;
}

.terminal {
  background: var(--paper);
  border: 1px solid var(--paper);
  color: var(--blue);
  padding: 1rem;
}

.terminal-head {
  border-bottom: 1px solid var(--paper-line);
  color: var(--ink);
  display: flex;
  font-family: var(--utility);
  font-size: 0.78rem;
  justify-content: space-between;
  margin: 0 0 1rem;
  padding-bottom: 0.8rem;
  text-transform: uppercase;
}

.terminal-code {
  color: var(--blue);
  font-family: var(--utility);
  font-size: 0.9rem;
  margin: 0;
  overflow-wrap: anywhere;
}

.footer {
  align-items: center;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  padding: 2.3rem 7vw;
}

.footer p,
.footer a {
  font-family: var(--utility);
  font-size: 0.82rem;
  margin: 0;
  text-transform: uppercase;
}

.footer-ratio {
  color: var(--mist);
  opacity: 0.72;
}

.footer-ratio:empty {
  display: none;
}

/* Project pages. Narrower hero than the section landings because a single
   project leads with its title and spec, not with art. */
.project-hero {
  padding: var(--head-top) 7vw 4.5rem;
}

/* A project deck is a sentence, not a headline, so it gets a wider measure
   than the section landings allow. */
.project-hero .page-deck {
  font-size: 1.7rem;
  max-width: 38ch;
}

.project-spec {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0 2rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 3rem 0 0;
  padding-top: 1.1rem;
}

.project-spec dt {
  color: var(--gold);
  font-family: var(--utility);
  font-size: 0.78rem;
  margin: 0 0 0.5rem;
  text-transform: uppercase;
}

.project-spec dd {
  font-family: var(--utility);
  font-size: 0.88rem;
  margin: 0;
  text-transform: uppercase;
}

.project-proof {
  margin: 0;
}

.proof-pair {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 46rem;
}

.proof-shot {
  min-inline-size: 0;
}

.proof-shot img {
  border: 1px solid var(--paper-line);
  display: block;
  height: auto;
  width: 100%;
}

.proof-shot figcaption {
  font-size: 0.76rem;
  margin-top: 0.7rem;
  opacity: 0.7;
}

.proof-note {
  font-family: var(--utility);
  font-size: 0.86rem;
  margin: 2.2rem 0 0;
  max-width: 42rem;
  text-transform: uppercase;
}

.project-acts {
  counter-reset: act;
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.project-acts li {
  border: 1px solid currentColor;
  min-inline-size: 0;
  padding: 1.2rem;
}

/* The accent reads blue on paper and gold on blue, the same way the pipeline
   labels do, because the acts sit on either band depending on which optional
   sections a page carries. */
.act-number {
  color: var(--blue);
  font-family: var(--utility);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.blue .act-number {
  color: var(--gold);
}

.project-acts h3 {
  font-family: var(--display);
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1;
  margin: 1.6rem 0 0.8rem;
  text-transform: uppercase;
}

.project-acts p {
  font-family: var(--utility);
  font-size: 0.84rem;
  margin: 0;
  text-transform: uppercase;
}

/* The muse masters shown as a set. Each plate keeps its true aspect ratio,
   because the ragged heights are the point: one composition re-framed is what
   lets the reel declare a native frame for every project. Sat on a common
   bottom edge so the three captions share a baseline; centring them instead
   leaves the row looking scattered once the heights diverge. */
.project-plates {
  align-items: end;
  display: grid;
  gap: 1.4rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 50rem;
}

.plate-item {
  margin: 0;
  min-inline-size: 0;
}

.plate-item img {
  border: 1px solid var(--paper-line);
  display: block;
  height: auto;
  width: 100%;
}

.blue .plate-item img {
  border-color: var(--line);
}

.plate-item figcaption {
  font-family: var(--utility);
  font-size: 0.72rem;
  margin-top: 0.6rem;
  opacity: 0.7;
  text-transform: uppercase;
}

/* Type specimens. Each line is set in the family it names, so the block
   demonstrates the stack rather than describing it. */
.project-type {
  border-top: 1px solid currentColor;
  max-width: 50rem;
}

.type-row {
  align-items: baseline;
  border-bottom: 1px solid currentColor;
  display: grid;
  gap: 0.6rem 2rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: 1.4rem 0;
}

.type-specimen {
  font-size: 2.2rem;
  line-height: 1;
  margin: 0;
  min-inline-size: 0;
}

/* Deliberately not the global .utility / .display names, which carry weight and
   uppercasing a specimen must not inherit. */
.type-specimen.is-display {
  font-family: var(--display);
}

.type-specimen.is-utility {
  font-family: var(--utility);
  font-size: 1.5rem;
}

.type-specimen.is-body {
  font-family: var(--body);
  font-size: 1.7rem;
  letter-spacing: -0.01em;
}

.type-note {
  min-inline-size: 0;
}

.type-role {
  color: var(--blue);
  display: block;
  font-family: var(--utility);
  font-size: 0.78rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.blue .type-role {
  color: var(--gold);
}

.type-stack {
  font-family: var(--utility);
  font-size: 0.78rem;
  margin: 0;
  opacity: 0.72;
}

.project-stack {
  border-top: 1px solid currentColor;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stack-item {
  border-bottom: 1px solid currentColor;
  border-right: 1px solid currentColor;
  min-inline-size: 0;
  padding: 1.3rem 1.2rem;
}

.stack-item:last-child {
  border-right: 0;
}

.stack-item span {
  color: var(--blue);
  display: block;
  font-size: 0.78rem;
  margin: 0 0 0.9rem;
}

.blue .stack-item span {
  color: var(--gold);
}

.stack-item p {
  font-family: var(--utility);
  font-size: 0.84rem;
  margin: 0;
  text-transform: uppercase;
}

.project-links {
  border-top: 1px solid currentColor;
}

.project-link {
  align-items: baseline;
  border-bottom: 1px solid currentColor;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.32fr);
  padding: 1.4rem 0;
  text-decoration: none;
  transition: padding-left 260ms ease, opacity 260ms ease;
}

.project-link:hover,
.project-link:focus-visible {
  padding-left: 1rem;
}

.link-label {
  font-family: var(--display);
  font-size: 2.4rem;
  line-height: 1;
  text-transform: uppercase;
}

.link-meta {
  font-family: var(--utility);
  font-size: 0.82rem;
  opacity: 0.76;
  text-transform: uppercase;
}

.project-next {
  border-top: 1px solid var(--line);
  padding: 2.6rem 7vw;
}

.project-next a {
  display: grid;
  gap: 0.6rem;
  text-decoration: none;
}

.project-next .utility {
  color: var(--gold);
  font-size: 0.78rem;
}

.next-title {
  font-family: var(--display);
  font-size: 2.6rem;
  line-height: 1;
  text-transform: uppercase;
}

@media (max-width: 1120px) {
  .menu-toggle,
  .filter-options {
    right: 5vw;
  }

  .project-hero,
  .project-next {
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .page-title {
    font-size: 6rem;
  }

  .section-title {
    font-size: 4rem;
  }

  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .section-band,
  .page-hero,
  .footer {
    padding-left: 5vw;
    padding-right: 5vw;
  }
}

@media (max-width: 860px) {
  .site-menu {
    padding: 5.5rem 5vw 3rem;
  }

  .page-hero,
  .section-header,
  .split-feature,
  .about-grid,
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .eyebrow {
    font-size: 0.76rem;
    white-space: normal;
  }

  .page-hero-art {
    bottom: -3rem;
    left: 0;
    opacity: 0.58;
    right: auto;
    top: 7rem;
    transform: scale(1.24);
    transform-origin: 72% bottom;
    width: 100%;
  }

  .page-hero-art img {
    object-position: 68% bottom;
  }

  .page-title {
    font-size: 4.8rem;
  }

  .page-deck {
    font-size: 1.55rem;
  }

  /* The reel keeps its centred strip on narrow screens but gives the readout
     the full width beneath it, so the brand and the metadata never collide.
     Only the height is set; the 9:16 width follows from it. */
  .reel {
    --cell-height: clamp(11rem, 34svh, 17rem);
    --focus-line: 46%;
  }

  .reel-copy {
    padding-inline: 5vw;
  }

  .reel-readout {
    bottom: 2.2rem;
    left: 5vw;
    max-width: calc(100% - 10vw);
  }

  .reel-counter {
    bottom: 2.2rem;
    right: 5vw;
  }

  .section-title {
    font-size: 3.25rem;
  }

  .index-row,
  .case-item,
  .project-link {
    grid-template-columns: 1fr;
  }

  .project-spec,
  .project-acts,
  .project-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .type-row {
    grid-template-columns: 1fr;
  }

  .stack-item:nth-child(2n) {
    border-right: 0;
  }

  .index-title,
  .case-title {
    font-size: 2.6rem;
  }

  .gallery-grid,
  .manifest-grid,
  .service-grid {
    grid-template-columns: 1fr;
  }

  /* Three frames still read as a set at this width; below it they stack, since
     a 9:16 plate in a third of a phone screen shows nothing. */
  .project-plates {
    gap: 1.8rem;
    grid-template-columns: 1fr;
    max-width: 22rem;
  }

  .page-hero::after {
    opacity: 0.18;
    width: 100%;
  }

  .portrait-plate {
    position: relative;
    top: auto;
  }

  .footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  body {
    background-size: 36px 36px, 36px 36px, auto;
  }

  /* Phone staggers the top line instead of running it as one row. The menu key
     holds the band, the prefix drops a little below it, and the brand drops
     further still, which frees it to sit centred on the axis without landing on
     the prefix. */
  :root {
    --head-top: 3.4rem;
    --head-band: 1rem;
  }

  .reel-copy-line {
    gap: 0.5rem;
    padding-right: 4.2rem;
  }

  .reel-copy-prefix {
    font-size: 0.72rem;
    transform: translateY(0.45rem);
  }

  .reel-copy-brand {
    left: 50%;
    position: absolute;
    top: 0;
    transform: translate(-50%, 1.7rem);
  }

  .menu-toggle {
    font-size: 0.72rem;
    gap: 0.4rem;
  }

  .menu-toggle-rule {
    width: 0.8rem;
  }

  .back-link {
    font-size: 0.72rem;
    gap: 0.4rem;
  }

  .back-link-rule {
    width: 0.8rem;
  }

  .brand-name {
    font-size: 1.65rem;
  }

  .page-title {
    font-size: 3.45rem;
    max-width: 9ch;
  }

  .page-deck {
    font-size: 1.25rem;
  }

  .section-band {
    padding-bottom: 4.4rem;
    padding-top: 4.4rem;
  }

  .section-title {
    font-size: 2.65rem;
  }

  .feature-copy h3 {
    font-size: 2.8rem;
  }

  .button {
    width: 100%;
  }

  .page-actions,
  .contact-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .plate-image {
    min-height: 20rem;
  }

  .stat-item {
    grid-template-columns: 1fr;
  }

  .project-spec,
  .project-acts,
  .project-stack {
    grid-template-columns: 1fr;
  }

  .project-spec > div {
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.9rem;
  }

  .stack-item {
    border-right: 0;
  }

  .link-label,
  .next-title {
    font-size: 2rem;
  }

  .gallery-item {
    min-height: 18rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-loader-wheel,
  .intro-loader-image {
    animation: none !important;
  }

  .intro-step,
  .intro-question,
  .intro-key,
  .intro-dots,
  .intro-term-mark,
  .brand-flier {
    transition: none !important;
  }

  .reel-stage-track,
  .reel-strip,
  .reel-link,
  .site-menu,
  .filter-options,
  .menu-toggle-rule {
    transition: none !important;
  }
}