/* ═══════════════════════════════════════════════════════════════
   PAGE 0 — the cover.

   The stacking order is the whole trick, and it is the one every
   magazine uses: logotype at the back, subject in front of it so his
   head crops the letters, headline in front of him. Nothing is in a
   box; the type sits directly on the picture.

   The cover keeps its yellow in both themes on purpose. It is a
   printed object. Printed objects do not have a dark mode.
   ═══════════════════════════════════════════════════════════════ */
.cover{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100vh;min-height:100svh;
  padding:14px clamp(14px,3.4vw,34px) 0;
  background:var(--yellow);color:#000;
  border-bottom:6px solid #000;
}

.cover__top{position:relative;z-index:5;display:flex;align-items:center;gap:12px;
  font:700 11.5px/1 var(--f-mono);letter-spacing:.14em}
.cover__issue{flex:1}
.cover__tools{display:flex;gap:8px}
.cover .lang,.cover .iconbtn{background:#FFFDF2;border-color:#000;box-shadow:3px 3px 0 #000;color:#000}
.cover .lang__opt{color:#57534a} .cover .lang__opt.is-on{background:#000;color:var(--yellow)}

/* logotype — behind the subject */
.cover__logo{position:absolute;z-index:1;top:clamp(58px,12.5vh,146px);left:0;right:0;
  text-align:center;white-space:nowrap;
  font:400 clamp(21px,7.2vw,116px)/.9 var(--f-mast);letter-spacing:-.035em;
  text-shadow:4px 0 var(--cyan),-4px 0 var(--pink)}

/* the subject — in front of the logotype, cut out by multiply */
.cover__photo{position:absolute;z-index:2;left:50%;bottom:0;
  width:auto;height:min(86vh,880px);max-width:none;
  transform:translateX(-44%);
  mix-blend-mode:multiply;filter:contrast(1.05) brightness(1.04)}
.cover__dots{position:absolute;z-index:3;inset:0;pointer-events:none;mix-blend-mode:multiply;
  opacity:.13;background-image:radial-gradient(rgba(0,0,0,.55) .75px,transparent .9px);
  background-size:3.6px 3.6px}

/* headline — in front of the subject */
.cover__type{position:absolute;z-index:4;left:clamp(14px,3.4vw,40px);bottom:clamp(96px,15vh,150px);
  max-width:min(620px,58vw)}
.cover__head{font:400 italic clamp(38px,7.6vw,104px)/.9 var(--f-head);
  color:var(--pink);-webkit-text-stroke:2.5px #000;paint-order:stroke fill;
  text-wrap:balance;margin-bottom:12px}
.cover__sub{max-width:34ch;margin:0 0 14px;padding:9px 12px;
  background:#000;color:var(--yellow);
  font:400 clamp(13px,1.5vw,16px)/1.45 var(--f-body)}
.cover__who{display:grid;gap:2px;margin:0;font-family:var(--f-mono)}
.cover__who b{font-size:12px;letter-spacing:.13em}
.cover__who span{font-size:11px;letter-spacing:.1em;opacity:.72}

/* cover lines — scattered, angled, the way a 1980s cover crams them in */
.cline{position:absolute;z-index:5;padding:7px 10px;color:#000;
  border:2.5px solid #000;box-shadow:4px 4px 0 #000;
  font:700 clamp(9.5px,1.15vw,12.5px)/1.15 var(--f-mono);letter-spacing:.08em;
  max-width:44vw}
.cline--1{top:clamp(200px,31vh,330px);left:clamp(10px,2.2vw,26px);background:var(--cyan);
  transform:rotate(-3.5deg)}
.cline--2{top:clamp(150px,24vh,250px);right:clamp(10px,2.2vw,26px);background:#FFFDF2;
  transform:rotate(3deg)}
.cline--3{top:clamp(276px,42vh,450px);right:clamp(8px,1.8vw,20px);background:var(--pink);
  transform:rotate(-2deg)}
.cline--4{bottom:clamp(150px,23vh,230px);right:clamp(10px,2.2vw,26px);background:var(--lime);
  transform:rotate(4deg)}
.cline--1,.cline--2,.cline--3,.cline--4{animation:cwob 6s ease-in-out infinite}
.cline--2{animation-delay:-1.5s} .cline--3{animation-delay:-3s} .cline--4{animation-delay:-4.5s}
@keyframes cwob{0%,100%{rotate:0deg}50%{rotate:-2.2deg}}

.cover__cat{position:absolute;z-index:5;right:clamp(14px,4vw,54px);bottom:78px;
  width:clamp(64px,9vw,104px);height:auto;aspect-ratio:150/156}

/* foot — barcode, price, and the way in */
.cover__foot{position:absolute;z-index:5;left:0;right:0;bottom:0;
  display:flex;align-items:center;gap:14px;
  padding:10px clamp(14px,3.4vw,34px);border-top:3px solid #000;background:#FFFDF2}
.barcode{width:86px;height:30px;flex:none;
  background:repeating-linear-gradient(90deg,#000 0 2px,transparent 2px 4px,
    #000 4px 5px,transparent 5px 8px,#000 8px 11px,transparent 11px 13px)}
.cover__price{font:700 13px/1 var(--f-mono);letter-spacing:.1em}
.cover__scroll{margin-left:auto;display:inline-flex;align-items:center;gap:9px;
  padding:10px 15px;text-decoration:none;color:var(--yellow);background:#000;
  font:700 12px/1 var(--f-mono);letter-spacing:.16em}
.cover__scroll .ic{animation:nudge 1.5s ease-in-out infinite;transform:rotate(90deg)}
@keyframes nudge{0%,100%{translate:0 0}50%{translate:0 3px}}
.cover__scroll:hover{background:var(--pink);color:#000}

/* interior running head, now that the cover carries the nameplate */
.mast--run .mast__sub{gap:14px;padding:6px 0}
.mast--run .mast__name{font:400 clamp(17px,2.6vw,26px)/1 var(--f-mast);letter-spacing:-.01em;
  text-shadow:2px 0 var(--cyan),-2px 0 var(--pink)}

@media (max-width:760px){
  /* On a phone the cover elements were fighting for the same space: a hole in
     the middle and cover lines sitting on top of the headline. Reorganised
     into explicit vertical bands — logo, teasers, subject, headline, foot. */
  .cover{padding-top:10px;min-height:100svh}
  .cover__logo{top:52px;font-size:7.6vw;text-shadow:2px 0 var(--cyan),-2px 0 var(--pink)}
  .cover__photo{height:min(70vh,610px);bottom:46px;transform:translateX(-46%)}

  .cline{max-width:70vw;box-shadow:3px 3px 0 #000;font-size:10px;padding:6px 9px}
  .cline--1{top:auto;bottom:auto;left:10px;right:auto;top:170px}
  .cline--2{top:114px;right:10px;left:auto}
  .cline--3{top:222px;right:10px;left:auto;bottom:auto}
  .cline--4{display:none}

  .cover__type{left:10px;right:10px;bottom:56px;max-width:none}
  .cover__head{-webkit-text-stroke:2px #000;font-size:clamp(30px,10vw,46px);margin-bottom:8px}
  .cover__sub{max-width:none;font-size:13px;padding:8px 10px;margin-bottom:8px}
  /* on mobile this sits over dark trousers — give it its own ground */
  .cover__who{background:#000;color:var(--yellow);padding:7px 10px}
  .cover__who b{font-size:10.5px} .cover__who span{font-size:9.5px;opacity:.8}

  .cover__cat{top:112px;left:10px;right:auto;bottom:auto;width:52px;z-index:4}
  .cover__foot{gap:9px;padding:8px 12px}
  .barcode{width:52px;height:22px}
  .cover__price{font-size:11px}
  .cover__scroll{padding:9px 11px;font-size:10px;letter-spacing:.08em}
  .mast--run .mast__sub{flex-wrap:wrap;gap:8px}
}