/* =========================================================
   Tavinpyrnefury — comic broadsheet
   ========================================================= */

/* ---------- tokens ---------- */
:root{
  /* ink & paper */
  --paper:#f8f0db;
  --paper-2:#efe0c2;
  --ink:#191926;
  --ink-soft:#4b4b5d;
  --red:#d72e2d;
  --red-deep:#a51f1e;
  --yellow:#f7cd3a;
  --blue:#1e5099;

  /* type */
  --display:"Bangers","Impact",system-ui,sans-serif;
  --label:"Comic Neue","Comic Sans MS",system-ui,sans-serif;
  --body:"Literata",Georgia,"Times New Roman",serif;

  /* fluid type: 360px -> 1368px */
  --fs-masthead:clamp(50px, calc(20px + 8.33vw), 134px);
  --fs-narration:clamp(44px, calc(27.6px + 4.56vw), 90px);
  --fs-page-title:clamp(44px, calc(29.7px + 3.97vw), 84px);
  --fs-game-title:clamp(40px, calc(27.1px + 3.57vw), 76px);
  --fs-h2:clamp(40px, calc(30px + 2.78vw), 68px);
  --fs-h3:clamp(28px, calc(23.7px + 1.19vw), 40px);
  --fs-tile-title:clamp(30px, calc(27.9px + 0.6vw), 36px);
  --fs-marquee:clamp(26px, calc(22.4px + 0.99vw), 36px);
  --fs-body:clamp(15px, calc(13.9px + 0.3vw), 18px);
  --fs-lead:clamp(15px, calc(13.6px + 0.4vw), 19px);

  /* rhythm */
  --gutter:clamp(12px, calc(2px + 2.78vw), 40px);
  --section-y:clamp(44px, calc(34px + 2.78vw), 72px);
  --gap:16px;

  /* ben-day rasters */
  --benday:url("/assets/img/ben-day.png");
  --benday-blue:url("/assets/img/ben-day-blue.png");
  --benday-size:16px 28px;
  --benday-blue-size:12px 21px;

  --dur:170ms;
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--fs-body);
  line-height:1.6;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul{list-style:none;padding:0}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--yellow);padding:12px 18px;
  font-family:var(--label);font-weight:700;text-transform:uppercase;
}
.skip-link:focus{left:0}

/* ---------- type primitives ---------- */
.display{
  font-family:var(--display);
  font-weight:400;
  line-height:.98;
  letter-spacing:.015em;
}
.label{
  font-family:var(--label);
  font-weight:700;
  line-height:1.3;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.lede{font-size:var(--fs-lead);line-height:1.6}

/* ---------- layout ---------- */
.section{padding:var(--section-y) var(--gutter);position:relative;overflow:hidden}
.section--paper{background:var(--paper)}
.section--paper2{background:var(--paper-2)}
.section--blue{background:var(--blue)}
.section--red{background:var(--red)}
.stack{display:flex;flex-direction:column;gap:28px}

/* two-part section heading: big title + standfirst */
.heading{display:flex;gap:48px;align-items:flex-end}
.heading__title{font-size:var(--fs-h2);width:620px;max-width:100%;flex:none}
.heading__note{flex:1 1 0;min-width:0;font-size:var(--fs-body)}
@media (max-width:900px){
  .heading{flex-direction:column;align-items:flex-start;gap:10px}
  .heading__title{width:100%}
}

/* ben-day decorative raster */
.benday{
  position:absolute;pointer-events:none;
  background-image:var(--benday);
  background-size:var(--benday-size);
  background-position:top left;
}
.benday--blue{
  background-image:var(--benday-blue);
  background-size:var(--benday-blue-size);
}

/* ---------- header ---------- */
.masthead-bar{background:var(--paper);border-bottom:4px solid var(--ink);position:relative;z-index:30}
.masthead-bar__top{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:16px var(--gutter);
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand__box{
  background:var(--red);border:2px solid var(--ink);
  padding:2px 8px;font-family:var(--display);font-size:30px;
  line-height:.98;letter-spacing:.015em;color:var(--yellow);
}
.brand__name{
  font-family:var(--display);font-size:34px;line-height:.98;
  letter-spacing:.02em;color:var(--ink);
}
.nav{display:flex;align-items:center;gap:28px}
.nav a{
  font-family:var(--label);font-weight:700;font-size:16px;line-height:1.3;
  letter-spacing:.03em;text-transform:uppercase;text-decoration:none;color:var(--ink);
}
.nav a:hover{color:var(--red-deep)}
.nav a[aria-current="page"]{color:var(--red-deep);text-decoration:underline}

.burger{display:none;flex-direction:column;gap:4px;padding:9px 8px;border:2px solid var(--ink);background:var(--paper)}
.burger span{display:block;width:20px;height:3px;background:var(--ink)}

/* "in this issue" strip */
.issue-bar{
  background:var(--ink);padding:10px var(--gutter);
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;
}
.issue-bar__label{
  font-family:var(--label);font-weight:700;font-size:14px;line-height:1.3;
  letter-spacing:.03em;text-transform:uppercase;color:var(--yellow);
}
.issue-bar a{
  font-family:var(--label);font-weight:700;font-size:14px;line-height:1.3;
  letter-spacing:.03em;text-transform:uppercase;color:var(--paper);text-decoration:none;
}
.issue-bar a:hover{color:var(--yellow)}

@media (max-width:860px){
  .burger{display:flex}
  .nav{
    display:none;position:absolute;top:100%;right:0;left:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--paper);border-bottom:4px solid var(--ink);
  }
  .nav.is-open{display:flex}
  .nav a{display:block;width:100%;padding:14px var(--gutter);border-top:2px solid var(--ink)}
  .issue-bar{font-size:12px;gap:6px 12px;padding:8px var(--gutter)}
  .issue-bar__label,.issue-bar a{font-size:12px}
}

/* ---------- boxes ---------- */
.panel{background:var(--paper);border:3px solid var(--ink)}
.panel--alt{background:var(--paper-2)}
.panel--yellow{background:var(--yellow)}
.panel--ink{background:var(--ink);color:var(--paper);border:0}
.panel--red{background:var(--red-deep);border:3px solid var(--ink)}
.panel--blue{background:var(--blue);color:var(--paper)}
.panel__pad{padding:26px 28px}

.caption{
  display:inline-flex;background:var(--paper);border:2px solid var(--ink);
  padding:8px 14px;font-family:var(--label);font-weight:700;font-size:12px;
  line-height:1.25;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);
}
.caption--yellow{background:var(--yellow)}
.tag{
  display:inline-flex;background:var(--yellow);border:2px solid var(--ink);
  padding:4px 8px;font-family:var(--label);font-weight:700;font-size:13px;
  line-height:1.25;letter-spacing:.04em;text-transform:uppercase;
}
.meta{
  font-family:var(--label);font-weight:700;font-size:12px;line-height:1.3;
  letter-spacing:.03em;text-transform:uppercase;color:var(--ink-soft);
}
.arrow-link{
  font-family:var(--label);font-weight:700;font-size:15px;line-height:1.3;
  letter-spacing:.03em;text-transform:uppercase;color:var(--red-deep);
  text-decoration:underline;text-underline-offset:2px;
}
.arrow-link:hover{color:var(--ink);background:var(--yellow)}
.arrow-link--blue{color:var(--blue)}
.btn{
  display:inline-flex;background:var(--ink);color:var(--yellow);
  padding:12px 18px;font-family:var(--label);font-weight:700;font-size:17px;
  line-height:1.3;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.btn:hover{transform:translate(-3px,-3px);box-shadow:3px 3px 0 var(--red)}
.btn--ghost{background:var(--paper);color:var(--ink);border:2px solid var(--ink);padding:10px 16px;font-size:14px}
.btn--ghost:hover{box-shadow:3px 3px 0 var(--ink);transform:translate(-3px,-3px)}

/* key cap */
.key{
  display:inline-flex;background:var(--paper);border:2px solid var(--ink);
  border-radius:5px;padding:5px 10px;font-family:var(--label);font-weight:700;
  font-size:14px;line-height:1.2;
}
.keyrow{display:flex;gap:10px;align-items:center}
.keyrow__keys{display:flex;flex-wrap:wrap;gap:6px;width:clamp(132px,38%,200px);flex:none}
.keyrow__what{flex:1 1 0;min-width:0;font-size:15px;line-height:1.35}

/* fact table */
.facts{border-top:2px solid var(--ink)}
.facts__row{display:flex;gap:16px;padding:10px 0;border-bottom:2px solid var(--ink)}
.facts__key{
  width:140px;flex:none;font-family:var(--label);font-weight:700;font-size:13px;
  line-height:1.3;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-soft);
}
.facts__val{flex:1 1 0;min-width:0;font-size:16px;line-height:1.6}
@media (max-width:640px){
  .facts__row{flex-direction:column;gap:2px}
  .facts__key{width:auto}
}

/* bullet with a comic square */
.bullets{display:flex;flex-direction:column;gap:12px}
.bullet{display:flex;gap:12px;align-items:flex-start}
.bullet::before{
  content:"";flex:none;width:12px;height:12px;margin-top:6px;
  background:var(--red);border:1.5px solid var(--ink);
}

/* ---------- hero ---------- */
.hero{background:var(--paper);padding:24px var(--gutter) 0;position:relative}
.hero__frame{position:relative;border:5px solid var(--ink);background:var(--red);overflow:hidden}
.hero__raster{position:absolute;inset:0;background-image:var(--benday);background-size:var(--benday-size)}
.hero__rays{
  position:absolute;left:0;top:0;width:170.8%;
  aspect-ratio:1;pointer-events:none;
  transform:translate(-6.68%,-34.5%);
}
.hero__inner{position:relative;padding:10px 28px 40px;min-height:min(812px,59.4vw)}
.hero__masthead{
  font-family:var(--display);font-size:var(--fs-masthead);line-height:.98;
  letter-spacing:.02em;color:var(--yellow);
}
.hero__caption{margin-top:24px}
.hero__lines{display:flex;flex-direction:column;gap:14px;width:min(640px,52.4%);margin-top:14px}
.hero__narration{
  background:var(--yellow);border:3px solid var(--ink);
  padding:22px 28px 26px;
  font-family:var(--display);font-size:var(--fs-narration);
  line-height:.94;letter-spacing:.015em;
}
.hero__standfirst{
  background:var(--paper);border:2px solid var(--ink);
  padding:16px 22px;width:84.4%;min-width:220px;font-size:var(--fs-lead);
}
.hero__figure{
  position:absolute;left:46.8%;top:2px;width:66.5%;max-width:none;
  height:auto;pointer-events:none;
}
@media (max-width:1024px){
  .hero__inner{padding:12px 12px 16px;min-height:0}
  .hero__lines{width:100%;margin-top:24px}
  .hero__narration{padding:14px}
  .hero__standfirst{padding:12px 14px;width:100%}
  .hero__figure{position:static;left:auto;right:auto;width:100%;margin:16px auto 0}
  .hero__rays{width:200%;transform:translate(-25%,-30%)}
}

/* ---------- game tiles ---------- */
.tiers{display:flex;flex-direction:column;gap:var(--gap)}
.tier{display:grid;gap:var(--gap)}
.tier--a{grid-template-columns:527fr 419fr 310fr}
.tier--b{grid-template-columns:310fr 419fr 527fr}

.tile{
  display:flex;flex-direction:column;background:var(--paper);
  border:3px solid var(--ink);padding:3px;text-decoration:none;color:inherit;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.tile--split{flex-direction:row}
.tile__cover{position:relative;overflow:hidden;flex:none;border-bottom:3px solid var(--ink)}
.tile--split .tile__cover{width:242px;height:auto;border-bottom:0;border-right:3px solid var(--ink)}
.tile__cover img{width:100%;height:100%;object-fit:cover}
.tile:not(.tile--split) .tile__cover{height:230px}
.tile__raster{
  position:absolute;inset:0;background-image:var(--benday-blue);
  background-size:var(--benday-blue-size);opacity:0;
  transition:opacity var(--dur) var(--ease);
}
.tile__cta{
  position:absolute;left:14px;top:14px;opacity:0;
  transform:translateY(-6px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.tile__body{display:flex;flex-direction:column;gap:10px;padding:18px 20px 22px;flex:1 1 0;min-width:0}
.tile__meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.tile__title{font-size:var(--fs-tile-title);transition:color var(--dur) var(--ease)}
.tile__text{font-size:16px}
.tile:hover,.tile:focus-visible{
  transform:translate(-4px,-4px);
  box-shadow:4px 4px 0 var(--ink),0 0 0 2px var(--ink);
}
.tile:hover .tile__raster,.tile:focus-visible .tile__raster{opacity:.3}
.tile:hover .tile__cta,.tile:focus-visible .tile__cta{opacity:1;transform:translateY(0)}
.tile:hover .tile__title,.tile:focus-visible .tile__title{color:var(--red)}

@media (max-width:1100px){
  .tier--a,.tier--b{grid-template-columns:1fr 1fr}
  .tile--split{flex-direction:column}
  .tile--split .tile__cover{width:100%;height:230px;border-right:0;border-bottom:3px solid var(--ink)}
}
@media (max-width:700px){
  .tier--a,.tier--b{grid-template-columns:1fr}
}

/* ---------- three-up cards (about strip) ---------- */
.trio{display:grid;grid-template-columns:527fr 419fr 310fr;gap:var(--gap);align-items:stretch}
@media (max-width:1000px){.trio{grid-template-columns:1fr}}

/* ---------- marquee ---------- */
.marquee{
  background:var(--red);border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);
  overflow:hidden;padding:18px 0;
}
.marquee__track{
  display:flex;gap:28px;align-items:center;width:max-content;
  animation:marquee 46s linear infinite;
}
.marquee:hover .marquee__track,.marquee:focus-within .marquee__track{animation-play-state:paused}
.marquee__item{
  font-family:var(--display);font-size:var(--fs-marquee);line-height:.98;
  letter-spacing:.015em;color:var(--paper);white-space:nowrap;
}
.marquee__dot{
  font-family:var(--display);font-size:var(--fs-marquee);line-height:.98;color:var(--yellow);
}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- controls sheet ---------- */
.sheet{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:start}
.sheet__col{display:flex;flex-direction:column;gap:var(--gap)}
.sheet__tab{align-self:flex-start;padding:6px 12px;font-size:13px;letter-spacing:.03em}
.sheet__card{background:var(--paper);border:3px solid var(--ink);padding:20px 22px;display:flex;flex-direction:column;gap:12px}
.sheet__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sheet__game{font-size:28px}
.sheet__note{color:var(--paper);font-style:italic;font-size:15px}
@media (max-width:900px){.sheet{grid-template-columns:1fr}}

/* ---------- compare table ---------- */
.table{border:3px solid var(--ink);background:var(--paper)}
.table__head,.table__row{display:grid;grid-template-columns:280px repeat(5,1fr);align-items:center;padding:12px 0 12px 20px}
.table__head{
  background:var(--ink);color:var(--yellow);align-items:start;
  font-family:var(--label);font-weight:700;font-size:14px;line-height:1.3;
  letter-spacing:.03em;text-transform:uppercase;
}
.table__row{border-bottom:2px solid var(--ink);font-size:15px;line-height:1.4}
.table__row:last-child{border-bottom:0}
.table__row:nth-child(even){background:var(--paper-2)}
.table__game{display:flex;gap:12px;align-items:center;padding-right:12px}
.table__game img{width:52px;height:52px;flex:none;border:2px solid var(--ink);object-fit:cover}
.table__name{font-size:24px}
.table__cell{padding-right:16px}
.table__label{display:none}
@media (max-width:1000px){
  .table{border:0;background:none;display:flex;flex-direction:column;gap:10px}
  .table__head{display:none}
  .table__row{
    display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:14px;
    background:var(--paper);border:3px solid var(--ink);
  }
  .table__game{padding:0 0 4px}
  .table__row:nth-child(even){background:var(--paper)}
  .table__cell{display:flex;gap:10px;padding:0}
  .table__label{
    display:block;width:92px;flex:none;
    font-family:var(--label);font-weight:700;font-size:12px;line-height:1.6;
    letter-spacing:.03em;text-transform:uppercase;color:var(--ink-soft);
  }
}

/* ---------- letters (FAQ) ---------- */
.letters{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:start}
.letter{background:var(--paper);border:3px solid var(--ink);padding:22px 24px;display:flex;flex-direction:column;gap:10px}
.letter__q{font-family:var(--label);font-weight:700;font-size:16px;line-height:1.3;letter-spacing:.03em;text-transform:uppercase}
.letter__a{font-size:17px}
@media (max-width:1000px){.letters{grid-template-columns:1fr}}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:745fr 527fr;gap:var(--gap);align-items:stretch}
.contact__mail{
  display:inline-flex;align-self:flex-start;background:var(--paper);border:2px solid var(--ink);
  padding:10px 16px;font-family:var(--label);font-weight:700;
  font-size:clamp(15px,3.6vw,22px);line-height:1.3;
  letter-spacing:.03em;text-transform:uppercase;color:var(--ink);text-decoration:none;
  max-width:100%;overflow-wrap:anywhere;
}
.contact__mail:hover{background:var(--yellow)}
.legal-row{display:flex;gap:10px;align-items:flex-start}
.legal-row__k{width:90px;flex:none;font-family:var(--label);font-weight:700;font-size:12px;line-height:1.3;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-soft)}
.legal-row__v{flex:1 1 0;min-width:0;font-size:15px}
@media (max-width:1000px){.contact{grid-template-columns:1fr}}
@media (max-width:560px){
  .legal-row{flex-direction:column;gap:2px}
  .legal-row__k{width:auto}
}

/* ---------- footer ---------- */
.footer{background:var(--ink);padding:64px var(--gutter) 56px}
.footer__stack{display:flex;align-items:flex-start}
.footer__stack > *{flex:1 1 0;min-width:0}
.fcard{position:relative;border:3px solid var(--paper);padding:26px 24px;display:flex;flex-direction:column;gap:10px}
.fcard--1{background:var(--red-deep);transform:rotate(2.5deg);margin:18px -14px 0 0;z-index:4}
.fcard--2{background:var(--yellow);color:var(--ink);transform:rotate(-1.5deg);margin:25px -14px 0 0;z-index:3}
.fcard--3{background:var(--paper);color:var(--ink);transform:rotate(1deg);margin:10px -14px 0 0;z-index:2}
.fcard--4{background:var(--blue);color:var(--paper);transform:rotate(-2deg);margin:28px 0 0 0;z-index:1}
.fcard__title{font-size:30px}
.fcard--1 .fcard__title{font-size:40px;color:var(--yellow)}
.fcard p{font-size:16px;color:var(--paper)}
.fcard--2 p,.fcard--3 p{color:var(--ink)}
.fcard a{
  font-family:var(--label);font-weight:700;font-size:14px;line-height:1.3;
  letter-spacing:.03em;text-transform:uppercase;color:inherit;text-decoration:none;
}
.fcard--1 a,.fcard--3 a{text-decoration:underline;text-underline-offset:2px}
.fcard a:hover{color:var(--red)}
.fcard--1 a:hover{color:var(--yellow)}
.fcard__muted{
  font-family:var(--label);font-weight:700;font-size:12px;line-height:1.3;
  letter-spacing:.03em;text-transform:uppercase;color:var(--ink-soft);
  overflow-wrap:anywhere;
}
.fcard__social{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:2px}
.fcard__social a{
  font-size:12px;color:var(--ink-soft);
  text-decoration:underline;text-underline-offset:2px;
}
.fcard__social a:hover{color:var(--red)}
.fcard--4 p{font-size:15px}
.fcard__links{display:flex;flex-direction:column;gap:10px}
@media (max-width:1100px){
  .footer__stack{flex-wrap:wrap}
  .footer__stack > *{flex:1 1 calc(50% - 8px)}
  .fcard{margin:0 -10px 10px 0}
}
@media (max-width:700px){
  .footer{padding:36px var(--gutter) 32px}
  .footer__stack{flex-direction:column}
  .footer__stack > *{flex:none;width:100%}
  .fcard{transform:none;padding:20px 18px;margin:0 0 10px}
}

/* ---------- page title block (games / about / legal) ---------- */
.pagehead{position:relative;overflow:hidden;padding:56px var(--gutter) 40px;display:flex;flex-direction:column;gap:28px;align-items:flex-start}
.pagehead__title{font-size:var(--fs-page-title)}
.pagehead__box{width:853px;max-width:100%}

/* ---------- accordion catalogue ---------- */
.accordion{display:flex;flex-direction:column;gap:var(--gap)}
.acc{background:var(--paper);border:3px solid var(--ink)}
.acc.is-open{border-width:4px}
.acc__head{
  display:flex;gap:20px;align-items:center;width:100%;text-align:left;
  padding:14px 20px;background:var(--paper);
  transition:background var(--dur) var(--ease);
}
.acc.is-open .acc__head{background:var(--yellow);border-bottom:3px solid var(--ink)}
.acc__head:hover{background:var(--paper-2)}
.acc.is-open .acc__head:hover{background:var(--yellow)}
.acc__thumb{width:64px;height:64px;flex:none;border:2px solid var(--ink);object-fit:cover}
.acc__titles{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:4px}
.acc__title{font-size:clamp(28px,3vw,40px)}
.acc__sub{font-family:var(--label);font-weight:700;font-size:13px;line-height:1.3;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-soft)}
.acc__chev{width:28px;height:28px;flex:none;position:relative}
.acc__chev img{position:absolute;inset:0;width:100%;height:100%}
.acc__chev .is-up{opacity:0}
.acc.is-open .acc__chev .is-up{opacity:1}
.acc.is-open .acc__chev .is-down{opacity:0}
.acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur) ease-out}
.acc.is-open .acc__panel{grid-template-rows:1fr}
.acc__panelInner{overflow:hidden}
.acc__body{display:flex;gap:32px;align-items:flex-start;padding:24px 24px 28px}
.acc__cover{width:360px;height:360px;flex:none;border:3px solid var(--ink);object-fit:cover}
.acc__content{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:16px}
@media (max-width:900px){
  .acc__body{flex-direction:column;gap:18px;padding:16px}
  .acc__cover{width:100%;height:auto;aspect-ratio:1}
  .acc__head{padding:12px}
}

/* ---------- magazine spread (game page) ---------- */
.desk{position:relative;background:var(--blue);padding:28px var(--gutter) 72px;overflow:hidden}
.desk__raster{position:absolute;inset:0;background-image:var(--benday-blue);background-size:var(--benday-blue-size);opacity:.18;pointer-events:none}
.breadcrumb{
  position:relative;font-family:var(--label);font-weight:700;font-size:13px;line-height:1.3;
  letter-spacing:.03em;text-transform:uppercase;color:var(--paper);margin-bottom:20px;
}
.breadcrumb a{color:var(--paper);text-decoration:none}
.breadcrumb a:hover{color:var(--yellow)}
.spread{position:relative;display:flex;filter:drop-shadow(0 18px 20px rgba(25,25,38,.35))}
.spread__page{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:18px}
.spread__page--left{background:var(--paper-2);padding:40px 44px 44px 40px}
.spread__page--right{background:var(--paper);padding:40px 40px 44px 44px;gap:26px}
.spread__spine{
  position:absolute;top:0;bottom:0;left:calc(50% - 24px);width:48px;pointer-events:none;
  background:linear-gradient(to right,rgba(0,0,0,0),rgba(26,20,31,.22) 50%,rgba(0,0,0,0));
}
@media (max-width:900px){
  .spread{flex-direction:column}
  .spread__spine{display:none}
  .spread__page--left,.spread__page--right{padding:20px 16px}
}

.cover-panel{position:relative;border:3px solid var(--ink);overflow:hidden;height:380px}
.cover-panel img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.cover-panel .caption{position:absolute;left:11px;top:11px;font-size:15px;letter-spacing:.04em}
.game-title{font-size:var(--fs-game-title)}
.byline{font-family:var(--label);font-weight:700;font-size:12px;line-height:1.3;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-soft)}
.standfirst{font-style:italic;font-size:20px;line-height:1.6}
.h-block{font-size:30px}
.h-right{font-size:var(--fs-h3)}
.hosted{background:var(--paper);border:2px solid var(--ink);padding:18px 20px;display:flex;flex-direction:column;gap:8px}
.hosted__title{font-size:26px}
.hosted p{font-size:15px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:stretch}
.duo__box{border:2px solid var(--ink);padding:18px;display:flex;flex-direction:column;gap:10px}
.duo__box--yellow{background:var(--yellow)}
.duo__box--paper{background:var(--paper)}
.duo__title{font-size:28px}
.duo p{font-size:16px}
@media (max-width:560px){.duo{grid-template-columns:1fr}}
.related{display:flex;flex-wrap:wrap;gap:12px}
.related__card{
  display:flex;gap:6px;width:250px;max-width:100%;background:var(--paper);
  border:2px solid var(--ink);padding:10px;text-decoration:none;color:inherit;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.related__card:hover{transform:translate(-3px,-3px);box-shadow:3px 3px 0 var(--ink)}
.related__card img{width:48px;height:48px;flex:none;border:2px solid var(--ink);object-fit:cover}
.related__name{font-size:20px}
.related__note{font-size:13px;line-height:1.35}

/* ---------- legal pages ---------- */
.legal{display:flex;gap:48px;align-items:flex-start;padding:48px var(--gutter) 80px;background:var(--paper)}
.toc{
  width:310px;flex:none;position:sticky;top:20px;
  background:var(--paper);border:3px solid var(--ink);padding:18px;
  display:flex;flex-direction:column;gap:8px;
}
.toc__title{font-size:24px}
.toc a{
  font-family:var(--label);font-weight:700;font-size:13px;line-height:1.3;
  letter-spacing:.03em;text-transform:uppercase;color:var(--blue);text-decoration:none;
}
.toc a:hover{color:var(--red-deep);text-decoration:underline}
.legal__body{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:30px;max-width:760px}
.legal__sec{display:flex;flex-direction:column;gap:10px;padding-top:14px;border-top:2px solid var(--ink)}
.legal__sec h2{font-size:32px}
@media (max-width:900px){
  .legal{flex-direction:column;gap:24px;padding-bottom:56px}
  .toc{position:static;width:100%}
}

/* ---------- cookie bar ---------- */
.cookie{
  position:fixed;left:20px;bottom:20px;z-index:60;width:500px;max-width:calc(100vw - 24px);
  background:var(--paper);border:3px solid var(--ink);
  box-shadow:8px 8px 0 rgba(25,25,38,.35);
}
.cookie[hidden]{display:none}
.cookie__head{
  position:relative;overflow:hidden;background:var(--red);
  border-bottom:3px solid var(--ink);padding:12px 14px;
}
.cookie__head .benday{inset:0;opacity:.8}
.cookie__title{position:relative;font-size:28px;color:var(--paper)}
.cookie__body{padding:14px 14px 16px;display:flex;flex-direction:column;gap:16px}
.cookie__text{font-size:14px}
.cookie__actions{display:flex;flex-wrap:wrap;gap:10px}
.cookie__more{
  font-family:var(--label);font-weight:700;font-size:13px;line-height:1.3;
  letter-spacing:.03em;text-transform:uppercase;color:var(--blue);
  text-decoration:underline;text-underline-offset:2px;
}
@media (max-width:560px){
  .cookie{left:12px;bottom:12px;right:12px;width:auto}
}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(14px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity 200ms ease-out,transform 200ms ease-out}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:1ms!important;animation-iteration-count:1!important;
    transition-duration:1ms!important;
  }
  .marquee__track{animation:none;transform:none}
  .reveal{opacity:1;transform:none}
  .tile:hover,.tile:focus-visible,.btn:hover,.related__card:hover{transform:none}
}

/* ---------- print ---------- */
@media print{
  .cookie,.issue-bar,.burger,.marquee{display:none}
  body{background:#fff}
}