/* The Year That Would Not Disappear. Colour carries meaning throughout:
   amber is DAMA's claimed signal and anything planted from it, teal is an independent
   detector's released record, rose is what an operation makes out of nothing, blue is
   what a true signal keeps. The claimant's own points stay in plain ink. */
:root{
  --ground:#0d0f13; --plot:#0a0c10; --panel:#12151b; --panel2:#171b23;
  --ink:#ebe6da; --dim:#a39f95; --faint:#8a867e; --line:#252a33; --rule:#343a45;
  --claim:#f2b650; --control:#4fc4b4; --made:#e27fae; --kept:#8db6ff;
  --ok:#8fd694; --no:#f08a7a;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --mono:"Martian Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--ground);color:var(--ink);font:400 1.02rem/1.62 var(--serif);
  background-image:radial-gradient(ellipse 90% 40% at 50% 0%,#1a1d24 0%,transparent 70%)}
a{color:var(--claim);text-underline-offset:.18em}
a:hover{color:#ffd48a}
:focus-visible{outline:2px solid var(--claim);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:.75rem;top:.75rem;background:var(--panel2);padding:.5rem .75rem;z-index:9}
.mast{max-width:54rem;margin:0 auto;padding:1.1rem 1.15rem 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.3rem 1rem;
  font:500 .66rem/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.mast a{color:var(--dim);text-decoration:none}
main{max-width:54rem;margin:0 auto;padding:2.2rem 1.15rem 5rem}
section{margin:0 0 4.6rem}
h1{font-weight:600;font-size:clamp(2.2rem,7vw,3.9rem);line-height:1.02;letter-spacing:-.02em;margin:.3rem 0 1.1rem}
h2{font-weight:600;font-size:clamp(1.45rem,4vw,2.1rem);line-height:1.12;letter-spacing:-.01em;margin:.2rem 0 1rem}
h3{font:600 .72rem/1.45 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--claim);margin:2.2rem 0 .7rem}
p{margin:0 0 1.05rem;max-width:46rem}
.eyebrow{font:500 .68rem/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:0 0 .45rem}
.dek{font-size:clamp(1.06rem,2.4vw,1.22rem);color:var(--dim);margin-bottom:2rem}
.lede{font-size:1.1rem}
.small{font-size:.9rem;color:var(--dim)}
q{font-style:italic;color:var(--ink)}
strong{font-weight:600}
.claim-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:1rem;margin:0 0 1.8rem}
@media (max-width:720px){.claim-grid{grid-template-columns:minmax(0,1fr)}}
.claim-card,.update-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:1.1rem 1.15rem;min-width:0}
.claim-card{border-top:3px solid var(--claim)}
.update-card{background:var(--panel2)}
.big{font:600 clamp(2.4rem,8vw,3.6rem)/1 var(--mono);letter-spacing:-.04em;margin:.2rem 0 .8rem;color:var(--claim);font-variant-numeric:tabular-nums}
.big small{font:500 .74rem/1.3 var(--mono);letter-spacing:.06em;color:var(--dim);margin-left:.45rem}
.update-card .big{color:var(--ink);font-size:clamp(1.9rem,6vw,2.6rem)}
figure{margin:1.4rem 0;min-width:0}
.plot-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.3rem 1rem;font:500 .66rem/1.5 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);margin-bottom:.45rem}
.legend{display:flex;flex-wrap:wrap;gap:.2rem .9rem}
.sw{display:inline-block;width:.8rem;height:.8rem;border-radius:50%;vertical-align:-.1rem;margin-right:.35rem}
.sw.claim{background:var(--claim)} .sw.control{background:var(--control)} .sw.made{background:var(--made)} .sw.kept{background:var(--kept)}
.sw.ink{background:var(--ink)} .sw.open{border:1.5px solid var(--ink)} .sw.square{border:1.5px solid var(--ink);border-radius:1px}
canvas{display:block;width:100%;aspect-ratio:2.3/1;background:var(--plot);border:1px solid var(--line);border-radius:6px}
#control-plot{aspect-ratio:2.1/1}
.paired canvas{aspect-ratio:1.6/1}
@media (max-width:560px){canvas{aspect-ratio:1.45/1} #control-plot{aspect-ratio:1.35/1} .paired canvas{aspect-ratio:1.35/1}}
figcaption{font-size:.86rem;color:var(--dim);margin-top:.6rem;line-height:1.5;max-width:46rem}
.paired{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem}
@media (max-width:720px){.paired{grid-template-columns:minmax(0,1fr)}}
.readout-block{border-left:3px solid var(--claim);padding:.2rem 0 .2rem 1rem;margin:1.4rem 0}
.result{font:500 .92rem/1.6 var(--mono);color:var(--ink);overflow-wrap:anywhere}
.result.small{font-size:.82rem;color:var(--dim)}
.state{font:500 .8rem/1.55 var(--mono);color:var(--ok);overflow-wrap:anywhere}
.state.fail{color:var(--no)}
fieldset.controls,.controls{border:1px solid var(--line);border-radius:10px;padding:.9rem 1rem 1rem;margin:1.2rem 0;
  display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;align-items:flex-end;min-width:0}
fieldset.controls legend{font:500 .66rem/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding:0 .4rem}
.controls label{display:flex;flex-direction:column;gap:.35rem;font:500 .7rem/1.4 var(--mono);color:var(--dim);min-width:0;flex:1 1 10.5rem}
select,input[type=range]{font:500 .76rem var(--mono);max-width:100%}
select{background:var(--panel2);color:var(--ink);border:1px solid var(--rule);border-radius:6px;padding:.5rem .55rem;width:100%}
input[type=range]{width:100%;accent-color:var(--claim)}
output{font:600 .82rem var(--mono);color:var(--ink)}
button{font:600 .76rem/1 var(--mono);letter-spacing:.04em;border-radius:7px;padding:.72rem 1rem;cursor:pointer;
  background:var(--panel2);color:var(--ink);border:1px solid var(--rule)}
button:hover{border-color:var(--dim)}
button.primary{background:var(--claim);color:#1b1407;border-color:var(--claim);flex:0 0 auto}
button.primary.on{background:transparent;color:var(--claim)}
button:disabled,select:disabled,input:disabled{opacity:.45;cursor:not-allowed}
.readouts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin:1rem 0}
@media (max-width:720px){.readouts{grid-template-columns:minmax(0,1fr)}}
.readouts>div{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:.7rem .8rem;min-width:0}
.detection{font:600 .86rem/1.55 var(--mono);color:var(--dim);border:1px dashed var(--rule);border-radius:8px;padding:.7rem .85rem;overflow-wrap:anywhere}
.detection.found{color:var(--claim);border-style:solid;border-color:var(--claim)}
.scope,.grade,.note,.reply,.conventions{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.9rem 1rem;margin:1.2rem 0}
.scope{font-size:.92rem;color:var(--dim)}
.grade{border-left:3px solid var(--control)}
.note{border-left:3px solid var(--made)}
.reply{border-left:3px solid var(--claim)}
.conventions ol{margin:.2rem 0 1rem;padding-left:1.3rem}
.conventions li{margin:.35rem 0 .7rem}
.conventions h3{margin-top:.3rem}
.verdict-word{display:inline-block;font:600 .9em var(--mono);letter-spacing:.06em;color:var(--ground);background:var(--ink);padding:.05em .35em;border-radius:5px}
.table-wrap{overflow-x:auto;margin:1rem 0;border:1px solid var(--line);border-radius:8px;max-width:100%}
table{border-collapse:collapse;width:100%;font:400 .74rem/1.45 var(--mono);min-width:34rem}
caption{text-align:left;padding:.7rem .8rem;font:500 .68rem/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
th,td{padding:.42rem .6rem;border-top:1px solid var(--line);text-align:right;vertical-align:top}
th:first-child,td:first-child{text-align:left}
thead th{color:var(--dim);font-weight:600}
tbody th{font-weight:400;color:var(--ink)}
details{border:1px solid var(--line);border-radius:10px;padding:.2rem 1rem;margin:1rem 0;background:var(--panel)}
details[open]{padding-bottom:.8rem}
summary{cursor:pointer;font:600 .74rem/1.5 var(--mono);letter-spacing:.06em;padding:.7rem 0;color:var(--ink)}
.formula{font:500 .82rem/1.7 var(--mono);overflow-wrap:anywhere;color:var(--ink)}
.plain{font-size:1.08rem;border-left:3px solid var(--kept);padding-left:1rem}
.novelty{font-size:.9rem;color:var(--dim);border-top:1px solid var(--line);padding-top:1rem}
.downloads{display:flex;flex-wrap:wrap;gap:.5rem .9rem;font:500 .74rem var(--mono)}
ol.sources{font-size:.86rem;color:var(--dim);padding-left:1.3rem}
ol.sources li{margin:.45rem 0}
ul.change{padding-left:1.2rem}
ul.change li{margin:.4rem 0}
.check{border-top:2px solid var(--ok);padding-top:1.4rem}
.check h2{color:var(--ok)}
noscript p{border:1px solid var(--no);border-radius:8px;padding:.8rem;color:var(--no)}
