* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--paper); background: #171713; font: 1rem/1.62 var(--sans); }
a { color: inherit; text-decoration: underline; text-underline-offset: 0.23em; border-bottom: 0; }
.hero-panel a:hover, .relief a:hover, .mast a:hover, .foot a:hover { color: #edcb90; }
p { color: inherit; }
img, canvas { display: block; width: 100%; height: auto; }
figure, h1, h2, p, dl { margin: 0; }
.wrap { width: min(1220px, calc(100% - clamp(32px, 10vw, 160px))); margin-inline: auto; }
.mast, .foot { display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; padding-block: 1.25rem; }
.mast { border-bottom: 1px solid #535047; }
.mast a, .mast > span, .foot, .eyebrow { font-size: 0.71rem; letter-spacing: 0.14em; }
.mast a { text-decoration: none; }
.mark { color: #f0c983; margin-inline: 0.36rem; }
.eyebrow { color: #edcb90; font-weight: 600; }
.light-dot { display: inline-block; width: 0.45rem; height: 0.45rem; margin-right: 0.28rem; border-radius: 50%; background: #edcb90; vertical-align: 0.09em; }
.hero { display: grid; grid-template-columns: 0.9fr 1fr; align-items: center; gap: clamp(2rem, 7vw, 8rem); padding-block: clamp(3rem, 8vw, 7.5rem); }
.hero-copy { display: grid; justify-items: start; gap: 1.35rem; }
h1, h2 { color: inherit; font-family: var(--serif); font-weight: 300; letter-spacing: -0.045em; }
h1 { font-size: clamp(3.3rem, 7.1vw, 8rem); line-height: 0.94; }
h1 em { display: block; color: #ebc888; }
h2 { font-size: clamp(2.65rem, 5.5vw, 5.15rem); line-height: 0.99; }
.hero-copy > p:not(.eyebrow), .section-lead > p { max-width: 34ch; }
.hero-copy > p:not(.eyebrow) { color: #e2d9c9; }
.jump { display: inline-flex; gap: 0.75rem; align-items: baseline; margin-top: 0.6rem; font-size: 0.85rem; }
.jump span { color: #edcb90; }
.hero-image img { border: 1px solid #6e665b; }
figcaption { font-size: 0.76rem; line-height: 1.5; padding-top: 0.7rem; }
figcaption span { margin-right: 0.55rem; font-size: 0.67rem; font-weight: 600; letter-spacing: 0.12em; }
.hero-image figcaption span, .relief figcaption span { color: #edcb90; }
.bench, .evidence, .relief, .context { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.bench { background: #eee4d3; color: #28251f; }
.evidence, .context { color: #292620; }
main { background: #f7f0e3; }
.hero-panel { background: #171713; }
.bench .eyebrow, .evidence .eyebrow, .context .eyebrow, .bench figcaption span, .evidence figcaption span, .context figcaption span { color: #853e2e; }
.section-lead { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem 3.6rem; margin-block: 1rem 2rem; }
.section-lead > p { flex: 0 0 min(38%, 34ch); padding-bottom: 0.18rem; }
.control { display: inline-flex; flex-wrap: wrap; border: 1px solid #736456; margin-bottom: 1.3rem; }
.control button { padding: 0.72rem 1.02rem; color: #302a20; background: transparent; border: 0; font: inherit; font-size: 0.82rem; cursor: pointer; }
.control button[aria-pressed="true"] { color: #fff4df; background: #312b22; }
.bench-grid { display: grid; grid-template-columns: 2fr 1fr; align-items: start; gap: 0.8rem; }
.diagram canvas { background: #211d18; }
.specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 1.7rem; border-block: 1px solid #9d8e7b; }
.specs div { padding: 0.85rem 1rem; }
.specs div + div { border-left: 1px solid #b3a493; }
.specs dt { color: #5d4b3a; font-size: 0.72rem; font-weight: 600; }
.specs dd { margin: 0; font-size: 0.91rem; }
.score dd { font-family: var(--serif); font-size: clamp(1.1rem, 3vw, 2.4rem); line-height: 1.4; white-space: nowrap; }
.score small { font-family: var(--sans); font-size: 0.65rem; }
.measurement { max-width: 70ch; margin-top: 1rem; color: #5d4b3a; font-size: 0.88rem; }
.strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; }
.relief { background: #211d18; }
.relief .section-lead > p, .relief .links { color: #e2d9c9; }
.surface-grid { display: grid; grid-template-columns: 1.57fr 1fr; align-items: start; gap: 0.9rem; }
.surface-grid canvas { background: #161612; }
.depth { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; margin-top: 0.9rem; font-size: 0.77rem; }
.depth input { width: 9rem; accent-color: #edcb90; }
.depth output { min-width: 2em; color: #edcb90; }
.links { display: flex; flex-wrap: wrap; gap: 0.7rem 1.5rem; padding-top: 1.45rem; font-size: 0.85rem; }
.context-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; align-items: start; gap: 0.8rem; }
.foot { color: #ddd1be; }
@media (max-width: 850px) {
  .hero { gap: 2rem; }
  .section-lead { display: grid; }
  .section-lead > p { max-width: 50ch; }
  .score dd { white-space: normal; }
}
@media (max-width: 580px) {
  .mast, .foot { gap: 0.7rem; }
  .mast a, .mast > span { font-size: 0.6rem; letter-spacing: 0.09em; }
  .hero, .bench-grid, .surface-grid, .context-grid { grid-template-columns: 1fr; }
  .bench-grid, .surface-grid, .context-grid { gap: 1.4rem; }
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .specs div:nth-child(3) { border-left: 0; }
  .specs div:nth-child(n+3) { border-top: 1px solid #b3a493; }
  .strip { gap: 0.4rem; }
  .strip figcaption { font-size: 0.7rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }