/* Fig 1, Anatomy of a land project. Isometric kit styles (Anatomy skill, light theme) retoned to the site's paper and banker green. */
.fig {
  --anatomy-paper: #fbfaf6; --anatomy-face: #ffffff; --anatomy-top: #ffffff;
  --anatomy-shade-0: #d6e2d8; --anatomy-shade-1: #e0e9df; --anatomy-shade-2: #e9f0e6; --anatomy-shade-3: #f2f6ef;
  --anatomy-lit-top: #f4faf2; --anatomy-lit-shade: #dcebdf;
  --anatomy-hi: #14231e; --anatomy-mid: #6f8579; --anatomy-lo: #a9bcb0; --anatomy-faint: #cfdcd2; --anatomy-lit: #0b5443;
  --anatomy-halo: #5f7466; --anatomy-halo-opacity: .3; --anatomy-dot: #2c3c35;
  --anatomy-weight: .6px;
  margin: 0;
}
.fig-svg svg { display: block; width: 100%; height: auto; overflow: visible; }
.fig-svg path, .fig-svg circle { vector-effect: non-scaling-stroke; }
.iso-fill { fill: var(--anatomy-paper); stroke: none; }
.iso-solid[data-lit] > .iso-fill { fill: var(--anatomy-face); }
.iso-shade, .iso-top { stroke: none; }
.iso-shade[data-shade="0"] { fill: var(--anatomy-shade-0); }
.iso-shade[data-shade="1"] { fill: var(--anatomy-shade-1); }
.iso-shade[data-shade="2"] { fill: var(--anatomy-shade-2); }
.iso-shade[data-shade="3"] { fill: var(--anatomy-shade-3); }
.iso-top { fill: var(--anatomy-top); }
.iso-solid[data-lit] > .iso-top { fill: var(--anatomy-lit-top); }
.iso-solid[data-lit] > .iso-shade { fill: var(--anatomy-lit-shade); }
.iso-solid[data-lit] > .iso-edge { stroke: var(--anatomy-lit); stroke-width: 1.1; }
.iso-halo { fill: var(--anatomy-halo); stroke: none; filter: blur(9px); opacity: var(--anatomy-halo-opacity); transform: translateY(3px); }
.fig-halo-sm { filter: blur(3px); }
.iso-line { fill: none; stroke: var(--anatomy-lo); stroke-width: var(--anatomy-weight); stroke-linecap: round; stroke-linejoin: round; }
.iso-line[data-tone="hi"] { stroke: var(--anatomy-hi); }
.iso-line[data-tone="mid"] { stroke: var(--anatomy-mid); }
.iso-line[data-tone="faint"] { stroke: var(--anatomy-faint); }
.iso-line[data-tone="lit"] { stroke: var(--anatomy-lit); }
.iso-line[data-dotted] { stroke-dasharray: .01 3.5; stroke-width: 1; }
.iso-dots circle { fill: var(--anatomy-dot); stroke: none; opacity: .32; }
.iso-dots[data-tone="hi"] circle { opacity: .85; }
.iso-dots[data-tone="mid"] circle { opacity: .45; }
.iso-dots[data-tone="lo"] circle { opacity: .22; }
.iso-face-text { fill: var(--anatomy-mid); font: 700 2px/1 var(--sans); letter-spacing: .08em; }
.iso-face-text[data-tone="lo"] { fill: var(--anatomy-mid); }
.fig-needle { stroke-width: 1.1; }
.fig-window { fill: #14231e; }
.fig-digits { fill: #eef4ec; font: 700 4.2px/1 var(--sans); letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.fig-fade, [data-cargo], [data-booth] { transition: opacity .35s ease; }
[data-meter] { transition: opacity .4s ease; }
[data-meter].is-off { opacity: .38; }

/* The plate: a page off the columnar pad, corners like a drawing sheet */
.fig-plate { position: relative; background: var(--paper); border: 1px solid var(--rule-2); padding: 44px 18px 40px; }
.fig-corners { position: absolute; inset: 14px 16px; pointer-events: none; font: 700 .8rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.fig-corners span { position: absolute; white-space: nowrap; }
.fig-corners [data-c="fig"] { top: 0; left: 0; color: var(--green); }
.fig-corners [data-c="title"] { top: 0; right: 0; }
.fig-corners [data-c="hint"] { bottom: 0; left: 0; }
.fig-corners [data-c="readout"] { bottom: 0; right: 0; text-transform: none; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.fig-stage { position: relative; touch-action: pan-y; cursor: pointer; aspect-ratio: 720 / 340; }
.fig.is-live .fig-stage { aspect-ratio: auto; }
.fig-stage:focus-visible { outline: 3px solid var(--green); outline-offset: 6px; }
.fig-loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--ink-2); font-size: 1rem; text-align: center; }
.fig.is-live .fig-loading { display: none; }

.fig-controls { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; margin-top: 14px; }
.fig-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fig-btn { min-height: 44px; padding: 8px 16px; border: 2px solid var(--green); background: var(--paper); color: var(--green); font: 700 1rem/1.2 var(--sans); cursor: pointer; }
.fig-btn:hover { background: var(--pad); }
.fig-btn:disabled { opacity: .45; cursor: default; }
.fig-btn[aria-pressed="true"] { background: var(--green); color: var(--paper); }
.fig-btn.square { min-width: 44px; padding: 8px 0; }
.fig-crews { min-width: 5.2em; text-align: center; font-weight: 700; color: var(--ink); }
.fig-label { font: 700 .85rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.fig-dots { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.fig-dots button { min-width: 44px; min-height: 44px; border: 1px solid var(--rule-2); background: var(--paper); color: var(--ink); font: 700 1rem/1 var(--sans); cursor: pointer; }
.fig-dots button[aria-current="step"] { background: var(--green); border-color: var(--green); color: var(--paper); }
.fig-panel { margin-top: 14px; padding: 16px 20px 18px; background: var(--pad); border-left: 4px solid var(--green); }
.fig-step { margin: 0 0 2px; font: 700 .85rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--green); }
.fig-name { font: 400 1.45rem/1.2 var(--serif); margin: 0 0 6px; }
.fig-text { margin: 0 0 8px; color: var(--ink); }
.fig-more { font-weight: 700; }
.fig-caption { margin-top: 12px; font-size: 1rem; color: var(--ink-2); }
@media (max-width: 600px) {
  .fig-plate { padding: 40px 8px 64px; }
  .fig-corners [data-c="hint"] { bottom: 22px; }
  .fig-corners [data-c="title"] { display: none; }
  .fig-stage { aspect-ratio: 300 / 250; }
}
@media (prefers-reduced-motion: reduce) {
  .fig-fade, [data-cargo], [data-booth], [data-meter] { transition: none; }
}