/* Gamebrief: "Photocopied fanzine". Black ink on newsprint, one fluoro spot colour.
   Paste-up layout, typewriter captions, everything photocopied. See DESIGN.md. */

:root {
  --gb-paper: #EFEAE0;      /* newsprint page */
  --gb-slip: #F8F5EE;       /* pasted-on paper slips */
  --gb-white: #FFFDF8;      /* form fields, tickets */
  --gb-ink: #141414;        /* text, rules (16:1 on paper) */
  --gb-ink-2: #45413A;      /* secondary text (8.4:1 on paper) */
  --gb-fluoro: #FF5A1F;     /* the one spot colour: highlights, marker, tape; ink text on it is 5.9:1 */
  --gb-fluoro-soft: #FFC3AB;/* light marker wash behind ink text */
  --gb-tape: rgba(226, 214, 182, .86);
  --gb-display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --gb-type: 'Special Elite', 'Courier New', Courier, monospace;
  --gb-text: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --gb-wrap: 1240px;
  --gb-gutter: clamp(1rem, 4vw, 2.5rem);
  --gb-grain: 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='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --gb-dots: radial-gradient(circle, rgba(20, 20, 20, .16) 0 1.1px, transparent 1.5px);
  /* a hand-cut edge: small irregular nicks top and bottom */
  --gb-cut: polygon(0 6px, 7% 1px, 15% 5px, 26% 0, 37% 6px, 49% 2px, 60% 5px, 72% 0, 84% 6px, 93% 2px, 100% 5px, 100% calc(100% - 4px), 92% 100%, 81% calc(100% - 6px), 69% calc(100% - 1px), 57% calc(100% - 5px), 44% 100%, 32% calc(100% - 6px), 20% calc(100% - 1px), 9% calc(100% - 5px), 0 100%);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--gb-paper) var(--gb-grain);
  color: var(--gb-ink);
  font-family: var(--gb-text);
  font-size: 1.0625rem;
  line-height: 1.62;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; overflow-wrap: break-word; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--gb-ink); outline-offset: 3px; }

.gb-wrap { max-width: var(--gb-wrap); margin-inline: auto; padding-inline: var(--gb-gutter); }
.gb-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.gb-skip { position: absolute; left: 1rem; top: -4rem; z-index: 10; background: var(--gb-fluoro); color: var(--gb-ink); padding: .6rem 1rem; font-family: var(--gb-type); text-decoration: none; }
.gb-skip:focus { top: 1rem; }

/* ---------- top line + masthead ---------- */
.gb-topline { background: var(--gb-ink); color: var(--gb-paper); font-family: var(--gb-type); font-size: .8125rem; line-height: 1.4; }
.gb-topline__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1.5rem; padding-block: .5rem; }

.gb-masthead__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem; padding-block: 1.1rem .9rem; border-bottom: 4px solid var(--gb-ink); position: relative; }
.gb-masthead__inner::after { content: ''; position: absolute; left: var(--gb-gutter); right: var(--gb-gutter); bottom: -9px; border-bottom: 1.5px solid var(--gb-ink); }
.gb-logo { text-decoration: none; color: var(--gb-ink); display: inline-block; }
.gb-logo__name { font-family: var(--gb-display); font-size: 2.6rem; line-height: .9; text-transform: lowercase; letter-spacing: -.01em; text-shadow: 3px 3px 0 var(--gb-fluoro); display: block; }
.gb-nav { display: flex; flex-wrap: wrap; gap: .25rem 1.4rem; font-family: var(--gb-type); font-size: 1rem; }
.gb-nav__link { text-decoration: none; padding: .35rem .1rem; }
.gb-nav__link:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.gb-nav__link.is-here { background: linear-gradient(transparent 52%, var(--gb-fluoro) 52%, var(--gb-fluoro) 88%, transparent 88%); }

/* home: the masthead is the zine cover title */
.gb-is-home .gb-masthead__inner { display: grid; grid-template-columns: 1fr auto; padding-top: clamp(1rem, 2.4vw, 2rem); row-gap: clamp(.6rem, 1.4vw, 1.2rem); }
.gb-is-home .gb-logo { grid-column: 1 / -1; }
.gb-is-home .gb-logo__name { font-size: clamp(4.4rem, 20.5vw, 17.5rem); line-height: .96; letter-spacing: -.015em; text-shadow: clamp(4px, .7vw, 9px) clamp(4px, .7vw, 9px) 0 var(--gb-fluoro); margin-left: -.03em; }
.gb-masthead__tag { font-family: var(--gb-type); font-size: 1rem; }

/* ---------- photocopied pictures ---------- */
.gb-xerox { position: relative; display: block; overflow: hidden; background: var(--gb-white); isolation: isolate; }
.gb-xerox img { width: 100%; filter: grayscale(1) contrast(1.4) brightness(1.06); }
.gb-xerox::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(20, 20, 20, .55) 0 .9px, transparent 1.3px) 0 0 / 4px 4px; mix-blend-mode: multiply; opacity: .55; pointer-events: none; }
.gb-xerox::before { content: ''; position: absolute; inset: 0; background: var(--gb-fluoro); mix-blend-mode: multiply; opacity: 0; z-index: 1; pointer-events: none; transition: opacity .2s; }
.gb-xerox--fluoro::before { opacity: 1; }

/* masking tape on pasted-up pictures */
.gb-taped { position: relative; display: block; }
.gb-taped::before, .gb-taped::after { content: ''; position: absolute; z-index: 2; width: 7.5rem; height: 1.7rem; background: var(--gb-tape); clip-path: polygon(3% 0, 97% 6%, 100% 34%, 96% 62%, 99% 100%, 2% 94%, 4% 60%, 0 30%); pointer-events: none; }
.gb-taped::before { top: -.7rem; left: -1.6rem; transform: rotate(-32deg); }
.gb-taped::after { bottom: -.6rem; right: -1.7rem; transform: rotate(-28deg); }

/* ---------- hand-drawn marks ---------- */
.gb-scrawl, .gb-ring, .gb-arrowdraw, .gb-mark { fill: none; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.gb-scrawl path, .gb-ring path { vector-effect: non-scaling-stroke; }

.gb-circled { position: relative; display: inline-block; padding: .42em .75em .38em; font-family: var(--gb-display); font-size: 1.3rem; line-height: 1; text-transform: uppercase; white-space: nowrap; transform: rotate(-3deg); }
.gb-circled__word { position: relative; z-index: 1; }
.gb-ring { position: absolute; left: -.1em; top: -.05em; width: calc(100% + .2em); height: calc(100% + .1em); stroke: var(--gb-fluoro); stroke-width: 3.5; }
.gb-circled--big { font-size: clamp(1.9rem, 3.4vw, 2.8rem); transform: rotate(-5deg); }
.gb-circled--big .gb-ring { stroke-width: 5; }

/* ---------- ticket stubs (shop links) ---------- */
.gb-ticket {
  display: inline-flex; align-items: center; min-height: 42px; padding: .4rem .95rem .4rem 1.35rem;
  font-family: var(--gb-type); font-size: .9375rem; line-height: 1.2; color: var(--gb-ink); text-decoration: none;
  border: 1.5px solid var(--gb-ink);
  background: linear-gradient(var(--gb-ink) 55%, transparent 0) .55rem 0 / 1.5px 7px repeat-y, var(--gb-white);
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 5px, #000 5.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 5px, #000 5.5px) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 50%, transparent 5px, #000 5.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 5px, #000 5.5px) right / 51% 100% no-repeat;
}
.gb-ticket:hover { background-color: var(--gb-fluoro); }
.gb-ticket:focus-visible { outline: none; background-color: var(--gb-fluoro); text-decoration: underline; text-decoration-thickness: 2px; }

/* bracketed typewriter link */
.gb-more { font-family: var(--gb-type); font-size: 1rem; text-decoration: underline; text-decoration-color: var(--gb-fluoro); text-decoration-thickness: 3px; text-underline-offset: 4px; white-space: nowrap; }
.gb-more::before { content: '['; text-decoration: none; display: inline-block; padding-right: .15em; }
.gb-more::after { content: ']'; display: inline-block; padding-left: .15em; }
.gb-more:hover { background: var(--gb-fluoro); text-decoration-color: var(--gb-ink); }

/* ---------- cover (home hero) ---------- */
.gb-cover { padding-block: clamp(2rem, 5vw, 3.5rem) 2rem; overflow-x: clip; }
.gb-cover__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.gb-cover__title { font-family: var(--gb-display); font-size: clamp(2.9rem, 6.6vw, 6.4rem); line-height: .94; text-transform: uppercase; letter-spacing: -.005em; }
.gb-cover__then { position: relative; display: inline-block; white-space: nowrap; }
.gb-cover__then .gb-scrawl { position: absolute; left: -2%; bottom: -.16em; width: 104%; height: .32em; stroke: var(--gb-fluoro); stroke-width: 7; z-index: -1; }
.gb-cover__title { position: relative; z-index: 0; }
.gb-cover__lede { margin-top: 1.4rem; font-size: 1.25rem; line-height: 1.55; max-width: 36ch; }

.gb-cover__feature { --gb-tilt: 1.6deg; margin: .6rem 0 0; transform: rotate(var(--gb-tilt)); }
.gb-cover__link { display: block; text-decoration: none; color: var(--gb-ink); }
.gb-cover__link .gb-taped { border: 10px solid var(--gb-white); outline: 1.5px solid rgba(20, 20, 20, .25); }
.gb-cover__cap { position: relative; display: block; width: 88%; margin: -1.6rem 0 0 -1.2rem; padding: 1rem 1.2rem 1.1rem; background: var(--gb-slip); border: 1.5px solid var(--gb-ink); transform: rotate(-2.4deg); z-index: 3; }
.gb-cover__caplabel, .gb-cover__capgo { font-family: var(--gb-type); font-size: .9375rem; }
.gb-cover__captitle { display: block; margin: .3rem 0 .5rem; font-family: var(--gb-display); font-size: clamp(1.35rem, 2.1vw, 1.75rem); line-height: 1.08; }
.gb-cover__capgo { text-decoration: underline; text-decoration-color: var(--gb-fluoro); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.gb-cover__link:hover .gb-cover__capgo { background: var(--gb-fluoro); }

/* the one motion moment: the pasted cover photo settles onto the page once */
@media (prefers-reduced-motion: no-preference) {
  .gb-cover__feature { animation: gb-settle .75s cubic-bezier(.2, .9, .25, 1) .15s both; }
  @keyframes gb-settle {
    from { transform: translate(10px, -18px) rotate(-4.5deg); }
    to { transform: rotate(var(--gb-tilt)); }
  }
}

/* ---------- coupon (newsletter) ---------- */
.gb-coupon { position: relative; margin-top: 2.2rem; padding: 1.5rem 1.4rem 1.3rem; background: var(--gb-slip); border: 2px dashed var(--gb-ink); transform: rotate(-.6deg); max-width: 40rem; }
.gb-scissors { position: absolute; top: -11px; left: 1.4rem; width: 32px; height: 20px; padding: 0 3px; background: var(--gb-paper); stroke: var(--gb-ink); stroke-width: 1.7; fill: none; stroke-linecap: round; }
.gb-coupon__head { font-family: var(--gb-display); font-size: 1.45rem; line-height: 1.12; margin-bottom: 1rem; max-width: 28ch; }
.gb-arrowdraw { position: absolute; width: 64px; height: 56px; right: 3.2rem; top: -4.1rem; stroke: var(--gb-ink); stroke-width: 2.4; }
.gb-coupon--wide { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1.2rem 2.5rem; max-width: none; margin-block: 3.5rem; transform: rotate(-.3deg); padding: 1.8rem 1.6rem 1.5rem; }
.gb-coupon__title { font-family: var(--gb-display); font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.02; margin-bottom: .5rem; }
.gb-coupon__text p { font-family: var(--gb-type); font-size: .9375rem; color: var(--gb-ink-2); }

/* ---------- forms ---------- */
.gb-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gb-form__label { display: block; font-family: var(--gb-type); font-size: .9375rem; margin-bottom: .35rem; }
.gb-form__row { display: flex; flex-wrap: wrap; gap: .6rem; }
.gb-form__input, .gb-form__select { flex: 1 1 14rem; min-width: 0; min-height: 48px; padding: .55rem .8rem; font: inherit; font-size: 1rem; color: var(--gb-ink); background: var(--gb-white); border: 2px solid var(--gb-ink); border-radius: 0; }
.gb-form__select { width: 100%; max-width: 26rem; margin-bottom: 1rem; }
.gb-form__input::placeholder { color: #6E6960; }
.gb-form__input:focus-visible, .gb-form__select:focus-visible { outline: 3px solid var(--gb-fluoro); outline-offset: 0; }
.gb-form__send { flex: 0 0 auto; min-height: 48px; padding: .3rem 1.5rem .2rem; font-family: var(--gb-display); font-size: 1.3rem; letter-spacing: .01em; text-transform: uppercase; color: var(--gb-paper); background: var(--gb-ink); border: 2px solid var(--gb-ink); border-radius: 0; cursor: pointer; }
.gb-form__send:hover { background: var(--gb-fluoro); color: var(--gb-ink); }
.gb-form__send:focus-visible { outline: 3px solid var(--gb-fluoro); outline-offset: 3px; }
.gb-form__send:disabled { opacity: .6; cursor: wait; }
.gb-form__consent { display: flex; gap: .6rem; align-items: flex-start; margin-top: .9rem; font-size: .875rem; line-height: 1.5; color: var(--gb-ink-2); }
.gb-form__consent input { flex: 0 0 auto; width: 1.2rem; height: 1.2rem; margin: .12rem 0 0; accent-color: var(--gb-ink); }
.gb-form__consent a { color: var(--gb-ink); }
.gb-status { font-size: .9375rem; margin-top: .6rem; }
.gb-status:empty { display: none; }
.gb-status.is-ok { padding: .6rem .8rem; border-left: 5px solid var(--gb-ink); background: var(--gb-white); }
.gb-status.is-err { padding: .6rem .8rem; border-left: 5px solid var(--gb-fluoro); background: var(--gb-fluoro-soft); }
.gb-alert { padding: .8rem 1rem; margin-bottom: 1.2rem; border: 2px solid var(--gb-ink); background: var(--gb-fluoro-soft); }
.gb-optout { margin-bottom: 1.5rem; max-width: 40rem; }
.gb-optout .gb-standfirst { margin-bottom: 1rem; }

/* ---------- house rules slip (pasted under the cover photo) ---------- */
.gb-rules { position: relative; margin: 2.8rem 0 0 1.5rem; background: var(--gb-slip); padding: 1.5rem 1.5rem 1.3rem; clip-path: var(--gb-cut); transform: rotate(-1.2deg); }
.gb-rules__label { font-family: var(--gb-type); font-size: 1rem; margin-bottom: .8rem; }
.gb-rules__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; counter-reset: gb-rule; }
.gb-rules__list li { counter-increment: gb-rule; position: relative; padding-left: 2.4rem; font-size: 1rem; line-height: 1.5; }
.gb-rules__list li::before { content: counter(gb-rule); position: absolute; left: 0; top: -.15rem; font-family: var(--gb-display); font-size: 2rem; line-height: 1; }
.gb-rules__list strong { font-weight: 700; }

/* ---------- sections ---------- */
.gb-sect { padding-block: clamp(2.5rem, 5vw, 4rem); }
.gb-sect--dots { background: var(--gb-dots) 0 0 / 7px 7px; border-block: 1.5px solid var(--gb-ink); }
.gb-secthead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1.5rem; border-top: 4px solid var(--gb-ink); padding-top: .6rem; margin-bottom: 1.8rem; }
.gb-secthead__title { font-family: var(--gb-display); font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1; text-transform: uppercase; }
.gb-sect__intro { max-width: 62ch; margin: -.8rem 0 1.6rem; background: var(--gb-paper); padding: .3rem .5rem; box-decoration-break: clone; display: inline-block; }

/* comparison cards: cut-out slips */
.gb-cmpgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 2.4rem 2rem; }
.gb-cmpcard { display: flex; flex-direction: column; text-decoration: none; color: var(--gb-ink); background: var(--gb-slip); clip-path: var(--gb-cut); padding: 1.1rem 1.1rem 1.4rem; }
.gb-cmpcard:nth-child(3n+1) { transform: rotate(-1deg); }
.gb-cmpcard:nth-child(3n+2) { transform: rotate(.7deg); margin-top: 1rem; }
.gb-cmpcard__pics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.gb-cmpcard__pics .gb-xerox { aspect-ratio: 3 / 4; }
.gb-cmpcard__pics img { height: 100%; object-fit: cover; }
.gb-cmpcard__body { display: flex; flex-direction: column; gap: .6rem; padding-top: 1rem; flex: 1; }
.gb-cmpcard__title { font-family: var(--gb-display); font-size: 1.6rem; line-height: 1.06; }
.gb-cmpcard__teaser { font-size: 1rem; line-height: 1.5; }
.gb-cmpcard__go { margin-top: auto; padding-top: .4rem; font-family: var(--gb-type); font-size: .9375rem; text-decoration: underline; text-decoration-color: var(--gb-fluoro); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.gb-cmpcard:hover .gb-xerox::before { opacity: 1; }
.gb-cmpcard:hover .gb-cmpcard__title { text-decoration: underline; text-decoration-thickness: 3px; }
.gb-cmpcard:focus-visible { outline: none; }
.gb-cmpcard:focus-visible .gb-cmpcard__title { background: var(--gb-fluoro); }

/* game rows: one ruled sheet */
.gb-rows { list-style: none; margin: 0; padding: 0; background: var(--gb-slip); border-top: 4px solid var(--gb-ink); border-bottom: 1.5px solid var(--gb-ink); }
.gb-row { display: grid; grid-template-columns: 210px minmax(0, 1fr) 15.5rem; gap: 1.6rem; padding: 1.5rem 1.4rem; align-items: start; }
.gb-row + .gb-row { border-top: 1.5px solid var(--gb-ink); }
.gb-row__pic { display: block; }
.gb-row__pic .gb-xerox { aspect-ratio: 4 / 3; }
.gb-row__pic img { height: 100%; object-fit: cover; }
.gb-row__pic:hover .gb-xerox::before { opacity: 1; }
.gb-row__title { font-family: var(--gb-display); font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.04; }
.gb-row__title a { text-decoration: none; }
.gb-row__title a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--gb-fluoro); }
.gb-row__meta { margin-top: .35rem; font-family: var(--gb-type); font-size: .875rem; color: var(--gb-ink-2); }
.gb-row__why { margin-top: .6rem; max-width: 56ch; }
.gb-row__side { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.gb-row__shops { display: flex; flex-wrap: wrap; gap: .5rem; }
.gb-row__shopslabel { width: 100%; font-family: var(--gb-type); font-size: .8125rem; color: var(--gb-ink-2); }

/* stories */
.gb-stories { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.gb-story__hit { display: block; text-decoration: none; color: var(--gb-ink); }
.gb-story__text { display: flex; flex-direction: column; gap: .4rem; }
.gb-story__title { font-family: var(--gb-display); font-size: 1.4rem; line-height: 1.08; }
.gb-story__teaser { font-size: .9688rem; line-height: 1.5; }
.gb-story__meta { font-family: var(--gb-type); font-size: .8125rem; color: var(--gb-ink-2); }
.gb-story__hit:hover .gb-story__title { text-decoration: underline; text-decoration-color: var(--gb-fluoro); text-decoration-thickness: 3px; }
.gb-story__hit:hover .gb-xerox::before { opacity: 1; }
.gb-story__hit:focus-visible { outline: none; }
.gb-story__hit:focus-visible .gb-story__title { background: var(--gb-fluoro); }
.gb-story--lead .gb-story__pic { display: block; margin-bottom: 1.1rem; transform: rotate(-1deg); border: 8px solid var(--gb-white); }
.gb-story--lead .gb-story__title { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.gb-story--lead .gb-story__teaser { font-size: 1.0625rem; }
.gb-stories__list { display: grid; gap: 0; border-top: 4px solid var(--gb-ink); }
.gb-stories__list .gb-story { padding-block: 1.1rem; border-bottom: 1.5px solid var(--gb-ink); }
.gb-stories__list .gb-story__hit { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.gb-stories__list .gb-story__pic .gb-xerox { aspect-ratio: 1 / 1; }
.gb-stories__list .gb-story__pic img { height: 100%; object-fit: cover; }
.gb-stories__list--all { grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); column-gap: 3rem; border-top: 0; }
.gb-stories__list--all .gb-story:first-child, .gb-stories__list--all .gb-story:nth-child(2) { border-top: 4px solid var(--gb-ink); }

/* steps */
.gb-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem 2rem; counter-reset: gb-step; }
.gb-steps li { counter-increment: gb-step; font-size: 1rem; line-height: 1.55; }
.gb-steps li::before { content: counter(gb-step); display: inline-block; margin-bottom: .5rem; padding: 0 .3rem; font-family: var(--gb-display); font-size: 3.6rem; line-height: 1; background: linear-gradient(transparent 50%, var(--gb-fluoro) 50%, var(--gb-fluoro) 86%, transparent 86%); }
.gb-steps strong { display: block; font-family: var(--gb-display); font-weight: 400; font-size: 1.35rem; line-height: 1.1; margin-bottom: .25rem; }

/* ---------- inner page header ---------- */
.gb-pagehead { padding-block: 1.6rem 2.2rem; }
.gb-pagehead .gb-wrap { position: relative; }
.gb-crumbs ol { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem; font-family: var(--gb-type); font-size: .875rem; color: var(--gb-ink-2); }
.gb-crumbs li + li::before { content: '/'; margin: 0 .45rem 0 .25rem; }
.gb-crumbs a { color: var(--gb-ink); }
.gb-pagehead h1 { font-family: var(--gb-display); font-size: clamp(2.5rem, 6vw, 5rem); line-height: .98; max-width: 20ch; }
.gb-standfirst { font-size: 1.25rem; line-height: 1.5; font-style: italic; max-width: 58ch; margin-top: 1rem; }
.gb-byline { margin-top: .9rem; font-family: var(--gb-type); font-size: .875rem; color: var(--gb-ink-2); }
.gb-pagehead h1 + .gb-byline { margin-top: .7rem; }
.gb-pagehead > .gb-wrap::after { content: ''; display: block; margin-top: 2rem; height: 9px; border-top: 4px solid var(--gb-ink); border-bottom: 1.5px solid var(--gb-ink); }
.gb-game__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.gb-game__headtext { flex: 1 1 32rem; min-width: 0; }
.gb-game__head .gb-circled { margin-right: 2rem; }

/* ---------- reading ---------- */
.gb-prose { max-width: 68ch; }
.gb-prose > * + * { margin-top: 1.05em; }
.gb-prose h2 { font-family: var(--gb-display); font-size: clamp(1.7rem, 3vw, 2.15rem); line-height: 1.06; margin-top: 2.1em; }
.gb-prose h3 { font-weight: 700; font-size: 1.1875rem; line-height: 1.3; margin-top: 1.8em; }
.gb-prose h2 + *, .gb-prose h3 + * { margin-top: .6em; }
.gb-prose ul, .gb-prose ol { padding-left: 1.3rem; }
.gb-prose li + li { margin-top: .45em; }
.gb-prose li::marker { font-family: var(--gb-type); }
.gb-prose a, .gb-onward a, .gb-fine a, .gb-contacts a, .gb-verdict__text a { color: var(--gb-ink); text-decoration: underline; text-decoration-color: var(--gb-fluoro); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.gb-prose a:hover, .gb-onward a:hover, .gb-fine a:hover, .gb-contacts a:hover, .gb-verdict__text a:hover { background: var(--gb-fluoro-soft); }
.gb-prose .gb-standfirst { margin-top: 0; }
.gb-fine { font-size: .875rem; line-height: 1.5; color: var(--gb-ink-2); margin-top: .8rem; }
.gb-article__body { padding-block: 2.2rem 3rem; }
.gb-article__body > .gb-coupon, .gb-article__body > .gb-onward { max-width: 68ch; }
.gb-article .gb-figure { margin-left: 0; }
.gb-figure { margin: 0 auto 2.4rem; max-width: 60rem; }
.gb-figure .gb-xerox { border: 10px solid var(--gb-white); }
.gb-article .gb-figure { transform: rotate(-.8deg); }
.gb-figure figcaption { margin-top: .7rem; font-family: var(--gb-type); font-size: .8125rem; color: var(--gb-ink-2); }
.gb-onward { margin-top: 2rem; padding-top: .8rem; border-top: 1.5px solid var(--gb-ink); }
.gb-onward__label { font-family: var(--gb-type); margin-right: .4rem; }
.gb-textpage { padding-block: 2.2rem 4rem; }
.gb-contacts { margin: 1.5rem 0; }
.gb-contacts div { padding-block: .7rem; border-bottom: 1.5px solid var(--gb-ink); }
.gb-contacts dt { font-family: var(--gb-type); font-size: .9375rem; color: var(--gb-ink-2); }
.gb-contacts dd { margin: .15rem 0 0; }

/* ---------- game page ---------- */
.gb-game__body { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 3rem 3.5rem; padding-block: 2.2rem 1rem; align-items: start; }
.gb-game__main .gb-figure { margin-inline: 0; transform: rotate(.6deg); }
.gb-proscons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2.5rem; margin-top: 2.5rem; }
.gb-proscons__col { border-top: 4px solid var(--gb-ink); padding-top: .7rem; }
.gb-proscons h2 { font-family: var(--gb-display); font-size: 1.6rem; line-height: 1.1; margin-bottom: .7rem; }
.gb-proscons ul { list-style: none; margin: 0; padding: 0; }
.gb-proscons li { display: flex; gap: .7rem; align-items: flex-start; padding-block: .4rem; }
.gb-mark { flex: 0 0 auto; width: 1.4rem; height: 1.4rem; stroke: var(--gb-ink); stroke-width: 2.6; margin-top: .1rem; }
.gb-mark--no { stroke: var(--gb-ink-2); stroke-width: 2.3; }
.gb-buy { margin-top: 2.8rem; }
.gb-buy h2 { font-family: var(--gb-display); font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.06; margin-bottom: 1rem; }
.gb-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.gb-shoptable { width: 100%; border-collapse: collapse; min-width: 26rem; }
.gb-shoptable th, .gb-shoptable td { text-align: left; padding: .75rem .8rem .75rem 0; border-bottom: 1.5px solid var(--gb-ink); vertical-align: middle; }
.gb-shoptable thead th { font-family: var(--gb-type); font-weight: 400; font-size: .875rem; border-bottom: 4px solid var(--gb-ink); padding-block: .4rem; }
.gb-shoptable tbody th { font-family: var(--gb-display); font-weight: 400; font-size: 1.25rem; }
.gb-shoptable td:last-child { text-align: right; padding-right: 0; }

/* fact file: a typed index card taped into the zine */
.gb-factfile { position: sticky; top: 1.5rem; background: var(--gb-slip) repeating-linear-gradient(transparent 0 calc(1.75rem - 1px), rgba(20, 20, 20, .13) calc(1.75rem - 1px) 1.75rem); padding: 1.6rem 1.4rem 1.4rem; border-top: 6px solid var(--gb-ink); transform: rotate(.9deg); }
.gb-factfile::before { content: ''; position: absolute; top: -1.15rem; left: 50%; width: 7rem; height: 1.6rem; margin-left: -3.5rem; background: var(--gb-tape); transform: rotate(-3deg); clip-path: polygon(3% 0, 97% 6%, 100% 34%, 96% 62%, 99% 100%, 2% 94%, 4% 60%, 0 30%); }
.gb-factfile__title { font-family: var(--gb-display); font-size: 2rem; line-height: 1; margin-bottom: .8rem; }
.gb-factfile__list { margin: 0; }
.gb-factfile__list div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .8rem; padding-block: .5rem; border-bottom: 1px solid rgba(20, 20, 20, .35); }
.gb-factfile__list dt { font-family: var(--gb-type); font-size: .875rem; color: var(--gb-ink-2); padding-top: .1rem; }
.gb-factfile__list dd { margin: 0; font-size: .9688rem; line-height: 1.45; }
.gb-factfile__verdict { margin-top: 1.2rem; }
.gb-factfile__verdict p:last-child { font-style: italic; font-size: 1.0625rem; line-height: 1.5; }
.gb-factfile__label { font-family: var(--gb-type); font-size: .9375rem; margin-bottom: .4rem; }
.gb-factfile__label mark { background: linear-gradient(transparent 30%, var(--gb-fluoro) 30%, var(--gb-fluoro) 92%, transparent 92%); color: var(--gb-ink); padding: 0 .2rem; }
.gb-factfile__shops { margin-top: 1.3rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.gb-factfile__shops .gb-factfile__label { width: 100%; margin-bottom: 0; }

/* ---------- comparison chart ---------- */
.gb-compare > .gb-wrap { padding-block: 2rem 1rem; }
.gb-swipe { display: none; font-family: var(--gb-type); font-size: .875rem; margin-bottom: .6rem; }
.gb-scroll--chart { border-top: 4px solid var(--gb-ink); border-bottom: 4px solid var(--gb-ink); background: var(--gb-slip); }
.gb-scroll--chart:focus-visible { outline-offset: 4px; }
.gb-chart { width: 100%; min-width: 50rem; border-collapse: separate; border-spacing: 0; }
.gb-chart th, .gb-chart td { padding: .8rem 1rem; text-align: left; vertical-align: top; border-bottom: 1.5px solid var(--gb-ink); font-size: .9688rem; line-height: 1.45; }
.gb-chart td + td, .gb-chart th + td, .gb-chart thead th + th { border-left: 1px solid var(--gb-ink); }
.gb-chart tbody th { position: sticky; left: 0; z-index: 1; width: 11rem; min-width: 9rem; background: var(--gb-slip); font-family: var(--gb-type); font-weight: 400; font-size: .9375rem; border-right: 3px solid var(--gb-ink); }
.gb-chart thead th { font-weight: 400; border-bottom: 3px solid var(--gb-ink); vertical-align: bottom; padding-block: 1rem .8rem; }
.gb-chart thead .gb-chart__corner { position: sticky; left: 0; z-index: 1; background: var(--gb-slip); border-right: 3px solid var(--gb-ink); }
.gb-chart thead .gb-xerox { aspect-ratio: 16 / 9; margin-bottom: .7rem; }
.gb-chart thead img { height: 100%; object-fit: cover; }
.gb-chart__name { display: block; font-family: var(--gb-display); font-size: 1.5rem; line-height: 1.05; text-decoration: none; }
.gb-chart__name:hover { text-decoration: underline; text-decoration-color: var(--gb-fluoro); text-decoration-thickness: 3px; }
.gb-cell--mark { white-space: nowrap; }
.gb-cell--mark .gb-mark { display: inline-block; vertical-align: -.35rem; margin: 0 .45rem 0 0; width: 1.5rem; height: 1.5rem; }
.gb-cell--no span { color: var(--gb-ink-2); }
.gb-chart__verdict th, .gb-chart__verdict td { background: var(--gb-fluoro); }
.gb-chart__verdict td { font-family: var(--gb-display); font-size: 1.35rem; line-height: 1.1; text-transform: uppercase; }
.gb-chart tbody .gb-chart__verdict th { background: var(--gb-fluoro); color: var(--gb-ink); }
.gb-chart__buy { display: table-cell; }
.gb-chart__buy .gb-ticket { margin: 0 .4rem .45rem 0; }
.gb-chart tbody tr:last-child th, .gb-chart tbody tr:last-child td { border-bottom: 0; }

.gb-verdicts { margin-top: 3rem; }
.gb-verdicts h2 { font-family: var(--gb-display); font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1; text-transform: uppercase; border-top: 4px solid var(--gb-ink); padding-top: .6rem; margin-bottom: 1.6rem; }
.gb-verdicts ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 2rem 2.2rem; }
.gb-verdict .gb-xerox { aspect-ratio: 16 / 9; border: 6px solid var(--gb-white); }
.gb-verdict .gb-xerox img { height: 100%; object-fit: cover; }
.gb-verdict:nth-child(odd) .gb-xerox { transform: rotate(-1.2deg); }
.gb-verdict:nth-child(even) .gb-xerox { transform: rotate(1deg); }
.gb-verdict__text { padding-top: 1rem; }
.gb-verdict__text .gb-circled { margin: 0 0 .6rem -.2rem; }
.gb-verdict__text p { margin-bottom: .6rem; }
.gb-verdict__text a { font-family: var(--gb-type); font-size: .9375rem; }

/* retailers */
.gb-shoplist { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1.4rem; margin: 0; }
.gb-shoplist div { background: var(--gb-slip); padding: 1.1rem 1.1rem 1.2rem; clip-path: var(--gb-cut); }
.gb-shoplist dt { font-family: var(--gb-display); font-size: 1.45rem; line-height: 1.1; margin-bottom: .3rem; }
.gb-shoplist dd { margin: 0; font-size: .9688rem; line-height: 1.5; }
.gb-sect--dots .gb-fine { background: var(--gb-paper); display: inline-block; padding: .2rem .4rem; margin-top: 1.2rem; }

/* ---------- footer (the back cover) ---------- */
.gb-footer { background: var(--gb-ink); color: var(--gb-paper); padding-block: 3rem 2.2rem; margin-top: 3rem; }
.gb-footer :focus-visible { outline-color: var(--gb-fluoro); }
.gb-footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; }
.gb-logo--footer { color: var(--gb-paper); }
.gb-logo--footer .gb-logo__name { font-size: 3.4rem; }
.gb-footer__about p { margin-top: .9rem; max-width: 34ch; color: #D8D2C6; }
.gb-footer__head { font-family: var(--gb-type); color: var(--gb-fluoro); margin-bottom: .6rem; }
.gb-footer__nav { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; }
.gb-footer__nav a { color: var(--gb-paper); text-decoration: none; padding-block: .2rem; }
.gb-footer__nav a:hover, .gb-footer__nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--gb-fluoro); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.gb-footer__note { margin-top: 2.4rem; padding-top: 1rem; border-top: 1.5px dashed #8A857B; font-family: var(--gb-type); font-size: .8125rem; line-height: 1.55; color: #D8D2C6; max-width: 90ch; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .gb-row { grid-template-columns: 170px minmax(0, 1fr); }
  .gb-row__side { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; }
  .gb-arrowdraw { display: none; }
  .gb-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .gb-cover__grid, .gb-stories, .gb-game__body, .gb-coupon--wide { grid-template-columns: minmax(0, 1fr); }
  .gb-cover__feature { max-width: 36rem; margin-inline: auto; }
  .gb-factfile { position: relative; top: 0; transform: none; }
  .gb-swipe { display: block; }
  .gb-rules { margin-left: 0; max-width: 36rem; margin-inline: auto; }
  .gb-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gb-footer__about { grid-column: 1 / -1; }
  .gb-cmpcard:nth-child(3n+2) { margin-top: 0; }
}
@media (max-width: 640px) {
  body { font-size: 1.0313rem; }
  .gb-topline__promise { display: none; }
  .gb-is-home .gb-masthead__inner { grid-template-columns: 1fr; }
  .gb-masthead__inner { padding-block: .9rem .8rem; }
  .gb-logo__name { font-size: 2.2rem; }
  .gb-nav { gap: .1rem 1rem; font-size: .9375rem; }
  .gb-row { grid-template-columns: 96px minmax(0, 1fr); gap: 1rem; padding: 1.2rem 1rem; }
  .gb-row__side { grid-column: 1 / -1; }
  .gb-row__why { grid-column: 1 / -1; }
  .gb-stories__list .gb-story__hit { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .gb-chart { min-width: 40rem; }
  .gb-shoptable { min-width: 0; }
  .gb-shoptable tbody th { font-size: 1.1rem; }
  .gb-shoptable td .gb-ticket { white-space: nowrap; }
  .gb-chart tbody th, .gb-chart thead .gb-chart__corner { width: 6.5rem; min-width: 6.5rem; padding-inline: .6rem; font-size: .8125rem; }
  .gb-chart th, .gb-chart td { padding: .7rem .75rem; font-size: .9375rem; }
  .gb-steps { grid-template-columns: minmax(0, 1fr); }
  .gb-proscons { grid-template-columns: minmax(0, 1fr); }
  .gb-coupon { padding: 1.4rem 1rem 1.1rem; transform: none; }
  .gb-form__send { flex: 1 1 100%; }
  .gb-cover__feature { --gb-tilt: .7deg; }
  .gb-cover__cap { width: auto; margin: -1.2rem .4rem 0 -.4rem; }
  .gb-game__head .gb-circled { margin-right: 0; margin-left: .5rem; }
  .gb-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .gb-taped::before { left: -.8rem; width: 5.5rem; }
  .gb-taped::after { right: -.8rem; width: 5.5rem; }
}
@media (max-width: 380px) {
  .gb-nav { justify-content: space-between; width: 100%; }
  .gb-ticket { font-size: .875rem; padding-inline: 1.2rem .8rem; }
}