/* Hallmark · macrostructure: bespoke rostrum table (scattered prints, one case sheet, index cards) · tone: documentary explainer, paper collage · anchor hue: grease-pencil red 29
 * theme: custom (vibe: "Vox-style paper collage at 12fps") · paper oklch(97.5% 0.012 92) · accent oklch(55% 0.2 29) · Fraunces + IBM Plex Mono
 * axes: mid paper band (chipboard table) / high-contrast serif / warm accent · nav: folder tabs · footer: single statement line
 * Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V5
 */

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

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: 64px;
  -webkit-text-size-adjust: 100%;
}
html.is-locked { overflow: hidden; }

body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-variation-settings: "SOFT" 60;
  line-height: 1.55;
  color: var(--color-ink);
  background-color: var(--color-table);
  background-image: url(../textures/table.webp);
  background-size: 640px;
  background-blend-mode: multiply;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
h1, h2, h3 { font-style: normal; text-wrap: balance; overflow-wrap: anywhere; min-width: 0; }
p { text-wrap: pretty; }
a { color: inherit; }
::selection { background: var(--color-accent); color: var(--color-accent-ink); }

:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.contact :focus-visible, .viewer :focus-visible { outline-color: var(--color-focus-on-black); }

.defs { position: absolute; }
.skip {
  position: fixed; left: var(--gutter); top: -80px; z-index: 90;
  padding: 12px 16px; background: var(--color-ink); color: var(--color-on-black);
}
.skip:focus { top: 12px; }

/* ------------------------------------------------------------------ paper
 * Every paper surface is a backing layer (.pc) behind its content: an outer
 * element that casts the shadow and an inner one that carries the stock.
 * Keeping it separate means a matte never clips a focus ring and the shadow
 * filter never has to re-run when content changes.
 *
 * Three registers of edge, so the table reads as collage without looking
 * shredded. Sheets are torn top and bottom. Prints, labels, buttons, and
 * bands are true rectangles with a light deckle. Cards and photos are cut. */
.on-pc { position: relative; isolation: isolate; }
.pc {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  filter: drop-shadow(0 1px 1px var(--shadow-contact)) drop-shadow(0 8px 12px var(--shadow-cast));
}
.pc > i {
  position: absolute; inset: 0;
  background-color: var(--stock, var(--color-paper));
  background-image: url(../textures/paper.webp);
  background-size: 420px;
  background-blend-mode: multiply;
  border-radius: var(--radius-cut);
  -webkit-mask: var(--torn, none) center / 100% 100% no-repeat;
  mask: var(--torn, none) center / 100% 100% no-repeat;
}
.pc--warm > i { --stock: var(--color-paper-warm); }
.pc--red > i { --stock: var(--color-accent); }
.pc--black > i {
  background-color: var(--color-black-paper);
  background-image: url(../textures/black.webp);
  background-blend-mode: normal;
}
.pc--scrap > i { --torn: url(../textures/torn-scrap.webp); }
.pc--rough > i { --torn: url(../textures/deckle-strip.webp); }
.pc--rough-tall > i { --torn: url(../textures/deckle-portrait.webp); }
.pc--tab > i { border-radius: 0 0 5px 5px; }
/* A sheet pulled from a pad: straight sides, torn along the top and bottom. */
.pc--sheet > i { border-radius: 0; }
.pc--sheet > i::before, .pc--sheet > i::after {
  content: ""; position: absolute; left: 0; right: 0;
  background: inherit;
}
.pc--sheet > i::before {
  bottom: calc(100% - 1px); aspect-ratio: 1600 / 105;
  -webkit-mask: url(../textures/edge-top.webp) 0 0 / 100% 100% no-repeat;
  mask: url(../textures/edge-top.webp) 0 0 / 100% 100% no-repeat;
}
.pc--sheet > i::after {
  top: calc(100% - 1px); aspect-ratio: 1600 / 66;
  -webkit-mask: url(../textures/edge-bottom.webp) 0 0 / 100% 100% no-repeat;
  mask: url(../textures/edge-bottom.webp) 0 0 / 100% 100% no-repeat;
}

/* A piece is anything that sits on the table. main.js drives the custom
 * properties: --tx/--ty/--rot/--s for placement, --bx/--by/--br for the boil. */
.piece {
  transform:
    translate3d(calc(var(--tx, 0px) + var(--bx, 0px)), calc(var(--ty, 0px) + var(--by, 0px)), 0)
    rotate(calc(var(--r, 0deg) + var(--rot, 0deg) + var(--br, 0deg)))
    scale(var(--s, 1));
  opacity: var(--o, 1);
}
.motion [data-in]:not(.is-in) { --o: 0; }

.tape {
  position: absolute; z-index: 2; height: auto; pointer-events: none;
  filter: drop-shadow(0 1px 1px var(--shadow-contact));
}

/* Lens fringe on display type: red to the left, cyan to the right. */
.ca {
  text-shadow:
    calc(var(--ca) * -1) 0 0 var(--color-fringe-warm),
    var(--ca) 0 0 var(--color-fringe-cool);
}

.label {
  font: 500 var(--text-xs)/1.3 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.label--on-black { color: var(--color-on-black-soft); }
.label--tape { display: inline-block; padding: 9px 16px; color: var(--color-ink); transform: rotate(-2deg); }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 14px 32px 15px;
  font: 640 1.125rem/1 var(--font-display);
  color: var(--color-accent-ink);
  text-decoration: none; white-space: nowrap;
  border: 0; background: none; cursor: pointer;
  transform: rotate(-1.2deg);
  transition: transform var(--dur-2f) var(--ease-2f);
}
.btn:hover { transform: rotate(-1.2deg) translateY(-3px); }
.btn:active { transform: rotate(-1.2deg) translateY(1px); }
.btn--black { color: var(--color-on-black); }
.btn--big { min-height: 66px; padding: 18px 46px 20px; font-size: 1.4375rem; }
.btn[hidden] { display: none; }

.textlink {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 4px; border: 0; background: none; cursor: pointer;
  font: 560 1.0625rem/1.2 var(--font-display);
  color: var(--color-ink); white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.textlink svg { flex: none; width: 34px; height: 20px; overflow: visible; filter: url(#rough); transition: transform var(--dur-2f) var(--ease-2f); }
.textlink svg path { fill: none; stroke: var(--color-accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.textlink:hover svg { transform: translateX(5px); }
.textlink:active { color: var(--color-accent); }
.textlink--on-black { color: var(--color-on-black); }

.todo {
  display: inline-block; padding: 6px 10px 5px;
  border: 1.5px dashed currentColor;
  font: 500 var(--text-xs)/1.2 var(--font-mono);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-fringe-cool);
}

/* ------------------------------------------------------------------- tabs */
.tabs {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding-inline: var(--gutter);
  pointer-events: none;
}
.tabs > * { pointer-events: auto; }
.tabs__mark {
  display: inline-flex; align-items: center;
  padding: 16px 16px 10px;
  font: 700 1.375rem/1 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--color-on-black);
  text-decoration: none;
  transform: translateY(-6px) rotate(-2deg);
}
.tabs__nav { display: flex; gap: 5px; }
.tab {
  display: inline-flex; align-items: flex-end;
  min-height: 44px; padding: 18px 13px 10px;
  font: 500 var(--text-xs)/1 var(--font-mono);
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--color-ink); text-decoration: none; white-space: nowrap;
  transform: translateY(-8px);
  transition: transform var(--dur-2f) var(--ease-2f);
}
.tab:hover, .tab:focus-visible { transform: translateY(-2px); }
.tab:active { transform: translateY(0); }
.tab--accent { color: var(--color-accent-ink); }
.tab--wide { display: none; }

/* ------------------------------------------------------------------- hero */
.hero {
  position: relative;
  display: grid; gap: var(--space-7);
  max-width: 1320px; margin-inline: auto;
  padding: 84px var(--gutter) var(--space-5);
}
.hero__copy {
  max-width: 40rem;
  padding: clamp(30px, 5vw, 56px) clamp(24px, 4.6vw, 54px) clamp(48px, 4.6vw, 52px);
}
/* The note is written on the sheet and its arrow runs off the edge to the
 * prints: down on narrow screens, where they sit below, and over the top on
 * wide ones, where main.js aims it at the first print. */
.nudge { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.nudge__text {
  position: absolute; right: 112px; bottom: 12px;
  font: italic 500 1.3125rem/1 var(--font-display); white-space: nowrap;
  color: var(--color-accent);
  transform: rotate(-3deg);
}
.nudge__arrow { position: absolute; max-width: none; overflow: visible; filter: url(#rough); }
.nudge__arrow path { fill: none; stroke: var(--color-accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.nudge__arrow--down { right: 44px; top: calc(100% - 40px); width: 64px; }
.nudge__arrow--over { display: none; left: 0; top: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.tape--copy { top: -34px; left: 8%; width: clamp(120px, 26%, 170px); transform: rotate(-7deg); }
.hero__title {
  margin: var(--space-4) 0 var(--space-5);
  font: 620 var(--text-display-s)/1.04 var(--font-display);
  font-variation-settings: "SOFT" 30;
  letter-spacing: -0.024em;
  text-wrap: pretty;
}
.nowrap { white-space: nowrap; }
.circled { position: relative; display: inline-block; white-space: nowrap; }
.circled__ring {
  position: absolute; left: -7%; top: -16%; width: 114%; height: 132%;
  max-width: none; overflow: visible; pointer-events: none;
  filter: url(#rough);
}
.circled__ring path {
  fill: none; stroke: var(--color-accent); stroke-width: 3.5; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.hero__lede { max-width: var(--measure); font-size: 1.1875rem; line-height: 1.45; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-6); }

.hero__stage { position: relative; min-width: 0; }
.scrap { position: absolute; display: none; }
.ruler { display: block; width: min(70%, 400px); height: auto; margin: 2px auto 0; opacity: 0.7; transform: rotate(-1deg); }
.hint {
  margin-top: var(--space-3); text-align: center;
  font: 500 var(--text-sm)/1.4 var(--font-mono); letter-spacing: 0.02em;
}
.hint--hover { display: none; }
.noscript { margin: var(--space-6) auto; max-width: 26rem; padding: 28px; }

/* ----------------------------------------------------------------- prints */
.prints { display: flex; align-items: flex-start; position: relative; z-index: 1; }
.prints--hero {
  --print-w: min(70vw, 280px);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1);
  padding: 30px calc(50% - var(--print-w) / 2 + var(--gutter)) 40px;
}
.prints--hero::-webkit-scrollbar { display: none; }
.prints--hero > .print { scroll-snap-align: center; margin-inline: 12px; }
.prints:focus { outline: none; }

.print { position: relative; flex: none; width: var(--print-w); }
.print__hit {
  position: relative; isolation: isolate; display: block; width: 100%;
  padding: 10px; border: 0; background: none;
  font: inherit; color: inherit; text-align: left;
  -webkit-tap-highlight-color: transparent;
}
button.print__hit { cursor: pointer; }
.print__frame {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 9 / 16;
  background: var(--color-black-paper);
  box-shadow: -1.5px 0 0 var(--color-fringe-warm), 1.5px 0 0 var(--color-fringe-cool);
}
.print__still, .print__video {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover;
}
.print__still { z-index: 1; transition: opacity var(--dur-3f) var(--ease-3f); }
.print.is-live .print__still { opacity: 0; }
.print__time {
  position: absolute; z-index: 2; right: 8px; top: 8px;
  padding: 4px 6px 3px;
  font: 500 var(--text-xs)/1 var(--font-mono); letter-spacing: 0.06em;
  color: var(--color-on-black); background: var(--color-black-paper);
}
.print__label {
  position: absolute; z-index: 3; left: -12px; bottom: -22px;
  isolation: isolate; display: block;
  max-width: calc(100% + 4px); padding: 10px 16px 11px;
  transform: rotate(-2deg);
}
.print__title { display: block; font: 620 0.9375rem/1.15 var(--font-display); letter-spacing: -0.005em; }
.print__meta {
  display: block; margin-top: 4px;
  font: 400 var(--text-xs)/1.3 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-ink-soft);
}
.tape--print { top: -11px; left: 50%; width: 88px; transform: translateX(-50%) rotate(var(--tape-r, -4deg)); }

/* Horizontal films sit in a negative carrier instead of a print border. */
.print--h { width: min(100%, 880px); }
.print--h .print__hit { padding: 10px; }
.print--h .print__frame {
  aspect-ratio: 16 / 9; overflow: visible;
  border: solid var(--color-black-paper);
  border-width: 15px 19px 30px 21px;
  border-image: url(../textures/film-frame.webp) 30 37 60 41 / 15px 19px 30px 21px stretch;
  box-shadow: none;
}
.print--h .print__still, .print--h .print__video { inset: 0; }
.print--h .print__label { left: 24px; bottom: -20px; }
.print--h .tape--print { left: 12%; width: 110px; }
.slot {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 10px;
  padding: 16px; text-align: center;
  background: var(--color-black-paper) url(../textures/black.webp) 0 0 / 512px;
  color: var(--color-on-black-soft);
  font: 400 var(--text-sm)/1.5 var(--font-mono);
}
.slot b { font: 620 var(--text-lg)/1.1 var(--font-display); color: var(--color-on-black); }
.slot .todo { justify-self: center; }

/* ------------------------------------------------------------------- reel */
.reel { max-width: 1320px; margin-inline: auto; padding: var(--space-5) var(--gutter) var(--space-5); }
.reel__rows { display: grid; gap: var(--space-9); margin-bottom: var(--space-9); }
.reel__rows:empty { display: none; }
.row { display: flex; flex-wrap: wrap; justify-content: center; gap: 56px 34px; padding-top: 20px; }
.deal { display: grid; justify-items: center; gap: var(--space-4); }
.deal__count { font: 500 var(--text-sm)/1.4 var(--font-mono); letter-spacing: 0.02em; }

/* ---------------------------------------------------------------- clients */
.clients { max-width: 1240px; margin-inline: auto; padding: var(--space-8) var(--gutter) 0; }
.clients__band {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5);
  width: fit-content; max-width: 100%; margin-inline: auto;
  padding: 20px clamp(20px, 4vw, 40px) 22px;
}
.clients__band .label { color: var(--color-ink); }
.clients__list { margin: 0; }
.chips li.chips__todo {
  padding-block: 5px 4px;
  color: var(--color-ink-soft); background: none;
  border: 1.5px dashed currentColor;
}

/* ------------------------------------------------------------------- case */
.case { padding: clamp(56px, 9vw, 104px) var(--gutter) var(--space-8); }
.sheet {
  position: relative; isolation: isolate;
  max-width: 1180px; margin-inline: auto;
  padding: clamp(44px, 7vw, 100px) clamp(22px, 6vw, 92px) clamp(52px, 7vw, 108px);
}
.sheet__back {
  position: absolute; inset: 0; z-index: -1;
  background-color: var(--color-paper);
  background-image: url(../textures/creases.webp), url(../textures/paper.webp);
  background-size: 100% auto, 420px;
  background-blend-mode: multiply;
  filter: drop-shadow(0 2px 2px var(--shadow-contact)) drop-shadow(0 16px 24px var(--shadow-cast));
}
.sheet__back::before, .sheet__back::after {
  content: ""; position: absolute; left: 0; right: 0;
  background: var(--color-paper) url(../textures/paper.webp) 0 0 / 420px;
  background-blend-mode: multiply;
}
.sheet__back::before {
  bottom: calc(100% - 1px); aspect-ratio: 1600 / 105;
  -webkit-mask: url(../textures/edge-top.webp) 0 0 / 100% 100% no-repeat;
  mask: url(../textures/edge-top.webp) 0 0 / 100% 100% no-repeat;
}
.sheet__back::after {
  top: calc(100% - 1px); aspect-ratio: 1600 / 66;
  -webkit-mask: url(../textures/edge-bottom.webp) 0 0 / 100% 100% no-repeat;
  mask: url(../textures/edge-bottom.webp) 0 0 / 100% 100% no-repeat;
}
/* Graph paper stops short of the edge, like a real pad. */
.sheet__grid {
  position: absolute; inset: clamp(14px, 3vw, 44px);
  border: 1px solid var(--color-grid-rule);
  background-image:
    linear-gradient(var(--color-grid-rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid-rule) 1px, transparent 1px);
  background-size: 24px 24px;
}

.case__head { max-width: 46rem; }
.case__title {
  margin: var(--space-5) 0 var(--space-5);
  font: 620 var(--text-xl)/1.06 var(--font-display);
  font-variation-settings: "SOFT" 30;
  letter-spacing: -0.02em;
}
.case__lede { max-width: 38rem; font-size: 1.1875rem; line-height: 1.5; }

/* Knot's numbers as a till receipt taped beside the intro. A row of big
 * statistics is the stock way to do this; a receipt is a paper object, and
 * it nods to "The receipt", the film about what the app costs to run. */
.case__intro { display: grid; gap: var(--space-7); }
.receipt {
  justify-self: center; width: min(100%, 300px);
  padding: 30px 22px 30px;
  font: 500 var(--text-sm)/1.55 var(--font-mono);
  letter-spacing: 0.04em; text-transform: uppercase;
}
/* Serrated top and bottom, the way a roll tears off at the till. */
.pc--receipt > i {
  border-radius: 0;
  -webkit-mask:
    conic-gradient(from -45deg at bottom, transparent, black 1deg 89deg, transparent 90deg) bottom / 12px 51% repeat-x,
    conic-gradient(from 135deg at top, transparent, black 1deg 89deg, transparent 90deg) top / 12px 51% repeat-x;
  mask:
    conic-gradient(from -45deg at bottom, transparent, black 1deg 89deg, transparent 90deg) bottom / 12px 51% repeat-x,
    conic-gradient(from 135deg at top, transparent, black 1deg 89deg, transparent 90deg) top / 12px 51% repeat-x;
}
.tape--receipt { top: -16px; left: 32%; width: 104px; transform: rotate(-4deg); }
.receipt__brand {
  text-align: center; text-transform: none;
  font: 700 1.875rem/1 var(--font-display);
  font-variation-settings: "SOFT" 30;
  letter-spacing: -0.02em;
}
.receipt__sub { margin-top: 6px; text-align: center; font-size: var(--text-xs); letter-spacing: 0.1em; color: var(--color-ink-soft); }
.receipt__head {
  margin-top: 14px; padding-top: 12px;
  border-top: 1.5px dashed var(--color-ink-soft);
  font-size: var(--text-xs); letter-spacing: 0.1em;
  color: var(--color-ink-soft);
}
.receipt dl { margin: 4px 0 0; }
.receipt__line { display: flex; align-items: baseline; gap: 8px; }
.receipt__line dt { display: flex; flex: 1; align-items: baseline; gap: 8px; min-width: 0; }
.receipt__line dt::after { content: ""; flex: 1; border-bottom: 1.5px dotted var(--color-ink-soft); transform: translateY(-4px); }
.receipt__line dd { font-variant-numeric: tabular-nums; }
.receipt__line--total { padding-block: 6px 4px; font-size: 1.3125rem; line-height: 1.3; letter-spacing: 0.01em; }
.receipt .circled__ring { left: -13%; top: -24%; width: 126%; height: 148%; }
.receipt__foot {
  margin-top: 16px; padding-top: 12px;
  border-top: 1.5px dashed var(--color-ink-soft);
  text-align: center; text-transform: none; letter-spacing: 0.06em;
}

.fig { display: grid; gap: var(--space-6); align-items: center; margin-top: var(--space-9); }
.fig__art { padding: 16px; min-width: 0; }
.fig__art--bare { padding: 0; }
.fig__text h3 {
  margin-bottom: var(--space-3);
  font: 620 var(--text-lg)/1.1 var(--font-display);
  font-variation-settings: "SOFT" 30;
  letter-spacing: -0.015em;
}
.fig__text p { max-width: var(--measure); margin-bottom: var(--space-4); }
.fig__text .textlink { margin-top: var(--space-2); }
.tape--a { top: -14px; left: 9%; width: 110px; transform: rotate(-5deg); }
.tape--b { top: -20px; right: 8%; width: 120px; transform: rotate(6deg); }

.diagram { display: block; width: 100%; height: auto; overflow: visible; }
.town__area { fill: var(--color-paper-shade); filter: url(#rough); }
.town__dots circle { fill: var(--color-ink); }
.route, .arrow, .trio__mark path {
  fill: none; stroke: var(--color-accent); stroke-width: 3.4; stroke-linecap: round;
}
.route, .arrow { filter: url(#rough); marker-end: url(#arrowhead); }
#arrowhead path { stroke: var(--color-accent); }
.diagram__label {
  font: 500 17px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
  fill: var(--color-ink-soft); text-anchor: middle;
}
.diagram__label--accent {
  font: italic 500 21px var(--font-display); letter-spacing: 0; text-transform: none;
  fill: var(--color-accent);
}
.token rect { fill: var(--color-paper); filter: drop-shadow(0 1.5px 1.5px var(--shadow-contact)); }
.token__kicker {
  font: 500 14px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
  fill: var(--color-ink-soft); text-anchor: middle;
}
.token__name { font: 620 25px var(--font-display); fill: var(--color-ink); text-anchor: middle; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.chips li {
  padding: 7px 10px 6px;
  font: 500 var(--text-xs)/1 var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--color-on-black);
  background: var(--color-black-paper) url(../textures/black.webp) 0 0 / 512px;
  border-radius: var(--radius-cut);
}
.chips li:nth-child(odd) { transform: rotate(-1.2deg); }
.chips li:nth-child(3n) { transform: rotate(0.9deg); }

.trio { position: relative; display: flex; justify-content: center; padding: 8px 0 70px; }
.mini { flex: none; width: 31%; max-width: 172px; margin-inline: -1%; padding: 6px; }
.mini:nth-child(2) { margin-top: 24px; z-index: 1; }
.mini img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; }
.trio__mark { position: absolute; left: 12%; bottom: 26px; width: 76%; height: 44px; max-width: none; overflow: visible; filter: url(#rough); }
.scribble {
  position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%) rotate(-2deg);
  font: italic 500 1.3125rem/1 var(--font-display); white-space: nowrap;
  color: var(--color-accent);
}

/* --------------------------------------------------------------- services */
.services { max-width: 1240px; margin-inline: auto; padding: var(--space-8) var(--gutter) var(--space-9); }
.services__title {
  display: table; max-width: 100%;
  margin-bottom: var(--space-8);
  padding: 22px clamp(22px, 4vw, 40px) 26px;
  font: 620 var(--text-xl)/1.05 var(--font-display);
  font-variation-settings: "SOFT" 30;
  letter-spacing: -0.02em;
}
.cards { display: grid; gap: var(--space-7); }
.card {
  --rule: 1.75rem; --head: 4.25rem;
  min-width: 0; max-width: 30rem; padding: 0 26px calc(var(--rule) * 1.5);
}
/* Index card ruling: one red line under the heading, blue feint below it. */
.card::after {
  content: ""; position: absolute; inset: var(--head) 0 0; z-index: -1;
  border-top: 1.5px solid var(--color-accent);
  background-image: linear-gradient(to bottom, transparent calc(100% - 1px), var(--color-card-rule) calc(100% - 1px));
  background-size: 100% var(--rule);
}
.card__name {
  display: flex; align-items: flex-end; height: var(--head); padding-bottom: 10px;
  font: 640 1.875rem/1 var(--font-display);
  font-variation-settings: "SOFT" 30;
  letter-spacing: -0.02em;
}
.card__body, .card__proof { position: relative; top: 0.42rem; line-height: var(--rule); }
.card__body { padding-top: 0; margin-bottom: var(--rule); }
.card__proof { font-style: italic; color: var(--color-accent); }
.card__proof span {
  margin-right: 6px;
  font: 500 var(--text-xs)/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
}
.tape--c { top: -34px; right: 10%; width: 84px; transform: rotate(14deg); }
.tape--d { top: -12px; left: 34%; width: 104px; transform: rotate(-3deg); }
.tape--e { top: -16px; left: 12%; width: 112px; transform: rotate(4deg); }

/* ----------------------------------------------------------------- stills
 * Personal work as loose photo prints. The pictures are shown as shot and
 * graded, with no print treatment: here the image is the finished work. */
.stills { max-width: 1240px; margin-inline: auto; padding: var(--space-8) var(--gutter) var(--space-6); }
.stills__head { display: grid; gap: var(--space-5); margin-bottom: var(--space-7); }
.stills__title {
  display: table; max-width: 100%;
  padding: 20px clamp(20px, 4vw, 38px) 24px;
  font: 620 var(--text-lg)/1.08 var(--font-display);
  font-variation-settings: "SOFT" 30;
  letter-spacing: -0.015em;
}
.stills__note { max-width: var(--measure); }
/* Two balanced columns on small screens. From 60rem the three hand-sorted
 * columns in the markup take over, so the wall never ends up lopsided. */
.stills__wall { columns: 2; column-gap: clamp(14px, 3vw, 36px); padding-top: 14px; }
.stills__col { display: contents; }
.still {
  break-inside: avoid;
  margin-bottom: clamp(18px, 3.4vw, 42px);
  padding: clamp(5px, 0.9vw, 9px);
}
.still__img { display: block; width: 100%; height: auto; }
.tape--still { top: -12px; left: var(--tx, 40%); width: clamp(60px, 22%, 92px); transform: rotate(var(--tape-r, -4deg)); }

/* ---------------------------------------------------------------- contact */
.contact {
  position: relative; isolation: isolate;
  margin-top: var(--space-8);
  padding: clamp(48px, 8vw, 112px) var(--gutter) var(--space-6);
  color: var(--color-on-black);
  background: var(--color-black-paper) url(../textures/black.webp) 0 0 / 512px;
}
.contact::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px);
  aspect-ratio: 1600 / 105;
  background: inherit;
  -webkit-mask: url(../textures/edge-top.webp) 0 0 / 100% 100% no-repeat;
  mask: url(../textures/edge-top.webp) 0 0 / 100% 100% no-repeat;
}
.contact__inner { display: grid; gap: var(--space-9); max-width: 1180px; margin-inline: auto; }
.contact__title {
  margin-bottom: var(--space-5);
  font: 620 var(--text-display-s)/1.03 var(--font-display);
  font-variation-settings: "SOFT" 30;
  letter-spacing: -0.024em;
}
.contact__pitch > p { font-size: 1.1875rem; color: var(--color-on-black-soft); }
.brief { display: grid; gap: 10px; margin: var(--space-4) 0 var(--space-7); padding: 0; list-style: none; counter-reset: brief; font-size: var(--text-md); line-height: 1.3; }
.brief li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); align-items: baseline; counter-increment: brief; }
.brief li::before { content: counter(brief, decimal-leading-zero); font: 500 var(--text-sm)/1 var(--font-mono); color: var(--color-on-black-soft); }
.contact__address { font: 500 var(--text-sm)/1.4 var(--font-mono); letter-spacing: 0.04em; color: var(--color-on-black-soft); }
.contact__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); }

.about { display: grid; gap: var(--space-4); align-content: start; max-width: 26rem; color: var(--color-on-black-soft); }
.about__photo { width: min(100%, 340px); margin-bottom: var(--space-4); padding: 8px 8px 9px; }
.about__img { display: block; width: 100%; height: auto; }
.tape--f { top: -24px; right: 14%; width: 120px; transform: rotate(8deg); }
.kit { font: 400 var(--text-sm)/1.6 var(--font-mono); letter-spacing: 0.02em; }

.foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6);
  max-width: 1180px; margin: var(--space-9) auto 0;
  font: 400 var(--text-sm)/1.5 var(--font-mono); letter-spacing: 0.02em;
  color: var(--color-on-black-soft);
}
.foot p:last-child { margin-left: auto; }

/* ----------------------------------------------------------------- viewer */
.viewer {
  position: fixed; inset: 0; z-index: 90; /* above the lens: films play clean, no dust */
  display: grid; place-items: center; overflow: auto;
  padding: 64px var(--gutter) 28px;
  background: var(--color-scrim);
}
.viewer[hidden] { display: none; }
.viewer__card { display: grid; gap: var(--space-6); justify-items: center; }
.viewer__frame { padding: 9px; }
.viewer__video {
  display: block; height: min(60svh, 720px); max-width: 84vw; aspect-ratio: 9 / 16;
  background: var(--color-black-paper); object-fit: contain;
}
.viewer--h .viewer__video { width: min(88vw, 1040px); height: auto; max-width: none; aspect-ratio: 16 / 9; }
.viewer__meta { display: grid; gap: var(--space-3); justify-items: start; max-width: 24rem; color: var(--color-on-black); }
.viewer__title { font: 620 var(--text-lg)/1.08 var(--font-display); font-variation-settings: "SOFT" 30; letter-spacing: -0.015em; }
.viewer__note { margin-bottom: var(--space-3); color: var(--color-on-black-soft); }
.viewer__close {
  position: fixed; top: 10px; right: 10px;
  display: grid; place-items: center; width: 48px; height: 48px;
  border: 0; background: none; cursor: pointer; color: var(--color-on-black);
}
.viewer__close svg { width: 26px; height: 26px; filter: url(#rough); }
.viewer__close path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.viewer__close:hover { color: var(--color-fringe-cool); }

/* ------------------------------------------------------------------ sound */
.soundtab {
  position: fixed; left: var(--gutter); bottom: 0; z-index: 40;
  display: inline-flex; align-items: flex-start;
  min-height: 44px; padding: 12px 13px 18px;
  border: 0; background: none; cursor: pointer;
  font: 500 var(--text-xs)/1 var(--font-mono);
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--color-ink); white-space: nowrap;
  transform: translateY(9px);
  transition: transform var(--dur-2f) var(--ease-2f);
}
.soundtab[hidden] { display: none; }
.soundtab:hover, .soundtab:focus-visible { transform: translateY(3px); }
.soundtab:active { transform: translateY(9px); }
.soundtab span::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px;
  border: 1.5px solid var(--color-accent); border-radius: 50%;
  background: var(--color-accent);
}
.soundtab[data-state="off"] { color: var(--color-ink-soft); }
.soundtab[data-state="off"] span::before { background: none; border-color: currentColor; }
.pc--tabup > i { border-radius: 5px 5px 0 0; }

/* ------------------------------------------------------------------- lens */
.lens { position: fixed; inset: 0; z-index: 80; overflow: hidden; pointer-events: none; }
.lens i { position: absolute; inset: 0; }
.lens__fringe {
  background:
    linear-gradient(90deg, var(--color-fringe-warm), transparent 1.8%),
    linear-gradient(270deg, var(--color-fringe-cool), transparent 1.8%);
  opacity: 0.2;
}
.lens__vignette { background: radial-gradient(125% 95% at 50% 45%, transparent 58%, var(--color-vignette) 100%); }
.lens .lens__dust {
  inset: -48px;
  background: url(../textures/dust.webp) 0 0 / 920px;
  opacity: var(--lens-dust);
  transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0);
}

/* ------------------------------------------------------------ wider views */
@media (hover: hover) and (pointer: fine) {
  .hint--hover { display: inline; }
  .hint--touch { display: none; }
}

@media (min-width: 40rem) {
  .tab--wide { display: inline-flex; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .viewer__video { height: min(72svh, 760px); }
}

@media (min-width: 60rem) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center; gap: clamp(20px, 3vw, 56px);
    min-height: min(100svh, 900px);
    padding-top: 92px;
  }
  .hero__copy { padding-bottom: clamp(30px, 4.6vw, 50px); }
  .nudge__text { right: 22px; bottom: auto; top: 14px; }
  .nudge__arrow--down { display: none; }
  .nudge__arrow--over { display: block; }
  .prints--hero {
    --print-w: clamp(126px, 13.6vw, 226px);
    overflow: visible; margin: 0; padding: 18px 0 34px; justify-content: center;
  }
  .prints--hero > .print { margin-inline: 3px; }
  .prints--hero > .print:nth-child(2) { margin-top: 52px; }
  .prints--hero > .print:nth-child(3) { margin-top: 10px; }
  .print:hover, .print:focus-within { z-index: 5; }

  .scrap { display: block; z-index: 0; }
  .scrap--grid {
    left: 2%; top: 34%; width: 44%; aspect-ratio: 900 / 683;
    background: url(../textures/grid.webp) center / cover;
    box-shadow: 0 1px 1px var(--shadow-contact), 0 8px 14px var(--shadow-cast);
  }
  .scrap--red { right: -3%; top: -3%; width: 30%; aspect-ratio: 700 / 539; }

  .case__intro { grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 5vw, 84px); align-items: start; }
  .receipt { justify-self: end; margin: 34px -22px 0 0; }
  .fig { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-8); }
  .fig--flip .fig__art { order: 2; }

  .cards { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) minmax(0, 1.06fr); gap: 0; align-items: start; }
  .card { max-width: none; }
  .card:nth-child(2) { margin: 76px -16px 0; z-index: 1; }
  .card:nth-child(3) { margin-top: 20px; }

  .stills__wall { columns: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .stills__col { display: block; }
  .stills__col:nth-child(2) { margin-top: 34px; }
  .contact__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-9); }
  .viewer__card { grid-template-columns: auto minmax(0, 24rem); align-items: center; justify-items: start; gap: var(--space-8); }
  .viewer--h .viewer__card { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .viewer--h .viewer__meta { max-width: 40rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}