/* ============================================================
   RATKING — Issue 07, The Vermin Number

   This is a magazine, not a website. It is printed on white stock in
   black plus one or two spot inks, and the spot changes from signature
   to signature. Everything else — the grid, the modules, the tidy
   alignment — has been deliberately taken out. Type collides. Images
   sit at angles and bleed off the trim. Nothing is centred unless it
   is centred badly.
   ============================================================ */

:root{
  --stock:#FBFAF7;               /* the paper. it does not change. */
  --ink:#100F0D;
  --spot:#E5261F;                /* the changing plate */
  --spot2:#1B3FAE;
  --trim: clamp(.9rem, 3vw, 3.2rem);
  --anton:"Anton", Impact, sans-serif;
  --bungee:"Bungee", Impact, sans-serif;
  --wonk:"Fraunces", Georgia, serif;
  --black:"Pirata One", serif;
  --mono:"Space Mono", ui-monospace, Menlo, monospace;
}
[data-sig="matchbox"]{ --spot:#E5261F; --spot2:#1B3FAE }
[data-sig="scope"]   { --spot:#00A040; --spot2:#E5261F }
[data-sig="thermal"] { --spot:#FF5A1F; --spot2:#0E7C7C }
[data-sig="icon"]    { --spot:#B8891B; --spot2:#8C1A12 }

*,*::before,*::after{ box-sizing:border-box }
html{ background:var(--stock); -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--stock); color:var(--ink);
  font-family:var(--mono); font-size:15px; line-height:1.45;
  overflow-x:clip; -webkit-font-smoothing:antialiased;
}
img,svg,canvas{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ background:none; border:0; color:inherit; font:inherit; cursor:pointer }
h1,h2,h3,h4,p,figure,blockquote{ margin:0 }
ul,ol{ margin:0; padding:0; list-style:none }
::selection{ background:var(--spot); color:var(--stock) }
:focus-visible{ outline:3px solid var(--spot); outline-offset:2px }

/* press dirt over the whole issue */
body::after{
  content:""; position:fixed; inset:0; z-index:9000; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* ---------- type, used badly on purpose ---------- */
.anton{ font-family:var(--anton); text-transform:uppercase; line-height:.8; letter-spacing:-.02em }
.bungee{ font-family:var(--bungee); text-transform:uppercase; line-height:.86 }
.wonk{ font-family:var(--wonk); font-variation-settings:"SOFT" 80,"WONK" 1,"opsz" 144; line-height:.94 }
.blk{ font-family:var(--black); line-height:.9 }
.mono{ font-family:var(--mono) }
.huge{ font-size:clamp(3.5rem,19vw,17rem) }
.big { font-size:clamp(2.4rem,9vw,7.5rem) }
.mid { font-size:clamp(1.5rem,4.2vw,3.4rem) }
.sm  { font-size:clamp(1.05rem,2vw,1.5rem) }
.tiny{ font-family:var(--mono); font-size:.625rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase }
.spot{ color:var(--spot) } .spot2{ color:var(--spot2) }
.ko{ color:var(--stock) }
.outline{ color:transparent; -webkit-text-stroke:2px var(--ink) }
.outline-spot{ color:transparent; -webkit-text-stroke:2px var(--spot) }
.squish{ transform:scaleX(.62); transform-origin:left }
.stretch{ transform:scaleX(1.5); transform-origin:left }
.up{ writing-mode:vertical-rl; transform:rotate(180deg) }
.down{ writing-mode:vertical-rl }
.over{ mix-blend-mode:multiply }          /* real overprint */
.rot-l{ transform:rotate(-4deg) } .rot-r{ transform:rotate(3.5deg) }
.rot-l9{ transform:rotate(-90deg) } .rot-r9{ transform:rotate(90deg) }
.drop::first-letter{
  float:left; font-family:var(--bungee); font-size:5.2em; line-height:.72;
  padding:.04em .08em 0 0; color:var(--spot);
}

/* ---------- the sheet ---------- */
.sig{ position:relative; padding-inline:var(--trim); padding-block:clamp(2rem,6vw,6rem); overflow:visible }
.sig--tight{ padding-block:clamp(1.2rem,3vw,2.6rem) }
.sig--bleed{ padding-inline:0 }
.folio{
  position:absolute; bottom:.6rem; font-family:var(--mono); font-size:.6rem;
  letter-spacing:.2em; text-transform:uppercase; opacity:.6;
}
.folio--l{ left:var(--trim) } .folio--r{ right:var(--trim) }
.runhead{
  position:absolute; top:.5rem; left:var(--trim); right:var(--trim);
  display:flex; justify-content:space-between; gap:1rem;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.24em;
  text-transform:uppercase; opacity:.5; pointer-events:none;
}
.reg{ position:absolute; width:26px; height:26px; opacity:.5; pointer-events:none }
.reg svg{ width:100%; height:100% }
.reg circle,.reg path{ fill:none; stroke:var(--ink); stroke-width:1 }
.colourbar{ display:flex; height:12px; width:120px }
.colourbar i{ flex:1 }

/* ---------- collage ---------- */
.collage{ position:relative; min-height:clamp(420px,74vh,860px) }
.cut{ position:absolute; }
.cut img{ width:100%; height:auto; display:block }
.cut--tape::after{
  content:""; position:absolute; top:-10px; left:50%; width:74px; height:24px;
  transform:translateX(-50%) rotate(-4deg);
  background:rgba(226,214,160,.62); box-shadow:0 0 0 1px rgba(0,0,0,.06);
}
.torn{ clip-path:polygon(0 2%,7% 0,18% 3%,31% 0,44% 4%,58% 1%,71% 4%,85% 0,96% 3%,100% 1%,100% 97%,92% 100%,79% 96%,64% 100%,50% 96%,36% 100%,22% 97%,9% 100%,0 97%); }
.halftone{ position:relative }
.halftone::after{
  content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply; opacity:.5;
  background-image:radial-gradient(circle at 50% 50%, rgba(0,0,0,.85) 32%, transparent 34%);
  background-size:3.5px 3.5px;
}
.inkwash{ mix-blend-mode:multiply }
.knock{ filter:grayscale(1) contrast(1.6) }

/* ---------- furniture ---------- */
.rule{ border:0; border-top:2px solid var(--ink); margin:0 }
.rule--fat{ border-top-width:8px }
.rule--spot{ border-top-color:var(--spot) }
.slug{
  display:inline-block; padding:.22rem .5rem; background:var(--ink); color:var(--stock);
  font-family:var(--mono); font-size:.6rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.slug--spot{ background:var(--spot) }
.slug--ko{ background:none; color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink) }
.cont{ font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; opacity:.65 }
.cols{ column-gap:clamp(1rem,2.4vw,2.4rem); column-rule:1px solid rgba(0,0,0,.35) }
.cols p{ margin:0 0 .85em }
.c2{ columns:2 } .c3{ columns:3 }
@media (max-width:820px){ .c2,.c3{ columns:1 } }
.body{ font-family:var(--wonk); font-variation-settings:"SOFT" 20,"WONK" 0,"opsz" 12; font-size:1.02rem; line-height:1.42 }
.caption{
  font-family:var(--mono); font-size:.6rem; line-height:1.5; letter-spacing:.02em;
  max-width:26ch; background:var(--stock); padding:.3rem .4rem;
  box-shadow:0 0 0 1px rgba(0,0,0,.25);
}
.pull{
  font-family:var(--wonk); font-variation-settings:"SOFT" 90,"WONK" 1,"opsz" 144;
  font-size:clamp(1.4rem,3.4vw,2.8rem); line-height:.98; color:var(--spot);
}

/* ---------- thumb index (the tabs cut into the fore-edge) ---------- */
.thumbs{
  position:fixed; z-index:400; right:0; top:50%; transform:translateY(-50%);
  display:grid; gap:2px;
}
.thumbs button{
  writing-mode:vertical-rl; padding:.7rem .3rem;
  font-family:var(--mono); font-size:.55rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; background:var(--ink); color:var(--stock);
  border:1px solid var(--stock);
}
.thumbs button[aria-current="true"]{ background:var(--spot); padding-right:.55rem }
@media (max-width:760px){ .thumbs{ display:none } }

/* cover styles live in cover.css — the old block was removed because its
   `overflow:hidden` on .cover made that section a scroll container, which
   stopped the pinned sheet inside it from sticking to the viewport at all. */

/* ---------- light table: loose cut-outs you can shove around ---------- */
.table{ position:relative; min-height:clamp(380px,58vh,620px); touch-action:none;
  margin-bottom:clamp(3rem,7vw,6rem) }   /* the pieces hang past the bottom edge */
.piece{
  position:absolute; cursor:grab; user-select:none; -webkit-user-select:none;
  box-shadow:3px 4px 0 rgba(0,0,0,.18);
}
.piece:active{ cursor:grabbing }
.piece[data-held="true"]{ box-shadow:9px 12px 0 rgba(0,0,0,.28); z-index:60 !important }
.piece img{ pointer-events:none; width:100%; height:auto }
.piece__cap{ position:absolute; left:0; bottom:-1.15rem; white-space:nowrap }

/* ---------- the photocopier ---------- */
.copier{ display:grid; gap:.7rem }
.copier__glass{ position:relative; background:#fff; box-shadow:0 0 0 2px var(--ink) }
.copier__glass canvas{ width:100%; height:auto; display:block }
.copier__row{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap }
.knob{
  font-family:var(--mono); font-size:.65rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; padding:.6rem .9rem;
  background:var(--ink); color:var(--stock); box-shadow:4px 4px 0 var(--spot);
  transition:transform .1s steps(2), box-shadow .1s steps(2);
}
.knob:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--spot) }
.knob--ko{ background:none; color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink) }
.gen{ font-family:var(--mono); font-size:.65rem; letter-spacing:.14em; text-transform:uppercase }

/* ---------- scope, printed in green ink on white ---------- */
.scope{ position:relative; width:min(74vmin,620px); aspect-ratio:1; margin-inline:auto }
.scope canvas{ width:100%; height:100%; display:block; mix-blend-mode:multiply }
.scope__hit{ position:absolute; width:28px; height:28px; margin:-14px 0 0 -14px; border:2px solid transparent }
.scope__hit:hover,.scope__hit:focus-visible{ border-color:var(--spot) }
.readout{
  font-family:var(--mono); font-size:.72rem; line-height:1.65;
  border:2px solid var(--ink); padding:.7rem .85rem; min-height:8rem; background:var(--stock);
}
.readout b{ color:var(--spot) }

/* ---------- street tags ---------- */
.tagged{ position:relative; display:inline-block }
.pin{
  position:absolute; width:16px; height:16px; border-radius:50%;
  background:var(--spot); box-shadow:0 0 0 2px var(--stock), 0 0 0 3px var(--ink);
}
.pin span{
  position:absolute; left:22px; top:-4px; white-space:nowrap;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase;
  background:var(--stock); padding:.18rem .35rem; box-shadow:0 0 0 1px var(--ink);
  opacity:0; transform:translateX(-4px); transition:opacity .15s, transform .15s; pointer-events:none;
}
.pin:hover span,.pin:focus-visible span{ opacity:1; transform:none }

/* ---------- classifieds ---------- */
.ads{ columns:4; column-gap:1.2rem; column-rule:1px solid var(--ink); font-size:.68rem; line-height:1.4 }
.ads p{ break-inside:avoid; margin:0 0 .8rem }
.ads b{ font-family:var(--anton); font-size:.9rem; letter-spacing:.02em; text-transform:uppercase; display:block }
@media (max-width:900px){ .ads{ columns:2 } }
@media (max-width:520px){ .ads{ columns:1 } }

/* ---------- starburst + rat, kept from before ---------- */
.starburst{ position:fixed; z-index:7500; pointer-events:none; width:110px; height:110px; margin:-55px 0 0 -55px }
.starburst .bst{ fill:var(--spot) }
.starburst svg{ width:100%; height:100%; animation:bst .42s cubic-bezier(.2,.9,.3,1) forwards }
@keyframes bst{ 0%{transform:scale(.1)}100%{transform:scale(1.15) rotate(38deg);opacity:0} }
.scurry{ position:fixed; left:-90px; z-index:7000; width:62px; height:30px; padding:0; border:0;
  animation:scur var(--dur,9s) linear 1 forwards }
.scurry svg{ width:100%; height:100%; fill:var(--ink); stroke:var(--ink) }
.scurry .w{ fill:var(--stock) }
.scurry:hover svg{ fill:var(--spot); stroke:var(--spot) }
.scurry[data-caught="true"]{ animation:none; transform:rotate(180deg) }
@keyframes scur{ to{ transform:translateX(calc(100vw + 180px)) } }
@media (prefers-reduced-motion:reduce){ .scurry{ display:none } }
html[data-infested="true"] body::before{
  content:""; position:fixed; inset:0; z-index:6800; pointer-events:none; opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23000'%3E%3Cpath d='M20 40c0-6 4-10 10-10 4 0 7 2 8 4 3-1 5 0 6 3 1 2-1 5-4 5H23c-2 0-3-1-3-2z'/%3E%3Ccircle cx='36' cy='31' r='3.4'/%3E%3Cpath d='M78 92c0-6 4-10 10-10 4 0 7 2 8 4 3-1 5 0 6 3 1 2-1 5-4 5H81c-2 0-3-1-3-2z'/%3E%3Ccircle cx='94' cy='83' r='3.4'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- 12-column spreads, and what a phone does with them ---------- */
.g12{ display:grid; grid-template-columns:repeat(12,1fr) }
@media (max-width:820px){
  /* Every grid-column span in the issue is written for twelve tracks. On a phone
     they would each be about 35px wide, which is not a column, it is a crease.
     The spans are inline styles, so !important is what it takes to undo them. */
  .g12{ grid-template-columns:1fr; gap:1.4rem }
  .g12 > *{ grid-column:1 / -1 !important; grid-row:auto !important; margin-top:0 !important }
  .cols{ columns:1 }
}

/* The old small-screen cover override lived here. It set display:flex and
   justify-content:flex-end on .cover, which wrecked the pinned sheet on a phone —
   the cover no longer owns those class names, so it is gone. cover.css handles
   the small sheet itself. */

/* ---------- the features rail on the back page ---------- */
.feat-rail{ display:grid; gap:2px; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)) }
.feat-rail a{ position:relative; display:block; overflow:hidden }
.feat-rail img{ width:100%; height:clamp(110px,13vw,170px); object-fit:cover; display:block }
.feat-rail span{
  position:absolute; left:0; bottom:0; background:var(--stock); padding:.25rem .4rem;
  font-family:var(--mono); font-size:.55rem; line-height:1.3; max-width:92%;
}
.feat-rail span b{ font-family:var(--anton); font-size:.88rem; display:block; text-transform:uppercase; line-height:1 }
.feat-rail a:hover img{ filter:contrast(1.2) saturate(1.3) }