/* ============================================================
   WRONG™ — The Taste Issue
   Chaos with a grid underneath. Every rotation is a whole degree.
   ============================================================ */

:root{
  --orange:#ff4d00;
  --blue:#0033ff;
  --paper:#f5f1e6;
  --paper-2:#efe9d8;
  --ink:#141311;
  --ink-soft:#2a2823;

  --didone:"Bodoni Moda", "Didot", serif;
  --grotesk:"Space Grotesk", "Helvetica Neue", sans-serif;
  --mono:"IBM Plex Mono", "Courier New", monospace;
  --display:"Archivo Black", "Arial Black", sans-serif;

  --col: min(90rem, 92vw);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--grotesk);
  font-size:1.0625rem;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--orange);color:var(--paper)}
a{color:inherit}
a:focus-visible,.fn-ref:focus-visible,.tm:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
img,svg{max-width:100%}
sup{line-height:0}

/* type detailing — quiet craft under the loud costume */
.section-title,.section-sub,.rule-body h3{text-wrap:balance}
.essay-body p,.rule-body p,.note p,.cover-dek p,.colo-col p{text-wrap:pretty}
.pull-quote{hanging-punctuation:first}
.mast-meta,.dodge-score,.donot-count,.fn-note{font-variant-numeric:tabular-nums}

/* paper grain + the honest grid underneath */
body::before{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;
  z-index:0;
  background-image:
    repeating-linear-gradient(90deg, rgba(0,51,255,.05) 0 1px, transparent 1px calc(100%/12)),
    radial-gradient(rgba(20,19,17,.05) 1px, transparent 1.5px);
  background-size:100% 100%, 5px 5px;
}
main, header, footer{position:relative;z-index:1}

/* ------------------------------------------------------------
   crop marks
------------------------------------------------------------ */
.cropmarks .crop{
  position:fixed;width:26px;height:26px;z-index:60;pointer-events:none;
}
.crop::before,.crop::after{content:"";position:absolute;background:var(--ink)}
.crop::before{width:100%;height:1px}
.crop::after{width:1px;height:100%}
.crop-tl{top:10px;left:10px}
.crop-tr{top:10px;right:10px;transform:scaleX(-1)}
.crop-bl{bottom:10px;left:10px;transform:scaleY(-1)}
.crop-br{bottom:10px;right:10px;transform:scale(-1)}

/* ------------------------------------------------------------
   shards — everything that shatters. Tilt via `rotate:` so GSAP
   transforms compose instead of clobbering.
------------------------------------------------------------ */
.shard{will-change:transform}
.nudge-u{rotate:-2deg}
.nudge-d{rotate:2deg}

/* ------------------------------------------------------------
   masthead
------------------------------------------------------------ */
.masthead{
  position:sticky;top:0;z-index:50;
  background:var(--paper);
  border-bottom:3px solid var(--ink);
}
.masthead-inner{
  width:var(--col);margin:0 auto;
  display:flex;align-items:center;gap:1.5rem;
  padding:.65rem 0;
}
.logo{
  font-family:var(--display);
  font-size:1.7rem;letter-spacing:-.02em;
  text-decoration:none;color:var(--ink);
  rotate:-2deg;display:inline-block;
  position:relative;
}
.logo .tm{
  font-family:var(--mono);font-size:.55em;color:var(--orange);
  cursor:pointer;user-select:none;
}
.mast-nav{display:flex;gap:1.4rem;margin-left:auto;flex-wrap:wrap}
.mast-link{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;
  text-transform:uppercase;text-decoration:none;
  border-bottom:2px solid transparent;padding-bottom:2px;
  display:inline-block;
  transition:rotate .16s ease, color .16s, border-color .16s;
}
.mast-link:hover{border-bottom-color:var(--orange);color:var(--orange)}
.mast-nav .mast-link:nth-child(odd):hover{rotate:-1deg}
.mast-nav .mast-link:nth-child(even):hover{rotate:1deg}
.mast-link--guide{
  background:var(--blue);color:var(--paper);padding:.2rem .55rem;
  rotate:1deg;
}
.mast-link--guide:hover{background:var(--orange);color:var(--paper);border-bottom-color:transparent}
.mast-meta{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;
  display:flex;gap:.45rem;white-space:nowrap;
}
.mast-meta em{font-style:italic;color:var(--orange)}
.mast-sep{color:var(--orange)}

/* ------------------------------------------------------------
   cover
------------------------------------------------------------ */
.cover{
  position:relative;
  min-height:calc(100svh - 60px);
  padding:4rem 0 5.5rem;
  overflow:clip;
  border-bottom:3px solid var(--ink);
}
.cover-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(0,51,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,51,255,.07) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);
}
.cover-inner{
  width:var(--col);margin:0 auto;position:relative;
}
.cover-kicker{
  display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  margin-bottom:1rem;
}
.kicker-box{
  font-family:var(--mono);font-weight:600;font-size:.8rem;letter-spacing:.14em;
  background:var(--ink);color:var(--paper);
  padding:.35rem .7rem;display:inline-block;rotate:-1deg;
}
.kicker-plain{
  font-family:var(--didone);font-style:italic;font-size:1.05rem;
  color:var(--ink-soft);
}

.cover-word{
  font-size:clamp(6rem, 24vw, 22rem);
  line-height:.82;
  letter-spacing:-.03em;
  user-select:none;
  display:flex;align-items:baseline;
  margin-left:-.03em;
  position:relative;z-index:2;
}
.cw{display:inline-block;will-change:transform}
.cw-w{font-family:var(--display);color:var(--ink);rotate:-4deg}
.cw-r{font-family:var(--didone);font-weight:900;font-style:italic;color:var(--orange);rotate:3deg;margin-left:-.04em}
.cw-o{
  font-family:var(--grotesk);font-weight:700;
  color:transparent;
  -webkit-text-stroke:.035em var(--blue);
  rotate:-7deg;margin-left:-.05em;
  translate:0 -.04em;
}
.cw-n{font-family:var(--display);color:var(--ink);rotate:2deg;margin-left:-.03em;translate:0 .05em}
.cw-g{font-family:var(--didone);font-weight:900;color:var(--orange);rotate:-3deg;margin-left:-.02em;
  -webkit-text-stroke:.012em var(--ink);
}

.cover-blue-disc{
  position:absolute;
  top:-6%;right:13%;
  width:clamp(7rem, 13vw, 11.5rem);
  aspect-ratio:1;
  background:var(--blue);color:var(--paper);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  font-family:var(--display);
  font-size:clamp(.9rem, 1.6vw, 1.4rem);
  line-height:1.15;
  rotate:8deg;
  z-index:3;
  box-shadow:6px 6px 0 var(--ink);
}
.cover-proof{
  position:absolute;
  left:6%;margin-top:1.4rem;
  font-family:var(--mono);font-size:.78rem;line-height:1.6;
  color:var(--blue);
  rotate:-2deg;
}
.cover-dek{
  max-width:34rem;
  margin:3rem 0 0 auto;
  font-family:var(--didone);
  font-size:clamp(1.1rem, 1.5vw, 1.3rem);
  line-height:1.65;
  rotate:-1deg;
  background:var(--paper);
  border-left:5px solid var(--orange);
  padding:1.1rem 1.4rem;
  box-shadow:8px 8px 0 rgba(0,51,255,.14);
  position:relative;z-index:2;
}
.cover-stamp{
  position:absolute;
  left:2%;bottom:-3.2rem;
  font-family:var(--mono);font-weight:600;
  font-size:.85rem;letter-spacing:.1em;line-height:1.5;
  color:var(--orange);
  border:3px double var(--orange);
  border-radius:10px;
  padding:.7rem 1rem;
  rotate:-12deg;
  text-align:center;
  opacity:.9;
  z-index:3;
}
.cover-barcode{
  position:absolute;right:0;bottom:-3.6rem;
  rotate:2deg;text-align:center;z-index:3;
  background:var(--paper);padding:.4rem .6rem;border:1px solid var(--ink);
  cursor:pointer;
  transition:box-shadow .18s;
}
.cover-barcode:hover{box-shadow:4px 4px 0 var(--blue)}
.barcode-lines{
  width:9rem;height:2.6rem;
  background:repeating-linear-gradient(90deg,
    var(--ink) 0 2px, transparent 2px 5px,
    var(--ink) 5px 6px, transparent 6px 11px,
    var(--ink) 11px 14px, transparent 14px 16px);
}
.barcode-num{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em}

.cover-margin{
  width:15rem;
  margin:2.6rem 4rem 3.5rem auto;
  rotate:1deg;
  position:relative;z-index:3;
}

/* ------------------------------------------------------------
   marquee tapes
------------------------------------------------------------ */
.tape{
  overflow:hidden;
  background:var(--ink);color:var(--paper);
  border-block:3px solid var(--ink);
  rotate:-1deg;
  scale:1.02 1;
}
.tape-cover{position:absolute;bottom:2rem;left:-2%;width:104%}
.tape-track{
  display:flex;white-space:nowrap;
  font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;
  padding:.55rem 0;
  animation:tape 36s linear infinite;
  width:max-content;
}
.tape-track span{padding-right:2rem}
.tape-track--rev{animation-direction:reverse}
@keyframes tape{to{transform:translateX(-50%)}}
.tape-foot{rotate:1deg;background:var(--orange);border-color:var(--orange);color:var(--ink);margin-bottom:0}
.tape-foot .tape-track{font-weight:600}

/* ------------------------------------------------------------
   section heads
------------------------------------------------------------ */
section{padding:6.5rem 0 5rem;position:relative;scroll-margin-top:4.5rem}
.section-head{
  width:var(--col);margin:0 auto 3.5rem;
  position:relative;
}
.section-no{
  font-family:var(--mono);font-size:1rem;color:var(--blue);
  letter-spacing:.2em;display:inline-block;rotate:-2deg;
  border:2px solid var(--blue);padding:.15rem .5rem;margin-bottom:1rem;
}
.section-title{
  font-family:var(--display);
  font-size:clamp(2.2rem, 5.4vw, 4.4rem);
  line-height:1;letter-spacing:-.02em;
  rotate:-1deg;display:block;width:fit-content;
  margin-bottom:1rem;
}
.section-sub{
  font-family:var(--didone);font-style:italic;
  font-size:clamp(1.02rem, 1.35vw, 1.22rem);
  max-width:44rem;color:var(--ink-soft);
  rotate:0deg;
}

/* ------------------------------------------------------------
   manifesto
------------------------------------------------------------ */
.manifesto{border-bottom:3px solid var(--ink)}
.rules{
  width:var(--col);margin:0 auto;list-style:none;
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:2.2rem 1.5rem;
}
.rule{
  grid-column:span 6;
  display:flex;gap:1.2rem;
  background:var(--paper);
  border:2px solid var(--ink);
  padding:1.6rem 1.7rem 1.7rem;
  box-shadow:7px 7px 0 var(--ink);
  position:relative;
}
.rule{transition:box-shadow .18s, translate .18s}
.rule:hover{box-shadow:10px 10px 0 var(--blue);translate:0 -3px}
.rule--big:hover{box-shadow:12px 12px 0 var(--orange)}
.rule--blue:hover,.rule--orange:hover{box-shadow:10px 10px 0 var(--ink)}
.rule:nth-child(odd){rotate:-1deg}
.rule:nth-child(even){rotate:1deg}
.rule:nth-child(3){translate:0 1.2rem}
.rule:nth-child(4){translate:0 -.8rem}
.rule--blue{background:var(--blue);color:var(--paper);border-color:var(--blue);box-shadow:7px 7px 0 var(--ink)}
.rule--orange{background:var(--orange);color:var(--ink);border-color:var(--ink)}
.rule--big{grid-column:span 12;rotate:-1deg;background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:9px 9px 0 var(--orange)}
.rule-no{
  font-family:var(--didone);font-weight:900;font-style:italic;
  font-size:2.6rem;line-height:1;flex:0 0 auto;
  translate:0 -.35rem;
}
.rule--blue .rule-no{color:var(--orange)}
.rule--orange .rule-no{color:var(--paper)}
.rule--big .rule-no{color:var(--orange);font-size:3.4rem}
.rule-body h3{
  font-family:var(--grotesk);font-weight:700;
  font-size:1.35rem;letter-spacing:-.01em;margin-bottom:.5rem;
}
.rule--big .rule-body h3{font-size:clamp(1.5rem,2.6vw,2.2rem);font-family:var(--display);font-weight:400}
.rule-body p{font-size:1rem;line-height:1.6}
.rule--big .rule-body p{font-family:var(--didone);font-size:clamp(1.05rem,1.6vw,1.35rem)}
.rule-breath{height:2.2rem}

/* footnote refs */
.fn-ref{
  font-family:var(--mono);font-size:.62em;
  color:var(--orange);cursor:pointer;
  padding:0 .18em;border:1px solid currentColor;border-radius:3px;
  margin-left:.15em;user-select:none;
  transition:background .15s,color .15s;
}
.fn-ref:hover{background:var(--orange);color:var(--paper)}
.fn-ref--light{color:var(--orange)}

/* margin footnotes */
.fn-note{
  font-family:var(--mono);font-size:.76rem;line-height:1.55;
  color:var(--ink-soft);
  border-top:2px solid var(--orange);
  padding-top:.5rem;
  background:var(--paper);
  transition:background .3s;
}
.fn-note b{color:var(--orange)}
.fn-note.fn-flash{background:#ffe4d6}
.fn-note--dark{background:var(--ink);color:#cfc9ba;border-top-color:var(--orange)}
.fn-note--dark.fn-flash{background:#3a2416}
.margin-right{width:15rem;margin:3.4rem calc((100vw - var(--col))/2 + 6%) 0 auto;rotate:2deg}
.margin-left{width:14rem;margin:1.8rem auto 0 calc((100vw - var(--col))/2 + 6%);rotate:-2deg}

/* ------------------------------------------------------------
   field notes (dark)
------------------------------------------------------------ */
.fieldnotes{
  background:var(--ink);color:var(--paper);
  border-bottom:3px solid var(--ink);
}
.section-head--invert .section-no{color:var(--orange);border-color:var(--orange)}
.section-head--invert .section-sub{color:#b9b2a2}
.notes-grid{
  width:var(--col);margin:0 auto;list-style:none;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1.6rem 1.4rem;
}
.note{
  border:1px solid #4a463d;
  padding:1.3rem 1.3rem 1.4rem;
  background:#1c1a17;
  position:relative;
  transition:border-color .2s, translate .2s;
}
.note:nth-child(3n){rotate:1deg}
.note:nth-child(3n+1){rotate:-1deg}
.note:nth-child(4n){translate:0 .7rem}
.note:hover{border-color:var(--orange);translate:0 -3px}
.note-no{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;
  color:var(--orange);
}
.note h3{
  font-family:var(--didone);font-weight:900;font-size:1.5rem;
  margin:.4rem 0 .55rem;letter-spacing:.01em;
}
.note p{font-size:.9rem;line-height:1.6;color:#cfc9ba}
.notes-etc{
  width:var(--col);margin:2.6rem auto 0;
  font-family:var(--mono);font-size:.85rem;color:#b9b2a2;
  max-width:46rem;rotate:-1deg;
}

/* ------------------------------------------------------------
   the button
------------------------------------------------------------ */
.buttonzone{
  border-bottom:3px solid var(--ink);
  background:
    repeating-linear-gradient(-45deg, transparent 0 34px, rgba(255,77,0,.06) 34px 68px),
    var(--paper);
}
.button-stage{
  width:var(--col);margin:0 auto;
  display:flex;flex-direction:column;align-items:center;
  padding:2.5rem 0 1rem;
  position:relative;
}
.button-stage::before{
  content:"";
  position:absolute;inset:0 auto auto 50%;
  translate:-50% 0;
  width:min(34rem, 90%);height:100%;
  border:3px dashed var(--orange);
  border-radius:14px;
  rotate:-1deg;
  pointer-events:none;
}
.donot{
  position:relative;
  font-family:var(--display);
  font-size:clamp(1.5rem, 3.4vw, 2.6rem);
  letter-spacing:.02em;
  color:var(--paper);
  background:none;border:none;cursor:pointer;
  rotate:-2deg;
  padding:0;
  -webkit-tap-highlight-color:transparent;
}
.donot-face{
  position:relative;z-index:2;display:block;
  background:var(--orange);
  padding:1.3rem 3rem 1.4rem;
  border:3px solid var(--ink);
  translate:0 0;
  transition:translate .08s ease;
}
.donot-edge{
  position:absolute;inset:0;z-index:1;
  background:var(--ink);
  translate:9px 11px;
  border:3px solid var(--ink);
}
.donot:hover .donot-face{translate:3px 4px}
.donot:active .donot-face{translate:9px 11px}
.donot:focus-visible{outline:3px solid var(--blue);outline-offset:6px}
.donot-annot{
  position:absolute;
  font-family:var(--didone);font-style:italic;
  font-size:1.02rem;line-height:1.5;color:var(--ink-soft);
}
.donot-annot em{color:var(--orange)}
.annot-arrow{font-family:var(--grotesk);font-style:normal;color:var(--orange);font-size:1.3em}
.donot-annot--left{left:6%;top:2.2rem;rotate:-3deg;text-align:right}
.donot-annot--right{right:6%;bottom:3.6rem;rotate:2deg}
.donot-fineprint{
  margin-top:2rem;
  font-family:var(--mono);font-size:.8rem;color:var(--ink-soft);
  rotate:1deg;text-align:center;max-width:30rem;
}
.donot-count{
  margin-top:.6rem;min-height:1.4em;
  font-family:var(--didone);font-style:italic;font-size:1.05rem;
  color:var(--blue);text-align:center;
}

/* shatter overlay */
.told-you{
  position:fixed;inset:0;z-index:90;
  background:var(--orange);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);
  font-size:clamp(3rem, 14vw, 12rem);
  color:var(--ink);
  letter-spacing:-.02em;
  opacity:0;pointer-events:none;
}
.told-you span{rotate:-4deg;display:block}

/* ------------------------------------------------------------
   dodge zone
------------------------------------------------------------ */
.dodgezone{border-bottom:3px solid var(--ink);background:var(--paper-2)}
.dodge-arena{
  width:var(--col);margin:0 auto;
  cursor:crosshair;
  height:24rem;
  border:2px solid var(--ink);
  background:
    linear-gradient(rgba(0,51,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,51,255,.06) 1px, transparent 1px),
    var(--paper);
  background-size:48px 48px;
  position:relative;
  overflow:clip;
  box-shadow:8px 8px 0 var(--blue);
}
.dodge-ghost{
  position:absolute;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.03em;
  color:rgba(20,19,17,.42);
  pointer-events:none;user-select:none;
}
.dodge-ghost s{text-decoration-color:var(--orange);text-decoration-thickness:2px}
.dodge-ghost-1{left:1.2rem;top:1rem;rotate:-1deg}
.dodge-ghost-2{left:2.6rem;top:2.7rem;rotate:-1deg}
.dodge-ghost-3{right:1.2rem;bottom:.9rem;rotate:1deg;color:rgba(0,51,255,.65)}
.dodge-chip{
  position:absolute;left:50%;top:42%;
  translate:-50% -50%;
  background:var(--blue);color:var(--paper);
  padding:1rem 1.6rem .9rem;
  text-align:center;
  rotate:-3deg;
  cursor:pointer;
  box-shadow:5px 5px 0 var(--ink);
  user-select:none;
  will-change:transform;
}
.dodge-word{
  font-family:var(--didone);font-weight:900;font-style:italic;
  font-size:2.4rem;letter-spacing:.02em;display:block;line-height:1;
}
.dodge-sub{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;
  display:block;margin-top:.45rem;color:#c8d2ff;
}
.dodge-chip.caught{background:var(--orange);box-shadow:5px 5px 0 var(--ink)}
.dodge-chip.caught .dodge-sub{color:var(--paper)}
.dodge-spark{
  position:absolute;z-index:5;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;
  color:var(--blue);
  pointer-events:none;user-select:none;
  will-change:transform;
}
.dodge-score{
  position:absolute;left:1rem;bottom:.8rem;
  font-family:var(--mono);font-size:.78rem;color:var(--ink-soft);
}
.dodge-score b{color:var(--orange);font-size:1rem}
.dodge-hint{
  width:var(--col);margin:1.2rem auto 0;
  font-family:var(--didone);font-style:italic;color:var(--ink-soft);
  rotate:-1deg;
}

/* ------------------------------------------------------------
   the pause (scroll-jack)
------------------------------------------------------------ */
.pause{padding:0;background:var(--blue);border-bottom:3px solid var(--ink)}
.pause-pin{
  height:100svh;
  display:flex;align-items:center;justify-content:center;
  overflow:clip;
}
.pause-tag{
  position:absolute;top:calc(var(--mast-h, 4.2rem) + 1.1rem);left:50%;translate:-50% 0;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  color:#c8d2ff;text-transform:uppercase;white-space:nowrap;
  rotate:-1deg;
}
.pause-pin{position:relative}
.pause-lines{
  width:min(56rem, 88vw);
  display:flex;flex-direction:column;gap:1.6rem;
}
.pause-line{
  font-family:var(--display);
  font-size:clamp(1.6rem, 4.6vw, 3.6rem);
  line-height:1.06;
  color:var(--paper);
  opacity:0;
  rotate:-1deg;
}
.pause-line:nth-child(even){rotate:1deg;margin-left:6%}
.pause-line--orange{color:var(--orange);-webkit-text-stroke:1px var(--paper)}
.pause-line--dots{font-size:clamp(2.4rem,6vw,5rem);letter-spacing:.3em}
.pause-line--small{
  font-family:var(--mono);font-size:clamp(.85rem,1.6vw,1.05rem);
  color:#c8d2ff;letter-spacing:.08em;
}
.pause-line--free{color:var(--paper)}

/* ------------------------------------------------------------
   essay
------------------------------------------------------------ */
.essay{border-bottom:3px solid var(--ink);padding-bottom:7rem}
.essay-cols{
  width:var(--col);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);
  gap:3.4rem;
  align-items:start;
}
.essay-body{
  font-family:var(--didone);
  font-size:clamp(1.08rem, 1.45vw, 1.3rem);
  line-height:1.78;
  rotate:0deg;
}
.essay-body p{margin-bottom:1.5em}
.essay-body p:last-child{margin-bottom:0}
.dropcap{
  float:left;
  font-family:var(--display);
  font-size:4.6em;line-height:.78;
  padding:.06em .12em 0 0;
  color:var(--orange);
  rotate:-3deg;
}
.essay-margins{
  display:flex;flex-direction:column;gap:2.4rem;
  padding-top:1.2rem;
}
.fn-clicky{cursor:pointer;rotate:1deg}
.fn-clicky:nth-child(even){rotate:-1deg}
.fn-clicky:hover{background:#ffe4d6}
.fn-clicky::after{
  content:"↺ click";
  display:block;margin-top:.4rem;
  font-size:.62rem;letter-spacing:.14em;color:var(--blue);
  text-transform:uppercase;
}
.pull-quote{
  font-family:var(--didone);font-weight:900;
  font-size:clamp(1.8rem, 2.6vw, 2.5rem);
  line-height:1.12;letter-spacing:-.01em;
  color:var(--ink);
  rotate:-2deg;
  border:none;
  margin-top:1rem;
  padding:1.1rem 0 0;
  border-top:5px solid var(--blue);
}
.pull-quote em{color:var(--orange);font-style:italic}

/* idle marginalia */
.idle-note{
  position:fixed;z-index:70;
  width:15rem;
  font-family:var(--mono);font-size:.74rem;line-height:1.6;
  background:var(--ink);color:var(--paper);
  padding:.8rem 1rem;
  box-shadow:5px 5px 0 var(--orange);
  opacity:0;translate:0 12px;visibility:hidden;
  transition:opacity .5s, translate .5s, visibility .5s;
}
.idle-note b{color:var(--orange)}
.idle-1{left:1.4rem;bottom:6.5rem;rotate:-2deg}
.idle-2{right:1.4rem;bottom:3rem;rotate:2deg}
.idle-note.show{opacity:1;translate:0 0;visibility:visible}

/* ------------------------------------------------------------
   colophon
------------------------------------------------------------ */
.colophon{background:var(--ink);color:var(--paper);padding-bottom:3rem;overflow-x:clip}
.colophon-grid{
  width:var(--col);margin:4rem auto 3rem;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:2.4rem;
}
.colo-col:nth-child(odd){rotate:-1deg}
.colo-col:nth-child(even){rotate:1deg}
.colo-col h3{
  font-family:var(--display);font-size:1.05rem;letter-spacing:.03em;
  color:var(--orange);margin-bottom:.8rem;
}
.colo-col p{font-size:.88rem;line-height:1.7;color:#cfc9ba}
.colo-col b{color:var(--paper)}
.swatch{
  display:inline-block;width:.8em;height:.8em;margin-right:.5em;
  border:1px solid #4a463d;vertical-align:baseline;translate:0 .07em;
}
.swatch-orange{background:var(--orange)}
.swatch-blue{background:var(--blue)}
.swatch-paper{background:var(--paper)}
.swatch-ink{background:var(--ink)}
.konami-hint{
  font-family:var(--mono);color:var(--paper);letter-spacing:.2em;
  display:inline-block;margin:.4rem 0;font-size:1rem;
}
.colophon-legal{
  width:var(--col);margin:0 auto;
  border-top:1px solid #4a463d;
  padding-top:1.6rem;
  display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.76rem;color:#b9b2a2;
}
.colophon-credit a{color:var(--orange);text-decoration-color:rgba(255,77,0,.4)}
.colophon-credit a:hover{text-decoration-color:var(--orange)}
.colophon-credit b{color:var(--paper)}

/* ------------------------------------------------------------
   toast
------------------------------------------------------------ */
.toast{
  position:fixed;left:50%;bottom:1.6rem;z-index:95;
  translate:-50% 20px;
  background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:.82rem;line-height:1.55;
  padding:.9rem 1.3rem;
  max-width:min(30rem, 88vw);
  box-shadow:6px 6px 0 var(--blue);
  rotate:-1deg;
  opacity:0;visibility:hidden;
  transition:opacity .35s, translate .35s, visibility .35s;
}
.toast.show{opacity:1;translate:-50% 0;visibility:visible}
.toast em{color:var(--orange);font-style:normal}

/* falling ™ particles */
.tm-drop{
  position:fixed;z-index:94;top:-3rem;
  font-family:var(--mono);
  color:var(--orange);
  pointer-events:none;user-select:none;
  will-change:transform;
}

/* ------------------------------------------------------------
   OBEDIENCE MODE (konami)
------------------------------------------------------------ */
body.behave *{rotate:0deg !important}
body.behave .tape-track{animation-play-state:paused}
body.behave .cw-o{-webkit-text-stroke-color:var(--ink)}
body.behave .cw-r,body.behave .cw-g{color:var(--ink);background:none;-webkit-text-stroke:0}
body.behave .cw-g{text-shadow:none}
body.behave .cover-blue-disc,body.behave .rule--blue{background:var(--ink)}
body.behave .rule--orange{background:var(--paper);color:var(--ink)}
body.behave .donot-face{background:var(--ink)}
body.behave .dodge-chip{background:var(--ink)}
body.behave{filter:saturate(.15)}

/* ------------------------------------------------------------
   reduced motion
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .tape-track{animation:none;width:auto}
  .tape-track span+span{display:none}
  .pause-line{opacity:1 !important}
  .idle-note,.toast{transition:none}
}

/* ------------------------------------------------------------
   responsive
------------------------------------------------------------ */
@media (max-width:1180px){
  .margin-right,.margin-left{position:static;width:auto;max-width:26rem;margin:2.2rem auto 0;rotate:-1deg}
  .cover-margin{position:static;width:auto;max-width:22rem;margin-top:2rem}
  .notes-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .essay-cols{grid-template-columns:1fr}
  .essay-margins{flex-direction:row;flex-wrap:wrap;gap:1.4rem}
  .essay-margins .fn-note{flex:1 1 16rem}
  .rule{grid-column:span 12}
  .rule:nth-child(3),.rule:nth-child(4){translate:0 0}
  .colophon-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  body{font-size:1rem}
  section{padding:4.5rem 0 3.5rem}
  .masthead-inner{gap:.8rem;flex-wrap:wrap;padding:.6rem 0}
  .mast-nav{gap:.9rem;margin-left:0;order:3;width:100%;padding-bottom:.4rem}
  .mast-meta{margin-left:auto;font-size:.62rem}
  .cover{padding-top:2.5rem;min-height:auto}
  .cover-word{font-size:clamp(4rem, 21.5vw, 7rem)}
  .cover-blue-disc{position:static;width:6.6rem;font-size:.82rem;box-shadow:4px 4px 0 var(--ink);margin:1.8rem 0 0 auto}
  .cover-dek{margin-top:1.6rem;font-size:1.02rem;padding:.9rem 1rem}
  .cover-margin{margin:2rem 0 0 auto;width:auto;max-width:17rem}
  .cover-proof{position:static;margin-top:1.2rem}
  .margin-right{margin:3rem 0 0 auto;width:auto;max-width:20rem}
  .margin-left{margin:1.6rem auto 0 0;width:auto;max-width:19rem}
  .cover-stamp{position:static;rotate:-4deg;margin:2.4rem auto 0;width:fit-content;font-size:.72rem}
  .cover-barcode{position:static;margin:1.6rem auto 0;width:fit-content;rotate:1deg}
  .tape-cover{position:static;width:104%;margin-top:2.5rem}
  .cover{padding-bottom:0;overflow:visible;overflow-x:clip}
  .notes-grid{grid-template-columns:1fr}
  .note:nth-child(4n){translate:0 0}
  .dodge-arena{height:19rem}
  .dodge-word{font-size:1.7rem}
  .colophon-grid{grid-template-columns:1fr;gap:1.8rem}
  .idle-note{width:12rem;font-size:.68rem}
  .idle-1{bottom:8.5rem}
  .button-stage::before{width:100%}
  .donot-face{padding:1rem 1.6rem 1.1rem}
  .donot-annot--left{position:static;text-align:center;rotate:-2deg;margin-bottom:1.8rem}
  .donot-annot--right{display:none}
  .dodge-ghost-2{display:none}
  .dodge-ghost{font-size:.66rem}
  .dodge-ghost-3{bottom:2.6rem;right:1rem;max-width:13rem;text-align:right}
  .pause-tag{white-space:normal;width:max-content;max-width:86vw;text-align:center}
  .pull-quote{font-size:1.7rem}
}