/* ============================================================
   Brett Chien — Portfolio v2 (restrained)
   ============================================================ */

:root {
  --bg:        #FAFAF7;
  --bg-warm:   #F2F0EA;
  --ink:       #111110;
  --ink-soft:  #4A4844;
  --ink-mute:  #8A8780;
  --rule:      #E5E2D9;
  --accent:    #C9501E;

  --f-sans:    "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --f-serif:   "Instrument Serif", "Times New Roman", serif;
  --f-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --maxw:      980px;
  --pad-x:     clamp(20px, 4vw, 40px);
  --pad-y:     clamp(80px, 12vw, 160px);
  --gap:       28px;

  --ease:      cubic-bezier(.2,.7,.2,1);
}

html[data-theme="paper"] {
  --bg:       #FFFFFF;
  --bg-warm:  #F4F2EE;
  --ink:      #0C0C0C;
  --rule:     #EDEAE3;
}

html[data-theme="carbon"] {
  --bg:       #111110;
  --bg-warm:  #1A1A18;
  --ink:      #F1EFE9;
  --ink-soft: #C5C2B9;
  --ink-mute: #807D75;
  --rule:     #2A2925;
}

*,*::before,*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--ink); color: var(--bg); }

/* ============================================================
   LAYOUT
   ============================================================ */

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--pad-x);
}
.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* ============================================================
   NAV
   ============================================================ */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -.005em;
}
.nav-mark .sig {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -.01em;
}
.nav-mark .sig .amp {
  font-feature-settings: "ss01";
}
.nav-mark .role {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-mute);
  padding-left: 10px;
  border-left: 1px solid var(--rule);
  margin-left: 4px;
}
.nav-links {
  display: flex;
  gap: 22px;
  font-size: 14px;
  color: var(--ink-soft);
}
.nav-links a { transition: color .2s var(--ease); }
.nav-links a:hover { color: var(--ink); }
.nav-cta {
  display: none;
}
.nav-cta.show {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 14px;
}
.nav-cta .pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-soft);
  transition: border-color .2s var(--ease);
}
.nav-cta .pill:hover { border-color: var(--ink-soft); color: var(--ink); }
.nav-cta .pill .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #2DA260;
  box-shadow: 0 0 0 0 rgba(45,162,96,.45);
  animation: ping 2.4s infinite;
}
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 rgba(45,162,96,.45); }
  70%  { box-shadow: 0 0 0 7px rgba(45,162,96,0); }
  100% { box-shadow: 0 0 0 0 rgba(45,162,96,0); }
}
@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-mark .role { display: none; }
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  padding: clamp(72px, 12vw, 140px) 0 clamp(48px, 8vw, 80px);
}
.hero h1 {
  font-size: clamp(36px, 5.4vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin: 0 0 36px;
  max-width: 22ch;
  color: var(--ink);
}
.hero h1 em {
  font-family: var(--f-serif);
  font-style: italic;
  letter-spacing: -0.01em;
  font-weight: 400;
  font-size: 1.05em;
}
.hero h1 .me-portrait {
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  overflow: hidden;
  vertical-align: -0.32em;
  margin: 0 0.12em 0 0.22em;
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  flex-shrink: 0;
}
.hero h1 .me-portrait img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 28%;
}
.hero-meta {
  display: block;
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 64ch;
  margin: 0;
}
.hero-meta .sep { color: var(--ink-mute); margin: 0 4px; }
.hero-meta .label { color: var(--ink-mute); letter-spacing: .04em; }

/* ============================================================
   FEATURED QUOTE — legacy (kept for safety, not used)
   ============================================================ */

.feature-quote {
  padding: clamp(48px, 8vw, 96px) 0;
  border-top: 1px solid var(--rule);
}

/* ============================================================
   TESTIMONIAL LEDGER
   ============================================================ */

.tests { border-top: 1px solid var(--rule); }
.test {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 36px;
  padding: 36px 0;
  border-bottom: 1px solid var(--rule);
}
.test blockquote {
  margin: 0;
  font-family: var(--f-serif);
  font-size: 23px;
  line-height: 1.42;
  letter-spacing: -.005em;
  color: var(--ink);
  text-wrap: pretty;
}
.test blockquote em {
  font-style: italic;
  color: var(--accent);
}
.test .attr {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding-top: 4px;
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: .04em;
  color: var(--ink-mute);
}
.test .attr .mono {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--bg-warm);
  overflow: hidden;
  flex-shrink: 0;
}
.test .attr .mono img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.test .attr b {
  display: block;
  margin-bottom: 2px;
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.005em;
  color: var(--ink);
}

@media (max-width: 720px) {
  .test {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 28px 0;
  }
  .test .attr {
    flex-direction: row;
    align-items: center;
    padding-top: 0;
  }
  .test blockquote {
    font-size: clamp(20px, 5.6vw, 23px);
  }
}

/* ============================================================
   BACKED BY
   ============================================================ */

.backed {
  padding: 48px 0;
  border-top: 1px solid var(--rule);
}
.backed h6 {
  margin: 0 0 24px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}
.backed-row {
  display: flex;
  gap: clamp(20px, 3vw, 36px);
  flex-wrap: wrap;
  align-items: center;
}
.backed-row .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--ink);
  opacity: .85;
  transition: opacity .25s var(--ease);
}
.backed-row .brand:hover { opacity: 1; }
.backed-row .brand img {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: block;
  object-fit: cover;
}

/* ============================================================
   SECTION HEAD
   ============================================================ */

.section {
  padding: clamp(64px, 9vw, 110px) 0;
  border-top: 1px solid var(--rule);
}
.section-head {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 24px;
  margin-bottom: 56px;
  align-items: baseline;
}
.section-head .num {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.section-head h2 {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -.015em;
  color: var(--ink-soft);
  max-width: 38ch;
}
.section-head h2 b {
  font-weight: 500;
  color: var(--ink);
}
.section-head h2 em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
}
@media (max-width: 720px) {
  .section-head { grid-template-columns: 1fr; gap: 12px; margin-bottom: 36px; }
}

/* ============================================================
   WORK
   ============================================================ */

.work-list {
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 8vw, 96px);
}
.work-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 24px;
  align-items: start;
}
.work-item .side {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--ink-mute);
  text-transform: uppercase;
  padding-top: 6px;
}
.work-item .body { min-width: 0; }
.work-item h3 {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1;
  letter-spacing: -0.025em;
  font-weight: 500;
}
.work-item h3 em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.06em;
  letter-spacing: -.01em;
}
.work-item .desc {
  margin: 14px 0 0;
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 52ch;
}
.work-item .meta {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: .04em;
  flex-wrap: wrap;
}
.work-item .meta a {
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.work-item .meta a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.work-item .meta .sep { opacity: .5; }
.work-item .preview {
  margin-top: 28px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-warm);
}
.work-item .case-preview {
  display: block;
  aspect-ratio: 16 / 9;
  transition: border-color .2s var(--ease), transform .25s var(--ease);
}
.work-item .case-preview:hover {
  border-color: var(--ink-mute);
  transform: translateY(-2px);
}
.work-item .case-preview img {
  display: block;
  width: 100%;
  height: 100%;
}
.work-item .case-preview--crop img {
  object-fit: cover;
  object-position: center 15%;
}
.work-item .case-preview--contain img {
  object-fit: contain;
}
.work-item .case-preview--full-scroll {
  display: flex;
  justify-content: center;
  padding: clamp(18px, 3vw, 32px);
  background: #f4f5f8;
}
.work-item .case-preview--full-scroll img {
  width: auto;
  max-width: 40%;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(17, 17, 16, .12));
}
.work-item .case-preview--pair {
  display: flex;
  justify-content: center;
  gap: clamp(14px, 3vw, 32px);
  padding: clamp(18px, 4vw, 42px) 19%;
  background: #f2f2f4;
}
.work-item .case-preview--pair img {
  width: auto;
  max-width: calc(50% - 8px);
  object-fit: contain;
}
@media (max-width: 720px) {
  .work-item { grid-template-columns: 1fr; gap: 12px; }
  .work-item .side { padding-top: 0; }
}

/* ============================================================
   PRODUCT MOCKS
   ============================================================ */

/* Vita — Gympass virtual assistant */
.m-vita { background: #F4F1E8; color: #1A1916; aspect-ratio: 16/10; }
.m-vita .chrome { background: #EBE7DA; }
.m-vita .vita-grid { display: grid; grid-template-columns: 220px 1fr; height: calc(100% - 28px); }
.m-vita .vita-side {
  padding: 22px 20px; border-right: 1px solid rgba(0,0,0,.06);
  display: flex; flex-direction: column; gap: 14px;
}
.m-vita .vita-side .row1 {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-sans); font-size: 14px; font-weight: 500;
}
.m-vita .vita-side .row1 .dot {
  width: 10px; height: 10px; border-radius: 50%; background: #C9501E;
  box-shadow: 0 0 0 0 rgba(201,80,30,.45); animation: ping 2.4s infinite;
}
.m-vita .vita-side .hint {
  font-family: var(--f-serif); font-style: italic; font-size: 15px; line-height: 1.3; color: #4A4844;
}
.m-vita .vita-side .chips { display: flex; flex-direction: column; gap: 6px; }
.m-vita .vita-side .chips span {
  padding: 7px 12px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .04em;
  border: 1px solid rgba(0,0,0,.08); border-radius: 999px; color: #4A4844;
  background: #fff;
}
.m-vita .vita-main { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.m-vita .vita-main .prompt {
  background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 6px;
  padding: 14px 16px; font-family: var(--f-sans); font-size: 15px; line-height: 1.4;
  display: flex; align-items: center; gap: 4px;
}
.m-vita .vita-main .prompt em { font-family: var(--f-serif); font-style: italic; }
.m-vita .vita-main .prompt .cursor {
  display: inline-block; width: 2px; height: 16px; background: #C9501E;
  animation: blink 1s infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.m-vita .vita-main .parsed { display: flex; flex-wrap: wrap; gap: 6px; }
.m-vita .vita-main .parsed .tok {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .04em;
  padding: 5px 9px; background: rgba(201,80,30,.10); color: #C9501E; border-radius: 3px;
}
.m-vita .vita-main .results { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.m-vita .vita-main .result {
  background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 4px;
  padding: 10px 14px; display: flex; flex-direction: column; gap: 2px;
}
.m-vita .vita-main .result .t { font-size: 13px; font-weight: 500; }
.m-vita .vita-main .result .m { font-family: var(--f-mono); font-size: 10px; color: #6B6862; }
.m-vita .vita-main .result.faint { opacity: .55; }

/* Recommendations — Gympass discover */
.m-recs { background: #FAFAF7; aspect-ratio: 16/10; }
.m-recs .chrome { background: #F1F1EB; }
.m-recs .recs-grid {
  padding: 22px; display: flex; flex-direction: column; gap: 14px;
  height: calc(100% - 28px);
}
.m-recs .row-head { display: flex; justify-content: space-between; align-items: baseline; }
.m-recs .row-head .t { font-family: var(--f-serif); font-style: italic; font-size: 20px; letter-spacing: -.01em; }
.m-recs .row-head .why { font-family: var(--f-mono); font-size: 10px; color: var(--accent); letter-spacing: .04em; }
.m-recs .cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; flex: 1; min-height: 0; }
.m-recs .card {
  background: #fff; border: 1px solid var(--rule); border-radius: 6px;
  overflow: hidden; display: flex; flex-direction: column;
  position: relative;
}
.m-recs .card .img { flex: 1; min-height: 0; }
.m-recs .card .img.i1 { background: linear-gradient(160deg, #E5C5A1, #B6845C); }
.m-recs .card .img.i2 { background: linear-gradient(160deg, #C9501E, #7E2E0F); }
.m-recs .card .img.i3 { background: linear-gradient(160deg, #8A56E2, #4528A8); }
.m-recs .card .img.i4 { background: linear-gradient(160deg, #1F1E1B, #4A4844); }
.m-recs .card .meta {
  padding: 8px 10px;
  font-family: var(--f-mono); font-size: 10px; color: var(--ink);
  border-top: 1px solid var(--rule);
  background: #fff;
}
.m-recs .card .meta em { font-family: var(--f-serif); font-style: italic; color: var(--accent); }
.m-recs .card.on { border-color: var(--ink); box-shadow: 0 8px 18px -8px rgba(0,0,0,.18); }
.m-recs .card.on .why-tip {
  position: absolute; top: 8px; left: 8px; right: 8px;
  font-family: var(--f-mono); font-size: 9px; color: #fff;
  background: rgba(0,0,0,.55); padding: 4px 6px; border-radius: 3px;
  backdrop-filter: blur(2px);
}
.m-recs .card.surprise { border: 1px dashed var(--accent); }
.m-recs .card.surprise .meta { color: var(--accent); }
.m-recs .card.faint { opacity: .5; }
.m-recs .toggles {
  display: flex; gap: 16px; font-family: var(--f-mono); font-size: 10px;
  color: var(--ink-soft); padding-top: 10px; border-top: 1px solid var(--rule);
}
.m-recs .toggles span { display: inline-flex; align-items: center; gap: 6px; }
.m-recs .toggles i {
  width: 20px; height: 11px; border-radius: 999px;
  background: rgba(0,0,0,.1); display: inline-block; position: relative;
}
.m-recs .toggles i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.m-recs .toggles i.on { background: var(--accent); }
.m-recs .toggles i.on::after { left: 11px; }

/* Onboard — Trainiac mobile onboarding */
.m-onboard { background: #F8DDD3; aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; padding: 30px; }
.m-onboard .chrome { display: none; }
.m-onboard .phone {
  width: 240px; height: 100%; max-height: 400px;
  background: #FFFCF8; border-radius: 28px; border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 44px rgba(0,0,0,.12);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.m-onboard .phone .top { display: flex; justify-content: space-between; padding: 12px 18px 6px; font-family: var(--f-mono); font-size: 9px; }
.m-onboard .phone .head { padding: 10px 20px 12px; }
.m-onboard .phone .stepper { display: flex; gap: 4px; margin-bottom: 12px; }
.m-onboard .phone .stepper .s { flex: 1; height: 3px; background: rgba(0,0,0,.08); border-radius: 999px; }
.m-onboard .phone .stepper .s.done { background: var(--accent); }
.m-onboard .phone .stepper .s.on { background: var(--accent); opacity: .55; }
.m-onboard .phone .lbl {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .12em;
  color: #94908A; text-transform: uppercase;
}
.m-onboard .phone .head h3 {
  margin: 8px 0 0; font-size: 20px; font-weight: 500; letter-spacing: -.015em; line-height: 1.15;
}
.m-onboard .phone .head h3 em { font-family: var(--f-serif); font-style: italic; color: var(--accent); font-weight: 400; }
.m-onboard .phone .qs { padding: 4px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.m-onboard .phone .qs .q {
  border: 1px solid rgba(0,0,0,.08); border-radius: 14px;
  padding: 10px 14px; font-size: 12px;
  display: flex; align-items: center; gap: 10px;
}
.m-onboard .phone .qs .q.sel { background: #1A1916; color: #FFFCF8; border-color: #1A1916; }
.m-onboard .phone .qs .q.faint { color: var(--ink-mute); }
.m-onboard .phone .qs .q .ic {
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; background: rgba(0,0,0,.06); color: var(--ink);
}
.m-onboard .phone .qs .q.sel .ic { background: var(--accent); color: #fff; }
.m-onboard .phone .qs .q.faint .ic { background: transparent; border: 1px solid rgba(0,0,0,.1); font-style: italic; }
.m-onboard .phone .cta-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 20px 18px;
}
.m-onboard .phone .cta-row .skip {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .04em; color: var(--ink-mute);
}
.m-onboard .phone .cta-row .cta {
  padding: 10px 16px; background: var(--accent); color: #fff;
  border-radius: 999px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .04em;
}

/* Marketplace — freelance two-sided */
.m-market { background: #F6F4EF; aspect-ratio: 16/10; }
.m-market .chrome { background: #ECE9E1; }
.m-market .market-grid { display: grid; grid-template-columns: 240px 1fr; height: calc(100% - 28px); }
.m-market .m-side {
  padding: 22px 20px; border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 14px;
  background: #ECE9E1;
}
.m-market .m-side .head {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-mute);
}
.m-market .m-side .brief { display: flex; flex-direction: column; gap: 8px; }
.m-market .m-side .brief .b {
  background: #fff; border: 1px solid var(--rule); border-radius: 4px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 2px;
}
.m-market .m-side .brief .b span {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-mute);
}
.m-market .m-side .brief .b b { font-family: var(--f-sans); font-weight: 500; font-size: 13px; color: var(--ink); }
.m-market .m-main { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.m-market .m-main .m-head { display: flex; justify-content: space-between; align-items: baseline; }
.m-market .m-main .m-head span:first-child {
  font-family: var(--f-serif); font-style: italic; font-size: 20px; letter-spacing: -.01em;
}
.m-market .m-main .m-head .why { font-family: var(--f-mono); font-size: 10px; color: var(--ink-mute); }
.m-market .matches { display: flex; flex-direction: column; gap: 8px; }
.m-market .match {
  display: grid; grid-template-columns: 36px 1fr auto; gap: 14px;
  align-items: center;
  background: #fff; border: 1px solid var(--rule); border-radius: 6px;
  padding: 10px 14px;
}
.m-market .match.top { border-color: var(--accent); background: rgba(201,80,30,.04); }
.m-market .match .avt {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-warm);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-serif); font-style: italic; font-size: 15px; color: var(--ink);
  border: 1px solid var(--rule);
}
.m-market .match.top .avt { background: var(--accent); color: #fff; border-color: var(--accent); }
.m-market .match .info .nm { font-size: 13px; font-weight: 500; letter-spacing: -.005em; }
.m-market .match .info .tags {
  font-family: var(--f-mono); font-size: 10px; color: var(--ink-mute); margin-top: 2px;
}
.m-market .match .fit {
  font-family: var(--f-serif); font-style: italic; font-size: 22px; color: var(--accent);
  line-height: 1;
}
.m-market .match.top .fit { font-size: 28px; }
.m-market .match .fit span { font-family: var(--f-mono); font-size: 10px; font-style: normal; vertical-align: super; }
.m-market .match:not(.top) .fit { color: var(--ink-soft); }

/* ============================================================
   PRODUCT MOCKS — original (retained for case pages)
   ============================================================ */

.mock {
  position: relative;
  font-family: var(--f-sans);
  font-size: 12px;
  color: var(--ink);
  background: var(--bg);
}
.mock-chrome {
  height: 28px;
  background: var(--bg-warm);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 6px;
}
.mock-chrome .d { width: 9px; height: 9px; border-radius: 50%; background: rgba(0,0,0,.08); }
.mock-chrome .url {
  margin-left: 16px;
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--ink-mute);
  letter-spacing: .03em;
}

/* Marrow — ICU dashboard */
.m-marrow { background: #0F1216; color: #DDE2E7; aspect-ratio: 16/10; }
.m-marrow .chrome { background: #181C21; border-bottom-color: rgba(255,255,255,.06); }
.m-marrow .chrome .d { background: rgba(255,255,255,.1); }
.m-marrow .chrome .url { color: rgba(255,255,255,.4); }
.m-marrow .grid { display: grid; grid-template-columns: 220px 1fr; height: calc(100% - 28px); }
.m-marrow .list {
  padding: 18px 16px; display: flex; flex-direction: column; gap: 8px;
  border-right: 1px solid rgba(255,255,255,.05);
  font-family: var(--f-mono); font-size: 10px;
}
.m-marrow .list h5 { margin: 0 0 6px; font-size: 9px; letter-spacing: .12em; color: #7B848E; text-transform: uppercase; font-weight: 500; }
.m-marrow .pt {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; border: 1px solid rgba(255,255,255,.06); border-radius: 4px;
}
.m-marrow .pt.crit { border-color: #C9501E; background: rgba(201,80,30,.08); }
.m-marrow .pt .nm { color: #DDE2E7; }
.m-marrow .pt .vt { color: #7B848E; font-size: 9px; margin-top: 2px; }
.m-marrow .pt .pill { font-size: 8px; padding: 2px 6px; border-radius: 999px; background: rgba(255,255,255,.06); color: #7B848E; }
.m-marrow .pt.crit .pill { background: #C9501E; color: #fff; }
.m-marrow .main { padding: 22px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.m-marrow .main .row1 { display: flex; justify-content: space-between; align-items: baseline; }
.m-marrow .main h4 {
  margin: 0; font-family: var(--f-sans); font-size: 22px;
  font-weight: 500; line-height: 1; letter-spacing: -.015em; color: #fff;
}
.m-marrow .main h4 em {
  font-family: var(--f-serif); font-style: italic; color: #E07A4A; font-weight: 400;
}
.m-marrow .main .status {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em;
  color: #C9501E; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
}
.m-marrow .main .status::before {
  content: ""; width: 6px; height: 6px; background: #C9501E; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(201,80,30,.5); animation: ping 2s infinite;
}
.m-marrow .vitals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.m-marrow .v {
  border: 1px solid rgba(255,255,255,.06); border-radius: 4px; padding: 10px 12px;
}
.m-marrow .v span { display: block; font-family: var(--f-mono); font-size: 9px; color: #7B848E; letter-spacing: .08em; text-transform: uppercase; }
.m-marrow .v b { font-family: var(--f-sans); font-size: 22px; font-weight: 500; line-height: 1.1; }
.m-marrow .v b em { font-family: var(--f-serif); font-style: italic; color: #E07A4A; font-weight: 400; }
.m-marrow .chart { flex: 1; min-height: 0; border: 1px solid rgba(255,255,255,.06); border-radius: 4px; padding: 12px; }
.m-marrow .chart svg { width: 100%; height: 100%; }

/* Cipher — agent workspace */
.m-cipher { background: #F4F1E8; aspect-ratio: 16/10; color: #1A1916; }
.m-cipher .chrome { background: #EBE7DA; }
.m-cipher .grid { display: grid; grid-template-columns: 1fr 280px; height: calc(100% - 28px); }
.m-cipher .canvas { padding: 22px; display: flex; flex-direction: column; gap: 12px; border-right: 1px solid rgba(0,0,0,.06); }
.m-cipher .canvas h3 {
  margin: 0; font-size: 22px; font-weight: 500; line-height: 1.15; letter-spacing: -.015em;
}
.m-cipher .canvas h3 em { font-family: var(--f-serif); font-style: italic; font-weight: 400; }
.m-cipher .step {
  font-family: var(--f-mono); font-size: 10px;
  padding: 10px 12px; border: 1px solid rgba(0,0,0,.08); border-radius: 4px; background: #fff;
  display: flex; gap: 12px; align-items: center;
}
.m-cipher .step b { background: #1A1916; color: #F4F1E8; padding: 2px 6px; border-radius: 3px; font-weight: 500; font-size: 9px; }
.m-cipher .step.run { background: #1A1916; color: #F4F1E8; border-color: #1A1916; }
.m-cipher .step.run b { background: var(--accent); color: #fff; }
.m-cipher .agents-panel {
  padding: 18px; background: #ECE6D6; display: flex; flex-direction: column; gap: 10px;
}
.m-cipher .agents-panel h5 {
  margin: 0; font-family: var(--f-mono); font-size: 9px;
  letter-spacing: .12em; text-transform: uppercase; color: #6B6862;
}
.m-cipher .agent {
  background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 4px;
  padding: 12px; font-family: var(--f-mono); font-size: 10px;
}
.m-cipher .agent .nm { display: flex; justify-content: space-between; font-weight: 600; }
.m-cipher .agent .nm em { font-family: var(--f-mono); font-style: normal; font-size: 9px; color: var(--accent); }
.m-cipher .agent .task { margin: 8px 0 10px; color: #2A2925; line-height: 1.4; font-size: 9px; }
.m-cipher .agent .pr { height: 3px; background: rgba(0,0,0,.06); position: relative; border-radius: 2px; overflow: hidden; }
.m-cipher .agent .pr i { position: absolute; inset: 0; right: auto; background: #1A1916; }
.m-cipher .agent.on .pr i { background: var(--accent); }

/* Lattice — design system */
.m-lattice { background: #FBFAF6; aspect-ratio: 16/10; color: #111; }
.m-lattice .chrome { background: #F2F1EB; }
.m-lattice .grid { padding: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; height: calc(100% - 28px); }
.m-lattice .panel { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 4px; padding: 16px; }
.m-lattice h4 { margin: 0 0 12px; font-family: var(--f-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: #6B6862; font-weight: 500; }
.m-lattice .sw { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-bottom: 16px; }
.m-lattice .sw i { aspect-ratio: 1; border-radius: 2px; display: block; }
.m-lattice .ts { display: flex; flex-direction: column; gap: 5px; }
.m-lattice .ts span { display: block; font-weight: 500; letter-spacing: -.01em; }
.m-lattice .toks { display: flex; flex-direction: column; gap: 4px; font-family: var(--f-mono); font-size: 9px; }
.m-lattice .toks .t { display: flex; justify-content: space-between; padding: 5px 8px; background: #F6F5EF; border-radius: 2px; }
.m-lattice .btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.m-lattice .btns .b {
  font-family: var(--f-sans); font-size: 10px; font-weight: 500;
  padding: 6px 12px; border-radius: 999px; background: #111; color: #fff;
}
.m-lattice .btns .b.gh { background: transparent; color: #111; border: 1px solid #111; }
.m-lattice .btns .b.acc { background: var(--accent); }

/* Vector — observability */
.m-vector { background: #0C0E11; color: #C5CAD0; aspect-ratio: 16/10; }
.m-vector .chrome { background: #14171B; border-bottom-color: rgba(255,255,255,.06); }
.m-vector .chrome .d { background: rgba(255,255,255,.1); }
.m-vector .chrome .url { color: rgba(255,255,255,.4); }
.m-vector .pad { padding: 18px 20px; display: grid; grid-template-rows: auto 1fr auto; gap: 14px; height: calc(100% - 28px); }
.m-vector .top { display: flex; justify-content: space-between; align-items: baseline; }
.m-vector h4 {
  margin: 0; font-family: var(--f-sans); font-size: 20px; font-weight: 500; color: #fff;
  letter-spacing: -.015em; line-height: 1;
}
.m-vector h4 em { font-family: var(--f-serif); font-style: italic; color: #6EE7B7; font-weight: 400; }
.m-vector .top .meta { font-family: var(--f-mono); font-size: 10px; color: #6B7178; letter-spacing: .06em; }
.m-vector .chart {
  border: 1px solid rgba(255,255,255,.06); border-radius: 4px; padding: 14px;
}
.m-vector .chart svg { width: 100%; height: 100%; }
.m-vector .logs {
  font-family: var(--f-mono); font-size: 9px;
  background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.05); border-radius: 4px;
  overflow: hidden;
}
.m-vector .logs div {
  padding: 6px 12px; border-bottom: 1px solid rgba(255,255,255,.04);
  display: grid; grid-template-columns: 64px 56px 1fr; gap: 10px; align-items: center;
}
.m-vector .logs div:last-child { border: 0; }
.m-vector .logs .ts { color: #6B7178; }
.m-vector .logs .lv.err { color: #F87171; }
.m-vector .logs .lv.warn { color: #FBBF24; }
.m-vector .logs .lv.info { color: #6EE7B7; }

/* Pulse — phone triage */
.m-pulse { aspect-ratio: 16/10; background: #F5D9CD; display: flex; align-items: center; justify-content: center; padding: 30px; }
.m-pulse .chrome { display: none; }
.m-pulse .phone {
  width: 220px; height: 100%; max-height: 380px;
  background: #FFFCF8; border-radius: 28px; border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 16px 40px rgba(0,0,0,.1);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.m-pulse .top { display: flex; justify-content: space-between; padding: 14px 18px 6px; font-family: var(--f-mono); font-size: 9px; }
.m-pulse .head { padding: 8px 18px 16px; }
.m-pulse .head .lbl { font-family: var(--f-mono); font-size: 9px; letter-spacing: .12em; color: #94908A; text-transform: uppercase; }
.m-pulse .head h3 { margin: 8px 0 0; font-size: 22px; font-weight: 500; letter-spacing: -.015em; line-height: 1.1; }
.m-pulse .head h3 em { font-family: var(--f-serif); font-style: italic; color: var(--accent); font-weight: 400; }
.m-pulse .qs { padding: 6px 18px; display: flex; flex-direction: column; gap: 6px; }
.m-pulse .qs .q { border: 1px solid rgba(0,0,0,.08); border-radius: 14px; padding: 10px 14px; font-size: 11px; }
.m-pulse .qs .q.sel { background: #1A1916; color: #FFFCF8; border-color: #1A1916; }
.m-pulse .qs .q .lab { font-family: var(--f-mono); font-size: 8px; letter-spacing: .1em; opacity: .6; text-transform: uppercase; }
.m-pulse .qs .q .v { display: block; margin-top: 2px; }
.m-pulse .cta {
  margin: auto 18px 18px;
  padding: 12px 14px;
  background: var(--accent); color: #fff;
  border-radius: 999px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: center;
}

/* ============================================================
   EXPERIENCE — timeline
   ============================================================ */

.exp-list { display: flex; flex-direction: column; }
.exp-item {
  display: grid;
  grid-template-columns: 100px 60px 1fr;
  gap: 24px;
  align-items: start;
  padding: 28px 0;
  border-top: 1px solid var(--rule);
}
.exp-item:last-child { border-bottom: 1px solid var(--rule); }
.exp-item .yr {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-mute);
  padding-top: 6px;
}
.exp-item .logo {
  width: 44px; height: 44px;
  border-radius: 8px;
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.exp-item .logo svg,
.exp-item .logo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.exp-item .logo.k { background: #111; color: #FFF7E8; border-color: #111; }
.exp-item .body h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.01em;
}
.exp-item .body .co {
  margin-top: 2px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-mute);
}
.exp-item .body p {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch;
}
@media (max-width: 720px) {
  .exp-item {
    grid-template-columns: 44px 1fr;
    grid-template-areas: "logo body" "yr body";
    row-gap: 8px;
  }
  .exp-item .yr { grid-area: yr; padding-top: 0; font-size: 11px; }
  .exp-item .logo { grid-area: logo; }
  .exp-item .body { grid-area: body; }
}

/* ============================================================
   CTA BAND
   ============================================================ */

.cta-band {
  padding: clamp(56px, 8vw, 96px) 0;
  border-top: 1px solid var(--rule);
}
.cta-band .row {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 32px;
  flex-wrap: wrap;
}
.cta-band h3 {
  margin: 0;
  font-size: clamp(32px, 4.8vw, 56px);
  line-height: 1.05;
  letter-spacing: -.025em;
  font-weight: 400;
  max-width: 14ch;
}
.cta-band h3 em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
}
.cta-band .btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.005em;
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.cta-band .btn:hover { transform: translateY(-2px); background: var(--accent); }
.cta-band .btn .arr { display: inline-block; transition: transform .25s var(--ease); }
.cta-band .btn:hover .arr { transform: translateX(3px); }

/* ============================================================
   PUBLICATIONS
   ============================================================ */

.pubs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--rule); }
.pub {
  display: block;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
  transition: padding .25s var(--ease);
}
.pub:nth-child(odd) { padding-right: 24px; border-right: 1px solid var(--rule); }
.pub:nth-child(even) { padding-left: 24px; }
.pub .kind {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--ink-mute);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pub h4 {
  margin: 8px 0 6px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.pub p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 48ch;
}
.pub .arrow {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--ink-mute);
  transition: color .2s var(--ease), transform .2s var(--ease);
  display: inline-block;
}
.pub:hover .arrow { color: var(--ink); transform: translate(2px,-2px); }
.pub:hover h4 { color: var(--accent); }
@media (max-width: 720px) {
  .pubs { grid-template-columns: 1fr; }
  .pub:nth-child(odd) { padding-right: 0; border-right: 0; }
  .pub:nth-child(even) { padding-left: 0; }
}

/* ============================================================
   ABOUT
   ============================================================ */

.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: clamp(36px, 6vw, 72px);
  align-items: center;
  position: relative;
}
.about-text {
  position: relative;
  z-index: 1;
  max-width: 60ch;
}
.about-snapshot {
  position: relative;
  width: 100%;
  margin: 0;
  align-self: center;
  transform: rotate(2deg);
}
.about-snapshot.reveal {
  transform: translateY(20px) rotate(2deg);
}
.about-snapshot.reveal.in {
  transform: translateY(0) rotate(2deg);
}
.about-snapshot-paper {
  padding: 12px 12px 14px;
  background: #fff;
  border: 1px solid var(--rule);
  box-shadow: 0 1px 2px rgba(17,17,16,.05), 0 12px 32px -12px rgba(17,17,16,.22);
}
.about-snapshot-paper img {
  display: block;
  width: 100%;
}
.about-snapshot-tape {
  position: absolute;
  z-index: 1;
  top: -13px;
  left: 50%;
  width: 86px;
  height: 26px;
  transform: translateX(-50%) rotate(-3deg);
  background: color-mix(in oklab, var(--bg-warm) 72%, transparent);
  border: 1px solid color-mix(in oklab, var(--rule) 60%, transparent);
}
.about-snapshot figcaption {
  margin-top: 12px;
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .04em;
  text-align: center;
  color: var(--ink-mute);
}
.about-snapshot figcaption strong {
  color: var(--ink);
  font-weight: 500;
}
.about-text p {
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 18px;
  color: var(--ink);
}
.about-text p:last-child { margin: 0; }
@media (max-width: 760px) {
  .about-layout { grid-template-columns: 1fr; }
  .about-snapshot {
    width: min(100%, 420px);
    margin: 16px auto 0;
  }
}

/* Hoverable bio tags with floating image previews */
.bio-tag {
  position: relative;
  display: inline-block;
  cursor: help;
  border-bottom: 1px dashed var(--ink-mute);
  padding-bottom: 1px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.bio-tag:hover { color: var(--accent); border-bottom-color: var(--accent); border-bottom-style: solid; }
.bio-tag .bio-img {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translate(-50%, 8px) rotate(-2deg);
  width: 220px;
  height: 220px;
  border-radius: 6px;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s var(--ease), transform .28s var(--ease);
  box-shadow: 0 18px 40px -14px rgba(0,0,0,.35);
  border: 1px solid var(--rule);
  background: var(--bg-warm);
  z-index: 20;
  display: block;
  max-width: none;
}
.bio-tag:hover .bio-img,
.bio-tag:focus-visible .bio-img {
  opacity: 1;
  transform: translate(-50%, 0) rotate(-2deg);
}
.bio-tag:nth-of-type(even) .bio-img { transform: translate(-50%, 8px) rotate(2deg); }
.bio-tag:nth-of-type(even):hover .bio-img,
.bio-tag:nth-of-type(even):focus-visible .bio-img { transform: translate(-50%, 0) rotate(2deg); }

/* Paired images (e.g. two dogs) */
.bio-pair {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translate(-50%, 8px);
  display: flex;
  gap: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s var(--ease), transform .28s var(--ease);
  z-index: 20;
}
.bio-pair img {
  width: 180px;
  height: 180px;
  border-radius: 6px;
  object-fit: cover;
  box-shadow: 0 18px 40px -14px rgba(0,0,0,.35);
  border: 1px solid var(--rule);
  background: var(--bg-warm);
  display: block;
  max-width: none;
}
.bio-pair img:nth-child(1) { transform: rotate(-3deg); }
.bio-pair img:nth-child(2) { transform: rotate(3deg); }
.bio-tag:hover .bio-pair,
.bio-tag:focus-visible .bio-pair {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (max-width: 520px) {
  .bio-tag .bio-img { width: 170px; height: 170px; }
  .bio-pair { gap: 8px; }
  .bio-pair img { width: 130px; height: 130px; }
}
.about-photos {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.about-photo {
  aspect-ratio: 4/5;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--bg-warm);
  position: relative;
}
.about-photo .lab {
  position: absolute;
  bottom: 8px; left: 8px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: #FFF;
  background: rgba(20,18,14,.55);
  padding: 4px 8px;
  border-radius: 2px;
  backdrop-filter: blur(4px);
}
.about-photo-1 {
  background:
    radial-gradient(circle at 35% 35%, rgba(201,80,30,.5), transparent 60%),
    linear-gradient(160deg, #E8C5A9, #8C5C42);
}
.about-photo-1::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 60%;
  background: radial-gradient(ellipse at 50% 40%, rgba(40,30,20,.55), transparent 60%), radial-gradient(ellipse at 50% 90%, rgba(40,30,20,.85), transparent 70%);
}
.about-photo-2 {
  background:
    repeating-linear-gradient(0deg, #5A5145 0 10px, #4A4135 10px 22px),
    linear-gradient(180deg, #E0DAC9, #B3A98F);
  position: relative;
}
.about-photo-2::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 35% 40%, rgba(40,30,20,.5), transparent 50%),
    radial-gradient(ellipse at 35% 85%, rgba(40,30,20,.85), transparent 70%);
}
.about-photo-3 {
  background:
    linear-gradient(135deg, #DDD0B8 0%, #C0B395 100%);
}
.about-photo-3::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 38%, rgba(40,30,20,.6), transparent 18%),
    radial-gradient(ellipse at 50% 80%, rgba(40,30,20,.8), transparent 60%);
}
.about-photo-4 {
  background:
    linear-gradient(160deg, #F0DCC5, #C99F7B);
}
.about-photo-4::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 55% 45%, rgba(40,30,20,.55), transparent 55%),
    radial-gradient(ellipse at 30% 88%, rgba(40,30,20,.7), transparent 60%);
}
@media (max-width: 720px) {
  .about-photos { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   CONTACT
   ============================================================ */

.contact {
  padding: clamp(72px, 12vw, 140px) 0;
  border-top: 1px solid var(--rule);
}
.contact-layout {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
}
.contact-copy {
  position: relative;
  z-index: 2;
  width: 100%;
}
.contact-3d {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 0;
  width: clamp(460px, 58%, 560px);
  min-height: 420px;
  transform: translateY(-50%);
  pointer-events: none;
}
.contact-3d.reveal {
  transform: translateY(calc(-50% + 20px));
}
.contact-3d.reveal.in {
  transform: translateY(-50%);
}
.contact-3d canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.contact h2 {
  margin: 0 0 36px;
  font-size: clamp(32px, 4.8vw, 56px);
  line-height: 1.05;
  letter-spacing: -.025em;
  font-weight: 400;
  max-width: 18ch;
}
.contact h2 em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
}
.contact-row {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 36px;
}
.contact-email {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.015em;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.contact-email .copy {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .04em;
  padding: 4px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-mute);
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.contact-email .copy:hover { color: var(--ink); border-color: var(--ink-soft); }
@media (max-width: 760px) {
  .contact-layout { min-height: 0; }
  .contact-3d { display: none; }
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  border-top: 1px solid var(--rule);
  padding: 28px 0 36px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-mute);
}
.footer .row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.footer .links { display: flex; gap: 18px; }
.footer .links a:hover { color: var(--ink); }

/* ============================================================
   REVEAL
   ============================================================ */

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-stagger.in > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(2) { transition-delay: .05s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: .10s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: .15s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: .20s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: .25s; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: .30s; }
.reveal-stagger.in > *:nth-child(8) { transition-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
}

/* ============================================================
   TWEAKS PANEL
   ============================================================ */

.tweaks {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 500;
  width: 260px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 16px;
  font-family: var(--f-sans);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.2);
  display: none;
}
.tweaks.open { display: block; }
.tweaks h6 {
  margin: 0 0 14px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 500;
}
.tweaks h6 button { font-size: 18px; color: var(--ink-mute); line-height: 1; padding: 0 4px; }
.tweaks h6 button:hover { color: var(--ink); }
.tweaks .group { margin-bottom: 14px; }
.tweaks .group:last-child { margin-bottom: 0; }
.tweaks .group label {
  display: block; font-family: var(--f-mono);
  font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 8px;
}
.tweaks .seg { display: flex; border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; }
.tweaks .seg button {
  flex: 1; padding: 8px 4px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .04em;
  color: var(--ink-soft); border-right: 1px solid var(--rule);
}
.tweaks .seg button:last-child { border-right: 0; }
.tweaks .seg button.on { background: var(--ink); color: var(--bg); }
.tweaks .seg button:hover:not(.on) { background: var(--bg-warm); }
.tweaks .swatches { display: flex; gap: 8px; }
.tweaks .swatches button {
  width: 26px; height: 26px;
  border: 1px solid var(--rule); border-radius: 50%;
  position: relative;
}
.tweaks .swatches button.on::after {
  content: ""; position: absolute; inset: -4px;
  border: 1px solid var(--ink); border-radius: 50%;
}

/* ============================================================
   SIDE PROJECTS
   ============================================================ */

.side-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.side-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg);
  transition: transform .35s var(--ease), border-color .25s var(--ease);
}
.side-card:hover { transform: translateY(-3px); border-color: var(--ink-soft); }
.side-preview {
  aspect-ratio: 16/10;
  border-bottom: 1px solid var(--rule);
  background: var(--bg-warm);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.side-meta {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.side-meta .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-mute);
}
.side-meta .top .kind { text-transform: uppercase; letter-spacing: .12em; }
.side-meta .status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.side-meta .status .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-mute);
}
.side-meta .status.live .dot   { background: #2DA260; }
.side-meta .status.beta .dot   { background: #E8B53C; }
.side-meta .status.archived .dot { background: var(--ink-mute); }
.side-meta h4 {
  margin: 4px 0 0;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.1;
}
.side-meta h4 em { font-family: var(--f-serif); font-style: italic; font-weight: 400; }
.side-meta p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.side-meta .links {
  margin-top: 10px;
  display: flex;
  gap: 14px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-mute);
}
.side-meta .links a {
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.side-meta .links a:hover { color: var(--accent); border-bottom-color: var(--accent); }
@media (max-width: 720px) {
  .side-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* --- Preview themes (one per card, hand-drawn-ish in CSS/SVG) --- */

/* LeetUIUX · daily UI/UX challenge */
.sp-leetuiux {
  background: linear-gradient(180deg, #F2F1EB 0%, #DCD7C8 100%);
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.sp-leetuiux .head {
  display: flex; align-items: center; gap: 10px;
}
.sp-leetuiux .logo {
  width: 26px; height: 26px; border-radius: 6px;
  background: #1A1916; color: #F4F1E8;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-serif); font-style: italic; font-size: 16px;
}
.sp-leetuiux .tt {
  font-family: var(--f-sans); font-size: 14px; font-weight: 500;
}
.sp-leetuiux .tt .tag {
  font-family: var(--f-mono); font-size: 10px; color: var(--ink-mute); letter-spacing: .04em; margin-left: 6px;
}
.sp-leetuiux .card {
  background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 8px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 8px 22px -10px rgba(0,0,0,.12);
}
.sp-leetuiux .card .lbl {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-mute);
}
.sp-leetuiux .card .title {
  font-family: var(--f-sans); font-size: 15px; line-height: 1.25; font-weight: 500; letter-spacing: -.005em;
}
.sp-leetuiux .card .title em { font-family: var(--f-serif); font-style: italic; font-weight: 400; }
.sp-leetuiux .card .diff { display: flex; gap: 4px; }
.sp-leetuiux .card .diff .d {
  font-family: var(--f-mono); font-size: 9px;
  padding: 3px 7px; border-radius: 999px; letter-spacing: .04em;
  background: var(--bg-warm); color: var(--ink-mute);
  border: 1px solid var(--rule);
}
.sp-leetuiux .card .diff .d.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.sp-leetuiux .card .cta-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 4px;
}
.sp-leetuiux .card .cta {
  font-family: var(--f-mono); font-size: 10px; padding: 6px 10px;
  background: #C9501E; color: #fff; border-radius: 999px;
}
.sp-leetuiux .card .sub { font-family: var(--f-mono); font-size: 10px; color: var(--ink-mute); }

/* AI Figma plugin — design system generator */
.sp-figma-ds {
  background: #0E0E0D;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
}
.sp-figma-ds .plugin {
  width: 100%;
  max-width: 320px;
  background: #1F1E1B;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.06);
  padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  color: #F1EFE9;
}
.sp-figma-ds .ph {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--f-sans); font-size: 13px; font-weight: 500;
}
.sp-figma-ds .ph .x { color: rgba(255,255,255,.4); font-size: 16px; }
.sp-figma-ds .modes {
  display: flex; gap: 4px;
  border: 1px solid rgba(255,255,255,.1); border-radius: 4px; padding: 2px;
}
.sp-figma-ds .modes .m {
  flex: 1; padding: 5px 8px; text-align: center;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .04em;
  color: rgba(255,255,255,.5); border-radius: 2px;
}
.sp-figma-ds .modes .m.on { background: rgba(255,255,255,.08); color: #fff; }
.sp-figma-ds .drop {
  border: 1px dashed rgba(255,255,255,.18); border-radius: 4px;
  padding: 14px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: var(--f-mono); font-size: 10px; color: rgba(255,255,255,.5);
  text-align: center;
}
.sp-figma-ds .drop .dot {
  width: 10px; height: 10px; border-radius: 50%; background: #C9501E;
}
.sp-figma-ds .out {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--f-mono); font-size: 10px;
}
.sp-figma-ds .out .row {
  display: grid; grid-template-columns: 60px 14px 1fr;
  gap: 8px; align-items: center;
  padding: 5px 8px;
  background: rgba(255,255,255,.04);
  border-radius: 3px;
}
.sp-figma-ds .out .row span { color: rgba(255,255,255,.6); letter-spacing: .04em; }
.sp-figma-ds .out .row i {
  width: 12px; height: 12px; border-radius: 2px;
  display: inline-block;
}
.sp-figma-ds .out .row b { color: rgba(255,255,255,.85); font-weight: 500; }
.sp-figma-ds .out .row.gen {
  grid-template-columns: 1fr; color: rgba(255,255,255,.5);
}
.sp-figma-ds .out .row.gen em { font-family: var(--f-serif); font-style: italic; color: #C9501E; }

/* Figma Kanban MCP + Plugin */
.sp-kanban { background: #1B1E24; }
.sp-kanban img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Plyr players inside the side cards — fit the 16:10 preview box, just a play button */
.side-preview .plyr { width: 100%; height: 100%; --plyr-color-main: var(--accent); }
.side-preview .plyr--video { background: #1A1916; }
.side-preview .plyr__video-wrapper { height: 100% !important; padding-bottom: 0 !important; }
.side-preview .plyr__poster { background-size: contain; }

/* Food Truck Order Tracker — portrait clip, contained (no zoom/upscale) on a dark stage */
.sp-foodtruck { background: #1A1916; padding: 0; }
.sp-foodtruck .plyr video { width: 100%; height: 100%; object-fit: contain; }
.sp-foodtruck .plyr__poster { background-size: contain; }

/* AI Auto Design System — YouTube embed fills the box */
.sp-video { background: #000; padding: 0; }
.sp-video .plyr__video-embed,
.sp-video .plyr iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sp-video .plyr__poster { background-size: cover; }

/* Quietly · menubar focus app */
.sp-quietly {
  background: linear-gradient(180deg, #ECE9E1 0%, #DCD7C8 100%);
}
.sp-quietly .bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 22px;
  background: rgba(28,26,22,0.92);
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 14px;
  gap: 14px;
  font-family: var(--f-mono);
  font-size: 9px;
  color: rgba(255,255,255,0.6);
  letter-spacing: .06em;
}
.sp-quietly .bar .moon {
  width: 10px; height: 10px;
  background: #F2C46C;
  -webkit-mask: radial-gradient(circle at 70% 50%, transparent 4.5px, #000 4.6px);
          mask: radial-gradient(circle at 70% 50%, transparent 4.5px, #000 4.6px);
}
.sp-quietly .panel {
  width: 64%;
  background: rgba(255,255,255,0.95);
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 16px 40px -16px rgba(0,0,0,.18);
  padding: 14px 16px;
  margin-top: 24px;
}
.sp-quietly .panel .row {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--f-sans); font-size: 12px;
  padding: 6px 0;
}
.sp-quietly .panel .row + .row { border-top: 1px solid rgba(0,0,0,.05); }
.sp-quietly .panel .row .lbl { color: #1A1916; }
.sp-quietly .panel .row .v   { color: #6B6862; font-family: var(--f-mono); font-size: 10px; }
.sp-quietly .panel .row .toggle {
  width: 26px; height: 14px; border-radius: 999px;
  background: #1A1916; position: relative;
}
.sp-quietly .panel .row .toggle::after {
  content: ""; position: absolute; top: 2px; left: 14px;
  width: 10px; height: 10px; border-radius: 50%; background: #fff;
}

/* Half-light · figma plugin for low-vision preview */
.sp-halflight {
  background: #0F1216;
  position: relative;
}
.sp-halflight .grid {
  position: absolute; inset: 18px;
  background:
    linear-gradient(180deg, #1A1F26 0%, #0F1216 100%);
  border-radius: 4px;
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.sp-halflight .panel {
  background: #fff;
  border-radius: 3px;
  padding: 12px;
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
}
.sp-halflight .panel.dim {
  filter: blur(1.2px) contrast(0.6) brightness(0.85);
}
.sp-halflight .panel .ttl {
  font-family: var(--f-sans);
  font-size: 11px; font-weight: 500;
  color: #1A1916;
}
.sp-halflight .panel .line {
  height: 6px;
  background: #ECE9E1;
  border-radius: 2px;
}
.sp-halflight .panel .line.short { width: 60%; }
.sp-halflight .panel .btn {
  display: inline-block; align-self: flex-start; margin-top: 4px;
  padding: 4px 10px; border-radius: 999px;
  background: #C9501E; color: #fff;
  font-family: var(--f-mono); font-size: 8px; letter-spacing: .04em;
}
.sp-halflight .label {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  font-family: var(--f-mono); font-size: 8px; letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}

/* Letterforms · type specimen site */
.sp-letterforms {
  background: #F6F4EF;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.sp-letterforms .blk {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-serif);
  position: relative;
}
.sp-letterforms .a {
  background: #F6F4EF;
  color: #1A1916;
  font-size: 11vw;
  font-style: italic;
  line-height: 1;
  letter-spacing: -.03em;
}
.sp-letterforms .b {
  background: #C9501E;
  color: #F6F4EF;
  font-size: 11vw;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.04em;
}
@media (min-width: 1100px) {
  .sp-letterforms .a, .sp-letterforms .b { font-size: 120px; }
}
.sp-letterforms .blk .tag {
  position: absolute;
  bottom: 10px; left: 12px;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: currentColor;
  opacity: .55;
}

/* Field Notes · clinician journal */
.sp-fieldnotes {
  background: #FFFCF6;
  padding: 22px;
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
}
.sp-fieldnotes::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 36px;
  background: linear-gradient(90deg, rgba(0,0,0,.04), transparent);
  border-right: 1px dashed rgba(0,0,0,.12);
}
.sp-fieldnotes .date {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-left: 32px;
}
.sp-fieldnotes .note {
  padding-left: 32px;
  font-family: var(--f-serif);
  font-size: 15px;
  font-style: italic;
  color: var(--ink);
  line-height: 1.4;
}
.sp-fieldnotes .note b {
  font-family: var(--f-sans);
  font-style: normal;
  font-weight: 500;
  color: var(--accent);
}
.sp-fieldnotes .tag-row {
  padding-left: 32px;
  display: flex; gap: 6px;
  margin-top: 4px;
}
.sp-fieldnotes .tag {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .04em;
  padding: 3px 7px;
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--ink-soft);
}
.sp-fieldnotes .rule {
  border-top: 1px dashed rgba(0,0,0,.1);
  margin: 4px 0 4px 32px;
}

/* Cadence · walking loops tracker */
.sp-cadence {
  background: #1A1916;
  position: relative;
  color: #F1EFE9;
  overflow: hidden;
}
.sp-cadence svg {
  position: absolute; inset: 24px;
  width: calc(100% - 48px); height: calc(100% - 48px);
}
.sp-cadence .stats {
  position: absolute;
  bottom: 18px; left: 22px; right: 22px;
  display: flex; justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .04em;
}
.sp-cadence .stats div { display: flex; flex-direction: column; gap: 3px; }
.sp-cadence .stats .v { font-family: var(--f-serif); font-style: italic; font-size: 18px; color: #fff; line-height: 1; }
.sp-cadence .stats .l { color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .08em; font-size: 9px; }
.sp-cadence .badge {
  position: absolute; top: 18px; left: 22px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
}

/* ============================================================
   CASE STUDY PAGES
   ============================================================ */

.case-page { padding-top: 0; }

.case-back {
  padding: 28px 0 0;
}
.case-back a {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-mute);
  display: inline-flex; align-items: center; gap: 8px;
  transition: color .2s var(--ease);
}
.case-back a:hover { color: var(--ink); }
.case-back a .arr {
  display: inline-block; transition: transform .25s var(--ease);
}
.case-back a:hover .arr { transform: translateX(-3px); }

.case-hero {
  padding: 56px 0 64px;
}
.case-hero .eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-mute);
  margin-bottom: 36px;
}
.case-hero .eyebrow b { color: var(--ink); font-weight: 500; }
.case-hero .eyebrow .sep { opacity: .5; }
.case-hero h1 {
  margin: 0 0 28px;
  font-size: clamp(40px, 6.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -.03em;
  font-weight: 400;
  max-width: 18ch;
}
.case-hero h1 em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.015em;
}
.case-hero .lede {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: 56ch;
}
.case-meta {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-block: 24px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.case-meta dt {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0;
}
.case-meta dd {
  margin: 6px 0 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.005em;
}
.case-meta dd em { font-family: var(--f-serif); font-style: italic; font-weight: 400; }
@media (max-width: 720px) {
  .case-meta { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
}

.case-hero-mock {
  margin: 64px 0 0;
}
.case-hero-mock .frame {
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
}

/* Block — text + side */
.case-block {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 24px;
  padding: clamp(56px, 8vw, 88px) 0;
  border-top: 1px solid var(--rule);
}
.case-block .num {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.case-block .heading {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink);
  text-transform: uppercase;
  margin-top: 4px;
}
.case-block .body {
  min-width: 0;
}
.case-block h2 {
  margin: 0 0 28px;
  font-size: clamp(28px, 3.8vw, 44px);
  line-height: 1.08;
  letter-spacing: -.025em;
  font-weight: 400;
  max-width: 22ch;
}
.case-block h2 em { font-family: var(--f-serif); font-style: italic; font-weight: 400; }
.case-block p {
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 18px;
  max-width: 58ch;
  color: var(--ink-soft);
}
.case-block p.lead {
  font-family: var(--f-serif);
  font-size: 22px;
  font-style: italic;
  color: var(--ink);
  line-height: 1.4;
  margin-bottom: 28px;
}
.case-block p strong { color: var(--ink); font-weight: 500; }
.case-block ul, .case-block ol {
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  color: var(--ink-soft);
  max-width: 58ch;
}
.case-block ul li, .case-block ol li {
  padding: 12px 0;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  border-bottom: 1px solid var(--rule);
}
.case-block ul li::before, .case-block ol li::before {
  content: "▸";
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-mute);
  padding-top: 4px;
}
.case-block ol { counter-reset: c; }
.case-block ol li::before {
  counter-increment: c;
  content: counter(c, decimal-leading-zero);
  color: var(--ink);
}
.case-block .artwork {
  margin-top: 36px;
}
.case-block .artwork.full {
  margin-left: calc(-100px - 24px);
  width: calc(100% + 100px + 24px);
}

@media (max-width: 720px) {
  .case-block { grid-template-columns: 1fr; gap: 16px; }
  .case-block .artwork.full { margin-left: 0; width: 100%; }
}

/* Stats band */
.case-stats {
  padding: clamp(56px, 8vw, 88px) 0;
  border-top: 1px solid var(--rule);
}
.case-stats .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.case-stats .stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 0;
}
.case-stats .stat .lbl {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.case-stats .stat .num {
  font-size: clamp(48px, 6vw, 80px);
  line-height: 1;
  letter-spacing: -.04em;
  font-weight: 400;
  color: var(--ink);
}
.case-stats .stat .num em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.case-stats .stat .ctx {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 28ch;
}
@media (max-width: 720px) {
  .case-stats .grid { grid-template-columns: 1fr; gap: 12px; }
}

/* Inline figure caption */
.figure-cap {
  margin-top: 12px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-mute);
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.figure-cap .id { color: var(--ink); }

/* Quote in case */
.case-quote {
  padding: clamp(56px, 8vw, 88px) 0;
  border-top: 1px solid var(--rule);
}
.case-quote blockquote {
  margin: 0;
  font-size: clamp(22px, 3vw, 36px);
  line-height: 1.3;
  letter-spacing: -.015em;
  font-weight: 400;
  color: var(--ink);
  max-width: 28ch;
}
.case-quote blockquote em { font-family: var(--f-serif); font-style: italic; font-weight: 400; }
.case-quote .attr {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-mute);
}
.case-quote .attr .ava {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg-warm);
  border: 1px solid var(--rule);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink);
}
.case-quote .attr b { color: var(--ink); font-weight: 500; font-family: var(--f-sans); }

/* Pagination at bottom */
.case-pager {
  border-top: 1px solid var(--rule);
  padding: 36px 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}
.case-pager a {
  display: block;
  padding: 18px 0;
}
.case-pager .lbl {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: block;
  margin-bottom: 8px;
}
.case-pager .ttl {
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.05;
  letter-spacing: -.02em;
  font-weight: 500;
}
.case-pager .ttl em { font-family: var(--f-serif); font-style: italic; font-weight: 400; }
.case-pager .prev { text-align: left; }
.case-pager .next { text-align: right; }
.case-pager .prev .ttl::before { content: "← "; color: var(--ink-mute); }
.case-pager .next .ttl::after { content: " →"; color: var(--ink-mute); }
.case-pager a:hover .ttl { color: var(--accent); }
@media (max-width: 720px) {
  .case-pager { grid-template-columns: 1fr; }
  .case-pager .next { text-align: left; }
  .case-pager .next .ttl::after { display: none; }
  .case-pager .next .ttl::before { content: "→ "; color: var(--ink-mute); }
}

/* ============================================================
   CASE ARTIFACTS (sketches, diagrams, secondary mocks)
   ============================================================ */

.artifact {
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg);
}
.artifact .hd {
  padding: 10px 14px;
  background: var(--bg-warm);
  border-bottom: 1px solid var(--rule);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-mute);
  display: flex;
  justify-content: space-between;
}
.artifact .hd b { color: var(--ink); font-weight: 500; }
.artifact .pad { padding: 24px; }

/* Sketch — graph paper background */
.sketch {
  background:
    linear-gradient(var(--bg) 0 0),
    repeating-linear-gradient(0deg, rgba(0,0,0,.04) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.04) 0 1px, transparent 1px 22px);
  background-blend-mode: normal;
  position: relative;
  min-height: 320px;
}
.sketch svg { width: 100%; height: 100%; }
.sketch .scribble { font-family: "Caveat", "Comic Sans MS", cursive; }

/* Artifact grid */
.artifact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.artifact-grid .artifact { aspect-ratio: 4/5; display: flex; flex-direction: column; }
.artifact-grid .artifact .pad { flex: 1; padding: 18px; min-height: 0; }
@media (max-width: 720px) {
  .artifact-grid { grid-template-columns: 1fr; }
  .artifact-grid .artifact { aspect-ratio: auto; min-height: 320px; }
}

/* Big stat callouts inline in body */
.callout {
  margin: 24px 0;
  padding: 24px 28px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
  background: var(--bg-warm);
}
.callout p {
  margin: 0;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.4;
  color: var(--ink);
}

/* ============================================================
   PROCESS DIAGRAM
   ============================================================ */

.flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 28px 0;
}
.flow .step {
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 18px;
  background: var(--bg);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.flow .step .n {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: .04em;
}
.flow .step h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.flow .step h4 em { font-family: var(--f-serif); font-style: italic; font-weight: 400; }
.flow .step p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.flow .step:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--ink-mute);
  background: var(--bg);
  padding: 0 4px;
  z-index: 2;
}
@media (max-width: 720px) {
  .flow { grid-template-columns: 1fr; }
  .flow .step:not(:last-child)::after { display: none; }
}