:root{
  --bg:#ffffff;
  --ink:#000000;
  --text:#111111;
  --muted:#666666;
  --soft:#8a8a8a;
  --line:#e5e7eb;
  --border:#d4d4d4;
  --chip:#f3f4f6;
  --chip-ink:#374151;
  --watermark:#ededed;
  /* Side padding that caps content at a 1280px container on wide screens.
     % here resolves against the full-width element it is used on. */
  --gutter:max(clamp(20px, 5vw, 48px), calc((100% - 1280px) / 2));
  --read:760px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#000000;
    --ink:#ffffff;
    --text:#ededed;
    --muted:#a1a1a1;
    --soft:#8a8a8a;
    --line:#1f1f1f;
    --border:#333333;
    --chip:#1a1a1a;
    --chip-ink:#d4d4d4;
    --watermark:#1a1a1a;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#000000;
  --ink:#ffffff;
  --text:#ededed;
  --muted:#a1a1a1;
  --soft:#8a8a8a;
  --line:#1f1f1f;
  --border:#333333;
  --chip:#1a1a1a;
  --chip-ink:#d4d4d4;
  --watermark:#1a1a1a;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
/* room for the fixed header; header.js measures it */
body{padding-top:var(--head-h, 112px)}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
a:hover{text-decoration-color:var(--ink)}

p{margin:0 0 12px}
ul,ol{margin:0 0 12px;padding-left:18px}
li{margin:0 0 6px}
li::marker{color:var(--soft)}

.muted{color:var(--muted)}
.small{font-size:14px}

/* ---------- home ---------- */
.home{padding:0 var(--gutter) 160px}

/* The hero fills the screen below the header, at least. If its content is taller
   (small phones), it simply grows. */
.hero{
  min-height:calc(100vh - var(--head-h, 112px));
  min-height:calc(100svh - var(--head-h, 112px));
  display:flex;flex-direction:column;
  padding:72px 0 88px; /* the minimum space above and below */
}

/* auto margins centre the statement in whatever height is left; the practice line stays at the bottom */
.statement{
  margin:auto 0;
  /* sized so the longest line ("That is why mine survive handoff.", ~14.1em wide)
     fits the column on one line: 80px on desktop, smaller on phones */
  font-size:clamp(22px, calc((100vw - 2 * clamp(20px, 5vw, 48px)) / 14.6), 80px);font-weight:500;
  line-height:1.05;letter-spacing:-0.04em;
  color:var(--ink);
}
/* one quiet line: role first, the rest as dot-separated context */
.practice{
  display:flex;flex-wrap:wrap;gap:4px 0;
  margin:72px 0 0;padding:0;list-style:none;
  font-size:16px;color:var(--muted);
}
.practice li{margin:0;white-space:nowrap}
.practice li:first-child{color:var(--ink);font-weight:500}
/* the dot belongs to the item before it, so a wrapped line never starts with one */
.practice li:not(:last-child)::after{content:"\00B7";margin:0 10px;color:var(--soft)}

.block{margin-top:120px}
.block-title,.page .block-title{
  margin:0 0 16px;
  font-size:clamp(36px, 5.2vw, 64px);font-weight:500;letter-spacing:-0.035em;line-height:1.1;
  color:var(--ink);
}
.block-sub{font-size:16px;color:var(--muted);max-width:var(--read);margin:0}
.block-more{font-size:14px;font-weight:500;margin-top:24px}
.cases-more{
  display:flex;justify-content:center;
  margin-top:80px;padding-top:80px;border-top:1px solid var(--line);
}
.read.read-lg{padding:16px 28px;font-size:15px}
.page .cases{margin-top:56px}

/* case study rows */
.cases{list-style:none;margin:96px 0 0;padding:0;counter-reset:case}
.case{padding:0 0 80px;margin:0 0 80px;border-bottom:1px solid var(--line);counter-increment:case}
/* big faint number behind each case study; it counts whatever order the list is in */
.case::before{
  content:counter(case, decimal-leading-zero);
  display:block;margin-bottom:-0.42em;
  font-size:clamp(72px, 9vw, 128px);font-weight:600;letter-spacing:-0.05em;line-height:1;
  color:var(--watermark);
  user-select:none;pointer-events:none;
}
.case > *{position:relative}
.case:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.case-title{
  display:block;margin:0 0 20px;
  font-size:clamp(26px, 3vw, 32px);font-weight:600;letter-spacing:-0.5px;line-height:1.2;
  color:var(--ink);text-decoration:none;
}
.case-desc{font-size:18px;line-height:1.6;color:var(--soft);max-width:var(--read);margin:0 0 24px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 36px;padding:0;list-style:none}
.tags li{margin:0;padding:5px 10px;background:var(--chip);color:var(--chip-ink);font-size:12px;font-weight:500;line-height:1.3}
/* quiet rectangular button: visible, never louder than the content */
.read{
  display:inline-flex;align-items:center;gap:6px;
  padding:11px 18px;
  border:1px solid var(--border);
  font-size:13px;font-weight:500;line-height:1.2;
  color:var(--ink);text-decoration:none;
}
.read:hover{border-color:var(--ink)}
.read:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* every link that leaves the site says so */
a[target="_blank"]::after{content:"\2197";margin-left:.3em;font-size:.9em}

/* ---------- projects hero ---------- */
.proj-hero{
  min-height:calc(100vh - var(--head-h, 112px));
  min-height:calc(100svh - var(--head-h, 112px));
  display:flex;flex-direction:column;justify-content:center;
  padding:72px 0 96px;
}
.page .proj-hero h1{
  font-size:clamp(40px, 7vw, 80px);line-height:1.05;letter-spacing:-0.04em;margin:0 0 28px;max-width:none;
}
.proj-hero .lead{font-size:clamp(17px, 1.6vw, 20px);line-height:1.55;color:var(--muted);max-width:620px;margin:0 0 40px}
.proj-ctas{display:flex;flex-wrap:wrap;gap:12px}
.page .proj-hero + .block{margin-top:0}
/* the hero is the page top: no extra padding above it */
.page.has-hero{padding-top:0}
html.smooth{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html.smooth{scroll-behavior:auto} }

/* ---------- inner pages (work, journey, projects) ---------- */
.page{padding:96px var(--gutter) 160px}
.page > *{max-width:var(--read)}
.page h1{
  margin:0 0 16px;
  font-size:clamp(36px, 5vw, 56px);font-weight:500;line-height:1.08;letter-spacing:-0.035em;
  color:var(--ink);
}
.page h2{margin:72px 0 16px;font-size:14px;font-weight:400;color:var(--muted)}
.page h3{margin:64px 0 8px;font-size:clamp(24px, 3vw, 32px);font-weight:600;letter-spacing:-0.5px;line-height:1.2;color:var(--ink)}
.lead{font-size:18px;color:var(--soft);max-width:var(--read)}

hr{border:0;border-top:1px solid var(--line);margin:72px 0 24px}

.rows{list-style:none;padding:0;margin:0}
.rows > li{margin:0 0 28px}
.row-head{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.row-head b{font-weight:600;color:var(--ink);font-size:18px;letter-spacing:-0.2px}
.row-head .when{color:var(--soft);font-size:14px;white-space:nowrap;font-variant-numeric:tabular-nums}
.rows p{margin:2px 0 0;color:var(--muted)}

.stats{display:flex;flex-wrap:wrap;gap:16px 48px;margin:40px 0 8px;padding:0;list-style:none}
.stats li{margin:0}
.stats b{display:block;font-size:32px;font-weight:500;letter-spacing:-1px;color:var(--ink);line-height:1.2}
.stats span{color:var(--muted);font-size:14px}


figure{margin:48px 0}
.page > figure{max-width:1000px}

/* case study pages: one 640px reading column, centred */
.page.reading > *,.page.reading > figure{max-width:640px;margin-left:auto;margin-right:auto}
figure img{display:block;width:100%;height:auto;border:1px solid var(--line)}
figcaption{color:var(--muted);font-size:14px;margin-top:8px}

.pager{display:flex;justify-content:space-between;gap:16px;font-size:14px;font-weight:500}
.pager a{text-decoration:none}
.pager a:hover{text-decoration:underline}

/* ---------- journey timeline ---------- */
.page > .timeline{max-width:960px}
.timeline{
  --date:120px; --gap:48px;
  position:relative;margin-top:72px;
}
/* the line runs between the date column and the content */
.timeline::before{
  content:"";position:absolute;top:8px;bottom:0;
  left:calc(var(--date) + var(--gap) / 2);width:1px;background:var(--line);
}
.tl-group-head,.tl-item{
  display:grid;grid-template-columns:var(--date) 1fr;column-gap:var(--gap);
  position:relative;
}
.tl-group-head{margin:0 0 40px;align-items:baseline}
.tl-group + .tl-group .tl-group-head{margin-top:96px}
.tl-list{list-style:none;margin:0;padding:0}
.tl-item{margin:0 0 40px}

.tl-date{
  text-align:right;padding-top:4px;
  font-size:12px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--soft);white-space:nowrap;
}
.tl-group-head::before,.tl-item::before{
  content:"";position:absolute;
  left:calc(var(--date) + var(--gap) / 2);transform:translateX(-50%);
  border-radius:50%;background:var(--bg);
}
.tl-item::before{top:9px;width:7px;height:7px;border:1px solid var(--soft)}
.tl-item.is-case::before{background:var(--ink);border-color:var(--ink)}
.tl-group-head::before{top:12px;width:11px;height:11px;border:1.5px solid var(--ink)}

.timeline .tl-where{margin:0;font-size:28px;font-weight:500;letter-spacing:-0.5px;line-height:1.2;color:var(--ink)}
.tl-role{margin:4px 0 0;font-size:14px;color:var(--muted)}

.timeline .tl-title{margin:0 0 10px;font-size:18px;font-weight:600;letter-spacing:-0.2px;line-height:1.3;color:var(--ink)}
.tl-body .tags{margin-bottom:14px}
.tl-body p{margin:0;color:var(--muted);max-width:620px}
.tl-body .read{margin-top:24px}

.tl-item.is-case .tl-body{border:1px solid var(--line);padding:28px 32px}
.tl-item.is-case .tl-title{font-size:22px;letter-spacing:-0.4px}
.tl-item.is-case .tl-body p{color:var(--text);font-size:17px}
.tl-item.is-case .tl-date{padding-top:28px}
.tl-item.is-case::before{top:33px}

.tl-item.is-failed .tl-title{color:var(--muted)}
.tags .tag-failed{background:none;border:1px solid var(--line);color:var(--muted)}

@media (max-width:760px){
  .timeline{--date:0px;--gap:0px;margin-top:48px}
  .timeline::before{left:5px}
  .tl-group-head,.tl-item{display:block;padding-left:32px}
  .tl-group-head::before,.tl-item::before{left:5px}
  .tl-date{display:block;text-align:left;padding:0 0 6px}
  .tl-group-head .tl-date{padding-bottom:4px}
  .tl-group-head::before{top:4px}
  .tl-item::before{top:6px}
  .tl-item.is-case .tl-date{padding-top:0}
  .tl-item.is-case::before{top:6px}
  .tl-item.is-case .tl-body{padding:20px}
  .timeline .tl-where{font-size:24px}
}

/* ---------- the slim bottom bar ---------- */
.lensbar{
  position:fixed;left:0;right:0;bottom:0;
  background:var(--bg);
  border-top:1px solid var(--line);
  font-size:13px;
}
.lensbar-in{
  padding:12px var(--gutter);
  display:flex;align-items:center;gap:22px;
  white-space:nowrap;overflow-x:auto;scrollbar-width:none;
}
.lensbar-note{color:var(--soft)}
/* the choices and Present use the header's .navlink style (header.css);
   choices that aren't picked sit back a little */
.lensbar button.navlink[aria-pressed="false"]{color:var(--muted)}
.lensbar button.navlink[aria-pressed="false"]:hover{color:var(--ink)}
.lensbar-present{margin-left:auto}

/* phones: the choices become one dropdown */
.lens-pick{position:relative;display:inline-flex;align-items:center;margin-left:auto;color:var(--ink)}
.lens-pick select{
  appearance:none;-webkit-appearance:none;
  background:none;padding:3px 18px 3px 0;margin:0;border-radius:0;
}
.lens-pick select:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.lens-pick svg{position:absolute;right:2px;pointer-events:none}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Presentation mode and the row of choices are desktop things. */
@media (min-width:761px){
  .mobile-only{display:none !important}
}
@media (max-width:760px){
  .desktop-only{display:none !important}
}

@media (max-width:760px){
  .page{padding-top:72px}
  .hero{padding:48px 0 80px}
  .practice{margin-top:56px}
  .block{margin-top:96px}
  .cases{margin-top:56px}
  .case{padding-bottom:48px;margin-bottom:48px}
  .case-desc{font-size:16px}
  .row-head{flex-direction:column;gap:0}
}