:root {
  --bar-h: 76px;
  --paper: #f2eee5;
  --paper-2: #e9e3d6;
  --paper-3: #fbf9f4;
  --ink: #1b1915;
  --ink-2: #5d574d;
  --ink-3: #8f887b;
  --rule: rgba(27, 25, 21, .13);
  --rule-2: rgba(27, 25, 21, .06);
  --c-red: #d6461f;
  --c-blue: #2c48c9;
  --c-ochre: #efbb4e;
  --c-pale: #f7e9a0;
  --c-ink: #1b1915;
  --c-paper: #f7f3ea;
  --shadow: 0 1px 1px rgba(40, 30, 10, .05), 0 6px 16px -6px rgba(40, 30, 10, .16);
  --shadow-up: 0 2px 2px rgba(40, 30, 10, .05), 0 28px 50px -18px rgba(40, 30, 10, .35);
  --ink-filter: none;
  --serif: "Fraunces", Georgia, serif;
  --brand: "Montserrat", "Inter Tight", system-ui, sans-serif;
  --sans: "Inter Tight", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1240px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #131210; --paper-2: #1c1a17; --paper-3: #201e1a;
    --ink: #ece6d9; --ink-2: #aaa293; --ink-3: #746d61;
    --rule: rgba(236, 230, 217, .14); --rule-2: rgba(236, 230, 217, .06);
    --c-ink: #ece6d9; --c-paper: #24211d;
    --c-red: #e2582f; --c-blue: #5470e6; --c-ochre: #efbb4e; --c-pale: #8a7a3c;
    --shadow: 0 1px 1px rgba(0,0,0,.3), 0 8px 18px -6px rgba(0,0,0,.6);
    --shadow-up: 0 2px 2px rgba(0,0,0,.3), 0 30px 50px -16px rgba(0,0,0,.8);
    --ink-filter: invert(.93) sepia(.08);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #131210; --paper-2: #1c1a17; --paper-3: #201e1a;
  --ink: #ece6d9; --ink-2: #aaa293; --ink-3: #746d61;
  --rule: rgba(236, 230, 217, .14); --rule-2: rgba(236, 230, 217, .06);
  --c-ink: #ece6d9; --c-paper: #24211d;
  --c-red: #e2582f; --c-blue: #5470e6; --c-ochre: #efbb4e; --c-pale: #8a7a3c;
  --shadow: 0 1px 1px rgba(0,0,0,.3), 0 8px 18px -6px rgba(0,0,0,.6);
  --shadow-up: 0 2px 2px rgba(0,0,0,.3), 0 30px 50px -16px rgba(0,0,0,.8);
  --ink-filter: invert(.93) sepia(.08);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background .5s ease, color .5s ease;
}
/* paper grain */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100;
  opacity: .5; mix-blend-mode: multiply;
  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%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .4 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] body::before { mix-blend-mode: screen; opacity: .35; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::before { mix-blend-mode: screen; opacity: .35; } }

::selection { background: var(--c-ochre); color: #1b1915; }
a { color: inherit; }
button { font: inherit; color: inherit; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }

/* ———————————————— top bar */
.bar {
  position: sticky; top: 0; z-index: 60;
  border-bottom: 1px solid transparent;
  transition: transform .5s cubic-bezier(.7,0,.2,1), background-color .35s, border-color .35s;
}
.bar.solid {
  background: color-mix(in srgb, var(--paper) 84%, transparent);
  backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border-bottom-color: var(--rule-2);
}
.bar.away { transform: translateY(-101%); }
.bar .wrap { display: flex; align-items: center; gap: 10px; height: var(--bar-h); }
.bar a, .bar button { white-space: nowrap; }
.logo { display: flex; align-items: center; gap: 14px; text-decoration: none; font-family: var(--brand); font-weight: 600; font-size: 19px; line-height: 1.1; letter-spacing: -.025em; margin-right: auto; }
.logo-mark { width: 58px; height: 58px; display: block; }
.lm-dark { display: none; }
:root[data-theme="dark"] .lm-light { display: none; }
:root[data-theme="dark"] .lm-dark { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lm-light { display: none; } :root:not([data-theme="light"]) .lm-dark { display: block; } }

/* text that rolls up to a copy of itself on hover */
.roll { display: inline-block; overflow: hidden; vertical-align: top; line-height: 1.25; height: 1.25em; }
.roll > span { display: block; text-shadow: 0 1.25em currentColor; transition: transform .45s cubic-bezier(.7,0,.2,1); }
a:hover .roll > span, button:hover .roll > span { transform: translateY(-1.25em); }

/* the two header buttons are one pair: same pill, same height, same 32px disc; only the fill differs */
/* one button everywhere (header, hero, bands): a pill with a round arrow disc. filled = the main ask, ghost = the other one */
.cta, .menu-btn { display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 7px 0 20px; border-radius: 99px; border: 1px solid var(--ink); font: 500 15px var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .25s, border-color .25s, color .25s, opacity .3s; }
.cta { background: var(--ink); color: var(--paper); }
.cta .arw { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--paper); color: var(--ink); display: grid; place-items: center; transition: transform .45s cubic-bezier(.7,0,.2,1); }
.cta .arw svg { width: 14px; height: 14px; }
.cta:hover .arw { transform: rotate(-45deg); }
.cta[target]:hover .arw { transform: scale(1.1); }
.cta.ghost, .menu-btn { background: transparent; color: var(--ink); }
.cta.ghost .arw { background: var(--ink); color: var(--paper); }
.cta.ghost:hover, .menu-btn:hover { background: var(--paper-3); }
.cta.lg { height: 64px; padding: 0 9px 0 30px; gap: 18px; font-size: 17px; }
.cta.lg .arw { width: 46px; height: 46px; }
.cta.lg .arw svg { width: 17px; height: 17px; }
@media (max-width: 560px) { .cta.lg { height: 56px; padding: 0 7px 0 22px; font-size: 16px; gap: 14px; } .cta.lg .arw { width: 40px; height: 40px; } }
.burger { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); display: grid; place-content: center; gap: 4px; }
.burger i { display: block; width: 13px; height: 1.5px; background: var(--paper); transition: transform .45s cubic-bezier(.7,0,.2,1); }
.menu-open .burger i:first-child { transform: translateY(2.75px) rotate(45deg); }
.menu-open .burger i:last-child { transform: translateY(-2.75px) rotate(-45deg); }

/* while the menu is open the bar sits on the dark sheet */
.bar.menu-open { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; transform: none; }
.bar.menu-open .bar-cta { opacity: 0; pointer-events: none; }
.bar.menu-open .menu-btn { background: transparent; }

@media (max-width: 720px) { .logo .logo-word { display: none; } .logo-mark { width: 46px; height: 46px; } }
@media (max-width: 440px) { .bar-cta { display: none; } }

/* ———————————————— full-screen menu */
.menu {
  position: fixed; inset: 0; z-index: 55; background: var(--paper); color: var(--ink);
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path .8s cubic-bezier(.7,0,.2,1), visibility 0s .8s;
  display: flex; flex-direction: column; overflow-y: auto;
}
.menu.open { clip-path: inset(0); visibility: visible; transition: clip-path .8s cubic-bezier(.7,0,.2,1); }
.menu-in { flex: 1; display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: center; padding-top: calc(var(--bar-h) + 24px); padding-bottom: 24px; width: 100%; }
.menu-links { display: flex; flex-direction: column; }
.menu-links a { display: flex; align-items: baseline; gap: 18px; text-decoration: none; overflow: hidden; border-bottom: 1px solid var(--rule); padding: 4px 0; }
.menu-links a > * { transform: translateY(105%); transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .3s, font-variation-settings .5s; }
.menu.open .menu-links a > * { transform: none; }
.menu.open .menu-links a:nth-child(2) > * { transition-delay: .05s; } .menu.open .menu-links a:nth-child(3) > * { transition-delay: .1s; }
.menu.open .menu-links a:nth-child(4) > * { transition-delay: .15s; } .menu.open .menu-links a:nth-child(5) > * { transition-delay: .2s; }
.menu-links .n { font: 500 11px var(--mono); color: var(--ink-3); width: 28px; flex: none; }
.menu-links .t { font-family: var(--serif); font-size: clamp(36px, min(7.4vw, 10.5vh), 112px); line-height: 1.04; letter-spacing: -.035em; font-variation-settings: "opsz" 144, "wght" 330, "SOFT" 100; }
.menu-links:hover .t { opacity: .35; }
.menu-links a:hover .t { opacity: 1; font-variation-settings: "opsz" 144, "wght" 330, "SOFT" 0; font-style: italic; }
.menu-links a[aria-current="page"] .n::after { content: " ●"; color: var(--c-ochre); }
.menu-peek { position: relative; aspect-ratio: 4 / 5; max-height: min(58vh, 100vh - var(--bar-h) - 180px); justify-self: center; width: auto; height: min(58vh, 100vh - var(--bar-h) - 180px); }
/* three prints, fanned like they were dropped on the desk. a new stack settles in one print at a time; the old one fades back */
.stack, .stack figure { position: absolute; inset: 0; margin: 0; }
.stack figure { padding: 8px 8px 30px; background: #f7f3ea; border-radius: 2px; box-shadow: 0 1px 2px rgba(20,14,4,.12), var(--shadow-up);
  opacity: 0; transform: translateY(28px) rotate(0deg) scale(.97);
  transition: transform 1.2s cubic-bezier(.16,1,.3,1), opacity .7s cubic-bezier(.16,1,.3,1); }
.stack figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.stack.in figure { opacity: 1; }
.stack.in figure:nth-child(1) { transform: translate(-14%, 3%) rotate(-7deg) scale(.87); transition-delay: 0s; }
.stack.in figure:nth-child(2) { transform: translate(13%, 1%) rotate(5deg) scale(.89); transition-delay: .1s; }
.stack.in figure:nth-child(3) { transform: rotate(-1deg) scale(.92); transition-delay: .2s; }
.stack.gone { z-index: -1; }
.stack.gone figure { opacity: 0; transition: transform .7s ease, opacity .5s ease; transition-delay: 0s; }
.stack.gone figure:nth-child(1) { transform: translate(-14%, 3%) rotate(-7deg) scale(.84); }
.stack.gone figure:nth-child(2) { transform: translate(13%, 1%) rotate(5deg) scale(.86); }
.stack.gone figure:nth-child(3) { transform: rotate(-1deg) scale(.89); }
@media (prefers-reduced-motion: reduce) { .stack figure { transition: opacity .3s; } }
.menu-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px 28px; padding-top: 18px; padding-bottom: 22px; border-top: 1px solid var(--rule); width: 100%; }
.menu-foot .mono { color: var(--ink-2); }
.menu-foot a { text-decoration: none; } .menu-foot a:hover { color: var(--ink); }
@media (max-width: 760px) { .menu-in { grid-template-columns: 1fr; align-items: start; } .menu-peek { display: none; } }
body.menu-lock { overflow: hidden; }

.theme {
  display: flex; align-items: center; gap: 2px; padding: 2px; border-radius: 99px;
  border: 1px solid var(--rule); background: var(--paper-3);
}
.theme button { border: 0; background: none; padding: 6px 12px; border-radius: 99px; cursor: pointer; font-size: 13px; color: var(--ink-2); }
.theme button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ———————————————— hero */
.hero { position: relative; padding: clamp(24px, min(5.5vw, 6vh), 80px) 0 0; overflow: hidden; cursor: crosshair; }
.hero::before { /* drafting grid */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--rule-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-2) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 85%);
}
.kicker { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: clamp(16px, 3.5vh, 28px); position: relative; }
.kicker .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c-red); margin-right: 8px; vertical-align: 1px; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.hero h1 {
  position: relative;
  margin: 0; font-family: var(--serif); font-weight: 300;
  font-size: clamp(50px, min(11.4vw, 15.5vh), 172px); line-height: .9; letter-spacing: -.035em;
  font-variation-settings: "opsz" 144, "wght" 300, "SOFT" 100, "WONK" 0;
  user-select: none;
}
.hero h1 .line { display: block; white-space: nowrap; }
.hero h1 .line:nth-child(2) { padding-left: .9em; }
.hero h1 .ch { display: inline-block; will-change: font-variation-settings; }
.hero h1 em { font-style: italic; }
.hero-foot {
  position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: end;
  margin-top: clamp(20px, min(4vw, 4.5vh), 52px); padding-bottom: clamp(20px, 3.5vh, 28px);
}
.hero-foot p { margin: 0; max-width: 34em; font-size: clamp(16px, 1.4vw, 19px); color: var(--ink-2); }
.hero-foot p strong { color: var(--ink); font-weight: 500; }
.desk { border-left: 1px solid var(--rule); padding-left: 20px; }
.desk .mono { display: block; margin-bottom: 6px; }
.desk-item { font-family: var(--serif); font-size: 19px; line-height: 1.35; min-height: 2.7em; font-variation-settings: "opsz" 24, "SOFT" 50; transition: opacity .4s, transform .4s; }
.desk-item.out { opacity: 0; transform: translateY(6px); }
@media (max-width: 760px) { .hero-foot { grid-template-columns: 1fr; gap: 24px; } }

/* rulers + guides */
.ruler { position: relative; height: 28px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); color: var(--ink-3); }
.ruler svg { display: block; width: 100%; height: 100%; }
.ruler .marker { position: absolute; top: -1px; bottom: -1px; width: 1px; background: var(--c-red); left: 0; opacity: 0; transition: opacity .2s; }
.guide { position: absolute; pointer-events: none; background: var(--c-red); opacity: 0; transition: opacity .2s; z-index: 2; }
.guide.v { top: 0; bottom: 0; width: 1px; }
.guide.h { left: 0; right: 0; height: 1px; }
.guide-label { position: absolute; z-index: 3; pointer-events: none; font: 500 10.5px var(--mono); background: var(--c-red); color: #fff; padding: 2px 6px; border-radius: 3px; opacity: 0; transition: opacity .2s; white-space: nowrap; }
.hero.live .guide, .hero.live .guide-label, .hero.live ~ .ruler .marker { opacity: 1; }
.hero.live .guide { opacity: .55; }
@media (hover: none) { .guide, .guide-label { display: none; } .sel { display: none; } .hero { cursor: auto; } }
.hero h1 .w { display: inline-block; }
/* transform box around the hovered word */
.sel {
  --sel: var(--c-blue);
  position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; opacity: 0;
  border: 1px solid var(--sel);
  transition: opacity .15s;
}
.sel.on { opacity: 1; }
.sel::before { /* marching ants just inside the box */
  content: ""; position: absolute; inset: 3px;
  background:
    linear-gradient(90deg, var(--ink) 50%, transparent 0) 0 0 / 8px 1px repeat-x,
    linear-gradient(90deg, var(--ink) 50%, transparent 0) 0 100% / 8px 1px repeat-x,
    linear-gradient(0deg, var(--ink) 50%, transparent 0) 0 0 / 1px 8px repeat-y,
    linear-gradient(0deg, var(--ink) 50%, transparent 0) 100% 0 / 1px 8px repeat-y;
  opacity: .5; animation: ants .6s linear infinite;
}
@keyframes ants { to { background-position: 8px 0, -8px 100%, 0 -8px, 100% 8px; } }
.sel i { position: absolute; width: 7px; height: 7px; background: var(--paper); border: 1px solid var(--sel); translate: -50% -50%; }
.sel .h-nw { left: 0; top: 0; } .sel .h-n { left: 50%; top: 0; } .sel .h-ne { left: 100%; top: 0; }
.sel .h-e { left: 100%; top: 50%; } .sel .h-se { left: 100%; top: 100%; } .sel .h-s { left: 50%; top: 100%; }
.sel .h-sw { left: 0; top: 100%; } .sel .h-w { left: 0; top: 50%; }
.sel-tag, .sel-size { position: absolute; font: 500 10.5px var(--mono); white-space: pre; padding: 3px 7px; border-radius: 3px; }
.sel-tag { left: -1px; bottom: calc(100% + 8px); background: var(--sel); color: #fff; }
.sel-size { right: -1px; top: calc(100% + 10px); background: var(--ink); color: var(--paper); }


/* ———————————————— sections */
section { padding: clamp(80px, 11vw, 150px) 0 0; }
.sec-head { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: start; margin-bottom: clamp(32px, 5vw, 56px); }
.sec-head .mono { padding-top: 12px; border-top: 1px solid var(--ink); }
.sec-head h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 5vw, 64px); line-height: 1; letter-spacing: -.025em; font-variation-settings: "opsz" 96, "SOFT" 30; }
.sec-head h2 em { font-style: italic; font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1; }
.sec-head p { margin: 16px 0 0; max-width: 36em; color: var(--ink-2); }
@media (max-width: 720px) { .sec-head { grid-template-columns: 1fr; gap: 14px; } .sec-head .mono { padding-top: 8px; } }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* ———————————————— index */
.index { border-top: 1px solid var(--ink); }
.row {
  display: grid; grid-template-columns: 64px 1.3fr 1fr 70px 28px; gap: 16px; align-items: baseline;
  padding: 20px 0; border-bottom: 1px solid var(--rule); cursor: pointer; position: relative;
  background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left;
}
.row::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--gutter)); background: var(--paper-2); opacity: 0; transition: opacity .3s; z-index: -1; }
.row:hover::before, .row:focus-visible::before { opacity: 1; }
.row:focus-visible { outline: none; }
.row .n { font: 400 12px var(--mono); color: var(--ink-3); }
.row .name { font-family: var(--serif); font-size: clamp(22px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -.015em; font-variation-settings: "opsz" 72, "wght" 380, "SOFT" 50; transition: font-variation-settings .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1); }
.row:hover .name { font-variation-settings: "opsz" 72, "wght" 560, "SOFT" 100; transform: translateX(8px); }
.row:hover .name em { font-variation-settings: "WONK" 1; }
.row .disc { color: var(--ink-2); font-size: 15px; }
.row .yr { font: 400 12px var(--mono); color: var(--ink-3); text-align: right; }
.row .arr { justify-self: end; width: 18px; height: 18px; transition: transform .4s cubic-bezier(.2,.7,.2,1); color: var(--ink-3); }
.row:hover .arr { transform: rotate(-45deg); color: var(--ink); }
@media (max-width: 720px) {
  .row { grid-template-columns: 36px 1fr 24px; row-gap: 2px; }
  .row .disc { grid-column: 2; grid-row: 2; font-size: 14px; }
  .row .yr { display: none; }
  .row .arr { grid-column: 3; grid-row: 1; }
}
.index-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.peek {
  /* a polaroid: white frame, deep bottom lip with a handwritten caption. stays white in dark mode, like a real print */
  position: fixed; left: 0; top: 0; z-index: 60; width: max-content; pointer-events: none;
  padding: 11px 11px 0; background: #fbf9f4; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(27,25,21,.06), 0 2px 3px rgba(40,30,10,.08), 0 30px 50px -18px rgba(20,14,4,.45);
  opacity: 0; transition: opacity .25s ease; will-change: transform;
}
.peek.on { opacity: 1; }
.peek img { display: block; width: auto; height: auto; max-width: 260px; max-height: 300px; background: #e9e3d6; } /* the photo keeps its own shape */
.peek .cap { display: block; width: 0; min-width: 100%; height: 46px; padding: 0 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: italic 400 17px/46px var(--serif); font-variation-settings: "opsz" 24, "SOFT" 100, "WONK" 1; color: #3a362f; }
@media (hover: none) { .peek { display: none; } }

/* spread dialog */
dialog.spread {
  border: 0; padding: 0; background: var(--paper-3); color: var(--ink); border-radius: 6px;
  width: min(980px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); box-shadow: var(--shadow-up);
  overflow: auto;
}
dialog.spread::backdrop { background: rgba(20, 16, 10, .45); backdrop-filter: blur(3px); }
dialog.spread[open] { animation: open .5s cubic-bezier(.2,.8,.2,1); }
@keyframes open { from { opacity: 0; transform: translateY(24px) rotate(-.6deg); } }
.spread-in { display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; }
.spread-art { background: var(--paper-2); padding: clamp(20px, 3vw, 36px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.sp-main { margin: 0; display: grid; place-items: center; width: 100%; }
.sp-main img { display: block; max-width: 100%; max-height: min(64dvh, 580px); width: auto; height: auto; border-radius: 3px; box-shadow: var(--shadow); background: var(--paper-3); transition: opacity .25s; }
.sp-main img.swap { opacity: 0; }
.sp-main video { display: block; max-width: 100%; max-height: min(64dvh, 580px); width: auto; height: auto; aspect-ratio: 9 / 16; border-radius: 3px; box-shadow: var(--shadow); background: var(--paper-3); transition: opacity .25s; cursor: pointer; }
.sp-main video.swap { opacity: 0; }
.sp-main [hidden] { display: none; }
/* reels: a small play mark on their thumbnails and contact prints */
.sp-thumbs button.vid, .print.vid { position: relative; }
.sp-thumbs button.vid::after, .print.vid::after { content: ""; position: absolute; left: 50%; top: 50%; translate: -35% -50%; border-left: 10px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; filter: drop-shadow(0 1px 3px rgba(0,0,0,.55)); pointer-events: none; }
.print.vid::after { top: calc(50% - 12px); border-left-width: 20px; border-top-width: 12px; border-bottom-width: 12px; }
.sp-thumbs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.sp-thumbs button { width: 38px; height: 48px; padding: 0; border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; cursor: pointer; opacity: .55; background: var(--paper-3); transition: opacity .2s, border-color .2s; }
.sp-thumbs button:hover { opacity: .85; }
.sp-thumbs button[aria-current="true"] { opacity: 1; border-color: var(--ink); }
.sp-thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }
.spread-art svg { width: 100%; max-width: 380px; height: auto; display: block; box-shadow: var(--shadow); border-radius: 3px; transition: opacity .25s; }
.spread-txt { padding: clamp(24px, 3.5vw, 44px); display: flex; flex-direction: column; gap: 16px; }
.spread-txt h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.02; letter-spacing: -.02em; font-variation-settings: "opsz" 96, "SOFT" 60; }
.spread-txt p { margin: 0; color: var(--ink-2); }
.spread-meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; padding: 14px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: 14px; }
.spread-meta dt { color: var(--ink-3); font: 400 11px/1.9 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.spread-meta dd { margin: 0; }
.spread-actions { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--rule); background: var(--paper-3);
  padding: 9px 14px; border-radius: 99px; cursor: pointer; font-size: 14px; transition: border-color .2s, background .2s, transform .2s; text-decoration: none;
  box-shadow: 0 1px 0 var(--rule-2);
}
.btn:hover { border-color: var(--ink-3); }
.btn:active { transform: translateY(1px); }
.btn.solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.solid:hover { background: color-mix(in srgb, var(--ink) 86%, var(--paper)); }
.btn svg { width: 15px; height: 15px; }
.x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--rule); background: var(--paper-3); cursor: pointer; display: grid; place-items: center; }
@media (max-width: 720px) { .spread-in { grid-template-columns: 1fr; min-height: 0; } .sp-main img, .sp-main video { max-height: 46dvh; } }

/* ———————————————— contact sheet */
.wall-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.board { columns: 4 210px; column-gap: 22px; }
.print {
  --r: 0deg; --t: -2deg;
  position: relative; display: block; width: 100%; break-inside: avoid; margin: 0 0 26px; padding: 8px 8px 30px;
  background: var(--paper-3); border: 0; border-radius: 2px; box-shadow: var(--shadow); cursor: zoom-in; text-align: left; color: inherit;
  rotate: var(--r); transition: rotate .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
  animation: drop .7s cubic-bezier(.2,.9,.3,1.15) both; animation-delay: var(--d, 0s);
}
.print::before { content: ""; position: absolute; top: -8px; left: 50%; width: 54px; height: 16px; translate: -50% 0; rotate: var(--t); background: color-mix(in srgb, var(--c-ochre) 38%, transparent); border-left: 1px dashed rgba(0,0,0,.07); border-right: 1px dashed rgba(0,0,0,.07); z-index: 1; }
.print:hover, .print:focus-visible { rotate: 0deg; transform: translateY(-4px) scale(1.025); box-shadow: var(--shadow-up); z-index: 2; outline: none; }
.print img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1px; background: var(--paper-2); }
.print.wide img { aspect-ratio: auto; }
.print .cap { position: absolute; left: 10px; right: 10px; bottom: 8px; display: flex; justify-content: space-between; gap: 10px; font: 400 10px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.print .cap b { font-weight: 500; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; }
.print.hide { display: none; }
@keyframes drop { from { opacity: 0; transform: translateY(-14px); } }
@media (max-width: 520px) { .board { columns: 2 140px; column-gap: 14px; } .print { padding: 6px 6px 26px; margin-bottom: 18px; } .print .cap span { display: none; } }

/* ———————————————— process table */
.table {
  position: relative; height: 600px; border-radius: 6px; touch-action: none;
  background:
    radial-gradient(ellipse at 30% 20%, color-mix(in srgb, var(--paper-3) 70%, transparent), transparent 60%),
    var(--paper-2);
  border: 1px solid var(--rule-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -40px 80px -40px rgba(60,40,10,.12);
  overflow: hidden;
}
.table-hint { position: absolute; left: 20px; bottom: 16px; }
.table-cut { position: absolute; right: 22px; top: 18px; width: 120px; color: var(--ink-3); opacity: .7; }
.sheet {
  position: absolute; left: 0; top: 0; width: 270px; padding: 22px 22px 24px; background: var(--paper-3);
  border-radius: 2px; box-shadow: var(--shadow); cursor: grab; user-select: none; touch-action: none;
  transition: box-shadow .3s ease;
}
.sheet::after { /* pin hole / tape */
  content: ""; position: absolute; top: -9px; left: 50%; width: 64px; height: 18px; translate: -50% 0; rotate: -3deg;
  background: color-mix(in srgb, var(--c-ochre) 32%, transparent); border-left: 1px dashed rgba(0,0,0,.08); border-right: 1px dashed rgba(0,0,0,.08);
}
.sheet.lift { box-shadow: var(--shadow-up); cursor: grabbing; }
/* in dark mode the sheets stay real paper on a dark desk, instead of grey cards on grey */
:root[data-theme="dark"] .sheet { --paper-3: #efe9dc; --ink: #1b1915; --ink-2: #5d574d; --rule: rgba(27,25,21,.16); --c-red: #d6461f; color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sheet { --paper-3: #efe9dc; --ink: #1b1915; --ink-2: #5d574d; --rule: rgba(27,25,21,.16); --c-red: #d6461f; color: var(--ink); } }
:root[data-theme="dark"] .table { background: radial-gradient(ellipse at 30% 20%, #23201b, transparent 65%), #151411; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 -60px 90px -40px rgba(0,0,0,.6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .table { background: radial-gradient(ellipse at 30% 20%, #23201b, transparent 65%), #151411; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 -60px 90px -40px rgba(0,0,0,.6); } }
.sheet .num { font-family: var(--serif); font-size: 64px; line-height: .9; font-variation-settings: "opsz" 144, "wght" 250, "SOFT" 100; letter-spacing: -.04em; color: var(--ink); }
.sheet h3 { margin: 14px 0 6px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.sheet p { margin: 0; font-size: 14px; color: var(--ink-2); }
.sheet .doodle { position: absolute; right: 18px; top: 22px; width: 64px; height: 64px; }
.sheet .doodle path, .sheet .doodle circle, .sheet .doodle line { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.sheet .doodle .acc { stroke: var(--c-red); }
.sheet .foot { margin-top: 18px; padding-top: 10px; border-top: 1px dashed var(--rule); display: flex; justify-content: space-between; }
@media (max-width: 760px) {
  .table { height: auto; display: grid; gap: 22px; padding: 28px 18px 60px; touch-action: auto; }
  .sheet { position: relative; width: auto; transform: none !important; cursor: auto; }
  .sheet:nth-child(odd) { rotate: -.8deg; } .sheet:nth-child(even) { rotate: .8deg; }
  .table-cut { display: none; }
}

/* ———————————————— form fields */
.field label, .field .lbl { display: flex; justify-content: space-between; margin-bottom: 8px; }
.field input[type=text] {
  width: 100%; border: 0; border-bottom: 1px solid var(--rule); background: none; padding: 6px 0; font: 400 17px var(--sans); color: var(--ink); outline: none;
}
.field input[type=text]:focus { border-color: var(--ink); }

/* ———————————————— letter */
.letter-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.form { display: flex; flex-direction: column; gap: 22px; }
.form .field textarea {
  width: 100%; min-height: 140px; resize: vertical; border: 1px solid var(--rule); border-radius: 4px; background: var(--paper-3);
  padding: 12px; font: 400 16px/1.5 var(--sans); color: var(--ink); outline: none;
}
.form .field textarea:focus { border-color: var(--ink-3); }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choices button { border: 1px solid var(--rule); background: none; padding: 6px 12px; border-radius: 99px; cursor: pointer; font-size: 14px; color: var(--ink-2); transition: all .2s; }
.choices button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.envelope { position: relative; perspective: 1400px; }
.sheet-letter {
  position: relative; background: var(--paper-3); padding: clamp(28px, 4vw, 52px); min-height: 520px; border-radius: 2px;
  box-shadow: var(--shadow-up); rotate: .8deg; transition: rotate .6s cubic-bezier(.2,.7,.2,1);
  background-image: repeating-linear-gradient(transparent 0 31px, var(--rule-2) 31px 32px);
  background-position: 0 118px;
}
.envelope:hover .sheet-letter { rotate: 0deg; }
.sheet-letter::before { content: ""; position: absolute; inset: 10px; border: 1px solid var(--rule-2); pointer-events: none; }
.l-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; margin-bottom: 28px; }
.stamp { width: 74px; flex: none; padding: 5px; background: var(--paper-3); rotate: 4deg;
  -webkit-mask: radial-gradient(circle 3px at 3px 3px, #0000 98%, #000) -3px -3px / 8px 8px;
          mask: radial-gradient(circle 3px at 3px 3px, #0000 98%, #000) -3px -3px / 8px 8px;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
.stamp img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; padding: 6px; background: #fbf5dc; }
.postmark { position: absolute; right: 64px; top: 34px; width: 96px; height: 96px; color: var(--c-red); opacity: .55; rotate: -14deg; pointer-events: none; mix-blend-mode: multiply; }
:root[data-theme="dark"] .postmark { mix-blend-mode: normal; }
.l-body { font-family: var(--serif); font-size: clamp(19px, 1.8vw, 23px); line-height: 32px; font-variation-settings: "opsz" 24, "SOFT" 80; white-space: pre-wrap; word-break: break-word; min-height: 200px; }
.l-body .ghost { color: var(--ink-3); }
.l-sign { margin-top: 32px; font-family: var(--serif); font-style: italic; font-size: 30px; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1, "wght" 350; }
.l-sign small { display: block; font: 400 12px var(--mono); font-style: normal; color: var(--ink-3); margin-top: 6px; letter-spacing: .04em; }
.l-tag { display: inline-block; margin-top: 18px; padding: 3px 9px; border: 1px solid var(--rule); border-radius: 99px; font: 400 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.caret { display: inline-block; width: 1px; height: 1em; background: var(--ink); vertical-align: -.15em; animation: blink 1s steps(1) infinite; margin-left: 1px; }
@keyframes blink { 50% { opacity: 0; } }
@media (max-width: 860px) { .letter-grid { grid-template-columns: 1fr; } .sheet-letter { min-height: 0; } .postmark { right: 30px; } }

/* ———————————————— footer: sits under the page; the page lifts off it as you reach the end */
main { position: relative; z-index: 1; background: var(--paper); }
body.curtain main { margin-bottom: var(--foot-h); }
footer { --f-bg: var(--ink); --f-fg: var(--paper); --f-mute: color-mix(in srgb, var(--f-fg) 58%, transparent); --f-rule: color-mix(in srgb, var(--f-fg) 14%, transparent);
  background: var(--f-bg); color: var(--f-fg); font-family: var(--brand); overflow: hidden; --p: 1; }
body.curtain footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 0; }
.foot-in { padding: clamp(56px, 7vw, 96px) 0 24px; transform: translateY(calc((1 - var(--p)) * -90px)); opacity: calc(.4 + var(--p) * .6); }
.foot-top { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: start; }
.foot-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
/* the logo sits on a round badge in the page's own colour, so it reads the same as in the header (and keeps the header's logo swap) */
.foot-mark { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--f-fg); }
.foot-mark img { width: 52px; height: 52px; }
.foot-intro p { margin: 0; max-width: 24em; font-size: 15px; line-height: 1.6; color: var(--f-mute); }
footer .cta { --ink: var(--f-fg); --paper: var(--f-bg); }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.foot-cols > div { display: flex; flex-direction: column; gap: 7px; font-size: 15px; }
.foot-cols h4 { margin: 0 0 6px; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--f-mute); }
.foot-cols a { text-decoration: none; width: fit-content; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s cubic-bezier(.7,0,.2,1); }
.foot-cols a:hover { background-size: 100% 1px; }
.foot-cols span { color: var(--f-mute); }
/* the name, one line, set to the width of the column; each letter rises out of its line as the footer is revealed */
.foot-word { display: block; width: max-content; margin: clamp(48px, 7vw, 96px) 0 0; text-decoration: none; color: var(--f-fg);
  font-weight: 600; font-size: 100px; line-height: .98; letter-spacing: -.045em; white-space: nowrap; }
.foot-word .ln { display: block; width: max-content; overflow: hidden; padding: .06em .04em .2em; margin: -.06em -.04em -.2em; vertical-align: top; }
.foot-word .ch { display: inline-block; --f: 1; transform: translateY(calc((1 - var(--f)) * 115%)); }
.foot-word .ch { will-change: font-weight; }
.foot-base { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: clamp(28px, 4vw, 44px); padding-top: 18px; border-top: 1px solid var(--f-rule); font-size: 13px; color: var(--f-mute); }
.foot-end { display: inline-flex; align-items: center; gap: 18px; }
footer kbd { border-color: var(--f-rule); background: transparent; color: var(--f-fg); }
footer .theme { border-color: var(--f-rule); background: transparent; }
footer .theme button { color: var(--f-mute); }
footer .theme button[aria-pressed="true"] { background: var(--f-fg); color: var(--f-bg); }
@media (max-width: 860px) { .foot-top { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .foot-cols { grid-template-columns: 1fr 1fr; } .foot-cols > div:last-child { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .foot-in { transform: none; opacity: 1; } .foot-word .ch { transform: none; } }
@media (hover: none) { .g-hint { display: none; } }
kbd { font: 500 10.5px var(--mono); border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; background: var(--paper-3); color: var(--ink); }

/* layout grid overlay (press G) */
.cols { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0; transition: opacity .35s; }
.cols.on { opacity: 1; }
.cols .wrap { height: 100%; display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.cols .wrap div { background: color-mix(in srgb, var(--c-red) 7%, transparent); border-left: 1px solid color-mix(in srgb, var(--c-red) 25%, transparent); border-right: 1px solid color-mix(in srgb, var(--c-red) 25%, transparent); }
@media (max-width: 720px) { .cols .wrap { grid-template-columns: repeat(4, 1fr); } .cols .wrap div:nth-child(n+5) { display: none; } }

.toast { position: fixed; left: 50%; bottom: 24px; translate: -50% 20px; z-index: 95; background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 99px; font: 400 12px var(--mono); opacity: 0; transition: opacity .3s, translate .3s; pointer-events: none; }
.toast.on { opacity: 1; translate: -50% 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

body.bar-away .filters { top: 0; }

/* ———————————————— inner page head */
.page-head { position: relative; padding: clamp(56px, 9vw, 120px) 0 clamp(28px, 4vw, 48px); border-bottom: 1px solid var(--rule); }
.page-head::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--rule-2) 1px, transparent 1px), linear-gradient(90deg, var(--rule-2) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(#000, transparent 85%); -webkit-mask-image: linear-gradient(#000, transparent 85%);
}
.page-head .wrap { position: relative; }
.page-head h1 { margin: 18px 0 0; font-family: var(--serif); font-weight: 300; font-size: clamp(44px, 8vw, 112px); line-height: .92; letter-spacing: -.035em; font-variation-settings: "opsz" 144, "SOFT" 100; max-width: 12em; }
.page-head h1 em { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
.page-head p { margin: 24px 0 0; max-width: 38em; font-size: clamp(16px, 1.4vw, 19px); color: var(--ink-2); }
.page-head .crumbs { display: flex; gap: 10px; align-items: center; }
.page-head .crumbs a { text-decoration: none; }
.page-head .crumbs a:hover { color: var(--ink); }

/* ———————————————— home: services list */
.svc-list { border-top: 1px solid var(--ink); }
.svc-row {
  position: relative; display: grid; grid-template-columns: 64px 1.15fr 1.4fr 28px; gap: 16px; align-items: baseline;
  padding: 24px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit;
}
.svc-row::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--gutter)); background: var(--paper-2); opacity: 0; transition: opacity .3s; z-index: -1; }
.svc-row:hover::before, .svc-row:focus-visible::before { opacity: 1; }
.svc-row:focus-visible { outline: none; }
.svc-row .n { font: 400 12px var(--mono); color: var(--ink-3); }
.svc-row h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.8vw, 38px); line-height: 1.05; letter-spacing: -.02em; font-variation-settings: "opsz" 72, "wght" 380, "SOFT" 50; transition: font-variation-settings .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1); }
.svc-row:hover h3 { font-variation-settings: "opsz" 72, "wght" 560, "SOFT" 100; transform: translateX(8px); }
.svc-row p { margin: 0; color: var(--ink-2); }
.svc-row .seen { display: block; margin-top: 8px; font: 400 11px/1.6 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.svc-row .arr { justify-self: end; width: 18px; height: 18px; color: var(--ink-3); transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.svc-row:hover .arr { transform: rotate(-45deg); color: var(--ink); }
@media (max-width: 720px) { .svc-row { grid-template-columns: 36px 1fr 24px; row-gap: 8px; } .svc-row p { grid-column: 2 / 4; } .svc-row .arr { grid-column: 3; grid-row: 1; } }

/* ———————————————— home: featured work */
.featured { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.feat { display: block; text-decoration: none; color: inherit; }
.feat .ph { position: relative; overflow: hidden; border-radius: 3px; aspect-ratio: 4 / 5; background: var(--paper-2); box-shadow: var(--shadow); }
.feat img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.2,.7,.2,1); backface-visibility: hidden; }
.feat:hover img { transform: scale(1.05); }
.feat .ph::after { content: attr(data-disc); position: absolute; left: 10px; bottom: 10px; padding: 3px 8px; border-radius: 99px; background: rgba(20,18,15,.8); color: #f4efe4; font: 400 10px var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.feat h3 { margin: 14px 0 2px; font-family: var(--serif); font-weight: 400; font-size: 22px; letter-spacing: -.015em; font-variation-settings: "opsz" 48, "SOFT" 60; }
.feat .mono { font-size: 11px; }
.feat:nth-child(even) { margin-top: 48px; }
.more-link { display: flex; justify-content: flex-end; margin-top: 28px; }
@media (max-width: 900px) { .featured { grid-template-columns: repeat(2, 1fr); } .feat:nth-child(even) { margin-top: 32px; } }

/* ———————————————— home: clients */
.clients { display: flex; flex-wrap: wrap; gap: 6px 0; font-family: var(--serif); font-size: clamp(22px, 3.2vw, 42px); line-height: 1.25; letter-spacing: -.02em; font-variation-settings: "opsz" 96, "wght" 300, "SOFT" 80; }
.clients span { color: var(--ink-3); transition: color .3s, font-variation-settings .4s; cursor: default; }
.clients span:hover { color: var(--ink); font-variation-settings: "opsz" 96, "wght" 520, "SOFT" 100, "WONK" 1; }
.clients span:not(:last-child)::after { content: "·"; margin: 0 .35em; color: var(--c-ochre); }
.clients-note { margin-top: 22px; }

/* ———————————————— CTA band: opens out to full width as it scrolls in; two strips of work drift past in opposite directions */
.band { margin-top: clamp(80px, 11vw, 150px); --p: 0; }
.band .wrap { max-width: none; padding: 0; }
.band-in {
  position: relative; overflow: hidden; color: #1b1915; background: var(--c-ochre);
  margin: 0 auto; width: calc(100% - (1 - var(--p)) * 2 * max(var(--gutter), (100% - var(--max)) / 2 + var(--gutter)));
  border-radius: calc((1 - var(--p)) * 10px);
  padding: clamp(28px, 4vw, 56px) 0;
}
.band-strip { display: flex; gap: 18px; width: max-content; padding: 10px 0; will-change: transform; }
.band-strip span { flex: none; width: clamp(110px, 11vw, 160px); padding: 7px 7px 26px; background: #fbf9f4; border-radius: 2px; box-shadow: 0 1px 2px rgba(40,30,10,.12), 0 14px 26px -14px rgba(40,30,10,.5); }
.band-strip span:nth-child(odd) { rotate: -2.5deg; } .band-strip span:nth-child(3n) { rotate: 2deg; }
.band-strip img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.band-body { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: end; max-width: var(--max); margin: 0 auto; padding: clamp(28px, 4vw, 56px) var(--gutter); }
.band h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 7vw, 104px); line-height: .94; letter-spacing: -.035em; font-variation-settings: "opsz" 144, "SOFT" 60; }
.band h2 .ln { display: block; transform: translateX(calc((1 - var(--p)) * -18%)); }
.band h2 .ln + .ln { transform: translateX(calc((1 - var(--p)) * 18%)); }
.band h2 em { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
.band p { margin: 0 0 18px; color: rgba(27,25,21,.75); }
.band .acts { display: flex; gap: 10px; flex-wrap: wrap; }
.band { --ink: #1b1915; --paper: #f4efe4; --paper-3: rgba(255,255,255,.35); } /* the band is always ochre, so its buttons keep light-mode ink */
@media (max-width: 760px) { .band-body { grid-template-columns: 1fr; gap: 20px; } }
@media (prefers-reduced-motion: reduce) { .band { --p: 1 !important; } .band-strip { transform: none !important; } }

/* ———————————————— work page: filters */
.filters { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 22px 0; position: sticky; top: var(--bar-h); z-index: 20; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.row.hide { display: none; }
.view-toggle { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--rule); border-radius: 99px; background: var(--paper-3); }
.view-toggle a { text-decoration: none; font-size: 13px; padding: 5px 12px; border-radius: 99px; color: var(--ink-2); }
.view-toggle a:hover { color: var(--ink); }

/* ———————————————— services page */
.svc { display: grid; grid-template-columns: 300px 1fr; gap: clamp(24px, 5vw, 72px); padding: clamp(56px, 8vw, 100px) 0; border-bottom: 1px solid var(--rule); scroll-margin-top: calc(var(--bar-h) + 14px); }
.svc-side { position: sticky; top: 90px; align-self: start; }
.svc-side .n { font-family: var(--serif); font-size: 84px; line-height: .85; font-variation-settings: "opsz" 144, "wght" 200, "SOFT" 100; letter-spacing: -.04em; color: var(--c-ochre); }
.svc-side h2 { margin: 14px 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.4vw, 44px); line-height: 1; letter-spacing: -.02em; font-variation-settings: "opsz" 96, "SOFT" 60; }
.svc-main > p { margin: 0; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.5; font-family: var(--serif); font-variation-settings: "opsz" 24, "SOFT" 60; max-width: 34em; }
.svc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 32px; }
.svc-cols h4 { margin: 0 0 10px; }
.svc-cols ul { margin: 0; padding: 0; list-style: none; }
.svc-cols li { padding: 9px 0; border-top: 1px solid var(--rule); display: flex; gap: 10px; }
.svc-cols li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: .55em; border-radius: 1px; background: var(--c-ochre); rotate: 45deg; }
.seen-list { display: flex; flex-wrap: wrap; gap: 8px; }
.seen-list a { text-decoration: none; font-size: 14px; padding: 6px 12px; border: 1px solid var(--rule); border-radius: 99px; transition: border-color .2s, background .2s; }
.seen-list a:hover { border-color: var(--ink); background: var(--paper-3); }
.strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 36px; }
/* each shot is a polaroid, same print as the hover peeks: white frame, handwritten caption, a slight tilt that straightens on hover */
.strip a { display: block; padding: 8px 8px 0; background: #fbf9f4; border-radius: 2px; text-decoration: none; color: #3a362f;
  box-shadow: 0 0 0 1px rgba(27,25,21,.06), 0 2px 3px rgba(40,30,10,.07), 0 18px 34px -18px rgba(20,14,4,.4);
  transition: transform .6s cubic-bezier(.16,1,.3,1), rotate .6s cubic-bezier(.16,1,.3,1), box-shadow .6s; }
.strip a:nth-child(1) { rotate: -1.6deg; } .strip a:nth-child(2) { rotate: 1.2deg; } .strip a:nth-child(3) { rotate: -.6deg; }
.strip a:hover { transform: translateY(-4px); rotate: 0deg; box-shadow: 0 0 0 1px rgba(27,25,21,.06), 0 3px 6px rgba(40,30,10,.08), 0 30px 46px -20px rgba(20,14,4,.45); }
.strip .ph { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #e9e3d6; }
.strip img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.strip a:hover img { transform: scale(1.04); }
.strip .cap { display: block; padding: 0 2px; height: 38px; line-height: 38px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: italic 400 15px/38px var(--serif); font-variation-settings: "opsz" 24, "SOFT" 100, "WONK" 1; }
/* a single shot (the website) takes one card like the rest, cropped from the top-left of the page */
.strip.web img { object-position: left top; }
@media (max-width: 560px) { .strip { gap: 10px; } .strip a { padding: 5px 5px 0; } .strip .cap { font-size: 12px; height: 28px; line-height: 28px; } }
.svc-index { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
@media (max-width: 860px) { .svc { grid-template-columns: 1fr; } .svc-side { position: static; } .svc-cols { grid-template-columns: 1fr; } }

/* ———————————————— contact page */
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: clamp(56px, 8vw, 96px); border-top: 1px solid var(--ink); }
.details > div { padding: 22px 22px 22px 0; border-right: 1px solid var(--rule); }
.details > div + div { padding-left: 22px; }
.details > div:last-child { border-right: 0; }
.details h3 { margin: 10px 0 8px; font-family: var(--serif); font-weight: 400; font-size: 24px; letter-spacing: -.015em; }
.details p { margin: 0; color: var(--ink-2); }
.details a { color: var(--ink); text-underline-offset: 3px; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } .details { grid-template-columns: 1fr; } .details > div, .details > div + div { padding: 20px 0; border-right: 0; border-bottom: 1px solid var(--rule); } }

/* ———————————————— hero actions */
.hero-acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: clamp(18px, 3.5vh, 30px); position: relative; }

@media (max-width: 720px) { :root { --bar-h: 64px; } }

/* ———————————————— about page */
.story p { margin: 0 0 1em; max-width: 36em; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; color: var(--ink-2); }
.story p:first-child { color: var(--ink); }
.story p:first-child::first-letter { float: left; font-family: var(--serif); font-size: 4.2em; line-height: .82; margin: .06em .1em 0 0; font-variation-settings: "opsz" 144, "wght" 500, "SOFT" 100; color: var(--ink); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: clamp(40px, 6vw, 72px) 0 0; border-top: 1px solid var(--ink); }
.stats > div { padding: 18px 20px 0 0; border-right: 1px solid var(--rule); }
.stats > div + div { padding-left: 20px; }
.stats > div:last-child { border-right: 0; }
.stats dd { margin: 10px 0 0; font-family: var(--serif); font-size: clamp(48px, 7vw, 104px); line-height: .9; letter-spacing: -.04em; font-variation-settings: "opsz" 144, "wght" 340, "SOFT" 100; }
.stats p { margin: 10px 0 0; font-size: 14px; color: var(--ink-2); }
.timeline .row.tl { grid-template-columns: 90px 1.1fr 1.3fr 28px; text-decoration: none; color: inherit; }
.timeline .row.tl .yr { text-align: left; }
.timeline .row.tl svg { width: 16px; height: 16px; justify-self: end; color: var(--ink-3); transition: transform .4s cubic-bezier(.2,.7,.2,1), color .2s; }
.timeline .row.tl:hover svg { transform: translateX(4px); color: var(--ink); }
.values { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.values article { padding: 22px 24px 8px 0; border-right: 1px solid var(--rule); }
.values article + article { padding-left: 24px; }
.values article:last-child { border-right: 0; }
.values h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 36px); letter-spacing: -.02em; margin: 14px 0 10px; font-variation-settings: "opsz" 72, "wght" 400, "SOFT" 100; }
.values p { margin: 0; color: var(--ink-2); max-width: 30em; }
@media (max-width: 760px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stats > div { padding: 16px 12px 18px 0 !important; border-right: 0; border-bottom: 1px solid var(--rule); }
  .stats > div:nth-child(odd) { border-right: 1px solid var(--rule); }
  .stats > div:nth-child(even) { padding-left: 16px !important; }
  .timeline .row.tl { grid-template-columns: 56px 1fr 20px; }
  .timeline .row.tl .disc { grid-column: 2; grid-row: 2; font-size: 14px; }
  .values { grid-template-columns: 1fr; }
  .values article, .values article + article { padding: 20px 0; border-right: 0; border-bottom: 1px solid var(--rule); }
}
.filters { transition: top .5s cubic-bezier(.7,0,.2,1); }
.team { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 920px; gap: clamp(12px, 1.6vw, 22px); }
.member { margin: 0; }
.member .ph { aspect-ratio: 4 / 5; border-radius: 3px; overflow: hidden; background: var(--paper-2); box-shadow: var(--shadow); }
.member img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.02); transition: filter .6s, transform 1s cubic-bezier(.2,.7,.2,1); }
.member:hover img { filter: none; transform: scale(1.04); }
.member figcaption { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; }
.member .nm { font-family: var(--serif); font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -.015em; font-variation-settings: "opsz" 72, "wght" 420, "SOFT" 100; }
@media (max-width: 560px) { .team { grid-template-columns: 1fr 1fr; } }
@media (hover: none) { .member img { filter: none; } }
.crew { display: flex; flex-wrap: wrap; gap: 0; margin: clamp(28px, 4vw, 44px) 0 0; max-width: 920px; border-top: 1px solid var(--rule); }
.crew > div { display: flex; align-items: baseline; gap: 14px; padding: 16px 32px 0 0; }
.crew dt { font-family: var(--serif); font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -.015em; font-variation-settings: "opsz" 72, "wght" 420, "SOFT" 100; }
.crew dd { margin: 0; }

/* ———————————————— floating contact */
.fab { position: fixed; right: clamp(16px, 2.4vw, 32px); bottom: clamp(16px, 2.4vw, 32px); z-index: 50; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.fab { pointer-events: none; }
.fab-btn { pointer-events: auto; width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: var(--ink); color: var(--paper);
  box-shadow: 0 1px 2px rgba(0,0,0,.15), 0 12px 28px -10px rgba(20,14,4,.45); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.fab-btn:hover { transform: scale(1.06); }
.fab-btn svg { grid-area: 1 / 1; width: 24px; height: 24px; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .2s; }
.fab-btn .i-close, .fab.open .fab-btn .i-open { opacity: 0; transform: rotate(-90deg) scale(.6); }
.fab.open .fab-btn .i-close { opacity: 1; transform: none; }
.fab-menu { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.fab-menu a { display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 12px; border-radius: 99px; text-decoration: none;
  background: var(--paper-3); color: var(--ink); border: 1px solid var(--rule); box-shadow: var(--shadow);
  opacity: 0; transform: translateY(12px) scale(.96); transform-origin: right bottom; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .2s, border-color .2s; }
.fab-menu a:hover { border-color: var(--ink-3); }
.fab-menu svg { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: var(--ink); color: var(--paper); flex: none; }
.fab-menu span { display: flex; flex-direction: column; font-size: 15px; font-weight: 500; line-height: 1.2; }
.fab-menu small { font-size: 12px; font-weight: 400; color: var(--ink-3); }
.fab.open .fab-menu { pointer-events: auto; }
.fab.open .fab-menu a { opacity: 1; transform: none; }
.fab.open .fab-menu a:first-child { transition-delay: .05s; }
body.menu-lock .fab { opacity: 0; pointer-events: none; }
.fab { transition: opacity .3s; }
.fab.on-foot .fab-btn { background: var(--paper); color: var(--ink); }
@media (max-width: 1440px) { .foot-base { padding-right: calc(var(--gutter) + 72px); } }

/* contact: the send button and what it does */
.send-row { display: flex; gap: 14px 18px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.send-note { font-size: 13px; line-height: 1.45; color: var(--ink-3); }
button.cta { appearance: none; }

/* theme switch: the browser snapshots both themes and the new one is revealed in a growing circle (see switchTheme) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 2; }
html.theming, html.theming * { transition: none !important; }