/* =========================================================================
   Random doesn't look random
   Visual direction: continuous-feed computer printout. Greenbar banding,
   tractor sprocket rail, perforated tear lines, mimeograph violet ink for
   anything interactive, rubber stamp red reserved for the reveals.
   ========================================================================= */

:root{
  --paper:   #F1F3EC;
  --bar:     #D7E4D2;
  --ink:     #1A1D19;
  --violet:  #57358E;
  --stamp:   #B0392C;
  --faded:   #767D71;
  --hair:    rgba(26,29,25,.22);

  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --disp: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --body: "Source Serif 4", Georgia, "Times New Roman", serif;

  --rail: 46px;
  --measure: 63ch;
  --wide: 1120px;
}

*{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:19px;
  line-height:1.62;
  padding-left:var(--rail);
  overflow-x:hidden;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ---------- sprocket rail ---------- */
.sprockets{
  position:fixed; inset:0 auto 0 0;
  width:var(--rail);
  background:
    linear-gradient(to right, transparent 0 calc(var(--rail) - 1px), var(--hair) calc(var(--rail) - 1px) var(--rail)),
    radial-gradient(circle at 50% 13px,
      #FBFCF8 0 5px,
      rgba(26,29,25,.30) 5px 5.9px,
      transparent 6px);
  background-size: 100% 100%, var(--rail) 26px;
  background-repeat: no-repeat, repeat-y;
  z-index:5;
  pointer-events:none;
}

/* ---------- housekeeping ---------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:var(--paper); padding:.6rem 1rem;
  font-family:var(--mono); font-size:14px; z-index:50;
}
.skip:focus{ left:1rem; top:1rem; }

:focus-visible{
  outline:2.5px solid var(--violet);
  outline-offset:3px;
}

.mono{ font-family:var(--mono); }

.noscript-note{
  max-width:62ch; margin:2rem auto; padding:1rem 1.1rem;
  border:1.5px solid var(--ink); background:var(--bar);
  font-family:var(--mono); font-size:13.5px; line-height:1.6;
}

.label{
  font-size:12px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--faded); font-weight:500;
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{
  max-width:var(--wide);
  margin:0 auto;
  padding:clamp(2rem,6vw,4.5rem) clamp(1rem,4vw,2.5rem) 0;
}

.masthead{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--faded);
  padding-bottom:.6rem; margin-bottom:.9rem;
  border-bottom:1.5px solid var(--ink);
}
.masthead strong{ color:var(--ink); font-weight:700; letter-spacing:.14em; }

.hero-title{
  font-family:var(--disp);
  font-weight:900;
  font-size:clamp(34px,9.5vw,54px);
  line-height:.97;
  letter-spacing:-.032em;
  margin:0 0 1rem;
  max-width:14ch;
}

.hero-canvas-wrap{
  border:1.5px solid var(--ink);
  background:var(--paper);
  box-shadow:7px 7px 0 rgba(26,29,25,.14);
  overflow:hidden;
}

#hero-canvas{
  display:block;
  width:100%;
  height:auto;
}

.hero-caption{
  margin:1.4rem 0 0;
  max-width:60ch;
}
.hero-caption p:last-child{
  font-size:17px;
  color:#33382F;
  margin:.5rem 0 0;
}

/* =========================================================================
   PROSE
   ========================================================================= */
.prose{
  max-width:var(--measure);
  margin-inline:0 auto;
}
.prose p{ margin:0 0 1.35em; }
.prose p:last-child{ margin-bottom:0; }

#intro{ padding-top:clamp(3rem,8vw,5.5rem); padding-bottom:1rem; }
#intro::before{ display:none; }

.standfirst{
  font-size:clamp(21px,2.4vw,25px);
  line-height:1.48;
  font-weight:600;
}
.standfirst::first-letter{
  font-family:var(--disp);
  font-weight:900;
  font-size:3.1em;
  float:left;
  line-height:.78;
  padding:.06em .11em 0 0;
  color:var(--violet);
}

/* =========================================================================
   FIGURE SECTIONS
   ========================================================================= */
.fig{
  max-width:var(--wide);
  margin:0 auto;
  padding:clamp(3rem,7vw,5rem) clamp(1rem,4vw,2.5rem) clamp(1rem,3vw,2rem);
  position:relative;
}

/* perforated tear line above every figure */
.fig::before{
  content:"";
  position:absolute; top:0; left:clamp(1rem,4vw,2.5rem); right:clamp(1rem,4vw,2.5rem);
  height:2px;
  background-image:linear-gradient(to right, var(--hair) 0 7px, transparent 7px 14px);
  background-size:14px 2px;
}

.fig-head{
  max-width:var(--measure);
  margin:0 0 1.6rem;
}
.figno{
  display:block;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  font-weight:700; color:var(--stamp);
  margin-bottom:.5rem;
}
.fig-head h2{
  font-family:var(--disp);
  font-weight:900;
  font-size:clamp(30px,4.6vw,50px);
  line-height:1.02;
  letter-spacing:-.028em;
  margin:0;
}

.fig .prose{ margin-block:2.2rem; }
.fig .prose:first-of-type{ margin-top:0; }

/* =========================================================================
   PANELS  (the greenbar sheets)
   ========================================================================= */
.panel{
  max-width:100%;
  margin:2.4rem 0;
  padding:clamp(1rem,3vw,1.8rem);
  border:1.5px solid var(--ink);
  box-shadow:7px 7px 0 rgba(26,29,25,.14);
  background-color:var(--paper);
  background-image:repeating-linear-gradient(
    to bottom,
    var(--bar) 0 26px,
    transparent 26px 52px
  );
  background-position:0 0;
}

.panel canvas{
  display:block;
  max-width:100%;
  height:auto;
  background:#FBFCF8;
  border:1px solid var(--hair);
}

.panel .note{
  font-family:var(--mono);
  font-size:12.5px;
  line-height:1.6;
  color:var(--faded);
  margin:.9rem 0 0;
  max-width:70ch;
}

.readout{
  font-size:13.5px;
  line-height:1.75;
  margin-top:.9rem;
  color:#2B2F29;
  white-space:pre-wrap;
}
.readout b{ color:var(--stamp); }
.readout i{ font-style:normal; color:var(--violet); font-weight:600; }

/* =========================================================================
   CONTROLS
   ========================================================================= */
.controls{
  display:flex; flex-wrap:wrap; gap:.6rem;
  margin-top:1rem;
  align-items:center;
}

.btn{
  font-family:var(--mono);
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
  padding:.62rem 1.05rem;
  border:1.5px solid var(--ink);
  background:var(--violet);
  color:#F6F4FA;
  cursor:pointer;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .08s ease, box-shadow .08s ease, background .12s ease;
}
.btn:hover{ background:#68429F; }
.btn:active{ transform:translate(3px,3px); box-shadow:0 0 0 var(--ink); }
.btn[disabled]{
  background:#DCDDD6; color:var(--faded);
  border-color:var(--hair); box-shadow:3px 3px 0 var(--hair);
  cursor:not-allowed;
}
.btn.ghost{
  background:transparent; color:var(--ink);
}
.btn.ghost:hover{ background:rgba(87,53,142,.10); }
.btn.ghost[disabled]{ background:transparent; color:var(--faded); }
.btn.big{
  font-size:19px; padding:.7rem 1.6rem; min-width:74px;
}

/* =========================================================================
   FIG 1  dot fields
   ========================================================================= */
.dotfield-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.2rem;
}
.dotfield{ margin:0; }
.dotfield canvas{ width:100%; aspect-ratio:1; }
.dotfield figcaption{ margin-top:.7rem; }
.pick{
  width:100%;
  font-family:var(--mono); font-size:13px; font-weight:600;
  padding:.62rem .8rem;
  border:1.5px solid var(--ink);
  background:transparent; color:var(--ink);
  cursor:pointer;
  box-shadow:3px 3px 0 var(--ink);
}
.pick:hover{ background:rgba(87,53,142,.10); }
.pick:active{ transform:translate(3px,3px); box-shadow:none; }
.pick[disabled]{ cursor:default; opacity:.55; }
.pick.chosen{ background:var(--violet); color:#F6F4FA; opacity:1; }

.verdict{
  margin-top:1.2rem;
  border-left:5px solid var(--stamp);
  background:rgba(251,252,248,.85);
  padding:.9rem 1.1rem;
  font-size:17px;
  line-height:1.55;
}
.verdict strong{ font-family:var(--disp); font-weight:800; }
.verdict b{ color:var(--stamp); font-weight:600; }

/* =========================================================================
   FIG 2  coin tape
   ========================================================================= */
.tape{
  min-height:104px;
  background:#FBFCF8;
  border:1px solid var(--hair);
  padding:.7rem;
  display:flex; flex-wrap:wrap; gap:4px;
  align-content:flex-start;
}
.tape span{
  font-family:var(--mono);
  font-size:14px; font-weight:600;
  width:26px; height:26px;
  display:grid; place-items:center;
  border:1px solid var(--hair);
  background:var(--paper);
}
.tape span.h{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.tape span.t{ background:transparent; color:var(--ink); }
.tape span.new{ animation:pop .16s ease-out; }
@keyframes pop{ from{ transform:scale(.55); opacity:0; } to{ transform:scale(1); opacity:1; } }

.counter{
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faded); margin-top:.6rem;
}

.report{
  margin-top:1.2rem;
  border:1.5px solid var(--ink);
  background:#FBFCF8;
  padding:1rem 1.1rem;
}
.report h3{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; margin:0 0 .8rem; color:var(--faded);
}
.metric{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:.4rem 1rem;
  align-items:baseline;
  font-family:var(--mono); font-size:13.5px;
  padding:.5rem 0;
  border-top:1px dotted var(--hair);
}
.metric:first-of-type{ border-top:0; }
.metric .k{ color:#2B2F29; }
.metric .you{ font-weight:700; font-size:17px; color:var(--stamp); }
.metric .exp{ color:var(--faded); }
.report .verdict-line{
  margin-top:1rem; padding-top:.9rem;
  border-top:1.5px solid var(--ink);
  font-family:var(--body); font-size:18px; line-height:1.5;
}

/* =========================================================================
   FIG 4  cluster map
   ========================================================================= */
.newspaper{
  min-height:3.6rem;
  margin-bottom:1rem;
  padding:.8rem 1rem;
  background:#FBFCF8;
  border:1px solid var(--hair);
  border-left:5px solid var(--stamp);
}
.newspaper .kicker{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faded); display:block; margin-bottom:.25rem;
}
.newspaper .head{
  display:block;
  font-family:var(--disp); font-weight:900;
  font-size:clamp(19px,2.6vw,29px); line-height:1.08;
  letter-spacing:-.02em;
}
#cluster-map{ width:100%; }

/* =========================================================================
   FIG 5  benford
   ========================================================================= */
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.chip{
  font-family:var(--mono); font-size:12.5px; font-weight:500;
  padding:.42rem .8rem;
  border:1.5px solid var(--ink);
  background:transparent; color:var(--ink);
  cursor:pointer;
}
.chip:hover{ background:rgba(87,53,142,.10); }
.chip[aria-pressed="true"]{ background:var(--ink); color:var(--paper); }
#benford-chart{ width:100%; }

.paste{ margin-top:1.2rem; }
.paste textarea{
  width:100%;
  font-family:var(--mono); font-size:13.5px;
  padding:.7rem;
  border:1.5px solid var(--ink);
  background:#FBFCF8; color:var(--ink);
  margin:.45rem 0 .7rem;
  resize:vertical;
}

/* =========================================================================
   FIG 6  birthdays
   ========================================================================= */
.slider-row{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; }
#bday-slider{
  flex:1 1 260px;
  accent-color:var(--violet);
  height:26px;
}
.big-number{
  font-family:var(--mono); font-weight:700;
  font-size:clamp(34px,5vw,52px); line-height:1;
  color:var(--violet);
  min-width:2.6ch; text-align:right;
}
.prob{
  font-size:15px; margin:.6rem 0 1rem;
  color:#2B2F29;
}
.prob b{ font-size:23px; color:var(--stamp); }
#bday-room{ width:100%; }

/* =========================================================================
   FOOTER
   ========================================================================= */
footer{ margin-top:clamp(3rem,7vw,5rem); }
.perf{
  height:2px;
  max-width:var(--wide);
  margin:0 auto;
  background-image:linear-gradient(to right, var(--hair) 0 7px, transparent 7px 14px);
  background-size:14px 2px;
}
.foot-inner{
  max-width:var(--wide);
  margin:0 auto;
  padding:2rem clamp(1rem,4vw,2.5rem) 4rem;
  font-size:12.5px; line-height:1.75; color:var(--faded);
}
.foot-inner p{ margin:0 0 .8rem; max-width:76ch; }
.foot-inner code{ font-size:12px; background:var(--bar); padding:.05em .35em; }
.foot-inner em{ font-style:italic; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:820px){
  body{ padding-left:0; font-size:18px; }
  .sprockets{ display:none; }
  .panel{ box-shadow:4px 4px 0 rgba(26,29,25,.14); }
  .masthead{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--faded);
  padding-bottom:.6rem; margin-bottom:.9rem;
  border-bottom:1.5px solid var(--ink);
}
.masthead strong{ color:var(--ink); font-weight:700; letter-spacing:.14em; }

.hero-title{
  font-family:var(--disp);
  font-weight:900;
  font-size:clamp(34px,9.5vw,54px);
  line-height:.97;
  letter-spacing:-.032em;
  margin:0 0 1rem;
  max-width:14ch;
}

.hero-canvas-wrap{ box-shadow:4px 4px 0 rgba(26,29,25,.14); }
  .btn.big{ flex:1 1 40%; }
}

@media print{
  .sprockets,.controls,.btn,.chips{ display:none; }
  body{ padding-left:0; background:#fff; }
}