/* ---------- Fonts: Synt for all text, Pinyon only as accent ---------- */
@font-face {
  font-family: "Synt";
  src: url("fonts/ABCSynt-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Pinyon";
  src: url("fonts/PinyonScript-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  --bg: #0b0b0b;
  --fg: #ecebe6;
  --dim: rgba(236, 235, 230, .42);
  --line: rgba(236, 235, 230, .12);
  --field: rgba(236, 235, 230, .22);
  --blend: difference;
  --gutter: clamp(16px, 3vw, 48px);
  --max: 1360px;
  --small: 14px;
  --body: 18px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Synt", Georgia, serif;
  font-weight: 400;
  font-synthesis: none;
  font-size: var(--small);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, blockquote, cite { font-weight: 400; font-style: normal; }
a { color: inherit; text-decoration: none; }
ol { list-style: none; }
img { display: block; width: 100%; height: auto; }
.script { font-family: "Pinyon", cursive; font-weight: 400; letter-spacing: 0; text-transform: none; }

/* Film grain, very faint */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Page transitions (separate pages that feel like one) ---------- */
@view-transition { navigation: auto; }
.topbar { view-transition-name: topbar; }
.menu  { view-transition-name: menu; }

::view-transition-old(root) { animation: vt-out .55s cubic-bezier(.7, 0, .3, 1) both; }
::view-transition-new(root) { animation: vt-in 1s var(--ease) .15s both; }
@keyframes vt-out { to { opacity: 0; filter: blur(8px); } }
@keyframes vt-in  { from { opacity: 0; filter: blur(8px); } }

/* ---------- Fixed chrome ---------- */

/* The menu is a sentence */
.menu {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 40;
  white-space: nowrap;
  font-size: var(--body);
  color: var(--dim);
  mix-blend-mode: var(--blend);
}
.menu a {
  font-family: "Pinyon", cursive;
  font-size: 34px;
  color: var(--fg);
  padding: 0 .1em;
  transition: opacity .4s;
}
.menu a:hover { opacity: .5; }
.menu a[aria-current="page"] { opacity: .35; pointer-events: none; }

/* Entry reveal */
.reveal { display: block; overflow: hidden; padding-bottom: .12em; }
.reveal > span { display: block; animation: rise 1.4s var(--ease) both; }
.reveal:nth-child(2) > span { animation-delay: .15s; }
@keyframes rise { from { transform: translateY(105%); } }

/* ---------- Home ---------- */
.headline {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  mix-blend-mode: var(--blend);
  font-size: clamp(44px, 7.6vw, 132px);
  line-height: .95;
  letter-spacing: -0.015em;
}
.headline .sub {
  display: block;
  max-width: 34ch;
  margin-top: 32px;
  font-size: var(--body);
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--dim);
  animation: fade 1.6s var(--ease) .6s both;
}
@keyframes fade { from { opacity: 0; } }

.flow {
  position: relative;
  padding: 100vh 0 0;
  display: flex;
  flex-direction: column;
  gap: 22vh;
}
.flow figure {
  width: calc(var(--w) * 1vw);
  margin-left: calc(var(--x) * 1vw);
  will-change: transform;
}
.flow figcaption {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dim);
  opacity: 0;
  transition: opacity .6s;
}
.flow figure:hover figcaption,
.flow figure.lit figcaption { opacity: 1; }

/* ---------- Inner pages ---------- */
.page-title {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--gutter);
  font-size: clamp(40px, 6.2vw, 108px);
  line-height: .98;
  letter-spacing: -0.015em;
}
.page-title .script { font-size: 1.45em; line-height: .95; }

.frame {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Work list */
.list { padding-bottom: 28vh; }
.list li a {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  transition: opacity .5s;
}
.list li:last-child a { border-bottom: 1px solid var(--line); }
.list .n, .list .d {
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dim);
}
.list .t {
  font-size: clamp(34px, 5vw, 88px);
  line-height: 1.05;
  text-align: center;
}
.list .d { text-align: right; }
.list:hover li a { opacity: .22; }
.list:hover li a:hover { opacity: 1; }

.list-preview {
  position: fixed;
  top: 0; left: 0;
  width: 300px;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s;
}
.list-preview.on { opacity: 1; }

.note {
  color: var(--dim);
  text-align: center;
  padding-bottom: 26vh;
}

.kicker {
  display: block;
  margin-bottom: 28px;
  font-size: var(--small);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dim);
}

/* About + Why: title holds the first screen, sentences light up word by word */
.read-title {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
}
.read-text { position: relative; margin-top: -50vh; }   /* height set by script */
.read-stage {
  position: sticky;
  top: 0;
  height: 100svh;
}
.pin {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--gutter);
  pointer-events: none;
}
.pin p,
.pin blockquote {
  max-width: 24ch;
  text-align: center;
  font-size: clamp(26px, 2.8vw, 48px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  will-change: opacity, filter, transform;
}
/* Section label: one fixed spot on the left; its text changes with the sentence */
.tags {
  position: fixed;
  left: var(--gutter);
  top: 50%;
  z-index: 3;
  pointer-events: none;
}
.tag {
  position: absolute;
  left: 0;
  top: 0;
  translate: 0 -50%;
  font-size: var(--small);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dim);
  white-space: nowrap;
  opacity: 0;
}
@media (max-width: 700px) {
  .tags { top: 18%; }
}
.pin .w { display: inline-block; opacity: 0; will-change: opacity, transform; }
.pin cite {
  display: block;
  opacity: 0;
  transition: opacity .8s;
  margin-top: 28px;
  font-size: var(--small);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dim);
}

/* About (rest) */
.prose {
  max-width: 40ch;
  margin: 0 auto;
  padding-bottom: 22vh;
  font-size: var(--body);
  line-height: 1.5;
}
.prose p + p { margin-top: 1.4em; }

.quote {
  max-width: 30ch;
  margin: 0 auto;
  padding-bottom: 26vh;
  text-align: center;
  font-size: clamp(24px, 2.4vw, 38px);
  line-height: 1.25;
}
.quote cite {
  display: block;
  margin-top: 28px;
  font-size: var(--small);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dim);
}


/* ---------- Phone ---------- */
@media (max-width: 700px) {
  :root { --small: 13px; --body: 17px; }
  .menu { font-size: min(14px, 3.75vw); bottom: 16px; }   /* as large as still fits on one line */
  .menu a { font-size: min(27px, 7.2vw); }
  .flow { gap: 14vh; }
  .flow figure { width: 72vw !important; margin-left: 6vw !important; }
  .flow figure:nth-child(even) { margin-left: 22vw !important; }
  .flow figure.p { width: 56vw !important; }
  .flow figcaption { opacity: 1; }
  .list li a { grid-template-columns: 2.4em 1fr; row-gap: 2px; }
  .list .t { text-align: left; }
  .list .d { grid-column: 2; text-align: left; }
  .list-preview { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important;
    transition: none !important;
  }
}


/* ---------- Contact ---------- */
.contact-page {
  min-height: 100svh;
  padding: 22vh var(--gutter) 24vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.contact-page h1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: clamp(40px, 6.2vw, 108px);
  line-height: .98;
  letter-spacing: -0.015em;
  margin-bottom: 32px;
}
.contact-intro {
  max-width: 34ch;
  text-align: center;
  font-size: var(--body);
  line-height: 1.45;
  color: var(--dim);
  margin-bottom: 10vh;
}
.form { width: min(560px, 100%); display: flex; flex-direction: column; gap: 32px; }
.field { position: relative; }
.field input,
.field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--field);
  border-radius: 0;
  color: var(--fg);
  font: inherit;
  font-size: var(--body);
  padding: 26px 0 10px;
  outline: none;
  resize: none;
  text-align: center;
  transition: border-color .4s;
}
.field input:focus,
.field textarea:focus { border-color: var(--fg); }
.field input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px var(--bg) inset; -webkit-text-fill-color: var(--fg); }
/* Floating label: sits in the field, rises when you type */
.field label {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  top: 26px;
  color: var(--dim);
  font-size: var(--body);
  pointer-events: none;
  transition: top .35s var(--ease), font-size .35s var(--ease), letter-spacing .35s;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label {
  top: 0;
  font-size: var(--small);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.send {
  align-self: center;
  margin-top: 12px;
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  color: var(--fg);
  font: inherit;
  font-size: var(--body);
  padding: 0 0 2px;
  cursor: pointer;
  transition: opacity .3s;
}
.send:hover { opacity: .5; }
.form-note { color: var(--dim); font-size: var(--small); min-height: 1.6em; text-align: center; }

/* About: portrait surfaces behind the title on hover */
.read-title { z-index: 2; }
.read-title .reveal { cursor: default; }
.portrait {
  position: fixed;
  top: 0; left: 0;
  width: clamp(200px, 17vw, 300px);
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  filter: blur(10px);
  scale: .96;
  transition: opacity .6s var(--ease), filter .6s var(--ease), scale .6s var(--ease);
}
.portrait.on { opacity: 1; filter: none; scale: 1; }
.portrait img { display: none; }
.portrait img.show { display: block; }
.portrait.static { top: 11%; left: 50%; translate: -50% 0; width: min(40vw, 200px); }   /* phones: above the title, never over it */

/* Work: on hover the cursor becomes the project's emoji */
.emoji-cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 60;
  pointer-events: none;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 40px;
  line-height: 1;
  opacity: 0;
  scale: .6;
  transition: opacity .2s, scale .25s var(--ease);
}
.emoji-cursor.on { opacity: 1; scale: 1; }
@media (hover: hover) and (pointer: fine) {
  .list a[data-emoji] { cursor: none; }
}
@media (hover: none) { .emoji-cursor { display: none; } }

/* ---------- Home: title + line, nothing else ---------- */
.page-title .sub {
  display: block;
  max-width: 34ch;
  margin-top: 32px;
  font-size: var(--body);
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--dim);
  animation: fade 1.6s var(--ease) .6s both;
}

/* ---------- Project pages ---------- */
.gallery {
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 10vw, 160px);
  padding-bottom: 20vh;
}
.shot img { width: 100%; height: auto; }
.shot.pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 32px); }
.shot.narrow { width: min(100%, 560px); margin: 0 auto; }
.credit { text-align: center; color: var(--dim); font-size: var(--small); }
@media (max-width: 700px) {
  .shot.pair { grid-template-columns: 1fr; }
}

/* ---------- The next page, waiting at the end of this one ---------- */
.next { position: relative; height: 180vh; }
.next-inner {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--gutter);
}
.next-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: clamp(40px, 6.2vw, 108px);
  line-height: .98;
  letter-spacing: -0.015em;
  opacity: .12;
}
.next .kicker { opacity: .12; }

.chained .reveal > span,
.chained .page-title .sub { animation: none; }

/* Menu sentence set on a gentle smile: the ends rise a little */
.menu .ch { display: inline-block; white-space: pre; transform-origin: 50% 70%; }

/* Links inside the scroll text and notes (Say Image) */
.pin cite a { pointer-events: auto; border-bottom: 1px solid currentColor; }
.note a { color: var(--fg); border-bottom: 1px solid currentColor; transition: opacity .3s; }
.note a:hover, .pin cite a:hover { opacity: .5; }

/* ---------- Light version: cream, like the business card ---------- */
:root[data-theme="light"] {
  --bg: #ece8de;
  --fg: #161616;
  --dim: rgba(22, 22, 22, .45);
  --line: rgba(22, 22, 22, .14);
  --field: rgba(22, 22, 22, .25);
  --blend: normal;
}
:root[data-theme="light"] body::after { opacity: .05; }
html, body { transition: background-color .5s ease, color .5s ease; }

/* Light · Night switch, top right next to the time */
.theme {
  background: none;
  border: 0;
  padding: 0;
  margin-right: 18px;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.theme { display: inline-flex; gap: 10px; vertical-align: -3px; }
.theme span { display: inline-flex; opacity: .35; transition: opacity .3s; }
.theme svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.theme span.on { opacity: 1; }
.theme:hover span { opacity: .8; }

/* ---------- Header: one editorial row on a four-column grid ---------- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: var(--gutter);
  align-items: baseline;
  padding: 22px var(--gutter) 0;
  font-size: 15px;
  letter-spacing: .01em;
  color: #fff;
  mix-blend-mode: var(--blend);
  pointer-events: none;
}
:root[data-theme="light"] .topbar { color: var(--fg); }
.topbar > * { pointer-events: auto; text-align: left; }
.tb-role, .tb-time { color: var(--dim); }
.tb-role { grid-column: 3; }        /* column 2 stays empty on purpose */
.tb-time { grid-column: 4; }
.topbar .theme { grid-column: 5; }
:root:not([data-theme="light"]) .tb-role,
:root:not([data-theme="light"]) .tb-time { color: rgba(255, 255, 255, .5); }
.topbar .theme { justify-self: end; margin-right: 0; }
@media (max-width: 700px) {
  .topbar { grid-template-columns: 1fr auto auto; column-gap: 14px; }
  .tb-role, .tb-text { display: none; }
}

/* ---------- Globe button + "where clients are" pop-up ---------- */
.globe {
  background: none; border: 0; padding: 0; margin-right: 10px;
  color: inherit; cursor: pointer; vertical-align: -3px;
  display: inline-flex; transition: opacity .3s;
}
.globe:hover { opacity: .5; }
.globe svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.world {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 80px var(--gutter);
  background: rgba(11, 11, 11, .985);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s var(--ease);
}
:root[data-theme="light"] .world { background: rgba(236, 232, 222, .985); }
.world.open { opacity: 1; pointer-events: auto; }
.world-inner { width: min(1100px, 100%); text-align: center; }
.world h2 {
  font-size: clamp(28px, 3.4vw, 56px);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0 0 6vh;
}
.world .kicker { margin-bottom: 18px; }
.world-map { position: relative; width: 100%; }
.world-map canvas { display: block; width: 100%; height: auto; }
.world-cities {
  margin-top: 5vh;
  font-size: 15px;
  color: var(--dim);
}
.world-close {
  position: absolute;
  top: 22px;
  right: var(--gutter);
  background: none; border: 0; padding: 0;
  color: var(--fg);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.world-close:hover { opacity: .5; }

.city {
  position: absolute;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--fg);
}
.city::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid var(--fg);
  border-radius: 50%;
  opacity: 0;
  animation: ping 2.4s var(--ease) infinite;
}
@keyframes ping { 0% { transform: scale(.4); opacity: .8; } 100% { transform: scale(1.8); opacity: 0; } }
.city span {
  position: absolute;
  left: 14px;
  top: -7px;
  white-space: nowrap;
  font-size: 14px;
  color: var(--fg);
}
.city.up span   { top: -24px; left: 6px; }
.city.down span { top: 10px; left: 6px; }
.city.left span { left: auto; right: 14px; }
@media (max-width: 700px) {
  .city { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; }
  .city::after { inset: -3px; }
  .city span { display: none; }
}

/* ---------- Colour test: one background per page, blended while scrolling ---------- */
:root[data-palette] { --blend: normal; }
:root[data-palette] body,
:root[data-palette] html { transition: none; }
:root[data-palette] .topbar { color: var(--fg); }
:root[data-palette] .tb-role,
:root[data-palette] .tb-time { color: var(--dim); }
:root[data-palette] .theme { display: none; }
:root[data-palette] .world { background: var(--bg); }

/* ---------- Work test: one fluid row of projects, moved by the scroll ---------- */
.reel { position: relative; }
.reel-stage { position: relative; height: calc(12vh + min(32vw, 52vh) * 1.25 + 90px); overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.reel-stage.dragging { cursor: grabbing; }
.reel-card img { -webkit-user-drag: none; }
.reel-card {
  position: absolute;
  left: 50%;
  top: 12vh;
  width: min(32vw, 52vh);
  margin-left: calc(min(32vw, 52vh) / -2);
  transform-origin: 50% 0;          /* neighbours shrink from the top, aligned with the centre */
  will-change: transform, opacity, filter;
}
.reel-card img { width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; display: block; border-radius: 9999px; }   /* straight sides, round top and bottom, as in Figma */
.reel-cap {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 18px);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 18px;
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.reel-cap span:first-child { color: var(--dim); }
.reel-view { border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.reel-card.center .reel-cap { opacity: 1; }
@media (max-width: 700px) {
  .reel-card { width: 64vw; margin-left: -32vw; }
}

/* A single cursive word follows the cursor over the project in the centre */
.view-cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 60;
  pointer-events: none;
  font-family: "Pinyon", cursive;
  font-size: 30px;
  line-height: 1;
  color: var(--fg);
  opacity: 0;
  scale: .8;
  transition: opacity .25s, scale .3s var(--ease);
}
.view-cursor.on { opacity: 1; scale: 1; }
@media (hover: none) { .view-cursor { display: none; } }

/* Clients map, as in Figma: pink background, dark type and pins, cream dots */
.world, :root[data-palette] .world, :root[data-theme="light"] .world { background: #F3A5A5; color: #161616; --dim: rgba(22, 22, 22, .5); --map-dot: #F4F3ED; }
.world .world-close { color: #161616; }
.world .city { background: #161616; }
.world .city::after { border-color: #161616; }

/* The name in the header: a sans serif, medium weight, as a small signature */
.tb-name {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  letter-spacing: 0;
}

/* ---------- Clients page: the map ---------- */
.world-page { --map-dot: #F4F3ED; width: min(1100px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: 4vh 0 22vh; }
.world-page .world-map { position: relative; }
.world-page .world-map canvas { display: block; width: 100%; height: auto; }
.world-page .city { background: #161616; }
.world-page .city::after { border-color: #161616; }

/* ---------- Footer: info on the header's grid, then the name, large, cut by the edge ---------- */
.site-footer { overflow: hidden; }
.foot-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: var(--gutter);
  align-items: start;
  padding: 0 var(--gutter) 6vh;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: .01em;
  border-top: 1px solid var(--line);
  padding-top: 22px;
  margin: 0 var(--gutter);
  padding-left: 0; padding-right: 0;
}
.foot-grid .dim { color: var(--dim); }
.foot-grid .links { display: flex; flex-direction: column; }
.foot-grid a { width: fit-content; transition: opacity .3s; }
.foot-grid a:hover { opacity: .5; }
.foot-grid > span:first-child a { border-bottom: 1px solid currentColor; }
.foot-name {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 12.6vw;
  line-height: .8;
  letter-spacing: -0.045em;
  white-space: nowrap;
  text-align: center;
  height: .62em;                 /* the bottom of the letters runs off the page */
  margin-top: 2vh;
}
@media (max-width: 700px) {
  .foot-grid { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .foot-grid > span:empty { display: none; }
}
.legal {
  position: absolute;
  left: 0; right: 0;
  bottom: 120px;
  text-align: center;
  font-size: 13px;
  color: var(--dim);
}
@media (max-width: 700px) {
  .legal { bottom: 90px; padding: 0 var(--gutter); }
}
/* the menu steps aside when the footer's name comes into view */
.menu { transition: opacity .5s; }
.menu.away { opacity: 0; pointer-events: none; }

/* Header sits on the page colour, so text scrolling underneath never overlaps it */
:root[data-palette] .topbar { background: var(--bg); padding-bottom: 14px; }

/* About: the sentences sit above the photo, so it never covers the words */
.read-text { z-index: 2; }

/* ---------- Phones: less empty space, shorter scrolls ---------- */
@media (max-width: 700px) {
  /* content peeks in under the title on the first screen */
  .reel { margin-top: -22svh; }
  .reel-stage { height: calc(4vh + 80vw + 70px); }
  .reel-card { top: 4vh; }
  .world-page { margin-top: -30svh; padding: 0 0 12vh; }
  .contact-page { padding-top: 16vh; padding-bottom: 12vh; min-height: 0; }
  .contact-page h1 { margin-bottom: 20px; }
  .contact-intro { margin-bottom: 5vh; }
  .form { gap: 18px; }
  /* the next page arrives sooner */
  .next { height: 135vh; }
  .gallery { gap: 48px; padding-bottom: 10vh; }
}

/* Phones: the menu sits on a soft band of the page colour, readable over images */
@media (max-width: 700px) {
  .menu {
    left: 0; right: 0;
    transform: none;
    bottom: 0;
    padding: 34px 0 16px;
    text-align: center;
    background: linear-gradient(to top, var(--bg) 58%, transparent);
  }
}

/* Phones: no pull-to-refresh, so pulling down at the top can go back a page */
@media (max-width: 700px) { html { overscroll-behavior-y: none; } }

/* ---------- Project pages: the story in three short beats, and a way back ---------- */
.project .page-title .sub { max-width: 44ch; }
.case {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 64px);
  max-width: 1100px;
  margin: 0 auto;
  font-size: var(--body);
  line-height: 1.45;
}
.case.single { grid-template-columns: 1fr; max-width: 46ch; text-align: center; }
.case .tag { position: static; translate: none; opacity: 1; white-space: normal; display: block; margin-bottom: 14px; }
.project-end {
  position: relative;
  height: 80svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--gutter);
}
.back-link { display: flex; flex-direction: column; align-items: center; color: inherit; text-decoration: none; }
.back-title {
  font-size: clamp(40px, 6.2vw, 108px);
  line-height: .98;
  letter-spacing: -0.015em;
  transition: opacity .4s var(--ease);
}
.back-link:hover .back-title { opacity: .55; }
@media (max-width: 700px) {
  .case { grid-template-columns: 1fr; gap: 32px; }
  .project-end { height: 70svh; }
  .project .page-title { min-height: 84svh; }
}