/* ═══ tokens ═══ */
:root{
  --yellow:#FFE600; --pink:#FF3D8B; --cyan:#22D3EE; --lime:#B8FF29;
  --orange:#FF7A2F; --purple:#A66BFF;
  --cat:#FF8A3D; --cat-ear:#FF9EC4;

  --paper:#F3EFE3;            /* newsprint */
  --panel:#FBF8EF;
  --ink:#000000; --sub:#43413B;
  --tint:rgba(0,0,0,.055);

  --bw:3px; --sh:6px;
  --shadow:var(--sh) var(--sh) 0 var(--ink);
  --shadow-sm:4px 4px 0 var(--ink);

  --f-mast:'Archivo Black','Arial Black',Impact,sans-serif;
  --f-head:'DM Serif Display',Georgia,'Times New Roman',serif;
  --f-body:'Newsreader',Georgia,'Times New Roman',serif;
  --f-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --page:1240px;
  --snap:cubic-bezier(.2,.9,.25,1);
}
[data-theme=dark]{
  --paper:#111013; --panel:#1A181D; --ink:#F5F2E8; --sub:#B0ABA0;
  --tint:rgba(245,242,232,.07);
}

/* ═══ reset ═══ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px;overflow-x:hidden}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 17.5px/1.55 var(--f-body);
  /* newsprint tooth */
  background-image:radial-gradient(var(--tint) .8px,transparent .9px);
  background-size:4px 4px;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.03;font-weight:400}
p{margin:0 0 .85em}
ul,ol,dl{margin:0;padding:0;list-style:none}
::selection{background:var(--pink);color:#000}
:focus-visible{outline:4px solid var(--pink);outline-offset:2px}

.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--yellow);color:#000;
  padding:12px 18px;border:var(--bw) solid #000;font:700 14px var(--f-mono)}
.skip:focus{left:8px;top:8px}

/* the printed sheet */
.paper{max-width:var(--page);margin:0 auto;padding:0 clamp(12px,3vw,30px) 0;
  background:var(--panel);border-inline:var(--bw) solid var(--ink);min-height:100vh}

/* ═══ rules ═══ */
.rule{height:0;border-top:1.5px solid var(--ink);margin:14px 0}
.rule--thin{border-top-width:1px;margin:10px 0}
.rule--fat{height:0;border-top:5px solid var(--ink);
  box-shadow:0 4px 0 -2.5px var(--ink);margin:9px 0}

/* ═══ scroll edge, with a cat on it ═══ */
.edge{position:fixed;inset:auto 0 0 0;height:14px;z-index:120;
  background:var(--panel);border-top:var(--bw) solid var(--ink)}
.edge__fill{height:100%;width:0;background:var(--pink);border-right:var(--bw) solid var(--ink)}
.edge__cat{position:absolute;bottom:10px;left:0;width:54px;height:33px;pointer-events:none}

/* ═══ reveal ═══ */
.js [data-rv]{opacity:0;transform:translateY(20px);
  transition:opacity .4s var(--snap),transform .4s var(--snap)}
.js [data-rv].is-in{opacity:1;transform:none}
@media print{.js [data-rv]{opacity:1!important;transform:none!important}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-rv]{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;
    transition-duration:.001s!important}
}

/* ═══ cats ═══ */
.cat{overflow:visible}
@keyframes c-tail{0%,100%{transform:rotate(-13deg)}50%{transform:rotate(15deg)}}
@keyframes c-eye{0%,92%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.08)}}
@keyframes c-swish{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(12deg)}}
@keyframes c-legf{0%{transform:rotate(-20deg)}100%{transform:rotate(20deg)}}
@keyframes c-legb{0%{transform:rotate(20deg)}100%{transform:rotate(-20deg)}}
.c-tail{transform-box:fill-box;transform-origin:8% 92%;animation:c-tail 2.6s ease-in-out infinite}
.c-eye{transform-box:fill-box;transform-origin:center;animation:c-eye 4.6s ease-in-out infinite}
.c-swish{transform-box:fill-box;transform-origin:6% 90%;animation:c-swish 1.5s ease-in-out infinite}
.c-legf{transform-box:fill-box;transform-origin:50% 6%;animation:c-legf .52s ease-in-out infinite alternate}
.c-legb{transform-box:fill-box;transform-origin:50% 6%;animation:c-legb .52s ease-in-out infinite alternate}

.ic{width:1.1em;height:1.1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}