/* Field Notes — uxmatt.com
   Every color and font is a token. Company editions override these
   tokens from their content file, so one stylesheet serves every page.

   Layout: one grid. On wide screens a narrow rail holds labels and the portrait,
   and all reading content starts on the same left edge, the second column. */

:root {
  --bg: #111318;
  --surface: #1B1E25;
  --surface-2: #23272F;
  --border: #2C313B;
  --text: #ECEDEE;
  --muted: #B9BEC6;
  --subtle: #9BA1A9;
  --accent: #FF9F2E;
  --on-accent: #111318;
  --fog-1: #FF9F2E;
  --fog-2: #F0357F;
  --fog-3: #7A45FF;
  --font-display: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --radius: 10px;
  /* Every case study cover uses this shape at every screen size, so a 16:10 image is never cropped */
  --cover-ratio: 16 / 10;
  --max: 1280px;
  --gutter: clamp(16px, 5vw, 64px);
  --rail: 240px;
  --size-body: 17px;
  --size-hero: 64px;
  --size-section: 40px;
  --size-card: 32px;
  --rail-gap: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.6;
}
/* Fog: two large, blurred layers that drift on their own (no scrolling needed) at different
   speeds and directions. Colors come from the --fog tokens; editions set them from their own accent.
   Alpha stays low so text contrast on --bg holds. */
body::before, body::after {
  content: "";
  position: fixed;
  inset: -40%;
  z-index: -1;
  pointer-events: none;
  filter: blur(60px);
  will-change: transform;
}
body::before {
  background:
    radial-gradient(32% 28% at 28% 32%, color-mix(in srgb, var(--fog-1) 14%, transparent), transparent 70%),
    radial-gradient(30% 34% at 72% 68%, color-mix(in srgb, var(--fog-2) 12%, transparent), transparent 70%);
  animation: fog-a 12s ease-in-out infinite alternate;
}
body::after {
  background:
    radial-gradient(34% 26% at 68% 28%, color-mix(in srgb, var(--fog-3) 13%, transparent), transparent 70%),
    radial-gradient(28% 34% at 32% 72%, color-mix(in srgb, var(--fog-2) 11%, transparent), transparent 70%);
  animation: fog-b 16s ease-in-out infinite alternate;
}
@keyframes fog-a {
  0%   { transform: translate3d(-18%, 8%, 0) rotate(0deg) scale(1); }
  33%  { transform: translate3d(6%, -14%, 0) rotate(14deg) scale(1.2); }
  66%  { transform: translate3d(20%, 6%, 0) rotate(-8deg) scale(0.95); }
  100% { transform: translate3d(-6%, 16%, 0) rotate(10deg) scale(1.15); }
}
@keyframes fog-b {
  0%   { transform: translate3d(16%, -10%, 0) rotate(0deg) scale(1.15); }
  40%  { transform: translate3d(-14%, 6%, 0) rotate(-16deg) scale(0.95); }
  70%  { transform: translate3d(-20%, -14%, 0) rotate(8deg) scale(1.25); }
  100% { transform: translate3d(12%, 14%, 0) rotate(-6deg) scale(1.05); }
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); }
a:hover { opacity: 0.85; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.mono { font-family: var(--font-mono); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--accent); color: var(--on-accent); padding: 8px 12px; z-index: 10; }

/* Header */
.site-header .wrap { display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: center; justify-content: space-between; padding-top: 12px; padding-bottom: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 18px; }
.brand-mark { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; background: var(--accent); color: var(--on-accent); font-family: var(--font-mono); font-size: 13px; font-weight: 600; border-radius: var(--radius); }
.brand-logo { display: block; height: 32px; width: auto; max-width: 220px; object-fit: contain; }
/* Wide screens: the logo at full size */
@media (min-width: 900px) {
  .brand-logo { height: 50px; max-width: 280px; }
  .site-header .wrap { padding-top: 10px; padding-bottom: 10px; }
}
.nav { display: flex; flex-wrap: wrap; gap: 0 clamp(16px, 4vw, 28px); font-size: clamp(15px, 4vw, 16px); font-weight: 500; }
.nav a { color: var(--text); text-decoration: none; padding: 12px 0; }
.nav a:hover { color: var(--accent); opacity: 1; }
.nav a[aria-current] { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.menu-button { display: none; }
/* Narrow phones: the logo and four links don't fit on one line, so the links open from a Menu button */
@media (max-width: 519px) {
  .has-menu { position: relative; z-index: 20; }
  .has-menu .menu-button { display: inline-flex; align-items: center; min-height: 40px; margin-left: auto; padding: 0 16px; background: none; border: 1px solid var(--border); border-radius: 999px; color: var(--text); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
  .has-menu .menu-button:hover, .has-menu.menu-open .menu-button { border-color: var(--accent); }
  .has-menu .nav { display: none; }
  .has-menu.menu-open .nav { display: flex; flex-direction: column; align-items: flex-start; position: absolute; top: 100%; left: 0; right: 0; padding: 4px var(--gutter) 12px; background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: 0 16px 32px rgb(0 0 0 / .35); font-size: 17px; }
  .has-menu.menu-open .nav a { padding: 10px 0; }
}

/* Hero */
.hero .wrap { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-end; padding-top: clamp(40px, 6vw, 88px); padding-bottom: 88px; }
.hero-main { flex: 999 1 560px; min-width: 0; }
.eyebrow { margin: 0 0 20px; font-family: var(--font-mono); font-size: 16px; font-weight: 500; color: var(--muted); }
.hero h1 { margin: 0; font-family: var(--font-display); font-size: clamp(min(38px, var(--size-hero)), 5vw, var(--size-hero)); line-height: 1.06; text-wrap: balance; }
.hero-intro { margin: 24px 0 0; max-width: 640px; font-size: clamp(18px, 1.7vw, 21px); line-height: 1.5; color: var(--muted); }
.hero-actions { margin-top: 32px; }
.edition-image { flex: 1 1 340px; margin: 0; }
.edition-image img { width: 100%; border-radius: var(--radius); }
.quote-card { flex: 1 1 340px; margin: 0; padding: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.quote-card .label { margin: 0 0 16px; font-family: var(--font-mono); font-size: 16px; font-weight: 500; color: var(--muted); }
.quote-card blockquote { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 1.35; font-weight: 500; }

/* Portrait: the screen blend drops the photo's blacks out, so the face comes out of the
   page itself and the fog moves through the dark parts of the picture. Dark themes only. */
.hero-home .wrap { display: block; }
.hero-id { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.hero-id .eyebrow { margin: 0; }
.portrait { flex: 0 0 auto; width: 72px; margin: 0; }
.portrait img {
  width: 100%;
  filter: grayscale(1) contrast(1.2) brightness(.95);
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 70%, transparent 100%);
}

/* Hero reel: case study tiles drift down a diagonal on the right of the home hero,
   cut off cleanly at the top and bottom of the hero rather than fading out.
   The lane is skewed, so tiles stacked in a column become a staircase; each tile is
   skewed back to a slight lean. The track holds the set twice and moves down by half, starting half a set up. */
.hero-reel {
  --tile-w: clamp(200px, 21vw, 340px);
  --step: calc(var(--tile-w) * .42);
  position: absolute; top: 0; bottom: 0; left: 54%; right: 0; overflow-x: visible; overflow-y: clip; pointer-events: none;
}
.reel-lane { position: absolute; top: 0; bottom: 0; left: calc(46% - var(--tile-w) / 2); width: var(--tile-w); transform: skewX(-35deg); }
.reel-track { margin: 0; padding: 0; list-style: none; animation: reel-down calc(var(--count) * 4.5s) linear infinite; }
.reel-track li { position: relative; height: var(--step); transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .45s; }
.reel-track li:hover { z-index: 1; }
/* Hovering a tile pushes the others out of its way along the diagonal: tiles above move up
   and right, tiles below move down and left. The nearest neighbors move the most. */
.reel-track:has(li:hover) li:not(:hover) { opacity: .7; }
.reel-track li:has(~ li:hover) { transform: translateY(calc(var(--tile-w) * -.12)); }
.reel-track li:has(+ li:hover) { transform: translateY(calc(var(--tile-w) * -.2)); }
.reel-track li:hover ~ li { transform: translateY(calc(var(--tile-w) * .16)); }
.reel-track li:hover + li { transform: translateY(calc(var(--tile-w) * .26)); }
.reel-tile {
  position: absolute; top: 0; left: 0; width: var(--tile-w); aspect-ratio: var(--cover-ratio); overflow: hidden; pointer-events: auto;
  background: var(--surface-2); border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); border-radius: 14px;
  box-shadow: 0 24px 48px rgb(0 0 0 / .5); color: var(--text); text-decoration: none;
  transform: skewX(32deg); transition: transform .3s ease, border-color .3s;
}
.reel-tile:hover { opacity: 1; border-color: var(--accent); transform: skewX(32deg) scale(1.06); }
.reel-tile :is(img, video) { width: 100%; height: 100%; object-fit: cover; }
.reel-tile-text {
  background:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--fog-1) 45%, transparent), transparent 60%),
    radial-gradient(circle at 90% 95%, color-mix(in srgb, var(--fog-3) 50%, transparent), transparent 60%),
    radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--fog-2) 25%, transparent), transparent 55%),
    var(--surface-2);
}
.reel-label { position: absolute; top: 14px; left: 16px; font-size: 12px; font-weight: 500; letter-spacing: .02em; color: color-mix(in srgb, var(--text) 75%, transparent); }
.reel-title { position: absolute; left: 16px; right: 16px; top: 34px; font-family: var(--font-display); font-size: calc(var(--tile-w) * .062); font-weight: 600; line-height: 1.15; text-wrap: balance; }
.reel-tile:not(.reel-tile-text) .reel-title { top: 0; left: 0; right: 0; padding: 14px 16px 28px; background: linear-gradient(rgb(0 0 0 / .75), transparent); opacity: 0; transition: opacity .3s; }
.reel-tile:hover .reel-title { opacity: 1; }
.hero-reel:hover .reel-track, .hero-reel.paused .reel-track { animation-play-state: paused; }
@keyframes reel-down { from { transform: translateY(-50%); } to { transform: none; } }
.reel-pause {
  position: absolute; right: var(--gutter); bottom: 20px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  background: color-mix(in srgb, var(--surface) 85%, transparent); border: 1px solid var(--border); border-radius: 50%; color: var(--muted); cursor: pointer;
}
.reel-pause:hover { color: var(--text); border-color: var(--muted); }
.reel-pause .i-play, .reel-pause[aria-pressed="true"] .i-pause { display: none; }
.reel-pause[aria-pressed="true"] .i-play { display: inline; }
/* The text keeps to the left 44%, and the tiles start at 54%, so there is always clear space between them */
.hero-home .hero-main { position: relative; z-index: 1; max-width: 44%; }
.hero-home h1 { font-size: clamp(min(38px, var(--size-hero)), 4.3vw, var(--size-hero)); }
.home .scene-pin > .hero-reel, .home .scene-pin > .reel-pause { width: auto; }

/* Phones and tablets: the text comes first, and the reel becomes a band along the bottom */
@media (max-width: 899px) {
  .hero-reel { --tile-w: clamp(140px, 38vw, 240px); top: auto; bottom: 0; left: 0; height: 26svh; }
  .home .scene-hero .scene-pin { padding-bottom: 26svh; }
  .scenes .hero-home h1 { font-size: 34px; }
  .scenes .scene-hero .scroll-cue { display: none; }
  .hero-home .hero-main { max-width: none; }
  .reel-pause { bottom: 12px; width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .reel-track { animation: none; transform: translateY(calc(var(--step) * -2)); }
  .reel-pause { display: none; }
  .reel-track li, .reel-tile { transition: none; }
}

/* Sections: every section is its own band, so where one ends and the next starts is never in doubt */
.section { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); }
.section-alt { background: color-mix(in srgb, var(--surface) 70%, transparent); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.hero + .section,
.section:not(.section-alt) + .section:not(.section-alt) { border-top: 1px solid var(--border); }
.section-head { margin-bottom: 32px; }
.section-head h2, .footer-label { margin: 0; font-family: var(--font-display); font-size: clamp(min(32px, var(--size-section)), 3vw, var(--size-section)); line-height: 1.1; }
.section-head p { margin: 12px 0 0; font-size: 16px; line-height: 1.45; color: var(--muted); }


/* Image placeholder: a wireframe box, so it can't be mistaken for finished work */
.img-placeholder { position: relative; display: grid; place-items: center; width: 100%; height: 100%; padding: 16px; background: var(--surface-2); border: 1px dashed var(--subtle); border-radius: var(--radius); overflow: hidden; }
.img-placeholder svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: color-mix(in srgb, var(--subtle) 35%, transparent); }
.img-placeholder-label { position: relative; padding: 6px 12px; background: var(--surface-2); font-size: 14px; font-weight: 500; line-height: 1.4; text-align: center; color: var(--muted); }
.img-placeholder-label small { display: block; font-size: 14px; font-weight: 400; color: var(--subtle); }

/* Case studies: rows, not boxes */
.card { display: grid; gap: 20px; padding: 32px 0; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; }
.card:first-child { padding-top: 0; }
.card:last-child { padding-bottom: 0; border-bottom: 0; }
.card:hover { opacity: 1; }
.card-media { aspect-ratio: var(--cover-ratio); border-radius: var(--radius); overflow: hidden; }
.card-media :is(img, video) { width: 100%; height: 100%; object-fit: cover; }
.card:hover .img-placeholder { border-color: var(--accent); }
.card-body { display: flex; flex-direction: column; gap: 10px; }
.card-kicker { margin: 0; font-family: var(--font-mono); font-size: 15px; color: var(--subtle); }
.card h3 { margin: 0; font-family: var(--font-display); font-size: clamp(min(26px, var(--size-card)), 2.6vw, var(--size-card)); line-height: 1.15; transition: color .15s; }
.card:hover h3 { color: var(--accent); }
.card-summary { margin: 0; max-width: 680px; font-size: 18px; line-height: 1.5; color: var(--muted); }
.card-outcome { margin: 6px 0 0; max-width: 680px; font-size: 17px; line-height: 1.5; }
.card-outcome strong { font-weight: 600; }
.card-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-weight: 600; color: var(--accent); }

/* Home page work cards: the image in a framed tile, with the title and link underneath */
.work-section .section-head { display: flex; align-items: end; gap: 24px; margin-bottom: 32px; }
/* Every case study at once: two columns on phones, up to four on wide screens */
.work-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(140px, calc((100% - 3 * 16px) / 4)), 1fr)); gap: 16px; }
.work-card { display: flex; flex-direction: column; padding: 8px; background: color-mix(in srgb, var(--surface) 85%, transparent); border: 1px solid var(--border); border-radius: calc(var(--radius) + 6px); color: var(--text); text-decoration: none; transition: border-color .2s, background-color .2s; }
.work-card:hover { opacity: 1; border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: var(--surface); }
.work-card-media { aspect-ratio: var(--cover-ratio); border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.work-card-media :is(img, video) { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.work-card:hover .work-card-media :is(img, video) { transform: scale(1.03); }
.work-card:hover .img-placeholder { border-color: var(--accent); }
.work-card-foot { display: flex; flex: 1; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 12px 6px 6px; }
.work-card h3 { margin: 0; font-family: var(--font-display); font-size: clamp(16px, 1.5vw, 20px); line-height: 1.2; }
.work-card-cta { display: inline-flex; flex-shrink: 0; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; white-space: nowrap; color: var(--accent); }
.work-card-cta svg { transition: transform .2s; }
.work-card:hover .work-card-cta svg { transform: translateX(4px); }
@media (min-width: 900px) {
  .section.work-section > .wrap { display: block; }
  .work-section .section-head { position: static; }
}

/* Disciplines: numbered cards in rows of two and three, each with an optional image
   tucked into its lower right corner. --span comes from the template. */
.disciplines { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.discipline { container-type: inline-size; position: relative; grid-column: span var(--span, 2); min-height: 210px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.discipline-copy { position: relative; z-index: 1; padding: 24px 28px 28px; }
.discipline:not(.discipline-text) .discipline-copy { max-width: 58%; }
.discipline-num { margin: 0 0 18px; font-size: 18px; line-height: 1; color: var(--subtle); font-variant-numeric: tabular-nums; }
.discipline h3 { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.25; }
.discipline p:last-child { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.discipline-img { position: absolute; right: 0; bottom: 0; width: 40%; height: 88%; object-fit: contain; object-position: right bottom; }
@container (max-width: 380px) {
  .discipline:not(.discipline-text) .discipline-copy { max-width: none; padding-bottom: 0; }
  .discipline-img { position: static; display: block; width: 100%; height: 130px; margin-top: 12px; object-position: right bottom; }
}
@media (min-width: 900px) {
  .section.disciplines-section > .wrap { display: block; }
  .disciplines-section .section-head { position: static; margin-bottom: 32px; }
}
/* Laptop screens: tighter cards and smaller images, so the section still fits one screen */
@media (min-width: 900px) and (max-height: 860px) {
  .scenes .discipline { min-height: 150px; }
  .scenes .discipline-copy { padding: 18px 22px 20px; }
  .scenes .discipline-num { margin-bottom: 10px; font-size: 16px; }
  .scenes .discipline h3 { font-size: 20px; }
  .scenes .discipline p:last-child { margin-top: 6px; font-size: 15px; line-height: 1.45; }
}
@container (max-width: 380px) {
  @media (min-width: 900px) and (max-height: 860px) {
    .scenes .discipline-img { height: 84px; margin-top: 8px; }
  }
}
/* Phones: one row you swipe through, with the next card peeking in */
@media (max-width: 699px) {
  .disciplines { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(80vw, 320px); margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
  .discipline { grid-column: auto; scroll-snap-align: start; }
}

/* Experience */
.path-item { display: grid; gap: 2px; padding: 22px 0; border-bottom: 1px solid var(--border); }
.path-item:first-child { padding-top: 0; }
.path-item:last-child { padding-bottom: 0; border-bottom: 0; }
.path-item p { margin: 0; }
.path-item .co { font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.3; }
.path-item .role { font-size: 17px; color: var(--muted); }
.path-item .when { font-size: 16px; color: var(--subtle); font-variant-numeric: tabular-nums; }
.path-item.current .when { color: var(--accent); }
.path-item .desc { max-width: 720px; margin-top: 8px; font-size: 16px; line-height: 1.6; color: var(--muted); }
.section-head .resume-btn { min-height: 44px; margin-top: 8px; padding: 0 18px; font-size: 15px; }
.resume-btn span { font-size: 12px; font-weight: 500; color: var(--subtle); }
/* Phones: with descriptions the list gets long, so the jobs become a row you swipe, like Disciplines */
@media (max-width: 699px) {
  .path:has(.desc) { display: grid; grid-auto-flow: column; grid-auto-columns: min(80vw, 320px); gap: 12px; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
  .path:has(.desc) .path-item { align-content: start; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); scroll-snap-align: start; }
}

/* Buttons */
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 24px; font-weight: 600; text-decoration: none; border-radius: var(--radius); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-ghost { border: 1px solid var(--border); color: var(--text); }

/* Footer */
.site-footer { background: color-mix(in srgb, var(--surface) 70%, transparent); border-top: 1px solid var(--border); }
.site-footer .wrap { display: grid; gap: 32px; padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); }
.site-footer h2 { margin: 0; font-family: var(--font-display); font-size: clamp(34px, 4.6vw, 56px); line-height: 1.06; text-wrap: balance; }
.site-footer h2 span { color: var(--accent); }
.legal .wrap { padding-top: 24px; padding-bottom: 24px; font-size: 14px; color: var(--subtle); }
.legal a { color: var(--subtle); }

/* Case study page */
.cs-hero { padding-top: clamp(32px, 4vw, 56px); padding-bottom: 48px; }
.back { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--muted); text-decoration: none; margin-bottom: 20px; }
.cs-hero h1 { margin: 0; max-width: 860px; font-family: var(--font-display); font-size: clamp(36px, 4.6vw, 60px); line-height: 1.06; text-wrap: balance; }
.cs-summary { margin: 24px 0 0; max-width: 720px; font-size: 20px; line-height: 1.5; color: var(--muted); }
.cs-meta { margin: 40px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; border-top: 1px solid var(--border); }
.cs-meta div { padding: 18px 24px 18px 0; }
.cs-meta dt { font-size: 14px; color: var(--subtle); }
.cs-meta dd { margin: 4px 0 0; font-size: 16px; }
.cs-cover { margin-bottom: 64px; }
.cs-cover :is(img, video) { display: block; width: 100%; aspect-ratio: var(--cover-ratio); object-fit: cover; border: 1px solid var(--border); border-radius: var(--radius); }
.cs-cover .img-placeholder, .prose .img-placeholder { aspect-ratio: var(--cover-ratio); height: auto; }
.contents { display: none; }
.prose { max-width: 720px; padding-bottom: 88px; }
.prose h2 { margin: 56px 0 16px; padding-top: 32px; border-top: 1px solid var(--border); font-family: var(--font-display); font-size: 30px; line-height: 1.2; scroll-margin-top: 88px; }
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { margin: 36px 0 12px; font-size: 22px; font-weight: 600; }
.prose p, .prose li { color: var(--muted); font-size: 18px; line-height: 1.7; }
.prose strong { color: var(--text); }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin: 6px 0; }
.prose li::marker { color: var(--accent); }
.prose blockquote { margin: 32px 0; padding: 0; }
.prose blockquote p { margin: 0; color: var(--text); font-family: var(--font-display); font-size: 26px; font-weight: 500; line-height: 1.3; }
.prose figure { margin: 40px 0; }
.prose figure img, .prose video { border: 1px solid var(--border); border-radius: var(--radius); }
.prose video { display: block; width: 100%; height: auto; background: var(--surface-2); }
.prose figcaption { margin-top: 10px; font-size: 14px; color: var(--subtle); }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 48px 0; }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }
.cs-next { padding-bottom: 104px; }
.next-cs { display: flex; flex-direction: column; gap: 6px; max-width: 720px; padding: 24px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; }
.next-cs:hover { opacity: 1; }
.next-cs:hover .t { color: var(--accent); }
.next-cs .label { font-size: 15px; color: var(--subtle); }
.next-cs .t { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 26px; font-weight: 600; line-height: 1.2; transition: color .15s; }

/* Company edition */
.edition-bar { background: var(--surface); border-bottom: 1px solid var(--border); }
.edition-bar .wrap { padding-top: 10px; padding-bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.edition-bar strong { color: var(--text); font-weight: 500; }
.fit { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.fit-item { padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.fit-item .need { margin: 0 0 10px; font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--accent); }
.fit-item .proof { margin: 0; font-size: 17px; }
.ai-note { padding: clamp(24px, 4vw, 40px); border: 1px dashed var(--border); border-radius: var(--radius); display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: flex-start; }
.ai-note h2 { margin: 0; flex: 1 1 240px; font-family: var(--font-display); font-size: 26px; line-height: 1.2; }
.ai-note p { margin: 0; flex: 2 1 380px; color: var(--muted); }

/* Display headings: editions can set case, weight and tracking */
.hero h1, .cs-hero h1, .section-head h2, .footer-label, .card h3, .work-card h3, .site-footer h2, .prose h2, .ai-note h2, .welcome h1, .next-cs .t {
  text-transform: var(--display-transform, none);
  font-weight: var(--display-weight, 600);
}
.hero h1, .cs-hero h1, .site-footer h2, .welcome h1 { letter-spacing: var(--display-tracking, -0.025em); }
.section-head h2, .footer-label, .card h3, .work-card h3, .prose h2, .ai-note h2, .next-cs .t { letter-spacing: var(--display-tracking, -0.015em); }

/* Sample content flags */
.sample-tag { display: inline-block; margin-left: 6px; padding: 0 7px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 12px; line-height: 1.5; color: var(--subtle); vertical-align: 1px; }
.sample-note { margin: 0 0 24px; padding: 10px 14px; border: 1px dashed var(--border); font-size: 14px; color: var(--muted); border-radius: var(--radius); }

/* Edition welcome / password page */
.welcome-body { min-height: 100vh; display: flex; }
.welcome { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px var(--gutter); }
.welcome-card { width: 100%; max-width: 560px; }
.welcome-card .brand { margin: 0 0 48px; }
.welcome h1 { margin: 0; font-family: var(--font-display); font-size: clamp(40px, 7vw, 64px); line-height: 1; }
.welcome-intro { margin: 20px 0 32px; font-size: 18px; color: var(--muted); }
.welcome-form label { display: block; margin-bottom: 8px; font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.welcome-row { display: flex; flex-wrap: wrap; gap: 12px; }
.welcome-row input { flex: 1 1 240px; min-height: 48px; padding: 0 14px; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.welcome-row input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.welcome-row .btn { border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.welcome-error { margin: 12px 0 0; color: var(--text); font-size: 15px; padding: 10px 14px; border: 1px solid var(--accent); border-radius: var(--radius); }
.welcome-help { margin: 32px 0 0; font-size: 15px; color: var(--muted); }

/* Wide screens: the rail and the shared reading edge */
@media (min-width: 900px) {
  .site-header { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
  .site-header .wrap,
  .section > .wrap,
  .site-footer .wrap,
  .cs-layout {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr);
    column-gap: var(--rail-gap);
  }
  .site-header .wrap { justify-content: stretch; }
  .section, #contact { scroll-margin-top: 32px; }
  .section-head { position: sticky; top: 96px; align-self: start; margin-bottom: 0; }
  .section > .wrap > :not(.section-head) { grid-column: 2; min-width: 0; }
  .section > .wrap > .ai-note { grid-column: 1 / -1; }
  .section > .wrap > .fit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer h2, .site-footer .btns { grid-column: 2; }
  .legal .wrap,
  .cs-col { padding-left: calc(var(--gutter) + var(--rail) + var(--rail-gap)); }
  .contents { display: block; position: sticky; top: 96px; align-self: start; margin-top: clamp(32px, 4vw, 56px); }
  .cs-main { min-width: 0; }
  .contents p { margin: 0 0 8px; font-size: 14px; color: var(--subtle); }
  .contents ul { margin: 0; padding: 0; list-style: none; }
  .contents a { display: block; padding: 6px 0 6px 12px; border-left: 2px solid var(--border); font-size: 15px; line-height: 1.4; color: var(--muted); text-decoration: none; }
  .contents a:hover { color: var(--accent); opacity: 1; }
  .contents a[aria-current] { border-left-color: var(--accent); color: var(--text); font-weight: 500; }
  .path-item { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 140px; gap: 24px; align-items: baseline; }
  .path-item .when { text-align: right; }
  .path-item .desc { grid-column: 1 / 3; margin-top: 0; }
}

/* Home page: every section fills the screen. These rules hold without the scroll effects too. */
.home::before, .home::after { z-index: 10; }
.home .site-header { z-index: 20; }
.home .scene-pin { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 100svh; background: var(--scene-bg, var(--bg)); }
.home .scene-pin > * { flex-shrink: 0; width: 100%; }
.home .section-alt, .home .site-footer { background: none; border: 0; }
.home .legal { position: absolute; left: 0; bottom: 0; }
.scene-work { --scene-bg: color-mix(in srgb, var(--fog-3) 7%, var(--bg)); }
.scene-disciplines { --scene-bg: color-mix(in srgb, var(--surface) 55%, var(--bg)); }
.scene-path { --scene-bg: color-mix(in srgb, var(--fog-2) 6%, var(--bg)); }
.scene-contact { --scene-bg: color-mix(in srgb, var(--fog-1) 9%, var(--bg)); }
.scroll-cue { display: none; }

/* Scroll scenes. Each .scene pins its .scene-pin while the next scene arrives on top.
   --enter and --exit run 0 to 1 (eased), --raw is --enter unsmoothed, --hold runs 0 to 1 while pinned. */
.scenes { scroll-snap-type: y proximity; overflow-x: clip; }
.scenes .site-header { position: fixed; top: 0; left: 0; right: 0; }
.scenes .scene { position: relative; height: calc(200svh + var(--hold-len, 25svh)); overflow-x: clip; scroll-snap-align: start; }
.scenes .scene + .scene { margin-top: -100svh; }
.scenes .scene-hero { z-index: 1; --hold-len: 15svh; }
.scenes .scene-work { z-index: 2; }
.scenes .scene-disciplines { z-index: 3; }
.scenes .scene-path { z-index: 4; }
.scenes .scene-contact { z-index: 5; height: 100svh; }
.scenes .scene-pin { position: sticky; top: 0; height: 100svh; min-height: 0; padding-top: 72px; overflow: hidden; will-change: transform; }
.scenes .section { padding-top: 24px; padding-bottom: 24px; }
.scenes .section-head { position: static; }
.scenes .hero .wrap { padding-top: 24px; padding-bottom: 24px; }
.scenes .site-footer .wrap { padding-top: 24px; padding-bottom: 72px; }

/* Hero: pushed back, with the layers leaving at different speeds */
.scenes .scene-hero .scene-pin { transform: translateY(calc(var(--exit, 0) * -6%)) scale(calc(1 - var(--exit, 0) * .12)); opacity: calc(1 - var(--exit, 0) * .7); border-radius: calc(var(--exit, 0) * 24px); }
.scenes .hero-reel { transform: translateY(calc(var(--exit, 0) * -18%)); opacity: calc(1 - var(--exit, 0) * 1.4); }
.scenes .hero-main h1 { transform: translateY(calc(var(--exit, 0) * -50px)); }
.scenes .scroll-cue { display: block; position: absolute; left: 0; bottom: 20px; text-align: center; font-size: 15px; color: var(--muted); opacity: calc(1 - var(--exit, 0) * 4); }
/* Under the hero text, lined up with it, so it stays clear of the tiles */
.home .scene-pin > .scroll-cue { width: auto; left: calc(max(0px, (100% - var(--max)) / 2) + var(--gutter)); text-align: left; }

/* Work: slides up over the hero as the cards rise in one after another.
   Leaving, it zooms past you as Disciplines opens through it. */
.scenes .scene-work .scene-pin { box-shadow: 0 -30px 60px rgb(0 0 0 / .45); transform: scale(calc(1 + var(--exit, 0) * .35)); opacity: calc(1 - var(--exit, 0) * .6); }
.scenes .work-card { --show: clamp(0, calc((var(--enter, 1) - .45 - var(--i) * .06) * 5), 1); opacity: var(--show); transform: translateY(calc((1 - var(--show)) * 40px)); }

/* Disciplines: a circle opens up from the middle of the screen, then the cards arrive one by one */
.scenes .scene-disciplines .scene-pin { transform: translateY(calc((var(--raw, 1) - 1) * 100svh - var(--exit, 0) * 18svh)); clip-path: circle(calc(var(--enter, 1) * 90vmax) at 50% 50%); }
.scenes .discipline, .scenes .path-item { --show: clamp(0, calc((var(--enter, 1) - .5 - var(--i) * .08) * 6), 1); opacity: var(--show); }
.scenes .discipline { transform: translateY(calc((1 - var(--show)) * 36px)); }

/* Experience: a diagonal wipe, with the jobs sliding in from the right.
   Leaving, you fly through it into Contact. */
.scenes .scene-path .scene-pin {
  --edge: calc(var(--enter, 1) * 130%);
  transform: translateY(calc((var(--raw, 1) - 1) * 100svh)) scale(calc(1 + var(--exit, 0) * 1.4));
  clip-path: polygon(0 0, var(--edge) 0, calc(var(--edge) - 30%) 100%, 0 100%);
  opacity: calc(1 - var(--exit, 0));
}
.scenes .path-item { transform: translateX(calc((1 - var(--show)) * 90px)); }

/* Contact: comes up from a distance */
.scenes .scene-contact .scene-pin { transform: translateY(calc((var(--raw, 1) - 1) * 100svh)) scale(calc(.72 + var(--enter, 1) * .28)); opacity: var(--enter, 1); }

@media (max-width: 899px) {
  .scenes .site-header .wrap { flex-wrap: nowrap; padding-top: 6px; padding-bottom: 6px; gap: 12px; }
  .scenes .brand { font-size: 0; gap: 0; }
  .scenes .nav { flex-wrap: nowrap; gap: 0 12px; font-size: 14px; white-space: nowrap; }
  .scenes .scene-pin { padding-top: 60px; }
  .scenes .section-head { margin-bottom: 16px; }
  .scenes .section-head h2, .scenes .footer-label { font-size: 28px; }
  .scenes .work-section .section-head { margin-bottom: 20px; }
  .scenes .path-item { padding: 14px 0; }
}

/* Phones with the browser bars showing: tighter still, so the scenes keep working */
@media (max-width: 899px) and (max-height: 760px) {
  .scenes .portrait { width: 52px; }
  .scenes .hero-id { gap: 12px; margin-bottom: 10px; }
  .scenes .eyebrow { font-size: 14px; }
  .scenes .hero h1 { font-size: 32px; }
  .scenes .hero-intro { margin-top: 14px; font-size: 16px; }
  .scenes .hero-actions { margin-top: 18px; flex-wrap: nowrap; }
  .scenes .hero-actions .btn { min-height: 44px; padding: 0 16px; font-size: 15px; white-space: nowrap; }
  .scenes .section, .scenes .hero .wrap { padding-top: 12px; padding-bottom: 12px; }
  .scenes .section-head { margin-bottom: 10px; }
  .scenes .work-card-foot { gap: 6px; padding-top: 8px; }
}

/* Wide enough for the image to sit beside the text */
@media (min-width: 1120px) {
  .card { grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; }
  .card-media { order: 2; align-self: start; }
  .card-text { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body::before, body::after { animation: none; }
  .card h3, .next-cs .t, .work-card, .work-card-media :is(img, video), .work-card-cta svg { transition: none; }
}