/* SEO RODEO: shared styles for the landing and every comic issue */
  :root{--ink:#1a1410;--paper:#f1e4c4}
  html,body{margin:0;background:#0b0a0d;color:var(--ink);cursor:crosshair}
  body{overflow-x:hidden;font-family:"Comic Neue","Comic Sans MS",sans-serif}

  /* petrol slick: a pre-rendered picture on its own layer, nothing is recomputed per frame */
  .oil{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:0;background:#0b0a0d url(oil.jpg) center/cover no-repeat;transform:translateZ(0)}

  .wrap{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:5vh 4vw 8vh}

  /* ---------- cover ---------- */
  .cover{position:relative;text-align:center;margin-bottom:4vh}
  .kicker{display:inline-block;font:400 clamp(16px,2vw,24px) "Bangers",Impact,sans-serif;letter-spacing:.12em;
    background:var(--paper) url(paper.jpg);padding:.25em .9em;border:4px solid var(--ink);
    box-shadow:6px 6px 0 var(--ink);transform:rotate(-2deg)}
  .title{position:relative;margin:.15em 0 0;font:400 clamp(84px,17vw,230px)/.82 "Bangers",Impact,sans-serif;
    letter-spacing:.03em;transform:rotate(-3deg) skewX(-5deg)}
  .title > span{display:block;position:relative}
  .title .ink{position:relative;color:#fff200;-webkit-text-stroke:.04em var(--ink);paint-order:stroke fill;
    text-shadow:.055em .055em 0 var(--ink)}
  .title .rodeo .ink{color:#39ff14}
  .title .c,.title .m{position:absolute;inset:0;pointer-events:none}
  .title .c{color:#00e5ff;transform:translate(-.045em,.035em);opacity:.85;mix-blend-mode:screen}
  .title .m{color:#ff1fbf;transform:translate(.05em,-.03em);opacity:.85;mix-blend-mode:screen}
  .badge{position:absolute;right:2%;top:0;width:clamp(84px,10vw,120px);aspect-ratio:1;border-radius:50%;
    background:#ff1fbf;border:4px solid var(--ink);box-shadow:5px 5px 0 var(--ink);display:grid;place-content:center;
    font:400 clamp(18px,2.2vw,26px)/1 "Bangers",Impact,sans-serif;color:#fff200;-webkit-text-stroke:1px var(--ink);
    transform:rotate(12deg);text-align:center}
  .badge small{display:block;font-size:.6em;color:#fff;margin-top:.2em}

  /* ---------- intro caption ---------- */
  .intro{position:relative;max-width:820px;margin:0 auto 5vh;background:#fff200;border:4px solid var(--ink);
    padding:22px 28px;font-size:clamp(16px,1.6vw,20px);line-height:1.5;box-shadow:9px 9px 0 #ff1fbf,15px 15px 0 var(--ink);
    transform:rotate(.8deg)}
  .intro::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
    background:radial-gradient(circle,#ff9d00 1.3px,transparent 1.6px) 0 0/6px 6px}
  .intro p{position:relative;margin:.45em 0}
  .intro .lead{font:400 1.5em/1.05 "Bangers",Impact,sans-serif;letter-spacing:.04em}
  .intro b{background:#00e5ff;padding:0 .2em}

  /* ---------- comic page ---------- */
  .page{background:var(--paper) url(paper.jpg);border:5px solid var(--ink);padding:14px;
    box-shadow:12px 12px 0 var(--ink);display:grid;grid-template-columns:1fr 1fr;gap:14px;transform:rotate(-.6deg)}
  .panel{border:4px solid var(--ink);background:url(paper.jpg);position:relative;overflow:hidden}
  .panel svg{display:block;width:100%;height:auto;mix-blend-mode:multiply}
  @media (max-width:720px){.page{grid-template-columns:1fr}.badge{display:none}}
  .foot{text-align:center;margin-top:5vh;font:400 22px "Bangers",Impact,sans-serif;letter-spacing:.1em;color:#fff200;
    -webkit-text-stroke:1px var(--ink);text-shadow:3px 3px 0 var(--ink)}

  /* svg text */
  .bt{font:700 14px "Comic Neue","Comic Sans MS",sans-serif;fill:var(--ink);text-transform:uppercase}
  .cap{font:700 13px "Comic Neue","Comic Sans MS",sans-serif;fill:var(--ink);text-transform:uppercase}
  .sfx{font:400 42px "Bangers",Impact,sans-serif;stroke:var(--ink);stroke-width:5px;paint-order:stroke fill;
    stroke-linejoin:round;letter-spacing:.03em}
  .brand{font:400 20px "Bangers",Impact,sans-serif;fill:var(--ink);letter-spacing:.05em}

  /* fly swarm: transform-only, composited */
  .fly{position:fixed;left:0;top:0;z-index:5;pointer-events:none;will-change:transform;white-space:nowrap;
    font:400 18px "Bangers",Impact,sans-serif;letter-spacing:.04em;-webkit-text-stroke:1px var(--ink);
    text-shadow:2px 2px 0 var(--ink)}
  .tag{font:700 13px "Comic Neue","Comic Sans MS",sans-serif;fill:var(--ink);text-transform:uppercase;letter-spacing:.02em}

  /* ---------- issue header, myth plaque, issue navigation ---------- */
  .issue{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 18px}
  .issue .no{font:400 clamp(22px,2.6vw,30px) "Bangers",Impact,sans-serif;letter-spacing:.06em;color:#fff200;
    background:#ff1fbf;border:4px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:.1em .6em;transform:rotate(-2deg)}
  .issue h1,.issue h2{margin:0;font:400 clamp(26px,3.6vw,44px)/1 "Bangers",Impact,sans-serif;letter-spacing:.04em;color:#39ff14;
    -webkit-text-stroke:1.5px var(--ink);text-shadow:3px 3px 0 var(--ink)}
  .busted{position:relative;max-width:820px;margin:7vh auto 0;background:var(--paper) url(paper.jpg);border:4px solid var(--ink);
    padding:30px 28px 20px;font-size:clamp(16px,1.6vw,20px);line-height:1.5;box-shadow:9px 9px 0 #00e5ff,15px 15px 0 var(--ink);
    transform:rotate(-.6deg)}
  .busted .stamp{position:absolute;left:50%;top:0;transform:translate(-50%,-60%) rotate(-4deg);white-space:nowrap;
    font:400 clamp(28px,4vw,46px)/1 "Bangers",Impact,sans-serif;letter-spacing:.06em;color:#ff2a2a;background:#fff200;
    border:4px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:.12em .55em}
  .busted p{margin:.45em 0}
  .busted b{background:#39ff14;padding:0 .2em}
  .issues{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;margin-top:6vh}
  .issues a{font:400 clamp(18px,2vw,24px) "Bangers",Impact,sans-serif;letter-spacing:.06em;color:var(--ink);text-decoration:none;
    background:#00e5ff;border:4px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:.3em .8em;cursor:pointer}
  .issues a:hover{background:#fff200;transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
  .issues a.next{margin-left:auto}