/* Okafor & Quist
   The showcard stall: dayglo card for claims, white tickets for reading,
   a black board for the work, orange starbursts for whatever acts or moved.
   Everything is lettered by hand: the claims with a big brush (Knewave),
   the small print with a small one (Recursive Casual).
   One ink (black). No greys. Depth by overlap, never by shading. */

@font-face {
  font-family: "Knewave";
  src: url("../fonts/knewave.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Recursive Casual";
  src: url("../fonts/recursive-casual-var.woff2") format("woff2");
  font-weight: 300 1000;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("../fonts/courier-prime-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --card: #ffef3a;      /* claims */
  --pink: #ff4fa0;      /* the studio's opinions */
  --star: #ff5a1f;      /* what acts, what moved */
  --ticket: #ffffff;    /* reading */
  --board: #0f0f0e;     /* where the work is shown */
  --ink: #0b0b0a;
  --dusk: #15110e;
  --error: #b3261e;

  --hand: "Knewave", "Arial Black", sans-serif;
  --sans: "Recursive Casual", "Trebuchet MS", sans-serif;
  --typed: "Courier Prime", "Courier New", Courier, monospace;

  --t-claim: clamp(3rem, min(9vw, 13.5svh), 9.5rem);
  --t-xl: clamp(2.5rem, 5.4vw, 5.4rem);
  --t-l: clamp(1.7rem, 2.8vw, 2.7rem);
  --t-m: clamp(1.1rem, 0.96rem + 0.55vw, 1.38rem);
  --t-s: clamp(1rem, 0.96rem + 0.12vw, 1.0625rem);

  --gutter: clamp(1rem, 4vw, 4rem);
  --col-gap: clamp(0.75rem, 2vw, 2rem);
  --section: clamp(5rem, 11vw, 10rem);
  --mh-h: 4.75rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-wipe: cubic-bezier(0.65, 0, 0.2, 1);

  color-scheme: light;
  scrollbar-color: var(--ink) var(--card);
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--mh-h);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--card);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-s);
  font-weight: 450;
  line-height: 1.55;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--star);
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
strong { font-weight: 800; }

::selection { background: var(--star); color: var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.tone-board :focus-visible,
.tone-footage :focus-visible { outline-color: var(--card); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip {
  position: fixed;
  left: var(--gutter);
  top: 0.75rem;
  z-index: 100;
  padding: 0.6rem 0.9rem;
  background: var(--ticket);
  color: var(--ink);
  font-weight: 800;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* ---------- grounds ---------- */

.tone-card { background: var(--card); color: var(--ink); }
.tone-pink { background: var(--pink); color: var(--ink); }
.tone-board { background: var(--board); color: var(--ticket); }
.tone-ticket { background: var(--ticket); color: var(--ink); }
.tone-footage { background: var(--dusk); color: var(--ticket); }

.section { padding: var(--section) var(--gutter); }
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
}

/* ---------- voices ---------- */

.claim {
  font-family: var(--hand);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: 0.005em;
  text-wrap: balance;
}
.claim--xl { font-size: var(--t-xl); }
.claim--l { font-size: var(--t-l); line-height: 0.95; }
.lede { font-size: var(--t-m); line-height: 1.45; font-weight: 500; max-width: 40ch; text-wrap: pretty; }
.prose { max-width: 62ch; }
.prose p + p { margin-top: 1em; }
.say { font-size: var(--t-m); line-height: 1.5; font-weight: 500; max-width: 46ch; text-wrap: pretty; }

/* a marker swash under the words */
.swash {
  position: relative;
  display: inline-block;
  font-weight: 800;
  text-decoration: none;
  padding-bottom: 0.12em;
}
.swash::after {
  content: "";
  position: absolute;
  left: -3%;
  right: -3%;
  bottom: -0.16em;
  height: 0.42em;
  background: currentColor;
  -webkit-mask: url("../img/swash.svg") 0 0 / 100% 100% no-repeat;
  mask: url("../img/swash.svg") 0 0 / 100% 100% no-repeat;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.35s var(--ease-wipe);
}
.swash--quiet::after { clip-path: inset(0 100% 0 0); }
.swash--quiet:hover::after,
.swash--quiet:focus-visible::after,
.swash--quiet[aria-current="page"]::after { clip-path: inset(0 0 0 0); }
.swash:hover::after { animation: redraw 0.4s var(--ease-wipe); }
@keyframes redraw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* marker strike-through, for prices that changed */
.struck { position: relative; display: inline-block; }
.struck::after {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  top: 30%;
  height: 0.55em;
  background: var(--ink);
  -webkit-mask: url("../img/strike.svg") 0 0 / 100% 100% no-repeat;
  mask: url("../img/strike.svg") 0 0 / 100% 100% no-repeat;
}

/* ---------- starbursts: the price flash. Clickable ones wobble like a POS wobbler ---------- */

.star {
  --star-size: 12.5rem;
  --tilt: -9deg;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--star-size);
  height: var(--star-size);
  padding: calc(var(--star-size) * 0.17);
  background: var(--star);
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  -webkit-mask: url("../img/star.svg") center / contain no-repeat;
  mask: url("../img/star.svg") center / contain no-repeat;
  transform: rotate(var(--tilt));
  transform-origin: 50% 50%;
}
.star__label {
  font-family: var(--hand);
  font-size: calc(var(--star-size) * 0.135);
  line-height: 0.95;
  text-transform: uppercase;
}
a.star:hover,
a.star:focus-visible,
button.star:hover,
button.star:focus-visible { animation: wobble 0.9s var(--ease-out); }
/* keyboard focus inverts the flash: an outline would be cut by the star's own shape */
a.star:focus-visible,
button.star:focus-visible { outline: none; background: var(--ink); color: var(--card); }
button.star { border: 0; cursor: pointer; font: inherit; }
@keyframes wobble {
  0% { transform: rotate(var(--tilt)); }
  18% { transform: rotate(calc(var(--tilt) + 9deg)); }
  36% { transform: rotate(calc(var(--tilt) - 6deg)); }
  54% { transform: rotate(calc(var(--tilt) + 3.5deg)); }
  72% { transform: rotate(calc(var(--tilt) - 1.5deg)); }
  100% { transform: rotate(var(--tilt)); }
}

/* ---------- cards, tickets, tags ---------- */

.ticket, .showcard {
  --tilt: 0deg;
  position: relative;
  padding: clamp(1.15rem, 2.5vw, 2.1rem) clamp(1.25rem, 2.6vw, 2.25rem);
  transform: rotate(var(--tilt));
}
.ticket { background: var(--ticket); color: var(--ink); }
.showcard { background: var(--card); color: var(--ink); }

/* the price tag: notched top, a punched hole, a string up to the rail */
.tag {
  --tilt: 0deg;
  position: relative;
  display: inline-block;
  max-width: 100%;
  padding: 2.3rem 1.4rem 1.3rem;
  background: var(--ticket);
  color: var(--ink);
  clip-path: polygon(16% 0, 84% 0, 100% 14%, 100% 100%, 0 100%, 0 14%);
  transform: rotate(var(--tilt));
  transform-origin: 50% 0;
}
.tag::before {
  content: "";
  position: absolute;
  top: 0.85rem;
  left: 50%;
  width: 0.75rem;
  height: 0.75rem;
  margin-left: -0.375rem;
  border-radius: 50%;
  background: var(--board);
}
.tone-card .tag::before, .tone-pink .tag::before, .showcard .tag::before { background: var(--card); }
.tag__who { font-weight: 800; font-size: 0.95rem; }
.tag__fig { margin-top: 0.4rem; font-family: var(--hand); text-transform: uppercase; line-height: 0.95; }
.tag__was { display: block; font-size: 1.35rem; }
.tag__now { display: block; font-size: clamp(2.4rem, 4vw, 3.6rem); }
.tag__what { margin-top: 0.4rem; font-size: 0.95rem; font-weight: 600; max-width: 22ch; }
.tag__why { margin-top: 0.85rem; font-size: 0.95rem; font-weight: 800; max-width: 26ch; }

/* a rubber stamp, for results that aren't a before and after. Inked through a
   speckle mask, so it prints unevenly like a real stamp. */
.stamp {
  display: inline-block;
  padding: 0.35rem 0.8rem 0.4rem;
  border: 4px solid currentColor;
  outline: 2px solid currentColor;
  outline-offset: 3px;
  color: var(--star);
  font-family: var(--hand);
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  line-height: 1;
  text-transform: uppercase;
  transform: rotate(-6deg);
  -webkit-mask: url("../img/ink.svg") 0 0 / 190px 190px repeat;
  mask: url("../img/ink.svg") 0 0 / 190px 190px repeat;
}
.tone-card .stamp, .ticket .stamp, .tag .stamp { color: var(--ink); }

/* ---------- plates: footage seen through cut card ---------- */

.plate {
  position: relative;
  overflow: hidden;
  background: var(--dusk);
}
.plate > img,
.plate > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.plate > canvas { opacity: 0; }
.plate.is-live > canvas { opacity: 1; }
.plate--bottle, .plate--arch, .plate--amp {
  background: transparent;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.plate--bottle { -webkit-mask-image: url("../img/matte-bottle.svg"); mask-image: url("../img/matte-bottle.svg"); -webkit-mask-size: contain; mask-size: contain; }
.plate--arch { -webkit-mask-image: url("../img/matte-arch.svg"); mask-image: url("../img/matte-arch.svg"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.plate--amp { -webkit-mask-image: url("../img/amp.svg"); mask-image: url("../img/amp.svg"); -webkit-mask-size: contain; mask-size: contain; }
.plate--round { border-radius: 50%; }

.js .project__plate.is-pending { clip-path: inset(0 0 100% 0); }
.js .project__plate.is-framed { clip-path: inset(0 0 0 0); transition: clip-path 0.9s var(--ease-wipe); }

/* ---------- masthead ---------- */

.masthead {
  --fg: var(--ink);
  --bg: var(--card);
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: var(--mh-h);
  padding: 0 var(--gutter);
  color: var(--fg);
  background: var(--bg);
  transition: transform 0.45s var(--ease-out), background-color 0.2s, color 0.2s;
}
.masthead[data-tone="pink"] { --fg: var(--ink); --bg: var(--pink); }
.masthead[data-tone="ticket"] { --fg: var(--ink); --bg: var(--ticket); }
.masthead[data-tone="board"] { --fg: var(--ticket); --bg: var(--board); }
.masthead[data-tone="footage"] { --fg: var(--ticket); --bg: var(--dusk); }
.masthead.is-hidden { transform: translateY(-101%); }
.masthead :focus-visible { outline-color: currentColor; }
.wordmark {
  font-family: var(--hand);
  font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.7rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transform: rotate(-1.5deg);
}
.masthead__nav { margin-left: auto; }
.masthead__nav ul { display: flex; flex-wrap: wrap; gap: 0.4rem clamp(1rem, 2.2vw, 2rem); }
.masthead__nav a { font-size: 0.98rem; font-weight: 750; }
.masthead__cta { font-size: 0.98rem; font-weight: 850; white-space: nowrap; }
.masthead__cta::after { background: var(--star); }
.masthead[data-tone="board"] .masthead__cta::after,
.masthead[data-tone="footage"] .masthead__cta::after { background: var(--card); }
.masthead__menu {
  display: none;
  margin-left: auto;
  padding: 0.55rem 0.2rem;
  background: none;
  border: 0;
  font-family: var(--hand);
  font-size: 1.3rem;
  text-transform: uppercase;
  cursor: pointer;
}

.menu {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--mh-h) + 1.25rem) var(--gutter) 2rem;
  background: var(--card);
  color: var(--ink);
  overflow-y: auto;
}
.menu[hidden] { display: none; }
.menu__list a {
  display: inline-block;
  padding: 0.12em 0;
  font-family: var(--hand);
  font-size: clamp(2.2rem, 11vw, 3.4rem);
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
}
.menu__list a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 4px; }
.menu__foot { font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .menu.is-open .menu__list li { animation: deal 0.4s var(--ease-out) both; }
  .menu.is-open .menu__list li:nth-child(2) { animation-delay: 0.035s; }
  .menu.is-open .menu__list li:nth-child(3) { animation-delay: 0.07s; }
  .menu.is-open .menu__list li:nth-child(4) { animation-delay: 0.105s; }
  .menu.is-open .menu__list li:nth-child(5) { animation-delay: 0.14s; }
  .menu.is-open .menu__list li:nth-child(6) { animation-delay: 0.175s; }
}
@keyframes deal {
  from { transform: translateX(-0.6em) rotate(-2deg); clip-path: inset(0 100% 0 0); }
  to { transform: none; clip-path: inset(0 0 0 0); }
}

@media (max-width: 960px) {
  .js .masthead__nav, .js .masthead__cta { display: none; }
  .js .masthead__menu { display: block; }
  :root { --mh-h: 4rem; }
}
@media (max-width: 960px) {
  html:not(.js) .masthead { position: relative; flex-wrap: wrap; padding-block: 1rem; }
  html:not(.js) .masthead__nav { margin-left: 0; width: 100%; }
}

/* ---------- home: the first card ----------
   A flowing grid, so nothing can sit on anything else at any zoom.
   The scroll truck-in is switched on only when it all fits one screen. */

.hero {
  --claim-fs: clamp(2.6rem, min(7vw, 10.5svh), 8rem);
  --amp-h: min(42svh, 30vw);
  --hero-pt: calc(var(--mh-h) + 2svh);
  position: relative;
  background: var(--card);
}
/* scroll travel for the truck-in: about half a screen, one swipe or a couple of wheel turns */
.hero.is-zoomable { height: calc(100svh + 60svh); }
.hero__stage { position: relative; }
.hero.is-zoomable .hero__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
/* present from the start (its canvas stays clear until a frame is drawn) so it can report as on screen */
.hero__screen { position: absolute; }
.hero__matte { position: absolute; inset: 0; width: 100%; height: 100%; display: none; pointer-events: none; }
.hero__matte-card { fill: var(--card); }
.hero.is-live .hero__matte { display: block; }

.hero__content {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  grid-template-areas: "claim ticket" "claim caption";
  column-gap: clamp(2rem, 6vw, 6rem);
  row-gap: 1rem;
  padding: var(--hero-pt) var(--gutter) clamp(1rem, 3svh, 2rem);
}
.hero__claim { grid-area: claim; align-self: start; font-size: var(--claim-fs); line-height: 0.88; }
.hero__claim > span { display: block; }
/* the die-cut ampersand is the claim's second word: this gap keeps its place
   between WRITTEN and DIRECTED BY, and the mark is hung over it */
.hero__claim > .hero__gap { height: calc(var(--amp-h) + 0.3em); }
.hero__mark { position: absolute; left: var(--gutter); top: calc(var(--hero-pt) + var(--claim-fs) * 1.03); }
.hero__amp { display: block; height: var(--amp-h); aspect-ratio: 696.6 / 911.1; }
.hero__amp-poster {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--dusk) url("../img/plates/sorso.webp") 30% 50% / cover no-repeat;
  -webkit-mask: url("../img/amp.svg") center / contain no-repeat;
  mask: url("../img/amp.svg") center / contain no-repeat;
}
.hero.is-live .hero__amp-poster { visibility: hidden; }
.hero__star { position: absolute; left: calc(100% - 2.75rem); bottom: 3%; --star-size: clamp(7.5rem, 11vw, 11.5rem); }
.hero__ticket { --tilt: -0.8deg; grid-area: ticket; align-self: end; justify-self: end; width: min(30rem, 100%); font-size: var(--t-m); line-height: 1.42; }
.hero__ticket .swash { margin-top: 0.7rem; }
.hero__caption { grid-area: caption; justify-self: end; display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.85rem; font-weight: 800; }
.hero__timecode { font-variant-numeric: tabular-nums; }
.hero:not(.is-live) .hero__timecode { display: none; }

@keyframes cut-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes cut-on { 0%, 99% { visibility: hidden; } 100% { visibility: visible; } }
@media (prefers-reduced-motion: no-preference) {
  .hero__claim > span { animation: cut-in 0.55s var(--ease-wipe) both; }
  .hero__claim > span:nth-child(1) { animation-delay: 0.05s; }
  .hero__claim > span:nth-child(4) { animation-delay: 0.2s; }
  .hero__claim > span:nth-child(5) { animation-delay: 0.32s; }
  .hero__claim > span:nth-child(6) { animation-delay: 0.44s; }
  .hero__mark { animation: cut-on 0.2s linear both; }
  .hero__star { animation: cut-on 0.75s linear both; }
  .hero__ticket { animation: cut-on 0.6s linear both; }
}
.hero.is-cut .hero__claim,
.hero.is-cut .hero__star,
.hero.is-cut .hero__ticket,
.hero.is-cut .hero__caption { opacity: 0; pointer-events: none; }

/* Wide screens: a diagonal poster. WRITTEN top left, the die-cut & filling the
   middle, DIRECTED BY THE SAME PEOPLE stepping down from its foot, the ticket
   hung off the foot. The & is sized from what the screen has left, so the
   card always fits one screen and the truck-in stays on. */
@media (min-width: 1000px) and (min-height: 600px) and (min-aspect-ratio: 4/3), (min-width: 1200px) and (min-height: 600px) and (min-aspect-ratio: 5/4) {
  .hero {
    --claim-fs: clamp(3rem, min(6vw, 9.2svh), 8rem);
    --hero-pb: clamp(1rem, 3svh, 2rem);
    --amp-h: min(calc(100svh - var(--hero-pt) - var(--hero-pb) - var(--claim-fs) * 2.64 - 2.75rem), 52vw);
  }
  .hero__content {
    grid-template-columns: max-content auto minmax(0, 1fr);
    grid-template-rows: auto 1fr auto auto auto;
    grid-template-areas: none;
    column-gap: clamp(1.5rem, 3vw, 3rem);
    row-gap: 0;
    padding-bottom: var(--hero-pb);
  }
  .hero__claim { grid-area: 1 / 1 / 6 / 4; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }
  .hero__claim > span:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
  .hero__claim > .hero__gap { display: none; }
  .hero__claim > span:nth-child(4) { grid-area: 3 / 2 / 4 / 4; margin-top: 1.25rem; }
  .hero__claim > span:nth-child(5) { grid-area: 4 / 2 / 5 / 4; }
  .hero__claim > span:nth-child(6) { grid-area: 5 / 2 / 6 / 4; }
  .hero__mark { position: relative; left: auto; top: auto; grid-area: 1 / 2 / 3 / 3; align-self: end; }
  .hero__star { left: calc(100% - 3.5rem); top: 2%; bottom: auto; }
  .hero__ticket { grid-area: 1 / 3 / 3 / 4; align-self: end; justify-self: start; margin-left: clamp(-3.5rem, -3vw, -2rem); width: min(31em, calc(100% + 2rem)); font-size: clamp(1.05rem, 1.3vw, 1.4rem); }
  /* out of the flow: the reel title changes length every cut and must never resize the card */
  .hero__caption { position: absolute; right: var(--gutter); bottom: var(--hero-pb); max-width: 34%; flex-direction: column; align-items: flex-end; gap: 0.1rem; text-align: right; }
}

@media (max-width: 700px) {
  .hero { --claim-fs: clamp(2.5rem, min(14.5vw, 9.5svh), 5.5rem); --amp-h: min(30svh, 58vw); --hero-pt: calc(var(--mh-h) + 1svh); }
  .hero__content { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "claim" "ticket"; row-gap: 1.5rem; }
  .hero__ticket { justify-self: stretch; width: auto; font-size: 1rem; padding: 1rem 1.1rem; }
  .hero__star { left: calc(100% + 0.25rem); bottom: 8%; --star-size: clamp(6.5rem, 26vw, 8.5rem); }
  .hero__caption { display: none; }
}

/* ---------- the work stall ---------- */

.work-head { align-items: end; margin-bottom: clamp(3.5rem, 9vw, 8rem); }
.work-head .claim { grid-column: 1 / span 7; }
.work-head .lede { grid-column: 9 / span 4; }

.project {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: center;
  margin-bottom: clamp(7rem, 15vw, 13rem);
}
.project__card { z-index: 2; }
.project__card .claim { font-size: var(--t-xl); }
.project__idea { margin-top: 1.1rem; max-width: 40ch; font-size: var(--t-m); line-height: 1.42; font-weight: 500; }
.project__more { margin-top: 1.25rem; }
.project .result { z-index: 3; }
.project .result__flash { --star-size: clamp(9.5rem, 12vw, 12rem); }

.project--ninefold .project__plate { grid-column: 1 / -1; grid-row: 1; margin-inline: calc(var(--gutter) * -1); aspect-ratio: 2.39 / 1; }
.project--ninefold .project__card { --tilt: -1.2deg; grid-column: 1 / span 6; grid-row: 1; align-self: end; margin-bottom: -3rem; }
.project--ninefold .result { grid-column: 8 / span 5; grid-row: 1; align-self: end; justify-self: end; margin-bottom: -6rem; }

.project--sorso .project__plate { grid-column: 1 / span 5; height: clamp(28rem, 86svh, 50rem); }
.project--sorso .project__card { --tilt: 1deg; grid-column: 6 / span 6; margin-left: -4rem; }
.project--sorso .result { position: absolute; right: -2rem; top: calc(100% - 3rem); }
.project--sorso { margin-bottom: clamp(14rem, 22vw, 18rem); }

.project--oda .project__plate { grid-column: 7 / span 5; grid-row: 1; aspect-ratio: 1; }
.project--oda .project__card { --tilt: -2deg; grid-column: 2 / span 4; grid-row: 1; align-self: end; padding: 1rem 1.25rem 1.1rem; }
.project--oda .project__card .claim { font-size: var(--t-l); }
.project--oda .project__card .project__idea { font-size: 1rem; }
.project--oda .stamp { grid-column: 9 / span 4; grid-row: 1; align-self: end; justify-self: start; z-index: 3; background: var(--board); }

.project--albion .project__plate { grid-column: 1 / span 6; aspect-ratio: 4 / 5; }
.project--albion .project__card { --tilt: 1.4deg; grid-column: 7 / span 5; margin-left: -3rem; align-self: end; }
.project--albion .flash { position: absolute; right: -2.5rem; top: -4.5rem; --star-size: 8rem; --tilt: 10deg; }
.flash .star__label { font-size: calc(var(--star-size) * 0.26); line-height: 1; text-transform: none; }

.project--hatch .project__plate { grid-column: 5 / -1; grid-row: 1; margin-right: calc(var(--gutter) * -1); aspect-ratio: 16 / 10; }
.project--hatch .project__card { --tilt: -1deg; grid-column: 1 / span 5; grid-row: 1; align-self: end; margin-bottom: -2.5rem; }
.project--hatch .stamp { grid-column: 9 / span 4; grid-row: 1; align-self: start; justify-self: end; margin-top: 2rem; z-index: 3; background: var(--card); color: var(--ink); border-color: var(--ink); outline-color: var(--ink); }

.stall-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }

@media (max-width: 960px) {
  .work-head .claim, .work-head .lede { grid-column: 1 / -1; }
  .work-head .lede { margin-top: 1rem; }
  .project { row-gap: 1.5rem; }
  .project > * { grid-column: 1 / -1 !important; grid-row: auto !important; margin-left: 0 !important; margin-bottom: 0 !important; }
  .project--ninefold .project__plate { aspect-ratio: 4 / 3; }
  .project--ninefold .project__card { margin-top: -3rem; }
  .project .result { justify-self: start !important; position: relative !important; right: auto !important; top: auto !important; margin: 0 !important; }
  .project--sorso .project__plate { height: 70svh; max-height: 34rem; }
  .project--oda .project__plate { width: 80%; justify-self: end; }
  .project--albion .flash { right: 0.5rem; top: -3.5rem; --star-size: 6.5rem; }
  .project--hatch .project__plate { margin-right: calc(var(--gutter) * -1); }
  .project .stamp { justify-self: start !important; }
}

/* ---------- point of view ---------- */

.pov .claim { max-width: 15ch; }
.pov__lede { margin-top: 1.5rem; }
.pov__edit { margin: clamp(4rem, 9vw, 7.5rem) 0; font-size: var(--t-l); font-weight: 700; line-height: 1.3; max-width: 30ch; }
.pov__struck { position: relative; display: inline-block; }
.pov__struck::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  top: 22%;
  height: 0.7em;
  background: var(--ink);
  -webkit-mask: url("../img/strike.svg") 0 0 / 100% 100% no-repeat;
  mask: url("../img/strike.svg") 0 0 / 100% 100% no-repeat;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.5s var(--ease-wipe) 0.1s;
}
.pov__edit.is-pending .pov__struck::after { clip-path: inset(0 100% 0 0); transition: none; }
.pov__insert { display: inline-block; margin: 0 0.16em 0 0.12em; font-family: var(--hand); font-size: 1.25em; line-height: 0.8; transform: rotate(-8deg); }
.pov__last { display: block; margin-top: 0.45em; font-family: var(--hand); font-weight: 400; font-size: 1.35em; text-transform: uppercase; line-height: 0.95; }

/* the three opinions: lettered at three sizes, never boxed */
.opinions { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: clamp(2.5rem, 6vw, 4.5rem); }
.opinion h3 { font-family: var(--hand); font-weight: 400; text-transform: uppercase; line-height: 0.95; text-wrap: balance; }
.opinion p { margin-top: 0.8rem; max-width: 40ch; font-weight: 500; }
.opinion:nth-child(1) { grid-column: 1 / span 7; }
.opinion:nth-child(1) h3 { font-size: var(--t-xl); }
.opinion:nth-child(2) { grid-column: 7 / span 6; transform: rotate(-1.5deg); }
.opinion:nth-child(2) h3 { font-size: var(--t-l); }
.opinion:nth-child(3) { grid-column: 2 / span 8; }
.opinion:nth-child(3) h3 { font-size: clamp(2rem, 4vw, 3.8rem); }
.pov__more { margin-top: 3.5rem; }
@media (max-width: 960px) { .opinion { grid-column: 1 / -1 !important; } }

/* ---------- the stall: eight signs hung together (capabilities) ---------- */

.stall-head { align-items: end; margin-bottom: clamp(3rem, 6vw, 5rem); }
.stall-head .claim { grid-column: 1 / span 7; }
.stall-head .lede { grid-column: 8 / span 5; }
.stall {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "s1 s1 s1 s1 s1 s2 s2 s3 s3 s3 s3 s3"
    "s1 s1 s1 s1 s1 s2 s2 s4 s4 s4 s5 s5"
    "s6 s6 s6 s6 s6 s2 s2 s4 s4 s4 s5 s5"
    ".  s7 s7 s7 s7 s7 s7 .  s8 s8 s8 . ";
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: start;
}
.sign { position: relative; color: var(--ink); transform: rotate(var(--tilt, 0deg)); }
.sign h3 { font-family: var(--hand); font-weight: 400; text-transform: uppercase; line-height: 0.92; font-size: var(--t-l); }
.sign p { margin-top: 0.55rem; font-size: 0.98rem; font-weight: 600; line-height: 1.4; max-width: 28ch; }
.sign--card { background: var(--card); padding: clamp(1.1rem, 2.2vw, 1.9rem); }
.sign--ticket { background: var(--ticket); padding: clamp(1rem, 2vw, 1.6rem); }
.sign--strip { background: var(--ticket); padding: 1.4rem 1rem; text-align: center; }
.sign--strip h3 span { display: block; }
.sign--strip p { margin-inline: auto; }
.sign--board { background: var(--board); color: var(--ticket); padding: clamp(1rem, 2vw, 1.6rem); }
.sign--board h3 { color: var(--card); }
.sign--star {
  --s: clamp(11rem, 16vw, 15rem);
  display: grid;
  place-items: center;
  align-content: center;
  width: var(--s);
  height: var(--s);
  padding: calc(var(--s) * 0.2);
  background: var(--star);
  text-align: center;
  -webkit-mask: url("../img/star.svg") center / contain no-repeat;
  mask: url("../img/star.svg") center / contain no-repeat;
}
.sign--star h3 { font-size: calc(var(--s) * 0.13); }
.sign--star p { font-size: calc(var(--s) * 0.07); margin-top: 0.3rem; }
.sign--tag { padding: 2.3rem 1.2rem 1.2rem; background: var(--ticket); clip-path: polygon(16% 0, 84% 0, 100% 14%, 100% 100%, 0 100%, 0 14%); transform-origin: 50% 0; }
.sign--tag::before { content: ""; position: absolute; top: 0.85rem; left: 50%; width: 0.75rem; height: 0.75rem; margin-left: -0.375rem; border-radius: 50%; background: var(--board); }
.s1 { grid-area: s1; --tilt: -1.8deg; }
.s1 h3 { font-size: var(--t-xl); }
.s2 { grid-area: s2; --tilt: 1.2deg; }
.s3 { grid-area: s3; --tilt: 0.8deg; }
.s4 { grid-area: s4; --tilt: -8deg; justify-self: center; }
.s5 { grid-area: s5; --tilt: 4deg; justify-self: center; }
.s6 { grid-area: s6; --tilt: 1.4deg; }
.s7 { grid-area: s7; --tilt: -0.7deg; }
.s8 { grid-area: s8; --tilt: 9deg; justify-self: center; }
.stall-note { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; margin-top: clamp(3rem, 6vw, 4.5rem); }
@media (max-width: 960px) {
  .stall-head .claim, .stall-head .lede { grid-column: 1 / -1; }
  .stall-head .lede { margin-top: 1rem; }
  .stall { grid-template-columns: 1fr 1fr; grid-template-areas: "s1 s1" "s2 s3" "s4 s5" "s6 s6" "s7 s8"; }
  .sign--star { --s: min(40vw, 11rem); }
}

/* ---------- case: Halden (home and its own page) ---------- */

.case { position: relative; background: var(--dusk); color: var(--ticket); }
.case__plate { position: sticky; top: 0; height: 100svh; background: var(--dusk); }
.case__track {
  position: relative;
  margin-top: -100svh;
  padding: 0 var(--gutter) 10svh;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
}
.case__opening { grid-column: 1 / -1; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding-bottom: clamp(2rem, 8svh, 5rem); }
.case__card { --tilt: -1.4deg; width: min(100%, 46rem); }
.case__card .claim { font-size: var(--t-xl); }
.case__meta { margin-top: 1.1rem; font-size: var(--t-m); line-height: 1.4; font-weight: 500; }
.insert { margin-top: 38svh; }
.insert--brief { grid-column: 1 / span 5; margin-top: 22svh; --tilt: -0.8deg; }
.insert--idea { grid-column: 3 / span 8; --tilt: 0.6deg; }
.insert--making { grid-column: 6 / -1; --tilt: -0.4deg; }
.insert--results { grid-column: 1 / -1; background: none; padding: 0; }
.runin { display: inline; font-size: var(--t-m); font-weight: 900; line-height: 1.45; margin-right: 0.22em; }
.runin + p { display: inline; font-size: var(--t-m); line-height: 1.45; font-weight: 500; }
.insert p + p { margin-top: 0.9rem; }
.insert--brief p { font-size: var(--t-m); line-height: 1.45; }
.insert--idea .runin { font-size: var(--t-l); }
.insert__big { display: inline; font-family: var(--hand); font-size: var(--t-xl); line-height: 0.95; text-transform: uppercase; }
.insert--idea .insert__big + p { display: block; margin-top: 1.4rem; max-width: 52ch; font-size: var(--t-s); }
.making { margin-top: 1.2rem; }
.making p { font-size: 1rem; }
.making p + p { margin-top: 0.8rem; }
.tidecard { margin: 1.25rem 0 1.4rem; padding: 1.1rem 1.25rem 1.2rem; background: var(--card); transform: rotate(-1.2deg); max-width: 24rem; }
.tidecard__head { font-family: var(--hand); font-size: 1.3rem; line-height: 1; text-transform: uppercase; }
.tidecard__list { margin-top: 0.5rem; }
.tidecard__list li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.tidecard__day { font-weight: 800; }
.tidecard__time { font-family: var(--hand); font-size: 1.9rem; line-height: 1.05; }

/* results: orange price flashes, each with its reason on a ticket, never a row of equals */
.moved { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem); margin-top: 1.5rem; }
.moved__intro { flex: 1 0 100%; }
.moved__ticket { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.9rem; max-width: 40rem; padding: 0.9rem 1.15rem; }
.result { position: relative; display: flex; align-items: center; }
.result__flash { flex: none; }
.result__was { display: block; font-size: calc(var(--star-size) * 0.095); margin-bottom: 0.15em; }
.result__now { display: block; font-size: calc(var(--star-size) * 0.2); line-height: 0.9; }
.result__note { position: relative; max-width: 17rem; margin-left: -1.5rem; padding: 0.85rem 1rem 0.9rem; background: var(--ticket); color: var(--ink); font-size: 0.95rem; line-height: 1.4; transform: rotate(var(--note-tilt, 2deg)); }
.result__note strong { display: block; margin-bottom: 0.3rem; font-weight: 850; }
.result--1 .result__flash { --star-size: clamp(11rem, 15vw, 14rem); --tilt: -8deg; }
.result--2 { margin-top: 4rem; flex-direction: row-reverse; }
.result--2 .result__note { margin-left: 0; margin-right: -1.5rem; --note-tilt: -2.5deg; }
.result--2 .result__flash { --star-size: clamp(9rem, 11vw, 11rem); --tilt: 9deg; }
.result--3 { margin-top: 1.5rem; }
.result--3 .result__flash { --star-size: clamp(10rem, 13vw, 12.5rem); --tilt: -3deg; }
.result--stamp { flex-direction: column; align-items: flex-start; gap: 1rem; }
.result--stamp .result__note { margin: 0 0 0 1.25rem; }
.result--stamp .stamp { font-size: clamp(1.8rem, 3vw, 2.8rem); }

.case__end { grid-column: 1 / -1; min-height: 90svh; display: grid; place-items: center; }
.case__checkout { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 0.3em; font-family: var(--hand); font-size: var(--t-claim); line-height: 1; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.case__checkout span { font-size: 0.45em; }
.case__link { margin-top: 2rem; }
@media (max-width: 960px) {
  .insert { grid-column: 1 / -1 !important; margin-top: 32svh; }
  .insert--brief { margin-top: 16svh; }
  .result, .result--2 { flex-direction: column; align-items: flex-start; margin-top: 0; }
  .result__note, .result--2 .result__note { margin: -1.25rem 0 0 1.5rem; }
}

/* ---------- how a job runs: one paragraph lettered like a shop window ---------- */

.runs {
  max-width: 27em;
  margin: clamp(2.25rem, 5vw, 4rem) 0 0 auto;
  font-size: clamp(1.25rem, 2.25vw, 2.1rem);
  font-weight: 500;
  line-height: 1.5;
  text-wrap: pretty;
}
.runs b {
  font-family: var(--hand);
  font-weight: 400;
  font-size: 1.36em;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
@media (max-width: 700px) {
  .runs { margin-left: 0; line-height: 1.45; }
  .runs b { font-size: 1.24em; }
}

/* ---------- names lettered as one sign (clients, people) ---------- */

.namesign { margin-top: 2.5rem; font-family: var(--hand); font-size: clamp(1.6rem, 3.4vw, 3.2rem); line-height: 1.15; text-transform: uppercase; text-wrap: balance; }
.namesign span { white-space: nowrap; margin-right: 0.55em; }
.namesign span:nth-child(3n+2) { font-size: 0.82em; }
.namesign__note { margin-top: 2rem; font-weight: 700; }
.poster { margin-top: 2.5rem; text-align: center; text-wrap: balance; line-height: 1.25; }
.poster__name { font-family: var(--hand); font-size: clamp(1.7rem, 3.4vw, 3.2rem); text-transform: uppercase; white-space: nowrap; }
.poster__role { font-size: clamp(0.9rem, 0.8rem + 0.4vw, 1.15rem); font-weight: 700; margin: 0 0.9em 0 0.35em; white-space: nowrap; }

/* ---------- studio: the typed page ---------- */

.studio-row { row-gap: 3.5rem; }
.studio__copy { grid-column: 1 / span 6; }
.script { grid-column: 8 / span 5; align-self: start; }
.script__page { --tilt: 1.2deg; font-family: var(--typed); font-size: clamp(0.8rem, 0.62rem + 0.42vw, 0.98rem); line-height: 1.32; padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem) clamp(2.5rem, 4vw, 4rem) clamp(1.75rem, 3.6vw, 3.6rem); }
.script__page p + p { margin-top: 1.32em; }
.script__num { position: absolute; top: clamp(1rem, 2vw, 1.75rem); right: clamp(1.25rem, 2.5vw, 2.25rem); }
.script__slug { text-transform: uppercase; }
.script__cue { margin-left: 38%; text-transform: uppercase; }
.script__cue + .script__line { margin-top: 0 !important; }
.script__line { margin-left: 18%; max-width: 62%; }
.script__trans--right { text-align: right; }
@media (max-width: 960px) { .studio__copy, .script { grid-column: 1 / -1; } }

/* ---------- final card ---------- */

.finale { position: relative; min-height: 100svh; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-content: center; overflow: hidden; }
.finale__amp { grid-column: 9 / -1; grid-row: 1 / 3; align-self: center; justify-self: end; width: min(100%, 26rem); aspect-ratio: 696.6 / 911.1; }
.finale__title { grid-column: 1 / span 8; grid-row: 1; font-size: var(--t-claim); }
.credit { grid-column: 1 / span 8; grid-row: 2; margin-top: clamp(2rem, 5vw, 3.5rem); display: flex; flex-wrap: wrap; align-items: center; gap: 2rem 3rem; }
.credit__ticket { --tilt: -0.8deg; flex: 1 1 26rem; }
.credit__role { font-weight: 850; }
.credit__names { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2em 0.4em; margin-top: 0.35rem; font-family: var(--hand); font-size: var(--t-l); line-height: 1.1; text-transform: uppercase; }
.credit__input { width: 9em; min-width: 0; padding: 0 0 0.05em; background: transparent; border: 0; border-bottom: 4px solid var(--ink); border-radius: 0; font-family: var(--hand); font-size: 1em; text-transform: uppercase; caret-color: var(--star); }
.credit__input::placeholder { color: var(--ink); opacity: 0.72; }
.credit__input:focus { outline: none; border-bottom-color: var(--star); }
.credit__input:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; }
.credit__direct { margin-top: 1.1rem; font-weight: 600; }
.credit__direct a { font-weight: 850; }
.credit .star { --star-size: clamp(10rem, 14vw, 12.5rem); flex: none; }
@media (max-width: 960px) {
  .finale { align-content: end; }
  .finale__amp { grid-column: 1 / -1; grid-row: 1; justify-self: end; width: min(48vw, 15rem); margin-bottom: 1rem; }
  .finale__title { grid-column: 1 / -1; grid-row: 2; font-size: clamp(2.6rem, 14vw, 5rem); }
  .credit { grid-column: 1 / -1; grid-row: 3; }
  .credit__input { width: 100%; }
}

/* ---------- inner pages ---------- */

.opening { padding: calc(var(--mh-h) + clamp(3rem, 9svh, 6rem)) var(--gutter) clamp(3.5rem, 8vw, 6.5rem); }
.opening .claim { font-size: var(--t-claim); max-width: 13ch; }
.opening .lede { margin-top: 1.75rem; }
.opening__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.opening .star { --star-size: clamp(9rem, 13vw, 12rem); }

/* work index: each job lettered as its own sign */
.signlist { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.signlist a { display: inline-block; text-decoration: none; transform: rotate(var(--tilt, 0deg)); }
.signlist li:nth-child(odd) a { --tilt: -1deg; }
.signlist li:nth-child(even) { text-align: right; }
.signlist li:nth-child(even) a { --tilt: 1deg; }
.signlist__line { display: inline; padding: 0.04em 0.2em; font-family: var(--hand); font-size: var(--t-xl); line-height: 1.05; text-transform: uppercase; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-color 0.15s, color 0.15s; }
.signlist__tag { display: inline-block; margin: 0.6rem 0.6rem 0; padding: 0.35rem 0.7rem; background: var(--ticket); color: var(--ink); font-size: 0.92rem; font-weight: 800; transform: rotate(-3deg); vertical-align: middle; }
.signlist a:hover .signlist__line,
.signlist a:focus-visible .signlist__line { background: var(--card); color: var(--ink); }
.signlist a:focus-visible { outline: none; }
.index-peek { position: fixed; z-index: 40; right: var(--gutter); bottom: var(--gutter); width: min(30vw, 26rem); aspect-ratio: 4 / 3; pointer-events: none; opacity: 0; transform: rotate(2deg) translateY(1rem); transition: opacity 0.15s, transform 0.4s var(--ease-out); }
.index-peek.is-on { opacity: 1; transform: rotate(2deg); }
@media (max-width: 960px), (hover: none) { .index-peek { display: none; } }

/* case pages */
.case-hero { position: relative; min-height: 100svh; display: grid; align-items: end; padding: calc(var(--mh-h) + 2rem) var(--gutter) clamp(2rem, 6svh, 4rem); }
.case-hero__plate { position: absolute; inset: 0; }
.case-hero__plate.plate--bottle,
.case-hero__plate.plate--arch { inset: calc(var(--mh-h) + 1rem) 8vw 6svh 50%; }
.case-hero__plate.plate--round { inset: auto; right: 8vw; top: calc(var(--mh-h) + 6svh); width: min(42vw, 70svh); aspect-ratio: 1; }
.case-hero__body { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
.case-hero__body .showcard { --tilt: -1.3deg; width: min(100%, 44rem); }
.case-hero__body .showcard .claim { font-size: var(--t-xl); }
.case-hero__body .tag { --tilt: 3deg; }
.case-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: clamp(4rem, 9vw, 7rem); align-items: start; }
.case-brief { grid-column: 1 / span 6; --tilt: -1.2deg; }
.case-brief p + p { margin-top: 0.9rem; }
.case-idea { grid-column: 3 / -1; }
.case-idea .claim { font-size: var(--t-claim); max-width: 14ch; }
.case-idea .ticket { --tilt: 1.5deg; max-width: 34rem; margin: -0.5rem 0 0 auto; }
.case-making, .case-moved { grid-column: 1 / -1; }
.case-making > h2, .case-moved > h2 { font-family: var(--hand); font-weight: 400; font-size: var(--t-xl); line-height: 0.95; text-transform: uppercase; }
.making-signs { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); margin-top: 2.25rem; align-items: start; }
.making-signs .sign h3 { font-size: clamp(1.4rem, 2.2vw, 2.1rem); }
.making-signs .sign p { max-width: 34ch; }
.ms1 { grid-column: 1 / span 5; --tilt: -1.6deg; }
.ms2 { grid-column: 6 / span 3; --tilt: 1.2deg; margin-top: 2.5rem; }
.ms3 { grid-column: 9 / span 4; --tilt: 3deg; justify-self: start; }
.ms4 { grid-column: 3 / span 6; --tilt: -0.8deg; }
.made-by { grid-column: 1 / span 8; --tilt: 0.8deg; }
.made-by p + p { margin-top: 1rem; }
.next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.next__card { --tilt: -1deg; text-decoration: none; display: block; }
.next__card .claim { font-size: var(--t-xl); }
.next__card:hover, .next__card:focus-visible { background: var(--star); outline: none; }
@media (max-width: 960px) {
  .case-hero__plate.plate--bottle, .case-hero__plate.plate--arch { inset: calc(var(--mh-h) + 1rem) 6vw 46svh 30%; }
  .case-hero__plate.plate--round { width: 62vw; right: 6vw; top: calc(var(--mh-h) + 2rem); }
  .case-brief, .case-idea, .made-by, .ms1, .ms2, .ms3, .ms4 { grid-column: 1 / -1; margin-top: 0; }
  .case-idea .ticket { margin: 1rem 0 0; }
}

/* capabilities page: one sign and one paragraph per discipline */
.spread { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 1.5rem; align-items: center; }
.spread + .spread { margin-top: clamp(4.5rem, 10vw, 8rem); }
.spread .sign { grid-column: 1 / span 5; justify-self: start; }
.spread__text { grid-column: 7 / span 6; }
.spread:nth-child(even) .sign { grid-column: 8 / span 5; grid-row: 1; justify-self: end; }
.spread:nth-child(even) .spread__text { grid-column: 1 / span 6; grid-row: 1; }
.spread .sign h2 { font-family: var(--hand); font-weight: 400; text-transform: uppercase; line-height: 0.92; font-size: var(--t-xl); }
.spread .sign--star h2 { font-size: calc(var(--s) * 0.14); }
.spread__text p + p { margin-top: 1rem; }
/* rules and refusals, lettered as hung signs */
.rulesigns { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); margin-top: 2.5rem; align-items: start; }
.rulesigns .sign h3 { font-size: clamp(1.4rem, 2.4vw, 2.3rem); }
.rulesigns .sign p { font-size: 0.98rem; }
.rulesigns .rs1 h3 { font-size: var(--t-xl); }
.rs1 { grid-column: 1 / span 6; --tilt: -1.5deg; }
.rs2 { grid-column: 7 / span 3; --tilt: 2deg; margin-top: 2rem; }
.rs3 { grid-column: 10 / span 3; --tilt: -3deg; }
.rs4 { grid-column: 2 / span 4; --tilt: 1deg; }
.rs5 { grid-column: 6 / span 4; --tilt: -1deg; margin-top: 1.5rem; }
.rs6 { grid-column: 10 / span 3; --tilt: 4deg; }
@media (max-width: 960px) {
  .spread .sign, .spread__text, .spread:nth-child(even) .sign, .spread:nth-child(even) .spread__text { grid-column: 1 / -1; grid-row: auto; justify-self: start; }
  .rulesigns { grid-template-columns: 1fr 1fr; }
  .rulesigns .sign { grid-column: auto !important; margin-top: 0 !important; }
  .rulesigns .rs1 { grid-column: 1 / -1 !important; }
}

/* a heading beside its copy on wide screens, stacked on narrow ones (How we charge, Jobs) */
.split__head { grid-column: 1 / span 5; }
.split__body { grid-column: 7 / -1; }
@media (max-width: 960px) { .split__head, .split__body { grid-column: 1 / -1; } }

/* studio page: jobs hung as tags */
.jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); align-items: start; gap: clamp(1rem, 2.5vw, 2rem); }
.jobs .tag { max-width: 20rem; }
.jobs .tag:nth-child(1) { --tilt: -3deg; }
.jobs .tag:nth-child(2) { --tilt: 2deg; margin-top: 1.5rem; }
.jobs .tag:nth-child(3) { --tilt: -1deg; margin-top: 0.5rem; }
.jobs .tag:nth-child(4) { --tilt: 2.5deg; margin-top: 1.25rem; }
.jobs h3 { font-family: var(--hand); font-weight: 400; font-size: var(--t-l); line-height: 0.95; text-transform: uppercase; }
.jobs p { margin-top: 0.5rem; font-weight: 600; }
.jobs .swash { margin-top: 0.8rem; }

/* thinking */
.essays { display: grid; gap: clamp(4rem, 9vw, 7rem); }
.essays li:nth-child(even) { justify-self: end; }
.essay-link { display: block; max-width: 52rem; text-decoration: none; }
.essay-link .showcard { display: inline-block; --tilt: -1.2deg; }
.essays li:nth-child(even) .essay-link .showcard { --tilt: 1.2deg; }
.essay-link .claim { font-size: var(--t-xl); }
.essay-link .ticket { display: block; max-width: 30rem; margin: -0.75rem 0 0 2.5rem; --tilt: 2deg; }
.essays li:nth-child(even) .essay-link .ticket { margin-left: auto; margin-right: 2.5rem; --tilt: -2deg; }
.essay-link .ticket p { font-size: var(--t-m); line-height: 1.4; font-weight: 500; }
.essay-link .ticket small { display: block; margin-top: 0.6rem; font-size: 0.95rem; font-weight: 800; }
.essay-link:hover .showcard, .essay-link:focus-visible .showcard { background: var(--star); }
.essay-link:focus-visible { outline: none; }
.essay-link:focus-visible .showcard { outline: 3px solid var(--card); outline-offset: 4px; }
.article { padding: clamp(2rem, 5vw, 4rem) var(--gutter) var(--section); }
.article__paper { max-width: 46rem; margin: 0 auto; padding: clamp(1.75rem, 5vw, 4rem); font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); line-height: 1.65; }
.article__paper p + p { margin-top: 1.1em; }
.article__paper h2 { font-family: var(--hand); font-weight: 400; font-size: var(--t-l); line-height: 1; text-transform: uppercase; margin: 2.2em 0 0.6em; }
.article__paper blockquote { margin: 1.8em -0.5em; padding: 1rem 1.25rem; background: var(--card); font-family: var(--hand); font-size: var(--t-l); line-height: 1.05; text-transform: uppercase; transform: rotate(-0.8deg); }
.byline { margin-top: 1.5rem; font-weight: 800; }
@media (max-width: 960px) { .essay-link .ticket, .essays li:nth-child(even) .essay-link .ticket { margin: -0.5rem 0 0 1rem; } }

/* contact */
.enquiry { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 2.5rem; align-items: start; }
.enquiry__form { grid-column: 1 / span 7; --tilt: -0.4deg; }
.enquiry__side { grid-column: 9 / span 4; display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; }
.enquiry__side .tag:nth-child(1) { --tilt: 2deg; }
.enquiry__side .tag:nth-child(2) { --tilt: -2.5deg; }
.enquiry__side .tag:nth-child(3) { --tilt: 1.5deg; }
.enquiry__side h2 { font-family: var(--hand); font-weight: 400; font-size: var(--t-l); line-height: 0.95; text-transform: uppercase; }
.enquiry__side p { margin-top: 0.6rem; font-weight: 600; }
.field { display: grid; gap: 0.35rem; margin-bottom: 1.25rem; }
.field label { font-weight: 850; }
.field input, .field select, .field textarea { width: 100%; padding: 0.7rem 0.1rem; background: transparent; border: 0; border-bottom: 3px solid var(--ink); border-radius: 0; font-size: 1.1rem; font-weight: 600; }
.field textarea { min-height: 8rem; resize: vertical; }
.field select { appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%230b0b0a' stroke-width='2.5'/%3E%3C/svg%3E") right 0.2rem center / 1rem no-repeat; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--star); background: var(--card); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.field__hint { font-size: 0.92rem; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
.form-status { margin-top: 1rem; font-weight: 800; min-height: 1.5em; }
.form-status.is-error { color: var(--error); }
.field [aria-invalid="true"] { border-bottom-color: var(--error); }
.field__error { color: var(--error); font-weight: 800; font-size: 0.92rem; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2rem; margin-top: 0.5rem; }
@media (max-width: 960px) {
  .enquiry__form, .enquiry__side { grid-column: 1 / -1; }
  .field--row { grid-template-columns: 1fr; }
}

/* 404 */
.soldout { min-height: 100svh; display: grid; place-content: center; text-align: center; padding: calc(var(--mh-h) + 2rem) var(--gutter) 3rem; }
.soldout .claim { font-size: var(--t-claim); }
.soldout p { margin: 1.5rem auto 0; max-width: 34ch; font-size: var(--t-m); }
.soldout .star { margin: 2.5rem auto 0; }

/* ---------- footer: the stall closes, said in sentences ---------- */

.foot { padding: clamp(4.5rem, 9vw, 7.5rem) var(--gutter) 2rem; }
.foot__mark { font-family: var(--hand); font-size: var(--t-xl); line-height: 1; transform: rotate(-1.5deg); transform-origin: left; }
.foot__say { margin-top: clamp(2rem, 5vw, 3rem); max-width: 34ch; font-size: var(--t-l); line-height: 1.3; font-weight: 600; text-wrap: pretty; }
.foot__say a { font-weight: 850; text-decoration-thickness: 3px; }
.foot__links { margin-top: clamp(2.5rem, 6vw, 4rem); display: flex; flex-wrap: wrap; gap: 0.6rem 1.75rem; font-size: 1.05rem; }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: clamp(3rem, 7vw, 5rem); font-size: 0.9rem; font-weight: 600; }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
  }
  .js .project__plate.is-pending { clip-path: none; }
}