/* ==========================================================================
   orvynhalvrblaze.com — cut-paper editorial design system
   Palette, type and shapes taken from the Figma page "orvynhalvrblaze.com".
   ========================================================================== */

/* --- tokens ------------------------------------------------------------- */
:root {
  --saffron: #efa81e;
  --paper: #f1efe9;
  --paper-dim: #e0dcd1;
  --ink: #171513;
  --cobalt: #2a48a0;
  --cobalt-deep: #1e3677;
  --vermilion: #d5432a;
  --muted: #4a4640;

  --rule-light: rgba(241, 239, 233, 0.3);
  --rule-light-soft: rgba(241, 239, 233, 0.28);
  --rule-dark: rgba(23, 21, 19, 0.3);

  --display: "Londrina Solid", "Arial Black", sans-serif;
  --text: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* 72px gutter on the 1368 desktop frame, 16px on the 360 mobile frame */
  --gut: clamp(16px, 5.26vw, 72px);
  --page: 1368px;

  /* hand-cut paper edges: constant pixel jitter at any element size */
  --cut-1: polygon(2px 3px, 52% 0, calc(100% - 2px) 2px, 100% 47%, calc(100% - 1px) calc(100% - 1px), 48% 100%, 1px calc(100% - 2px), 0 46%);
  --cut-2: polygon(1px 4px, 50% 0, calc(100% - 1px) 2px, 100% 53%, calc(100% - 2px) calc(100% - 2px), 49% 100%, 2px calc(100% - 1px), 0 52%);
  --cut-3: polygon(0 2px, 54% 0, calc(100% - 1px) 1px, 100% 49%, calc(100% - 3px) calc(100% - 1px), 47% 100%, 1px calc(100% - 1px), 0 50%);

  --shadow-s: 2px 3px 0 rgba(23, 20, 18, 0.25);
  --shadow-m: 3px 4px 0 rgba(23, 20, 18, 0.3);
  --shadow-l: 6px 8px 0 rgba(23, 20, 18, 0.3);
  --shadow-cover: 7px 8px 0 rgba(23, 20, 18, 0.3);
  --shadow-cover-hi: 12px 14px 0 rgba(23, 20, 18, 0.32);
}

/* --- reset -------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--saffron);
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--vermilion);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* --- cut-paper shapes (exported Figma geometry, recoloured with CSS) ----- */
.sh {
  display: inline-block;
  flex: none;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: var(--m);
  mask-image: var(--m);
}

.sh--circle  { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M100 49.6L95.9 63.3L91.8 76.9L81.9 87.2L69.6 94L56.4 99.1L42.4 97.9L29.1 93.8L16.5 87.5L8.5 75.9L2.6 63.3L0 49.6L1.3 35.5L7.2 22.6L17.4 12.8L28.7 4.3L42.3 0.9L56.3 0.9L69.5 5.4L81.7 12.4L90.9 22.9L97.1 35.6L100 49.6Z'/></svg>"); }
.sh--circle2 { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M99.5 49.8L97.7 63.7L92.9 77.2L82.7 86.8L71.3 95.5L57.5 98.5L43.4 100L29.6 95.5L17.6 87.7L8 77.2L2.3 64L0.5 49.8L2.9 35.7L9.2 23.1L17.9 12L30.2 5.4L43.4 0.3L57.8 0L71 5.4L82.7 12.9L92.6 22.8L97.4 36L99.5 49.8Z'/></svg>"); }
.sh--circle3 { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M100 50.2L98.1 64.1L90.7 76.6L82.9 88.2L70.2 94.8L57 99.4L43 99L29.5 95.2L17.1 88.2L7.8 77.3L2.3 64.1L0 50.2L2.3 36.2L8.9 23.8L17.1 12.2L29.8 6L43 0.6L57 1L70.9 4.8L82.6 12.6L91.5 23.4L98.4 35.9L100 50.2Z'/></svg>"); }

.sh--square  { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M3.1 2.2L52.5 0L99.3 3L99.9 49.1L98.8 99L51.7 100L3.6 98.6L0.1 47.1L3.1 2.2Z'/></svg>"); }
.sh--square2 { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M1.7 4.9L50.6 0L98.4 2L99.2 53.4L97.8 97.6L48.6 100L2.8 98.2L0.8 53.7L1.7 4.9Z'/></svg>"); }
.sh--square3 { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M0.6 2.4L53.9 0.3L99.1 0L100 48.8L96.4 99.1L47 100L0.9 99.1L0 50L0.6 2.4Z'/></svg>"); }

.sh--triangle  { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M49.8 1.1L76.3 49.8L100 97.9L48.6 96.2L0 98.9L26 50.1L49.8 1.1Z'/></svg>"); }
.sh--triangle2 { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M48.9 1.1L78.2 48.6L100 97.9L50 96.2L0 98.9L24.9 50.6L48.9 1.1Z'/></svg>"); }
.sh--triangle3 { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M49.4 1.2L78.8 51.2L100 97.8L49.7 95.9L0 98.8L24.7 48.1L49.4 1.2Z'/></svg>"); }

.sh--arch  { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M0 73.4L50.8 73.3L100 73.4L97.8 62.7L92 51.3L84.1 41.4L74.3 33.4L62.9 27.3L50 26.6L37.2 27.8L25.8 33.5L14.8 40.4L8.1 51.3L2.6 62.8L0 73.4Z'/></svg>"); }
.sh--arch2 { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M0 73.1L50.9 72.5L100 73.1L97.5 62.5L91.6 50.9L85 40.3L75 31.9L62.5 28.4L50 26.9L37.5 28.8L25.6 32.8L14.7 40L8.1 50.9L3.4 62.5L0 73.1Z'/></svg>"); }
.sh--arch3 { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M0 73.4L48.4 73.4L100 73.4L97.5 63.1L92.2 51.2L84.4 41L74.2 34L62.7 27.9L50 26.6L37.3 28.3L25.4 33.2L15.6 41.4L7.4 51.2L3.7 63.1L0 73.4Z'/></svg>"); }

.sh--bolt  { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M54.7 0L12.3 57L44.1 55.8L27.5 100L87.7 39.5L54.8 38.1L74.2 0.1L54.7 0Z'/></svg>"); }
.sh--bolt2 { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M55.4 0.6L13.3 54.8L42.5 57.2L26.5 100L86.7 41L54.8 37L74.1 0L55.4 0.6Z'/></svg>"); }
.sh--bolt3 { --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M58.9 0L12.3 54.9L44.6 54.9L26.7 100L87.7 41.2L56.6 40.9L74.1 2.7L58.9 0Z'/></svg>"); }

/* shape colours */
.sh--ink { color: var(--ink); }
.sh--paper { color: var(--paper); }
.sh--saffron { color: var(--saffron); }
.sh--cobalt { color: var(--cobalt); }
.sh--vermilion { color: var(--vermilion); }

/* genre → shape colour, used across the whole site */
.g-arcade { color: var(--vermilion); }
.g-sports { color: var(--cobalt); }
.g-puzzle { color: var(--ink); }
.g-action { color: var(--vermilion); }
.g-adventure { color: var(--cobalt); }

/* --- cut-paper surface -------------------------------------------------- */
.paper-cut,
.index__link {
  position: relative;
  isolation: isolate;
}
.paper-cut > *,
.index__link > * { position: relative; }
.paper-cut::before,
.index__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--sheet, var(--paper));
  clip-path: var(--cut-1);
  filter: drop-shadow(var(--sheet-shadow, var(--shadow-m)));
}
.paper-cut--2::before { clip-path: var(--cut-2); }
.paper-cut--3::before { clip-path: var(--cut-3); }

/* --- layout ------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.sec { position: relative; overflow: hidden; }
.sec--saffron { background: var(--saffron); }
.sec--paper { background: var(--paper); }
.sec--cobalt { background: var(--cobalt); color: var(--paper); }
.sec--ink { background: var(--ink); color: var(--paper); }

.sec-pad { padding-block: 88px 100px; }
.sec-pad-sm { padding-block: 80px 88px; }

/* --- typography --------------------------------------------------------- */
.d1, .d2, .d3, .d4 {
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: 0;
}
.d1 { font-size: 74px; line-height: 0.92; }
.d2 { font-size: 72px; line-height: 0.94; }
.d3 { font-size: 44px; line-height: 0.94; }
.d4 { font-size: 34px; line-height: 1; }

.lead { font-size: 22px; line-height: 1.55; font-weight: 500; }
.intro { font-size: 20px; line-height: 1.5; font-weight: 500; }
.body { font-size: 19px; line-height: 1.5; font-weight: 500; }
.copy { font-size: 17px; line-height: 1.5; }
.note { font-size: 15px; line-height: 1.5; font-weight: 500; color: var(--muted); }

.kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.5;
}
.kicker--sm { font-size: 12px; letter-spacing: 0.08em; }

/* underlined editorial link */
.ulink {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.ulink:hover { color: var(--vermilion); }
.sec--cobalt .ulink:hover,
.sec--ink .ulink:hover { color: var(--saffron); }

/* --- buttons ------------------------------------------------------------ */
.btn {
  --sheet: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 24px;
  color: var(--paper);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition: transform 0.18s ease;
}
.btn:hover { transform: translate(-1px, -2px); }
.btn:active { transform: translate(1px, 1px); }
.btn--block { display: flex; width: 100%; }
.btn--vermilion { --sheet: var(--vermilion); }

/* dark ink strip label */
.strip {
  --sheet: var(--ink);
  --sheet-shadow: var(--shadow-s);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  color: var(--paper);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* --- header / index ----------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 130;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--page);
  margin-inline: auto;
  padding: 22px var(--gut) 20px;
}

.logo {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.logo__mark { width: 58px; height: 58px; flex: none; }
.logo__word {
  font-family: var(--display);
  font-weight: 900;
  font-size: 34px;
  line-height: 0.96;
  color: var(--ink);
}

/* --- burger + menu sheet (the only navigation, at every width) ---------- */
.burger {
  --sheet: var(--ink);
  --sheet-shadow: var(--shadow-s);
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  color: var(--paper);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}
.burger__bars { display: grid; gap: 4px; width: 22px; }
.burger__bars i {
  display: block;
  height: 3px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.15s ease, width 0.2s ease;
}
/* slightly uneven, like the rest of the cut paper */
.burger__bars i:nth-child(1) { width: 100%; }
.burger__bars i:nth-child(2) { width: 80%; }
.burger__bars i:nth-child(3) { width: 92%; }

.site-header.is-open .burger { --sheet: var(--paper); color: var(--ink); }
.site-header.is-open .burger__bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.is-open .burger__bars i:nth-child(2) { opacity: 0; }
.site-header.is-open .burger__bars i:nth-child(3) { width: 100%; transform: translateY(-7px) rotate(-45deg); }
.site-header.is-open .logo__word { color: var(--paper); }

.index {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(18px, 2.4vw, 36px);
  padding: clamp(96px, 13vh, 150px) var(--gut) clamp(56px, 8vh, 96px);
  overflow-y: auto;
  background: var(--ink);
  color: var(--paper);
  opacity: 0;
  visibility: hidden;
  /* visible flips instantly on open and only hides after the fade-out,
     so the sheet is focusable the moment it is opened */
  transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}
/* the links line up with the logo and the page grid */
.index__label,
.index__list {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
}
.index__label { color: var(--saffron); letter-spacing: 0.12em; }
.index__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.index__link {
  --sheet: transparent;
  --sheet-shadow: 0 0 0 rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 24px);
  padding: 6px clamp(16px, 1.6vw, 24px) 10px clamp(12px, 1.2vw, 18px);
  color: var(--paper);
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(36px, 7vw, 84px);
  line-height: 1;
  text-decoration: none;
}
.index__link .sh {
  width: clamp(22px, 4.2vw, 48px);
  height: clamp(22px, 4.2vw, 48px);
  color: var(--saffron);
}
.index__link:hover,
.index__link:focus-visible {
  --sheet: var(--vermilion);
  --sheet-shadow: var(--shadow-s);
  color: var(--paper);
}
/* the ring has to read against the vermilion sheet it sits on */
.index__link:focus-visible { outline-color: var(--paper); }
.index__link[aria-current="page"] {
  --sheet: var(--cobalt);
  --sheet-shadow: var(--shadow-s);
}
.index__link:hover .sh,
.index__link:focus-visible .sh,
.index__link[aria-current="page"] .sh { color: var(--paper); }

/* two cut shapes so the sheet belongs to the same world */
.index::before,
.index::after {
  content: "";
  position: absolute;
  pointer-events: none;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: var(--m);
  mask-image: var(--m);
}
.index::before {
  top: clamp(110px, 17vh, 250px);
  right: clamp(-72px, -4.5vw, -44px);
  width: clamp(170px, 15vw, 260px);
  height: clamp(170px, 15vw, 260px);
  background-color: var(--cobalt);
  transform: rotate(-9deg);
  --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M1.7 4.9L50.6 0L98.4 2L99.2 53.4L97.8 97.6L48.6 100L2.8 98.2L0.8 53.7L1.7 4.9Z'/></svg>");
}
.index::after {
  bottom: clamp(-130px, -9vw, -70px);
  left: clamp(-130px, -9vw, -70px);
  width: clamp(200px, 19vw, 320px);
  height: clamp(200px, 19vw, 320px);
  background-color: var(--vermilion);
  --m: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M100 49.6L95.9 63.3L91.8 76.9L81.9 87.2L69.6 94L56.4 99.1L42.4 97.9L29.1 93.8L16.5 87.5L8.5 75.9L2.6 63.3L0 49.6L1.3 35.5L7.2 22.6L17.4 12.8L28.7 4.3L42.3 0.9L56.3 0.9L69.5 5.4L81.7 12.4L90.9 22.9L97.1 35.6L100 49.6Z'/></svg>");
}

body.nav-open { overflow: hidden; }
body.nav-open .index { opacity: 1; visibility: visible; transition-delay: 0s; }

/* --- hero --------------------------------------------------------------- */
.hero {
  /* left edge of the 1368 design frame, centred on wider screens */
  --fx: max(0px, calc(50% - 684px));
  position: relative;
  overflow: hidden;
  min-height: 1020px;
  background: var(--saffron);
}

.titles { position: absolute; inset: 0; pointer-events: none; }

.titleline {
  /* the rotated band spans the viewport, so the tilt stays put while the
     runs slide inside it (rotating the whole 5000px run makes it drift) */
  position: absolute;
  left: -8vw;
  right: -8vw;
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--display);
  font-weight: 900;
  font-size: 126px;
  line-height: 1;
  letter-spacing: -0.01em;
  will-change: transform;
}
.titleline--1 {
  top: -3px;
  color: var(--ink);
  transform: rotate(1.2deg);
}
.titleline--2 {
  --sheet: var(--ink);
  --sheet-shadow: var(--shadow-l);
  top: 186px;
  padding: 25px 36px;
  color: var(--paper);
  font-size: 118px;
  transform: rotate(-1.4deg);
}
.titleline .sh { width: 78px; height: 78px; filter: drop-shadow(var(--shadow-m)); }
.titleline--2 .sh { width: 73px; height: 73px; }

.titleline__run {
  flex: none;
  display: flex;
  align-items: center;
  gap: 30px;
  padding-right: 30px;
  will-change: transform;
}
.titleline--2 .titleline__run { gap: 28px; padding-right: 28px; }

/* the opening titles roll in opposite directions */
.titleline--1 .titleline__run { animation: roll-right 46s linear infinite; }
.titleline--2 .titleline__run { animation: roll-left 40s linear infinite; }
.hero:hover .titleline__run,
.hero:focus-within .titleline__run { animation-play-state: paused; }

@keyframes roll-left {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
@keyframes roll-right {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.hero__card {
  --sheet: var(--paper);
  --sheet-shadow: var(--shadow-l);
  position: relative;
  z-index: 3;
  width: min(860px, 100%);
  margin-top: 372px;
  padding: 52px 190px 50px 60px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  transform: rotate(1.2deg);
}
.hero__card .d1 { max-width: 614px; }
.hero__card .intro, .hero__card .note { max-width: 592px; }
.hero__links { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }

.hero__hand {
  position: absolute;
  left: calc(var(--fx) + 700px);
  top: 520px;
  width: 780px;
  z-index: 4;
  pointer-events: none;
}

.hero__shape { position: absolute; z-index: 1; filter: drop-shadow(var(--shadow-m)); }
.hero__shape--a { left: calc(var(--fx) + 1030px); top: 850px; width: 250px; height: 250px; }
.hero__shape--b { left: calc(var(--fx) + 1236px); top: 880px; width: 128px; height: 128px; transform: rotate(-9deg); }
.hero__shape--c { left: calc(var(--fx) + 1136px); top: 365px; width: 150px; height: 150px; transform: rotate(9deg); }
.hero__shape--d { left: calc(var(--fx) + 965px); top: 367px; width: 96px; height: 96px; transform: rotate(-6deg); }

/* --- section heads ------------------------------------------------------ */
.head-split {
  display: flex;
  align-items: flex-end;
  gap: 60px;
  flex-wrap: wrap;
}
.head-split .d2 { flex: 1 1 560px; max-width: 760px; }
.head-split__aside { width: 420px; max-width: 100%; display: flex; flex-direction: column; gap: 12px; }

/* genre key */
.genre-key { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.genre { display: inline-flex; align-items: center; gap: 8px; }
.genre .sh { width: 16px; height: 16px; }
.genre__name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

/* --- title cards -------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 72px 52px;
}

.card { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.card__cover {
  display: block;
  width: 100%;
  aspect-ratio: 373 / 301;
  overflow: visible;
}
.card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: rotate(var(--tilt, 1.2deg));
  filter: drop-shadow(var(--shadow-cover));
  transition: transform 0.25s ease, filter 0.25s ease;
}
.card__genre { display: inline-flex; align-items: center; gap: 8px; }
.card__genre .sh { width: 18px; height: 18px; }
.card__genre span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.card__title {
  text-decoration: none;
  --sheet: transparent;
  --sheet-shadow: 0 0 0 rgba(0, 0, 0, 0);
  display: inline-block;
  padding: 2px 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: 44px;
  line-height: 0.94;
  transition: color 0.2s ease, padding 0.2s ease;
}
.card__desc { font-size: 17px; line-height: 1.5; }
.card__more {
  font-size: 17px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* hover / focus: the cover straightens and lifts,
   a vermilion strip slides under the title */
.card:hover .card__img,
.card:focus-within .card__img {
  transform: rotate(0deg) translate(-4px, -6px);
  filter: drop-shadow(var(--shadow-cover-hi));
}
.card:hover .card__title,
.card:focus-within .card__title {
  --sheet: var(--vermilion);
  --sheet-shadow: var(--shadow-s);
  padding: 2px 14px;
  color: var(--paper);
}

/* --- marquee ------------------------------------------------------------ */
.marquee {
  position: relative;
  height: 132px;
  overflow: hidden;
  background: var(--paper);
}
.marquee__strip {
  --sheet: var(--ink);
  --sheet-shadow: var(--shadow-l);
  position: absolute;
  top: 22px;
  left: -6vw;
  right: -6vw;
  display: flex;
  padding: 20px 40px;
  transform: rotate(1.4deg);
}
.marquee__run {
  flex: none;
  display: flex;
  align-items: center;
  gap: 30px;
  padding-right: 30px;
  white-space: nowrap;
  color: var(--paper);
  font-family: var(--display);
  font-weight: 900;
  font-size: 44px;
  line-height: 1;
  animation: marquee-slide 38s linear infinite;
}
.marquee__run .sh { width: 26px; height: 26px; }
.marquee:hover .marquee__run,
.marquee:focus-within .marquee__run { animation-play-state: paused; }

@keyframes marquee-slide {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

/* --- about strip -------------------------------------------------------- */
.about-split {
  display: flex;
  align-items: center;
  gap: 96px;
  flex-wrap: wrap;
}
.crew {
  position: relative;
  width: 380px;
  height: 300px;
  flex: none;
}
.crew .sh { position: absolute; filter: drop-shadow(var(--shadow-m)); }
.crew__a { left: 10px; top: 40px; width: 230px; height: 230px; }
.crew__b { left: 190px; top: -11px; width: 150px; height: 150px; transform: rotate(-8deg); }
.crew__c { left: 185px; top: 150px; width: 140px; height: 140px; transform: rotate(6deg); }
.about-split__text { flex: 1 1 520px; display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.about-split__text .lead { max-width: 700px; }

/* --- glossary ----------------------------------------------------------- */
.terms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px 40px;
}
.term { display: flex; gap: 20px; align-items: flex-start; }
.term .sh { width: 34px; height: 34px; margin-top: 2px; filter: drop-shadow(var(--shadow-s)); }
.term__body { display: flex; flex-direction: column; gap: 4px; }

/* --- contact band ------------------------------------------------------- */
.contact-band {
  display: flex;
  align-items: center;
  gap: 80px;
  flex-wrap: wrap;
}
.contact-band__text { width: 620px; max-width: 100%; display: flex; flex-direction: column; gap: 14px; }
.contact-band__text .d2 { font-size: 60px; }
.contact-band__side { flex: 1 1 320px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }

.mailtag {
  --sheet: var(--ink);
  --sheet-shadow: var(--shadow-m);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: clamp(11px, 1.2vw, 17px) clamp(15px, 1.7vw, 24px);
  color: var(--paper);
  font-family: var(--display);
  font-weight: 900;
  /* fluid: the address is long, and it must not run past the page */
  font-size: clamp(19px, 2.1vw, 30px);
  line-height: 1;
  text-decoration: none;
  overflow-wrap: anywhere;
  transform: rotate(2deg);
  transition: transform 0.2s ease;
}
.mailtag:hover { transform: rotate(0deg) translateY(-2px); }

.phonetag {
  --sheet: var(--cobalt);
  --sheet-shadow: var(--shadow-s);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: clamp(10px, 1vw, 14px) clamp(14px, 1.5vw, 22px);
  color: var(--paper);
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(18px, 1.8vw, 26px);
  line-height: 1;
  text-decoration: none;
  transform: rotate(-3deg);
  transition: transform 0.2s ease;
}
.phonetag:hover { transform: rotate(0deg) translateY(-2px); }

/* --- FAQ ---------------------------------------------------------------- */
.faq-split { display: flex; gap: 80px; align-items: flex-start; flex-wrap: wrap; }
.faq-split__aside { width: 420px; max-width: 100%; display: flex; flex-direction: column; gap: 24px; }
.faq-shapes { position: relative; width: 300px; height: 180px; }
.faq-shapes .sh { position: absolute; filter: drop-shadow(var(--shadow-m)); }
.faq-shapes__a { left: 0; top: 0; width: 170px; height: 170px; }
.faq-shapes__b { left: 150px; top: 51px; width: 90px; height: 90px; transform: rotate(-12deg); }

.faq { flex: 1 1 520px; min-width: 0; }
.faq__item { border-top: 1.5px solid var(--rule-light); }
.faq__item:last-child { border-bottom: 1.5px solid var(--rule-light); }

.faq__q {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 22px 0;
  text-align: left;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--paper);
}
.faq__q span { flex: 1; }

.faq__mark {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--ink);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
}
.faq__mark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--saffron);
  -webkit-mask: var(--m-circle) no-repeat center / contain;
  mask: var(--m-circle) no-repeat center / contain;
}
.faq__mark {
  --m-circle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M100 49.6L95.9 63.3L91.8 76.9L81.9 87.2L69.6 94L56.4 99.1L42.4 97.9L29.1 93.8L16.5 87.5L8.5 75.9L2.6 63.3L0 49.6L1.3 35.5L7.2 22.6L17.4 12.8L28.7 4.3L42.3 0.9L56.3 0.9L69.5 5.4L81.7 12.4L90.9 22.9L97.1 35.6L100 49.6Z'/></svg>");
  --m-square: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M3.1 2.2L52.5 0L99.3 3L99.9 49.1L98.8 99L51.7 100L3.6 98.6L0.1 47.1L3.1 2.2Z'/></svg>");
  isolation: isolate;
}
.faq__q[aria-expanded="true"] .faq__mark {
  color: var(--paper);
  transform: rotate(-6deg);
}
.faq__q[aria-expanded="true"] .faq__mark::before {
  background-color: var(--vermilion);
  -webkit-mask-image: var(--m-square);
  mask-image: var(--m-square);
}
.faq__mark i { font-style: normal; }
.faq__q[aria-expanded="true"] .faq__mark i::before { content: "–"; }
.faq__q[aria-expanded="false"] .faq__mark i::before { content: "+"; }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p {
  max-width: 660px;
  padding-bottom: 22px;
  font-size: 18px;
  line-height: 1.55;
}

/* --- footer ------------------------------------------------------------- */
.site-footer { display: flex; background: var(--paper); flex-wrap: wrap; }

.footer-contact {
  width: 560px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 56px 56px 56px var(--gut);
  background: var(--cobalt);
  color: var(--paper);
}
.footer-contact .logo__word { color: var(--paper); }
.footer-contact .logo__mark { width: 44px; height: 44px; }
.footer-contact__blurb { font-size: 18px; font-weight: 500; }

.facts { display: flex; flex-direction: column; }
.fact {
  display: flex;
  gap: 14px;
  padding-block: 9px;
  font-weight: 700;
  border-top: 1.5px solid var(--rule-light-soft);
}
.fact:first-child { border-top: 0; }
.fact__k {
  width: 110px;
  flex: none;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fact__v { flex: 1; min-width: 0; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.fact__v a { text-decoration: underline; text-underline-offset: 3px; }
.fact__v a:hover { color: var(--saffron); }
.facts--ink .fact__v a:hover { color: var(--vermilion); }

.socials { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; font-weight: 700; }
.socials a { text-decoration: underline; text-underline-offset: 3px; }

.footer-links {
  flex: 1 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: 56px var(--gut) 44px 64px;
}
.footer-cols { display: flex; gap: 56px; }
.footer-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-col__h {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.footer-col ul { display: flex; flex-direction: column; gap: 8px; }
.footer-col a {
  font-size: 16px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-col a:hover { color: var(--vermilion); }

.billing {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 16px;
  font-size: 14px;
  border-top: 1.5px solid var(--rule-dark);
}
.billing__legal { font-weight: 700; }
.billing__disclaimer { color: var(--muted); }

/* --- cookie notice ------------------------------------------------------ */
.cookie {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 120;
  width: min(472px, calc(100vw - 28px));
}
.cookie[hidden] { display: none; }
.cookie__box {
  --sheet: var(--paper);
  --sheet-shadow: var(--shadow-l);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px 32px;
}
.cookie__head { display: flex; align-items: center; gap: 14px; }
.cookie__head .sh { width: 40px; height: 40px; filter: drop-shadow(var(--shadow-s)); }
.cookie__title {
  font-family: var(--display);
  font-weight: 900;
  font-size: 34px;
  line-height: 0.96;
}
.cookie__text { font-size: 16px; line-height: 1.5; }
.cookie__actions { display: flex; gap: 12px; }
.cookie__actions .btn { flex: 1 1 0; min-width: 0; padding: 11px 16px; font-size: 16px; }
.cookie__more { font-size: 15px; }

/* --- reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__run,
  .titleline { animation: none !important; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* --- tablet ------------------------------------------------------------- */
@media (max-width: 1200px) {
  .hero { min-height: 0; padding-bottom: 60px; }
  .hero__card { margin-left: 0; margin-top: 300px; padding-right: 60px; }
  .hero__hand { left: auto; right: -80px; top: auto; bottom: 40px; width: 520px; }
  .hero__shape--a, .hero__shape--b, .hero__shape--c, .hero__shape--d { display: none; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 40px; }
  .d1 { font-size: 56px; }
  .d2 { font-size: 54px; }
  .contact-band__text .d2 { font-size: 48px; }
  .titleline { font-size: 90px; }
  .titleline--2 { font-size: 84px; top: 140px; padding-block: 18px; }
  .titleline .sh { width: 56px; height: 56px; }
  .titleline--2 .sh { width: 52px; height: 52px; }
  .footer-contact { width: 100%; padding-right: var(--gut); }
  .footer-links { padding-left: var(--gut); }
}

/* --- mobile ------------------------------------------------------------- */
@media (max-width: 900px) {
  body { font-size: 16px; }

  .sec-pad { padding-block: 44px 48px; }
  .sec-pad-sm { padding-block: 40px 44px; }

  .site-header { padding-block: 12px; }
  .logo { gap: 10px; }
  .logo__mark { width: 38px; height: 38px; }
  .logo__word { font-size: 24px; }
  .burger { padding: 10px 14px; font-size: 12px; gap: 8px; }
  .burger__bars { width: 20px; }

  .hero { padding: 0 0 30px; }
  .hero .wrap { padding-inline: 12px; }
  .titles { position: relative; height: 150px; }
  .titleline { font-size: 46px; gap: 12px; letter-spacing: -0.01em; }
  .titleline--1 { top: 0; transform: rotate(2.5deg); }
  .titleline--2 {
    top: 58px;
    font-size: 44px;
    padding: 12px 20px;
    transform: rotate(-2deg);
  }
  .titleline__run { gap: 12px; }
  .titleline--2 .titleline__run { gap: 10px; }
  .titleline .sh { width: 29px; height: 29px; }
  .titleline--2 .sh { width: 27px; height: 27px; }

  .hero__card {
    width: 100%;
    margin: 0;
    padding: 56px 20px 26px;
    gap: 16px;
    transform: none;
  }
  .hero__card .d1 { font-size: 42px; max-width: none; }
  .hero__card .intro { font-size: 16px; max-width: none; }
  .hero__card .note { font-size: 14px; max-width: none; }
  .hero__links { flex-direction: column; align-items: stretch; gap: 16px; }
  .hero__links .btn { width: 100%; padding: 11px 16px; font-size: 16px; }
  .hero__links .ulink { font-size: 16px; }
  .hero__hand {
    left: auto; right: -110px; top: 128px; bottom: auto;
    width: 270px;
  }
  .hero__shape--a, .hero__shape--c { display: block; }
  .hero__shape--b, .hero__shape--d { display: none; }
  .hero__shape--a { left: auto; right: 34px; top: auto; bottom: -22px; width: 90px; height: 90px; }
  .hero__shape--c { left: auto; right: 143px; top: auto; bottom: 4px; width: 56px; height: 56px; }

  .d1 { font-size: 42px; }
  .d2 { font-size: 34px; }
  .d3 { font-size: 30px; }
  .d4 { font-size: 26px; }
  .lead { font-size: 17px; }
  .intro { font-size: 16px; }
  .body { font-size: 16px; }
  .copy { font-size: 15px; }

  .head-split { gap: 18px; }
  .head-split .d2 { flex-basis: 100%; }
  .head-split__aside { width: 100%; }

  .cards { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .card__title { font-size: 30px; }
  .card__desc { font-size: 15px; }
  .card__more { font-size: 15px; }

  .marquee { height: 84px; }
  .marquee__strip { top: 10px; padding: 12px 24px; }
  .marquee__run { font-size: 28px; gap: 18px; padding-right: 18px; }
  .marquee__run .sh { width: 18px; height: 18px; }

  .about-split { gap: 24px; }
  .crew { width: 100%; height: 200px; }
  .crew__a { left: 0; top: 24px; width: 150px; height: 150px; }
  .crew__b { left: 120px; top: 0; width: 100px; height: 100px; }
  .crew__c { left: 118px; top: 96px; width: 92px; height: 92px; }

  .terms { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .term .sh { width: 26px; height: 26px; }

  .contact-band { gap: 24px; }
  .contact-band__text { width: 100%; }
  .contact-band__text .d2 { font-size: 32px; }

  .faq-split { gap: 24px; }
  .faq-split__aside { width: 100%; gap: 16px; }
  .faq-shapes { width: 100%; height: 120px; }
  .faq-shapes__a { width: 110px; height: 110px; }
  .faq-shapes__b { left: 96px; top: 34px; width: 62px; height: 62px; }
  .faq__q { font-size: 17px; padding: 16px 0; gap: 12px; }
  .faq__mark { width: 28px; height: 28px; font-size: 18px; }
  .faq__a p { font-size: 15px; padding-bottom: 16px; }

  .site-footer { flex-direction: column; }
  .footer-contact { width: 100%; padding: 32px var(--gut); gap: 14px; }
  .footer-contact .logo__mark { width: 36px; height: 36px; }
  .footer-contact .logo__word { font-size: 24px; }
  .footer-contact__blurb { font-size: 16px; }
  .footer-links { padding: 32px var(--gut) 28px; gap: 24px; }
  .footer-cols { flex-direction: column; gap: 20px; }
  .footer-col ul { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; }

  .cookie { left: 9px; right: 9px; bottom: 9px; width: auto; }
  .cookie__box { padding: 22px 20px; gap: 12px; }
  .cookie__title { font-size: 26px; }
  .cookie__head .sh { width: 32px; height: 32px; }
  .cookie__actions { flex-direction: column; }
}

/* ==========================================================================
   Inner pages
   ========================================================================== */

/* --- page head ---------------------------------------------------------- */
.pagehead { background: var(--saffron); }
.pagehead__inner {
  display: flex;
  align-items: center;
  gap: 48px;
  padding-block: 36px 72px;
}
.pagehead__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.pagehead--tight .pagehead__inner { padding-block: 36px 52px; }

.d0 { font-family: var(--display); font-weight: 900; font-size: 104px; line-height: 0.92; }
.pagehead__text .d0 { max-width: 860px; }
.pagehead__text .intro { font-size: 21px; max-width: 720px; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  font-size: 15px;
  line-height: 1.5;
}
.breadcrumb a { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb [aria-current] { font-weight: 700; }
.breadcrumb__sep { color: var(--muted); }

.headmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.headmeta .strip { font-size: 13px; padding: 7px 12px; }
.headmeta__note { font-size: 15px; font-weight: 500; }

/* big genre key on the games page */
.genre-key-big { width: 300px; flex: none; display: flex; flex-direction: column; gap: 12px; }
.genre-key-big__list { display: flex; flex-direction: column; gap: 12px; }
.genre-key-big__h {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.genre-big { display: flex; align-items: center; gap: 14px; }
.genre-big .sh { width: 40px; height: 40px; filter: drop-shadow(var(--shadow-s)); }
.genre-big span { font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 0.96; }

/* --- pressbook spreads -------------------------------------------------- */
.spreads { display: flex; flex-direction: column; gap: 72px; padding-block: 64px 100px; }

.spread { display: flex; flex-direction: column; gap: 18px; }
.spread__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.spread__head .sh { width: 38px; height: 38px; filter: drop-shadow(var(--shadow-s)); }
.spread__head h2 { font-family: var(--display); font-weight: 900; font-size: 52px; line-height: 0.96; }
.spread__head p { flex: 1 1 320px; min-width: 0; font-size: 15px; font-weight: 500; line-height: 1.45; }

.spread__sheet {
  display: flex;
  align-items: stretch;
  filter: drop-shadow(10px 12px 0 rgba(23, 20, 18, 0.3));
}

.leaf {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: 40px 44px 36px;
  background: var(--paper);
}
.leaf__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; }
.leaf__folio { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.leaf__cover { display: block; width: 100%; }
.leaf__cover img {
  width: 100%;
  aspect-ratio: 515 / 300;
  object-fit: cover;
  transform: rotate(var(--tilt, 0.8deg));
  filter: drop-shadow(var(--shadow-cover));
  transition: transform 0.25s ease, filter 0.25s ease;
}
.leaf__cover:hover img,
.leaf__cover:focus-visible img {
  transform: rotate(0deg) translate(-3px, -5px);
  filter: drop-shadow(var(--shadow-cover-hi));
}
.leaf__title { font-family: var(--display); font-weight: 900; font-size: 54px; line-height: 0.94; }
.leaf__title a { text-decoration: none; }
.leaf__title a:hover { color: var(--vermilion); }
.leaf__desc { font-size: 18px; font-weight: 500; line-height: 1.5; }

.fold {
  flex: none;
  width: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-dim);
}
.fold::before { content: ""; width: 2px; height: 100%; background: rgba(23, 21, 19, 0.25); }

/* facts table on paper */
.facts--ink { width: 100%; color: var(--ink); }
.facts--ink .fact { border-top-color: rgba(23, 21, 19, 0.28); }
.facts--ink .fact__v { font-weight: 500; }

.btn--sm { padding: 13px 22px; font-size: 16px; }

@media (max-width: 1100px) {
  .d0 { font-size: 68px; }
  .pagehead__inner { flex-direction: column; align-items: flex-start; gap: 28px; }
  .genre-key-big__list { flex-direction: row; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
  .spread__sheet { flex-direction: column; }
  .fold { width: 100%; height: 22px; }
  .fold::before { width: 100%; height: 2px; }
  .leaf__title { font-size: 42px; }
  .spread__head h2 { font-size: 40px; }
}

@media (max-width: 900px) {
  .pagehead__inner { padding-block: 24px 40px; gap: 20px; }
  .d0 { font-size: 40px; }
  .pagehead__text { gap: 14px; }
  .pagehead__text .intro { font-size: 16px; }
  .headmeta__note { font-size: 14px; }
  .genre-big .sh { width: 28px; height: 28px; }
  .genre-big span { font-size: 22px; }
  .spreads { gap: 40px; padding-block: 32px 48px; }
  .spread__head h2 { font-size: 30px; }
  .spread__head .sh { width: 26px; height: 26px; }
  .spread__head p { flex-basis: 100%; }
  .leaf { padding: 24px 20px 28px; gap: 14px; }
  .leaf__title { font-size: 32px; }
  .leaf__desc { font-size: 15px; }
  .fact__k { width: 92px; font-size: 12px; }
  .fact__v { font-size: 14px; }
  .btn--sm { padding: 11px 16px; font-size: 15px; width: 100%; }
}

/* --- page-head decorations ---------------------------------------------- */
.headart { position: relative; flex: none; }
.headart .sh { position: absolute; filter: drop-shadow(var(--shadow-m)); }

.headart--about { width: 360px; height: 320px; }
.headart--about .a { left: 0; top: 60px; width: 220px; height: 220px; }
.headart--about .b { left: 170px; top: -16px; width: 150px; height: 150px; transform: rotate(-10deg); }
.headart--about .c { left: 170px; top: 170px; width: 140px; height: 140px; transform: rotate(8deg); }

.headart--legal { width: 260px; height: 200px; }
.headart--legal .a { left: 19px; top: 10px; width: 170px; height: 170px; transform: rotate(7deg); }
.headart--legal .b { left: 10px; top: 110px; width: 80px; height: 80px; }

.headart--contact {
  width: 420px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: 56px 0 8px;
}
.headart--contact .b { left: auto; right: 6px; top: 0; width: 110px; height: 110px; }
.headart--contact .mailtag { transform: rotate(4deg); }

/* --- about page --------------------------------------------------------- */
.about-body { background: var(--paper); padding-block: 24px 96px; }
.about-sec {
  display: flex;
  gap: 64px;
  align-items: flex-start;
  padding-block: 44px 48px;
  border-top: 1.5px solid rgba(23, 21, 19, 0.25);
}
.about-sec:first-child { border-top: 0; }
.about-sec__head { width: 440px; flex: none; display: flex; flex-direction: column; gap: 14px; }
.about-sec__head .sh { width: 40px; height: 40px; filter: drop-shadow(var(--shadow-s)); }
.about-sec__head h2 { font-family: var(--display); font-weight: 900; font-size: 48px; line-height: 0.94; }
.about-sec__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.about-sec__body p { font-size: 19px; line-height: 1.6; }

.crew-cards { display: flex; gap: 18px; width: 100%; }
.crew-card {
  --sheet: var(--paper-dim);
  --sheet-shadow: var(--shadow-s);
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px;
}
.crew-card__name { font-family: var(--display); font-weight: 900; font-size: 28px; line-height: 0.96; }
.crew-card__role { font-size: 15px; font-weight: 700; color: var(--muted); }
.crew-card__note { font-size: 15px; color: var(--muted); }

.how-steps { display: flex; gap: 22px; width: 100%; }
.how-step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.how-step__h { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; }
.how-step__h .sh { width: 22px; height: 22px; }
.how-step p { font-size: 15px; color: var(--muted); line-height: 1.5; }

/* --- contact page ------------------------------------------------------- */
.contact-body { background: var(--paper); padding-block: 80px 100px; }
.contact-grid { display: flex; gap: 80px; align-items: flex-start; }

.panel-cobalt {
  --sheet: var(--cobalt);
  --sheet-shadow: var(--shadow-m);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 40px;
}
.panel-cobalt h2,
.panel-cobalt h3 { font-family: var(--display); font-weight: 900; line-height: 1; font-size: 38px; }

.contact-grid .panel-cobalt { width: 560px; flex: none; }
.contact-grid .fact__k { width: 170px; }
.contact-grid .fact__v { font-size: 17px; }

.contact-help { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 26px; align-items: flex-start; }
.contact-help > h2 { font-family: var(--display); font-weight: 900; font-size: 52px; line-height: 0.94; }
.help-item { display: flex; gap: 16px; align-items: flex-start; width: 100%; }
.help-item .sh { width: 34px; height: 34px; filter: drop-shadow(var(--shadow-s)); }
.help-item h3 { font-family: var(--display); font-weight: 900; font-size: 32px; line-height: 1; }
.help-item p { font-size: 17px; line-height: 1.55; }
.contact-note { font-size: 16px; font-weight: 500; color: var(--muted); }

/* --- legal pages -------------------------------------------------------- */
.legal-body { background: var(--paper); padding-block: 72px 100px; }
.legal-grid { display: flex; gap: 72px; align-items: flex-start; }
.legal-grid .panel-cobalt { width: 320px; flex: none; padding: 30px; gap: 12px; }
.legal-grid .panel-cobalt h2 { font-size: 34px; }
.legal-grid .panel-cobalt p { font-size: 17px; line-height: 1.55; }
.legal-grid .panel-cobalt .ulink { font-size: 14px; }

.doc { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 34px; }
.doc section { display: flex; flex-direction: column; gap: 10px; }
.doc h2 { font-family: var(--display); font-weight: 900; font-size: 34px; line-height: 1; }
.doc p { font-size: 18px; line-height: 1.6; }

/* --- game guide (feature) pages ----------------------------------------- */
body.tone-paper { background: var(--paper); }
.feature-head { background: transparent; }
.feature-head .wrap {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: flex-start;
  padding-block: 28px 56px;
}
.feature-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.feature-meta .genre .sh { width: 22px; height: 22px; }
.feature-meta .genre__name { font-size: 14px; }
.feature-meta__dev { font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.feature-title { font-family: var(--display); font-weight: 900; font-size: 150px; line-height: 0.86; max-width: 1100px; }
.feature-sentence { display: flex; gap: 48px; align-items: flex-start; width: 100%; }
.feature-sentence dt {
  width: 160px;
  flex: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.9;
  text-transform: uppercase;
  color: var(--muted);
}
.feature-sentence dd { margin: 0; font-size: 25px; font-weight: 500; line-height: 1.45; max-width: 860px; }
.byline { font-size: 14px; font-weight: 700; color: var(--muted); }

.feature-break { background: var(--saffron); }
.feature-break .wrap { display: flex; align-items: center; }
.feature-art { position: relative; width: 680px; height: 600px; flex: none; }
.feature-art__cover {
  position: absolute;
  left: 0;
  top: 64px;
  width: 520px;
  height: 460px;
  object-fit: cover;
  transform: rotate(2.5deg);
  filter: drop-shadow(var(--shadow-cover));
}
.feature-art .sh {
  position: absolute;
  left: 420px;
  top: 258px;
  width: 300px;
  height: 300px;
  transform: rotate(-8deg);
  filter: drop-shadow(var(--shadow-m));
}
.pullquote { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 18px; padding-left: 40px; }
.pullquote blockquote { margin: 0; font-family: var(--display); font-weight: 900; font-size: 58px; line-height: 0.98; }
.pullquote cite { font-style: normal; font-size: 16px; font-weight: 700; }

.feature-body { display: flex; gap: 96px; align-items: flex-start; padding-block: 72px 40px; }
.feature-col { width: 780px; flex: none; display: flex; flex-direction: column; gap: 48px; }
.feature-aside { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.gamefacts { --sheet: var(--cobalt); --sheet-shadow: var(--shadow-m); color: var(--paper); display: flex; flex-direction: column; gap: 12px; padding: 34px 38px; }
.gamefacts h2 { font-family: var(--display); font-weight: 900; font-size: 34px; line-height: 1; }
.gamefacts .fact__k { width: 130px; }
.gamefacts .fact__v { font-size: 16px; }
.gamefacts__src { font-size: 14px; font-weight: 500; }

.fsec { display: flex; flex-direction: column; gap: 16px; }
.fsec h2 { font-family: var(--display); font-weight: 900; font-size: 38px; line-height: 1; }
.fsec__lead { font-size: 21px; font-weight: 500; line-height: 1.6; }
.fsec p { font-size: 19px; line-height: 1.6; }

.keys { display: flex; flex-direction: column; gap: 16px; }
.keyrow { display: flex; gap: 18px; align-items: center; padding-block: 4px; }
.keyrow__k { width: 250px; flex: none; }
.keyrow__k .strip { font-size: 14px; padding: 6px 11px; letter-spacing: 0; text-transform: none; }
.keyrow p { flex: 1; min-width: 0; font-size: 18px; font-weight: 500; }

.tips { display: flex; flex-direction: column; gap: 16px; }
.tip { display: flex; gap: 14px; align-items: flex-start; }
.tip .sh { width: 22px; height: 22px; margin-top: 3px; }
.tip p { flex: 1; min-width: 0; font-size: 18px; line-height: 1.55; }

.marginnote { --sheet: var(--paper-dim); --sheet-shadow: var(--shadow-s); display: flex; flex-direction: column; gap: 12px; padding: 26px 28px; }
.marginnote .sh { width: 34px; height: 34px; filter: drop-shadow(var(--shadow-s)); }
.marginnote h2 { font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 1; }
.marginnote p { font-size: 17px; line-height: 1.55; }
.marginnote__checked { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

.marginart { position: relative; width: 300px; height: 190px; }
.marginart .sh { position: absolute; left: 41px; top: 30px; width: 120px; height: 120px; transform: rotate(9deg); filter: drop-shadow(var(--shadow-m)); }
.feature-end { background: var(--paper); }

.feature-who { background: var(--ink); color: var(--paper); }
.feature-who .wrap { display: flex; gap: 80px; align-items: flex-start; padding-block: 80px 84px; }
.feature-who__label {
  width: 200px;
  flex: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 2.2;
  text-transform: uppercase;
  color: var(--saffron);
}
.feature-who p { font-family: var(--display); font-weight: 900; font-size: 56px; line-height: 0.98; max-width: 920px; }

.feature-end { padding-block: 72px 96px; }
.feature-end__col { width: 780px; max-width: 100%; display: flex; flex-direction: column; gap: 48px; }
.catch { display: flex; gap: 12px; align-items: flex-start; }
.catch .sh { width: 20px; height: 20px; margin-top: 3px; }
.catch p { flex: 1; min-width: 0; font-size: 18px; line-height: 1.5; }

.similars { display: flex; gap: 28px; width: 100%; }
.similar { flex: 1 1 0; min-width: 0; display: flex; gap: 16px; align-items: center; text-decoration: none; }
.similar img {
  width: 104px;
  height: 104px;
  flex: none;
  object-fit: cover;
  transform: rotate(var(--tilt, 1.5deg));
  filter: drop-shadow(var(--shadow-m));
  transition: transform 0.2s ease;
}
.similar:hover img { transform: rotate(0deg) translate(-2px, -3px); }
.similar__b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.similar__t { font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 0.96; }
.similar .genre .sh { width: 14px; height: 14px; }
.similar .genre__name { font-size: 12px; }

@media (max-width: 1200px) {
  .feature-title { font-size: 90px; }
  .feature-body { flex-direction: column; gap: 40px; }
  .feature-col { width: 100%; }
  .feature-aside { width: 100%; flex-direction: row; align-items: flex-start; gap: 24px; }
  .marginart { display: none; }
  .feature-break .wrap { flex-direction: column; align-items: flex-start; gap: 24px; padding-block: 40px; }
  .feature-art { width: 100%; max-width: 620px; height: 520px; }
  .pullquote { padding-left: 0; }
  .pullquote blockquote { font-size: 42px; }
  .feature-who p { font-size: 40px; }
  .feature-who .wrap { flex-direction: column; gap: 16px; }
  .feature-who__label { width: auto; line-height: 1.5; }
  .about-sec { flex-direction: column; gap: 22px; }
  .about-sec__head { width: 100%; }
  .contact-grid { flex-direction: column; gap: 40px; }
  .contact-grid .panel-cobalt { width: 100%; }
  .legal-grid { flex-direction: column; gap: 40px; }
  .legal-grid .panel-cobalt { width: 100%; }
  .how-steps { flex-wrap: wrap; }
  .how-step { flex-basis: calc(50% - 11px); }
}

@media (max-width: 900px) {
  .headart--about, .headart--legal { display: none; }
  .headart--contact { width: 100%; gap: 14px; padding: 36px 0 4px; }
  .headart--contact .b { left: auto; right: 6px; width: 64px; height: 64px; }

  .about-body { padding-block: 16px 48px; }
  .about-sec { padding-block: 26px 28px; }
  .about-sec__head h2 { font-size: 30px; }
  .about-sec__body p { font-size: 16px; }
  .crew-cards { flex-direction: column; }
  .how-steps { flex-direction: column; gap: 16px; }
  .how-step { flex-basis: auto; }

  .contact-body { padding-block: 40px 48px; }
  .panel-cobalt { padding: 24px 20px; }
  .panel-cobalt h2, .panel-cobalt h3 { font-size: 28px; }
  /* the long labels and addresses read better stacked on a phone */
  .contact-grid .fact { flex-direction: column; gap: 2px; }
  .contact-grid .fact__k { width: auto; }
  .contact-grid .fact__v { font-size: 15px; }
  .contact-help > h2 { font-size: 32px; }
  .help-item h3 { font-size: 24px; }
  .help-item p { font-size: 15px; }
  .help-item .sh { width: 26px; height: 26px; }

  .legal-body { padding-block: 36px 48px; }
  .doc { gap: 24px; }
  .doc h2 { font-size: 26px; }
  .doc p { font-size: 16px; }

  .feature-head .wrap { padding-block: 18px 32px; gap: 16px; }
  .feature-title { font-size: 46px; }
  .feature-sentence { flex-direction: column; gap: 8px; }
  .feature-sentence dt { width: auto; line-height: 1.5; }
  .feature-sentence dd { font-size: 18px; }
  .byline { font-size: 13px; }

  .feature-break .wrap { padding-block: 24px 32px; }
  .feature-art { height: auto; aspect-ratio: 520 / 460; max-width: 100%; }
  .feature-art__cover { position: relative; top: 0; width: 100%; height: 100%; }
  .feature-art .sh { display: none; }
  .pullquote blockquote { font-size: 28px; }

  .feature-body { padding-block: 36px 24px; gap: 28px; }
  .feature-col { gap: 32px; }
  .feature-aside { flex-direction: column; }
  .gamefacts { padding: 22px 20px; }
  .gamefacts h2 { font-size: 26px; }
  .gamefacts .fact__k { width: 104px; }
  .gamefacts .fact__v { font-size: 15px; }
  .fsec h2 { font-size: 28px; }
  .fsec__lead { font-size: 17px; }
  .fsec p { font-size: 16px; }
  .keyrow { flex-direction: column; align-items: flex-start; gap: 6px; }
  .keyrow__k { width: auto; }
  .keyrow p { font-size: 16px; }
  .tip p { font-size: 16px; }
  .marginnote { padding: 20px; }

  .feature-who .wrap { padding-block: 36px 40px; }
  .feature-who p { font-size: 26px; }

  .feature-end { padding-block: 36px 48px; }
  .feature-end__col { gap: 32px; }
  .similars { flex-direction: column; gap: 18px; }
  .catch p { font-size: 16px; }
}

.fsec__note { font-size: 17px; line-height: 1.55; }
@media (max-width: 900px) { .fsec__note { font-size: 15px; } }

/* the contact headline runs on under the email tag, as in the design */
@media (min-width: 1200px) {
  .pagehead--overlap { overflow: hidden; }
  .pagehead--overlap .d0 { width: 880px; max-width: none; }
  .pagehead--overlap .headart { position: relative; z-index: 2; }
}

@media (max-width: 900px) { .strip__long { display: none; } }