:root {
  --paper: #e7e2d5;
  --paper-deep: #cdc8bb;
  --ink: #17211f;
  --muted: #59645f;
  --line: #7e8981;
  --panel: #263231;
  --panel-deep: #101716;
  --green: #74d88d;
  --amber: #d89e34;
  --red: #df5849;
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  min-width: 320px;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.65 system-ui, sans-serif;
}

a { color: inherit; }

.mono { font-family: ui-monospace, monospace; letter-spacing: .07em; }

.site-nav {
  position: sticky;
  z-index: 5;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  padding: 0 max(5%, calc((100% - 1160px) / 2));
  border-bottom: 1px solid #43504b;
  background: #1a2422;
  color: #edf2ec;
}

.site-brand { text-decoration: none; font: 700 15px ui-monospace, monospace; letter-spacing: .12em; }
.site-brand span { color: var(--amber); }
.site-brand-group { display:flex; align-items:center; gap:14px; min-width:0; }
.site-count { padding-left:14px; border-left:1px solid #53615c; color:#91a099; font:10px ui-monospace,monospace; letter-spacing:.1em; white-space:nowrap; }
.site-nav-links { display: flex; align-items: stretch; align-self: stretch; }
.site-nav-links a { display: grid; place-items: center; padding: 0 14px; color: #c8d0ca; text-decoration: none; font: 12px ui-monospace, monospace; letter-spacing: .08em; }
.site-nav-links a:hover, .site-nav-links a[aria-current="page"] { color: #18211e; background: var(--amber); }

.wrap { width: min(1160px, 90%); margin: auto; }

.intro {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  min-height: 590px;
  padding: 62px 0 68px;
}

.kicker { margin: 0 0 13px; color: #8e5f0e; font: 700 12px ui-monospace, monospace; letter-spacing: .14em; }
h1, h2, h3 { font-family: ui-monospace, monospace; letter-spacing: .04em; }
h1 { max-width: 720px; margin: 0; font-size: clamp(39px, 6vw, 74px); line-height: .99; }
.intro-copy { max-width: 650px; margin: 24px 0 0; font-size: 18px; }
.intro-copy strong { color: #8d4e17; }
.intro-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 29px; }
.button { display: inline-flex; min-height: 45px; align-items: center; justify-content: center; padding: 10px 16px; border: 1px solid #283531; border-radius: 3px; text-decoration: none; font: 700 12px "Courier New", monospace; letter-spacing: .09em; }
.button.primary { background: #1f2c29; color: #f4f0e4; }
.button.primary:hover { background: #344842; }
.button.secondary:hover { background: #d5d0c3; }

.machine-sketch { position: relative; min-height: 375px; padding: 23px; border: 1px solid #4a5852; background: var(--panel-deep); color: #dbe6df; box-shadow: 10px 10px 0 #b8b3a8; }
.machine-sketch::before { content: "INTERFACE STUDY / 01"; position: absolute; top: -26px; right: 0; color: #59645f; font: 11px "Courier New", monospace; letter-spacing: .1em; }
.sketch-plate { display: flex; justify-content: space-between; padding: 9px 12px; background: #bfc6bc; color: #14211d; font: 700 13px "Courier New", monospace; letter-spacing: .1em; }
.sketch-readout { margin: 24px 10px 18px; padding: 12px; border: 1px solid #30453d; color: var(--green); text-align: center; font: 700 25px "Courier New", monospace; letter-spacing: .2em; }
.lamp-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 11px; padding: 17px 10px 4px; }
.lamp { aspect-ratio: 1; border: 4px solid #07100f; border-radius: 50%; background: #172420; box-shadow: inset 0 2px 7px #000; }
.lamp:nth-child(2), .lamp:nth-child(5) { background: #e7614e; box-shadow: 0 0 18px #e7614e88; }
.switch-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 11px; padding: 0 10px; }
.switch { height: 55px; border: 1px solid #07100f; background: #080e0d; }
.switch::after { content: ""; display: block; width: 9px; height: 35px; margin: 6px auto; background: #b8c4bb; box-shadow: inset 2px 0 #6c7870; }
.machine-caption { margin: 21px 10px 0; color: #91a098; font: 11px "Courier New", monospace; letter-spacing: .08em; }

.band { border-top: 1px solid var(--line); }
.band-dark { background: #1b2523; color: #ecf1ec; border-color: #40504a; }
.band-inner { width: min(1160px, 90%); margin: auto; padding: 68px 0; }
.section-head { max-width: 740px; margin-bottom: 33px; }
.section-head h2 { margin: 0; font-size: clamp(26px, 3vw, 39px); line-height: 1.13; }
.section-head p { margin: 13px 0 0; color: inherit; opacity: .8; }

.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid #53625d; }
.principle { min-height: 220px; padding: 23px; border-right: 1px solid #53625d; }
.principle:last-child { border-right: 0; }
.number { color: var(--amber); font: 700 12px "Courier New", monospace; }
.principle h3 { margin: 33px 0 9px; font-size: 17px; }
.principle p { margin: 0; color: #b7c2bb; font-size: 14px; }

.exhibit-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.exhibit { grid-column: span 4; min-height: 330px; padding: 22px; border: 1px solid #859087; background: #eeeade; display: flex; flex-direction: column; }
.exhibit.featured { grid-column: span 12; min-height: 275px; background: #d9e0d7; }
.exhibit h3 { margin: 44px 0 10px; font-size: 22px; line-height: 1.1; }
.exhibit p { margin: 0; color: #45534d; font-size: 14px; }
.exhibit .tag { color: #75611b; font: 700 11px "Courier New", monospace; letter-spacing: .09em; }
.exhibit .meta { margin-top: auto; padding-top: 22px; color: #65726b; font: 11px "Courier New", monospace; letter-spacing: .07em; }
.exhibit a { margin-top: 18px; align-self: flex-start; }
.status { color: #5c645e; font: 11px "Courier New", monospace; letter-spacing: .08em; }
.not-found { min-height:calc(100vh - 58px); padding:clamp(70px,12vh,150px) 0; }
.not-found h1 { max-width:none; }
.not-found > p:not(.kicker) { max-width:620px; margin:24px 0; color:var(--muted); }

.method { display: grid; grid-template-columns: minmax(240px,.65fr) minmax(0,1fr); gap: 56px; }
.method h2 { margin: 0; font-size: 31px; line-height: 1.1; }
.method p { margin: 0; color:#c0cbc4; }
.method-intro { max-width:720px; margin-bottom:22px!important; }
.method-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid #4a5b54; }
.method-list li { display:grid; grid-template-columns:minmax(190px,220px) minmax(0,1fr); gap:24px; align-items:start; padding:17px 0; border-bottom: 1px solid #4a5b54; color: #bdc8c0; }
.method-list b { display:block; color: var(--amber); font: 12px/1.45 ui-monospace, monospace; letter-spacing:.05em; overflow-wrap:anywhere; }
.method-list span { display:block; line-height:1.65; }

footer { padding: 30px 5vw; background: #101716; color: #8b9890; font: 11px "Courier New", monospace; letter-spacing: .08em; }
.site-footer { display:flex; justify-content:space-between; gap:20px; width:100%; margin-top:0; text-align:left; }
.site-credit { color:#c6d0c9; }

@media (max-width: 760px) {
  .site-nav { padding: 0 5%; }
  .site-count { display:none; }
  .site-nav-links a { padding: 0 9px; font-size: 10px; }
  .intro { grid-template-columns: 1fr; min-height: 0; padding: 54px 0 70px; }
  .machine-sketch { min-height: 310px; }
  .principles { grid-template-columns: 1fr; }
  .principle { min-height: 0; border-right: 0; border-bottom: 1px solid #53625d; }
  .principle:last-child { border-bottom: 0; }
  .exhibit, .exhibit.featured { grid-column: span 12; min-height: 260px; }
  .method { grid-template-columns: 1fr; gap: 24px; }
  .method-list b { display: block; margin-bottom: 5px; }
  .method-list li { grid-template-columns:1fr; gap:4px; }
  .site-footer { flex-direction:column; gap:6px; }
}