:root {
  --ink: #191b16;
  --yellow: #e6f17c;
  --muted: #53583a;
  --rule: rgba(25, 27, 22, .3);
  --sans: Arial, Helvetica, sans-serif;
  --nav-height: 86px;
  --edge: clamp(26px, 4vw, 64px);
}
* { box-sizing: border-box; }
html { background: var(--yellow); }
body { margin: 0; background: var(--yellow); color: var(--ink); font: 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased; overflow: hidden; }
[hidden] { display: none !important; }
h1, h2, h3, h4, p, figure { margin: 0; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.1; letter-spacing: -.045em; }
a { color: inherit; text-underline-offset: 5px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
button, input, select { font: inherit; color: inherit; }
button, select { cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--ink); color: var(--yellow); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 10; padding: 12px 18px; background: var(--ink); color: var(--yellow); }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.view-stage { height: calc(100vh - var(--nav-height)); height: calc(100dvh - var(--nav-height)); overflow: hidden; }
.page-view { height: 100%; overflow-y: auto; overscroll-behavior-y: contain; }

/* The five flush-left lines spell B–I–T–C–H down the title. */
.landing { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: clamp(36px, 5vw, 84px); max-width: 1660px; margin: auto; padding: 48px var(--edge); }
.landing h1 { font-size: clamp(52px, 6.6vw, 105px); font-weight: 600; line-height: 1; letter-spacing: -.06em; text-align: left; }
.landing h1 > span { display: block; }
.landing-logo { width: min(100%, 560px); justify-self: end; }

/* Plain, lowercase links stay together at the bottom left. */
.landing-links { position: fixed; z-index: 5; inset: auto 0 0; min-height: var(--nav-height); padding: 23px var(--edge) max(23px, env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: flex-start; gap: 34px; background: var(--yellow); font-size: 22px; line-height: 1.4; }
.section-links { display: flex; align-items: center; gap: 34px; }
.landing-links a { display: inline-block; padding: 4px 0; background: none; border: 0; text-decoration: none; }
.landing-links a:hover, .landing-links a[aria-selected="true"] { text-decoration: underline; text-decoration-thickness: 2px; }

/* Centered tab content on the yellow canvas. */
.content-view { display: flex; flex-direction: column; padding: 48px var(--edge) 64px; outline: none; }
.panel-content { width: 100%; max-width: 1120px; margin-inline: auto; }
#research > .panel-content { max-width: none; }
.reading-panel { margin-block: auto; padding-block: clamp(12px, 4vh, 48px); }
.page-intro { margin-bottom: 42px; }
.page-intro > h2 { font-size: clamp(44px, 5.3vw, 76px); line-height: 1.04; letter-spacing: -.055em; }
.prose > p { font-size: clamp(23px, 2.1vw, 29px); line-height: 1.5; letter-spacing: -.018em; }
.prose > p + p { margin-top: 28px; }
.project-sites { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 28px; font-size: 24px; }
.research-program { margin-top: 60px; }
.research-program + .research-program { margin-top: 90px; }
.research-program > h3 { font-size: clamp(38px, 4.5vw, 62px); margin-bottom: 30px; }
.program-intro { max-width: 960px; margin-bottom: 38px; }
.program-intro > p { font-size: 21px; line-height: 1.6; }
.program-intro > p + p { margin-top: 25px; }
.program-intro > .program-question { font-size: clamp(24px, 2.3vw, 31px); line-height: 1.4; letter-spacing: -.025em; }
.project-directory { display: block; }
.project { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 31%); gap: 40px; align-items: center; padding: 38px 0 42px; border-top: 1px solid var(--rule); }
.project h4 { font-size: clamp(34px, 4vw, 53px); line-height: 1.06; letter-spacing: -.045em; margin-bottom: 18px; overflow-wrap: break-word; }
.project-description { max-width: 56ch; font-size: 20px; line-height: 1.5; }
.project h4, .project-description { text-transform: lowercase; }
.project-credit { font-size: 18px; margin-top: 16px; overflow-wrap: anywhere; }
.project-graphic { width: 100%; height: auto; }
.contact-address { overflow-wrap: anywhere; }

/* Full-width newspaper layout: two programs across, one project list in each. */
@media (min-width: 960px) {
  #research > .panel-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px clamp(40px, 5vw, 88px); align-items: start; }
  #research .page-intro { grid-column: 1 / -1; margin-bottom: 0; }
  .research-program, .research-program + .research-program { margin-top: 0; min-width: 0; }
  .research-program > h3 { font-size: clamp(40px, 3.8vw, 62px); }
  .project { grid-template-columns: minmax(0, 1fr) minmax(100px, 28%); gap: clamp(18px, 2vw, 32px); }
  .project h4 { font-size: clamp(34px, 2.8vw, 49px); }
}

@media (max-width: 800px) {
  :root { --edge: 26px; --nav-height: 78px; }
  .landing { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 32px var(--edge); }
  .landing h1 { font-size: clamp(36px, 7.8vw, 62px); text-align: left; }
  .landing-logo { width: 235px; flex-shrink: 0; }
  .landing-links { font-size: 20px; gap: 27px; padding-top: 20px; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .section-links { gap: 27px; }
  .content-view { padding-top: 35px; }
  .reading-panel { padding-block: 10px; }
  .page-intro > h2 { font-size: 48px; }
  .page-intro { margin-bottom: 32px; }
  .project { gap: 28px; grid-template-columns: minmax(0, 1fr) minmax(160px, 30%); }
  .project h4 { font-size: 36px; }
}
@media (max-width: 600px) {
  .project { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding: 30px 0 36px; }
  .project-graphic { width: min(100%, 300px); }
  .project-description { font-size: 19px; }
  .program-intro > p { font-size: 20px; }
  .program-intro > .program-question { font-size: 25px; }
  .research-program { margin-top: 44px; }
  .research-program + .research-program { margin-top: 62px; }
}
@media (max-width: 440px) {
  :root { --edge: 21px; --nav-height: 72px; }
  .landing { gap: 25px; padding-top: 26px; padding-bottom: 26px; }
  .landing h1 { font-size: clamp(30px, 9.1vw, 40px); }
  .landing-logo { width: 220px; }
  .landing-links { font-size: 17px; gap: 16px; padding-top: 19px; padding-bottom: max(19px, env(safe-area-inset-bottom)); }
  .section-links { gap: 16px; }
  .page-intro > h2 { font-size: 42px; }
  .project-sites { font-size: 22px; }
  .research-program > h3 { font-size: 36px; }
  .project h4 { font-size: 34px; }
  .prose > p { font-size: 23px; }
}
@media (max-height: 640px) and (max-width: 800px) {
  .landing { justify-content: flex-start; }
}