:root{--ink:#111;--paper:#efeadf;--acc:#e0201b}
*{box-sizing:border-box}
body{margin:0;background:#1a1a1a url(/img/paper.jpg);background-blend-mode:multiply;font-family:'Courier Prime',monospace;color:var(--ink)}
a{color:inherit}
.page{max-width:1180px;margin:24px auto;padding:28px 34px 40px;background:var(--paper) url(/img/paper.jpg);position:relative;
 clip-path:polygon(0 1%,4% 0,9% 1.2%,15% .2%,22% 1%,30% 0,38% .9%,47% .1%,55% 1%,63% 0,71% .8%,80% .1%,88% 1%,95% 0,100% .9%,99.4% 20%,100% 45%,99.3% 70%,100% 99%,94% 100%,86% 99.1%,77% 100%,68% 99.2%,58% 100%,49% 99%,40% 100%,31% 99.2%,22% 100%,13% 99.1%,5% 100%,0 99%,.6% 70%,0 40%,.7% 15%)}
.page:after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.035) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.masthead{text-align:center;position:relative;padding:10px 0 6px;border-bottom:6px solid var(--ink)}
.tape{position:absolute;width:130px;height:34px;background:rgba(235,225,180,.75);top:-6px;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.t1{left:10px;transform:rotate(-8deg)}.t2{right:10px;transform:rotate(7deg)}
.kicker{font-family:'Special Elite';letter-spacing:.2em;font-size:14px}
.title{margin:8px 0 0;font-size:92px;line-height:1}.title a{text-decoration:none}
.cut{display:inline-block;padding:2px 10px;margin:0 3px;box-shadow:2px 3px 0 rgba(0,0,0,.35)}
.c0{background:#111;color:#efeadf;font-family:'Black Ops One';transform:rotate(-4deg)}
.c1{background:#fff;font-family:'Special Elite';transform:rotate(3deg);border:2px solid #111}
.c2{background:var(--acc);color:#fff;font-family:'Rubik Dirt';transform:rotate(-2deg)}
.c3{background:#d9d2bf;font-family:'Courier Prime';font-weight:700;transform:rotate(5deg)}
.c4,.c5{background:#111;color:var(--acc);font-family:'Rubik Dirt';transform:rotate(2deg)}
.gap{display:inline-block;width:20px}
.subtitle{font-family:'Black Ops One';font-size:56px;letter-spacing:.12em;margin-top:6px;text-shadow:3px 3px 0 var(--acc)}
.motto{font-family:'Special Elite';font-size:15px}
.nav{display:flex;justify-content:center;gap:4px;padding:8px;background:var(--ink)}
.nav a{color:var(--paper);text-decoration:none;font-family:'Black Ops One';padding:4px 14px;letter-spacing:.08em}
.nav a.on{background:var(--acc)}
.dateline{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-family:'Special Elite';border-bottom:2px dashed var(--ink);padding:6px 0;font-size:14px}
.headline h2{font-family:'Rubik Dirt';font-size:52px;line-height:1.02;margin:18px 0 6px;text-transform:uppercase}
.deck{font-family:'Special Elite';font-size:18px;margin:0 0 12px;background:var(--ink);color:var(--paper);display:inline-block;padding:4px 10px;transform:rotate(-.5deg)}
figure{margin:0}figure img{width:100%;display:block}
figcaption{font-family:'Special Elite';font-size:13px;padding:4px 0}
.torn img{clip-path:polygon(0 3%,8% 0,20% 2%,35% 0,50% 3%,66% 0,80% 2%,100% 0,98% 50%,100% 97%,85% 100%,70% 97%,52% 100%,35% 97%,18% 100%,0 97%,2% 50%)}
.lead-art img{max-height:380px;object-fit:cover}
.layout{display:grid;grid-template-columns:1fr 320px;gap:28px;margin-top:16px}
.section{font-family:'Black Ops One';font-size:24px;background:var(--acc);color:#fff;display:inline-block;padding:4px 12px;transform:rotate(-1deg);margin:18px 0 10px}
.columns{columns:2 300px;column-gap:26px}
article{break-inside:avoid;margin-bottom:16px;border-left:4px solid var(--ink);padding-left:10px}
article h5,.ad h5{font-family:'Special Elite';font-size:19px;margin:0 0 4px;text-transform:uppercase}
article p{margin:0 0 4px;font-size:15px;line-height:1.45}
.src{font-size:12px;font-family:'Special Elite';background:#111;color:var(--paper);padding:1px 6px;margin-right:4px;text-decoration:none;display:inline-block}
.src:hover{background:var(--acc)}
.box{border:3px solid var(--ink);padding:12px;margin-bottom:18px;background:rgba(255,255,255,.35);box-shadow:5px 5px 0 var(--ink)}
.box h4{font-family:'Black Ops One';margin:0 0 6px;font-size:21px;border-bottom:3px solid var(--acc)}
.chart{transform:rotate(1deg)}.chart-label{font-family:'Special Elite';font-size:13px;margin-bottom:6px}
.chart ol{list-style:none;padding:0;margin:0 0 8px}.chart li{display:flex;gap:8px;padding:4px 0;border-bottom:1px dashed #555;font-size:14px}
.rk{font-family:'Black Ops One';width:26px;color:var(--acc);font-size:18px}.nm{flex:1}.mv{font-size:12px}
.cal{padding-left:16px;font-size:14px}.cal li{margin-bottom:5px}
.jjo:nth-of-type(odd){transform:rotate(-.8deg)}
.mid-art{margin:16px 0}.mid-art img{max-height:260px;object-fit:cover}
.parody-zone{margin-top:30px;border:4px dashed var(--acc);padding:14px}
.parody-banner{font-family:'Black Ops One';color:var(--acc);text-align:center;font-size:20px;margin-bottom:12px}
.stack{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ad{border:3px double var(--ink);padding:10px;background:#fff;transform:rotate(-1deg)}.ad:nth-child(2){transform:rotate(1.5deg)}
.ad img{height:150px;object-fit:cover}
.ad-label{font-family:'Special Elite';font-size:11px;letter-spacing:.2em;background:var(--acc);color:#fff;display:inline-block;padding:0 6px;margin-bottom:6px}
.ednav{display:flex;justify-content:space-between;margin-top:24px;font-family:'Special Elite'}.muted{opacity:.5}
.editions{list-style:none;padding:0}.editions a{display:block;padding:10px;border-bottom:2px dashed #111;text-decoration:none}
.ed-date{display:block;font-family:'Special Elite'}.ed-head{font-family:'Black Ops One';font-size:22px}
.foot{margin-top:30px;text-align:center;font-family:'Special Elite';border-top:6px solid var(--ink);padding-top:10px;font-size:13px}
@media(max-width:800px){.page{padding:26px 14px 36px;margin:8px;clip-path:polygon(0% 0px,6% 10px,13% 0px,21% 10px,30% 0px,38% 10px,47% 0px,55% 10px,63% 0px,71% 10px,80% 0px,88% 10px,95% 0px,100% 10px,100% calc(100% - 0px),95% calc(100% - 10px),88% calc(100% - 0px),80% calc(100% - 10px),71% calc(100% - 0px),63% calc(100% - 10px),55% calc(100% - 0px),47% calc(100% - 10px),38% calc(100% - 0px),30% calc(100% - 10px),21% calc(100% - 0px),13% calc(100% - 10px),6% calc(100% - 0px),0% calc(100% - 10px))}.title{font-size:54px}.subtitle{font-size:30px}
.layout{grid-template-columns:1fr}.headline h2{font-size:34px}.stack{grid-template-columns:1fr}.dateline{font-size:12px}}
/* xerox treatment for wjjo.com imagery */
.xr{position:relative;display:block;overflow:hidden}
.xr img{filter:saturate(1.05) contrast(1.05)}
.xr:after{content:"";position:absolute;inset:0;pointer-events:none;
 background:url(/img/paper.jpg) 0 0/300px,radial-gradient(circle,rgba(0,0,0,.08) 1px,transparent 1.4px) 0 0/4px 4px,
 repeating-linear-gradient(90deg,transparent 0 37px,rgba(0,0,0,.08) 37px 38px);mix-blend-mode:multiply}
.box.art.xr:after{inset:12px 12px 60px}
.story-art{margin:6px 0;transform:rotate(-1deg);border:2px solid #111}
.cal{list-style:none;padding:0}.cal li{margin-bottom:10px}
.cal-art{margin-bottom:3px;border:2px solid #111;transform:rotate(-.6deg)}
.cal li:nth-child(even) .cal-art{transform:rotate(.8deg)}
.cal-art img{width:100%;height:auto;display:block}
.logo-wrap{display:inline-block;width:220px;margin-bottom:4px;transform:rotate(-2deg)}
.logo-wrap img{width:100%;display:block}
@media(max-width:800px){.logo-wrap{width:160px}}
/* official logo, taped on, full color */
.mast-row{display:flex;align-items:center;justify-content:center;gap:34px}
.logo-tape{position:relative;width:230px;flex:none;transform:rotate(-4deg);box-shadow:6px 7px 0 rgba(0,0,0,.45);background:#000;padding:6px}
.logo-tape img{display:block;width:100%}
.tp{position:absolute;width:90px;height:26px;background:rgba(236,226,180,.82);box-shadow:0 1px 2px rgba(0,0,0,.3);z-index:2}
.tp.a{top:-10px;left:-22px;transform:rotate(-35deg)}.tp.b{bottom:-8px;right:-24px;transform:rotate(-30deg)}
@media(max-width:800px){.mast-row{flex-direction:column;gap:14px}.logo-tape{width:170px}}
a.wj{text-decoration:none;border-bottom:2px solid var(--acc)}a.wj:hover{background:var(--acc);color:#fff}
.box h4 a{text-decoration:none}a.cal-art{display:block}

/* === JJO masthead === */
.masthead{display:flex;align-items:center;justify-content:center;gap:28px;background:#000;color:#fff;border:0;padding:22px 26px;margin:-28px -34px 0;position:relative;overflow:hidden;text-align:left}
.mast-grit{position:absolute;inset:0;background:url(/img/paper.jpg) 0 0/260px;mix-blend-mode:overlay;opacity:.35;pointer-events:none}
.masthead:after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:linear-gradient(90deg,#e0201b,#ff4a3d,#e0201b)}
.mast-logo{flex:none;width:190px;position:relative}.mast-logo img{width:100%;display:block}
.mast-word{position:relative}
.mast-kicker{font-family:'Archivo Black';font-style:italic;letter-spacing:.18em;font-size:13px;color:#e0201b;text-transform:uppercase}
.mast-title{margin:2px 0;font-family:'Archivo Black';font-size:96px;line-height:.95;transform:skewX(-12deg);white-space:nowrap}
.mast-title a{text-decoration:none;display:inline-flex;align-items:center}
.chrome{background:linear-gradient(180deg,#fff 0%,#e8e8e8 38%,#8d8d8d 50%,#f4f4f4 62%,#bcbcbc 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:2px #fff;filter:drop-shadow(3px 3px 0 #e0201b) drop-shadow(0 0 1px #000)}
.red{color:#e0201b;-webkit-text-stroke:2px #fff;text-shadow:4px 4px 0 #300}
.bolt{width:42px;height:84px;margin:0 6px;fill:#e0201b;stroke:#fff;stroke-width:2;transform:skewX(8deg)}
.mast-tag{font-family:'Special Elite';color:#ddd;font-size:15px}
.title,.subtitle,.motto,.kicker,.mast-row,.tape{display:none}
@media(max-width:800px){.masthead{flex-direction:column;text-align:center;margin:-26px -14px 0;padding:18px 10px;gap:10px}.mast-logo{width:140px}
.mast-title{font-size:46px}.bolt{width:22px;height:44px}.mast-kicker{font-size:11px}.mast-tag{font-size:13px}}
/* hero + cards */
.hero{margin-top:10px}.hero img{max-height:none}
.hero figcaption{font-family:'Courier Prime';font-size:16px;background:#000;color:#fff;padding:10px 12px;transform:rotate(-.4deg)}
.headline h2 a.wj{border:0}
.section small{font-family:'Special Elite';font-size:13px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-bottom:8px}
.cards.two{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card{border:2px solid #111;padding:8px;background:#fff;box-shadow:4px 4px 0 #111;margin:0}
.card:nth-child(odd){transform:rotate(-.7deg)}.card:nth-child(even){transform:rotate(.6deg)}
.card-img{display:block;position:relative}.card-img img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.card.wide .card-img img{aspect-ratio:16/10}
.card h5{font-size:16px;margin:6px 0 4px}.card p{font-size:13px}
.social ul{list-style:none;padding:0;margin:0 0 8px}.social li{padding:8px 0;border-bottom:1px dashed #555;font-size:14px}
.net{background:#e0201b;color:#fff;font-family:'Special Elite';font-size:11px;padding:1px 6px}
.parody-zone{border:6px double #e0201b;background:#f6f1e2;padding:20px}
.parody-banner{font-size:34px}.parody-banner small{display:block;font-family:'Special Elite';color:#111;font-size:15px}
.stack{grid-template-columns:repeat(3,1fr)}
@media(max-width:800px){.parody-banner{font-size:24px}}
.cards.five{grid-template-columns:repeat(5,1fr)}
.page{padding-bottom:60px}
@media(max-width:800px){
 .mast-title{font-size:38px;white-space:normal}.bolt{width:18px;height:36px;margin:0 2px}
 .stack{grid-template-columns:1fr}.cards.five{grid-template-columns:repeat(2,1fr)}.cards.two{grid-template-columns:1fr}
 .page{overflow:hidden}}
/* ===== parody page v2 ===== */
.parody-zone{background:#fff7d1;border:6px double #e0201b}
.pz-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;align-items:start}
.pad{position:relative;border:4px solid #111;padding:14px;font-family:Arial,Helvetica,sans-serif;box-shadow:6px 6px 0 #111;overflow:visible}
.pad h3{margin:4px 0 8px;line-height:.95;text-transform:uppercase}
.pad img{width:100%;display:block;margin:6px 0}
.pad p{margin:6px 0;font-size:14px;line-height:1.3}
.pad-tag{position:absolute;top:-12px;left:10px;background:#111;color:#ffd23f;font:700 10px/1 Arial;letter-spacing:.15em;padding:4px 6px;text-transform:uppercase}
.fine{font-size:10.5px!important;line-height:1.25!important;opacity:.85;border-top:1px solid currentColor;padding-top:4px}
.quote{font-family:Georgia,serif;font-style:italic;font-size:15px!important}.quote i{font-style:normal;font-size:12px}
.price{font-family:'Archivo Black';font-size:26px;color:#e0201b;transform:rotate(-2deg)}.price small{font:12px Arial;color:#111}
.sub{font-weight:700;font-size:12px!important;letter-spacing:.05em}
.burst{position:absolute;top:-22px;right:-16px;width:96px;height:96px;background:#ffd23f;color:#e0201b;font:900 24px/96px 'Archivo Black';text-align:center;transform:rotate(14deg);z-index:2;
 clip-path:polygon(50% 0,61% 18%,82% 10%,80% 32%,100% 38%,85% 54%,98% 72%,76% 74%,72% 96%,55% 82%,38% 100%,32% 78%,10% 86%,16% 64%,0 50%,16% 36%,6% 16%,28% 18%,38% 0)}
.burst.small{font-size:11px;line-height:1.05;display:flex;align-items:center;justify-content:center;padding:14px;width:110px;height:110px}
/* individual styles */
.pad-burst{grid-column:span 2;background:#e0201b;color:#fff}.pad-burst h3{font:900 30px/0.95 'Archivo Black';color:#ffd23f;text-shadow:3px 3px 0 #111}
.pad-burst .checks{padding-left:0;list-style:none;font-weight:700}.pad-burst .checks li:before{content:"\2714  ";color:#ffd23f}
.pad-burst .price{color:#ffd23f}.pad-burst .price small{color:#fff}
.pad-club{grid-column:span 4;background:#fff;display:grid;grid-template-columns:1fr 1.2fr;gap:0 16px}.pad-club h3,.pad-club .sub,.pad-club .fine{grid-column:1/-1}
.pad-club h3{font:900 64px/1 'Archivo Black';color:#e0201b;text-align:center;letter-spacing:-.02em}.pad-club .sub{text-align:center;background:#111;color:#ffd23f;padding:4px}
.coupon{border:3px dashed #111;padding:10px;background:#fffbe6;font:13px/1.4 'Courier Prime',monospace}.coupon.small{font-size:12px}
.picks{list-style:none;padding:0;margin:6px 0}
.pad-ba{grid-column:span 3;background:#fff}.pad-ba h3{font:900 26px 'Archivo Black';text-align:center}
.ba-labels{display:grid;grid-template-columns:1fr 1fr;text-align:center;font:900 14px 'Archivo Black'}.ba-labels span:last-child{color:#e0201b}
.pad-ba .price{text-align:center}
.pad-info{grid-column:span 3;background:#0d2a6b;color:#fff}.pad-info h3{font:900 26px 'Archivo Black';color:#fff;text-shadow:2px 2px 0 #e0201b}
.pad-info .lede{font-style:italic}
.wait{font:900 28px 'Archivo Black';color:#ffd23f;transform:rotate(-3deg);text-align:center;text-shadow:3px 3px 0 #e0201b;margin:8px 0}
.phone{font:900 34px 'Archivo Black';text-align:center;background:#ffd23f;color:#111;padding:4px;letter-spacing:.04em}
.operators{text-align:center;font-weight:700;font-size:12px!important;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.4}}
.pad-class{grid-column:span 2;background:#f3efe2;font-family:'Courier Prime',monospace;columns:1}.pad-class h3{font:900 22px 'Special Elite';border-bottom:3px double #111;text-align:center}
.pad-class p{font-family:'Courier Prime';font-size:13px;border-bottom:1px dotted #111;padding-bottom:5px}
.pad-comic{grid-column:span 2;background:#6fd3e8;border-style:double;border-width:6px}.pad-comic h3{font:900 30px 'Archivo Black';color:#e0201b;-webkit-text-stroke:1px #111;text-align:center}
.pad-comic .sub{text-align:center;color:#111}
.pad-bib{grid-column:span 2;background:#ffd23f}.pad-bib h3{font:900 40px 'Archivo Black';color:#111;text-align:center}
.pad-bib .sub{text-align:center}
@media(max-width:1100px){.pz-grid{grid-template-columns:repeat(2,1fr)}.pad{grid-column:span 1!important}.pad-club{grid-column:1/-1!important}}
@media(max-width:800px){.pz-grid{grid-template-columns:1fr}.pad-club{display:block}.pad-club h3{font-size:44px}.burst{right:-6px}}
.pad-burst h3{padding-right:62px}.pad-bib h3{padding-right:70px;font-size:36px;text-align:left}
@media(max-width:800px){.phone{font-size:24px}.pad-bib h3{font-size:30px}.pz-grid{gap:24px}.pad{margin-right:6px}}
