:root {
  color-scheme: light dark;
  --paper:#f4f2ec;
  --surface:#fbfaf6;
  --ink:#171c20;
  --muted:#697177;
  --line:#d5d2c9;
  --accent:#e65337;
  --focus:#0b69d4;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:#111619;
    --surface:#171d21;
    --ink:#f0ede5;
    --muted:#aab2b6;
    --line:#394147;
    --accent:#ff7157;
    --focus:#83b9ff;
  }
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"IBM Plex Sans",sans-serif;
  line-height:1.55;
}
a { color:inherit; text-underline-offset:3px; }
:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.shell { width:min(1080px,calc(100% - 48px)); margin:0 auto; }
#work,#about { scroll-margin-top:76px; }

.site-header {
  position:sticky;
  top:0;
  z-index:20;
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(12px);
}
.header-inner {
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}
.wordmark {
  color:var(--ink);
  text-decoration:none;
  font:700 20px/1 "Barlow Condensed",sans-serif;
  letter-spacing:.01em;
}
.site-header nav { display:flex; gap:24px; }
.site-header nav a {
  color:var(--muted);
  text-decoration:none;
  font-size:12px;
  font-weight:600;
}
.site-header nav a:hover { color:var(--ink); }

.hero {
  min-height:500px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding-top:100px;
  padding-bottom:72px;
  border-bottom:1px solid var(--line);
}
.eyebrow {
  margin:0 0 16px;
  color:var(--accent);
  font:600 10px/1 "IBM Plex Mono",monospace;
  text-transform:uppercase;
  letter-spacing:.12em;
}
.hero h1 {
  max-width:900px;
  margin:0;
  font:700 clamp(54px,7.5vw,88px)/.93 "Barlow Condensed",sans-serif;
  letter-spacing:-.025em;
}
.lede {
  max-width:660px;
  margin:28px 0 0;
  color:var(--muted);
  font-size:17px;
}

.work { padding:84px 0 100px; }
.section-heading {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,.58fr);
  gap:52px;
  align-items:end;
  margin-bottom:28px;
}
.section-heading h2,
.about h2 {
  margin:0;
  font:700 clamp(38px,5vw,56px)/.95 "Barlow Condensed",sans-serif;
  letter-spacing:-.015em;
}
.section-heading > p {
  margin:0;
  color:var(--muted);
  font-size:13px;
}
.project-timeline {
  position:relative;
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--line);
}
.project-timeline::before {
  content:"";
  position:absolute;
  top:34px;
  bottom:34px;
  left:17px;
  width:1px;
  background:var(--line);
}
.timeline-item {
  position:relative;
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  gap:24px;
  padding:30px 0;
  border-bottom:1px solid var(--line);
}
.timeline-marker {
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:1px;
}
.timeline-marker::before {
  content:"";
  position:absolute;
  top:7px;
  left:50%;
  width:9px;
  height:9px;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--paper);
  transform:translateX(-50%);
}
.timeline-marker span {
  margin-top:24px;
  color:var(--muted);
  font:500 9px/1 "IBM Plex Mono",monospace;
}
.timeline-project {
  display:grid;
  grid-template-columns:minmax(250px,.85fr) minmax(300px,1.15fr);
  gap:42px;
  color:inherit;
  text-decoration:none;
}
.timeline-heading h3 {
  margin:0 0 7px;
  font:700 29px/1 "Barlow Condensed",sans-serif;
}
.project-type,
.project-description { margin:0; }
.project-type {
  color:var(--muted);
  font:500 10px/1.45 "IBM Plex Mono",monospace;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.project-description {
  max-width:620px;
  color:var(--muted);
  font-size:13px;
}
.project-arrow { color:var(--accent); font-weight:700; }

.coming-soon { color: var(--accent); font-weight: 600; }
.timeline-item-link .timeline-project { transition:transform .16s ease; }
.timeline-item-link .timeline-project:hover { transform:translateX(6px); }
.timeline-item-link:hover .timeline-marker::before { border-color:var(--accent); }

.about {
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(300px,1.1fr);
  gap:80px;
  padding-top:84px;
  padding-bottom:84px;
  border-top:1px solid var(--line);
}
.about-copy { padding-top:28px; }
.about-copy p {
  max-width:620px;
  margin:0 0 18px;
  color:var(--muted);
  font-size:15px;
}
.footer {
  border-top:1px solid var(--line);
  padding:24px 0 36px;
}
.footer-inner {
  display:flex;
  justify-content:space-between;
  gap:36px;
  color:var(--muted);
  font:500 10px/1.5 "IBM Plex Mono",monospace;
}
.footer-identity,
.footer-legal {
  display:flex;
  flex-direction:column;
  gap:4px;
}
.footer-legal {
  max-width:620px;
  text-align:right;
}
.footer strong { color:var(--ink); font-weight:600; }

@media (max-width:860px) {
  .section-heading,.about { grid-template-columns:1fr; gap:22px; }
  .timeline-project { grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr); gap:30px; }
  .about-copy { padding-top:0; }
}
@media (max-width:640px) {
  .shell { width:min(100% - 30px,1080px); }
  .header-inner { min-height:54px; }
  .site-header nav { gap:16px; }
  .hero { min-height:420px; padding-top:76px; padding-bottom:50px; }
  .hero h1 { font-size:clamp(50px,15vw,72px); }
  .lede { font-size:15px; }
  .work { padding:64px 0 76px; }
  .timeline-item { grid-template-columns:30px minmax(0,1fr); gap:16px; padding:24px 0; }
  .project-timeline::before { left:14px; top:29px; bottom:29px; }
  .timeline-marker::before { top:6px; }
  .timeline-marker span { margin-top:22px; }
  .timeline-project { grid-template-columns:1fr; gap:13px; }
  .timeline-heading h3 { font-size:27px; }
  .timeline-item-link .timeline-project:hover { transform:none; }
  .about { padding-top:64px; padding-bottom:64px; }
  .footer-inner { flex-direction:column; gap:16px; }
  .footer-legal { text-align:left; }
  .footer-inner { flex-direction:column; gap:5px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .timeline-item-link .timeline-project { transition:none; }
}