/* Counted Twice. Light is a sanded cross-section of wood under daylight: ink on pale sapwood, the tree in amber.
   Dark is the core store at -20 C: cold blue-black. The two counts of the ice are slate (GICC05, the old count)
   and glacier blue (GICC21, the recount); the event, where wood and ice both heard it, is one red. */
:root {
  --ground:#f1ebe0; --ground-2:#e8e0d1; --ink:#221c17; --ink-soft:#5c5349; --rule:#d2c7b4; --rule-strong:#a99c86;
  --wood:#9a5a1c; --wood-2:#6f4a1f; --wood-soft:rgba(154,90,28,.16);
  --old:#5d6676; --old-soft:rgba(93,102,118,.16);
  --new:#1c6b8c; --new-soft:rgba(28,107,140,.16);
  --wit:#6b4a9a; --wit-soft:rgba(107,74,154,.12);
  --event:#b3263e; --event-soft:rgba(179,38,62,.12);
  --core:#dfe7ea; --core-edge:#a9b8bf; --band:#c9d6dc;
  --mark:#f6e3b4; --link:#7c3f12;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#0b1016; --ground-2:#111922; --ink:#e6edf1; --ink-soft:#9aa8b3; --rule:#24313d; --rule-strong:#3d4d5b;
    --wood:#e0a25e; --wood-2:#c98b49; --wood-soft:rgba(224,162,94,.18);
    --old:#a7b0bf; --old-soft:rgba(167,176,191,.16);
    --new:#7cc8e4; --new-soft:rgba(124,200,228,.16);
    --wit:#bba3e6; --wit-soft:rgba(187,163,230,.13);
    --event:#ff7d92; --event-soft:rgba(255,125,146,.13);
    --core:#1b2a35; --core-edge:#36505f; --band:#28404e;
    --mark:#3a2f17; --link:#f0b877;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground:#0b1016; --ground-2:#111922; --ink:#e6edf1; --ink-soft:#9aa8b3; --rule:#24313d; --rule-strong:#3d4d5b;
  --wood:#e0a25e; --wood-2:#c98b49; --wood-soft:rgba(224,162,94,.18);
  --old:#a7b0bf; --old-soft:rgba(167,176,191,.16);
  --new:#7cc8e4; --new-soft:rgba(124,200,228,.16);
  --wit:#bba3e6; --wit-soft:rgba(187,163,230,.13);
  --event:#ff7d92; --event-soft:rgba(255,125,146,.13);
  --core:#1b2a35; --core-edge:#36505f; --band:#28404e;
  --mark:#3a2f17; --link:#f0b877;
  color-scheme: dark;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--ground); color:var(--ink); font-family:"Fraunces",Georgia,serif; line-height:1.62; font-size:1.06rem; }
main { max-width:46rem; margin:0 auto; padding:4.6rem 1rem 3rem; }
a { color:var(--link); text-underline-offset:2px; }
:focus-visible { outline:2px solid var(--event); outline-offset:2px; }
p { margin:0 0 1rem; }
q { quotes:"\201C" "\201D" "\2018" "\2019"; }
.kicker, .readout, figcaption, table, .cap, .controls, .jumps, .lede-mono { font-family:"Martian Mono",ui-monospace,monospace; }
.kicker { font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 .9rem; }
h1 { font-size:clamp(2.7rem,11vw,4.8rem); line-height:.95; margin:0 0 1rem; letter-spacing:-.02em; font-weight:600; }
.dek { font-size:1.14rem; margin:0 0 2.2rem; }
h2 { font-size:1.6rem; line-height:1.2; margin:3.2rem 0 1rem; font-weight:600; letter-spacing:-.01em; }
h3 { font-size:1.08rem; margin:0 0 .5rem; }
.v { font-variant-numeric:lining-nums tabular-nums; }
sup { font-size:.7em; line-height:0; }
#data-error { background:var(--mark); padding:.6rem .8rem; border-radius:4px; font-size:.9rem; }

/* instruments */
.instrument { margin:1.6rem -1rem 2.2rem; padding:1.1rem 1rem 1rem; background:var(--ground-2); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
@media (min-width:780px) { .instrument { margin-left:-5rem; margin-right:-5rem; padding:1.3rem 1.6rem 1.2rem; border:1px solid var(--rule); border-radius:6px; } }
.instrument h3 { font-family:"Martian Mono",ui-monospace,monospace; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; }
.instrument .lede { font-size:.96rem; margin:0 0 .9rem; }
figure { margin:0; }
svg { display:block; width:100%; height:auto; font-family:"Martian Mono",ui-monospace,monospace; touch-action:pan-y; }
svg text { fill:var(--ink-soft); }
svg .axis { stroke:var(--rule-strong); stroke-width:1; fill:none; }
svg .grid { stroke:var(--rule); stroke-width:.6; }
svg .tick { font-size:10px; }
svg .lab { font-size:9.5px; }
svg .lab-strong { font-size:10.5px; fill:var(--ink); font-weight:600; }
svg .zero { stroke:var(--rule-strong); stroke-width:1; stroke-dasharray:2 3; }
/* the trees */
svg .tree-B1 { stroke:var(--wood); fill:var(--wood); }
svg .tree-B2 { stroke:var(--wood-2); fill:var(--ground-2); }
svg .tree-line { fill:none; stroke-width:1.5; }
svg .errbar { stroke-width:1; }
svg .ring-hit { fill:transparent; cursor:pointer; }
svg .ring-hot { stroke:var(--ink); stroke-width:.8; fill:none; stroke-dasharray:2 2; }
svg .gap { fill:var(--event-soft); }
svg .gap-lab { fill:var(--event); font-size:9.5px; }
svg .count-old { fill:var(--old); stroke:var(--old); }
svg .count-new { fill:var(--new); stroke:var(--new); }
svg .count-lab-old { fill:var(--old); font-size:10px; }
svg .count-lab-new { fill:var(--new); font-size:10px; }
/* the bench */
svg .core { fill:var(--core); stroke:var(--core-edge); stroke-width:1; }
svg .core-band { stroke:var(--band); stroke-width:1; }
svg .core-band-20 { stroke:var(--new); stroke-width:1; opacity:.55; }
svg .tick-old { stroke:var(--old); stroke-width:1.4; }
svg .tick-new { stroke:var(--new); stroke-width:1.4; }
svg .tlab-old { fill:var(--old); font-size:10px; }
svg .tlab-new { fill:var(--new); font-size:10px; }
svg .join { stroke:var(--ink-soft); stroke-width:.8; opacity:.75; }
svg .horizon { fill:var(--event-soft); stroke:var(--event); stroke-width:1; }
svg .horizon-anchor { fill:var(--new-soft); stroke:var(--new); stroke-width:1; }
svg .hlab { fill:var(--ink); font-size:9.5px; }
svg .hair { stroke:var(--event); stroke-width:1.6; }
svg .ruler-lab { font-size:9px; letter-spacing:.08em; }
svg .mini { fill:var(--rule); }
svg .mini-win { fill:none; stroke:var(--event); stroke-width:1.2; }
svg .mini-h { stroke:var(--ink-soft); stroke-width:1; }
svg .dragzone { fill:transparent; cursor:grab; }
svg .dragzone:active { cursor:grabbing; }
/* the drift */
svg .offset-line { fill:none; stroke:var(--new); stroke-width:1.6; }
svg .offset-band { fill:var(--new); opacity:.13; }
svg .mce-band { fill:var(--old-soft); stroke:var(--old); stroke-width:.6; stroke-dasharray:1 2; }
svg .am-line { fill:none; stroke:var(--wit); stroke-width:1.5; stroke-dasharray:5 3; }
svg .am-band { fill:var(--wit); opacity:.09; }
svg .pin { stroke:var(--old); stroke-width:1; stroke-dasharray:1.5 2.5; }
svg .pin-lab { fill:var(--old); font-size:9.5px; }
svg .ev { stroke:var(--event); stroke-width:1; }
svg .ev-lab { fill:var(--event); font-size:9.5px; }
svg .scrub { stroke:var(--ink); stroke-width:1; }
svg .scrub-dot { fill:var(--new); stroke:var(--ground-2); stroke-width:1.5; }

.controls { display:flex; flex-wrap:wrap; gap:.4rem .9rem; align-items:center; margin:.7rem 0 .3rem; }
.controls label { font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); flex:1 1 100%; }
.controls input[type=range] { flex:1 1 16rem; accent-color:var(--event); min-width:0; }
.jumps { display:flex; flex-wrap:wrap; gap:.35rem; margin:0 0 .7rem; }
.jumps button { font-family:inherit; font-size:.66rem; padding:.36rem .55rem; border-radius:4px; border:1px solid var(--rule-strong); background:transparent; color:var(--ink); cursor:pointer; }
.jumps button:hover { border-color:var(--event); }
.jumps button[aria-pressed="true"] { border-color:var(--event); background:var(--event-soft); }
.readout { font-size:.76rem; line-height:1.65; margin:.5rem 0 .3rem; min-height:3.3em; }
.readout b { font-weight:600; }
.readout .old { color:var(--old); } .readout .new { color:var(--new); } .readout .ev { color:var(--event); } .readout .wit { color:var(--wit); } .readout .wood { color:var(--wood); }
.cap { font-size:.7rem; line-height:1.6; color:var(--ink-soft); margin:.45rem 0 0; }
.legend { display:flex; flex-wrap:wrap; gap:.3rem 1rem; font-family:"Martian Mono",ui-monospace,monospace; font-size:.66rem; color:var(--ink-soft); margin:.2rem 0 .5rem; }
.legend span::before { content:""; display:inline-block; width:1.1rem; height:.5rem; margin-right:.35rem; vertical-align:middle; border-radius:2px; }
.legend .lg-new::before { background:var(--new); height:3px; }
.legend .lg-old::before { background:var(--old-soft); border:1px dotted var(--old); }
.legend .lg-wit::before { background:linear-gradient(90deg,var(--wit) 60%,transparent 60%); height:2px; background-size:6px 2px; }
.legend .lg-pin::before { border-left:1px dashed var(--old); width:.1rem; height:.8rem; border-radius:0; }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; scroll-behavior:auto !important; } }

/* tables */
.tablewrap { overflow-x:auto; margin:1rem -1rem 1.6rem; padding:0 1rem; }
table { border-collapse:collapse; font-size:.68rem; line-height:1.5; min-width:100%; }
th, td { padding:.34rem .45rem; border-bottom:1px solid var(--rule); text-align:right; white-space:nowrap; vertical-align:top; }
th:first-child, td:first-child { text-align:left; white-space:normal; min-width:11rem; }
th { font-weight:600; color:var(--ink-soft); border-bottom:1px solid var(--rule-strong); }
td.old { color:var(--old); } td.new { color:var(--new); }
tr.event td { background:var(--event-soft); }
caption { caption-side:bottom; text-align:left; font-size:.68rem; color:var(--ink-soft); padding-top:.5rem; white-space:normal; }

.limits { padding-left:1.1rem; }
.limits li { margin:0 0 .7rem; }
.checkbox { margin-top:3.4rem; padding-top:.6rem; border-top:1px solid var(--rule-strong); }
.checkbox p, .checkbox li { font-size:.95rem; }
.sources { padding-left:1.3rem; }
.sources li { margin:0 0 .6rem; font-size:.88rem; }
@media (max-width:520px) { body { font-size:1rem; } }