/* ---------- tokens (values lifted from the reference) ---------- */
:root {
  --background: #fbfbfb;
  --foreground: #2f2a21;
  --fg-5: color-mix(in oklab, var(--foreground) 5%, transparent);
  --fg-10: color-mix(in oklab, var(--foreground) 10%, transparent);
  --fg-15: color-mix(in oklab, var(--foreground) 15%, transparent);
  --fg-90: color-mix(in oklab, var(--foreground) 90%, transparent);
  --serif: "EB Garamond", "Apple Garamond", Garamond, serif;
  color-scheme: light;
}
:root.dark { --background: #121212; --foreground: #fff; color-scheme: dark; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--background); color: var(--foreground);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased; overflow: hidden;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; }
.spring-type { color: var(--foreground); font-family: var(--sans); }

/* ---------- header ---------- */
.site-header {
  position: absolute; inset: 0 0 auto 0; z-index: 60; pointer-events: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px; background: var(--background);
}
@media (min-width: 768px) { .site-header { background: transparent; padding: 24px 32px; } }
.site-header > * { pointer-events: auto; }
.home-btn { display: block; text-align: left; font-size: 14px; line-height: 1.25; letter-spacing: -0.035em; border-radius: 6px; transition: opacity .15s; }
@media (hover: hover) { .home-btn:hover { opacity: .7; } }
.home-btn p { margin: 0; }
.home-btn .name { font-weight: 500; }
.home-btn .role { opacity: .5; }
.actions { position: relative; display: flex; align-items: center; gap: 8px; }
.slot { transition: opacity .2s, visibility .2s; }
.slot[aria-hidden="true"] { opacity: 0; visibility: hidden; pointer-events: none; }
.hint-wrap { position: relative; display: block; }
.hide-mobile { display: none; }
@media (min-width: 768px) { .hide-mobile { display: block; } }
.chip {
  border-radius: 999px; padding: 6px 14px; font-size: 14px; line-height: 20px; letter-spacing: -0.025em;
  background: var(--fg-5); color: var(--fg-90);
  will-change: scale; transition: color .15s ease-out, background-color .15s ease-out, scale .15s ease-out;
}
@media (hover: hover) { .chip:hover { scale: 1.07; background: var(--fg-10); } }
.chip:not(:disabled):active, .chip.pressed { scale: .96; }
.chip.about { width: 66px; padding-left: 0; padding-right: 0; text-align: center; }
.chip[aria-pressed="true"] { background: var(--foreground); color: var(--background); }
.chip:focus-visible, .home-btn:focus-visible, .inline-link:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in oklab, var(--foreground) 40%, transparent); }
.kbd {
  position: absolute; top: 100%; z-index: 70; margin-top: 8px; margin-left: -10px;
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  border-radius: 4px; border: 1px solid color-mix(in oklab, var(--background) 10%, transparent);
  background: color-mix(in oklab, var(--foreground) 80%, transparent); color: color-mix(in oklab, var(--background) 90%, transparent);
  font: 14px/10px ui-monospace, SFMono-Regular, Menlo, monospace; pointer-events: none;
  opacity: 0; translate: 0 -3px; transition: opacity .15s ease-out;
}
.kbd.on { opacity: 1; translate: 0 0; transition: opacity .1s var(--ease-out), translate .1s var(--ease-out); }
.kbd.unparked { translate: 0 0; }
.kbd.instant { transition: none; }

/* ---------- stage ---------- */
#stage {
  position: absolute; inset: 0; z-index: 10; overflow: hidden; user-select: none; -webkit-user-select: none;
  touch-action: none; cursor: grab; overscroll-behavior: contain;
}
#stage.reading { overflow-y: auto; touch-action: pan-y; cursor: default; }
#veil { position: fixed; inset: 0; z-index: 20; opacity: 0; pointer-events: none; background: var(--background); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
#ind { position: absolute; left: 0; top: 0; z-index: 60; opacity: 0; pointer-events: none; will-change: transform, opacity; }
#layer { position: absolute; inset: 0; overflow: clip; }

.card {
  position: absolute; left: 0; top: 0; overflow: hidden; isolation: isolate; outline: none;
  background: var(--background); border-radius: 12px;
  box-shadow: 0 0 0 1px var(--fg-10);
  width: 0; height: 0; visibility: hidden; transform: translate3d(-9999px,-9999px,0);
  container-type: inline-size; will-change: transform, opacity; contain: layout paint;
}
.card.is-about { border-radius: 24px; }
.card.is-open { box-shadow: 0 0 0 1px var(--fg-10), 0 1px 2px rgba(0,0,0,.04), 0 16px 40px -12px rgba(0,0,0,.14); }
.card img.fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; -webkit-user-drag: none; }

/* media (poster + lazy video + scrubber) */
.media { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--fg-5); border-radius: var(--r-media); clip-path: inset(0 round var(--r-media)); }
.media img, .media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media video { opacity: 0; transition: opacity .5s; }
.media video.on { opacity: 1; }
.scrub { position: absolute; left: 16px; right: 16px; bottom: 0; z-index: 20; height: 32px; padding-bottom: 16px; display: flex; align-items: flex-end; opacity: 0; pointer-events: none; transition: opacity .3s ease-out; touch-action: none; }
/* progress bars (hero and every other video) show with the pause button: on hover, on keyboard focus,
   and always on touch screens. The hero's bar also waits for its card to be open (.on). */
@media (hover: hover) { .vid-host:hover > .scrub.on, .vid-host:hover > .scrub.vs { opacity: 1; pointer-events: auto; cursor: pointer; } }
@media (hover: none) { .scrub.on, .scrub.vs { opacity: 1; pointer-events: auto; cursor: pointer; } }
.vid-host:focus-within > .scrub.on, .vid-host:focus-within > .scrub.vs { opacity: 1; pointer-events: auto; }
.scrub:focus-visible { outline: none; }
.scrub:focus-visible .track { box-shadow: 0 0 0 2px rgb(255 255 255 / .75); } /* on-media */
.scrub .track { height: 4px; width: 100%; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.2); } /* on-media */
.scrub .fill { height: 100%; width: 0; border-radius: 99px; background: rgba(255,255,255,.75); } /* on-media */

/* placeholder plate for work without media */
.plate { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 16px; }
.plate .kicker { font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; letter-spacing: .14em; opacity: .45; }
.plate .t { font-size: clamp(16px, 6cqw, 40px); font-weight: 500; letter-spacing: -0.04em; line-height: 1.05; }

/* typographic card (writing / experiments) */
.typo { display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; padding: 16px; background: color-mix(in oklab, var(--foreground) 4%, transparent); }
.typo .kicker { margin: 0; font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; letter-spacing: .14em; opacity: .4; }
.typo .t { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(18px, 5.5cqw, 44px); line-height: 1.05; }
.typo .x { margin: 6px 0 0; font-size: 12px; line-height: 1.375; opacity: .5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- reading sheet ---------- */
#sheet { position: relative; z-index: 30; padding-bottom: 160px; opacity: 0; user-select: text; -webkit-user-select: text; will-change: opacity; }
#sheet header, #sheet .spring-prose { max-width: 398px; margin: 0 auto; padding: 0 4px; text-align: left; }
@media (min-width: 768px) { #sheet header, #sheet .spring-prose { padding: 0 8px; } }
#sheet h1 { margin: 8px 0 0; font-size: 20px; font-weight: 500; line-height: 30px; letter-spacing: -0.02em; }
#sheet .meta { margin: 12px 0 0; font-size: 16px; line-height: 24px; letter-spacing: -0.02em; opacity: .55; }
#sheet .lede { margin: 48px 0 0; font-size: 16px; line-height: 1.7; letter-spacing: -0.02em; opacity: .8; text-wrap: pretty; }
#sheet .updated { margin: 16px 0 0; font-size: 16px; line-height: 1.7; letter-spacing: -0.02em; opacity: .8; }
#sheet .cta { margin-top: 24px; }
#sheet .spring-prose { margin-top: 48px; }
#sheet.about .spring-prose { margin-top: 32px; }

.inline-link { cursor: pointer; border-radius: 4px; text-decoration: underline; text-decoration-color: var(--foreground); text-underline-offset: 3px; color: inherit; font-size: inherit; }
.cta .inline-link { font-size: 16px; line-height: 1.7; letter-spacing: -0.02em; }

.spring-prose p, .spring-prose li { margin: 0 0 24px; font-size: 16px; line-height: 1.7; letter-spacing: -0.02em; opacity: .8; text-wrap: pretty; }
.spring-prose ul, .spring-prose ol { margin: 0 0 24px; }
.spring-prose li { margin-bottom: 8px; }
.spring-prose h2 { margin: 72px 0 24px; font-size: 18px; font-weight: 500; line-height: 1.7; letter-spacing: -0.02em; }
.spring-prose h3 { margin: 0 0 24px; font-size: 16px; font-weight: 600; line-height: 1.7; letter-spacing: -0.02em; }
.spring-prose blockquote { margin: 0 0 24px; padding: 0 0 0 16px; border-left: 2px solid var(--foreground); opacity: .7; }
.spring-prose blockquote p { margin: 0; font-size: 15px; font-style: italic; }
.spring-prose hr { border: 0; border-top: 2px solid var(--foreground); width: 48px; margin: 32px auto 56px; }
.spring-prose img, .spring-prose video { display: block; width: min(560px, 100vw - 32px); max-width: none; margin: 48px 0 72px 50%; transform: translateX(-50%); border-radius: var(--r-media); cursor: zoom-in; }
.spring-prose .socials { display: flex; gap: 24px; }

/* block-by-block reveal */
.rv { will-change: opacity, transform, filter; }
.spring-prose > .rv:not(.rv-in), header > .rv:not(.rv-in) { opacity: 0; filter: blur(6px); transform: translateY(12px); }
.rv.rv-in { transition: opacity .6s var(--spring), transform .6s var(--spring), filter .6s var(--spring); }
@media (prefers-reduced-motion: reduce) { .rv.rv-in { transition: none; } }

/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 90; cursor: zoom-out; touch-action: none; user-select: none; }
.lightbox .bd { position: absolute; inset: 0; background: color-mix(in srgb, var(--background) 92%, transparent); opacity: 0; }
.lightbox .fr { position: absolute; left: 0; top: 0; overflow: hidden; background: color-mix(in srgb, var(--foreground) 6%, var(--background)); will-change: transform, width, height; }
.lightbox .fr img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- toast ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- section index sidebar (mosadiq-style) ---------- */
.sidx {
  position: fixed; top: 80px; left: 24px; z-index: 55; width: 256px;
  display: none; flex-direction: column; gap: 16px;
  font: 14px/1.5 var(--sans); letter-spacing: -0.01em;
  color: color-mix(in oklab, var(--foreground) 42%, transparent);
  transition: opacity .2s ease-out;
}
@media (min-width: 1024px) { .sidx { display: flex; } }
.sidx-slot { height: 40px; margin-bottom: 8px; display: flex; align-items: center; }
.sidx-back {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: 999px;
  background: var(--fg-5); color: var(--fg-90); font-size: 14px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s ease-out, transform .15s ease-out, visibility .15s, background-color .15s;
}
.sidx-back svg { width: 14px; height: 14px; }
@media (hover: hover) { .sidx-back:hover { background: var(--fg-10); } }
.sidx-slot.show .sidx-back { opacity: 1; visibility: visible; transform: none; }
.sidx-list {
  position: relative; list-style: none; margin: 0; padding: 0 8px 0 0;
  display: flex; flex-direction: column; gap: 2px; overflow-y: auto; max-height: calc(100vh - 8rem);
  scrollbar-width: none;
}
.sidx-list::-webkit-scrollbar { display: none; }
.sidx-bar {
  position: absolute; left: 0; top: 0; width: 2px; height: 12px; border-radius: 999px;
  background: color-mix(in oklab, var(--foreground) 80%, transparent); pointer-events: none; will-change: transform;
}
.sidx-item {
  width: 100%; text-align: left; padding: 4px 8px; border-radius: 6px; color: inherit;
  transition: color 75ms;
}
.sidx-item.sub { padding-left: 32px; }
.sidx-item.on { color: var(--foreground); }
@media (hover: hover) { .sidx-item:hover { color: var(--foreground); } }
.sidx-item:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in oklab, var(--foreground) 40%, transparent); }
.sidx-row { display: flex; align-items: center; gap: 6px; }
.sidx-glyphs { position: relative; top: 1px; display: flex; gap: 4px; opacity: .8; flex-shrink: 0; }
.sidx-item.on .sidx-glyphs { opacity: 1; }
.sidx-glyphs svg { width: 12px; height: 12px; }
.sidx-glyphs.pop { animation: sidx-pop .28s ease-out; }
@keyframes sidx-pop { 50% { transform: scale(1.15) rotate(-6deg); } }

/* ---------- case-study blocks (built from case-studies/*.md) ---------- */
.cs-facts { margin: 0 0 48px; display: grid; gap: 14px; padding: 20px 0; border-top: 1px solid var(--fg-10); border-bottom: 1px solid var(--fg-10); }
.cs-facts div { display: grid; grid-template-columns: 88px 1fr; gap: 12px; }
.cs-facts dt { font: 11px/1.9 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; letter-spacing: .08em; opacity: .45; }
.cs-facts dd { margin: 0; font-size: 14px; line-height: 1.6; opacity: .85; }
.cs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 24px 20px; margin: 8px 0 40px; }
.cs-stats > div { display: flex; flex-direction: column; gap: 8px; }
.cs-stat-n { font-size: 40px; line-height: 1.05; font-weight: 500; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.cs-stat-l { font-size: 14px; line-height: 1.45; opacity: .62; text-wrap: pretty; }
.cs-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0 40px; }
.cs-compare > div { padding: 16px 16px 18px; border-radius: 12px; background: var(--fg-5); }
.cs-compare > div:last-child { background: color-mix(in oklab, var(--foreground) 9%, transparent); }
.cs-cmp-k { display: block; margin-bottom: 8px; font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; letter-spacing: .08em; opacity: .5; }
.cs-compare p { margin: 0 !important; font-size: 14px !important; line-height: 22px !important; }
@media (max-width: 520px) { .cs-compare { grid-template-columns: 1fr; } }
.spring-prose blockquote { opacity: 1; }
.spring-prose blockquote p { font-size: 17px; font-style: normal; line-height: 1.55; opacity: .9; }
.spring-prose blockquote cite { display: block; margin-top: 8px; font-size: 13px; font-style: normal; opacity: .55; }
.spring-prose figure { width: min(560px, 100vw - 32px); margin: 40px 0 56px calc(50% - min(560px, 100vw - 32px) / 2); }
.spring-prose figure img { width: 100%; margin: 0; transform: none; border-radius: var(--r-media); }
.spring-prose figcaption { margin-top: 10px; font-size: 13px; line-height: 1.5; opacity: .55; }
.spring-prose ol { padding-left: 20px; }
.spring-prose code { font: .9em ui-monospace, SFMono-Regular, Menlo, monospace; }
mark.verify {
  background: var(--verify-bg); color: inherit; border-radius: 4px; padding: 0 4px;
  font: 11px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0; white-space: normal; opacity: 1;
}

/* ---------- home cards: Collins sizing, Molly captions ---------- */
.card:not(.is-about) { border-radius: var(--r-media); }
.card .plate { padding: 0; }
.cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding: 0 7cqw 8cqw; pointer-events: none;
  transition: opacity .25s ease-out;
}
.cap p { margin: 0; font-size: clamp(15px, 5.1cqw, 22px); line-height: 1.5; letter-spacing: -0.015em; text-wrap: pretty; }
.cap strong { display: block; font-weight: 600; }
.cap .desc { display: block; font-weight: 400; opacity: .68; }
.cap .expand { flex-shrink: 0; display: flex; margin-bottom: .55em; opacity: .9; }
.cap.on-art { color: #fff; padding-top: 30cqw; background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0)); } /* on-media */
.cap.on-art .desc { opacity: .78; }
/* the caption belongs to the card, not the opened hero */
.card.is-open .cap { opacity: 0; }

/* =====================================================================
   Typography matched to mosadiq.com
   System font, weight 400 everywhere, normal tracking.
   Hierarchy comes from colour: black headings, grey body, zinc labels.
   ===================================================================== */
:root {
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --background: #ffffff;
  --foreground: #000000;
  --ink: #000000;      /* titles, headings, links */
  --ink-2: #5d5d5d;    /* body copy */
  --ink-3: #71717a;    /* labels, meta */
  --ink-4: #a1a1aa;    /* dates, faint meta */
  --underline: rgba(208, 208, 208, .53);
  /* surfaces: every fill a component uses comes from here, so dark mode only has to swap these */
  --surface-1: #f6f6f6;        /* quiet controls: back buttons */
  --surface-2: #eaeaea;        /* avatar placeholders */
  --surface-sunken: #fafafa;   /* inset panels: project-panel accordions */
  --surface-panel: var(--background); /* floating panels: team sheet */
  --tile: #dadce3;             /* client logo tiles (stay light in both modes) */
  --tile-line: rgb(33 44 80 / .25);
  --success-bg: #dcfce7;
  --success-fg: #15803d;
  --img-outline: oklch(0 0 0 / .1);  /* 1px edge on content images */
  --verify-bg: color-mix(in oklab, #f5b041 28%, transparent); /* local-only draft flags */
  --heart: #ff2d55;            /* heart counter, liked */
  --on-heart: #ffffff;
}
:root.dark {
  --background: #121212;
  --foreground: #ffffff;
  --ink: #ffffff;
  --ink-2: #d5d5d5;
  --ink-3: #a1a1aa;
  --ink-4: #71717a;
  --underline: rgba(255, 255, 255, .25);
  --surface-1: #1f1f1f;
  --surface-2: #262626;
  --surface-sunken: #161616;
  --surface-panel: #0f0f0f;
  --tile: #dadce3;
  --tile-line: rgb(255 255 255 / .15);
  --success-bg: #14321f;
  --success-fg: #4ade80;
  --img-outline: oklch(1 0 0 / .1);
  --heart: #ff375f;
  --on-heart: #ffffff;
}
body, .spring-type, .sidx, button { font-family: var(--sans); letter-spacing: normal; }

/* header */
.home-btn { font-size: 14px; line-height: 1.625; letter-spacing: -0.025em; }
.home-btn .name { font-weight: 400; color: var(--ink); }
.home-btn .role { opacity: 1; font-size: 12.8px; line-height: 1.6; letter-spacing: normal; color: var(--ink-3); }
.chip { letter-spacing: normal; }

/* card captions keep the Molly treatment, on the system font */
.cap p { letter-spacing: normal; }

/* reading sheet */
#sheet h1 { margin: 8px 0 0; font-size: 18px; font-weight: 400; line-height: 1.625; letter-spacing: normal; color: var(--ink); }
#sheet .meta { margin: 4px 0 0; font-size: 14px; line-height: 1.6; letter-spacing: normal; opacity: 1; color: var(--ink-3); }
#sheet .lede, #sheet .updated { margin-top: 28px; font-size: 16px; line-height: 28px; letter-spacing: normal; opacity: 1; color: var(--ink-2); }
.spring-prose p, .spring-prose li { font-size: 16px; line-height: 28px; letter-spacing: normal; opacity: 1; color: var(--ink); }
.spring-prose li { line-height: 26px; }
.spring-prose h2 { margin: 64px 0 12px; font-size: 18px; font-weight: 500; line-height: 28px; letter-spacing: normal; color: var(--ink); }
.spring-prose h3 { margin: 36px 0 8px; font-size: 16px; font-weight: 500; line-height: 24px; letter-spacing: normal; color: var(--ink); }
.spring-prose strong { font-weight: 500; color: var(--ink); }
.spring-prose blockquote { border-left-color: var(--underline); }
.spring-prose blockquote p { font-size: 16px; line-height: 28px; color: var(--ink); }
.spring-prose blockquote cite { font-size: 14px; line-height: 22px; opacity: 1; color: var(--ink-3); }
.spring-prose figcaption { font-size: 14px; line-height: 22px; opacity: 1; color: var(--ink-3); }

/* links: black text, faint underline */
.inline-link { color: var(--ink); text-decoration-color: var(--underline); text-decoration-thickness: 1px; text-underline-offset: 2px; transition: text-decoration-color .15s; }
@media (hover: hover) { .inline-link:hover { text-decoration-color: currentColor; } }

/* case-study blocks */
.cs-facts { border-color: color-mix(in oklab, var(--foreground) 8%, transparent); }
.cs-facts dt { font: 400 12.8px/1.75 var(--sans); text-transform: none; letter-spacing: normal; opacity: 1; color: var(--ink-3); }
.cs-facts dd { font-size: 14px; line-height: 1.6; opacity: 1; color: var(--ink); }
.cs-stat-n { font-weight: 400; letter-spacing: -0.02em; color: var(--ink); }
.cs-stat-l { font-size: 14px; line-height: 22px; opacity: 1; color: var(--ink-2); }
.cs-cmp-k { font: 500 12px/18px var(--sans); text-transform: uppercase; letter-spacing: .05em; opacity: 1; color: var(--ink-3); }
.cs-compare p { color: var(--ink) !important; }
mark.verify { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* =====================================================================
   Home page as a document (jakub.kr structure) with the Collins card row
   ===================================================================== */
html, body { height: auto; }
body { overflow-x: hidden; overflow-y: auto; }
html.reading-lock, html.reading-lock body { overflow: hidden; }

.page { width: min(644px, 100% - 40px); margin: 0 auto; padding: 96px 0 120px; position: relative; z-index: 1; }
.pg-who { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.pg-avatar { position: relative; flex-shrink: 0; width: 40px; height: 40px; border-radius: 999px; overflow: clip; }
/* drawn at 46px inside the 40px circle (as in the Paper design), scaled from the centre */
.pg-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; scale: 1.15; }
.pg-avatar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.1); pointer-events: none; }
.pg-name { margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); }
.pg-role { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.pg-p { margin: 0 0 16px; font-size: 16px; line-height: 26px; color: var(--ink-2); text-wrap: pretty; }
.pg-section { margin-top: 88px; }
.pg-label { margin: 0 0 4px; font-size: 16px; line-height: 26px; font-weight: 500; color: var(--ink); }
.pg-sub { margin: 0; font-size: 16px; line-height: 26px; color: var(--ink-3); }
.pg-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
/* the row is anchored here; cards are drawn by the stage on top */
#shelf { position: relative; margin-top: 4px; touch-action: pan-y; cursor: grab; }

/* the stage floats above the page and only catches the cards until one is opened */
#stage { position: fixed; inset: 0; pointer-events: none; overscroll-behavior: auto; touch-action: auto; cursor: auto; }
#stage.reading { pointer-events: auto; overscroll-behavior: contain; touch-action: pan-y; }
.card { pointer-events: auto; cursor: grab; touch-action: pan-y; }
.card.is-open { cursor: default; }

/* the old fixed header (name/role, About) is retired: the page intro carries the name,
   and the sidebar's Back button, Escape or a click outside close a card */
.site-header { display: none !important; }
@media (max-width: 767px) { .page { padding-top: 64px; } .pg-section { margin-top: 64px; } }

/* ---------- back button (mosadiq): above the hero, then in the sidebar ---------- */
#sheet { position: relative; }
.cs-back, .sidx-back {
  width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid transparent; background: var(--surface-1); color: var(--ink-2);
  transition: color .1s ease-out, opacity 75ms ease-out, scale .15s ease-out;
}
@media (hover: hover) { .cs-back:hover, .sidx-back:hover { color: var(--ink); background: var(--surface-1); } }
.cs-back:focus-visible, .sidx-back:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in oklab, var(--foreground) 40%, transparent); }
.cs-back { position: absolute; left: 0; top: 64px; }
/* when the sidebar copy is showing, the inline one steps aside (sidebar exists ≥1024px only) */
@media (min-width: 1024px) { .cs-back.away { opacity: 0; pointer-events: none; } }
.sidx-back { gap: 0; transform: none; }
.sidx-slot .sidx-back { opacity: 0; visibility: hidden; transition: opacity 75ms ease-out, visibility 75ms, color .1s ease-out, scale .15s ease-out; }
.sidx-slot.show .sidx-back { opacity: 1; visibility: visible; transform: none; }

/* ---------- previous / next project (mosadiq) ---------- */
.pn { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 64px; padding: 32px 0 96px; }
.pn-link { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 16px; margin: 0 -12px; border-radius: 12px; opacity: .85; text-decoration: none; color: inherit; transition: opacity .15s; }
@media (hover: hover) { .pn-link:hover { opacity: 1; } }
.pn-link:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in oklab, var(--foreground) 40%, transparent); }
.pn-text { display: flex; flex-direction: column; min-width: 0; }
.pn-next .pn-text { align-items: flex-end; text-align: right; }
.pn-kicker { margin-bottom: 2px; font-size: 12px; line-height: 18px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.pn-title { font-size: 16px; line-height: 24px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s; }
@media (hover: hover) { .pn-link:hover .pn-title { color: var(--ink); } }
.pn-chev { flex-shrink: 0; display: flex; width: 20px; height: 20px; color: var(--ink-4); transition: color .2s; }
.pn-chev svg { width: 20px; height: 20px; }
@media (hover: hover) { .pn-link:hover .pn-chev { color: var(--ink-2); } }
@media (max-width: 767px) {
  .pn { flex-direction: column; align-items: stretch; gap: 16px; margin-top: 24px; padding: 16px 0 64px; }
  .pn-next { justify-content: flex-end; }
}

/* opened hero matches the Paper spec's 12px corners (cards on the row stay at 16px) */
.card:not(.is-about) { transition: border-radius .35s ease-out; }
.card.is-open:not(.is-about) { border-radius: var(--r-media); }

/* =====================================================================
   12-column grid (≥1200px; mirrors GRID in app.js)
   Case study: hero cols 4–10, body text 4 columns centered under it. Home column: cols 5–8.
   The grid stops widening once 7 columns = 880px (the hero spec).
   ===================================================================== */
:root {
  --g-margin: 24px; --g-gutter: 24px;
  --g-max: calc((880px - 6 * var(--g-gutter)) / 7 * 12 + 11 * var(--g-gutter) + 2 * var(--g-margin));
  --g-col: calc((min(100vw, var(--g-max)) - 2 * var(--g-margin) - 11 * var(--g-gutter)) / 12);
  --g-span4: calc(4 * var(--g-col) + 3 * var(--g-gutter));
}
.page { width: min(440px, 100% - 40px); }
@media (min-width: 1200px) { .page { width: var(--g-span4); } }

/* the sheet's header and prose take the body width, centered under the hero */
#sheet header, #sheet .spring-prose { width: var(--body-w, 100%); max-width: 100%; margin-left: auto; margin-right: auto; padding: 0; }
/* media inside the write-up spans the hero's 7 columns */
#sheet .spring-prose { --bleed: calc((var(--body-w, 100%) - var(--hero-w, 100%)) / 2); }
#sheet .spring-prose figure { width: var(--hero-w, 100%); margin: 40px 0 56px var(--bleed); }
#sheet .spring-prose > img, #sheet .spring-prose > video, #sheet .spring-prose > p > img { width: var(--hero-w, 100%); margin: 48px 0 72px var(--bleed); transform: none; }

/* ---------- byline → team panel (after newmaterial.ai stories) ---------- */
.by { margin-top: 20px; }
.by-line {
  display: inline-flex; align-items: center; flex-wrap: wrap; max-width: 100%; max-height: var(--line-h, 80px); margin: 0; padding: 0;
  font-size: 14px; line-height: 22px; color: var(--ink-3); text-align: left; transform-origin: top left;
  transition: transform .4s var(--pp-spring), opacity .25s ease-out, max-height .6s var(--pp-spring);
}
button.by-line { cursor: pointer; }
@media (hover: hover) { button.by-line:hover .by-me, button.by-line:hover .by-chev { color: var(--ink); } }
button.by-line:focus-visible { outline: none; border-radius: 6px; box-shadow: 0 0 0 2px color-mix(in oklab, var(--foreground) 40%, transparent); }
.by-me { color: var(--ink); transition: color .15s; }
.by-av {
  position: relative; display: inline-grid; place-items: center; flex-shrink: 0; width: var(--s); height: var(--s);
  border-radius: 999px; overflow: hidden; background: var(--surface-2); color: var(--ink-3);
  font-size: calc(var(--s) * .4); font-weight: 500; letter-spacing: -0.02em; line-height: 1;
  box-shadow: 0 0 0 1.5px var(--background);
}
.by-av img { width: 100%; height: 100%; object-fit: cover; }
.by-line > .by-av { margin-left: 2px; }
.by-dot { display: inline-block; width: 4px; height: 4px; margin: 0 8px; border-radius: 999px; background: currentColor; opacity: .25; }
.by-stack { display: inline-flex; }
.by-stack .by-av + .by-av { margin-left: -4px; }
.by-chev { display: inline-flex; width: 16px; height: 16px; margin-left: 4px; color: var(--ink-4); transition: color .15s, transform .15s; }
@media (hover: hover) { button.by-line:hover .by-chev { transform: translateX(1px); } }
.by.open .by-line { transform: scale(.95); opacity: 0; max-height: 0; pointer-events: none; }

/* the panel spans the hero's columns even though the header sits on the body column */
.by-sheet {
  width: var(--hero-w, 100%); margin-left: calc((var(--body-w, 100%) - var(--hero-w, 100%)) / 2); overflow: hidden;
  background: var(--surface-panel); border: 1px solid color-mix(in oklab, var(--foreground) 6%, transparent); border-radius: 28px;
  box-shadow: 0 2px 16px rgba(0,0,0,.02);
  opacity: 0; transition: height .6s var(--pp-spring), opacity .35s ease-out;
}
.by.open .by-sheet { opacity: 1; }
/* content rides the panel's fade and settles from 98% (no delay, no slide) */
.by-in { transform: scale(.98); transform-origin: 50% 0; transition: transform .6s var(--pp-spring); }
.by.open .by-in { transform: none; }
.by-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 16px 23px; }
.by-title { font-size: 16px; line-height: 24px; color: var(--ink); }
.by-x { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; color: var(--ink-2); background: color-mix(in oklab, var(--foreground) 6%, transparent); transition: background-color .15s, color .15s, scale .15s ease-out; }
@media (hover: hover) { .by-x:hover { color: var(--ink); background: color-mix(in oklab, var(--foreground) 10%, transparent); } }
.by-x:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in oklab, var(--foreground) 40%, transparent); }
.by-x svg { width: 16px; height: 16px; }
.by-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 10px 10px; }
.by-p { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 12px 12px; border-radius: 16px; text-align: center; }
.by-p::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: color-mix(in oklab, var(--foreground) 3%, transparent); opacity: 0; transform: scale(.75); transition: opacity .2s, transform .2s var(--ease-out); }
@media (hover: hover) { .by-p:hover::before { opacity: 1; transform: none; } }
.by-pt { display: flex; flex-direction: column; align-items: center; min-width: 0; max-width: 100%; }
.by-pn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 20px; color: var(--ink); }
.by-pr { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; font-size: 14px; line-height: 20px; color: var(--ink-3); }
.by-chip { padding: 1px 7px 2px; border: 1.5px solid color-mix(in oklab, var(--foreground) 12%, transparent); border-radius: 999px; font-size: 12px; line-height: 15px; }
@media (max-width: 900px) { .by-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .by-grid { grid-template-columns: 1fr; }
  .by-p { flex-direction: row; align-items: center; gap: 14px; text-align: left; padding: 8px 12px; }
  .by-pt, .by-pr { align-items: flex-start; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .by-line, .by-sheet, .by-in { transition: none !important; } }

/* ---------- project pill → project panel (after newmaterial.ai stories) ---------- */
.by.pp { margin-top: 4px; }
.pp-line { font-size: 14px; line-height: 22px; }
.pp-line .by-dot { margin: 0 8px; }
.pp-year { color: var(--ink-3); }
.pp-name { display: inline-flex; align-items: center; min-width: 0; }
.pp-mark { display: inline-grid; place-items: center; flex-shrink: 0; width: 18px; height: 18px; margin-right: 6px; border-radius: 999px; overflow: hidden; color: var(--ink-2); font-size: 10px; font-weight: 600; line-height: 1; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--foreground) 6%, transparent); }
.pp-mark img { width: 100%; height: 100%; object-fit: cover; }
.pp-prod { color: var(--ink); transition: color .15s; }
.pp-with { white-space: pre; color: var(--ink-3); }
@media (hover: hover) { button.pp-line:hover .pp-with { color: var(--ink-2); } }
.by-head .pp-name { font-size: 16px; line-height: 24px; }
.by-head .pp-mark { width: 22px; height: 22px; font-size: 11px; }

.pp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 32px; padding: 0 18px 18px; }
.pp-grid.solo { grid-template-columns: 1fr; }
.pp-left { display: flex; flex-direction: column; padding-left: 5px; min-width: 0; }
.pp-rows { margin: 0; }
.pp-rows > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; }
.pp-rows dt { flex-shrink: 0; font-size: 14px; line-height: 20px; color: var(--ink-3); }
.pp-rows dd { margin: 0; font-size: 14px; color: var(--ink); text-align: right; }
.pp-links { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 4px; }
.pp-links a { display: inline-flex; gap: 4px; width: fit-content; font-size: 14px; line-height: 22px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--underline); text-underline-offset: 3px; transition: opacity .15s; }
@media (hover: hover) { .pp-links a:hover { opacity: .5; } }
.pp-arrow { text-decoration: none; color: var(--ink-3); }
.pp-right { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pp-acc { border-radius: 8px; background: var(--surface-sunken); }
.pp-acc-h { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 4px 10px 12px; border-radius: 8px; font-size: 14px; line-height: 20px; color: var(--ink); text-align: left; }
.pp-acc-h:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in oklab, var(--foreground) 40%, transparent); }
.pp-acc-i { display: inline-flex; width: 24px; height: 24px; padding: 4px; color: var(--ink-4); transition: transform .25s var(--ease-out); }
.pp-acc.on .pp-acc-i { transform: rotate(-90deg); }
.pp-acc-b { padding: 0 16px 12px 12px; }
.pp-acc-b p { margin: 0; font-size: 14px; line-height: 22px; color: var(--ink-2); text-wrap: pretty; }
@media (max-width: 640px) {
  .by-sheet { border-radius: 20px; } /* 8px accordions + 10px inset + 1px border, so the corners stay parallel */
  .pp-grid { grid-template-columns: 1fr; padding: 0 10px 10px; }
  .pp-left { padding: 0 8px; }
}
.pp-rows > div { padding-block: 10px; min-height: 44px; }
.pp-rows dd { max-width: 65%; line-height: 20px; text-wrap: pretty; }

/* ---------- write-up videos ---------- */
.spring-prose figure video { display: block; width: 100%; height: auto; margin: 0; transform: none; cursor: default; border-radius: var(--r-media); background: var(--fg-5); }
#sheet .spring-prose > figure.cs-video { width: var(--hero-w, 100%); margin: 40px 0 56px var(--bleed); }

/* ---------- body media on the grid ----------
   a single figure sits on the body column (4 cols); consecutive figures form a
   side-by-side row across the hero's 7 columns with a 16px gap */
#sheet .spring-prose figure,
#sheet .spring-prose > figure.cs-video { width: 100%; margin: 40px 0 48px; }
#sheet .spring-prose > img, #sheet .spring-prose > video, #sheet .spring-prose > p > img { width: 100%; margin: 40px 0 48px; }
#sheet .spring-prose .cs-row { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 16px; align-items: start;
  width: var(--hero-w, 100%); margin: 40px 0 48px var(--bleed); }
#sheet .spring-prose .cs-row[data-n="3"] { --n: 3; }
#sheet .spring-prose .cs-row figure { margin: 0; }
@media (max-width: 600px) { #sheet .spring-prose .cs-row { grid-template-columns: 1fr; gap: 24px; } }

/* case study title */
#sheet h1 { margin: 8px 0 0; font-size: 24px; font-weight: 400; line-height: 28px; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
#sheet header > .by.pp { margin-top: 8px; }

/* body media: single figures and side-by-side rows both span 6 columns, centered */
#sheet .spring-prose { --media-bleed: calc((var(--body-w, 100%) - var(--media-w, 100%)) / 2); }
#sheet .spring-prose > figure, #sheet .spring-prose > figure.cs-video,
#sheet .spring-prose .cs-row { width: var(--media-w, 100%); max-width: none; margin: 40px 0 48px var(--media-bleed); }
#sheet .spring-prose .cs-row figure { width: auto; margin: 0; }

/* ---------- slideshow + Pasito stepper (joshpuckett.me/pasito, ported to plain CSS) ---------- */
.pasito-container {
  --pill-dot-size: 8px; --pill-active-width: 24px; --pill-gap: 6px; --pill-duration: .5s; --pill-easing: var(--ease-out);
  --pill-bg: #0000001f; --pill-active-bg: #000c; --pill-fill-bg: #ffffff73; --pill-container-bg: #0000000a; --pill-container-radius: 999px; --pill-container-border: #0000000f;
  display: inline-flex; overflow: hidden; padding: 6px 10px; background: var(--pill-container-bg); border: 1px solid var(--pill-container-border); border-radius: var(--pill-container-radius);
}
.pasito-track { display: flex; align-items: center; margin-left: calc(-1 * var(--pill-gap)); transition: transform var(--pill-duration) var(--pill-easing); }
.pasito-step {
  position: relative; overflow: hidden; flex-shrink: 0; width: var(--pill-dot-size); height: var(--pill-dot-size); margin: 0 0 0 var(--pill-gap); padding: 0;
  border: 0; border-radius: 999px; background: var(--pill-bg); cursor: pointer; transform-origin: 50% center;
  transition: width var(--pill-duration) var(--pill-easing), height var(--pill-duration) var(--pill-easing), background var(--pill-duration) var(--pill-easing), opacity var(--pill-duration) var(--pill-easing), transform var(--pill-duration) var(--pill-easing);
}
.pasito-step:focus-visible { outline: 2px solid rgba(255,255,255,.7); outline-offset: 2px; } /* on-media */
.pasito-step-active { width: var(--pill-active-width); background: var(--pill-active-bg); }
.pasito-step::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--pill-fill-bg); pointer-events: none; }
.pasito-step-filling::after { width: 100%; transition: width var(--pill-fill-duration, 3s) linear; }

.cs-slides { position: relative; }
.sl-view { position: relative; overflow: hidden; border-radius: var(--r-media); touch-action: pan-y; background: var(--fg-5); }
.sl-track { display: flex; transition: transform .6s var(--spring); will-change: transform; }
.sl-slide { flex: 0 0 100%; min-width: 0; }
.cs-slides .sl-slide img { display: block; width: 100%; height: auto; margin: 0; transform: none; border-radius: 0; cursor: default; }
/* floating controls, like Pasito's carousel demo */
/* controls drawn like the video controls: bare white glyphs with a soft shadow, no plates,
   centred on the same line as a video's progress bar (18px up) */
.sl-ctrl { position: absolute; left: 50%; bottom: 8px; z-index: 2; display: flex; align-items: center; gap: 6px; transform: translateX(-50%); filter: drop-shadow(0 1px 3px rgb(0 0 0 / .4)); }
.sl-stepper { --pill-dot-size: 8px; --pill-active-width: 26px; --pill-gap: 8px; --pill-bg: rgba(255,255,255,.55); --pill-active-bg: #fff; --pill-container-bg: transparent; --pill-container-border: transparent; height: 32px; padding: 0 6px; align-items: center; } /* on-media */
.sl-stepper.sl-autoplay { --pill-active-bg: rgba(255,255,255,.45); --pill-fill-bg: #fff; } /* on-media */
.sl-arrow { position: relative; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; color: rgba(255,255,255,.85); opacity: 0; transition: opacity .3s ease-out, color .15s ease-out, scale .15s ease-out; } /* on-media */
.sl-arrow::before { content: ""; position: absolute; inset: -8px; } /* 44px target */
/* arrows show on hover (and on keyboard focus, and always on touch screens); the dots stay */
@media (hover: hover) { .sl-view:hover .sl-arrow { opacity: 1; } .sl-arrow:hover { color: #fff; } } /* on-media */
@media (hover: none) { .sl-arrow { opacity: 1; } }
.sl-ctrl:focus-within .sl-arrow { opacity: 1; }
.sl-arrow:focus-visible { outline: 2px solid rgba(255,255,255,.75); outline-offset: 0; color: #fff; } /* on-media */
.sl-arrow svg { width: 18px; height: 18px; } .sl-arrow svg path { stroke-width: 2; }
.cs-slides figcaption { min-height: 1.5em; }
@media (prefers-reduced-motion: reduce) { .pasito-step, .pasito-track, .pasito-step-filling::after, .sl-track { transition-duration: 0s !important; } }

/* card subtitles never run past two lines */
.cap .desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }

/* ---------- before / after split slider ---------- */
.ba-view { --pos: 50%; position: relative; overflow: hidden; border-radius: var(--r-media); background: var(--fg-5); cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.cs-ba .ba-view img { display: block; width: 100%; height: auto; margin: 0; transform: none; border-radius: 0; cursor: inherit; pointer-events: none; -webkit-user-drag: none; }
.ba-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-before img { height: 100% !important; object-fit: cover; }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.12), 0 0 12px rgba(0,0,0,.12); pointer-events: none; } /* on-media */
.ba-knob { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: #fff; color: #111; box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.14); transform: translate(-50%, -50%); transition: transform .2s var(--ease-out); } /* on-media */
.ba-knob svg { width: 16px; height: 16px; }
.ba-drag .ba-knob { transform: translate(-50%, -50%) scale(1.08); }
@media (hover: hover) { .ba-view:hover .ba-knob { transform: translate(-50%, -50%) scale(1.08); } }
.ba-anim .ba-before, .ba-anim .ba-handle { transition: clip-path .6s var(--spring), left .6s var(--spring); }
.ba-tag { position: absolute; top: 12px; padding: 3px 8px; border-radius: 999px; background: rgba(0,0,0,.45); color: #fff; font-size: 12px; line-height: 18px; font-weight: 500; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none; } /* on-media */
.ba-tag-b { left: 12px; } .ba-tag-a { right: 12px; }
/* the range input stays for keyboard and screen readers; the knob is its visual */
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.ba-view:has(.ba-range:focus-visible) .ba-knob { outline: 2px solid var(--foreground); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ba-anim .ba-before, .ba-anim .ba-handle, .ba-knob { transition: none; } }

/* rows: each figure grows by its aspect ratio (--r, set by build.py), so a row shares one height */
#sheet .spring-prose .cs-row { display: flex; align-items: flex-start; }
#sheet .spring-prose .cs-row > figure { flex: var(--r, 1) 1 0; min-width: 0; }
@media (max-width: 600px) { #sheet .spring-prose .cs-row { flex-direction: column; } #sheet .spring-prose .cs-row > figure { flex: none; width: 100%; } }


/* ---------- home page lists: Side projects and Writing share one row ---------- */
.pg-list { list-style: none; margin: 4px 0 0; padding: 0; }
.pg-row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 10px 0; color: inherit; text-decoration: none; transition: opacity .15s ease-out; }
.pg-row-text { display: flex; flex-direction: column; min-width: 0; }
.pg-row-title { font-size: 16px; line-height: 24px; color: var(--ink); }
.pg-row-desc { font-size: 16px; line-height: 24px; color: var(--ink-3); text-wrap: pretty; }
.pg-row-meta { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; font-size: 16px; line-height: 24px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pg-row-arrow { display: inline-flex; width: 12px; height: 12px; }
.pg-row-arrow svg { width: 12px; height: 12px; }
/* hovering one row quiets the rest; the row you're on keeps full contrast */
@media (hover: hover) { .pg-list:has(li:hover) li:not(:hover) .pg-row { opacity: .35; } }
.pg-list:has(.pg-row:focus-visible) .pg-row:not(:focus-visible) { opacity: .35; }
.pg-row:focus-visible { outline: none; border-radius: 6px; box-shadow: 0 0 0 2px color-mix(in oklab, var(--foreground) 40%, transparent); }
@media (max-width: 520px) { .pg-row { flex-direction: column; gap: 0; } }
@media (prefers-reduced-motion: reduce) { .pg-row { transition: none; } }
/* side projects: an image box sets them apart as products; the text keeps the shared row rhythm */
.pg-row-has-media { align-items: flex-start; justify-content: flex-start; gap: 16px; }
.pg-row-has-media .pg-row-text { flex: 1; }
.pg-row-media { display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px; overflow: hidden; background: var(--fg-5); color: var(--ink-2); font-size: 14px; font-weight: 500; letter-spacing: .01em; }
.pg-row-media img { width: 100%; height: 100%; object-fit: cover; outline: 1px solid var(--img-outline); outline-offset: -1px; border-radius: inherit; }
.pg-row-has-media .pg-row-meta { align-self: flex-start; }
@media (max-width: 520px) { .pg-row-has-media { flex-direction: row; } .pg-row-has-media .pg-row-meta { display: none; } }
.pg-row-title .pg-row-arrow { margin-left: 4px; vertical-align: 1px; color: var(--ink-4); }
/* side project status pills */
.pg-pill { padding: 2px 6px; border-radius: 4px; background: var(--fg-5); color: var(--ink-3); font-size: 12px; line-height: 16px; font-weight: 500; }
.pg-pill.on { background: var(--success-bg); color: var(--success-fg); }
.pg-row-has-media .pg-row-meta { padding-top: 2px; }
@media (max-width: 520px) { .pg-row-has-media .pg-row-meta { display: inline-flex; } }

/* ---------- case study request callout (Paper: anthony-nguyen-folio / 20LZ-0) ---------- */
.spring-prose .cs-request, .prose-content .cs-request { margin: 40px 0 0; padding: 16px; border-radius: 8px; background: var(--fg-5); }
.cs-request p { margin: 0 !important; font-size: 14px !important; line-height: 22px !important; color: var(--ink-2); }
.cs-request .cs-request-t { display: flex; align-items: center; gap: 8px; margin-bottom: 4px !important; font-weight: 500; color: var(--ink); }
.cs-request .cs-request-t svg { width: 16px; height: 16px; flex-shrink: 0; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* an opened note's card: more room around the type once it's hero-sized */
.card.is-open .typo { padding: 24px 28px; }

/* ---------- writing: article view (after mosadiq.com/blog) ---------- */
.art { position: fixed; inset: 0; z-index: 80; overflow-y: auto; overscroll-behavior: contain; background: var(--background); }
.art-col { width: min(720px, 100% - 40px); margin: 0 auto; padding: 72px 0 120px; }
@media (min-width: 1200px) { .art-col { width: calc(6 * var(--g-col) + 5 * var(--g-gutter)); } }
.art .art-back { position: static; display: flex; margin-bottom: 40px; }
.art-head { margin-bottom: 32px; }
.art-title { margin: 0 0 16px; font-size: 36px; line-height: 45px; font-weight: 400; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.art-meta { margin: 0; font-size: 14px; line-height: 21px; color: var(--ink-3); }
.art-dek { margin: 8px 0 0; font-size: 14px; line-height: 21px; color: var(--ink-2); }
.art-body p, .art-body li { margin: 0 0 16px; font-size: 16px; line-height: 28px; color: var(--ink); text-wrap: pretty; }
.art-body h2 { margin: 40px 0 12px; font-size: 18px; line-height: 28px; font-weight: 500; color: var(--ink); }
.art-body h3 { margin: 28px 0 8px; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--ink); }
.art-body ul, .art-body ol { margin: 0 0 16px; padding-left: 20px; }
.art-body blockquote { margin: 24px 0; padding-left: 16px; border-left: 2px solid var(--underline); }
.art-body figure { margin: 32px 0 40px; }
.art-body figure img, .art-body figure video, .art-body > img { display: block; width: 100%; height: auto; border-radius: var(--r-media); }
.art-body figcaption { margin-top: 10px; font-size: 14px; line-height: 22px; color: var(--ink-3); }
.art-body a { color: inherit; text-decoration: underline; text-decoration-color: var(--underline); text-underline-offset: 3px; }
/* entrance: back button, date, dek and text follow the title in */
@media (max-width: 767px) { .art-col { padding-top: 32px; } .art-title { font-size: 28px; line-height: 36px; } }

/* verify marks are working notes: visible locally, never on the live site */
.live mark.verify { display: none; }

/* "Originally on Medium ↗" beside the article date */
.art-source { color: inherit; text-decoration: underline; text-decoration-color: var(--underline); text-underline-offset: 3px; transition: color 150ms ease-out; }
@media (hover: hover) { .art-source:hover { color: var(--ink); } }

/* Entrance, measured from mosadiq.com (Motion): opacity 0→1 and blur(10px)→0 over 750ms on a
   no-bounce spring, sections staggered (100ms on the homepage, 50ms inside an article).
   `backwards` holds the start state through the delay and leaves nothing behind afterwards. */
:root { --enter-ease: cubic-bezier(0.22, 0.9, 0.3, 1); }
@supports (animation-timing-function: linear(0, 1)) {
  :root { --enter-ease: linear(0, 0.033 2.7%, 0.107 5.4%, 0.198 8.1%, 0.292 10.8%, 0.381 13.5%, 0.464 16.2%, 0.537 18.9%, 0.602 21.6%, 0.659 24.3%, 0.708 27%, 0.75 29.7%, 0.787 32.4%, 0.818 35.1%, 0.845 37.8%, 0.867 40.5%, 0.887 43.2%, 0.924 50%, 0.953 58.1%, 0.975 68.9%, 0.99 85.1%, 1 97.3%, 1); }
}
@keyframes enter { from { opacity: 0; filter: blur(10px); } }
@keyframes enter-fade { from { opacity: 0; } }
.enter { animation: enter 750ms var(--enter-ease) var(--enter-delay, 0ms) backwards; }
@media (prefers-reduced-motion: reduce) { .enter { animation-name: enter-fade; animation-duration: 300ms; } }

/* Client marks are rounded squares (people stay circles), from the Paper design:
   6px radius at 24px, so a quarter of the size, on #dadce3 with a 1px navy hairline. */
.pp-mark.has-logo { border-radius: 25%; background: var(--tile); box-shadow: 0 0 0 1px var(--tile-line); }
/* the person avatar uses the homepage photo, cropped a touch closer like the intro */
.by-av img { scale: 1.15; }

/* Footer (after jespervos.com): a connect line, then stacked blocks 16px apart.
   Black for the lead line of each block, grey for the details. */
.pg-now { display: flex; flex-direction: column; gap: 16px; padding-bottom: 24px; }
.pg-now p, .pg-now time { display: block; margin: 0; font-size: 16px; line-height: 24px; }
.pg-now [hidden] { display: none; }
.now-connect, .now-k { color: var(--ink); }
.now-v { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.now-mail { position: relative; display: inline-block; }
/* the copied tip: a small dark pill with a caret, under the Email link */
.now-tip {
  position: absolute; top: calc(100% + 6px); left: 50%; z-index: 5; display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px 2px 4px; border-radius: 6px; background: var(--ink); color: var(--background);
  font-size: 14px; line-height: 20px; white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateX(-50%) scale(.5); transform-origin: 50% 0;
  transition: opacity 100ms ease-out, transform 100ms ease-out;
}
.now-tip::before { content: ""; position: absolute; top: -3px; left: 50%; width: 8px; height: 8px; border-radius: 2px; background: inherit; transform: translateX(-50%) rotate(45deg); }
.now-tip svg { width: 16px; height: 16px; }
.now-tip.on { opacity: 1; transform: translateX(-50%) scale(1); }
@media (prefers-reduced-motion: reduce) { .now-tip { transform: translateX(-50%); } }

/* Writing list, condensed: one line per article, tighter rows, the date as quiet 14px meta */
.pg-writing .pg-row { padding: 6px 0; }
.pg-writing .pg-row-meta { font-size: 14px; }

/* Light/dark toggle (theme.js), after mattinouye.com: 30px ghost button, 15px icon, 10px radius,
   pinned bottom-right above every layer. It keeps the page background so text scrolling
   underneath never shows through. */
.theme-toggle {
  position: fixed; z-index: 120;
  right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0;
  border: 1px solid transparent; border-radius: 10px; background: var(--background); color: var(--ink-3);
  cursor: pointer; transition: background-color .15s ease-out, color .15s ease-out, scale .15s ease-out, translate .3s cubic-bezier(.2, 0, 0, 1);
  -webkit-tap-highlight-color: transparent;
}
/* tucked: slides fully below the bottom edge (its height + the 16px inset + the safe area) */
.theme-toggle.is-tucked { translate: 0 calc(100% + 18px + env(safe-area-inset-bottom, 0px)); transition-duration: .15s, .15s, .15s, .25s; transition-timing-function: ease-out, ease-out, ease-out, cubic-bezier(.4, 0, 1, 1); }
@media (prefers-reduced-motion: reduce) { .theme-toggle { transition: background-color .15s ease-out, color .15s ease-out, opacity .2s ease-out; } .theme-toggle.is-tucked { translate: none; opacity: 0; pointer-events: none; } }
/* both icons stay in the DOM and cross-fade: scale .25→1, blur 4px→0, 300ms */
.theme-toggle svg {
  position: absolute; width: 15px; height: 15px;
  transition: opacity 300ms cubic-bezier(.2, 0, 0, 1), scale 300ms cubic-bezier(.2, 0, 0, 1), filter 300ms cubic-bezier(.2, 0, 0, 1), rotate 300ms cubic-bezier(.2, 0, 0, 1);
}
.theme-toggle .icon-moon, :root.dark .theme-toggle .icon-sun { opacity: 0; scale: .25; filter: blur(4px); rotate: -45deg; }
.theme-toggle .icon-sun, :root.dark .theme-toggle .icon-moon { opacity: 1; scale: 1; filter: blur(0); rotate: 0deg; }
@media (prefers-reduced-motion: reduce) { .theme-toggle svg { transition: opacity 200ms ease-out; scale: 1 !important; filter: none !important; rotate: none !important; } }
@media (hover: hover) { .theme-toggle:hover { background: var(--surface-2); color: var(--ink); } }
.theme-toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in oklab, var(--foreground) 40%, transparent); }
.theme-toggle:not(:disabled):active { scale: .96; }
@media print { .theme-toggle { display: none; } }
/* suppress color transitions for the frame the theme swaps (the toggle's icons still animate) */
.theme-switching, .theme-switching *:not(.theme-toggle svg) { transition: none !important; }
/* page cross-fade between themes; the toggle is lifted out of the snapshot and shown live */
.theme-toggle { view-transition-name: theme-toggle; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 350ms; animation-timing-function: ease-out; }
::view-transition-old(theme-toggle) { display: none; }
::view-transition-new(theme-toggle) { animation: none; }

/* Heart counter (case-study header, after newmaterial.ai's favorite control, scaled to the site's
   14px meta type): a heart icon and count beside the title. Grey at rest, pink once you've hearted. */
#sheet header.has-heart { position: relative; }
#sheet header.has-heart > h1 { padding-right: 44px; }
#sheet header > .heart { position: absolute; top: 0; right: 0; }
.heart { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 28px; color: var(--ink-3); }
.heart-hit {
  position: relative; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 999px;
  background: none; color: inherit; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; outline: none;
}
.heart-hit::before { content: ""; position: absolute; inset: -12px; } /* 44px touch target */
.heart-hit:focus-visible { box-shadow: 0 0 0 2px color-mix(in oklab, var(--foreground) 40%, transparent); }
.heart-btn { display: grid; place-items: center; width: 16px; height: 16px; transition: color .15s ease-out; }
.heart-btn svg { width: 16px; height: 16px; }
@media (hover: hover) { .heart-hit:hover .heart-btn { color: var(--heart); } }
.heart.is-liked { color: var(--heart); }
.heart-outlined { font-variant-numeric: tabular-nums; white-space: nowrap; }
.heart-total { position: relative; display: flex; min-width: 1ch; height: 22px; font-size: 14px; line-height: 22px; color: inherit; transition: color .15s ease-out; }
.heart-num { display: block; }
.heart-total .heart-num + .heart-num { position: absolute; left: 0; }
.heart-fx { position: absolute; top: 4px; left: 0; width: 20px; height: 20px; pointer-events: none; }
.heart-burst {
  position: absolute; top: 10px; left: 10px; font-size: 14px; line-height: 1; font-weight: 500; color: var(--heart);
  paint-order: stroke; -webkit-text-stroke: 3px var(--background); will-change: transform, opacity;
}
.heart-particle { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; color: var(--heart); opacity: 0; will-change: transform, opacity; }
.heart-particle svg { width: 100%; height: 100%; }

/* Pill ⇄ panel motion, measured on newmaterial.ai: a no-bounce (critically damped) spring,
   ~0.6s to settle, half way at ~0.1s. Height, the line's collapse and the content scale share it;
   the line fades out over 250ms and the panel fades in over 350ms, all starting together. */
:root { --pp-spring: cubic-bezier(.3, .75, .3, 1); }
@supports (transition-timing-function: linear(0, 1)) {
  :root { --pp-spring: linear(0, 0.057 4.2%, 0.179 8.3%, 0.318 12.5%, 0.452 16.7%, 0.570 20.8%, 0.668 25%, 0.747 29.2%, 0.810 33.3%, 0.858 37.5%, 0.895 41.7%, 0.922 45.8%, 0.943 50%, 0.959 54.2%, 0.970 58.3%, 0.978 62.5%, 0.984 66.7%, 0.989 70.8%, 0.992 75%, 0.994 79.2%, 0.996 83.3%, 0.997 87.5%, 0.998 91.7%, 0.999 95.8%, 1); }
}

/* Case-study intro rhythm: title + client line as one unit (8px), then the summary (32px),
   the credit attached to the summary (16px), and the first section a clear step away (64px). */
#sheet header > .lede { margin-top: 32px; }
/* the summary is the intro: one step up from body (18/28 vs 16/28) in full ink, same weight */
#sheet header > .lede { font-size: 18px; line-height: 28px; letter-spacing: -0.01em; color: var(--ink); text-wrap: pretty; }
#sheet header > .by:not(.pp) { margin-top: 16px; }

/* ---- system tokens (UI sweep) -------------------------------------------------------------
   --r-media   one corner for content media and cards: hero, figures, video, slideshow, split slider
   --ease-out  hovers, fades, small state changes
   --spring    the measured no-bounce spring: panels, morphs, slides, entrances */
:root { --r-media: 12px; --ease-out: cubic-bezier(.2, 0, 0, 1); --spring: var(--pp-spring); }

/* press: icon buttons shrink to 96% (never when disabled) */
.cs-back:not(:disabled):active, .sidx-back:not(:disabled):active, .by-x:not(:disabled):active, .sl-arrow:not(:disabled):active { scale: .96; }
@media (prefers-reduced-motion: reduce) { .cs-back, .sidx-back, .by-x, .sl-arrow, .theme-toggle, .chip { scale: 1 !important; } }

/* a hairline on content images so light screenshots keep their edge on a light page */
.spring-prose figure:not(.cs-slides):not(.cs-ba) img, .spring-prose figure video,
.art-body figure img, .art-body figure video, .art-body > img,
.sl-view, .ba-view { outline: 1px solid var(--img-outline); outline-offset: -1px; }

/* home page: the card layer and its indicator move with the page scroll on the compositor (see app.js frame()) */
@keyframes follow-scroll { from { translate: 0 0; } to { translate: 0 calc(-1 * var(--scroll-range, 0px)); } }
#layer.follow-scroll, #ind.follow-scroll { animation: follow-scroll linear both; animation-timeline: scroll(root block); }
/* the layer's own clip would travel with it, so the stage (fixed, viewport-sized) clips instead */
#layer.follow-scroll { overflow: visible; }
/* the first-load blur-in (.enter) and the scroll follow share the animation property, so run both */
#layer.follow-scroll.enter { animation: enter 750ms var(--enter-ease) var(--enter-delay, 0ms) backwards, follow-scroll linear both; animation-timeline: auto, scroll(root block); }
@media (prefers-reduced-motion: reduce) { #layer.follow-scroll.enter { animation-name: enter-fade, follow-scroll; } }

/* Video pause/play (video-toggle.js), drawn like the hero video's scrub bar: a bare white glyph
   at the bar's 75% white, 16px in from the edge and centred on the bar's line (18px up), no plate.
   Shown on hover; always there for keyboard focus and on touch screens. */
.vid-host { position: relative; }
.vid-toggle {
  position: absolute; right: 9px; bottom: 4px; z-index: 25; display: grid; place-items: center;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; cursor: pointer; background: none;
  color: rgb(255 255 255 / .75); /* on-media */
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / .35));
  opacity: 0; transition: opacity .3s ease-out, color .15s ease-out;
}
.vid-toggle::before { content: ""; position: absolute; inset: -8px; } /* 44px target */
.vid-toggle svg { position: absolute; width: 14px; height: 14px; transition: opacity .3s cubic-bezier(.2, 0, 0, 1), scale .3s cubic-bezier(.2, 0, 0, 1), filter .3s cubic-bezier(.2, 0, 0, 1); }
.vid-toggle .vt-play, .vid-toggle.is-paused .vt-pause { opacity: 0; scale: .25; filter: blur(4px); }
.vid-toggle .vt-pause, .vid-toggle.is-paused .vt-play { opacity: 1; scale: 1; filter: blur(0); }
@media (hover: hover) {
  .vid-host:hover > .vid-toggle { opacity: 1; }
  .vid-toggle:hover { color: #fff; } /* on-media */
}
@media (hover: none) { .vid-toggle { opacity: 1; } }
.vid-toggle:focus-visible { opacity: 1; color: #fff; outline: 2px solid rgb(255 255 255 / .75); outline-offset: 0; } /* on-media */
.vid-toggle:active { scale: .96; }
@media (prefers-reduced-motion: reduce) { .vid-toggle svg { transition: opacity .2s ease-out; scale: 1 !important; filter: none !important; } }
/* the progress line stops 12px short of the pause glyph (16px inset + 14px glyph + 12px gap) */
.vid-host > .scrub { right: 42px; }
/* case-study figures: the button sits on the video, not under the caption */
.vid-frame { position: relative; display: block; }
.vid-frame > video { display: block; }
/* homepage cards: no video controls until the card is opened as a case study */
.card:not(.is-open) .media > .vid-toggle, .media:not(:has(video.on)) > .vid-toggle { display: none; }
/* same soft shadow as the pause glyph, so the line still reads over white UI footage */
.scrub .track { filter: drop-shadow(0 1px 2px rgb(0 0 0 / .35)); }