/* vrancea-nu-are-ceas: a seismograph drum. Night = smoked paper scratched white (default); day = paper and helicorder inks. */
:root{
  --bg:#efe9dc; --bg2:#e6dfcf; --surface:#f7f3ea; --ink:#16130f; --ink2:#2b2620; --muted:#5a5247; --line:#bdb3a2; --line-soft:#d8cfbf;
  --acc:#b3261e; --acc-ink:#9c1f18; --focus:#1f4fd1; --card:rgba(247,243,234,.94); --kick:#9c1f18;
  --drum:#f3eee2; --drum-edge:#ddd3c0; --pen:#6b5f4c; --pen2:#6b5f4c; --pen3:#6b5f4c; --pen4:#6b5f4c; --quake:#a3161a; --people:#1d4f91; --gap:#c77d12; --today:#b3261e;
  --lab:#4b4337; --lab2:#7a705f;
  --motif-lit:#b3261e;
  --to-top-bg:#efe9dc; --to-top-fg:#16130f;
  --disp:"Fraunces",Georgia,serif; --serif:"Source Serif 4",Georgia,serif; --ui:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --vh:1vh; --stage-h:calc(var(--vh) * 100 - 44px);
  color-scheme:light;
}
html.dark{
  --bg:#100f0d; --bg2:#171512; --surface:#1b1915; --ink:#efe9dc; --ink2:#d9d2c4; --muted:#a69d8e; --line:#3a352d; --line-soft:#24211c;
  --acc:#ff7a4d; --acc-ink:#ff9a75; --focus:#9db8ff; --card:rgba(16,15,13,.86); --kick:#ff9a75;
  --drum:#141311; --drum-edge:#070706; --pen:#e9e2d2; --pen2:#e9e2d2; --pen3:#e9e2d2; --pen4:#e9e2d2; --quake:#ff6a3d; --people:#7fc8ff; --gap:#f2b84b; --today:#ff6a3d;
  --lab:#b9b0a0; --lab2:#7d7466;
  --motif-lit:#ff6a3d;
  --to-top-bg:#100f0d; --to-top-fg:#efe9dc;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
svg[hidden]{display:none}
html{-webkit-text-size-adjust:100%;scroll-padding-top:56px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.1rem/1.62 var(--serif);text-rendering:optimizeLegibility}
a{color:var(--acc-ink);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--bg);padding:.5rem 1rem;z-index:50}
.skip:focus{left:8px;top:8px}
h1,h2,h3{font-family:var(--disp);font-weight:500;letter-spacing:-.012em;line-height:1.12;margin:0 0 .55em;font-variation-settings:"WONK" 0}
h1{font-size:clamp(2rem,2.6vw + .9rem,3.1rem);font-variation-settings:"opsz" 130,"WONK" 0;font-weight:400;text-wrap:balance}
h2{font-size:clamp(1.35rem,1.1vw + 1rem,1.8rem);font-variation-settings:"opsz" 72,"WONK" 0;text-wrap:balance;position:relative}
h3{font-size:1.16rem;margin-top:1.5em}
p{margin:0 0 1em}
.nw{white-space:nowrap}
.anchor{position:absolute;left:-1.1em;opacity:0;text-decoration:none;color:var(--muted);font-weight:400}
h2:hover .anchor,.anchor:focus{opacity:1}
.kicker{font:600 .78rem/1.35 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--kick);margin:0 0 .9rem}
.note{font:400 .88rem/1.5 var(--ui);color:var(--muted)}
.wrap{max-width:42rem;margin:0 auto;padding:0 16px}
b.q{color:var(--quake);font-weight:600}
b.p{color:var(--people);font-weight:600}
b.g{color:var(--gap);font-weight:600}

.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:.9rem;height:44px;padding:0 max(16px,env(safe-area-inset-left));background:var(--bg);border-bottom:1px solid var(--line-soft);font:500 .88rem/1 var(--ui)}
.home{display:flex;align-items:center;gap:.45rem;color:var(--ink);text-decoration:none;white-space:nowrap}
.home .motif{width:22px;height:22px;color:var(--ink)}
.topnav{display:flex;gap:1rem;overflow:hidden;min-width:0}
.topnav a{color:var(--ink2);text-decoration:none;white-space:nowrap}
.topnav a:hover{color:var(--ink);text-decoration:underline}
.spacer{flex:1}
.chip{color:var(--ink);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:.36rem .7rem;min-height:32px;display:inline-flex;align-items:center}
.icon-btn{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px}
.progress i{display:block;height:100%;width:0;background:var(--acc)}
@media (max-width:980px){.topnav{display:none}}
@media (pointer:coarse){.icon-btn{width:44px;height:44px}.chip{min-height:44px}}

/* story: drum pinned right, text left; phone: drum on top */
.story{position:relative;display:grid;grid-template-columns:minmax(0,27rem) minmax(0,1fr);grid-template-areas:"steps stage";min-width:0}
.stage{grid-area:stage;position:sticky;top:44px;height:var(--stage-h);margin:0;overflow:hidden;background:var(--drum)}
.stage canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:pan-y}
.stage .cap{position:absolute;pointer-events:none;font:500 .78rem/1.25 var(--ui);color:var(--lab);white-space:nowrap}
.tag{position:absolute;left:16px;top:12px;margin:0;font:600 .74rem/1.3 var(--ui);letter-spacing:.07em;text-transform:uppercase;color:var(--lab);pointer-events:none;max-width:calc(100% - 32px)}
.key{position:absolute;right:16px;top:12px;margin:0;display:flex;gap:.9rem;font:500 .76rem/1.3 var(--ui);color:var(--lab);pointer-events:none}
.key i{display:inline-block;width:14px;height:2px;vertical-align:middle;margin-right:.35rem;background:currentColor}
.key .kq i{background:var(--quake);height:10px;width:2px}
.key .ks i{background:var(--pen);height:6px;width:1px;opacity:.7}
.key .kp i{background:var(--people)}
.key .kg i{background:var(--gap)}
.steps{grid-area:steps;position:relative;z-index:2;padding:0 0 30vh;min-width:0}
.step{min-height:calc(var(--vh) * 94);display:flex;align-items:center;padding:2rem 1.4rem 22vh max(16px,2.4vw);scroll-margin-top:52px}
.step .card{background:var(--card);border-radius:4px;padding:1.35rem 1.45rem .7rem;max-width:28rem}
.step.intro{min-height:var(--stage-h)}
.step.intro .card{background:transparent;padding:1rem .2rem}
.deck{font-size:1.14rem;line-height:1.55;color:var(--ink2)}
.step .big-num{font:400 clamp(3.4rem,5vw + 1rem,5.2rem)/0.95 var(--disp);font-variation-settings:"opsz" 144;color:var(--quake);margin:.2rem 0 .3rem;letter-spacing:-.02em}
.step .big-num small{display:block;font:500 .9rem/1.3 var(--ui);color:var(--muted);letter-spacing:0;margin-top:.8rem}
.hint{font:500 .85rem/1.3 var(--ui);color:var(--muted);margin-top:1.4rem}
.step p{font-size:1.03rem}
.btn{min-height:38px;padding:.4rem .9rem;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);font:500 .86rem/1 var(--ui);cursor:pointer;margin:0 .4rem .8rem 0}
.btn:hover{border-color:var(--acc);color:var(--acc-ink)}
.btn[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
@media (pointer:coarse){.btn{min-height:44px}}
.slab{display:block;font:600 .85rem/1.3 var(--ui);color:var(--ink2);margin:.9rem 0 .35rem}
input[type=date]{width:100%;min-height:44px;padding:.35rem .6rem;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:500 1rem/1.2 var(--ui)}
.readout{font:400 .95rem/1.5 var(--ui);color:var(--ink2);margin:.7rem 0 .4rem;min-height:3em}
.readout p{margin:.2rem 0;font-size:.95rem}
.readout b{font-weight:600;color:var(--ink)}
.guess{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin:.4rem 0 .6rem}
.guess .btn{margin:0;width:100%}
.guess .btn.right{background:var(--quake);border-color:var(--quake);color:#fff}
.guess .btn.wrong{opacity:.45}

.share-row{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin-top:1rem}
.share-row .lbl{font:500 .85rem/1 var(--ui);color:var(--muted);margin-right:.2rem}
.sh{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-soft);background:transparent;color:var(--ink);cursor:pointer}
.sh svg{width:18px;height:18px}
.sh:hover,.sh:focus-visible{color:var(--acc);border-color:var(--acc)}
@media (pointer:coarse){.sh{width:44px;height:44px}}
.status{font:400 .85rem/1.3 var(--ui);color:var(--muted);min-height:1.2em;margin:.3rem 0 0}

.block{padding:3rem 0;position:relative;z-index:3;background:var(--bg)}
.tinted{background:var(--bg2)}
.plain{list-style:none;padding:0}
.sources li{font:400 .9rem/1.45 var(--ui);margin:.45rem 0}
.tbl{width:100%;border-collapse:collapse;font:400 .9rem/1.4 var(--ui);margin:.5rem 0 1.2rem}
.tbl th,.tbl td{padding:.3rem .45rem;border-bottom:1px solid var(--line-soft);text-align:right;vertical-align:top}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl caption{text-align:left;font:600 .85rem/1.3 var(--ui);color:var(--ink2);padding-bottom:.3rem}
.tw{overflow-x:auto}
footer{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;justify-content:center;padding:2rem 16px 3rem;font:400 .85rem/1.4 var(--ui);color:var(--muted);background:var(--bg);position:relative;z-index:3}
footer a{color:var(--ink2)}
.to-top-x{left:auto!important;right:max(1rem,env(safe-area-inset-right))!important;bottom:76px!important}

@media (max-width:860px){
  .story{grid-template-columns:minmax(0,1fr);grid-template-areas:"main"}
  .stage{grid-area:main;align-self:start;height:calc(var(--vh) * 40);top:44px;z-index:4;box-shadow:0 1px 0 var(--line-soft),0 10px 0 0 var(--bg),0 18px 10px 2px var(--bg)}
  .steps{grid-area:main;padding-top:calc(var(--vh) * 40);padding-bottom:12vh}
  .step{min-height:calc(var(--vh) * 60);padding:.4rem 12px 1rem;align-items:flex-start;scroll-margin-top:calc(var(--vh) * 40 + 30px)}
  .step .card{max-width:none;width:100%;padding:.6rem .9rem .5rem}
  .step.intro{min-height:auto;padding-top:1.6rem}
  .step.intro .card{padding:.4rem .1rem}
  .hint{display:none}
  .tag{left:10px;top:7px;font-size:.62rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 20px)}
  .key{right:10px;top:auto;bottom:4px;font-size:.62rem;gap:.6rem}
  .stage .cap{font-size:.64rem}
  .to-top-x{display:none!important}
}
html:not(.dark) .step .card{background:transparent;padding-left:.2rem;padding-right:.2rem}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
@media print{.stage,.topbar{display:none}.story{display:block}}
.ytab{margin:.2rem 0 1rem;font:400 .85rem/1.35 var(--ui)}
.ytab summary{cursor:pointer;color:var(--ink2);min-height:32px;display:flex;align-items:center}
.ytab .tw{max-height:16rem;overflow:auto;margin-top:.4rem}