/* rysych.com — the borehole.
   Every project is dug from its surface to its core: 0 Surface → −1 Why? → −2 Why? → Core → = Proof.
   Ink, paper and one signal red; the deeper the layer, the larger the type and the hotter the colour.
   Archivo carries the words, Geist Mono the depths, labels and figures. Shared by every page. */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-var-latin.woff2?v=1") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/geist-mono-var.woff2?v=1") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #fff;
  --ink: #000;
  --signal: #ff3b00;      /* the core: black type on it 5.9:1; never small white type */
  --heat-1: #ffefe9;      /* −1 */
  --heat-2: #ffd0bf;      /* −2 */
  --mute: #4a4a4a;        /* on paper 8.9:1, on heat-2 6.3:1 */
  --mute-dark: #c4c4c4;   /* on ink 12:1 */
  --rule-dark: #5a5a5a;
  --stage: #ececec;       /* the light stage a black phone stands on */

  /* what type on the current band uses; ink bands flip them */
  --fg: var(--ink);
  --fg-mute: var(--mute);
  --rule: var(--ink);

  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --gut: clamp(16px, 2.4vw, 36px);      /* page edge */
  --ruler: clamp(96px, 9.4vw, 148px);   /* the depth column: wide enough for "2021–2023" on one line */
  --inset: clamp(16px, 2vw, 32px);      /* from the ruler to the words */
  --pic: clamp(220px, 23vw, 360px);
  --header-h: 45px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* bridge: names case.css still reads until the case pages move into this world */
  --bg: var(--paper);
  --muted: var(--mute);
  --ink-2: #2b2b2b;
  --tile: #f2f2f2;
  --tile-2: #e6e6e6;
  --line: #d9d9d9;
  --font: var(--sans);
  --max: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 0px;

  color-scheme: light;
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 12px;
  scrollbar-color: var(--ink) var(--paper);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.45;
  font-stretch: 100%;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  caret-color: var(--signal);
}

img, video, svg, picture { display: block; max-width: 100%; }
img, video { height: auto; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }
h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; }
q { quotes: none; }
mark { color: inherit; background: none; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { text-decoration-thickness: 3px; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: inherit;
}

::selection { background: var(--signal); color: var(--ink); }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--paper); border-left: 1px solid var(--ink); }
::-webkit-scrollbar-thumb { background: var(--ink); border: 3px solid var(--paper); }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.nowrap { white-space: nowrap; }
.mono { font-family: var(--mono); font-size: 13px; line-height: 1.35; letter-spacing: 0; font-feature-settings: "tnum"; }

/* a centred measure, still used inside the case pages */
.page-width {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  top: -80px;
  left: var(--gut);
  z-index: 100;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus-visible { top: 8px; outline-color: var(--signal); }

/* ---------- Links and buttons ---------- */

/* a plain underlined link; case pages use it for "All projects", "Visit …" and "Next project" */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}
.icon-arrow,
.icon-external { flex: none; width: 16px; height: 16px; }

/* a button that looks like one: a hard 1.5px box, inverted on hover and focus */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border: 1.5px solid currentColor;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover,
.btn:focus-visible { background: var(--fg); color: var(--paper); border-color: var(--fg); }
.btn--signal { background: var(--signal); border-color: var(--signal); color: var(--ink); }

/* ---------- Header ---------- */

/* the name sits over the depth column, the title where the words start, the links on the right */
.site-header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  min-height: var(--header-h);
  padding-right: var(--gut);
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.35;
  text-transform: uppercase;
}
.wordmark {
  flex: none;
  min-width: var(--ruler);
  padding: 10px 12px 10px var(--gut);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.site-header__title { padding-left: var(--inset); color: var(--mute); white-space: nowrap; }

/* .pill-nav is the case pages' name for the same nav until they move to .site-nav */
.site-nav,
.pill-nav { margin-left: auto; padding-left: 24px; }
.site-nav ul,
.pill-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 20px; }
.site-nav a,
.pill-nav a { display: inline-block; padding: 8px 0; white-space: nowrap; }
.site-nav__email { text-transform: none; }

/* phones: one Menu box; the list drops as a black slab under the header */
.mobile-nav { display: none; }
.mobile-nav summary {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1.5px solid var(--ink);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav[open] summary { background: var(--ink); color: var(--paper); }
@media (hover: hover) { .mobile-nav summary:hover { background: var(--ink); color: var(--paper); } }
.mobile-nav summary:focus-visible { outline-color: var(--signal); }
.mobile-nav nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: grid;
  padding: 0 var(--gut) 8px;
  background: var(--ink);
  color: var(--paper);
  font-size: 15px;
}
.mobile-nav nav a {
  display: flex;
  align-items: center;
  min-height: 52px;
  border-bottom: 1px solid var(--rule-dark);
  text-decoration: none;
}
.mobile-nav nav a:last-child { border-bottom: 0; }
.mobile-nav nav a:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.mobile-nav nav .site-nav__email { text-transform: none; }

/* one switch stops every looping film on the page and is remembered from page to page;
   site.js adds it only where films loop. Paused, it turns signal red until motion is back. */
.motion-toggle {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  margin-left: 20px;
  padding: 0 10px;
  border: 1.5px solid var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}
.motion-toggle[hidden] { display: none; }
.motion-toggle svg { flex: none; }
.motion-toggle__play,
.motion-toggle.is-paused .motion-toggle__pause { display: none; }
.motion-toggle.is-paused .motion-toggle__play { display: block; }
.motion-toggle:focus-visible { background: var(--ink); color: var(--paper); }
@media (hover: hover) { .motion-toggle:hover { background: var(--ink); color: var(--paper); } }
.motion-toggle:focus-visible { outline-color: var(--signal); }
.motion-toggle.is-paused { background: var(--signal); border-color: var(--signal); color: var(--ink); }
.motion-toggle.is-paused:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--paper); }
@media (hover: hover) { .motion-toggle.is-paused:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); } }

/* ---------- Strata: the shared grammar ---------- */

.stratum {
  display: grid;
  grid-template-columns: var(--ruler) minmax(0, 1fr);
  border-bottom: 1px solid var(--rule);
}
.depth {
  --num: clamp(20px, 1.9vw, 30px);    /* the numeral's size, which the label's sticky top follows */
  --tag: calc(12px * 1.2 + 4px);      /* the label's one line plus the gap above it */
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: stretch;
  padding: clamp(16px, 2vw, 26px) 6px 16px var(--gut);
  border-right: 1px solid currentColor;
  font-family: var(--mono);
}
.depth b {
  position: sticky;
  top: 12px;
  font-size: var(--num);
  font-weight: 500;
  line-height: 1;
  font-feature-settings: "tnum";
}
.depth span {
  position: sticky;
  top: calc(16px + var(--num));
  font-size: 12px;
  line-height: 1.2;
  text-transform: uppercase;
}
/* as a stratum scrolls away, its label pushes the numeral up instead of sliding onto it:
   sticky boxes are held back by their margin box, so the numeral reserves the label's room
   below itself and the label takes it back. At rest nothing moves. */
@media (min-width: 641px) {
  .depth b { margin-bottom: var(--tag); }
  .depth span { margin-top: calc(-1 * var(--tag)); }
}
.body { min-width: 0; padding: clamp(16px, 2vw, 26px) var(--gut) clamp(18px, 2.4vw, 34px) var(--inset); }

.t-0 { background: var(--paper); }
.t-1 { background: var(--heat-1); }
.t-2 { background: var(--heat-2); }
.t-core { background: var(--signal); }
.t-proof,
.bedrock {
  --fg: var(--paper);
  --fg-mute: var(--mute-dark);
  --rule: var(--rule-dark);
  background: var(--ink);
  color: var(--paper);
}
.t-proof { border-bottom-color: var(--ink); }
.t-proof :focus-visible,
.bedrock :focus-visible { outline-color: var(--paper); }

/* the words get heavier and narrower the deeper they sit */
.why-1 { max-width: 32ch; font-size: clamp(22px, 2.15vw, 33px); font-weight: 520; font-stretch: 96%; line-height: 1.3; letter-spacing: -0.01em; text-wrap: pretty; }
.why-2 { max-width: 31ch; font-size: clamp(27px, 2.95vw, 46px); font-weight: 640; font-stretch: 84%; line-height: 1.08; letter-spacing: -0.016em; text-wrap: pretty; }
.core-line { max-width: 14em; font-size: clamp(40px, 5.7vw, 92px); font-weight: 860; font-stretch: 62%; line-height: 0.9; letter-spacing: -0.012em; text-wrap: balance; }
.core-line.is-long { max-width: 17em; font-size: clamp(32px, 4.2vw, 68px); }
.src { max-width: 62ch; margin-top: clamp(14px, 1.6vw, 22px); font-size: clamp(16px, 1.2vw, 19px); line-height: 1.4; }
.src mark { background: var(--ink); color: var(--paper); padding: 0 0.14em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mine { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: baseline; max-width: 62ch; margin-top: 12px; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.4; }
.mine .mono { border: 1px solid var(--ink); padding: 2px 6px; text-transform: uppercase; white-space: nowrap; }

/* ---------- Hero: Pavel, dug two layers down ---------- */

.hero { display: grid; grid-template-columns: minmax(0, 1fr) var(--pic); }
.hero__s0 { grid-column: 1; grid-row: 1; }
.hero__s1 { grid-column: 1; grid-row: 2; }
.hero__core { grid-column: 1 / -1; grid-row: 3; }
.hero__pic {
  position: relative;
  grid-column: 2;
  grid-row: 1 / 3;
  overflow: hidden;
  border-left: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: #cfd3cc;
}
.hero__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 71% 42%; }
.hero__pic figcaption { position: absolute; left: 0; bottom: 0; padding: 4px 8px; border-top: 1px solid var(--ink); border-right: 1px solid var(--ink); background: var(--paper); }
.hero h1 { font-size: clamp(24px, 2.3vw, 36px); font-weight: 650; font-stretch: 88%; line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance; }
/* who he is, in two lines a recruiter checks first: the current role and record, then years, place and format */
.hero__role { margin-top: 8px; font-weight: 560; line-height: 1.35; text-wrap: balance; }
.hero__facts { margin-top: 4px; }
.hero__intro { max-width: 62ch; margin-top: 10px; color: var(--mute); text-wrap: pretty; }
.hero__s0 .body { padding-bottom: clamp(16px, 1.8vw, 24px); }
.promise { max-width: 22ch; font-size: clamp(32px, 3.9vw, 60px); font-weight: 650; font-stretch: 80%; line-height: 1; letter-spacing: -0.018em; text-wrap: balance; }
.hero__core .body { padding-block: clamp(14px, 1.6vw, 22px) clamp(14px, 1.8vw, 24px); }
.hero__core .core-line { max-width: none; }

/* ---------- Selected work: the index ---------- */

.legend {
  display: grid;
  grid-template-columns: var(--ruler) minmax(0, 1fr) auto;
  align-items: center;
  min-height: 48px;
  border-bottom: 1px solid var(--ink);
}
.legend h2 { grid-column: 1; padding-left: var(--gut); font-family: var(--mono); font-size: 12px; font-weight: 600; line-height: 1.2; text-transform: uppercase; }
.key { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px var(--inset); }
.key li { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.key i { flex: none; width: 14px; height: 14px; border: 1px solid var(--ink); }
.key .k1 { background: var(--heat-1); }
.key .k2 { background: var(--heat-2); }
.key .k3 { background: var(--signal); }
.key .k4 { background: var(--ink); }

.digall {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  margin-right: var(--gut);
  padding: 0 14px;
  border: 1.5px solid var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}
.digall[hidden] { display: none; }
.digall:focus-visible { background: var(--ink); color: var(--paper); }
@media (hover: hover) { .digall:hover { background: var(--ink); color: var(--paper); } }
.digall:focus-visible { outline-color: var(--signal); }
.digall.is-all { background: var(--signal); border-color: var(--signal); color: var(--ink); }
.digall svg,
.p__why svg { transition: transform 250ms var(--ease); }
.digall.is-all svg { transform: rotate(180deg); }

.p { border-bottom: 1px solid var(--ink); --case-w: 86px; }
.p__head { position: relative; }
/* the case page is one click from every row: a link that sits beside the Why? toggle, over the row's own background */
.p__case {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: var(--gut);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: var(--case-w);
  padding: 8px 10px;
  border: 1.5px solid currentColor;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transform: translateY(-50%);
}
.p__case:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; background: var(--ink); color: var(--paper); border-color: var(--ink); }
.p.is-open .p__case { color: var(--paper); }
.p.is-open .p__case:focus-visible { background: var(--paper); color: var(--ink); border-color: var(--paper); }
@media (hover: hover) {
  .p__case:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .p.is-open .p__case:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
  html:not(.js) .p:has(.p__btn:hover) .p__case:not(:hover) { color: var(--paper); }
}
.p__btn {
  position: relative;
  display: grid;
  grid-template-columns: var(--ruler) auto minmax(0, 1fr) minmax(0, 13rem) minmax(0, 12.5rem) auto;
  align-items: center;
  width: 100%;
  min-height: clamp(64px, 5.6vw, 86px);
}
.p__yrs { display: flex; align-items: center; align-self: stretch; padding: 10px 8px 10px var(--gut); border-right: 1px solid currentColor; font-size: 12px; white-space: nowrap; }
.p__thumb {
  position: relative;
  display: block;
  width: clamp(64px, 6.6vw, 104px);
  aspect-ratio: 4 / 3;
  margin: 10px 0 10px var(--inset);
  overflow: hidden;
  border: 1px solid currentColor;
  background: var(--thumb-bg, #08080a);
}
.p__thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.p__name {
  padding: 10px 16px 10px clamp(14px, 1.6vw, 26px);
  overflow-wrap: anywhere;
  font-size: clamp(38px, 4.9vw, 80px);
  font-weight: 850;
  font-stretch: 62%;
  line-height: 0.88;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.p__role { padding: 10px 16px 10px 0; line-height: 1.3; }
.p__fig { display: flex; flex-direction: column; gap: 3px; padding: 10px 16px 10px 0; }
.p__fig b { font-family: var(--mono); font-size: clamp(22px, 2vw, 32px); font-weight: 600; line-height: 1; font-feature-settings: "tnum"; white-space: nowrap; }
.p__fig small { font-family: var(--mono); font-size: 12px; line-height: 1.25; color: var(--mute); }
.p__why {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: calc(var(--gut) + var(--case-w) + 8px);
  padding: 8px 10px;
  border: 1.5px solid currentColor;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}
.p__shut { display: none; }
.p__btn:focus-visible,
.p.is-open .p__btn { background: var(--ink); color: var(--paper); }
.p__btn:focus-visible small,
.p.is-open .p__btn small { color: var(--mute-dark); }
/* only a real pointer hovers: on touch a tapped row would keep the hover and look dug after Close */
@media (hover: hover) {
  .p__btn:hover { background: var(--ink); color: var(--paper); }
  .p__btn:hover small { color: var(--mute-dark); }
}
.p__btn:focus-visible { outline: 3px solid var(--signal); outline-offset: -3px; }
/* two dug rows meet black on black: a dark hairline keeps them apart */
.p.is-open .p__btn { box-shadow: inset 0 1px 0 var(--rule-dark); }
.p.is-open .p__why { background: var(--signal); border-color: var(--signal); color: var(--ink); }
.p.is-open .p__why svg { transform: rotate(180deg); }
.p.is-open .p__open { display: none; }
.p.is-open .p__shut { display: inline; }
/* without script every row is already dug, so the toggle has nothing to say */
html:not(.js) .p__why { display: none; }

/* X-ray: point at a closed row, or tab to it, and it shows what lies under it. The row turns
   the core's red and the name gives way to the core, copied verbatim from the row's Core stratum
   by home.js and sized to fit the name's cell. A state, not a motion: the box sits over the cell
   out of flow, so the row never changes height. --under fades what the box covers; it only goes
   transparent, so the name stays in the button's accessible name. The X-ray itself is aria-hidden. */
.p__xray {
  position: absolute;
  inset: 0;
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px 10px clamp(14px, 1.6vw, 26px);
  overflow: hidden;
  visibility: var(--xray, hidden);
}
.p__xlabel { flex: none; overflow: hidden; font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 1.2; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.p__xcore { flex: none; font-size: clamp(40px, 5.7vw, 92px); font-weight: 860; font-stretch: 62%; line-height: 0.9; letter-spacing: -0.012em; text-wrap: balance; }
.index .p__name { opacity: var(--under, 1); }
.js .p:not(.is-open) .p__btn:focus-visible { --xray: visible; --under: 0; background: var(--signal); color: var(--ink); outline-color: var(--ink); }
.js .p:not(.is-open) .p__btn:focus-visible small { color: var(--ink); }
.js .p:not(.is-open) .p__btn:focus-visible .p__why { border-color: var(--ink); background: var(--ink); color: var(--paper); }
@media (hover: hover) {
  .js .p:not(.is-open) .p__btn:hover { --xray: visible; --under: 0; background: var(--signal); color: var(--ink); }
  .js .p:not(.is-open) .p__btn:hover small { color: var(--ink); }
  .js .p:not(.is-open) .p__btn:hover .p__why { border-color: var(--ink); background: var(--ink); color: var(--paper); }
}

/* the dig. Before the script runs, closed rows stay shut so nothing jumps;
   once it runs they become hidden="until-found", which find-in-page can still open. */
.js .p:not(.is-open) > .dig:not([hidden]) { display: none; }
.dig > .stratum:last-child { border-bottom: 0; }

/* 0 · Surface: the product, large and at its own proportions */
.surface {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 19rem);
  gap: clamp(16px, 2.4vw, 40px);
  align-items: start;
}
.surface--tall { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); }
.surface--square { grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); }
/* lower-resolution films (Admirals 1120w, MetaMap 960w) stay near their native size so they stay sharp */
.surface--compact { grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); }
.shot { border: 1px solid var(--ink); background: var(--paper); }
.shot figcaption { padding: 7px 10px; border-top: 1px solid var(--ink); text-wrap: pretty; }
.shot__stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--ar, 16 / 9);
  background: var(--stage-bg, var(--ink));
}
.shot__stage > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
/* the widget film's last pixel column is a grey card edge: run it 1% wide and let the frame trim it */
.shot__stage--widget > video { width: 101.2%; max-width: none; object-position: 0 50%; }

/* Subskim: the real phone screen on a light stage, the live site beside it */
.duo { display: grid; grid-template-columns: minmax(0, 37fr) minmax(0, 63fr); aspect-ratio: 16 / 9; }
.duo__phone { position: relative; overflow: hidden; border-right: 1px solid var(--ink); background: var(--stage); }
.phone {
  --bezel: clamp(5px, 0.62vw, 9px);
  --corner: clamp(24px, 3.2vw, 46px);
  position: absolute;
  top: 9%;
  left: 50%;
  width: min(80%, 300px);
  padding: var(--bezel);
  border-radius: var(--corner);
  background: #000;
  transform: translateX(-50%);
}
.phone img { width: 100%; border-radius: calc(var(--corner) - var(--bezel)); }
.duo__live { position: relative; display: grid; align-content: center; background: #08080a; }
.duo__live video { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.live-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 3px 7px;
  background: var(--signal);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.surface-text { max-width: 34ch; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.4; text-wrap: pretty; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.tags li { padding: 3px 8px; border: 1px solid var(--ink); }

/* = Proof */
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); border: 1px solid var(--rule-dark); }
.figs > div { display: flex; flex-direction: column; gap: 8px; margin: -1px 0 0 -1px; padding: clamp(14px, 1.6vw, 22px); border: 1px solid var(--rule-dark); }
.figs dd.n { order: -1; font-family: var(--mono); font-size: clamp(40px, 4.6vw, 76px); font-weight: 600; line-height: 1; letter-spacing: -0.03em; font-feature-settings: "tnum"; white-space: nowrap; }
.figs dt { font-family: var(--mono); font-size: 13px; line-height: 1.25; text-transform: uppercase; }
.figs dd.d { max-width: 34ch; color: var(--mute-dark); font-size: 15px; line-height: 1.4; }
.figs dd.d a { color: var(--paper); }
/* company figures sit in the proof band for context and say so right under the number */
.figs dd.ctx-tag { order: -1; font-family: var(--mono); font-size: 12px; line-height: 1.25; text-transform: uppercase; color: var(--signal); }
.ctx { max-width: 80ch; margin-top: 14px; color: var(--mute-dark); font-size: 15px; line-height: 1.45; }
.ctx b { margin-right: 6px; color: var(--paper); font-family: var(--mono); font-size: 12px; font-weight: 500; text-transform: uppercase; }
.out { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 20px; }
.btn-case {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border: 1.5px solid var(--paper);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
}
.btn-case:hover,
.btn-case:focus-visible { background: var(--paper); color: var(--ink); }
.up-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.up-btn[hidden] { display: none; }
.up-btn:hover { text-decoration-thickness: 3px; }

/* ---------- How I work: the five cores add up ---------- */

.sec-head { display: grid; grid-template-columns: var(--ruler) minmax(0, 1fr); border-bottom: 1px solid var(--ink); }
.sec-head h2 { font-size: clamp(36px, 4.6vw, 76px); font-weight: 850; font-stretch: 62%; line-height: 0.92; letter-spacing: -0.005em; text-transform: uppercase; }
.sec-head .body > p { max-width: 60ch; margin-top: 10px; color: var(--mute); }
.sec-head .body { padding-top: clamp(22px, 2.6vw, 36px); }

.sum li { display: grid; grid-template-columns: var(--ruler) minmax(0, 1fr) auto; align-items: baseline; border-bottom: 1px solid var(--ink); }
.sum .op { align-self: stretch; padding: 14px 12px 14px var(--gut); border-right: 1px solid var(--ink); font-family: var(--mono); font-size: clamp(20px, 1.9vw, 30px); font-weight: 500; line-height: 1; }
.sum q { padding: 14px var(--inset); font-size: clamp(22px, 2.6vw, 42px); font-weight: 700; font-stretch: 76%; line-height: 1.08; letter-spacing: -0.014em; text-wrap: balance; }
.sum mark { background: var(--signal); color: var(--ink); padding: 0 0.08em; }
.sum a { padding: 14px var(--gut) 14px 12px; text-transform: uppercase; white-space: nowrap; }
.total { border-top: 4px solid var(--ink); }
.total .depth { --num: clamp(28px, 3vw, 48px); }

.lead { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-left: var(--ruler); border-left: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.lead li { display: flex; flex-direction: column; gap: 10px; padding: clamp(16px, 2vw, 28px) var(--inset) clamp(18px, 2.2vw, 30px); border-right: 1px solid var(--ink); }
.lead li:last-child { border-right: 0; }
.lead h3 { font-size: clamp(22px, 2vw, 30px); font-weight: 750; font-stretch: 80%; line-height: 1.05; }
.lead p { max-width: 36ch; text-wrap: pretty; }
.lead a { display: inline-flex; align-items: center; min-height: 32px; margin-top: auto; text-transform: uppercase; }

/* ---------- What colleagues say ---------- */

.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-left: var(--ruler); border-left: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.quote { display: flex; flex-direction: column; gap: 16px; padding: clamp(16px, 2vw, 28px) var(--inset); border-right: 1px solid var(--ink); }
.quote:last-child { border-right: 0; }
.quote blockquote { font-size: clamp(18px, 1.45vw, 23px); font-weight: 450; line-height: 1.32; text-wrap: pretty; }
.quote figcaption { margin-top: auto; font-family: var(--mono); font-size: 13px; line-height: 1.35; }
.quote figcaption span { display: block; color: var(--mute); }

/* ---------- Contact: bedrock ---------- */

.contact .stratum { border-bottom: 0; }
.contact h2 { font-size: clamp(48px, 8.6vw, 148px); font-weight: 860; font-stretch: 62%; line-height: 0.86; letter-spacing: -0.006em; text-transform: uppercase; text-wrap: balance; }
.contact__lede { max-width: 58ch; margin-top: 18px; color: var(--mute-dark); font-size: clamp(17px, 1.3vw, 20px); text-wrap: pretty; }
.mailrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: clamp(20px, 2.6vw, 36px); }
.mail {
  font-size: clamp(28px, 4.3vw, 70px);
  font-weight: 650;
  font-stretch: 84%;
  line-height: 1;
  letter-spacing: -0.02em;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.12em;
  overflow-wrap: anywhere;
}
.mail:hover,
.mail:focus-visible { background: var(--signal); color: var(--ink); text-decoration-thickness: 2px; outline-color: var(--signal); }
.copy {
  display: inline-grid;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--paper);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}
.copy[hidden] { display: none; }
.copy > span { grid-area: 1 / 1; }
.copy__done { visibility: hidden; }
.copy.is-copied { background: var(--signal); border-color: var(--signal); color: var(--ink); }
.copy.is-copied .copy__idle { visibility: hidden; }
.copy.is-copied .copy__done { visibility: visible; }
.copy:focus-visible:not(.is-copied) { background: var(--paper); color: var(--ink); }
@media (hover: hover) { .copy:hover:not(.is-copied) { background: var(--paper); color: var(--ink); } }
.links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(20px, 2.4vw, 32px); }
.links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1.5px solid var(--paper);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
}
.links a:hover,
.links a:focus-visible { background: var(--paper); color: var(--ink); }
.links .links__cv { background: var(--signal); border-color: var(--signal); color: var(--ink); }
.links .links__cv:hover,
.links .links__cv:focus-visible { background: var(--paper); border-color: var(--paper); }

/* ---------- Footer ---------- */

/* sits on a .bedrock band at the bottom of every page */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0 24px;
  padding: 10px var(--gut) 14px;
  border-top: 1px solid var(--rule);
  color: var(--fg-mute);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.35;
}
.bedrock .site-footer { padding-left: calc(var(--ruler) + var(--inset)); }
.site-footer__end { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; }
.site-footer > span:first-child,
.site-footer__credit,
.site-footer a { display: inline-flex; align-items: center; min-height: 36px; }
.site-footer a { color: var(--fg); }

/* ---------- 404: a borehole with nothing at the bottom ---------- */

.lost__title { font-size: clamp(40px, 5.7vw, 92px); font-weight: 860; font-stretch: 62%; line-height: 0.9; letter-spacing: -0.012em; text-transform: uppercase; text-wrap: balance; }
.lost__home { display: inline-block; max-width: none; text-decoration-thickness: 4px; text-underline-offset: 0.1em; }
.lost__home:hover,
.lost__home:focus-visible { background: var(--ink); color: var(--signal); text-decoration-thickness: 4px; }
.lost__home:focus-visible { outline-color: var(--ink); }
/* the black band runs down to the footer however short the page is */
.error-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.error-page main,
.lost { display: flex; flex: 1; flex-direction: column; }
.lost > .t-proof { flex: 1; }
.lost__work { display: grid; border-top: 1px solid var(--rule-dark); }
.lost__work a {
  display: flex;
  align-items: center;
  min-height: 56px;
  border-bottom: 1px solid var(--rule-dark);
  font-size: clamp(28px, 3.4vw, 52px);
  font-weight: 850;
  font-stretch: 62%;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
}
.lost__work a:hover,
.lost__work a:focus-visible { background: var(--paper); color: var(--ink); outline-offset: -3px; }

/* ---------- Narrower screens ---------- */

@media (max-width: 1100px) {
  .site-header__title { display: none; }

  .p__btn {
    grid-template-columns: var(--ruler) auto minmax(0, 1fr) minmax(0, 12rem) auto;
    grid-template-areas: "yrs thumb name fig why" "yrs thumb role fig why";
  }
  .p__yrs { grid-area: yrs; padding-right: 4px; }
  .p__thumb { grid-area: thumb; }
  .p__name { grid-area: name; align-self: end; padding-bottom: 4px; font-size: clamp(34px, 4.9vw, 80px); }
  .p__role { grid-area: role; align-self: start; padding: 0 16px 10px clamp(14px, 1.6vw, 26px); }
  .p__fig { grid-area: fig; }
  .p__why { grid-area: why; }
  /* the role sits under the name here, so the X-ray takes the whole name block and covers both */
  .p__xray { grid-column: name; grid-row: name-start / role-end; }
  .index .p__role { opacity: var(--under, 1); }
}

@media (max-width: 860px) {
  /* the figure drops under the role, so the name gets the whole middle column and never breaks inside a word */
  .p__btn {
    grid-template-columns: var(--ruler) auto minmax(0, 1fr) auto;
    grid-template-areas: "yrs thumb name why" "yrs thumb role why" "yrs thumb fig why";
  }
  .p__role { padding-bottom: 4px; }
  .p__fig { flex-flow: row wrap; align-items: baseline; gap: 2px 8px; padding: 0 16px 12px clamp(14px, 1.6vw, 26px); }

  .surface,
  .surface--tall,
  .surface--square { grid-template-columns: minmax(0, 1fr); }
  .surface--tall .shot { max-width: 26rem; }
  .surface--square .shot { max-width: 34rem; }
  .surface--compact .shot { max-width: 34rem; }

  .lead,
  .quotes { grid-template-columns: minmax(0, 1fr); margin-left: 0; border-left: 0; }
  .lead li,
  .quote { border-right: 0; border-bottom: 1px solid var(--ink); padding-left: calc(var(--ruler) + var(--inset)); }
  .lead li:last-child,
  .quote:last-child { border-bottom: 0; }
}

@media (max-width: 760px) {
  .site-header { justify-content: space-between; min-height: 56px; padding: 0 var(--gut); }
  .wordmark { min-width: 0; padding-left: 0; }
  .site-nav,
  .pill-nav { display: none; }
  .mobile-nav { display: block; }
  .motion-toggle { min-height: 40px; margin: 0 8px 0 auto; }
}

/* where the header runs short of room the switch sheds words, never its name for screen readers:
   the narrowest phones keep the verb, and tablets, where the full nav still shows, keep the icon only */
@media (max-width: 400px) {
  .motion-toggle__word {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@media (min-width: 761px) and (max-width: 859px) {
  .motion-toggle { justify-content: center; width: 32px; padding: 0; }
  .motion-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (max-width: 640px) {
  :root { --ruler: 0px; }

  .stratum,
  .sec-head { grid-template-columns: minmax(0, 1fr); }
  .depth { flex-direction: row; align-items: baseline; gap: 10px; padding: 14px var(--gut) 0; border-right: 0; }
  .depth b,
  .depth span { position: static; }
  .depth b { font-size: 20px; }
  .body { padding: 8px var(--gut) 22px; }
  .sec-head .depth { display: none; }
  .sec-head .body { padding-top: 22px; }

  .hero { grid-template-columns: minmax(0, 1fr) 112px; }
  .hero__pic { grid-row: 1; }
  .hero__s1 { grid-column: 1 / -1; }
  .hero__pic figcaption { display: none; }

  .legend { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 12px var(--gut); }
  .legend h2 { padding-left: 0; }
  .key { grid-column: 1 / -1; grid-row: 2; gap: 6px 14px; padding: 0; }
  .digall { margin-right: 0; }

  .p__btn {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "thumb yrs why" "thumb name name" "thumb role role" "thumb fig fig";
    align-items: start;
    gap: 6px 12px;
    padding: 12px var(--gut) 14px;
  }
  .p__yrs { align-self: center; padding: 0; border-right: 0; }
  .p__thumb { width: clamp(56px, 18vw, 76px); margin: 0; }
  .p__name { padding: 2px 0 0; font-size: clamp(38px, 11.6vw, 56px); }
  .p__role { padding: 0; }
  .p__xray { padding: 0; }
  .p__fig { flex-flow: row wrap; align-items: baseline; gap: 2px 8px; padding: 0; }
  .p__fig b { font-size: 20px; }
  .p__why { margin-right: calc(var(--case-w) + 8px); justify-self: end; }
  .p__case { top: 12px; transform: none; }

  .duo { grid-template-columns: minmax(0, 1fr); aspect-ratio: auto; }
  .duo__phone { aspect-ratio: 1; border-right: 0; border-bottom: 1px solid var(--ink); }
  .phone { width: 56%; }
  .duo__live { padding-top: 40px; }

  .mine { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .mine .mono { justify-self: start; }

  .sum li { grid-template-columns: 2.2em minmax(0, 1fr); grid-template-areas: "op q" ". a"; }
  .sum .op { grid-area: op; padding: 14px 0 0 var(--gut); border-right: 0; font-size: 20px; }
  .sum q { grid-area: q; padding: 12px var(--gut) 4px 6px; }
  .sum a { grid-area: a; padding: 0 var(--gut) 14px 6px; }
  .total { border-top-width: 4px; }

  .lead li,
  .quote { padding-left: var(--gut); padding-right: var(--gut); }

  .bedrock .site-footer { padding-left: var(--gut); }
  .site-footer,
  .site-footer__end { flex-direction: column; align-items: flex-start; }
}

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

/* the narrowest phones: years, Why? and Case share one line, so the arrows step aside */
@media (max-width: 380px) {
  .p { --case-w: 62px; }
  .p__why,
  .p__case { gap: 0; }
  .p__why svg,
  .p__case svg { display: none; }
}