/* The Rubber Second: one world, two grounds. Light is the NASA artwork print (violet line on grey card);
   dark is the plaque in the dark it was made for (gold line on night). */
:root {
  --ground:#e9e5dc; --ground-2:#dfd9cc; --ink:#1f1b26; --ink-soft:#5d566a; --rule:#c9c1b2; --rule-strong:#a79e8c;
  --line:#5b2a7c; --line-soft:rgba(91,42,124,.32); --si:#2f6fa8; --utc:#b0532a; --band:rgba(176,83,42,.14);
  --mark:#f6e7b8; --link:#6a2f8e; --dot-fast:#7a7387;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#0c0d13; --ground-2:#14151d; --ink:#ece6d6; --ink-soft:#a79f8c; --rule:#2a2a35; --rule-strong:#454452;
    --line:#d8b25c; --line-soft:rgba(216,178,92,.3); --si:#7fb2e0; --utc:#f0a35e; --band:rgba(240,163,94,.16);
    --mark:#3d3317; --link:#e7c578; --dot-fast:#8d8899;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground:#0c0d13; --ground-2:#14151d; --ink:#ece6d6; --ink-soft:#a79f8c; --rule:#2a2a35; --rule-strong:#454452;
  --line:#d8b25c; --line-soft:rgba(216,178,92,.3); --si:#7fb2e0; --utc:#f0a35e; --band:rgba(240,163,94,.16);
  --mark:#3d3317; --link:#e7c578; --dot-fast:#8d8899;
  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(--utc); outline-offset:2px; }
p { margin:0 0 1rem; }
.kicker, .note, label, button, .readout, .marks, .steps, figcaption, table, .mono, .cap { font-family:"Martian Mono",ui-monospace,monospace; }
.kicker { font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 .9rem; }
h1 { font-size:clamp(2.6rem,10vw,4.6rem); line-height:.96; margin:0 0 1rem; letter-spacing:-.02em; font-weight:600; }
.dek { font-size:1.15rem; margin:0 0 2rem; }
h2 { font-size:1.6rem; line-height:1.2; margin:3.4rem 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; }
.si { color:var(--si); } .utc { color:var(--utc); }
blockquote { margin:1.2rem 0 1.4rem; padding:.2rem 0 .2rem 1rem; border-left:3px solid var(--line-soft); }
blockquote p { margin:0 0 .4rem; }
blockquote footer { font-size:.86rem; color:var(--ink-soft); }
q { quotes:"\201C" "\201D" "\2018" "\2019"; }
.note { font-size:.76rem; line-height:1.65; color:var(--ink-soft); }
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.4rem; padding:1.1rem 1rem 1rem; background:var(--ground-2); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
@media (min-width:760px) { .instrument { margin-left:-6rem; margin-right:-6rem; padding:1.3rem 1.6rem 1.2rem; border:1px solid var(--rule); border-radius:6px; } }
.instrument .lede { font-size:.98rem; margin:0 0 .9rem; }
svg { display:block; width:100%; height:auto; }
#clock { overflow:visible; font-family:"Martian Mono",ui-monospace,monospace; }
#clock .tick { stroke:var(--rule); stroke-width:1; }
#clock .year { fill:var(--ink-soft); font-size:10px; }
#clock .event { stroke:var(--ink-soft); stroke-width:1; stroke-dasharray:3 3; }
#clock .event.end { stroke:var(--utc); stroke-dasharray:none; stroke-width:1.4; }
#clock .evlabel { fill:var(--ink-soft); font-size:8.5px; }
#clock .evlabel.end { fill:var(--utc); }
#clock .name { fill:var(--ink); font-size:10px; }
#clock .row.fast .name, #clock .row.rounded .name { fill:var(--ink-soft); }
#clock .rule { stroke:var(--rule); stroke-width:.6; }
#clock .sep { stroke:var(--rule-strong); stroke-width:.8; stroke-dasharray:2 3; }
#clock .win { fill:var(--line-soft); }
#clock .row.fast .win { fill:none; stroke:var(--dot-fast); stroke-width:1.2; }
#clock .dot { fill:var(--utc); stroke:var(--ground-2); stroke-width:1.6; transition:cx .05s linear; }
#clock .row.fast .dot { fill:var(--dot-fast); }
#clock .dot.gone { fill:none; stroke:var(--ink-soft); stroke-width:1.2; }
#clock .off { fill:var(--ink-soft); font-size:9px; }
#clock .found { stroke:var(--ink); stroke-width:1.6; }
#clock .foundlabel { fill:var(--ink-soft); font-size:8.5px; }
#clock .band { fill:var(--band); stroke:var(--utc); stroke-width:.8; stroke-dasharray:2 2; transition:opacity .25s; }
#clock .bandlabel { fill:var(--utc); font-size:9.5px; }
@media (prefers-reduced-motion: reduce) { #clock .dot, #clock .band { transition:none; } }
.controls { display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center; margin:.8rem 0 .4rem; }
.controls label { font-size:.7rem; 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(--utc); min-width:0; }
.controls button { font-size:.72rem; padding:.45rem .7rem; border-radius:4px; border:1px solid var(--rule-strong); background:transparent; color:var(--ink); cursor:pointer; }
.controls button:hover { border-color:var(--utc); }
.controls button[disabled], .controls input[disabled] { opacity:.5; cursor:default; }
.readout { font-size:.78rem; line-height:1.6; margin:.5rem 0 .2rem; min-height:2.6em; }
.readout b { color:var(--utc); font-weight:600; }
#clock-list { font-family:"Martian Mono",ui-monospace,monospace; font-size:.72rem; color:var(--utc); margin:0 0 .6rem; min-height:1.3em; }
.scanbox { display:grid; grid-template-columns:minmax(0,19rem) minmax(0,1fr); gap:.4rem 1rem; align-items:center; margin-top:.6rem; }
@media (max-width:600px) { .scanbox { grid-template-columns:1fr; } }
#scan { max-width:19rem; font-family:"Martian Mono",ui-monospace,monospace; }
#scan .step { fill:none; stroke:var(--line); stroke-width:1.6; }
#scan .utcline { stroke:var(--utc); stroke-width:1; stroke-dasharray:3 2; }
#scan .siline { stroke:var(--si); stroke-width:1; stroke-dasharray:3 2; }
#scan .cursor { stroke:var(--ink); stroke-width:1.2; }
#scan .scanlabel { fill:var(--ink-soft); font-size:8px; }
.cap { font-size:.72rem; line-height:1.6; color:var(--ink-soft); margin:.4rem 0 0; }

/* the plaque photograph */
figure.plate { margin:1.6rem 0 2rem; }
figure.plate img { display:block; width:100%; height:auto; border-radius:3px; border:1px solid var(--rule); }
figure.plate figcaption { font-size:.72rem; line-height:1.6; color:var(--ink-soft); margin-top:.5rem; }

/* the map, redrawn */
.mapbox { display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; }
@media (min-width:760px) { .mapbox { grid-template-columns:minmax(0,25rem) minmax(0,1fr); align-items:start; } }
#map { max-width:25rem; margin:0 auto; }
#map .gc { stroke:var(--line); stroke-width:1.4; }
#map .gclabel { fill:var(--ink-soft); font:8.5px "Martian Mono",monospace; }
#map .spoke { cursor:pointer; outline:none; }
#map .spoke .stem, #map .spoke .one, #map .spoke .zero { stroke:var(--line); stroke-width:1.5; stroke-linecap:round; }
#map .spoke .hit { stroke:transparent; stroke-width:14; }
#map .spoke:hover .one, #map .spoke:hover .zero, #map .spoke:hover .stem, #map .spoke:focus-visible .one, #map .spoke:focus-visible .zero { stroke:var(--utc); }
#map .spoke.on .one, #map .spoke.on .zero, #map .spoke.on .stem { stroke:var(--utc); stroke-width:2.1; }
#map .sun { fill:var(--line); }
#read { font-size:.94rem; }
#read h3 { font-family:"Martian Mono",ui-monospace,monospace; font-size:.86rem; letter-spacing:.04em; }
#read .marks { font-size:.95rem; letter-spacing:.06em; color:var(--line); word-break:break-all; margin:0 0 .5rem; }
#read .steps { font-size:.74rem; word-break:break-word; color:var(--ink-soft); }

/* tables */
.tablewrap { overflow-x:auto; margin:1rem -1rem 1.4rem; padding:0 1rem; }
@media (min-width:760px) { .tablewrap.wide { margin-left:-6rem; margin-right:-6rem; padding:0; } }
table { border-collapse:collapse; font-size:.7rem; line-height:1.5; min-width:100%; }
th, td { padding:.35rem .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; }
th { font-weight:600; color:var(--ink-soft); border-bottom:1px solid var(--rule-strong); }
tr.quietrow td:first-child { color:var(--ink); }
caption { caption-side:bottom; text-align:left; font-size:.7rem; color:var(--ink-soft); padding-top:.5rem; white-space:normal; }

/* the book: workings and sources */
.book { margin-top:3.6rem; padding-top:1rem; border-top:1px solid var(--rule-strong); }
.book h2 { margin-top:1.6rem; }
.book p, .book li { font-size:.96rem; }
.book ol, .book ul { padding-left:1.2rem; }
.book li { margin:0 0 .6rem; }
details.more { margin:1rem 0; }
details.more > summary { cursor:pointer; font-family:"Martian Mono",ui-monospace,monospace; font-size:.76rem; color:var(--ink-soft); }
.coda { font-size:1.12rem; margin:2.6rem 0 0; }
@media (max-width:520px) { body { font-size:1rem; } }