:root {
  --ink: #111814;
  --paper: #f4f1e8;
  --white: #fffef9;
  --lime: #d8ff57;
  --blue: #2155f5;
  --orange: #ff6a2a;
  --muted: #5c625e;
  --line: #111814;
  --max: 1180px;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
button { font: inherit; }
::selection { background: var(--lime); color: var(--ink); }

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 99;
  transform: translateY(-160%); padding: .7rem 1rem;
  background: var(--ink); color: white;
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .9rem max(1rem, calc((100vw - var(--max)) / 2));
  border-bottom: 2px solid var(--line); background: rgba(244,241,232,.96);
  backdrop-filter: blur(12px);
}
.wordmark { font-weight: 900; text-decoration: none; letter-spacing: -.05em; font-size: 1.25rem; }
.wordmark span { color: var(--blue); }
.site-nav { display: flex; align-items: center; gap: .45rem; }
.site-nav a { padding: .45rem .65rem; font: 700 .76rem/1 var(--mono); text-decoration: none; text-transform: uppercase; letter-spacing: .04em; }
.site-nav a:hover, .site-nav a:focus-visible { background: var(--lime); }
.nav-toggle { display: none; border: 2px solid var(--ink); background: var(--white); padding: .45rem .65rem; font: 700 .76rem/1 var(--mono); }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 46px; padding: .72rem 1rem; border: 2px solid var(--ink);
  background: var(--ink); color: white; text-decoration: none;
  font: 800 .8rem/1 var(--mono); text-transform: uppercase; letter-spacing: .03em;
  box-shadow: 4px 4px 0 var(--blue); transition: transform .15s, box-shadow .15s;
}
.button:hover, .button:focus-visible { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--blue); }
.button--light { background: var(--white); color: var(--ink); box-shadow: 4px 4px 0 var(--orange); }

.wrap { width: min(calc(100% - 2rem), var(--max)); margin-inline: auto; }
.eyebrow { margin: 0 0 .8rem; font: 800 .72rem/1.25 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.eyebrow::before { content: "↳ "; color: var(--blue); }
.section { padding: clamp(4rem, 8vw, 7rem) 0; border-bottom: 2px solid var(--line); }
.section-title { max-width: 900px; margin: 0 0 2rem; font-size: clamp(2.3rem, 6vw, 5.6rem); line-height: .94; letter-spacing: -.065em; }
.section-lede { max-width: 730px; margin: 0 0 2.4rem; font-size: clamp(1.08rem, 2vw, 1.35rem); color: #2e3531; }

.hero { min-height: calc(100vh - 66px); display: grid; align-items: end; padding: clamp(4rem, 10vw, 8rem) 0 2.4rem; border-bottom: 2px solid var(--line); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(260px,.65fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.hero h1 { margin: 0; max-width: 940px; font-size: clamp(4rem, 9vw, 9rem); line-height: .8; letter-spacing: -.085em; }
.hero h1 em { display: block; color: var(--blue); font-family: Georgia, serif; font-weight: 400; }
.hero-copy { margin: 2rem 0; max-width: 780px; font-size: clamp(1.15rem, 2.2vw, 1.55rem); line-height: 1.35; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; }
.hero-aside { border: 2px solid var(--ink); background: var(--white); box-shadow: 8px 8px 0 var(--orange); }
.hero-aside h2 { margin: 0; padding: .8rem 1rem; background: var(--ink); color: white; font: 800 .72rem/1 var(--mono); text-transform: uppercase; }
.hero-aside ul { list-style: none; margin: 0; padding: 0; }
.hero-aside li { padding: .8rem 1rem; border-top: 1px solid var(--ink); font-weight: 750; }
.status { display: flex; gap: .6rem; align-items: center; margin-top: 1.4rem; font: 700 .72rem/1.35 var(--mono); }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: #20a555; box-shadow: 0 0 0 4px rgba(32,165,85,.18); }

.signal-strip { border-bottom: 2px solid var(--line); background: var(--lime); }
.signal-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.signal { padding: 1.35rem; border-right: 1px solid var(--ink); }
.signal:last-child { border-right: 0; }
.signal strong { display: block; font-size: clamp(1.5rem, 3vw, 2.6rem); line-height: 1; letter-spacing: -.05em; }
.signal span { font: 700 .68rem/1.3 var(--mono); text-transform: uppercase; }

.case-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 1.1rem; }
.case-card {
  position: relative; grid-column: span 6; min-height: 490px;
  display: flex; flex-direction: column; border: 2px solid var(--ink);
  background: var(--white); text-decoration: none; overflow: hidden;
}
.case-card:first-child { grid-column: span 12; min-height: 560px; }
.case-card:hover .case-image img { transform: scale(1.025); }
.case-image { min-height: 210px; flex: 1; overflow: hidden; background: #d9ded9; border-bottom: 2px solid var(--ink); }
.case-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.case-card:first-child .case-image { min-height: 300px; }
.case-visual { display: grid; place-items: center; height: 100%; min-height: 210px; padding: 2rem; background: var(--blue); color: white; }
.case-visual strong { font-size: clamp(3rem, 8vw, 7rem); letter-spacing: -.08em; }
.case-body { padding: 1.25rem; }
.case-meta { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; font: 700 .68rem/1.3 var(--mono); text-transform: uppercase; }
.case-body h3 { max-width: 800px; margin: 0 0 .6rem; font-size: clamp(1.55rem, 3vw, 2.45rem); line-height: 1; letter-spacing: -.045em; }
.case-body p { margin: 0; max-width: 820px; color: #444c47; }
.tag-row { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: 1rem; }
.tag { padding: .35rem .5rem; border: 1px solid var(--ink); font: 700 .65rem/1 var(--mono); text-transform: uppercase; background: var(--paper); }

.capability-grid { display: grid; grid-template-columns: repeat(5,1fr); border: 2px solid var(--ink); }
.capability { min-height: 240px; padding: 1.2rem; border-right: 1px solid var(--ink); background: var(--white); }
.capability:last-child { border-right: 0; }
.capability .num { color: var(--blue); font: 900 .75rem/1 var(--mono); }
.capability h3 { margin: 4.5rem 0 .7rem; font-size: 1.25rem; line-height: 1.05; letter-spacing: -.03em; }
.capability p { margin: 0; font-size: .92rem; color: var(--muted); }

.evidence-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(2rem,7vw,7rem); }
.evidence-list { border-top: 2px solid var(--ink); }
.evidence-row { display: grid; grid-template-columns: 120px 1fr; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--ink); }
.evidence-row strong { font: 800 .72rem/1.3 var(--mono); text-transform: uppercase; color: var(--blue); }
.evidence-row p { margin: 0; }

.career { display: grid; grid-template-columns: 170px 1fr 1fr; gap: 1.3rem; padding: 1.3rem 0; border-top: 1px solid var(--ink); }
.career:last-child { border-bottom: 1px solid var(--ink); }
.career time { font: 700 .7rem/1.4 var(--mono); }
.career h3 { margin: 0; font-size: 1.25rem; }
.career p { margin: 0; color: var(--muted); }

.contact { background: var(--blue); color: white; }
.contact .eyebrow::before { color: var(--lime); }
.contact-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 2rem; align-items: end; }
.contact h2 { margin: 0; max-width: 850px; font-size: clamp(3.2rem, 8vw, 7.8rem); line-height: .83; letter-spacing: -.075em; }
.contact-links { display: grid; gap: .75rem; }
.contact-links a { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid white; font: 800 .8rem/1 var(--mono); text-decoration: none; text-transform: uppercase; }
.contact-links a:hover { color: var(--lime); }

.site-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1.2rem max(1rem,calc((100vw - var(--max))/2)); background: var(--ink); color: white; font: 700 .68rem/1.4 var(--mono); text-transform: uppercase; }

/* Case study */
.case-hero { padding: clamp(4rem,9vw,8rem) 0 2.5rem; border-bottom: 2px solid var(--ink); }
.case-hero h1 { max-width: 1050px; margin: 0; font-size: clamp(3.5rem,8vw,7.6rem); line-height: .86; letter-spacing: -.075em; }
.case-hero .lede { max-width: 820px; margin: 1.8rem 0; font-size: clamp(1.15rem,2vw,1.45rem); }
.case-facts { display: grid; grid-template-columns: repeat(4,1fr); border: 2px solid var(--ink); background: var(--white); }
.case-facts div { padding: 1rem; border-right: 1px solid var(--ink); }
.case-facts div:last-child { border-right: 0; }
.case-facts dt { font: 800 .65rem/1.2 var(--mono); text-transform: uppercase; color: var(--blue); }
.case-facts dd { margin: .4rem 0 0; font-weight: 750; }
.case-cover { border-bottom: 2px solid var(--ink); background: #cdd6d0; }
.case-cover img { width: 100%; max-height: 720px; object-fit: cover; }
.case-cover--contain { padding: clamp(1rem,4vw,4rem); background: var(--ink); }
.case-cover--contain img { object-fit: contain; }
.case-section { padding: clamp(3rem,7vw,6rem) 0; border-bottom: 1px solid var(--ink); }
.case-section-grid { display: grid; grid-template-columns: .65fr 1.35fr; gap: clamp(2rem,8vw,8rem); }
.case-section h2 { margin: 0; font-size: clamp(2rem,4vw,4rem); line-height: .95; letter-spacing: -.055em; }
.case-copy { max-width: 760px; }
.case-copy > *:first-child { margin-top: 0; }
.case-copy h3 { margin-top: 2rem; font-size: 1.3rem; }
.case-copy ul { padding-left: 1.2rem; }
.metric-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .8rem; margin: 1.7rem 0; }
.metric { padding: 1rem; border: 2px solid var(--ink); background: var(--white); }
.metric strong { display: block; color: var(--blue); font-size: clamp(1.7rem,4vw,3rem); line-height: 1; letter-spacing: -.05em; }
.metric span { display: block; margin-top: .5rem; font: 700 .65rem/1.35 var(--mono); text-transform: uppercase; }
.artifact-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; }
.artifact-grid figure { margin: 0; border: 2px solid var(--ink); background: var(--white); }
.artifact-grid img { width: 100%; aspect-ratio: 16/10; object-fit: contain; background: #eef0eb; }
.artifact-grid figcaption { padding: .7rem; border-top: 1px solid var(--ink); font: 700 .68rem/1.35 var(--mono); }
.constraint { padding: 1.2rem; border: 2px solid var(--ink); background: var(--lime); }
.next-case { display: flex; justify-content: space-between; gap: 1rem; align-items: center; text-decoration: none; }
.next-case strong { font-size: clamp(1.8rem,4vw,3.5rem); letter-spacing: -.05em; }

/* Archive */
.archive-list { border-top: 2px solid var(--ink); }
.archive-item { display: grid; grid-template-columns: 160px 1fr auto; gap: 1rem; padding: 1.2rem 0; border-bottom: 1px solid var(--ink); align-items: start; }
.archive-item time, .archive-item .type { font: 700 .68rem/1.3 var(--mono); text-transform: uppercase; }
.archive-item h2 { margin: 0 0 .35rem; font-size: 1.2rem; }
.archive-item p { margin: 0; color: var(--muted); }

@media (max-width: 860px) {
  .hero-grid, .evidence-grid, .contact-grid, .case-section-grid { grid-template-columns: 1fr; }
  .signal-grid { grid-template-columns: repeat(2,1fr); }
  .signal:nth-child(2) { border-right: 0; }
  .signal:nth-child(-n+2) { border-bottom: 1px solid var(--ink); }
  .capability-grid { grid-template-columns: 1fr 1fr; }
  .capability { border-bottom: 1px solid var(--ink); }
  .capability:nth-child(2n) { border-right: 0; }
  .capability:last-child { grid-column: 1/-1; border-bottom: 0; }
  .case-facts { grid-template-columns: 1fr 1fr; }
  .case-facts div:nth-child(2) { border-right: 0; }
  .case-facts div:nth-child(-n+2) { border-bottom: 1px solid var(--ink); }
  .career { grid-template-columns: 130px 1fr; }
  .career p { grid-column: 2; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .site-header { align-items: center; }
  .nav-toggle { display: block; }
  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 1rem; background: var(--paper); border-bottom: 2px solid var(--ink); flex-direction: column; align-items: stretch; }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: .8rem; }
  .hero { min-height: auto; }
  .hero h1 { font-size: clamp(3.7rem,18vw,6rem); }
  .case-card, .case-card:first-child { grid-column: span 12; min-height: 440px; }
  .capability-grid, .case-facts, .metric-grid, .artifact-grid { grid-template-columns: 1fr; }
  .capability, .capability:nth-child(2n), .case-facts div, .case-facts div:nth-child(2) { border-right: 0; }
  .capability:last-child { grid-column: auto; }
  .case-facts div:nth-child(3) { border-bottom: 1px solid var(--ink); }
  .career, .archive-item { grid-template-columns: 1fr; }
  .career p { grid-column: auto; }
  .archive-item .type { justify-self: start; }
  .site-footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}