:root {
  --paper: #ffffff;
  --ink: #1c1c1c;
  --grey: #595959;
  --rule: #d9d9d9;
  --mute: #8a8a8a;
  --accent: #c8102e;
  --mono: "Courier Prime", "Courier New", Courier, monospace;
  --panel-w: 320px;
  --shrink: 0;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); font-family: var(--mono); font-size: 13px; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--grey); }
h1, h2, h3 { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 0; }
h1 { font-size: 38px; letter-spacing: .18em; line-height: 1; }
h1 small { display: block; font-size: 11px; letter-spacing: .3em; margin-top: 8px; }
h2 { font-size: 13px; }
p { margin: 0 0 1em; max-width: 60ch; }
.mute { color: var(--mute); }
.caps { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; }
.btn { display: inline-block; border: 1px solid var(--ink); padding: 6px 12px; font-family: inherit; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; background: var(--paper); color: var(--ink); cursor: pointer; }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.btn.ghost { border-color: var(--rule); color: var(--grey); }
.btn.ghost:hover, .btn.ghost[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn:disabled { opacity: .35; cursor: default; }
input[type=checkbox] { accent-color: var(--ink); width: 14px; height: 14px; }

/* ---- home ------------------------------------------------------------------- */
.page { position: relative; min-height: 100vh; padding: 48px 32px 64px; }
header.top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 32px; flex-wrap: wrap; }
.landing { max-width: 760px; margin: 0 auto; }
#map { width: 100%; height: auto; display: block; }
#map .state { fill: none; stroke: var(--grey); stroke-width: .8; }
#map .site { cursor: pointer; }
#map .site rect { fill: var(--paper); stroke: var(--ink); stroke-width: .9; }
#map .site rect.hit { fill: transparent; stroke: none; }
#map .site text { font-family: var(--mono); font-size: 7.5px; letter-spacing: .06em; text-transform: uppercase; fill: var(--ink); pointer-events: none; opacity: 0; }
#map .site:hover rect, #map .site.active rect { stroke: var(--accent); stroke-width: 1.4; }
#map .site:hover text, #map .site.active text { opacity: 1; }

/* ---- site page: app layout --------------------------------------------------- */
/* Desktop: the bar is fixed at the top, the viewer fills the rest of the screen,
   and only the side panel scrolls. */
body.app { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
.bar { flex: none; background: var(--paper); z-index: 20; padding: 0 24px; }
.bar-top { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0 14px; }
.brand { font-weight: 700; font-size: 20px; letter-spacing: .18em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.brand small { display: block; font-size: 9px; letter-spacing: .3em; margin-top: 4px; }
/* the place bar under the title: name, coordinates, Take me there; previous / next on the right */
.site-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; border-bottom: 1px solid var(--rule); padding-bottom: 12px; }
.site-head h2 { font-size: 14px; letter-spacing: .2em; }
.meta { color: var(--grey); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.8; }
.site-head .meta { margin-top: 4px; }
.site-head .go { margin-top: 10px; }
.pn { display: flex; gap: 16px; font-size: 10px; white-space: nowrap; }
.pn a { max-width: 24ch; overflow: hidden; text-overflow: ellipsis; }
.app-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--panel-w); }

/* viewer column: stage fills it; rail docks left, sun bar docks at the bottom */
.viewer { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--paper); }
.stage { position: relative; flex: 1; min-height: 0; container-type: size; overflow: hidden; --pad: 56px; }
.plate { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(100cqw - 2 * var(--pad), 100cqh - 2 * var(--pad)); aspect-ratio: 1; }
.plate canvas { display: block; width: 100%; height: 100%; cursor: zoom-in; }
/* crop marks at the corners of the image, after the book */
.cm { position: absolute; width: 14px; height: 14px; border: 0 solid var(--grey); pointer-events: none; }
.cm.tl { left: -24px; top: -24px; border-right-width: 1px; border-bottom-width: 1px; }
.cm.tr { right: -24px; top: -24px; border-left-width: 1px; border-bottom-width: 1px; }
.cm.bl { left: -24px; bottom: -24px; border-right-width: 1px; border-top-width: 1px; }
.cm.br { right: -24px; bottom: -24px; border-left-width: 1px; border-top-width: 1px; }
.plate .label { position: absolute; left: 0; top: calc(100% + 8px); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.stage #view3d { position: absolute; inset: 0; display: none; }
.stage #view3d canvas { display: block; width: 100%; height: 100%; }
.stage.mode-3d #view3d { display: block; }
.stage.mode-3d .plate { visibility: hidden; }
.stage .loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--mute); background: var(--paper); z-index: 3; }
.stage .expand { position: absolute; bottom: 20px; right: 24px; z-index: 2; width: 28px; height: 28px; border: 1px solid var(--rule); background: rgba(255,255,255,.85); color: var(--grey); font-size: 16px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s; }
.stage:hover .expand { opacity: 1; }
@media (hover: none) { .stage .expand { opacity: 1; } }

.rail { display: none; position: absolute; left: 24px; top: 0; bottom: 0; margin: auto 0; height: fit-content; z-index: 4; flex-direction: column; align-items: center; gap: 8px; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }
.stage.mode-3d ~ .rail { display: flex; }
.stage.plot ~ .rail { display: none; }

/* 3-axis plot: axis pickers stacked at the top left of the viewer */
.plotbar { display: none; position: absolute; top: 20px; left: 24px; z-index: 4; flex-direction: column; gap: 6px; background: rgba(255,255,255,.92); border: 1px solid var(--rule); padding: 8px 12px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }
.stage.mode-3d.plot ~ .plotbar { display: flex; }
.plotbar label { display: grid; grid-template-columns: 14px 1fr; align-items: center; gap: 8px; }
.plotbar label > span:first-child { color: var(--ink); font-weight: 700; }
.plotbar label.chk { grid-template-columns: 14px 1fr; }
.plotbar label.chk:first-of-type { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--rule); }
.plotbar label.chk input { margin: 0; }
.plotbar label.chk span { color: var(--grey); font-weight: 400; }
.plotbar select { font-family: inherit; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); padding: 3px 4px; min-width: 120px; }
@media (max-width: 860px) { .plotbar { top: 8px; left: 8px; gap: 4px; padding: 6px 8px; } }
.rail input[type=range] { writing-mode: vertical-lr; direction: rtl; height: min(260px, 32vh); width: 18px; margin: 0; accent-color: var(--ink); cursor: ns-resize; }
.rail .rail-label { writing-mode: vertical-rl; transform: rotate(180deg); }
.rail .rail-val { font-variant-numeric: tabular-nums; color: var(--ink); min-width: 3ch; text-align: center; }

.sunbar { display: none; flex: none; border-top: 1px solid var(--rule); padding: 10px 24px 8px 56px; background: var(--paper); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); z-index: 4; }
.stage.mode-3d ~ .sunbar { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.sunbar label { display: grid; grid-template-columns: 38px 1fr 52px; align-items: center; gap: 10px; }
.sunbar input[type=range] { width: 100%; accent-color: var(--ink); }
.sunbar output { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.sunbar .sun-pos { grid-column: 1 / -1; text-align: right; color: var(--mute); font-size: 9px; margin-top: 2px; }

/* side panel scrolls on its own */
.panel { min-height: 0; overflow-y: auto; overflow-x: hidden; border-left: 1px solid var(--rule); padding: 18px 20px 28px; font-size: 12px; overscroll-behavior: contain; }
.m-info, .m-actions, .m-brand { display: none; }
.panel .tabs { display: flex; gap: 6px; margin-bottom: 18px; }
.panel .tabs .btn { flex: 1; text-align: center; }
.layers { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.layer { display: grid; grid-template-columns: 44px 1fr auto; grid-template-areas: "thumb name toggle" "thumb desc desc" "thumb slider slider"; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--rule); align-items: center; }
.layer .thumb { grid-area: thumb; width: 44px; height: 44px; object-fit: cover; border: 1px solid var(--rule); cursor: pointer; }
.layer .thumb:hover { border-color: var(--ink); }
.layer .name { grid-area: name; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; }
.layer .desc { grid-area: desc; color: var(--mute); font-size: 10.5px; line-height: 1.4; }
.layer .toggle { grid-area: toggle; }
.layer .slider { grid-area: slider; display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--grey); }
.layer .slider input { flex: 1; accent-color: var(--ink); height: 2px; }
.layer.off .thumb { opacity: .25; }
.layer.off .name { color: var(--mute); }
.layer.solo .name { color: var(--accent); }
/* the two Landsat layers sit between Color and Hydrology, set apart by darker rules */
.layer.extra + .layer:not(.extra), .layer:not(.extra) + .layer.extra { border-top: 1px solid var(--grey); }
.panel .actions { display: flex; gap: 8px; margin-top: 14px; }
.panel .actions > * { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 4px; padding-right: 4px; font-size: 10px; letter-spacing: .06em; }
.panel .d3 { display: none; margin-top: 18px; border-top: 1px solid var(--rule); padding-top: 12px; }
.panel.mode-3d .d3 { display: block; }
.panel .d3 label { display: block; margin: 10px 0 4px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }
.panel .d3 input[type=range] { width: 100%; accent-color: var(--ink); }
.panel .d3 .stat { display: flex; justify-content: space-between; border-bottom: 1px dotted var(--rule); padding: 4px 0; font-size: 11px; }

/* full screen: the viewer alone fills the screen */
.stage .fs-bar { display: none; }
body.fs .viewer { position: fixed; inset: 0; z-index: 50; }
.viewer:fullscreen { width: 100%; height: 100%; }
body.fs .stage .expand { display: none; }
body.fs .plate canvas { cursor: zoom-out; }
body.fs .stage .fs-bar { display: flex; gap: 8px; position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 4; }
body.fs .stage .fs-bar .btn { background: rgba(255,255,255,.9); }
body.fs .stage .fs-bar .btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
body.fs .stage { --pad: 64px; }

/* ---- phone ------------------------------------------------------------------- */
/* The page scrolls. The bar shrinks to the place name; the image stays pinned under
   it and shrinks a little (--shrink, set from scroll) while the panel scrolls beneath. */
@media (max-width: 860px) {
  .page { padding: 40px 16px 48px; }
  h1 { font-size: 28px; }
  body.app { height: auto; overflow: visible; display: block; }
  .bar { position: sticky; top: 0; padding: 0 16px; }
  .bar-top, .site-head .meta, .site-head .place .go, .site-head .pn { display: none; }
  .site-head { padding: 8px 0; align-items: center; gap: 12px; }
  .site-head .place { min-width: 0; }
  /* on a phone the sticky bar carries the brand; the place name sits with its details below the image */
  .site-head h2 { display: none; }
  .m-brand { display: block; font-size: 13px; letter-spacing: .18em; }
  .m-brand small { font-size: 7px; letter-spacing: .3em; margin-top: 3px; }
  .m-info h2 { font-size: 16px; letter-spacing: .18em; text-transform: uppercase; margin: 0; }
  .m-actions { display: flex; gap: 6px; flex: none; align-items: center; }
  .m-actions .btn { margin: 0; }
  .m-actions .btn { padding: 5px 9px; font-size: 9.5px; letter-spacing: .08em; white-space: nowrap; }
  .app-main { display: block; }
  .viewer { position: sticky; top: var(--bar-h, 41px); z-index: 10; border-bottom: 1px solid var(--rule); }
  .stage { flex: none; height: calc(100vw - var(--shrink) * 34vw); --pad: 26px; }
  .cm { width: 10px; height: 10px; }
  .cm.tl, .cm.tr, .cm.bl, .cm.br { --o: -16px; }
  .cm.tl { left: var(--o); top: var(--o); } .cm.tr { right: var(--o); top: var(--o); }
  .cm.bl { left: var(--o); bottom: var(--o); } .cm.br { right: var(--o); bottom: var(--o); }
  .plate .label { display: none; }
  .stage .expand { top: auto; bottom: 6px; right: 6px; width: 24px; height: 24px; font-size: 13px; border-color: transparent; background: transparent; }
  .rail { left: 6px; }
  .rail input[type=range] { height: min(200px, 48vw); }
  /* the sun bar docks to the bottom of the screen */
  .stage.mode-3d ~ .sunbar { position: fixed; left: 0; right: 0; bottom: 0; grid-template-columns: 1fr; row-gap: 2px; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -1px 0 var(--rule); }
  .panel { border-left: 0; overflow: visible; padding: 16px 16px 32px; }
  .panel.mode-3d { padding-bottom: 120px; }
  .m-info { display: block; border-bottom: 1px solid var(--rule); padding-bottom: 14px; margin-bottom: 16px; }
  .m-info .meta { margin: 10px 0 12px; line-height: 1.8; }
  .m-info .pn { justify-content: space-between; margin-top: 12px; }
  body.fs .stage { flex: 1; height: auto; }
}
/* axis labels for the 3-axis plot, placed each frame from 3D anchors */
.axlbl { position: absolute; left: 0; top: 0; z-index: 3; transform-origin: 0 0; pointer-events: none; display: flex; flex-direction: column; align-items: flex-start; text-align: left; white-space: nowrap; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; background: rgba(255,255,255,.8); padding: 2px 5px; }
.axlbl b { color: var(--ink); font-weight: 700; }
.axlbl i { color: var(--mute); font-style: normal; font-size: 9px; letter-spacing: .08em; }
.axlbl.tag { font-size: 9px; padding: 1px 5px; }

/* view presets at the top right of the 3D view */
.views { display: none; position: absolute; top: 20px; right: 24px; z-index: 4; flex-direction: column; gap: 4px; }
.stage.mode-3d .views { display: flex; }
.vbtn { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--rule); background: rgba(255,255,255,.9); color: var(--grey); cursor: pointer; padding: 0; }
.vbtn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }