/* =========================================================
   Pol Klein website, concept 2: shared styles
   Colors and type are set as roles. Indigo leads; coral, azalea, polo blue and stone support it.
   ========================================================= */

@view-transition { navigation: auto; }

:root {
  /* Palette, built from Pol's five. Teal was retired on 17 Sep 2026: beside indigo it read as a near-miss blue */
  --indigo: #38358d;           /* the lead: heroes, links, numbers. White text 10.2:1 */
  --indigo-deep: #2b2870;
  --coral: #ff695c;            /* bittersweet: action, with dark text 6.0:1 */
  --coral-hover: #ff8478;
  --petal: #f8cac9;            /* azalea: warm pink */
  --haze: #97acd3;             /* polo blue: soft blue */
  --paper: #faf7f4;            /* off-white */
  --ink: #1b1b2f;
  --muted: #5d5866;
  --line: #e6e0da;
  --mist: #f1ece6;             /* stone: quiet surfaces on the off-white */
  --soft-b: var(--haze);

  --field-brand: var(--indigo);
  --field-dark: var(--ink);
  --on-dark: #ffffff;
  --on-dark-muted: rgba(255, 255, 255, .86);
  --accent: var(--coral);
  --accent-fg: var(--ink);
  --accent-deep: var(--coral-hover);
  --link: var(--indigo);
  --focus: var(--indigo);
  --spark: var(--indigo);
  --brand-btn-bg: var(--coral);
  --brand-btn-fg: var(--ink);
  --brand-btn-hover-bg: #ffffff;
  --brand-btn-hover-fg: var(--ink);
  --highlight: var(--petal);
  --band-a: var(--petal);             /* the outcomes band: its quotes sit on petal, like the case study quotes */
  --band-a-ink: var(--ink);
  --band-a-muted: var(--muted);
  --band-a-link: var(--indigo);
  --band-quote: var(--petal);
  --band-cta: var(--field-brand);     /* the closing band is a brand moment; its buttons are white outlines (.btn-ghost), coral stays with "Start a project" */
  --band-cta-ink: var(--on-dark);
  --cta-btn-bg: var(--brand-btn-bg);
  --cta-btn-fg: var(--brand-btn-fg);
  --cta-btn-hover-bg: var(--brand-btn-hover-bg);
  --cta-btn-hover-fg: var(--brand-btn-hover-fg);
  --cta-focus: var(--highlight);

  /* Type: Schibsted Grotesk at black weight for structure, Besley for the voice */
  --sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Besley", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --x-stretch: 100%;
  --w-body: 400;
  --w-hero: 900;
  --w-display: 880;
  --w-h2: 800;
  --w-h3: 700;
  --w-ui: 650;
  --tr-hero: -0.022em;
  --tr-display: -0.018em;
  --tr-h2: -0.014em;
  --tr-h3: -0.006em;
  --v-text: 420;
  --v-voices: 560;
  --v-quote: 520;

  --gutter: clamp(20px, 4vw, 64px);
  --max: 1440px;
  --section: clamp(72px, 9vw, 144px);
  --header-h: 76px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --bleed-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 24px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.55;
  font-weight: var(--w-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.night :focus-visible, .band-cta :focus-visible, .lightbox :focus-visible, .site-header.open :focus-visible,
.site-footer :focus-visible, .site-header[data-tone="night"]:not(.scrolled) :focus-visible { outline-color: var(--highlight); }
.band-a :focus-visible { outline-color: var(--band-a-link); }
.next:focus-visible { outline-color: var(--highlight); outline-offset: -6px; }
html.menu-open, html.lb-open { overflow: hidden; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 16px; top: -80px; z-index: 100;
  background: var(--accent); color: var(--accent-fg); padding: 12px 18px; border-radius: 999px;
  text-decoration: none; font-weight: var(--w-ui);
}
.skip:focus { top: 14px; }

.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.night { background: var(--field-brand); color: var(--on-dark); }  /* indigo leads: every feature band is brand blue; black is for text and the footer */
.mist { background: var(--mist); }
.band-a { background: var(--band-a); color: var(--band-a-ink); }
.band-cta { background: var(--band-cta); color: var(--band-cta-ink); }
.muted { color: var(--muted); }
.night .muted { color: var(--on-dark-muted); }
.band-a .muted { color: var(--band-a-muted); }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px 24px; }

/* ---------- Type ---------- */
.t-hero {
  font-size: clamp(3.1rem, 9vw, 10.25rem);
  font-stretch: var(--x-stretch); font-weight: var(--w-hero);
  line-height: .92; letter-spacing: var(--tr-hero);
}
.t-display {
  font-size: clamp(2.3rem, 5.4vw, 5.25rem);
  font-stretch: var(--x-stretch); font-weight: var(--w-display);
  line-height: 1; letter-spacing: var(--tr-display);
  text-wrap: balance;
}
h2, .t-h2 {
  font-size: clamp(1.9rem, 3.6vw, 3.25rem);
  font-stretch: var(--x-stretch); font-weight: var(--w-h2);
  line-height: 1.06; letter-spacing: var(--tr-h2);
  text-wrap: balance;
}
h3, .t-h3 {
  font-size: clamp(1.25rem, 1.5vw, 1.5rem);
  font-stretch: var(--x-stretch); font-weight: var(--w-h3);
  line-height: 1.22; letter-spacing: var(--tr-h3);
}
.t-h4 { font-size: clamp(1.2rem, 1.5vw, 1.45rem); font-stretch: var(--x-stretch); font-weight: var(--w-h3); line-height: 1.22; letter-spacing: var(--tr-h3); }
.lead {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.3rem, 1.6vw, 1.55rem); line-height: 1.42; letter-spacing: -0.003em;
  max-width: 42ch;
}
.small { font-size: .9375rem; line-height: 1.5; }
.link {
  font-weight: var(--w-ui); text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 6px; text-decoration-color: var(--link);
}
.night .link { text-decoration-color: var(--highlight); }
.band-a .link { text-decoration-color: var(--band-a-link); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  font: inherit; font-size: 1rem; font-weight: var(--w-ui); font-stretch: var(--x-stretch); line-height: 1;
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary { background: var(--accent); color: var(--accent-fg); }
.btn-primary:hover { background: var(--accent-deep); color: var(--accent-fg); }
.hero .btn-primary, .page-hero.night .btn-primary,
.site-header[data-tone="night"]:not(.scrolled):not(.open) .btn-primary { background: var(--brand-btn-bg); color: var(--brand-btn-fg); }
.hero .btn-primary:hover, .page-hero.night .btn-primary:hover,
.site-header[data-tone="night"]:not(.scrolled):not(.open) .btn-primary:hover { background: var(--brand-btn-hover-bg); color: var(--brand-btn-hover-fg); }
.btn-ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn-ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.night .btn-ghost:hover, .band-cta .btn-ghost:hover, .lightbox .btn-ghost:hover { background: #fff; border-color: #fff; color: var(--field-dark); }
.hero .btn-ghost:hover, .page-hero.night .btn-ghost:hover, .band-cta .btn-ghost:hover { color: var(--field-brand); }
.btn-light { background: var(--cta-btn-bg); color: var(--cta-btn-fg); }
.btn-light:hover { background: var(--cta-btn-hover-bg); color: var(--cta-btn-hover-fg); }
.lightbox .btn-light, .lightbox .btn-light:hover { background: #fff; color: var(--ink); }
.btn-small { min-height: 42px; padding: 0 18px; font-size: .9375rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  backdrop-filter: saturate(1.4) blur(16px);
  transition: background-color .35s var(--ease), color .35s var(--ease);
  view-transition-name: site-header;
}
.site-header[data-tone="night"]:not(.scrolled):not(.open) {
  background: transparent; color: #fff;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* A backdrop filter would trap the fixed menu panel inside the header */
.site-header.open { -webkit-backdrop-filter: none; backdrop-filter: none; }
.bar {
  max-width: var(--max); margin: 0 auto; height: var(--header-h);
  padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 28px;
}
.brand {
  margin-right: auto; text-decoration: none;
  font-size: 1.28rem; font-weight: var(--w-display); font-stretch: var(--x-stretch); letter-spacing: var(--tr-h2);
}
.nav { display: flex; align-items: center; gap: 30px; }
.nav a { text-decoration: none; font-size: .97rem; font-weight: 540; }
.nav a:hover, .nav a[aria-current="page"] {
  text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 7px; text-decoration-color: var(--link);
}
.site-header[data-tone="night"]:not(.scrolled) .nav a, .site-header.open .nav a { text-decoration-color: var(--highlight); }
.menu-btn {
  display: none; appearance: none; background: transparent; border: 1.5px solid currentColor;
  color: inherit; font: inherit; font-size: .9375rem; font-weight: var(--w-ui);
  min-height: 42px; padding: 0 16px; border-radius: 999px; cursor: pointer;
}

/* ---------- Home: hero ---------- */
.hero {
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + clamp(96px, 16vh, 200px));
  padding-bottom: clamp(56px, 8vw, 112px);
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hero h1 { max-width: 11ch; }
.hero .lead { margin-top: clamp(28px, 3vw, 44px); max-width: 36ch; color: var(--on-dark-muted); }
.hero .actions { margin-top: 36px; }
html.js .hero h1, html.js .hero .lead, html.js .hero .actions { opacity: 0; }
html.js .hero h1 { filter: blur(26px); transform: scale(1.035); transform-origin: 0 100%; }
html.js .hero .lead, html.js .hero .actions { filter: blur(10px); }
html.js .hero.in h1 {
  opacity: 1; filter: blur(0); transform: none;
  transition: filter 1.1s var(--ease), opacity .7s ease, transform 1.3s var(--ease);
}
html.js .hero.in .lead {
  opacity: 1; filter: blur(0);
  transition: filter .8s var(--ease) .8s, opacity .8s ease .8s;
}
html.js .hero.in .actions {
  opacity: 1; filter: blur(0);
  transition: filter .8s var(--ease) 1s, opacity .8s ease 1s;
}

/* ---------- Home: problem ---------- */
.problem-grid { align-items: end; }
.problem-grid .t-display { grid-column: 1 / span 8; }
.problem-grid .lead { grid-column: 9 / span 4; max-width: none; }

/* ---------- Home: the second runs out ---------- */
.problem-grid { position: relative; }
.second-rule {
  position: absolute; top: calc(-1 * clamp(20px, 3vw, 40px)); left: var(--gutter); right: var(--gutter); height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: 0 50%;
}
.problem-grid.timing .second-rule { transform: scaleX(1); transition: transform 1s linear; }
.problem-grid.spent .second-rule { opacity: 0; transition: opacity .4s ease; }
.tail { transition: filter .5s var(--ease), opacity .5s var(--ease); }
.problem-grid.spent .tail { filter: blur(7px); opacity: .3; }

/* ---------- Home: what leaders tell me ---------- */
.voices-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.voices-head {
  grid-column: 1 / span 4; align-self: start;
  position: sticky; top: calc(var(--header-h) + 16vh);
}
.voices-head p { margin-top: 18px; max-width: 30ch; }
.voices-list { grid-column: 6 / span 7; list-style: none; padding: 4vh 0; }
.voices-list li {
  padding-block: 9vh;
  font-family: var(--serif);
  font-size: clamp(2.1rem, 3.9vw, 3.7rem);
  font-weight: 440; line-height: 1.08; letter-spacing: -0.018em;
  text-wrap: balance;
  transition: filter .7s var(--ease), opacity .7s var(--ease);
}
html.js .voices-list li { filter: blur(7px); opacity: .28; }
html.js .voices-list li.focus { filter: blur(0); opacity: 1; }

/* ---------- Home: what I do ---------- */
.split-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px 24px; align-items: end; }
.split-head > :first-child { grid-column: 1 / span 7; }
.split-head > :last-child { grid-column: 9 / span 4; }
.moves-list {
  list-style: none; padding: 0; margin-top: clamp(48px, 6vw, 88px); counter-reset: move;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px clamp(24px, 3vw, 56px);
}
.moves-list > li { counter-increment: move; display: flex; flex-direction: column; }
.moves-list > li::before {
  content: counter(move); margin-bottom: 22px;
  font-size: clamp(3.5rem, 6vw, 5.5rem); font-weight: var(--w-hero); font-stretch: var(--x-stretch);
  line-height: .85; letter-spacing: var(--tr-hero); color: var(--spark);
}
.moves-list h3 { font-size: clamp(1.45rem, 2vw, 1.9rem); }
.moves-list p { margin-top: 12px; max-width: 34ch; }
.deliverables { list-style: none; padding: 0; margin-top: 18px; display: grid; gap: 6px; }
.deliverables li { font-size: .9375rem; color: var(--muted); }
.moves-list .link { margin-top: auto; padding-top: 22px; align-self: flex-start; }

/* ---------- Home: what changes ---------- */
.changes-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px 24px; align-items: start; }
.outcomes { grid-column: 1 / span 5; }
.outcomes ul { list-style: none; padding: 0; margin-top: 30px; }
.outcomes li {
  padding-block: 12px;
  font-size: clamp(1.25rem, 1.8vw, 1.6rem); font-stretch: var(--x-stretch); font-weight: var(--w-h3);
  line-height: 1.22; letter-spacing: var(--tr-h3);
}
.quotes { grid-column: 7 / span 6; }
.quote[hidden] { display: none; }
.quote blockquote p {
  font-family: var(--serif);
  font-size: clamp(1.55rem, 2.5vw, 2.35rem); line-height: 1.2;
  font-weight: 420; letter-spacing: -0.01em; text-wrap: pretty;
}
.quote figcaption { margin-top: 22px; font-size: 1rem; }
.quote figcaption strong { display: block; font-weight: var(--w-h3); }
.quote { transition: opacity .35s var(--ease), filter .35s var(--ease); }
.quote.swap { opacity: 0; filter: blur(8px); }
.quote-controls { margin-top: 30px; display: flex; align-items: center; gap: 10px; }
.icon-btn {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1.5px solid currentColor; background: transparent; color: inherit;
  font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer;
  display: inline-grid; place-items: center;
}
.icon-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.night .icon-btn:hover { background: #fff; color: var(--field-dark); border-color: #fff; }
.band-a .icon-btn:hover { background: var(--band-a-ink); color: var(--band-a); border-color: var(--band-a-ink); }
.quote-count { margin-left: 8px; font-size: .9375rem; }

/* ---------- Work cards (reel and grid) ---------- */
.reel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.reel-head .intro { max-width: 52ch; }
.reel-head .intro p { margin-top: 16px; }
.reel-controls { display: flex; gap: 10px; }
.reel {
  margin-top: clamp(36px, 4vw, 56px);
  display: flex; gap: clamp(16px, 1.6vw, 24px);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: 0 var(--gutter) 16px var(--bleed-left);
  scroll-padding-left: var(--bleed-left);
  scrollbar-width: none;
}
.reel::-webkit-scrollbar { display: none; }
.card { display: block; text-decoration: none; color: inherit; }
.reel .card { flex: 0 0 clamp(290px, 38vw, 580px); scroll-snap-align: start; }
.card .ph { display: block; aspect-ratio: 3 / 2; background: var(--mist); overflow: hidden; }
.card .ph img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.card h3 { margin-top: 18px; }
.card .one-line { margin-top: 6px; color: var(--muted); max-width: 46ch; font-size: 1.0625rem; }
.card .tags { margin-top: 10px; font-size: .875rem; font-weight: 560; color: var(--muted); }
.card:hover h3 {
  text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 5px; text-decoration-color: var(--link);
}

/* ---------- Logos ---------- */
.logo-grid {
  list-style: none; padding: 0; margin-top: 44px;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 30px 40px; align-items: center;
}
/* Per-logo knobs, set inline on the img: --logo-scale for size, --logo-ink for how dark it sits on the paper */
.logo-grid img { width: 100%; height: 56px; object-fit: contain; filter: grayscale(1) brightness(1.08) contrast(1.3); mix-blend-mode: multiply; opacity: var(--logo-ink, .9); transform: scale(var(--logo-scale, 1)); }
.logo-grid img.mono { filter: contrast(1.15); mix-blend-mode: normal; --logo-ink: 1; }  /* already mono: no greyscale, no multiply (multiply is what broke iOS) */
.logo-grid img.up { --logo-scale: 1.2; }        /* marks with baked padding read small in the 56px slot */
.logo-grid img.up-more { --logo-scale: 1.25; }  /* the IRC mark carries the most padding of the set */
.logo-grid img.tight { --logo-scale: .7; }     /* art cropped close to its edges reads larger than the rest */
.funders-note { margin-top: 36px; max-width: 70ch; }

/* ---------- Insights list ---------- */
.posts { list-style: none; padding: 0; margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 32px; }
.post { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.post h3 { font-size: clamp(1.35rem, 1.8vw, 1.7rem); }
.post p { margin-top: 12px; }
.post .meta { margin-top: 16px; font-size: .875rem; font-weight: 560; color: var(--muted); }
a.post:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--link); }
.post.soon { opacity: .72; }

/* ---------- Closing band ---------- */
.cta-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta-inner .t-display { max-width: 15ch; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--field-dark); color: var(--on-dark-muted);
  padding-block: clamp(56px, 6vw, 88px) 36px; font-size: .97rem;
}
.foot-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 36px 24px; }
.foot-brand { grid-column: 1 / span 5; }
.foot-brand .name {
  color: #fff; font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: var(--w-display); font-stretch: var(--x-stretch); letter-spacing: var(--tr-display); line-height: 1;
}
.foot-brand p { margin-top: 14px; max-width: 36ch; }
.foot-col { grid-column: span 2; }
.foot-col h2 { font-size: .9375rem; font-weight: var(--w-ui); letter-spacing: 0; color: #fff; }
.foot-col ul { list-style: none; padding: 0; margin-top: 12px; display: grid; gap: 8px; }
.foot-col a { text-decoration: none; }
.foot-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.foot-base { margin-top: 64px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .875rem; }

/* ---------- Inner page hero ---------- */
.page-hero { padding-block: clamp(64px, 11vh, 140px) clamp(48px, 6vw, 88px); }
.page-hero.night { margin-top: calc(-1 * var(--header-h)); padding-top: calc(var(--header-h) + clamp(72px, 12vh, 150px)); }
.page-hero h1 {
  font-size: clamp(2.8rem, 7vw, 7rem); font-stretch: var(--x-stretch); font-weight: var(--w-hero);
  line-height: .94; letter-spacing: var(--tr-hero); max-width: 14ch;
}
.page-hero .lead { margin-top: 26px; max-width: 48ch; }
.page-hero.night .lead { color: var(--on-dark-muted); }

/* ---------- Work index ---------- */
.work-list { list-style: none; padding: 0; margin: 0; }
html.js .proj-name, html.js .proj .ph { transition: filter .55s var(--ease), opacity .55s var(--ease), transform .55s var(--ease); }
html.js .proj:not(.in) .proj-name { filter: blur(7px); opacity: .18; }
html.js .proj:not(.in) .ph { filter: blur(9px); opacity: .3; transform: scale(1.015); }
html.js .proj.in .ph { transition-delay: .09s; }
.work-list.ruled .proj + .proj .proj-inner { border-top: 1px solid rgba(255, 255, 255, .16); }
.proj[hidden] { display: none; }
.proj-link { display: block; text-decoration: none; color: inherit; }
.proj-inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px 24px; align-items: center; padding-block: clamp(44px, 6vw, 88px); }
.proj-copy { grid-column: 1 / span 6; }
.proj-meta { font-size: .875rem; font-weight: 560; opacity: .78; }
.proj-name { margin-top: 12px; font-size: clamp(2.2rem, 5vw, 4.5rem); font-stretch: var(--x-stretch); font-weight: var(--w-hero); line-height: .98; letter-spacing: var(--tr-hero); }
.proj-line { margin-top: 16px; max-width: 38ch; font-family: var(--serif); font-weight: var(--v-text); font-size: clamp(1.15rem, 1.4vw, 1.35rem); line-height: 1.45; }
.proj .tags { margin-top: 16px; font-size: .875rem; font-weight: 560; opacity: .78; }
.proj .ph { grid-column: 7 / span 6; aspect-ratio: 3 / 2; overflow: hidden; background: rgba(0, 0, 0, .06); }
.proj .ph img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .6s var(--ease); }
.proj.flip .proj-copy { grid-column: 7 / span 6; }
.proj.flip .ph { grid-column: 1 / span 6; grid-row: 1; }
.proj-link:hover .proj-name { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.proj-link:hover .ph img { transform: scale(1.03); }
.tone-petal { background: var(--petal); color: var(--ink); }
.tone-haze { background: var(--haze); color: var(--ink); }
.tone-mist { background: var(--mist); color: var(--ink); }
.tone-ink { background: var(--field-dark); color: var(--on-dark); }

/* Note panels on Insights: two short pieces set in tinted surfaces rather than
   as plain prose, so the page carries some visual interest below the card grid.
   Padding follows .way; corners stay square, as nothing else here is rounded. */
/* Two notes set as columns, no tint. The serif on this site is the voice:
   leads, quotes, project lines, article bodies. These are notes rather than
   articles, so they take the body sans at card scale and the page reads as
   editorial. The gap does the separating; no rule, since nothing else on the
   site divides columns. */
.notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3.2vw, 56px); margin-top: clamp(8px, 1vw, 16px); align-items: start; }
.note-panel h2 { font-size: clamp(1.35rem, 1.8vw, 1.7rem); }
.note-panel p { margin-top: 1em; font-size: 1.125rem; line-height: 1.55; max-width: 62ch; }
@media (max-width: 1100px) {
  /* One comfortable column beats two cramped ones. The rule turns horizontal
     here, which is how every other divider on the site behaves. */
  .notes { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 44px); }
}
@media (max-width: 700px) {
  .note-panel p { font-size: 1.0625rem; }
  .note-panel h2 { font-size: 1.3rem; }
}
.tone-indigo { background: var(--field-brand); color: var(--on-dark); }
.tone-petal .proj-link:hover .proj-name, .tone-haze .proj-link:hover .proj-name, .tone-mist .proj-link:hover .proj-name { text-decoration-color: var(--link); }
.tone-ink .proj-link:hover .proj-name, .tone-indigo .proj-link:hover .proj-name { text-decoration-color: var(--highlight); }
.tone-ink :focus-visible, .tone-indigo :focus-visible { outline-color: var(--highlight); }
.empty-note { margin-top: 24px; }

/* ---------- Case study ---------- */
.case-hero { padding-block: clamp(36px, 5vw, 72px) clamp(32px, 4vw, 56px); position: relative; }
.case-hero::before {
  content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 5px;
  background: var(--tone, transparent); transform: scaleX(0); transform-origin: 0 50%;
}
.case-hero.tone-in::before { transform: scaleX(1); transition: transform .7s var(--ease) .1s; }
.crumb { display: inline-flex; gap: 8px; font-size: .9375rem; font-weight: 600; text-decoration: none; color: var(--muted); }
.crumb:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.case-hero h1 {
  margin-top: 18px; max-width: 18ch;
  font-size: clamp(2.6rem, 6.2vw, 6.25rem); font-stretch: var(--x-stretch); font-weight: var(--w-hero);
  line-height: .95; letter-spacing: var(--tr-hero);
}
.case-client { margin-top: 22px; font-weight: var(--w-ui); }
.case-result {
  margin-top: 10px; max-width: 42ch;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.35rem, 2vw, 1.9rem); line-height: 1.32;
}
.case-hero .meta { margin-top: 36px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 24px; }
.case-hero .meta dt { font-size: .875rem; font-weight: 560; color: var(--muted); }
.case-hero .meta dd { margin-top: 4px; font-weight: var(--w-ui); font-size: 1rem; }
.case-cover img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center top; background: var(--mist); }
.one-minute {
  margin-top: clamp(48px, 6vw, 88px); background: var(--soft-b);
  padding: clamp(24px, 3vw, 44px);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px 24px;
}
.one-minute h2 { grid-column: 1 / span 3; font-size: clamp(1.4rem, 1.9vw, 1.8rem); }
.one-minute dl { grid-column: 4 / span 9; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 36px; }
.one-minute dt { font-weight: var(--w-h3); font-size: 1.0625rem; letter-spacing: -0.006em; }
.one-minute dd { margin-top: 7px; }
.story { margin-top: clamp(56px, 7vw, 110px); }
.story-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px 24px; padding-block: clamp(20px, 2.4vw, 36px); }
.story-row h2 { grid-column: 1 / span 3; font-size: clamp(1.25rem, 1.6vw, 1.5rem); }
.story-row p {
  grid-column: 5 / span 7; max-width: 62ch;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.22rem, 1.45vw, 1.4rem); line-height: 1.56;
}
.tbc {
  background: #fff1b8; color: #5c4300; font-family: var(--sans); font-weight: 600; font-size: .92em;
  padding: .05em .35em; border-radius: 3px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.film { margin-top: clamp(56px, 7vw, 110px); }
.film video, .film iframe { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; border: 0; }
.film figcaption { margin-top: 12px; font-size: .9375rem; }
.system { margin-top: clamp(64px, 8vw, 120px); }
html.js .gallery figure { transition: filter .5s var(--ease), opacity .5s var(--ease); }
html.js .gallery figure:not(.in) { filter: blur(6px); opacity: .22; }
.gallery { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(12px, 1.4vw, 20px); }
.gallery figure.full { grid-column: 1 / -1; }
.gallery figure.portrait img { width: auto; max-height: 86vh; margin-inline: auto; }
.gallery figure.full.portrait figcaption { text-align: center; }
.gallery button { all: unset; display: block; width: 100%; cursor: zoom-in; }
.gallery button:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.gallery img { width: 100%; height: auto; background: var(--mist); }
.gallery figcaption { margin-top: 12px; font-size: .9375rem; color: var(--muted); }
.gallery figcaption strong { color: var(--ink); font-weight: var(--w-ui); }
/* Websites as flat screens on a stone panel, without device frames */
.gallery figure.screen button { box-sizing: border-box; background: var(--mist); padding: clamp(18px, 4vw, 64px); }
.gallery figure.screen img { background: #fff; border-radius: 8px; box-shadow: 0 0 0 1px rgba(27, 27, 47, .08), 0 24px 48px -28px rgba(27, 27, 47, .35); }
.gallery figure.screen.portrait img { border-radius: 20px; max-height: min(70vh, 720px); }
.now-note { margin-top: clamp(56px, 7vw, 100px); }
.case-quote { margin-top: clamp(56px, 7vw, 100px); }
.case-quote blockquote p {
  font-family: var(--serif); font-weight: 420;
  font-size: clamp(1.65rem, 3vw, 2.75rem); line-height: 1.16; letter-spacing: -0.012em; max-width: 34ch;
}
.case-quote figcaption { margin-top: 22px; }
.next { display: block; text-decoration: none; color: #fff; background: var(--field-dark); }
.next-inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; padding-block: clamp(48px, 6vw, 88px); }
.next-copy { grid-column: 1 / span 6; }
.next-copy .small { color: var(--on-dark-muted); }
.next-copy h2 {
  margin-top: 10px; font-size: clamp(2.2rem, 5vw, 4.5rem);
  font-stretch: var(--x-stretch); font-weight: var(--w-hero); line-height: .98; letter-spacing: var(--tr-hero);
}
.next .ph { grid-column: 8 / span 5; aspect-ratio: 3 / 2; overflow: hidden; background: var(--field-dark); }
.next .ph img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.next:hover h2 { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; text-decoration-color: var(--highlight); }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(8, 10, 32, .97); color: #fff;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
}
.lightbox[hidden] { display: none; }
.lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px var(--gutter); }
.lb-bar .actions { gap: 8px; }
.lb-stage { display: grid; place-items: center; padding: 0 var(--gutter); min-height: 0; }
.lb-stage img { max-width: 100%; max-height: calc(100svh - 170px); width: auto; height: auto; object-fit: contain; }
.lb-cap { padding: 14px var(--gutter) 22px; color: var(--on-dark-muted); text-align: center; font-size: .9375rem; }

/* ---------- Approach ---------- */
.bigger p { max-width: 38ch; }
.ways { list-style: none; padding: 0; margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.way { background: var(--mist); padding: clamp(26px, 2.8vw, 42px); display: flex; flex-direction: column; gap: 14px; }
.way h3 { font-size: clamp(1.4rem, 1.9vw, 1.8rem); }
.way dl { margin-top: auto; padding-top: 16px; display: grid; gap: 12px; }
.way dt { font-size: .875rem; font-weight: var(--w-ui); }
.way dd { font-size: .97rem; color: var(--muted); }
.faq { margin-top: 40px; max-width: 900px; }
.faq details { border-top: 1.5px solid var(--line); }
.faq details:last-child { border-bottom: 1.5px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 48px 22px 0; position: relative;
  font-size: clamp(1.15rem, 1.5vw, 1.35rem); font-weight: var(--w-h3); font-stretch: var(--x-stretch);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 1.6rem; font-weight: 400; color: var(--spark); transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 0 24px; max-width: 64ch; color: var(--muted); }

/* ---------- Insights article ---------- */
.article { max-width: 820px; margin: 0 auto; padding-inline: var(--gutter); }
.article-head { padding-block: clamp(48px, 8vh, 110px) clamp(32px, 4vw, 56px); }
.article-head h1 {
  font-size: clamp(2.4rem, 5.4vw, 4.75rem); font-stretch: var(--x-stretch); font-weight: var(--w-hero);
  line-height: 1; letter-spacing: var(--tr-display);
}
.article-head .dek {
  margin-top: 22px; color: var(--muted);
  font-family: var(--serif); font-size: clamp(1.3rem, 1.75vw, 1.6rem); line-height: 1.4;
}
.article-head .meta-line { margin-top: 20px; font-size: .9375rem; font-weight: 560; color: var(--muted); }
.article-body { padding-bottom: var(--section); }
.article-body p { margin-top: 1.1em; font-family: var(--serif); font-size: 1.32rem; line-height: 1.62; }

/* Serif body at phone width: 1.32rem leaves roughly 7 words a line, which is
   half a comfortable measure. Applies to the article pages and the notes on
   Insights, both of which use .article-body. */
@media (max-width: 700px) {
  .article-body p { font-size: 1rem; line-height: 1.6; }
  .article-body h2 { font-size: 1.45rem; }
}
.article-body h2 { margin-top: 1.8em; font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.framework { list-style: none; padding: 0; margin-top: 1.4em; counter-reset: f; display: grid; gap: 14px; }
.framework li { counter-increment: f; display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: baseline; background: var(--mist); padding: 20px 22px; }
.framework li::before { content: counter(f); font-size: 2rem; font-weight: var(--w-hero); font-stretch: var(--x-stretch); color: var(--spark); line-height: 1; }
.framework strong { display: block; font-weight: var(--w-h3); font-size: 1.2rem; }
.framework span { color: var(--muted); font-size: 1.05rem; }

/* ---------- About ---------- */
.beliefs { list-style: none; padding: 0; margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px clamp(24px, 3vw, 56px); }
.beliefs h3 { font-size: clamp(1.45rem, 2vw, 1.9rem); }
.beliefs p { margin-top: 12px; max-width: 34ch; }
.orgs { list-style: none; padding: 0; margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.orgs li { padding-block: 18px; border-top: 1.5px solid var(--line); display: flex; justify-content: space-between; gap: 16px; }
.orgs strong { font-weight: var(--w-h3); }
.orgs span { color: var(--muted); text-align: right; white-space: nowrap; }
.creds { list-style: none; padding: 0; margin-top: 28px; display: grid; gap: 8px; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px 24px; }
.form { grid-column: 1 / span 7; display: grid; gap: 20px; }
.field label { display: block; font-weight: var(--w-ui); font-size: .9375rem; margin-bottom: 8px; }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; font-size: 1.0625rem; color: var(--ink);
  padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff;
}
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--ink); }
.form-note { font-size: .9375rem; color: var(--muted); }
/* Result of sending. Hidden until there is something to say, and coloured by
   outcome, because plain text at the foot of the form was too easy to miss. */
.form-status { display: none; margin: 0; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 6px; font-size: .9375rem; font-weight: 400; background: var(--petal); box-shadow: inset 0 0 0 1px #efb3b2; }
.form-status.is-on { display: flex; }
.form-status .mark { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; }
.form-status .mark svg { width: 14px; height: 14px; }
.form-status .said { display: grid; gap: 2px; }
.form-status strong { font-weight: var(--w-ui); color: var(--ink); }
.form-status span { color: var(--muted); }
.form-status.is-bad { background: #fdeceb; box-shadow: inset 0 0 0 1px #f6cfcc; }
/* While sending, show no tick: a tick before the send completes reads as success. */
.form-status.is-working { background: var(--mist); box-shadow: inset 0 0 0 1px var(--line); }
.form-status.is-working .mark { background: var(--line); }
.form-status.is-working .mark svg { display: none; }
.contact-aside { grid-column: 9 / span 4; }
.contact-aside h2 { font-size: clamp(1.3rem, 1.7vw, 1.6rem); }
.contact-aside p { margin-top: 12px; }
.contact-aside ol { margin-top: 12px; padding-left: 1.2em; display: grid; gap: 8px; }

/* ---------- Machine view ---------- */
.machine-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }
.machine pre {
  margin-top: 40px; max-width: 92ch; white-space: pre-wrap;
  font-family: var(--mono); font-size: .9375rem; line-height: 1.72;
}

/* ---------- Helpers ---------- */
.col-main { grid-column: 1 / span 7; }
.col-side { grid-column: 9 / span 4; align-self: end; }
.moves-list.flush { margin-top: 0; }
.nav .nav-cta { display: none; }
.site-header.open .nav .nav-cta { display: block; color: var(--highlight); }
.see-all { margin-top: 28px; }
.spaced { margin-top: 18px; }

/* ---------- Voice weights, set by the serif choice ---------- */
.lead, .case-result, .story-row p, .article-head .dek, .article-body p { font-weight: var(--v-text); }
.voices-list li { font-weight: var(--v-voices); }
.quote blockquote p, .case-quote blockquote p { font-weight: var(--v-quote); }
.band-cta :focus-visible { outline-color: var(--cta-focus); }
.case-quote.band-a { background: var(--band-quote); color: var(--ink); }
.case-quote.band-a :focus-visible { outline-color: var(--ink); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; align-items: center; }
  .case-hero .meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-header.open { background: var(--field-dark); color: #fff; }
  .site-header.open .nav {
    display: flex; position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0;
    flex-direction: column; align-items: flex-start; gap: 22px;
    padding: 36px var(--gutter); background: var(--field-dark); color: #fff; overflow-y: auto;
  }
  .site-header.open .nav a { font-size: 2rem; font-weight: var(--w-display); font-stretch: var(--x-stretch); letter-spacing: var(--tr-h2); }
}
@media (max-width: 900px) {
  .grid-12, .voices-grid, .split-head, .changes-grid, .foot-grid, .next-inner,
  .story-row, .one-minute, .contact-grid, .proj-inner { grid-template-columns: minmax(0, 1fr); }
  .grid-12 > *, .voices-grid > *, .split-head > *, .changes-grid > *, .foot-grid > *,
  .next-inner > *, .story-row > *, .one-minute > *, .contact-grid > *, .proj-inner > *,
  .problem-grid .t-display, .problem-grid .lead { grid-column: 1 / -1; }
  .split-head > :first-child, .split-head > :last-child, .one-minute h2, .one-minute dl,
  .story-row h2, .story-row p, .next .ph { grid-column: 1 / -1; }
  .voices-head { position: static; }
  .voices-list li { padding-block: 5vh; }
  .moves-list, .beliefs, .ways, .posts { grid-template-columns: minmax(0, 1fr); }
  .logo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .case-hero .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .one-minute dl { grid-template-columns: minmax(0, 1fr); }
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .orgs { grid-template-columns: minmax(0, 1fr); }
  .proj .ph { grid-column: 1 / -1; }
  .proj-line { max-width: none; }
  .bar .btn-primary { display: none; }
}
@media (max-width: 560px) {
  .logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .logo-grid img { height: 44px; }
  .reel .card { flex-basis: 82vw; }
  .orgs li { flex-direction: column; gap: 2px; }
  .orgs span { text-align: left; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after {
    transition-duration: 0s !important; transition-delay: 0s !important;
    animation-duration: 0s !important; animation-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  html.js .hero h1, html.js .hero .lead, html.js .hero .actions { opacity: 1; filter: none; transform: none; }
  html.js .voices-list li { filter: none; opacity: 1; }
  html.js .proj-name, html.js .proj .ph, html.js .gallery figure { filter: none !important; opacity: 1 !important; transform: none !important; }
  .problem-grid.spent .tail { filter: none; opacity: 1; }
}

/* =========================================================
   Design site: the work reads on the indigo field, divided by
   hairlines, so the images carry the color and the page stays calm.
   ========================================================= */
.hero-compact {  /* pull the blue up behind the sticky header, as the main site does, so the
     white header text never lands on the page background */
  margin-top: calc(-1 * var(--header-h));
  padding-block: calc(var(--header-h) + clamp(72px, 12vh, 150px)) clamp(48px, 6vw, 88px);
}
.hero-compact .lead { max-width: 54ch; margin-top: 22px; }

/* Home and Work open on a taller field. The heading sits low with real space above it, the
   way the main site's hero does, so the blue reads as a panel rather than a strip. */
.hero-xl {  /* the home page only: a tall field with the heading sitting low in it,
     the way the main site's hero does. Every other page uses the base above, which
     carries the same padding as the main site's inner-page hero. */
  min-height: clamp(520px, 92svh, 1020px);
  padding-top: calc(var(--header-h) + clamp(104px, 18vh, 260px));
  padding-bottom: clamp(96px, 13vh, 200px);  /* lifts the block off the bottom edge */
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hero-xl > .wrap { width: 100%; }  /* .wrap has margin-inline:auto; as a flex item that would
     shrink it to its content and centre it, pulling the text off the site's left margin */
.hero-xl .lead { margin-top: clamp(32px, 3.6vw, 56px); }
.hero-xl h1 { line-height: .98; }  /* .92 let the p of "pages" hit the l of "people" below it:
     the tallest ascender (.732em) plus the deepest descender (.204em) needs .936em clear */

.work-list { padding-block: 0 clamp(56px, 7vw, 104px); }
.projects { list-style: none; padding: 0; margin: 0; }
.projects li { position: relative; }
.projects li + li::before {  /* hairline inset to the content margins, none above the first */
  content: ""; position: absolute; top: 0; left: var(--bleed-left); right: var(--bleed-left);
  height: 1px; background: rgba(255, 255, 255, .24);
}
.project-link { display: block; text-decoration: none; padding-block: clamp(26px, 3.2vw, 44px); }
.project-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(20px, 3.4vw, 56px); align-items: center; }
.project-meta { font-size: .9375rem; color: var(--on-dark-muted); }
.project-name { margin-top: 10px; font-size: clamp(1.7rem, 2.7vw, 2.6rem); font-weight: var(--w-h2); font-stretch: var(--x-stretch); letter-spacing: var(--tr-h2); line-height: 1.04; }
.project-role { margin-top: 12px; color: var(--on-dark-muted); max-width: 48ch; }
.project-shot { display: block; overflow: hidden; }
.project-shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center top; }
.project-link:hover .project-name {
  text-decoration: underline; text-decoration-thickness: 3px;
  text-underline-offset: 8px; text-decoration-color: var(--highlight);
}

/* What I make: a plain list of disciplines, not service cards */
.craft { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); list-style: none; padding: 0; margin-top: clamp(30px, 3.2vw, 48px); }
.craft li { padding: 11px 0; border-top: 1px solid var(--line); font-weight: var(--w-ui); }
.tools { margin-top: 30px; max-width: 64ch; color: var(--muted); }

/* Three short craft notes, side by side */
.notes-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(26px, 3.2vw, 52px); margin-top: 30px; align-items: start; }
.note-col { border-top: 2.5px solid var(--ink); padding-top: 16px; }
.note-col h3 { font-size: clamp(1.15rem, 1.5vw, 1.4rem); }
.note-col p { margin-top: .85em; font-size: 1.0625rem; line-height: 1.5; }

@media (max-width: 960px) {
  .project-inner { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .project-shot { order: -1; }
  .notes-3, .craft { grid-template-columns: minmax(0, 1fr); }
  .notes-3 { gap: 30px; }
}

/* "What I make" sits on the blue, directly above the first project, because a
   recruiter looks for the disciplines before the case studies. */
.craft-band { background: var(--paper); color: var(--ink); padding-block: calc(var(--section) * 1.45); }
  /* more than the Insights panel on purpose: this one has hard colour edges, so the same
     measurement reads tighter than Insights, which is transparent and sits on open page */
.night .craft li { border-top-color: rgba(255, 255, 255, .24); }
.night .tools { color: var(--on-dark-muted); }

/* Work page: projects on paper so the images hold their own color, with the
   captions carrying one fact each, and the same inset hairline between them. */
.case { position: relative; padding-block: clamp(44px, 5.5vw, 88px); }
.case + .case::before {
  content: ""; position: absolute; top: 0; left: var(--bleed-left); right: var(--bleed-left);
  height: 1px; background: var(--line);
}
.case-meta { font-size: .9375rem; color: var(--muted); }
.case h2 { margin-top: 10px; }
.case-role { margin-top: 10px; font-weight: var(--w-ui); }
.case-made { margin-top: 14px; max-width: 64ch; }
.case-shots { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(22px, 2.6vw, 40px); margin-top: clamp(26px, 3vw, 46px); }
.shot { grid-column: 1 / -1; margin: 0; }
.shot-phone { grid-column: span 4; }
.shot img { width: 100%; height: auto; background: var(--mist); }
.shot figcaption { margin-top: 10px; font-size: .9375rem; color: var(--muted); }
.shot figcaption b { color: var(--ink); font-weight: var(--w-ui); }

/* About: roles and study, as plain rows */
.about-body p + p { margin-top: 1.1em; }
.about-body { max-width: 68ch; }

@media (max-width: 760px) {
  .shot-phone { grid-column: span 6; }
}

.ruled-end .projects li:last-child::after {  /* closes the run where it meets the blue band */
  content: ""; position: absolute; bottom: 0; left: var(--bleed-left); right: var(--bleed-left);
  height: 1px; background: rgba(255, 255, 255, .24);
}