:root {
  color-scheme: light;
  --paper: #f5f5f2;
  --ink: #20231f;
  --muted: #70756e;
  --line: #d9dcd5;
  --accent: #d96837;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.shell { min-height: 100vh; display: flex; flex-direction: column; }
.wrap { width: min(100% - 48px, 1120px); margin-inline: auto; }
.masthead {
  display:flex; align-items:center; justify-content:space-between;
  min-height:92px; border-bottom:1px solid var(--line);
}
.wordmark { font-size: 17px; font-weight: 760; letter-spacing: -.055em; text-decoration:none; }
.meta { color:var(--muted); font: 10px/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
main { flex:1; }
.hero {
  min-height: min(690px, calc(100vh - 160px));
  display:grid; grid-template-columns: minmax(0, 1fr) minmax(200px, .58fr);
  align-items:center; gap: clamp(36px, 9vw, 130px); padding-block:100px;
}
.kicker { display:flex; align-items:center; gap:10px; color:var(--muted); font:11px/1.5 var(--mono); letter-spacing:.09em; text-transform:uppercase; }
.dot { width:8px; height:8px; flex:0 0 auto; border-radius:50%; background:var(--accent); }
h1 { max-width:740px; margin:26px 0 25px; font-size:clamp(54px, 8.4vw, 108px); line-height:.94; letter-spacing:-.085em; font-weight:650; }
.lede { max-width:430px; margin:0; color:#5d625c; font-size:17px; line-height:1.75; }
.signal {
  align-self:center; min-height:290px; border-left:1px solid var(--line);
  padding:25px 0 25px 32px; display:flex; flex-direction:column; justify-content:space-between;
}
.signal-index { font:11px var(--mono); color:var(--muted); letter-spacing:.08em; }
.signal-mark { width:100%; max-width:210px; aspect-ratio:1; position:relative; margin:auto; }
.signal-mark:before, .signal-mark:after {
  content:""; position:absolute; inset:12%; border:1px solid #b9beb5; transform:rotate(45deg);
}
.signal-mark:after { inset:27%; transform:rotate(0deg); border-color:var(--accent); }
.signal-caption { color:var(--muted); font:10px/1.7 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.footer {
  min-height:72px; border-top:1px solid var(--line); display:flex; align-items:center;
  justify-content:space-between; gap:20px; color:var(--muted); font:10px/1.6 var(--mono); letter-spacing:.04em;
}
.projects-intro { padding:85px 0 58px; border-bottom:1px solid var(--line); }
.projects-intro h1 { font-size:clamp(52px, 8vw, 90px); margin:22px 0 20px; }
.projects-intro .lede { max-width:560px; }
.project-list { list-style:none; padding:0; margin:0; }
.project {
  display:grid; grid-template-columns:70px minmax(0,1fr) minmax(160px, 230px);
  gap:24px; align-items:start; padding:30px 0 32px; border-bottom:1px solid var(--line);
}
.project-number { padding-top:4px; font:11px var(--mono); color:#8a8f87; }
.project h2 { font-size:clamp(22px, 3vw, 30px); line-height:1.15; letter-spacing:-.05em; margin:0 0 10px; font-weight:620; }
.project p { margin:0; max-width:550px; color:#62675f; line-height:1.7; font-size:15px; }
.project-meta { display:flex; flex-direction:column; align-items:flex-start; gap:13px; }
.status { color:var(--muted); font:10px var(--mono); letter-spacing:.07em; text-transform:uppercase; }
.project-link { font-size:13px; text-decoration:none; border-bottom:1px solid #a8ada4; padding-bottom:4px; }
.project-link:hover { border-color:var(--accent); color:#9f4723; }
@media (max-width:700px) {
  .wrap { width:min(100% - 36px, 1120px); }
  .masthead { min-height:76px; }
  .meta { max-width:130px; text-align:right; }
  .hero { min-height:auto; grid-template-columns:1fr; gap:40px; padding-block:88px 74px; }
  h1 { font-size:clamp(56px, 15vw, 86px); }
  .signal { min-height:150px; padding:18px 0 18px 20px; gap:18px; }
  .signal-mark { width:110px; margin:4px 0; }
  .projects-intro { padding:65px 0 42px; }
  .project { grid-template-columns:34px minmax(0,1fr); gap:12px; padding:25px 0; }
  .project-meta { grid-column:2; flex-direction:row; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
  .footer { align-items:flex-start; justify-content:center; flex-direction:column; padding-block:20px; gap:5px; }
}
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: appear .7s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes appear { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; scroll-behavior:auto !important; } }