/* ==========================================================================
   samueldiaz.cz — design system
   Quiet editorial: paper + ink, misty blue-grey from the hero scene,
   one restrained accent (moss). Schibsted Grotesk (a newsroom typeface) for everything, Geist Mono for labels.
   ========================================================================== */

/* MADE Okine Sans goes here once the licensed files are in assets/fonts/ (see README.txt); until then Schibsted Grotesk renders. */

/* Schibsted Grotesk and Geist Mono (SIL OFL), self-hosted: no request to Google on page load. Latin + Latin Extended covers Czech. */
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/GeistMono-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/GeistMono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/SchibstedGrotesk-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/SchibstedGrotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/SchibstedGrotesk-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/SchibstedGrotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/SchibstedGrotesk-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/SchibstedGrotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/SchibstedGrotesk-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/SchibstedGrotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --paper: #f4f4f1;
  --paper-2: #ecece8;
  --mist: #dfe6e9;
  --ink: #0e0f11;
  --ink-2: #3a3c41;
  --muted: #77767e;
  --line: rgba(14, 15, 17, .12);
  --line-2: rgba(14, 15, 17, .06);
  --accent: #0a6f9c;
  --hl: #0a6f9c;
  --led: rgba(14, 15, 17, .6);
  --led-on: #1688bd;
  --on-hl: #ffffff;
  --card-light: #ffffff;
  --mist-2: #e8ecec;
  --glass: rgba(244, 244, 241, .78);
  --glass-2: rgba(255, 255, 255, .55);
  --glass-3: rgba(255, 255, 255, .9);
  --btn-dark-bg: linear-gradient(180deg, #2a2724, #0d0c0b);
  --btn-dark-fg: #fff;
  --btn-dark-hover: #000;
  --hero-bg: linear-gradient(180deg, #e2e8eb 0%, #dde5e8 45%, #d3dde0 100%);
  --veil-a: rgba(226, 232, 235, .92);
  --veil-b: rgba(226, 232, 235, .6);
  --lede: #5f5d68;
  --closing-bg: #0e0f11;
  --na: #cfcfc9;
  --dot: rgba(14, 15, 17, .14);
  --bar-mute: #bdbcb6;
  --surface: #fff;
  color-scheme: light;

  --serif: "MADE Okine Sans", "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --sans: "MADE Okine Sans", "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;

  --max: 1360px;
  --gut: 32px;
  --read: 680px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--sans); }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.label {
  font: 400 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.label b { font-weight: 400; color: var(--ink); }
.muted { color: var(--muted); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--ink); color: var(--paper); padding: 8px 12px; border-radius: 6px; }
.skip:focus { left: 8px; }

/* ---------------------------------------------------------------- dark mode (system or toggle) */
:root[data-theme="dark"] {
  --paper: #08090b;
  --paper-2: #14171b;
  --mist: #10151b;
  --mist-2: #0e1217;
  --ink: #eceee9;
  --ink-2: #b4b8bd;
  --muted: #80858c;
  --line: rgba(236, 238, 233, .14);
  --line-2: rgba(236, 238, 233, .07);
  --accent: #5bc2e7;
  --hl: #5bc2e7;
  --led: rgba(236, 238, 233, .7);
  --led-on: #7fd3f2;
  --on-hl: #04121a;
  --card-light: #efefeb;
  --glass: rgba(11, 13, 16, .72);
  --glass-2: rgba(255, 255, 255, .07);
  --glass-3: rgba(255, 255, 255, .14);
  --btn-dark-bg: linear-gradient(180deg, #f4f4f1, #d9d9d3);
  --btn-dark-fg: #0b0d10;
  --btn-dark-hover: #fff;
  --hero-bg: linear-gradient(180deg, #090b0e 0%, #0d1218 50%, #111821 100%);
  --veil-a: rgba(10, 13, 17, .82);
  --veil-b: rgba(10, 13, 17, .45);
  --lede: #a3a7ae;
  --closing-bg: #050608;
  --na: #2c3036;
  --dot: rgba(236, 238, 233, .12);
  --bar-mute: #3a3e44;
  --surface: #14171b;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --paper: #08090b;
  --paper-2: #14171b;
  --mist: #10151b;
  --mist-2: #0e1217;
  --ink: #eceee9;
  --ink-2: #b4b8bd;
  --muted: #80858c;
  --line: rgba(236, 238, 233, .14);
  --line-2: rgba(236, 238, 233, .07);
  --accent: #5bc2e7;
  --hl: #5bc2e7;
  --led: rgba(236, 238, 233, .7);
  --led-on: #7fd3f2;
  --on-hl: #04121a;
  --card-light: #efefeb;
  --glass: rgba(11, 13, 16, .72);
  --glass-2: rgba(255, 255, 255, .07);
  --glass-3: rgba(255, 255, 255, .14);
  --btn-dark-bg: linear-gradient(180deg, #f4f4f1, #d9d9d3);
  --btn-dark-fg: #0b0d10;
  --btn-dark-hover: #fff;
  --hero-bg: linear-gradient(180deg, #090b0e 0%, #0d1218 50%, #111821 100%);
  --veil-a: rgba(10, 13, 17, .82);
  --veil-b: rgba(10, 13, 17, .45);
  --lede: #a3a7ae;
  --closing-bg: #050608;
  --na: #2c3036;
  --dot: rgba(236, 238, 233, .12);
  --bar-mute: #3a3e44;
  --surface: #14171b;
  color-scheme: dark;
  }
}
[data-theme="dark"] .cover:is([data-tone="slate"], [data-tone="moss"], [data-tone="stone"], [data-tone="sky"], [data-tone="sand"]) { filter: brightness(.84) saturate(.9); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cover:is([data-tone="slate"], [data-tone="moss"], [data-tone="stone"], [data-tone="sky"], [data-tone="sand"]) { filter: brightness(.84) saturate(.9); } }
.theme-toggle { width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--ink); cursor: pointer;
  display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, transform .4s var(--ease); }
.theme-toggle:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.theme-toggle:active { transform: rotate(30deg); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .sun { display: none; }
[data-theme="dark"] .theme-toggle .sun { display: block; } [data-theme="dark"] .theme-toggle .moon { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .sun { display: block; } :root:not([data-theme="light"]) .theme-toggle .moon { display: none; } }

/* placeholder text: present, but quiet */
.todo { color: var(--muted); font-style: normal; border-bottom: 1px dotted currentColor; }

/* ---------------------------------------------------------------- nav */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.nav.scrolled { background: var(--glass); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-color: var(--line-2); }
.nav .logo { display: flex; align-items: center; gap: 12px; font: 500 19px/1 var(--serif); letter-spacing: -0.01em; }
/* availability: a small green LED that pulses, links to the contact page */
.nav ul a.status { display: inline-flex; align-items: center; gap: 9px; font: 400 12px/1 var(--mono); letter-spacing: .02em; color: var(--ink-2); }
.nav ul a.status:hover { color: var(--ink); }
.status::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #34d27b; box-shadow: 0 0 6px 1px rgba(52, 210, 123, .55); animation: led 2s ease-in-out infinite; }
@keyframes led {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(52, 210, 123, .55), 0 0 6px 1px rgba(52, 210, 123, .6); }
  50% { opacity: .55; box-shadow: 0 0 0 5px rgba(52, 210, 123, 0), 0 0 2px 0 rgba(52, 210, 123, .2); }
}
@media (prefers-reduced-motion: reduce) { .status::before { animation: none; } }
.nav ul { display: flex; align-items: center; gap: 30px; list-style: none; font-size: 14px; }
.nav ul a { position: relative; color: var(--ink-2); transition: color .2s; }
.nav ul a:hover, .nav ul a[aria-current] { color: var(--ink); }
.nav ul a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.nav ul a:hover::after, .nav ul a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.nav ul a.pill { padding: 9px 16px; border-radius: 999px; background: var(--ink); color: var(--paper); }
.nav ul a.pill::after { display: none; }
.nav ul a.pill:hover { background: var(--ink-2); }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 22px; border-radius: 10px;
  font: 500 15px/1 var(--sans); border: 0; cursor: pointer; transition: transform .2s var(--ease), background .2s, box-shadow .2s;
}
.btn svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn-dark { background: var(--btn-dark-bg); color: var(--btn-dark-fg); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 20px -10px rgba(0,0,0,.55); }
.btn-dark:hover { background: var(--btn-dark-hover); }
.btn-light { background: var(--glass-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); backdrop-filter: blur(6px); }
.btn-light:hover { background: var(--glass-3); }
.btn-ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.btn-ghost:hover { background: rgba(255,255,255,.08); }
.chip-copy { display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 18px; border-radius: 10px; border: 0; cursor: pointer;
  background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); font: 400 14px/1 var(--mono); color: inherit; }
.chip-copy svg { width: 15px; height: 15px; opacity: .6; }
.chip-copy:hover { background: rgba(255,255,255,.14); }

/* ---------------------------------------------------------------- LED raster
   The hero's dot field as a quiet, static pattern across the site. Under the cursor the dots
   light up green (site.js passes the pointer in --mx / --my). */
.led-bg { position: relative; isolation: isolate; --mx: -999px; --my: -999px; }
.led-bg::before, .led-bg::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, var(--led) 1.1px, transparent 1.6px) 0 0 / 10px 10px;
}
.led-bg::before { opacity: .3;
  -webkit-mask-image: radial-gradient(75% 95% at 82% 8%, #000 0%, rgba(0,0,0,.35) 45%, transparent 75%);
          mask-image: radial-gradient(75% 95% at 82% 8%, #000 0%, rgba(0,0,0,.35) 45%, transparent 75%); }
.led-bg::after { opacity: 0; transition: opacity .5s var(--ease);
  background-image: radial-gradient(circle, var(--led-on) 1.3px, transparent 1.9px);
  -webkit-mask-image: radial-gradient(150px circle at var(--mx) var(--my), #000 0%, transparent 100%);
          mask-image: radial-gradient(150px circle at var(--mx) var(--my), #000 0%, transparent 100%); }
.led-bg:hover::after { opacity: .9; }
.led-hover::before { opacity: 0; transition: opacity .5s var(--ease); }
.led-hover:hover::before { opacity: .22; }
.closing.led-bg { --led: rgba(236, 238, 233, .7); --led-on: #7fd3f2; }
.closing.led-bg::before { opacity: .2; }
@media (hover: none) { .led-bg::after { display: none; } }

/* ---------------------------------------------------------------- hero
   Always dark: a full-bleed black-and-white portrait with the name set huge across it,
   cropped by the right edge on purpose. Role bottom right, date and name day bottom left. */
.hero {
  position: relative; overflow: hidden; min-height: max(100svh, 640px); display: flex; flex-direction: column; justify-content: flex-end;
  background: #050506; color: #eceee9;
  --muted: #8a8e95; --accent: #5bc2e7;
}
.hero-photo { position: absolute; inset: 0; z-index: 0; }
.hero-photo canvas.led { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease); }
.hero.has-led canvas.led { opacity: 1; }
.hero.has-led .hero-photo img, .hero.has-led .hero-photo .ph { display: none; }
.hero { touch-action: pan-y; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: grayscale(1) contrast(1.08) brightness(.82); }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,5,6,.55) 0%, rgba(5,5,6,0) 22%, rgba(5,5,6,0) 62%, rgba(5,5,6,.85) 100%); }
.hero-photo .ph { position: absolute; inset: 0; /* studio light until the real portrait arrives */
  background: radial-gradient(34% 46% at 50% 40%, rgba(255,255,255,.13), transparent 70%), radial-gradient(60% 40% at 50% 100%, rgba(255,255,255,.06), transparent 70%);
}
.hero-photo .ph::after { content: ""; position: absolute; inset: 0; opacity: .22; mix-blend-mode: overlay;
  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%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.giant { /* site.js fits the name to the full width between the gutters */
  position: absolute; z-index: 1; left: 0; right: 0; top: 50%; translate: 0 -50%; padding: 0 max(var(--gut), calc(50% - 680px + var(--gut)));
  font: 600 min(16.5vw, 236px)/.8 var(--serif); letter-spacing: -0.06em; white-space: nowrap; color: #f2f2ee; pointer-events: none;
}
.giant .fit { display: inline-block; padding-right: .06em; }
.giant .fit > span { display: inline-block; opacity: 0; translate: 0 .12em; animation: rise 1.1s var(--ease) forwards; }
.giant .fit > span + span { animation-delay: .12s; }
.hero-top { position: absolute; z-index: 2; left: 0; right: 0; top: calc(68px + 26px); }
.hero-top .m-only { display: none; }
@keyframes rise { to { opacity: 1; translate: 0 0; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero-foot { position: relative; z-index: 2; width: 100%; display: flex; justify-content: flex-end; align-items: flex-end; gap: 24px; padding-bottom: 30px; }
.hero-foot .label { color: #8a8e95; }
.today { display: flex; flex-direction: column; gap: 4px; }
.today span + span { color: #c9ccd0; }
.today span + span::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 8px 2px 0; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.role { text-align: right; font: 300 clamp(20px, 1.9vw, 30px)/1.12 var(--serif); letter-spacing: -0.02em; }
.role span { display: block; color: #a9adb3; }
/* the nav sits on the dark hero until it scrolls */
body:has(.hero) .nav:not(.scrolled) { --ink: #eceee9; --ink-2: #c3c6cb; --paper: #050506; --line: rgba(236,238,233,.22); }
.scroll-cue { display: inline-flex; align-items: center; gap: 10px; }
.scroll-cue i { width: 1px; height: 28px; background: var(--ink); opacity: .35; animation: cue 2.4s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------------------------------------------------------------- sections */
.section { padding-top: clamp(96px, 12vw, 176px); }
.sec-top { align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.sec-top .label { grid-column: 1 / 4; padding-bottom: .55em; }
.sec-top h2 { grid-column: 4 / 13; font: 500 clamp(36px, 4.6vw, 68px)/1.02 var(--serif); letter-spacing: -0.03em; }
.sec-top h2 em { font-style: normal; color: var(--hl); }

/* profile statement */
.statement { grid-column: 4 / 13; font: 400 clamp(26px, 2.9vw, 42px)/1.22 var(--serif); letter-spacing: -0.018em; }
.statement em { font-style: normal; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: rgba(14,15,17,.3); }
.statement .dim { color: var(--muted); }
.facts-row { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: clamp(48px, 6vw, 88px); }
.facts-row div { border-top: 1px solid var(--ink); padding-top: 16px; }
.facts-row b { display: block; font: 500 clamp(36px, 3.6vw, 52px)/1 var(--serif); letter-spacing: -0.03em; }
.facts-row span { display: block; margin-top: 10px; color: var(--ink-2); font-size: 15px; }

/* ---------------------------------------------------------------- covers (designed project visuals) */
.cover {
  --a: #d5dee3; --b: #9fb2bf; --fg: var(--ink);
  position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 4 / 3; border-radius: 4px; color: var(--fg);
  background:
    radial-gradient(120% 90% at 85% 110%, var(--b) 0%, transparent 60%),
    radial-gradient(90% 80% at 10% -10%, rgba(255,255,255,.55) 0%, transparent 55%),
    var(--a);
}
.cover::before { /* LED dot raster, strongest bottom-right */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle, currentColor 1.05px, transparent 1.5px) 0 0 / 8px 8px;
  opacity: .16;
  -webkit-mask-image: radial-gradient(70% 70% at 82% 88%, #000 0%, transparent 72%);
          mask-image: radial-gradient(70% 70% at 82% 88%, #000 0%, transparent 72%);
  transition: opacity .6s var(--ease);
}
.cover::after { /* scan line on hover */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle, rgba(255,255,255,.95) 1.2px, transparent 1.8px) 0 0 / 8px 8px;
  -webkit-mask-image: linear-gradient(105deg, transparent 38%, #000 48%, #000 52%, transparent 62%);
          mask-image: linear-gradient(105deg, transparent 38%, #000 48%, #000 52%, transparent 62%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0; opacity: 0; mix-blend-mode: overlay;
}
a:hover .cover::after, .cover.scan::after { animation: scan 1.2s var(--ease) forwards; }
a:hover .cover::before { opacity: .26; }
@keyframes scan { 0% { opacity: 1; -webkit-mask-position: 100% 0; mask-position: 100% 0; } 85% { opacity: 1; } 100% { opacity: 0; -webkit-mask-position: 0 0; mask-position: 0 0; } }
.cover .c-top { position: absolute; left: 6%; right: 6%; top: 6%; display: flex; justify-content: space-between; font: 400 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.cover .c-name { position: absolute; left: 6%; right: 6%; bottom: 7%; font: 500 clamp(26px, 3.4vw, 54px)/.95 var(--serif); letter-spacing: -0.035em; }
.cover.sm .c-name { font-size: clamp(22px, 2.2vw, 34px); }
.cover[data-tone="slate"] { --a: #d3dde3; --b: #93a9b9; }
.cover[data-tone="moss"]  { --a: #d6ddd3; --b: #8aa08a; }
.cover[data-tone="stone"] { --a: #e1ddd5; --b: #b2a796; }
.cover[data-tone="ink"]   { --a: #15181b; --b: #34434e; --fg: #eef0ee; background: radial-gradient(110% 90% at 85% 110%, var(--b) 0%, transparent 62%), radial-gradient(60% 50% at 0% 0%, rgba(255,255,255,.06), transparent 70%), var(--a); }
.cover[data-tone="ember"] { --a: #191615; --b: #6e3524; --fg: #f1ece6; background: radial-gradient(110% 90% at 85% 110%, var(--b) 0%, transparent 62%), radial-gradient(60% 50% at 0% 0%, rgba(255,255,255,.05), transparent 70%), var(--a); }
.cover[data-tone="sky"]   { --a: #dbe5ea; --b: #a9c2d1; }
.cover[data-tone="sand"]  { --a: #e6e1d6; --b: #c4b79c; }

/* ---------------------------------------------------------------- work index (home) */
.index-wrap { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: 40px; align-items: start; }
.index-preview { position: sticky; top: 100px; aspect-ratio: 4 / 3.6; }
.index-preview .pv { position: absolute; inset: 0; opacity: 0; transform: translateY(8px) scale(.985); transition: opacity .5s var(--ease), transform .6s var(--ease); pointer-events: none; }
.index-preview .pv.on { opacity: 1; transform: none; pointer-events: auto; }
.index-preview .pv .cover { aspect-ratio: 4 / 3; }
.index-preview .pv.on .cover::after { animation: scan 1.2s var(--ease) forwards; }
.pv-cap { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.pv-cap b { font-weight: 500; color: var(--ink); font-size: 16px; }
.index { border-top: 1px solid var(--ink); }
.index a {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: baseline;
  padding: 30px 0 28px; border-bottom: 1px solid var(--line); transition: opacity .35s var(--ease);
}
.index .n { grid-column: 1 / 2; font: 400 12px var(--mono); color: var(--muted); }
.index .cl { grid-column: 2 / 7; font: 500 clamp(24px, 2.4vw, 36px)/1.04 var(--serif); letter-spacing: -0.03em; transition: transform .45s var(--ease); }
.index .ti { grid-column: 7 / 11; color: var(--ink-2); font-size: 16px; }
.index .ti small { display: block; margin-top: 6px; font: 400 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.index .yr { grid-column: 11 / 13; text-align: right; white-space: nowrap; font: 400 13px var(--mono); color: var(--muted); }
.index .thumb { display: none; }
.index:hover a { opacity: .32; }
.index a:hover { opacity: 1; }
.index a:hover .cl { transform: translateX(10px); }
.index-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; }

.more-link { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; }
.more-link span { position: relative; }
.more-link span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform-origin: left; transition: transform .35s var(--ease); }
.more-link:hover span::after { transform: scaleX(.4); }
.more-link svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.more-link:hover svg { transform: translateX(4px); }

/* ---------------------------------------------------------------- approach (process) */
.process { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(6, 1fr); position: relative; }
.process::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: var(--line); }
.process li { list-style: none; position: relative; padding-right: 20px; }
.process li::before { content: ""; display: block; width: 11px; height: 11px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); margin-bottom: 26px; transition: background .3s; }
.process li:hover::before { background: var(--ink); }
.process .label { display: block; margin-bottom: 10px; }
.process b { display: block; font: 500 24px/1.1 var(--serif); letter-spacing: -0.02em; }
.process p { margin-top: 10px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }

/* services: one row each, title / text / pills */
.services { border-top: 1px solid var(--line); }
.svc { display: grid; grid-template-columns: 5fr 4fr 4fr; gap: 32px; align-items: start; padding: clamp(28px, 3.4vw, 48px) 0; border-bottom: 1px solid var(--line); }
.svc h3 { font: 400 clamp(28px, 3.3vw, 50px)/1 var(--serif); letter-spacing: -0.035em; }
.svc p { color: var(--ink-2); font-size: 16px; line-height: 1.55; max-width: 400px; padding-top: 6px; }
.svc .tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.svc .tags li { font: 400 12.5px/1 var(--sans); padding: 8px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); transition: box-shadow .25s, color .25s; }
.svc:hover .tags li { box-shadow: inset 0 0 0 1px var(--accent); color: var(--ink); }
.services + .grid .process { margin-top: clamp(64px, 8vw, 120px); }
/* capabilities */
.caps { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--ink); margin-top: clamp(64px, 8vw, 120px); }
.caps div { padding: 22px 20px 0 0; }
.caps div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.caps b { display: block; font: 500 20px/1.15 var(--serif); letter-spacing: -0.01em; margin-top: 12px; }
.caps p { margin-top: 10px; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }

/* clients */
.clients-wall { grid-column: 4 / 13; display: flex; flex-wrap: wrap; gap: 6px 0; font: 400 clamp(26px, 3vw, 44px)/1.25 var(--serif); letter-spacing: -0.02em; }
.clients-wall span { color: var(--ink); transition: color .25s; }
.clients-wall span:not(:last-child)::after { content: ","; margin-right: .32em; color: var(--muted); }
.clients-wall:hover span { color: var(--muted); }
.clients-wall span:hover { color: var(--ink); }
.clients-note { grid-column: 4 / 13; margin-top: 22px; }

/* ---------------------------------------------------------------- writing list */
.posts { border-top: 1px solid var(--ink); }
.posts a {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: baseline;
  padding: 28px 0; border-bottom: 1px solid var(--line);
}
.posts .d { grid-column: 1 / 3; font: 400 13px var(--mono); color: var(--muted); }
.posts .t { grid-column: 3 / 10; }
.posts .t b { display: block; font: 500 clamp(24px, 2.4vw, 34px)/1.12 var(--serif); letter-spacing: -0.02em; transition: color .25s; }
.posts .t p { margin-top: 8px; color: var(--ink-2); font-size: 15.5px; max-width: 60ch; }
.posts .c { grid-column: 10 / 12; font: 400 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.posts .ar { grid-column: 12 / 13; justify-self: end; width: 18px; height: 18px; transition: transform .35s var(--ease); }
.posts a:hover .ar { transform: translateX(6px); }
.posts a:hover .t b { color: var(--accent); }

/* ---------------------------------------------------------------- closing (dark) */
.closing {
  position: relative; overflow: hidden; margin-top: clamp(120px, 14vw, 200px);
  background: var(--closing-bg); color: #eef0ee; border-top: 1px solid var(--line-2);
}
.closing .wrap { position: relative; padding-top: clamp(100px, 12vw, 180px); }
.closing .label { color: rgba(238,240,238,.5); }
.closing h2 { font: 600 clamp(72px, 15vw, 260px)/.86 var(--serif); letter-spacing: -0.06em; margin-top: 28px; }
.closing p.lead { max-width: 520px; margin-top: 48px; color: rgba(238,240,238,.65); font-size: 18px; }
.closing .mail { display: inline-block; margin-top: clamp(40px, 5vw, 64px); font: 400 clamp(26px, 3.4vw, 52px)/1.1 var(--serif); letter-spacing: -0.02em; border-bottom: 1px solid rgba(238,240,238,.35); padding-bottom: 6px; transition: border-color .3s; }
.closing .mail:hover { border-color: #eef0ee; }
.closing .ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 32px; }
.closing .btn-light { background: #eef0ee; color: #0e0f11; }
.closing .btn-light:hover { background: #fff; }
footer.site {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center;
  margin-top: clamp(100px, 12vw, 160px); padding: 26px 0 32px; border-top: 1px solid rgba(238,240,238,.14);
  font-size: 14px; color: rgba(238,240,238,.55);
}
footer.site .f1 { grid-column: 1 / 5; }
footer.site .f2 { grid-column: 5 / 9; }
footer.site nav { grid-column: 9 / 13; display: flex; gap: 22px; justify-content: flex-end; }
footer.site a:hover { color: #eef0ee; }

/* ---------------------------------------------------------------- page heads (inner pages) */
.page-head { padding: calc(68px + clamp(64px, 9vw, 140px)) 0 clamp(48px, 6vw, 88px); background: linear-gradient(180deg, var(--mist) 0%, var(--mist-2) 60%, var(--paper) 100%); }
.page-head .label { grid-column: 1 / 4; padding-top: 1.1em; }
.page-head h1 { grid-column: 4 / 13; font: 600 clamp(52px, 8vw, 128px)/.95 var(--serif); letter-spacing: -0.05em; }
.page-head .dek { grid-column: 4 / 11; margin-top: 28px; font: 400 clamp(20px, 1.8vw, 26px)/1.4 var(--serif); color: var(--ink-2); letter-spacing: -0.01em; }

/* filters */
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 40px; }
.filters button {
  height: 38px; padding: 0 16px; border-radius: 999px; border: 0; cursor: pointer; font-size: 14px; color: var(--ink-2);
  background: transparent; box-shadow: inset 0 0 0 1px var(--line); transition: background .2s, color .2s, box-shadow .2s;
}
.filters button:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }
.filters .count { margin-left: 8px; font: 400 11px var(--mono); opacity: .55; }
.is-hidden { display: none !important; }

/* work grid */
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(56px, 6vw, 96px) 24px; }
.work-grid a { display: block; }
.work-grid a:nth-child(3n+1) { grid-column: 1 / -1; }
.work-grid a:nth-child(3n+1) .cover { aspect-ratio: 21 / 9; }
.work-grid .meta { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; margin-top: 18px; align-items: baseline; }
.work-grid h3 { font: 500 clamp(24px, 2.3vw, 32px)/1.12 var(--serif); letter-spacing: -0.02em; transition: color .25s; }
.work-grid .meta .label { white-space: nowrap; }
.work-grid .role { grid-column: 1 / -1; color: var(--ink-2); font-size: 15px; }
.work-grid a:hover h3 { color: var(--accent); }

/* ---------------------------------------------------------------- case study */
.case-head { padding: calc(68px + clamp(56px, 8vw, 120px)) 0 0; background: linear-gradient(180deg, var(--mist) 0%, var(--mist-2) 55%, var(--paper) 100%); }
.crumb { display: flex; gap: 10px; }
.crumb a:hover { color: var(--ink); }
.case-head h1 { grid-column: 1 / 11; margin-top: 28px; font: 600 clamp(44px, 6.6vw, 104px)/.98 var(--serif); letter-spacing: -0.05em; }
.case-head .dek { grid-column: 1 / 9; margin-top: 28px; font: 400 clamp(20px, 1.8vw, 25px)/1.42 var(--serif); color: var(--ink-2); }
.facts { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: clamp(48px, 6vw, 80px); padding-top: 18px; border-top: 1px solid var(--ink); }
.facts dd { margin-top: 8px; font-size: 15.5px; }
.disclosure { grid-column: 1 / 13; display: flex; align-items: center; gap: 12px; margin-top: 28px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--ink-2); }
.disclosure::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.case-cover { grid-column: 1 / 13; margin-top: clamp(40px, 5vw, 64px); }
.case-cover .cover { aspect-ratio: 21 / 9; }
.case-cover .cover .c-name { font-size: clamp(40px, 7vw, 120px); }

.case-body { padding-top: clamp(80px, 10vw, 140px); }
.toc { grid-column: 1 / 4; position: sticky; top: 100px; align-self: start; list-style: none; }
.toc a { display: flex; gap: 12px; padding: 8px 0; color: var(--muted); font-size: 14px; transition: color .2s; }
.toc a span { font: 400 12px var(--mono); }
.toc a.on, .toc a:hover { color: var(--ink); }
.case-main { grid-column: 4 / 13; min-width: 0; }
.outputs > *, .stats > *, .facts > * { min-width: 0; }
.case-sec { padding-bottom: clamp(64px, 7vw, 104px); scroll-margin-top: 100px; }
.case-sec > .label { display: block; margin-bottom: 18px; }
.case-sec .txt { max-width: 760px; }
.case-sec .txt p { font: 400 clamp(20px, 1.6vw, 23px)/1.5 var(--serif); }
.case-sec .txt p + p { margin-top: 1em; }
.steps { list-style: none; counter-reset: s; border-top: 1px solid var(--line); max-width: 760px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 48px 1fr; padding: 16px 0; border-bottom: 1px solid var(--line); font: 400 19px/1.45 var(--serif); }
.steps li::before { content: counter(s, decimal-leading-zero); font: 400 12px/2.2 var(--mono); color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.stat { border-top: 1px solid var(--ink); padding-top: 16px; }
.stat b { display: block; font: 500 clamp(52px, 6vw, 92px)/1 var(--serif); letter-spacing: -0.04em; }
.stat b.na { color: var(--na); }
.stat span { display: block; margin-top: 12px; color: var(--ink-2); font-size: 15px; }
.stats + p { margin-top: 32px; }
.metrics-period { display: block; margin-bottom: 18px; }
.stats.s4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats.s4 .stat b { font-size: clamp(44px, 4.6vw, 76px); }
.stat small { display: block; margin-top: 4px; font: 400 12px/1.4 var(--mono); letter-spacing: .04em; color: var(--muted); }
table.metrics { width: 100%; max-width: 760px; margin-top: clamp(40px, 5vw, 64px); border-collapse: collapse; font-size: 15.5px; }
table.metrics caption { text-align: left; padding-bottom: 12px; }
table.metrics th, table.metrics td { padding: 13px 0; border-top: 1px solid var(--line); text-align: left; font-weight: 400; }
table.metrics th { color: var(--ink-2); }
table.metrics td { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
table.metrics tr:last-child th, table.metrics tr:last-child td { border-bottom: 1px solid var(--line); }
table.metrics td.up { color: var(--accent); }
.metrics + .txt { margin-top: 36px; }
.result-source { margin-top: 18px; }
.result-source a { text-decoration: underline; text-underline-offset: 3px; }
.outputs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.outputs figure:nth-child(1) { grid-column: span 4; }
.outputs figure:nth-child(2) { grid-column: span 2; }
.outputs figure:nth-child(n+3) { grid-column: span 2; }
.slot {
  position: relative; aspect-ratio: 4 / 3; border-radius: 4px; background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--line-2); display: grid; place-items: center; text-align: center; padding: 16px;
}
.slot::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, var(--dot) .9px, transparent 1.3px) 0 0 / 10px 10px; -webkit-mask-image: linear-gradient(135deg, transparent 40%, #000); mask-image: linear-gradient(135deg, transparent 40%, #000); border-radius: inherit; }
.output-link { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; text-align: left; color: var(--ink); transition: background .2s, color .2s; }
.output-link > * { position: relative; z-index: 1; }
.output-link b { font: 500 clamp(22px, 2vw, 32px)/1.15 var(--serif); letter-spacing: -.02em; }
.output-link:hover, .output-link:focus-visible { background: var(--ink); color: var(--paper); }
.outputs figure:nth-child(1) .slot { aspect-ratio: 16 / 10; }
.outputs figure:nth-child(2) .slot { aspect-ratio: 8 / 10; }
.outputs figcaption { margin-top: 10px; }
/* media outputs: screenshots, then a compact list of the remaining links */
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; }
.shot { margin: 0; }
.shot > a { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.shot > a:hover img, .shot > a:focus-visible img { transform: scale(1.025); }
.shot figcaption { display: grid; gap: 8px; margin-top: 14px; }
.shot figcaption b { font: 500 clamp(17px, 1.35vw, 21px)/1.3 var(--serif); letter-spacing: -.01em; }
.gallery .shot > a { aspect-ratio: auto; }
.gallery .shot img { aspect-ratio: 4 / 5; height: auto; }
.gallery.one { grid-template-columns: minmax(0, 1fr); }
.gallery.one .shot img { aspect-ratio: auto; }
.shots + .out-list { margin-top: clamp(40px, 5vw, 64px); }
.out-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.out-list a { display: grid; grid-template-columns: minmax(0, 12em) minmax(0, 1fr) auto; gap: 6px 24px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.out-list b { font: 500 clamp(16px, 1.2vw, 19px)/1.35 var(--serif); }
.out-list i { font-style: normal; color: var(--muted); transition: transform .2s, color .2s; }
.out-list a:hover b, .out-list a:focus-visible b { text-decoration: underline; text-underline-offset: 3px; }
.out-list a:hover i, .out-list a:focus-visible i { color: var(--accent); transform: translate(2px, -2px); }
.next-case { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; margin-top: clamp(40px, 6vw, 80px); padding-top: 22px; border-top: 1px solid var(--ink); }
.next-case .label { grid-column: 1 / 4; }
.next-case b { grid-column: 4 / 11; font: 500 clamp(36px, 5vw, 76px)/1 var(--serif); letter-spacing: -0.035em; transition: color .25s; }
.next-case svg { grid-column: 12 / 13; justify-self: end; width: 36px; height: 36px; transition: transform .4s var(--ease); }
.next-case:hover b { color: var(--accent); }
.next-case:hover svg { transform: translateX(8px); }

/* ---------------------------------------------------------------- article */
.article-head { padding: calc(68px + clamp(64px, 9vw, 130px)) var(--gut) clamp(40px, 5vw, 72px); text-align: center; background: linear-gradient(180deg, var(--mist) 0%, var(--mist-2) 60%, var(--paper) 100%); }
.article-head .label { color: var(--accent); }
.article-head h1 { max-width: 16ch; margin: 22px auto 0; font: 600 clamp(42px, 6vw, 88px)/1 var(--serif); letter-spacing: -0.05em; }
.article-head .dek { max-width: 40ch; margin: 26px auto 0; font: 400 clamp(20px, 1.8vw, 24px)/1.45 var(--serif); color: var(--ink-2); }
.byline { display: flex; justify-content: center; gap: 22px; margin-top: 32px; }
.notice { max-width: var(--read); margin: 0 auto; padding: 0 var(--gut); }
.notice p { padding: 12px 14px; border-radius: 6px; background: var(--paper-2); font-size: 14px; color: var(--ink-2); }
.prose { max-width: var(--read); margin: 0 auto; padding: 48px var(--gut) 0; font: 400 19px/1.65 var(--serif); color: var(--ink); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font: 500 32px/1.15 var(--serif); letter-spacing: -0.02em; margin-top: 2.1em; }
.prose a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-color .2s; }
.prose a:hover { text-decoration-color: currentColor; }
.prose .lead { font-size: 1.18em; line-height: 1.5; color: var(--ink); }
.prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: .4em; }
.prose sup a { text-decoration: none; color: var(--accent); font-family: var(--sans); font-size: .7em; }
.pull { margin: 1.8em -64px; font: 400 clamp(30px, 3.4vw, 42px)/1.15 var(--serif); letter-spacing: -0.02em; }
.pull::before { content: "“"; display: block; color: var(--muted); font-size: 2em; line-height: .6; }
.pull cite { display: block; margin-top: 16px; font: 400 12px var(--mono); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.wide-fig { margin: 2.2em -120px; }
.wide-fig .slot { aspect-ratio: 16 / 9; }
.wide-fig figcaption { margin-top: 10px; font: 400 13px/1.45 var(--sans); color: var(--muted); }
.chart { margin: 2.2em 0; font-family: var(--sans); }
.chart h4 { font: 500 16px/1.3 var(--sans); }
.chart .sub { font-size: 14px; color: var(--muted); margin-top: 2px; }
.chart .rows { margin-top: 18px; position: relative; }
.chart .row { display: grid; grid-template-columns: 180px 1fr 48px; gap: 12px; align-items: center; height: 34px; }
.chart .row .lab { font-size: 14px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart .row .track { position: relative; height: 100%; display: flex; align-items: center; }
.chart .row .bar { height: 16px; background: var(--accent); border-radius: 0 4px 4px 0; width: 0; transition: width .9s var(--ease), opacity .2s; }
.chart .row.mute .bar { background: var(--bar-mute); }
.chart .rows:hover .row .bar { opacity: .45; }
.chart .rows .row:hover .bar { opacity: 1; }
.chart .row .val { font: 500 14px var(--sans); font-variant-numeric: tabular-nums; text-align: right; }
.chart .note { margin-top: 12px; font-size: 13px; color: var(--muted); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.chart details summary { cursor: pointer; color: var(--ink-2); }
.chart table { margin-top: 8px; border-collapse: collapse; font-size: 13px; }
.chart td, .chart th { padding: 4px 16px 4px 0; text-align: left; border-bottom: 1px solid var(--line); }
.tip { position: absolute; pointer-events: none; z-index: 5; background: var(--ink); color: var(--paper); font: 400 13px/1.35 var(--sans); padding: 8px 10px; border-radius: 6px; white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; }
.tip.on { opacity: 1; transform: none; }
.embed { border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); padding: 18px 20px; font: 400 15px/1.5 var(--sans); }
.embed .who { display: flex; gap: 10px; align-items: center; }
.embed .av { width: 36px; height: 36px; border-radius: 50%; background: var(--paper-2); }
.embed .who b { display: block; font-size: 14px; font-weight: 500; }
.embed .who span span { font-size: 12px; color: var(--muted); }
.embed p { margin-top: 12px; }
.endnotes { max-width: var(--read); margin: 64px auto 0; padding: 22px var(--gut) 0; border-top: 1px solid var(--line); font: 400 14px/1.5 var(--sans); color: var(--ink-2); }
.endnotes ol { padding-left: 1.2em; margin-top: 8px; }
.share { max-width: var(--read); margin: 40px auto 0; padding: 0 var(--gut); display: flex; gap: 10px; flex-wrap: wrap; }
.share .chip-copy { color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.author { max-width: var(--read); margin: 56px auto 0; padding: 24px var(--gut) 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: center; }
.author .av { width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font: 500 22px var(--serif); }
.author p { color: var(--ink-2); font-size: 15px; }
.author p a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- about */
.about-grid { padding-top: clamp(24px, 3vw, 40px); align-items: start; }
.portrait { grid-column: 1 / 5; position: sticky; top: 100px; }
.portrait .slot { aspect-ratio: 4 / 5; }
.about-txt { grid-column: 6 / 13; }
.about-txt > p { font: 400 clamp(21px, 1.8vw, 25px)/1.48 var(--serif); letter-spacing: -0.01em; }
.about-txt > p + p { margin-top: 1em; }
.about-txt h2 { margin: clamp(56px, 6vw, 80px) 0 16px; }
.kv { border-top: 1px solid var(--ink); }
.kv div { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.kv dt { color: var(--muted); }
.kv a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.legal > p { font: 400 clamp(17px, 1.3vw, 19px)/1.6 var(--sans); letter-spacing: 0; }
.legal h2:first-child { margin-top: 0; }
.note a, .legal a { text-decoration: underline; text-underline-offset: 3px; }
.about-txt .clients-wall { font-size: clamp(24px, 2.4vw, 34px); }
.about-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 44px; }

/* ---------------------------------------------------------------- contact page */
.contact-grid { padding-top: clamp(24px, 3vw, 40px); align-items: start; }
.contact-grid .left { grid-column: 1 / 6; }
.contact-grid .right { grid-column: 7 / 13; }
.big-mail { display: inline-block; font: 500 clamp(30px, 3.4vw, 50px)/1.05 var(--serif); letter-spacing: -0.025em; border-bottom: 1px solid var(--ink); padding-bottom: 6px; }
.big-mail:hover { color: var(--accent); border-color: var(--accent); }
.contact-grid .kv { margin-top: 40px; }
.contact-grid .right h2 { margin-bottom: 16px; }
.contact-grid .right ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.contact-grid .right li { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: clamp(17px, 1.3vw, 19px); }

/* inner-page spacing before the dark closing */
.page-body { padding-bottom: clamp(40px, 6vw, 80px); }

/* 404 */
.notfound { min-height: 72vh; display: grid; place-content: center; text-align: center; gap: 20px; padding: 140px 16px 40px; }
.notfound h1 { font: 600 clamp(56px, 9vw, 140px)/1 var(--serif); letter-spacing: -0.05em; }
.notfound p { color: var(--muted); font-size: 18px; }
.notfound .ctas { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }

/* ---------------------------------------------------------------- reveal */
.rv { opacity: 0; transform: translateY(22px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.rv.in { opacity: 1; transform: none; }

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

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .pull, .wide-fig { margin-left: 0; margin-right: 0; }
  .process { grid-template-columns: repeat(3, 1fr); row-gap: 48px; }
  .process::before { display: none; }
  .caps { grid-template-columns: repeat(3, 1fr); }
  .caps div:nth-child(4) { padding-left: 0; border-left: 0; }
}
@media (max-width: 820px) {
  .svc { grid-template-columns: 1fr; gap: 14px; }
  :root { --gut: 20px; }
  body { font-size: 16px; }
  .grid { column-gap: 16px; }
  .nav .wrap { height: 60px; }
  .nav ul { gap: 14px; }
  .nav .hide-m { display: none; }
  .nav li:has(> a.status) { display: none; }
  .hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
  .hero-top .status.m-only { display: inline-flex; align-items: flex-start; gap: 8px; font: 400 10.5px/1.45 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #c9ccd0; max-width: 150px; }
  .hero-top .status.m-only::before { margin-top: 4px; }
}
@media (max-width: 480px) {
  .nav ul li:has(> a:not(.pill)) { display: none; }
  .hero { min-height: max(92svh, 560px); }
  .giant { font-size: 30vw; line-height: .84; white-space: normal; top: 48%; }
  .giant .fit > span { display: block; }
  .hero-top { top: calc(60px + 18px); }
  .hero-foot { flex-direction: column-reverse; align-items: flex-start; gap: 14px; padding-bottom: 22px; }
  .role { text-align: left; }
  .today { font-size: 10.5px; }
  .sec-top .label, .sec-top h2, .statement, .facts-row, .clients-wall, .clients-note,
  .page-head .label, .page-head h1, .page-head .dek, .case-head h1, .case-head .dek { grid-column: 1 / -1; }
  .sec-top .label, .page-head .label { padding: 0 0 14px; }
  .facts-row { grid-template-columns: 1fr; gap: 20px; }
  .index-wrap { grid-template-columns: 1fr; }
  .index-preview { display: none; }
  .index a { grid-template-columns: 1fr auto; row-gap: 10px; padding: 24px 0; }
  .index .n { display: none; }
  .index .cl { display: none; }
  .index .ti { grid-column: 1 / 2; }
  .index .yr { grid-column: 2 / 3; grid-row: 2; }
  .index-foot { flex-direction: column; align-items: flex-start; gap: 16px; }
  .index .thumb { display: block; grid-column: 1 / -1; grid-row: 1; margin-bottom: 10px; }
  .index .thumb .cover { aspect-ratio: 16 / 9; }
  .index:hover a { opacity: 1; }
    .process { grid-template-columns: 1fr; row-gap: 0; }
  .process li { display: grid; grid-template-columns: 26px 1fr; padding: 0 0 28px; }
  .process li::before { margin: 6px 0 0; grid-row: 1 / 4; }
  .caps { grid-template-columns: 1fr; }
  .caps div, .caps div + div { padding: 20px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .posts a { grid-template-columns: 1fr; row-gap: 8px; }
  .posts .d, .posts .t, .posts .c { grid-column: 1 / -1; }
  .posts .d { order: 2; } .posts .c { order: 0; } .posts .t { order: 1; }
  .posts .ar { display: none; }
  footer.site { grid-template-columns: 1fr; row-gap: 10px; }
  footer.site .f1, footer.site .f2, footer.site nav { grid-column: 1 / -1; justify-content: flex-start; }
  .work-grid { grid-template-columns: 1fr; }
  .work-grid a:nth-child(3n+1) .cover { aspect-ratio: 4 / 3; }
  .facts { grid-template-columns: 1fr 1fr; }
  .toc { display: none; }
  .case-main { grid-column: 1 / -1; }
  .case-cover .cover { aspect-ratio: 4 / 3; }
  .stats { grid-template-columns: 1fr; gap: 18px; }
  .stats.s4 { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .outputs { grid-template-columns: minmax(0, 1fr); }
  .shots { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .out-list a { grid-template-columns: minmax(0, 1fr) auto; }
  .out-list .label { grid-column: 1 / -1; }
  .outputs figure { grid-column: 1 / -1 !important; }
  .outputs figure:nth-child(1) .slot, .outputs figure:nth-child(2) .slot { aspect-ratio: 4 / 3; }
  .next-case .label, .next-case b { grid-column: 1 / -1; }
  .next-case svg { display: none; }
  .portrait, .about-txt, .contact-grid .left, .contact-grid .right { grid-column: 1 / -1; }
  .contact-grid .right { margin-top: 56px; }
  .portrait { position: static; margin-bottom: 40px; }
  .kv div { grid-template-columns: 110px 1fr; }
  .chart .row { grid-template-columns: 112px 1fr 40px; gap: 8px; }
  .prose { font-size: 19px; }
}
/* ---------- password gate (work in progress) ---------- */
#lock {
  position: fixed; inset: 0; z-index: 100; display: grid; grid-template-columns: minmax(0, 440px); place-content: center; padding: 16px;
  background: var(--hero-bg);
}
#lock .lock-box { width: 100%; text-align: center; }
#lock .lock-k { font: 400 13px var(--mono); color: var(--muted); }
#lock h1 { font: 600 clamp(40px, 6vw, 60px)/1.02 var(--serif); letter-spacing: -0.03em; margin-top: 14px; }
#lock p { color: var(--lede); margin-top: 12px; font-size: 17px; }
#lock .lock-row { display: flex; gap: 8px; margin-top: 28px; }
#lock input {
  flex: 1; min-width: 0; height: 46px; padding: 0 14px; border-radius: 9px; border: 1px solid rgba(17,17,17,.12);
  background: var(--glass-2); font: 400 16px var(--sans); color: var(--ink);
}
#lock input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(17,17,17,.08); }
#lock button {
  display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px; border: 0; border-radius: 9px; cursor: pointer;
  background: var(--btn-dark-bg); color: var(--btn-dark-fg); font: 500 15px var(--sans);
}
#lock button svg { width: 14px; height: 14px; }
#lock .lock-err { color: var(--accent); font-size: 14px; min-height: 1.4em; }
#lock .shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* ================================================================ laugon-style system
   Accent: Zima Blue (#5bc2e7 on dark, #0a6f9c on light for text contrast).
   One highlighted word per heading, "— LABEL" eyebrows, hairline rows, floating pills,
   stacked project cards, contrasting side cards, giant contact line. */
:root { --ease-x: cubic-bezier(.22, 1, .36, 1); }

/* nav and labels in letter-spaced caps */
.nav .logo { font: 500 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.nav ul { font: 400 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.nav ul a.status { font: 400 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.nav ul a.pill { letter-spacing: .12em; }

.eyebrow { display: inline-flex; align-items: center; gap: 12px; color: var(--hl); font: 400 12px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; }

.sec-top, .sec-top.grid { display: block; margin-bottom: clamp(48px, 6vw, 88px); }
.sec-top .label { display: inline-flex; padding: 0; }
.sec-top h2 { margin-top: 22px; max-width: 15em; font: 600 clamp(38px, 4.6vw, 64px)/1.04 var(--serif); letter-spacing: -0.04em; }
.sec-intro { margin-top: 20px; max-width: 560px; color: var(--ink-2); font-size: 17px; line-height: 1.55; }
.section { padding-top: clamp(120px, 15vw, 230px); }

/* welcome */
.welcome .big-h { margin-top: 22px; font: 600 clamp(42px, 5.4vw, 80px)/1.02 var(--serif); letter-spacing: -0.045em; }
.big-h em, .sec-top h2 em { font-style: normal; color: var(--hl); }
.welcome-txt { margin-top: clamp(44px, 6vw, 80px); max-width: 640px; display: grid; gap: 14px; color: var(--ink-2); font-size: 17px; line-height: 1.6; }

/* services: light titles, text and a cloud of pills, mirrored every other row */
.services { border-top: 1px solid var(--line); }
.svc { display: block; padding: clamp(36px, 4.4vw, 60px) 0; border-bottom: 1px solid var(--line); }
.svc h3 { font: 300 clamp(32px, 3.6vw, 50px)/1.05 var(--serif); letter-spacing: -0.045em; }
.svc-body { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; margin-top: 26px; }
.svc-body p { max-width: 460px; color: var(--ink-2); font-size: 16px; line-height: 1.6; padding: 0; }
.svc.flip .svc-body p { order: 2; }
.pills { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 8px; align-content: center; }
.pills li {
  font: 400 12px/1 var(--sans); padding: 8px 15px; border-radius: 999px; color: var(--ink-2); background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line), 0 0 18px -6px color-mix(in srgb, var(--hl) 55%, transparent);
  transform: translateY(var(--y, 0)) rotate(var(--r, 0deg)); animation: drift 6s ease-in-out var(--fd, 0s) infinite alternate;
  transition: box-shadow .4s var(--ease-x), color .4s var(--ease-x);
}
.svc:hover .pills li, .pills li:hover { color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hl) 60%, transparent), 0 0 22px -4px color-mix(in srgb, var(--hl) 70%, transparent); }
.pills.static li { animation: none; transform: none; }
@keyframes drift { to { transform: translateY(calc(var(--y, 0px) * -1 + 3px)) rotate(calc(var(--r, 0deg) * -1)); } }

/* selected work: sticky tab bar, cards stacking on top of each other */
.work { position: relative; }
.work-bar { position: sticky; top: 68px; z-index: 20; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-2); }
.work-bar .wrap { display: flex; align-items: center; gap: 28px; height: 58px; }
.work-tabs { display: flex; gap: 22px; flex: 1; justify-content: center; overflow-x: auto; scrollbar-width: none; }
.work-tabs a { position: relative; font: 400 12.5px/1 var(--sans); color: var(--muted); white-space: nowrap; padding: 6px 0; transition: color .3s; }
.work-tabs a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--hl); transform: scaleX(0); transition: transform .5s var(--ease-x); }
.work-tabs a.on { color: var(--ink); }
.work-tabs a.on::after { transform: scaleX(1); }
.see-all { white-space: nowrap; }
.see-all:hover { color: var(--ink); }
.work-stack { display: grid; gap: 28px; padding-top: 40px; }
.wcard {
  position: sticky; top: calc(68px + 58px + 24px); display: grid; grid-template-columns: 1fr 1fr; min-height: min(620px, calc(100svh - 190px));
  border-radius: 28px; overflow: hidden; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), 0 -20px 60px -30px rgba(0,0,0,.5);
}
.wc-vis { display: block; position: relative; }
.wc-vis .cover { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.wc-vis .cover .c-name { font-size: clamp(34px, 4vw, 64px); }
.wc-txt { display: flex; flex-direction: column; padding: clamp(28px, 3.6vw, 56px); }
.wc-txt h3 { margin-top: 16px; font: 700 clamp(28px, 2.8vw, 42px)/1.06 var(--serif); letter-spacing: -0.035em; }
.wc-txt h3 a:hover { color: var(--hl); }
.wc-dek { margin-top: 16px; color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.wc-list { margin-top: 22px; padding-left: 18px; display: grid; gap: 10px; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.wc-list li::marker { color: var(--hl); }
.wc-foot { margin-top: auto; padding-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.wc-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.wc-tags span { font: 400 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); }

/* about: photo + definition table */
.beyond-grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.beyond-l { position: sticky; top: 110px; }
.beyond-photo { margin: 0; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; }
.beyond-photo img { width: 100%; height: 100%; object-fit: cover; }
.beyond-photo.led-bg::before { opacity: .35; -webkit-mask-image: none; mask-image: none; }
.beyond-lede { margin-top: 0; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.kv-table { border-top: 1px solid var(--line); }
.kv-table div { display: grid; grid-template-columns: 150px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.kv-table dt { font: 400 11.5px/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.kv-table dd { font-size: 16px; line-height: 1.5; }
.kv-sub { margin: 36px 0 16px; }

/* principles: cards with index, ghost numeral and a teal glow on hover */
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pcard { position: relative; overflow: hidden; padding: 30px 28px 28px; min-height: 250px; border-radius: 22px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .5s var(--ease-x), background .5s var(--ease-x); }
.pcard .pc-n { font: 400 12px/1 var(--sans); letter-spacing: .1em; color: var(--muted); transition: color .5s var(--ease-x); }
.pcard .pc-ghost { position: absolute; right: 18px; top: 4px; font: 700 110px/1 var(--serif); letter-spacing: -0.06em; color: var(--ink); opacity: .05; }
.pcard b { display: block; margin-top: 46px; font: 600 24px/1.1 var(--serif); letter-spacing: -0.02em; }
.pcard p { margin-top: 12px; color: var(--ink-2); font-size: 15px; line-height: 1.55; max-width: 34ch; }
.pcard i { display: block; width: 28px; height: 2px; margin-top: 22px; background: var(--hl); transition: width .5s var(--ease-x); }
.pcard:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hl) 45%, transparent); background: radial-gradient(70% 70% at 100% 100%, color-mix(in srgb, var(--hl) 16%, transparent), transparent 70%), var(--surface); }
.pcard:hover .pc-n { color: var(--hl); }
.pcard:hover i { width: 64px; }

/* marquee */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mq-track { display: flex; width: max-content; animation: mq 48s linear infinite; }
.marquee:hover .mq-track { animation-play-state: paused; }
.mq-set { display: flex; align-items: center; flex: none; }
.clients-sec .mq-set span { font: 600 clamp(44px, 6.4vw, 104px)/1.1 var(--serif); letter-spacing: -0.045em; padding: 0 .18em; white-space: nowrap; transition: color .3s; }
.clients-sec .mq-set span:hover { color: var(--hl); }
.clients-sec .mq-set i { font-style: normal; color: var(--hl); font-size: clamp(22px, 2.6vw, 40px); padding: 0 .4em; }
.clients-sec .clients-note { margin-top: 28px; }
@keyframes mq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .mq-track, .pills li { animation: none; } }

/* looking for: dash + title, description on the right */
.lf { border-top: 1px solid var(--line); }
.lf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.lf-row b { display: flex; gap: 14px; align-items: baseline; font: 600 20px/1.3 var(--serif); letter-spacing: -0.01em; }
.lf-row b::before { content: ""; flex: none; width: 14px; height: 1px; background: var(--hl); transform: translateY(-5px); }
.lf-row p { color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }

/* testimonials: faint giant marquee behind tilted cards */
.tm-stage { position: relative; margin-top: 40px; }
.marquee.ghost { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; -webkit-mask-image: none; mask-image: none; }
.marquee.ghost .mq-set { font: 700 clamp(80px, 12vw, 190px)/1 var(--serif); letter-spacing: -0.05em; color: var(--ink); opacity: .07; white-space: nowrap; }
.tm-cards { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.tm-card { margin: 0; padding: 30px; border-radius: 24px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); transform: rotate(var(--tilt, 0deg)) scale(var(--sc, 1)); transition: transform .2s linear; }
.tm-card blockquote { font-size: 19px; line-height: 1.5; }
.tm-card figcaption { display: flex; gap: 12px; align-items: center; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); font: 400 12px/1.3 var(--sans); }
.tm-card figcaption b { letter-spacing: .12em; text-transform: uppercase; }
.tm-card figcaption span { color: var(--muted); }

/* contact: giant line pinned to the bottom, small caps footer row */
.closing { margin-top: clamp(120px, 15vw, 230px); }
.closing .wrap { min-height: min(100svh, 980px); display: flex; flex-direction: column; padding-top: clamp(90px, 10vw, 140px); }
.closing .eyebrow { color: var(--hl); }
.cl-main { margin-top: auto; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; }
.closing h2 { margin: 0; font: 700 clamp(72px, 13vw, 230px)/.86 var(--serif); letter-spacing: -0.06em; }
.cl-side { max-width: 340px; padding-bottom: 1.2vw; display: grid; gap: 14px; justify-items: start; }
.closing p.lead { margin: 0; font-size: 15.5px; }
.closing .mail { margin: 0; font: 400 20px/1.2 var(--serif); }
footer.site.label { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: clamp(48px, 6vw, 80px); padding: 22px 0 30px; border-top: 1px solid rgba(238,240,238,.14); font: 400 11.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(238,240,238,.55); }
footer.site nav { display: flex; gap: 22px; grid-column: auto; }

@media (max-width: 960px) {
  .wcard { grid-template-columns: 1fr; position: relative; top: auto; min-height: 0; }
  .wc-vis { aspect-ratio: 16 / 9; }
  .pgrid { grid-template-columns: 1fr 1fr; }
  .beyond-grid { grid-template-columns: 1fr; }
  .beyond-l { position: static; }
}
@media (max-width: 640px) {
  .svc-body, .lf-row { grid-template-columns: 1fr; gap: 16px; }
  .svc.flip .svc-body p { order: 0; }
  .pgrid { grid-template-columns: 1fr; }
  .work-bar .eyebrow, .see-all { display: none; }
  .work-tabs { justify-content: flex-start; }
  .kv-table div { grid-template-columns: 1fr; gap: 6px; }
  .cl-main { grid-template-columns: 1fr; margin-top: 28px; }
  .closing .wrap { min-height: 0; }
  footer.site.label { flex-direction: column; align-items: flex-start; }
}

/* career: period / role · company / what, hairline rows */
.career { border-top: 1px solid var(--line); }
.cr-row { display: grid; grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1.25fr); gap: 32px; align-items: baseline; padding: 28px 0; border-bottom: 1px solid var(--line); }
.cr-row b { font: 600 clamp(20px, 1.8vw, 26px)/1.2 var(--serif); letter-spacing: -0.02em; }
.cr-row b span { color: var(--hl); font-weight: 500; }
.cr-row p { color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
@media (max-width: 820px) { .cr-row { grid-template-columns: 1fr; gap: 10px; } }
.beyond-photo + .beyond-lede { margin-top: 26px; }

/* ---------------------------------------------------------------- light theme: hero and contact follow the page */
:root[data-theme="light"] .hero { background: var(--paper); color: var(--ink); --muted: #77767e; --accent: #0a6f9c; }
:root[data-theme="light"] .giant { color: var(--ink); }
:root[data-theme="light"] .hero-foot .label { color: var(--muted); }
:root[data-theme="light"] .today span + span,
:root[data-theme="light"] .hero-top .status.m-only,
:root[data-theme="light"] .role span { color: var(--ink-2); }
:root[data-theme="light"] .hero-photo .ph { background: radial-gradient(34% 46% at 50% 40%, rgba(14,15,17,.05), transparent 70%); }
:root[data-theme="light"] .hero-photo::after { background: linear-gradient(180deg, rgba(244,244,241,.6) 0%, rgba(244,244,241,0) 22%, rgba(244,244,241,0) 62%, rgba(244,244,241,.85) 100%); }
:root[data-theme="light"] body:has(.hero) .nav:not(.scrolled) { --ink: #0e0f11; --ink-2: #3a3c41; --paper: #f4f4f1; --line: rgba(14,15,17,.12); }

:root[data-theme="light"] .closing { background: var(--paper-2); color: var(--ink); border-top-color: var(--line); --led: rgba(14,15,17,.6); --led-on: #1688bd; }
:root[data-theme="light"] .closing .label { color: var(--muted); }
:root[data-theme="light"] .closing .eyebrow { color: var(--hl); }
:root[data-theme="light"] .closing p.lead { color: var(--ink-2); }
:root[data-theme="light"] .closing .mail { border-bottom-color: var(--line); }
:root[data-theme="light"] .closing .mail:hover { border-bottom-color: var(--ink); }
:root[data-theme="light"] .closing .chip-copy { background: rgba(14,15,17,.04); box-shadow: inset 0 0 0 1px var(--line); }
:root[data-theme="light"] .closing .chip-copy:hover { background: rgba(14,15,17,.08); }
:root[data-theme="light"] footer.site.label { color: var(--muted); border-top-color: var(--line); }
:root[data-theme="light"] footer.site a:hover { color: var(--ink); }

/* services: everything on one side, text first, tags under it */
.svc-body { grid-template-columns: minmax(0, 640px); gap: 18px; align-items: start; margin-top: 18px; }
.svc-body p { max-width: 640px; }
.pills li { animation: none; transform: none; }

/* ---------------------------------------------------------------- project colours
   One colour per project, picked to echo the client (Westinghouse blue, TOMRA green, Vesuf summer...).
   Dark tones glow from the bottom-right, light tones are pastel with a deeper accent. */
.cover[data-tone] { background: radial-gradient(115% 95% at 88% 112%, var(--b) 0%, transparent 64%), radial-gradient(70% 60% at 0% 0%, rgba(255,255,255,.07), transparent 70%), var(--a); }
.cover[data-tone="atom"]   { --a: #0a1834; --b: #2f6bff; --fg: #eef3ff; }
.cover[data-tone="ember"]  { --a: #170c09; --b: #ff4b1f; --fg: #fff1ea; }
.cover[data-tone="neon"]   { --a: #150d2b; --b: #8b5cf6; --fg: #f1ecff; }
.cover[data-tone="zima"]   { --a: #061d27; --b: #5bc2e7; --fg: #eaf8fd; }
.cover[data-tone="leaf"]   { --a: #082419; --b: #19c37d; --fg: #eafff4; }
.cover[data-tone="brick"]  { --a: #22100c; --b: #d9643a; --fg: #fff0ea; }
.cover[data-tone="gold"]   { --a: #121110; --b: #c9a24a; --fg: #f7f0de; }
.cover[data-tone="park"]   { --a: #0f2016; --b: #6fbf73; --fg: #eefaee; }
.cover[data-tone="steel"]  { --a: #16191d; --b: #8d99a6; --fg: #eef0f2; }
.cover[data-tone="blood"]  { --a: #0a0a0a; --b: #e11d2e; --fg: #f5f5f5; }
.cover[data-tone="sun"]    { --a: #ffb21a; --b: #ff4f1f; --fg: #1c0f03; background: radial-gradient(115% 95% at 88% 112%, var(--b) 0%, transparent 64%), radial-gradient(70% 60% at 0% 0%, rgba(255,255,255,.35), transparent 70%), var(--a); }
.cover[data-tone="coral"]  { --a: #ffe2da; --b: #ff6f61; --fg: #2a0f0b; background: radial-gradient(115% 95% at 88% 112%, var(--b) 0%, transparent 64%), radial-gradient(70% 60% at 0% 0%, rgba(255,255,255,.5), transparent 70%), var(--a); }
.cover[data-tone="meadow"] { --a: #e3eed4; --b: #7fb24a; --fg: #16210c; background: radial-gradient(115% 95% at 88% 112%, var(--b) 0%, transparent 64%), radial-gradient(70% 60% at 0% 0%, rgba(255,255,255,.5), transparent 70%), var(--a); }
.cover[data-tone="azure"]  { --a: #dde9ff; --b: #3b82f6; --fg: #0b1a33; background: radial-gradient(115% 95% at 88% 112%, var(--b) 0%, transparent 64%), radial-gradient(70% 60% at 0% 0%, rgba(255,255,255,.5), transparent 70%), var(--a); }
.cover[data-tone="clay"]   { --a: #f1e6d8; --b: #c08a52; --fg: #2a1a0c; background: radial-gradient(115% 95% at 88% 112%, var(--b) 0%, transparent 64%), radial-gradient(70% 60% at 0% 0%, rgba(255,255,255,.5), transparent 70%), var(--a); }
.cover[data-tone] .c-name { text-shadow: 0 1px 24px color-mix(in srgb, var(--a) 60%, transparent); }
/* a real photo, tinted with the project colour */
.cover .c-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); mix-blend-mode: luminosity; opacity: .6; transition: transform 1.2s var(--ease-x), opacity .6s; }
a:hover .cover .c-img, .wcard:hover .cover .c-img { transform: scale(1.04); opacity: .72; }
.cover:is([data-brand="0kult-event"], [data-brand="rapdenne"]) .c-img,
a:hover .cover:is([data-brand="0kult-event"], [data-brand="rapdenne"]) .c-img { filter: none; mix-blend-mode: normal; opacity: 1; }   /* a logo / profile screenshot, keep its colour */
.cover[data-brand="rapdenne"] .c-name { display: none; }   /* the profile screenshot already names it */

/* ---------------------------------------------------------------- selected work on home: a plain grid, first card wide */
.work-grid-home { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.work-grid-home .wcard { position: relative; top: auto; display: flex; flex-direction: column; min-height: 0; box-shadow: inset 0 0 0 1px var(--line); }
.work-grid-home .wcard:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1.15fr 1fr; }
.work-grid-home .wc-vis { aspect-ratio: 16 / 10; overflow: hidden; }
.work-grid-home .wcard:first-child .wc-vis { aspect-ratio: auto; min-height: 460px; }
.work-grid-home .wc-vis .cover { transition: transform 1.2s var(--ease-x); }
.work-grid-home .wcard:hover .wc-vis .cover { transform: scale(1.025); }
.work-grid-home .wc-txt { flex: 1; }
.work-grid-home .wcard:not(:first-child) .wc-list { display: none; }
.work-grid-home + .index-foot { margin-top: 32px; }
@media (max-width: 820px) {
  .work-grid-home { grid-template-columns: 1fr; }
  .work-grid-home .wcard:first-child { display: flex; }
  .work-grid-home .wcard:first-child .wc-vis { min-height: 0; aspect-ratio: 16 / 10; }
}

/* Portfolio introduction and the supplied portrait. */
.welcome { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.welcome .big-h { font-size: clamp(42px, 4.6vw, 70px); }
.welcome-txt { margin-top: 32px; max-width: 54ch; }
.welcome-more { display: inline-flex; margin-top: 28px; }
.welcome-photo { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 24px; }
.welcome-photo img, .portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.portrait { overflow: hidden; border-radius: 24px; aspect-ratio: 3 / 4; }

/* Official client artwork; logo colors remain unchanged in either theme. */
.cover[data-brand] { border-radius: 16px; }
.cover.branded { --brand-bg: #f4f1eb; --brand-fg: #182a37; color: var(--brand-fg); background: var(--brand-bg); }
.cover.branded::before { opacity: .055; }
.cover .c-logo { position: absolute; inset: 25% 14% 29%; display: flex; align-items: center; justify-content: center; }
.cover .c-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cover.branded .c-name, .case-cover .cover.branded .c-name, .wc-vis .cover.branded .c-name { font: 400 clamp(12px, 1.1vw, 16px)/1.4 var(--mono); letter-spacing: .02em; text-transform: uppercase; max-width: 88%; }
.cover[data-brand="westinghouse-ap300"] { --brand-bg: #063a61; --brand-fg: #fff; }
.cover[data-brand="vesuf-festival-pr"] { --brand-bg: #fff1d9; --brand-fg: #52251c; }
.cover[data-brand="trikaya-pr-social"] { --brand-bg: #fff; --brand-fg: #8f0b22; }
.cover[data-brand="algotech-media"] { --brand-bg: #fff; --brand-fg: #000a3d; }
.cover[data-brand="aequitas-krkonose"] { --brand-bg: #023878; --brand-fg: #fff; }
.cover[data-brand="ekonomicke-stavby"] { --brand-bg: #0b6fc7; --brand-fg: #fff; }
.cover[data-brand="passerinvest-pr-social"] { --brand-bg: #163e49; --brand-fg: #e0f3f1; }
.cover[data-brand="jt-novy-rohan"] { --brand-bg: #f1e8d9; --brand-fg: #1a2834; }
.cover[data-brand="tomra-komunikace"] { --brand-bg: #fff; --brand-fg: #002039; }
.cover[data-brand="koa-komunikace"] { --brand-bg: #e5edcd; --brand-fg: #181b12; }
.cover[data-brand="ladenta-social-video"] { --brand-bg: #eeeede; --brand-fg: #54583c; }
.cover[data-brand="irhh-regulace-hazardu"] { --brand-bg: #f2f1eb; --brand-fg: #1d1d1b; }
[data-theme="dark"] .cover[data-brand] { filter: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cover[data-brand] { filter: none; } }
@media (max-width: 760px) {
  .welcome { grid-template-columns: 1fr; gap: 36px; }
  .welcome-photo { max-width: 480px; width: 100%; }
  .welcome-txt { margin-top: 26px; }
  .cover .c-top { font-size: 10px; }
  .cover.branded .c-name, .case-cover .cover.branded .c-name, .wc-vis .cover.branded .c-name { font-size: 11px; }
}

.cover.branded .c-name { text-shadow: none; }

/* services: title and text on the left, larger tags filling the right side */
.svc.svc-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.svc-l p { margin-top: 16px; max-width: 520px; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.svc-split .pills { justify-content: flex-end; gap: 12px 10px; }
.svc-split .pills li { font-size: 15px; padding: 12px 20px; }
@media (max-width: 820px) {
  .svc.svc-split { grid-template-columns: 1fr; gap: 18px; }
  .svc-split .pills { justify-content: flex-start; }
  .svc-split .pills li { font-size: 13px; padding: 9px 15px; }
}
/* selected work: the first card spans the full width only when the count is odd */
.work-grid-home .wcard:first-child:not(:nth-last-child(odd)) { grid-column: auto; display: flex; }
.work-grid-home .wcard:first-child:not(:nth-last-child(odd)) .wc-vis { min-height: 0; aspect-ratio: 16 / 10; }
.work-grid-home .wcard:first-child:not(:nth-last-child(odd)) .wc-list { display: none; }
.cover[data-tone="pine"]   { --a: #0b1c18; --b: #3f9f86; --fg: #eaf7f2; }

/* selected work sits right under the hero: a little less air above it */
.hero + main > .work:first-child { padding-top: clamp(80px, 9vw, 140px); }
.cover[data-tone="cobalt"] { --a: #0b1430; --b: #3d5afe; --fg: #eef1ff; }
.cover[data-tone="amber"]  { --a: #1a1814; --b: #f59e0b; --fg: #fff6e6; }