/* YUSEI FUJII ZINE #00 — no JavaScript, just paper, tape and bad decisions.
   Desktop: every piece is pinned to its sheet with --x/--y/--w (percent) and
   --r (rotation); sizes scale with the .zine container (cqw).
   Below 820px the content pieces (.c) fall into a flow and the decoration
   (.x) stays scattered. */

:root{
  --paper:#f1ede2;--ink:#161513;--red:#d7261e;--blue:#1f3fbf;--hl:rgba(255,230,0,.82);--pink:#ff2e88;--desk:#141311;
  --marker:"Permanent Marker",cursive;--pen:"Caveat",cursive;--type:"Special Elite","Courier New",monospace;
  --loud:Anton,Impact,sans-serif;--jp:Yomogi,sans-serif;--jploud:"Dela Gothic One",sans-serif;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.5 -.86'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --torn:polygon(0 5%,6% 0,14% 4%,22% 0,31% 3%,40% 0,52% 4%,61% 0,73% 3%,84% 0,93% 4%,100% 1%,99% 32%,100% 64%,98% 100%,88% 95%,77% 100%,66% 96%,55% 100%,43% 95%,31% 100%,20% 96%,9% 100%,0 96%,1% 62%,0 30%);
  --tapeclip:polygon(3% 0,97% 6%,100% 24%,97% 50%,100% 76%,97% 100%,2% 94%,0 70%,3% 46%,0 20%);
}
*{box-sizing:border-box}
html{background:var(--desk)}
body{margin:0;min-height:100vh;color:var(--ink);font-family:var(--type);overflow-x:hidden;
  background:radial-gradient(ellipse 70% 40% at 50% 0,#2c2925,transparent 70%) no-repeat,var(--desk)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:underline wavy var(--red) .08em;text-underline-offset:.2em}
a:hover{background:var(--hl);color:var(--ink)}
:focus-visible{outline:3px dashed var(--pink);outline-offset:4px}
::selection{background:var(--pink);color:#fff}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:99;background:var(--hl);padding:8px 12px}

.zine{max-width:1240px;margin:0 auto;padding:48px 16px 140px;container-type:inline-size}

/* ---------- sheets ---------- */
.sheet{position:relative;height:calc(var(--h)*1cqw);margin:0 0 -1.5cqw;background:var(--noise),var(--paper);
  box-shadow:0 1px 0 #d6d0c0,0 30px 70px rgba(0,0,0,.6);transform:rotate(var(--sr,0deg))}
/* photocopier edge band */
.sheet::before{content:"";position:absolute;top:0;bottom:0;left:0;width:max(10px,1.5%);z-index:6;pointer-events:none;
  background:linear-gradient(90deg,rgba(12,12,12,.94),rgba(12,12,12,.55) 55%,transparent)}
.sheet:nth-child(even)::before{left:auto;right:0;transform:scaleX(-1)}
/* toner streak */
.sheet::after{content:"";position:absolute;top:0;bottom:0;left:var(--streak,63%);width:2px;z-index:6;pointer-events:none;
  background:linear-gradient(transparent,rgba(0,0,0,.2) 18%,rgba(0,0,0,.04) 50%,rgba(0,0,0,.24) 82%,transparent)}

.sheet>*{position:absolute;left:var(--x,0);top:var(--y,0);width:var(--w,auto);margin:0;
  transform:rotate(var(--r,0deg));z-index:var(--z,1)}
.sheet>img.x{pointer-events:none}
.stain{--z:0;mix-blend-mode:multiply;opacity:.85}

/* ---------- inks & hands ---------- */
.marker{font-family:var(--marker);line-height:1.08}
.big{font-size:max(30px,4.2cqw)}
.pen{font-family:var(--pen);font-weight:700;font-size:max(24px,2.3cqw);line-height:1.05}
.red{color:var(--red)}
.blue{color:var(--blue)}
.sub{font-size:max(24px,2.6cqw)}
.pg{font-size:max(18px,1.6cqw);color:#5b574e;white-space:nowrap}
.jp{font-family:var(--jp);color:var(--red);font-size:max(44px,6.6cqw);line-height:1}
.jp.small{font-size:max(22px,2.3cqw);color:var(--blue)}
.vert{writing-mode:vertical-rl;font-family:var(--jploud);font-size:max(40px,5.2cqw);color:var(--red);letter-spacing:.12em;line-height:1}
.misreg{text-shadow:.045em .025em 0 rgba(0,150,255,.5),-.035em -.02em 0 rgba(255,0,120,.45)}
s{text-decoration-color:var(--red);text-decoration-thickness:.13em}
.hl{background:linear-gradient(103deg,transparent .15em,var(--hl) .3em,var(--hl) calc(100% - .3em),transparent calc(100% - .15em));
  padding:0 .25em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.pinkhl{--hl:rgba(255,105,170,.6)}
.circ{position:relative;display:inline-block;padding:0 .1em}
.circ::after{content:"";position:absolute;inset:-.4em -.55em -.3em;background:var(--red);
  -webkit-mask:url(img/d-circle.webp) center/100% 100% no-repeat;mask:url(img/d-circle.webp) center/100% 100% no-repeat}
.redact{display:inline-block;background:#111;width:9em;height:.9em;vertical-align:-.05em;transform:rotate(-1deg)}

/* ---------- paper bits ---------- */
.strip{isolation:isolate;padding:1.1em 1.5em 1.2em;font:max(14px,1.24cqw)/1.55 var(--type);filter:drop-shadow(0 2px 2px rgba(0,0,0,.28))}
.strip::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--noise),#fdfbf3;clip-path:var(--torn)}
.strip b{font-weight:400;font-family:var(--loud);font-size:1.5em;letter-spacing:.02em;display:block;margin-bottom:.2em}
.strip .pen{display:block;margin-top:.35em}
.strip.mail{padding:.6em 1.2em .7em;font:max(24px,3.4cqw)/1.1 var(--marker);overflow-wrap:anywhere}
.strip.mail a{text-decoration:none;background:linear-gradient(transparent 62%,var(--hl) 62%,var(--hl) 92%,transparent 92%)}

.label{background:#151515;color:#f3efe4;font:max(13px,1.15cqw)/1 var(--type);letter-spacing:.2em;text-transform:uppercase;
  padding:.75em 1.1em .65em;border-radius:3px;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -2px 0 rgba(0,0,0,.6),0 3px 4px rgba(0,0,0,.35)}
.label a{text-decoration:none}
.label a:hover{background:none;color:var(--hl)}

.lined{--lh:max(31px,2.95cqw);padding:var(--lh) 1.1em calc(var(--lh)*.6) 3.3em;font-family:var(--pen);font-size:max(19px,1.85cqw);line-height:var(--lh);
  background:linear-gradient(90deg,transparent 2.6em,rgba(215,38,30,.55) 2.6em,rgba(215,38,30,.55) calc(2.6em + 2px),transparent calc(2.6em + 2px)),
    repeating-linear-gradient(180deg,transparent 0 calc(var(--lh) - 1px),#a7c1e5 calc(var(--lh) - 1px) var(--lh)),#fffdf6;
  box-shadow:0 4px 10px rgba(0,0,0,.22)}
.lined::after{content:"";position:absolute;left:.7em;top:8%;bottom:8%;width:max(14px,1.3cqw);
  background:radial-gradient(circle,#cfc8b6 42%,#b9b19c 47%,transparent 52%) 0 0/100% 33.33% repeat-y}
.lined .type{font-size:.72em;letter-spacing:.2em;margin:0}
.lined ol,.lined ul{margin:0;padding:0 0 0 1.1em}
.lined ul{list-style:none;padding:0}
.log b{font:400 .62em var(--type);color:#77705f;margin-right:.45em;letter-spacing:.04em}
.log .pen{font-size:.82em}

.note{background:#ffe95c;padding:1.4em 1.5em 1.2em;font-family:var(--pen);font-weight:700;font-size:max(19px,1.8cqw);line-height:1.15;
  box-shadow:0 14px 16px -10px rgba(0,0,0,.5),inset 0 -12px 18px -12px rgba(150,120,0,.25)}
.note p{margin:0}
.note .huge{position:relative;display:inline-block;font:max(58px,6.6cqw)/1 var(--marker);color:var(--red);margin:.1em 0 .25em .2em}
.note .huge small{font-size:.36em;color:#222}
.note .tiny{font:max(12px,1cqw) var(--type);font-weight:400;letter-spacing:.12em;margin-top:.5em;color:#5e5320}

.pic{transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.pic img{width:100%}
.pic a{display:block;text-decoration:none}
.pic a:hover{background:none}
.pic:hover{transform:rotate(calc(var(--r,0deg)*-.4)) scale(1.03);z-index:8}
.on{position:absolute;pointer-events:none;max-width:none}

.taped::before,.taped2::before,.taped2::after,.note::before{content:"";position:absolute;z-index:3;width:max(72px,8.5cqw);height:max(22px,2.5cqw);
  background:rgba(238,228,192,.8);clip-path:var(--tapeclip)}
.taped::before,.note::before{left:50%;top:max(-12px,-1.2cqw);transform:translateX(-50%) rotate(-4deg)}
.taped2::before{left:-4%;top:-1.5%;transform:rotate(-34deg)}
.taped2::after{right:-4%;top:-1.5%;transform:rotate(31deg)}

.staple{width:max(40px,4cqw);height:max(6px,.55cqw);border-radius:2px;background:linear-gradient(#d0d0d0,#7d7d7d 55%,#a5a5a5);box-shadow:0 1px 1px rgba(0,0,0,.45)}
.tapebig{width:max(140px,16cqw);height:max(30px,3.2cqw);background:rgba(236,226,188,.78);clip-path:var(--tapeclip);--z:7}

/* ---------- ransom-note headings ---------- */
.rn{display:flex;flex-wrap:wrap;align-items:center;gap:.05em;font-size:max(34px,5.6cqw);line-height:1;font-weight:400}
.rn i{font-style:normal;display:inline-block;padding:.07em .12em .03em;box-shadow:1px 2px 2px rgba(0,0,0,.28);
  transform:translateY(var(--dy,0)) rotate(var(--r,0deg)) scale(var(--s,1))}
.rn .sp{width:.32em;padding:0;box-shadow:none}
.r1{background:#151515;color:#f3efe4;font-family:var(--loud)}
.r2{background:var(--pink);color:#151515;font-family:var(--jploud)}
.r3{background:#f2df7e;color:#151515;font-family:var(--type)}
.r4{background:#fff;color:var(--red);font-family:Georgia,"Times New Roman",serif;font-weight:700}
.r5{background:#2a55c4;color:#fff;font-family:var(--loud)}
.r6{background:#e6dfcb;color:#151515;font-family:Georgia,serif;font-style:italic!important;font-weight:700}
.r7{background:#fff;color:#151515;font-family:var(--marker)}
.r8{background:#151515;color:#ffe600;font-family:"Courier New",monospace;font-weight:700}

.rn .w{display:inline-flex;align-items:center;gap:.05em;white-space:nowrap}
.cn{font:max(11px,.9cqw) var(--jp);color:var(--blue);margin-left:.15em}
.edit{font-size:max(15px,1.45cqw);line-height:2.3}
.edit s{text-decoration-thickness:.14em}
.edit ins{position:relative;text-decoration:none;font:700 1.35em/1 var(--pen);color:var(--red);display:inline-block;transform:translateY(-.85em) rotate(-4deg);margin-left:-.2em}
.edit ins::before{content:"^";position:absolute;left:-.4em;bottom:-.75em;font-size:.8em}
.edit .pen{display:block;font-size:max(20px,1.9cqw);margin-top:-.2em}
.lid{height:calc(var(--w)*.62);background:linear-gradient(212deg,#0c0c0c 22%,rgba(12,12,12,.85) 32%,rgba(12,12,12,.35) 44%,transparent 58%);--z:6;pointer-events:none}
.dogear{width:6cqw;height:6cqw;--z:6;background:linear-gradient(315deg,var(--desk) 49.5%,#cfc8b6 50%,#f7f3e8 72%);box-shadow:-3px -3px 6px rgba(0,0,0,.12)}
.upside{white-space:nowrap;transform:rotate(180deg)!important;font-size:max(18px,1.6cqw);color:#77705f}

/* ---------- colophon ---------- */
.colo{font-size:max(14px,1.3cqw);line-height:1.6}
.colo p{margin:0 0 .7em}
.colo .links a{white-space:nowrap}

/* ---------- small screens: content flows, decoration stays loose ---------- */
@media (max-width:820px){
  .zine{padding:28px 10px 90px;overflow-x:clip}
  .sheet>.x{z-index:0}
  .sheet>.stain{opacity:.6}
  .sheet{height:auto;padding:52px 18px 60px;margin:0 0 18px}
  .sheet>.c{position:relative;left:auto;top:auto;width:var(--mw,94%);margin:28px auto 0;
    transform:translateX(var(--mx,0)) rotate(calc(var(--r,0deg)*.7))}
  .sheet>.label,.sheet>.pen,.sheet>.rn{width:fit-content;max-width:100%;margin-left:4%}
  .sheet>img.x{width:calc(var(--w,10%)*1.7)}
  .dk{display:none!important}
  .label{white-space:normal}
  .strip.mail{font-size:22px;overflow-wrap:normal}
}
@media (prefers-reduced-motion:reduce){.pic{transition:none}}
@media print{
  body,html{background:#fff}
  .zine{padding:0}
  .sheet{box-shadow:none;transform:none;break-after:page;margin:0}
}