@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{--paper:#f2f1eb;--ink:#181916;--muted:#71716b;--orange:#eb510e;--line:#d4d4cd}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button,input,textarea{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--orange);outline-offset:6px}header{height:102px;position:relative;margin:0 4%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);z-index:30}.wordmark{font-size:22px;font-weight:600;line-height:1.03;letter-spacing:-1px;position:relative;padding-right:28px}.wordmark .orange{position:absolute;right:0;top:0;font-size:28px}#menuButton{border:0;background:transparent;display:flex;gap:14px;align-items:center;font-size:16px}.squares{display:grid;grid-template-columns:6px 6px;gap:4px}.squares i{height:6px;background:var(--orange)}#menuButton[aria-expanded=true] .squares{transform:rotate(45deg)}section{margin:0 4%;padding:95px 0 110px;border-bottom:1px solid var(--line)}.hero{padding-top:78px;min-height:calc(100svh - 102px);display:flex;flex-direction:column}.eyebrow,.mono,.hero-foot,.project-cat,.project-num,.detail-meta,.journey,footer,.art-top,.art-bottom{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:400;letter-spacing:.025em}.eyebrow{display:flex;gap:22px;font-size:12px}.eyebrow b{font-weight:400;color:var(--orange)}.eyebrow>span{color:#aaa}h1{font-size:clamp(72px,9.4vw,156px);line-height:.96;font-weight:500;letter-spacing:-.075em;margin:40px 0 46px}h1 em{font-style:normal;color:var(--orange)}.orange{color:var(--orange)}.hero-bottom{display:flex;justify-content:space-between;align-items:end}.hero p{font-size:17px;line-height:1.6;color:var(--muted);margin:0}.bracket{font-size:30px;line-height:1;font-weight:600;background:none;border:0;letter-spacing:-1.4px;text-align:left;position:relative;padding:0 25px}.bracket>span:first-child{position:absolute;left:0;color:var(--orange)}.bracket>span:last-child{color:var(--orange)}.hero-foot{display:flex;justify-content:space-between;align-items:center;margin-top:76px;font-size:10px}.dot{display:inline-block;background:var(--orange);width:7px;height:7px;margin-right:8px}.section-top{display:flex;justify-content:space-between}.mono{color:var(--muted)}.intro{display:grid;grid-template-columns:1.65fr 1fr;gap:12%;margin:35px 0 65px;align-items:end}h2{font-size:clamp(38px,4.7vw,74px);font-weight:500;letter-spacing:-.055em;line-height:1.04;margin:0}p{font-size:16px;line-height:1.65;color:var(--muted)}.intro p{max-width:330px;margin:0}.work-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:8%}.project{position:relative;display:block;width:100%;padding:27px 42px 27px 0;border:0;border-top:1px solid var(--line);background:none;text-align:left;transition:padding .2s,color .2s}.project:last-child{border-bottom:1px solid var(--line)}.project-title{display:block;font-size:clamp(23px,2.8vw,42px);font-weight:500;letter-spacing:-1.6px}.project-cat{display:block;margin-top:8px;color:var(--muted);font-size:9px}.project-num{position:absolute;right:0;top:33px;color:var(--muted)}.project.active,.project:hover{color:var(--orange);padding-left:18px}.project.active:before{content:'';width:6px;height:6px;position:absolute;left:0;top:43px;background:var(--orange)}.project-art{aspect-ratio:1.3;display:flex;flex-direction:column;justify-content:space-between;padding:26px;background:#e8d9c2;overflow:hidden;transition:background .25s}.art-top{font-size:8px}.art-main{font-size:clamp(26px,3.4vw,52px);line-height:1.05;letter-spacing:-2px;font-weight:600}.art-main em{font-style:normal;color:#c74411}.art-bottom{display:flex;justify-content:space-between;font-size:11px}.art-bottom span{font-size:22px}.art-1{background:#fff2dc}.art-1 .art-main{font-size:clamp(38px,5vw,80px);letter-spacing:-5px}.art-1 em{color:#9d3513}.art-2{background:#e6ebda}.art-2 em{color:#56714c}.art-3{background:#f2e2cd}.art-3 em{color:#9b4d35}.art-4{background:#e6cbbf}.art-4 em{color:#934a30}.art-5{background:#ddd9cf}.art-5 em{font-family:Georgia,serif;color:#53564b}.detail-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:8px;margin:20px 0}h3{font-size:23px;letter-spacing:-.7px;font-weight:500;margin:0}.project-detail p{font-size:14px;max-width:460px}.project-action,.text-link{display:inline-block;border-bottom:1px solid var(--orange);padding-bottom:6px;font-size:13px;margin-top:6px}.principles{margin-left:37%;border-top:1px solid var(--line)}details{border-bottom:1px solid var(--line);padding:23px 0}summary{display:flex;gap:25px;align-items:center;cursor:pointer;font-size:23px;letter-spacing:-.7px;list-style:none}summary::-webkit-details-marker{display:none}summary>span{font:11px 'IBM Plex Mono',monospace;color:var(--orange)}summary>b{margin-left:auto;font-size:22px;font-weight:400;color:var(--orange)}details[open] summary>b{transform:rotate(45deg)}details p{padding-left:40px;max-width:530px;font-size:14px;margin-bottom:4px}.about-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:15%;margin-top:40px}.founder-mark{width:100px;height:100px;border:1px solid var(--orange);font-size:64px;letter-spacing:-7px;line-height:1.4;margin-bottom:27px}.founder-mark span{color:var(--orange)}.about-grid h3{margin-bottom:12px}.about-grid p{font-size:14px}.journey{display:flex;gap:24px;align-items:center;margin-top:100px;font-size:9px}.journey div{height:1px;flex:1;background:var(--line)}.journey strong{font-family:'DM Sans',sans-serif;font-size:32px;letter-spacing:-1px;font-weight:500}#contact h2{font-size:clamp(65px,9vw,140px);margin-top:38px}.contact-bottom{display:flex;justify-content:space-between;align-items:end;margin-top:40px}.email{display:inline-block;margin-top:35px;border-bottom:1px solid var(--line);padding-bottom:8px;font-size:14px}footer{display:flex;justify-content:space-between;gap:20px;margin:0 4%;padding:27px 0;font-size:9px}#menu{position:fixed;inset:0;background:var(--paper);padding:145px 8% 50px;z-index:20}#menu a{display:flex;gap:25px;align-items:baseline;font-size:clamp(28px,5vw,70px);letter-spacing:-2px;border-bottom:1px solid var(--line);padding:12px 0}#menu a small{font:12px 'IBM Plex Mono',monospace;color:var(--orange);letter-spacing:0}#menu a>span{margin-left:auto;color:var(--orange)}body.menu-open{overflow:hidden}body.menu-open header{position:fixed;top:0;left:0;right:0}.skip{position:absolute;top:-60px;padding:15px;background:var(--ink);color:white;z-index:50}.skip:focus{top:0}a:hover{color:var(--orange)}@media(min-width:1700px){body{max-width:1800px;margin:auto}}@media(max-width:700px){header{height:85px;margin:0 6%}.wordmark{font-size:18px}section{margin:0 6%;padding:65px 0}.hero{padding-top:60px;min-height:calc(100svh - 85px)}h1{font-size:clamp(58px,12.5vw,90px);margin-top:35px}.hero-bottom{gap:30px;align-items:start;flex-direction:column}.hero p{font-size:14px}.bracket{font-size:25px;align-self:end}.hero-foot{margin-top:55px;font-size:8px;gap:15px}.hero-foot>span:nth-child(2){display:none}.intro{grid-template-columns:1fr;gap:25px;margin-bottom:35px}h2{font-size:39px}.intro p{font-size:14px}.work-grid{grid-template-columns:1fr;gap:35px}.project{padding:19px 35px 19px 0}.project-title{font-size:29px}.project-num{top:27px}.project.active:before{top:32px}.project-art{aspect-ratio:1.25}.art-main{font-size:42px}.art-1 .art-main{font-size:65px}.section-top .mono{font-size:8px}.principles{margin-left:0}summary{font-size:20px;gap:16px}details p{padding-left:30px}.about-grid{grid-template-columns:1fr;gap:40px}.about-grid h2{font-size:44px}.journey{gap:10px;margin-top:60px}.journey>span{font-size:7px}.journey strong{font-size:22px}.contact-bottom{align-items:start;gap:20px}.contact-bottom p{font-size:14px}footer{margin:0 6%;flex-wrap:wrap;font-size:8px}footer>span:nth-child(2){display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Signal and the transition into Selected Projects */
:root {
  --paper: #f0efe9;
  --orange: #c6420c;
  --signal-orange: #f36b28;
  --signal-text: #23140c;
  --gutter: clamp(24px, 4.2vw, 78px);
  --header-height: 66px;
}

header {
  height: var(--header-height);
  position: sticky;
  top: 0;
  margin-inline: 0;
  padding-inline: var(--gutter);
  background: var(--paper);
}
.wordmark { font-weight: 600; font-size: 18px; }
.wordmark br { display: none; }
.wordmark br::after { content: ' '; }
.signal-shell { position: relative; }
.signal-shell .hero {
  margin: 0;
  min-height: calc(100svh - var(--header-height));
  padding: clamp(64px, 11vh, 135px) var(--gutter) 36px;
  border: 0;
}
.hero-intro { width: 100%; }
.hero h1 {
  max-width: 13ch;
  font-size: clamp(64px, 7.7vw, 142px);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.064em;
  margin: clamp(24px, 4vh, 48px) 0 22px;
}
.hero p { max-width: 32rem; }
.hero-bottom {
  margin-top: auto;
  padding-top: 42px;
  flex-direction: row;
  align-items: end;
}
.hero-meta {
  font: 11px/1.4 'IBM Plex Mono', monospace;
}
.hero-bottom .bracket {
  font-size: clamp(22px, 2.2vw, 30px);
  padding-right: 0;
}
.signal-shell .signal-ink {
  display: none;
  position: absolute;
  inset: 0;
  background: var(--signal-orange);
  color: var(--signal-text);
  pointer-events: none;
  clip-path: inset(0 var(--signal-right, 36%) 0 var(--signal-left, 56%));
}
.signal-ink p, .signal-ink .orange, .signal-ink .eyebrow b,
.signal-ink .eyebrow > span, .signal-ink .bracket > span {
  color: var(--signal-text);
}
.signal-ink .dot { background: var(--signal-text); }
#work {
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--paper);
  color: var(--signal-text);
}
.work-inner {
  min-height: 100svh;
  padding: clamp(42px, 7vh, 80px) var(--gutter);
  background: var(--signal-orange);
}
#work.is-wiping .work-inner {
  clip-path: inset(0 var(--signal-right, 0px) 0 var(--signal-left, 0px));
}
#work :is(.orange, .eyebrow b, .eyebrow > span, p, .mono, .project-cat, .project-num, .detail-meta) {
  color: var(--signal-text);
}
#work .intro {
  grid-template-columns: minmax(0, 1fr) minmax(0, .58fr);
  gap: 5%;
  margin-bottom: 34px;
}
h2 { font-weight: 650; }
.work-grid { grid-template-columns: 1.45fr 1fr; gap: 6%; }
.project-list { position: relative; }
.project-list::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 27px;
  border-left: 1px solid #23140c59;
}
#work .project {
  display: grid;
  grid-template-columns: 55px minmax(0, 1fr);
  gap: 4px 14px;
  padding: 21px 32px 21px 0;
  border-color: #23140c59;
  color: var(--signal-text);
}
#work .project-title { grid-column: 2; font-size: clamp(20px, 2.3vw, 34px); }
#work .project-cat { grid-column: 2; margin-top: 0; }
#work .project-num {
  inset: 23px auto auto 9px;
  min-width: 36px;
  padding: 3px 4px;
  background: var(--signal-orange);
  border: 1px solid #23140c59;
  text-align: center;
}
#work .project.active .project-num { background: var(--signal-text); color: var(--signal-orange); }
#work .project.active::before { display: none; }
#work .project.active, #work .project:hover { background: #fff2; }
#work :is(a, button):focus-visible { outline-color: var(--signal-text); }
#work .project-detail { color: inherit; }
#work .project-detail:not([hidden]) { display: block; }
#work .project-action { border-color: var(--signal-text); }
#work .project-detail:is(:hover, :focus-visible) .project-action { text-decoration: underline; }
#work .project-art { aspect-ratio: 1.6; }
#approach, #about, #contact { min-height: 82svh; }
#menu { overflow-y: auto; }
body.menu-open header { position: sticky; }
@media (min-width: 768px) and (min-height: 600px) and (prefers-reduced-motion: no-preference) {
  .signal-shell .signal-ink { display: flex; }
}
@media (max-width: 767px) {
  .signal-shell .hero { padding-top: clamp(62px, 11vh, 100px); }
  .hero h1 { font-size: clamp(43px, 10vw, 71px); }
  .hero h1 br { display: none; }
  .hero h1 br::after { content: ' '; }
  .hero-bottom { gap: 20px; }
  .hero-meta { font-size: 9px; }
  #work .intro, .work-grid { grid-template-columns: 1fr; gap: 24px; }
  #work .project-art { aspect-ratio: 1.35; }
}

/* Keep section links and keyboard focus visible below the header. */
html { scroll-padding-top: var(--header-height); }

@media (max-width: 767px) {
  .project-list { overflow-anchor: none; }
  .project-list::before { display: none; }
  .project-list > .project-detail {
    padding: 12px 0 24px;
  }
  #work .project-list {
    border-bottom: 1px solid #23140c59;
  }
  #work .project:last-child { border-bottom: 0; }
}

@media (max-width: 767px) { .art-1 .art-main { font-size: clamp(42px, 14vw, 65px); } }

/* Small line arrows inherit the accent palette without relying on glyphs. */
.arrow {
  --arrow-angle: -45deg;
  display: inline-block;
  position: relative;
  width: .9em;
  height: .9em;
  color: var(--orange);
  vertical-align: -.02em;
  transform: rotate(var(--arrow-angle));
}
.arrow::before, .arrow::after { content: ''; position: absolute; }
.arrow::before {
  top: 50%;
  left: 5%;
  width: 85%;
  border-top: 1.5px solid;
  transform: translateY(-50%);
}
.arrow::after {
  top: 50%;
  right: 10%;
  width: 40%;
  height: 40%;
  border-top: 1.5px solid;
  border-right: 1.5px solid;
  transform: translateY(-50%) rotate(45deg);
}
.arrow-up { --arrow-angle: -90deg; }
.arrow-disclosure { --arrow-angle: 90deg; }
.arrow-disclosure::before { display: none; }
.project[aria-expanded="true"] .arrow-disclosure { --arrow-angle: -90deg; }
.wordmark-arrow { position: absolute; right: 0; top: 0; }
#work .arrow { color: var(--signal-text); }
#work .arrow-disclosure { position: absolute; top: 27px; right: 13px; }

.signal-shell .hero {
  min-height: calc(82svh - var(--header-height));
  padding-top: clamp(32px, 5vh, 66px);
  padding-bottom: 26px;
}
.hero-bottom { padding-top: clamp(28px, 5vh, 52px); }
.hero h1 { margin-top: clamp(20px, 3vh, 34px); }

#work .work-grid { display: block; }
#work .project-list {
  overflow-anchor: none;
  border-bottom: 1px solid #23140c59;
}
#work .project-list::before,
#work .project:last-child { border-bottom: 0; }
#work .project-list > .project-detail { padding: 12px 0 27px 69px; }
#work .project-detail > * { max-width: 34rem; }

@media (max-width: 767px) {
  .signal-shell .hero { min-height: calc(68svh - var(--header-height)); }
  #work .project-list > .project-detail { padding-left: 0; }
}