/* ==========================================================================
   quenfarynghost — Main page
   Design: Figma "№40020" / node 2080:100017
   ========================================================================== */

:root {
  /* surfaces */
  --ink:        #141310;
  --ink-2:      #23211d;
  --film:       #080807;
  --paper:      #f4f3ef;
  --paper-2:    #ebe9e3;

  /* lines */
  --line-dark:  #3a3731;
  --line-light: #b9b5ac;
  --line-mid:   #cfc9bc;

  /* type colours */
  --t-light:    #ebe9e3;
  --t-light-2:  #cfc9bc;
  --t-mute:     #aba69b;
  --t-dark:     #161512;
  --t-dark-2:   #56534c;

  /* accent */
  --marker:     #f2d13a;

  /* type stacks */
  --cond:   "Sofia Sans Extra Condensed", "Arial Narrow", Arial, sans-serif;
  --sans:   "Hanken Grotesk", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  --hand:   "Permanent Marker", "Comic Sans MS", cursive;

  /* layout: keeps the 1016px editorial track with 72px gutters at 1160px */
  --gutter: max(72px, (100% - 1016px) / 2);

  /* hero scene scale */
  --s: 1;
}

/* --------------------------------------------------------------- reset -- */

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

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--t-light);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; border: 0; }
a { color: inherit; }
h1, h2, h3, p, blockquote, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--paper-2);
  color: var(--t-dark);
  font: 700 15px/1 var(--sans);
  text-transform: uppercase;
  letter-spacing: .68px;
}
.skip-link:focus { left: 8px; top: 8px; }

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

/* --------------------------------------------------------------- grain -- */

.grain {
  background-repeat: repeat;
  background-position: top left;
  background-size: 256px 256px;
}
.grain--dark  { background-color: var(--ink);    background-image: url("../img/grain-dark.png"); }
.grain--rail  { background-color: var(--ink-2);  background-image: url("../img/grain-dark.png"); }
.grain--light { background-color: var(--paper-2);background-image: url("../img/grain-light.png"); }
.grain--paper { background-color: var(--paper);  background-image: url("../img/grain-light.png");
                background-repeat: repeat; background-position: top left; background-size: 256px 256px; }

/* -------------------------------------------------------------- shell --- */

.page {
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
}

.content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--ink);
}

/* ======================================================== SIDE RAIL ===== */

.rail {
  position: sticky;
  top: 0;
  z-index: 20;
  flex: none;
  width: 208px;
  height: 100vh;
  display: flex;
  align-items: stretch;
  background: var(--ink-2);
}

.rail__perf {
  flex: none;
  width: 28px;
  background: url("../img/grain-sprocket-v.png") top left / 28px 34px repeat, var(--ink-2);
}

.rail__content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 44px;
  padding: 40px 10px;
}

.logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  text-decoration: none;
}
.logo__mark { width: 52px; height: 52px; }
.logo__word {
  font: 900 21px/1 var(--cond);
  letter-spacing: .63px;
  text-transform: uppercase;
  color: var(--t-light);
  white-space: nowrap;
}

.nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
  width: 100%;
}
.nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.nav__arrow { flex: none; width: 10px; height: 12px; }
.nav__label {
  font: 700 34px/1 var(--cond);
  letter-spacing: .34px;
  text-transform: uppercase;
  color: var(--t-light-2);
  white-space: nowrap;
  transition: color .15s ease;
}
.nav__item:hover .nav__label { color: var(--t-light); }
.nav__item.is-active .nav__label { font-weight: 900; color: var(--t-light); }
.nav__loop {
  position: absolute;
  left: 0;
  top: -16px;
  width: 107px;
  height: 66px;
  max-width: none;
  pointer-events: none;
}

.rail__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  font: 600 12px/1.2 var(--sans);
  letter-spacing: 1.68px;
  text-transform: uppercase;
}
.rail__meta-strong { color: var(--t-light-2); }
.rail__meta-dim    { color: var(--t-mute); }

/* ======================================================== PRIMITIVES ==== */

.eyebrow {
  font: 600 12px/1.5 var(--sans);
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--t-mute);
}

.h2 {
  width: 520px;
  max-width: 100%;
  font: 900 76px/0.92 var(--cond);
  letter-spacing: .76px;
  text-transform: uppercase;
  color: var(--t-light);
}
.h2--wide   { width: 700px; }
.h2--xwide  { width: 820px; }
.h2--narrow { width: 470px; }
.section--light .h2 { color: var(--t-dark); }

.link {
  font: 600 18px/1.2 var(--sans);
  color: var(--t-light);
  text-decoration: underline;
  text-underline-position: from-font;
  text-decoration-thickness: from-font;
}
.link--sm { font-size: 15px; }
.link:hover { text-decoration-thickness: 2px; }
.section--light .link { color: var(--t-dark); }

.btn {
  display: inline-flex;
  align-items: center;
  padding: 16px 24px;
  border-radius: 2px;
  background: var(--paper-2);
  color: var(--t-dark);
  font: 700 17px/1 var(--sans);
  letter-spacing: .68px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.btn:hover { background: #fff; }
.btn:active { transform: translateY(1px); }

.genre { display: flex; align-items: center; gap: 8px; }
.genre img { flex: none; width: 22px; height: 10px; }
.genre span {
  font: 700 12px/1.33 var(--sans);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--t-light-2);
  white-space: nowrap;
}
.genre--lg img  { width: 26.4px; height: 12px; }
.genre--lg span { font-size: 13px; letter-spacing: 1.3px; }

/* ======================================================== SECTIONS ====== */

.section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 44px;
  padding: 104px var(--gutter) 112px;
}
.section--about  { padding-block: 88px; gap: 0; }
.section--reach  { gap: 0; background-color: var(--ink-2);
                   background-image: url("../img/grain-dark.png");
                   background-size: 256px 256px; background-position: top left; }

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
}
.section__intro {
  width: 420px;
  font: 500 18px/1.5 var(--sans);
  color: var(--t-light);
}
.section__intro--block { width: 520px; }

/* ======================================================== HERO ========== */

.hero {
  position: relative;
  height: 940px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
  padding: 88px var(--gutter) 0;
}

.hero__title {
  width: 520px;
  max-width: 100%;
  font: 900 128px/0.84 var(--cond);
  letter-spacing: 1.28px;
  text-transform: uppercase;
  color: var(--t-light);
}
.hero__lead {
  width: 460px;
  max-width: 100%;
  font: 500 20px/1.5 var(--sans);
  color: var(--t-light);
}
.hero__links {
  display: flex;
  align-items: center;
  gap: 26px;
  padding-top: 6px;
  flex-wrap: wrap;
}

/* ---- the covers-scene ---------------------------------------------------
   Own coordinate canvas: 644 x 715, anchored 448px into the editorial track
   (= x 520 / y 60 of the 1160 x 940 hero frame in Figma).                  */

.hero__scene {
  position: absolute;
  left: calc(var(--gutter) + 448px);
  top: 60px;
  width: 644px;
  height: 715px;
  transform-origin: top left;
  pointer-events: none;
}

.scene__box {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scene__box--sheet { left: 22.77px; top: 36px;     width: 620.819px; height: 558.364px; }
.scene__box--loop  { left: 34.70px; top: 326px;    width: 231.003px; height: 227.218px; }
.scene__box--arrow { left: 92px;    top: 544.53px; width: 57.772px;  height: 100.491px; }
.scene__box--note  { left: 50.96px; top: 640px;    width: 252.693px; height: 71.005px; }

.rot { flex: none; }
.rot--3   { transform: rotate(3deg); }
.rot--m84 { transform: rotate(-84deg); }

.marker-note {
  width: 250px;
  font: 400 26px/1.12 var(--hand);
  color: var(--marker);
}

/* contact sheet */

.sheet {
  width: 594px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 26px 26px 30px;
  filter: drop-shadow(0 30px 25px rgba(0, 0, 0, .65));
}
.sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
  font-family: var(--hand);
  font-weight: 400;
}
.sheet__title { font-size: 22px; color: var(--t-dark); }
.sheet__date  { font-size: 18px; color: var(--t-dark-2); }

.sheet__strip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px;
  background: var(--film);
}
.sheet__strip-head {
  display: flex;
  justify-content: space-between;
  font: 600 12px/1.33 var(--sans);
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--t-mute);
  white-space: nowrap;
}
.sheet__frames { display: flex; gap: 10px; }
.sheet__frames img {
  width: 166px;
  height: 166px;
  object-fit: cover;
  border-radius: 2px;
}

/* loupe */

.loupe {
  position: absolute;
  left: 252px;
  top: 370px;
  width: 300px;
  height: 300px;
  will-change: transform;
}
.loupe__body  { position: absolute; left: -32px; top: -16px; width: 388px; height: 388px; max-width: none; }
.loupe__edge  { position: absolute; left: 18px;  top: 18px;  width: 264px; height: 264px; }
.loupe__lens  {
  position: absolute;
  left: 21px;
  top: 21px;
  display: block;
  width: 258px;
  height: 258px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--film);
}
.loupe__mag {
  position: absolute;
  left: -44.95px;
  top: -82.95px;
  width: 399.9px;
  height: 399.9px;
  max-width: none;
  object-fit: cover;
  will-change: transform;
}
.loupe__glass { position: absolute; left: 21px; top: 21px; width: 258px; height: 258px; }

/* ======================================================== 35MM STRIPS === */

.strips {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}
.strip { width: 100%; background: var(--ink-2); }
.strip__perf {
  height: 28px;
  background: url("../img/grain-sprocket-h.png") top left / 34px 28px repeat, var(--ink-2);
}
.strip__row {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding: 22px 24px;
}

.gframe {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.gframe__frame {
  flex: none;
  width: 128px;
  height: 128px;
  background: var(--film);
  display: block;
}
.gframe__frame img {
  width: 128px;
  height: 128px;
  object-fit: cover;
  border-radius: 2px;
}
.gframe__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.gframe__title {
  font: 900 30px/0.92 var(--cond);
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--t-light);
}
.gframe__meta {
  font: 500 13px/1.4 var(--sans);
  color: var(--t-mute);
}

/* ======================================================== ABOUT ========= */

.about {
  display: flex;
  align-items: flex-start;
  gap: 64px;
  width: 100%;
}
.about .h2 { flex: none; }
.about__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.about__text {
  font: 500 24px/1.45 var(--sans);
  color: var(--t-dark);
}

/* ======================================================== CONTROLS ====== */

.controls {
  width: 100%;
  padding: 8px 28px;
}
.controls__table {
  width: 100%;
  min-width: 896px;
  table-layout: fixed;
  border-collapse: collapse;
  text-align: left;
}
.controls__table thead th {
  padding: 16px 8px 16px 0;
  border-bottom: 2px solid var(--line-light);
  font: 700 12px/1.33 var(--sans);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--t-dark-2);
  vertical-align: middle;
}
.controls__table tbody th,
.controls__table tbody td {
  padding: 16px 8px 16px 0;
  border-bottom: 1px solid var(--line-light);
  vertical-align: middle;
}
.controls__table tbody th {
  font: 900 28px/1.1 var(--cond);
  letter-spacing: .28px;
  text-transform: uppercase;
  color: var(--t-dark);
  text-align: left;
}
.controls__table tbody td {
  font: 600 16px/1.35 var(--sans);
  color: var(--t-dark);
}
.controls__table tbody td.is-none {
  font-weight: 400;
  color: var(--t-dark-2);
}
.controls__table th:nth-child(1), .controls__table td:nth-child(1) { width: 236px; }
.controls__table th:nth-child(2), .controls__table td:nth-child(2) { width: 190px; }
.controls__table th:nth-child(3), .controls__table td:nth-child(3) { width: 250px; }
.controls__table th:nth-child(4), .controls__table td:nth-child(4) { width: 110px; }
.controls__table th:nth-child(5), .controls__table td:nth-child(5) { width: auto; }

/* ======================================================== EDGE PRINT ==== */

.edgeprint {
  width: 100%;
  padding: 10px var(--gutter);
  background: var(--ink-2);
  overflow: hidden;
}
.edgeprint p {
  white-space: pre;
  font: 600 12px/1.33 var(--sans);
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--t-mute);
}

/* ======================================================== VERDICTS ====== */

.verdicts {
  display: flex;
  flex-wrap: wrap;
  gap: 52px 40px;
  width: 100%;
}
.verdict {
  flex: 1 1 280px;
  max-width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.verdict__thumb {
  position: relative;
  flex: none;
  display: block;
  width: 84px;
  height: 84px;
}
.verdict__frame {
  display: block;
  width: 84px;
  height: 84px;
  padding: 8px;
  background: var(--film);
}
.verdict__frame img {
  width: 68px;
  height: 68px;
  object-fit: cover;
  border-radius: 2px;
}
.verdict__loop {
  position: absolute;
  left: -10px;
  top: -10px;
  width: 104px;
  height: 104px;
  pointer-events: none;
}
.verdict__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.verdict__quote {
  font: 400 20px/1.35 var(--hand);
  color: var(--t-light);
}
.verdict__by {
  font: 600 12px/1.4 var(--sans);
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--t-mute);
}

/* ======================================================== METHODOLOGY === */

.steps {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}
.step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 18px;
  border-top: 4px solid var(--t-dark);
}
.step__head { display: flex; align-items: center; gap: 10px; }
.step__name {
  font: 900 52px/1 var(--cond);
  letter-spacing: .52px;
  text-transform: uppercase;
  color: var(--t-dark);
  white-space: nowrap;
}
.step__next { flex: none; width: 26px; height: 14px; }
.step__text {
  font: 400 16px/1.5 var(--sans);
  color: var(--t-dark);
}

/* ======================================================== COMPARISON ==== */

.compare { width: 100%; }
.compare__table {
  width: 100%;
  min-width: 1016px;
  table-layout: fixed;
  border-collapse: collapse;
  text-align: left;
}
.compare__table thead th {
  padding: 12px 8px 12px 0;
  border-bottom: 2px solid var(--line-mid);
  font: 600 12px/1.33 var(--sans);
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--t-mute);
  vertical-align: top;
}
.compare__table tbody th,
.compare__table tbody td {
  padding: 14px 8px 14px 0;
  border-bottom: 1px solid var(--line-dark);
  vertical-align: middle;
}
.compare__table tbody td {
  font: 500 15px/1.35 var(--sans);
  color: var(--t-light);
}
.compare__table th:nth-child(1), .compare__table td:nth-child(1) { width: 300px; }
.compare__table th:nth-child(2), .compare__table td:nth-child(2) { width: 180px; }
.compare__table th:nth-child(3), .compare__table td:nth-child(3) { width: 220px; }
.compare__table th:nth-child(4), .compare__table td:nth-child(4) { width: 140px; }
.compare__table th:nth-child(5), .compare__table td:nth-child(5) { width: 176px; }

.compare__game { display: flex; align-items: center; gap: 14px; }
.compare__frame {
  flex: none;
  display: block;
  width: 52px;
  height: 52px;
  padding: 4px;
  background: var(--film);
}
.compare__frame img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 2px;
}
.compare__name {
  font: 900 28px/1.1 var(--cond);
  letter-spacing: .28px;
  text-transform: uppercase;
  color: var(--t-light);
  text-decoration: underline;
  text-underline-position: from-font;
  white-space: nowrap;
}

/* ======================================================== PICK BY MOOD == */

.moods { display: flex; flex-direction: column; width: 100%; }
.mood {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 22px 0;
  border-top: 1px solid var(--line-dark);
}
.mood:first-child { border-top: 0; }
.mood__name {
  flex: none;
  width: 420px;
  font: 900 48px/1.1 var(--cond);
  letter-spacing: .48px;
  text-transform: uppercase;
  color: var(--t-light);
}
.mood__picks {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 10px 28px;
}
.pick {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.pick__frame {
  flex: none;
  display: block;
  width: 60px;
  height: 60px;
  padding: 4px;
  background: var(--film);
}
.pick__frame img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 2px;
}
.pick__name {
  font: 600 17px/1.2 var(--sans);
  color: var(--t-light);
  text-decoration: underline;
  text-underline-position: from-font;
  white-space: nowrap;
}

/* ======================================================== REACH US ====== */

.reach {
  display: flex;
  align-items: flex-end;
  gap: 64px;
  width: 100%;
}
.reach .h2 { flex: none; width: 520px; }
.reach__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.reach__text {
  font: 500 19px/1.5 var(--sans);
  color: var(--t-light);
}
/* The address is set at 52px as designed and scaled down by main.js only if a
   longer address than the mock's placeholder would not fit the column. The wax
   loop stretches to whatever the text ends up measuring. */
.reach__email {
  width: 100%;
  padding: 10px 0 12px;
}
.reach__email-in {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.reach__email a {
  display: block;
  font: 900 52px/1.15 var(--cond);
  letter-spacing: .52px;
  text-transform: uppercase;
  color: var(--t-light);
  text-decoration: none;
  white-space: nowrap;
}
.reach__loop {
  position: absolute;
  left: -26px;
  top: -17px;
  width: calc(100% + 52px);
  height: calc(100% + 34px);
  max-width: none;
  pointer-events: none;
}

/* ======================================================== FAQ =========== */

.faq {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 48px;
  width: 100%;
}
.faq__item {
  flex: 1 1 420px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 0 26px;
  border-top: 2px solid var(--t-dark);
}
.faq__q {
  font: 900 32px/1.1 var(--cond);
  letter-spacing: .32px;
  text-transform: uppercase;
  color: var(--t-dark);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__a {
  font: 400 17px/1.5 var(--sans);
  color: var(--t-dark);
}

/* ======================================================== FOOTER ======== */

.footer {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--ink-2);
}
.footer__perf {
  height: 28px;
  background: url("../img/grain-sprocket-h.png") top left / 34px 28px repeat, var(--ink-2);
}
.footer__cols {
  display: flex;
  align-items: flex-start;
  gap: 56px;
  padding: 56px var(--gutter) 40px;
}
.footer__brand {
  flex: none;
  width: 360px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.logo--sm { flex-direction: row; align-items: center; gap: 12px; }
.logo--sm .logo__mark { width: 40px; height: 40px; }
.logo--sm .logo__word { font-size: 30px; letter-spacing: .3px; }

.footer__desc { font: 400 16px/1.5 var(--sans); color: var(--t-light); }
.footer__note { font: 400 14px/1.5 var(--sans); color: var(--t-mute); }

.footer__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.footer__col--contact { flex: none; width: 260px; }
.footer__label {
  font: 600 12px/1.33 var(--sans);
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--t-mute);
}
.footer__col a {
  font: 500 16px/1.33 var(--sans);
  color: var(--t-light);
  text-decoration: underline;
  text-underline-position: from-font;
  white-space: nowrap;
}
.footer__col--contact a { font-size: 15px; white-space: normal; }
.footer__col--contact .footer__email { font-weight: 700; font-size: 17px; }

.footer__bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 18px var(--gutter) 22px;
  border-top: 1px solid var(--line-dark);
}
.footer__copy {
  font: 600 12px/1.33 var(--sans);
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--t-light-2);
}
.footer__cookie {
  font: 500 14px/1.33 var(--sans);
  color: var(--t-light);
  text-decoration: underline;
  text-underline-position: from-font;
  white-space: nowrap;
}

/* ======================================================== RESPONSIVE ==== */

/* --- scale the hero scene down before it starts fighting the headline --- */
@media (max-width: 1367px) {
  .hero__scene { --s: .9; transform: scale(.9); left: calc(var(--gutter) + 440px); top: 66px; }
}
@media (max-width: 1300px) {
  .hero__scene { --s: .8; transform: scale(.8); left: calc(var(--gutter) + 430px); top: 72px; }
}
@media (max-width: 1220px) {
  .hero { height: 880px; }
  .hero__scene { --s: .72; transform: scale(.72); left: calc(var(--gutter) + 415px); top: 78px; }
}

/* --- rail becomes a top bar --------------------------------------------- */
@media (max-width: 1120px) {
  .page { display: block; }

  .rail {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: auto;
  }
  .rail__perf {
    width: 100%;
    height: 28px;
    background: url("../img/grain-sprocket-h.png") top left / 34px 28px repeat, var(--ink-2);
  }
  .rail__content {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    padding: 14px var(--gutter);
  }
  .logo { flex-direction: row; align-items: center; gap: 10px; }
  .logo__mark { width: 36px; height: 36px; }
  .logo__word { font-size: 20px; }

  .nav { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 20px; width: auto; }
  .nav__label { font-size: 26px; }
  .nav__loop { display: none; }

  .rail__meta { flex-direction: row; gap: 16px; width: auto; margin-left: auto; }

  /* hero: scene drops below the copy */
  .hero {
    height: auto;
    padding-top: 64px;
    padding-bottom: 72px;
    overflow: hidden;
  }
  .hero__scene {
    --s: .72;
    position: relative;
    left: auto;
    top: auto;
    order: 5;
    margin-top: 16px;
    width: calc(644px * var(--s));
    height: calc(715px * var(--s));
    transform: scale(var(--s));
  }
  .hero__title { font-size: 104px; }
}

@media (max-width: 1000px) {
  .section__head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .section__intro, .section__intro--block { width: 100%; max-width: 520px; }

  .h2, .h2--wide, .h2--xwide, .h2--narrow { width: 100%; max-width: 820px; font-size: 60px; }

  .about { flex-direction: column; gap: 28px; }
  .reach { flex-direction: column; align-items: flex-start; gap: 32px; }
  .reach .h2 { width: 100%; }
  /* stacked, the column must take the full width so the address can be fitted
     to it rather than the column stretching to the address */
  .reach__body { width: 100%; }

  .strip__row { flex-wrap: wrap; gap: 24px; }
  .gframe { flex: 1 1 290px; }

  .steps { flex-wrap: wrap; gap: 28px 20px; }
  .step { flex: 1 1 260px; }

  .mood { flex-direction: column; align-items: flex-start; gap: 16px; }
  .mood__name { width: 100%; font-size: 40px; }

  .controls { overflow-x: auto; }
  .controls__table { min-width: 820px; }
  .compare { overflow-x: auto; }
}

@media (max-width: 860px) {
  :root { --gutter: 28px; }

  .section { padding-block: 72px 80px; gap: 32px; }
  .section--about { padding-block: 64px; }

  .hero { padding-top: 48px; padding-bottom: 56px; gap: 22px; }
  .hero__title { font-size: 80px; }
  .hero__lead { font-size: 18px; }
  .hero__scene { --s: .58; }

  .h2, .h2--wide, .h2--xwide, .h2--narrow { font-size: 52px; }

  .verdicts { gap: 36px 32px; }
  .verdict { flex: 1 1 100%; }

  .faq { gap: 0; }
  .faq__item { flex: 1 1 100%; }

  .footer__cols { flex-wrap: wrap; gap: 32px 40px; }
  .footer__brand { width: 100%; }
  .footer__col { flex: 1 1 150px; }
  .footer__col--contact { width: 100%; flex: 1 1 100%; }
  .footer__bar { flex-direction: column; gap: 12px; }
}

@media (max-width: 620px) {
  :root { --gutter: 20px; }

  .rail__content { gap: 12px 18px; }
  .rail__meta { margin-left: 0; width: 100%; }
  .nav__label { font-size: 22px; }

  .hero__title { font-size: 58px; }
  .hero__scene { --s: .44; }
  .hero__links { gap: 18px; }

  .h2, .h2--wide, .h2--xwide, .h2--narrow { font-size: 42px; }
  .about__text { font-size: 20px; }

  .gframe { flex: 1 1 100%; }
  .gframe__frame, .gframe__frame img { width: 96px; height: 96px; }

  .step__name { font-size: 42px; }

  .reach__loop { left: -18px; top: -12px; width: calc(100% + 36px); height: calc(100% + 24px); }

  .faq__q { font-size: 26px; }
  .btn { padding: 14px 20px; font-size: 15px; }
}

@media (max-width: 420px) {
  .hero__title { font-size: 46px; }
  .hero__scene { --s: .34; }
  .h2, .h2--wide, .h2--xwide, .h2--narrow { font-size: 34px; }
  .mood__name { font-size: 32px; }
}

/* --- motion -------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --- print --------------------------------------------------------------- */

@media print {
  .rail, .loupe, .edgeprint { display: none; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   SHARED PAGE CHROME (Games, guides, About, Contact, legal)
   ========================================================================== */

/* ---------------------------------------------------------- page head --- */

.pagehead {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  padding: 48px var(--gutter) 80px;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  width: 100%;
  font-size: 14px;
  line-height: 1.3;
}
.breadcrumb a {
  font-weight: 500;
  color: var(--t-light-2);
  text-decoration: underline;
  text-underline-position: from-font;
}
.breadcrumb .sep { font-weight: 400; color: var(--t-mute); }
.breadcrumb .is-current { font-weight: 600; color: var(--t-light); }

.pagehead__title {
  width: 820px;
  max-width: 100%;
  font: 900 112px/0.88 var(--cond);
  letter-spacing: 1.12px;
  text-transform: uppercase;
  color: var(--t-light);
}
.pagehead__title--760 { width: 760px; }
.pagehead__title--800 { width: 800px; }
.pagehead__title--600 { width: 600px; font-size: 120px; letter-spacing: 1.2px; }

.pagehead__lead {
  width: 700px;
  max-width: 100%;
  font: 500 21px/1.45 var(--sans);
  color: var(--t-light);
}
.pagehead__lead--560 { width: 560px; }

.pagehead__meta {
  width: 600px;
  max-width: 100%;
  font: 600 12px/1.6 var(--sans);
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--t-mute);
}
.pagehead__meta--auto { width: auto; }

/* ------------------------------------------------------- genre chips --- */

.genrejump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  width: 900px;
  max-width: 100%;
  padding-top: 6px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1.5px solid var(--line-dark);
  border-radius: 2px;
  text-decoration: none;
}
.chip:hover { border-color: var(--t-mute); }
.chip__count { font: 700 13px/1 var(--sans); color: var(--t-mute); }

/* ------------------------------------------------- genre label bands --- */

.genreband {
  display: flex;
  align-items: center;
  gap: 40px;
  width: 100%;
  padding: 30px var(--gutter);
  scroll-margin-top: 24px;
}
.genreband__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 380px;
}
.genreband__notch { flex: none; width: 66px; height: 30px; }
.genreband__name {
  font: 900 56px/1.05 var(--cond);
  letter-spacing: .56px;
  text-transform: uppercase;
  color: var(--t-dark);
  white-space: nowrap;
}
.genreband__desc {
  flex: 1 1 0;
  min-width: 0;
  font: 500 17px/1.5 var(--sans);
  color: var(--t-dark);
}
.genre--onlight span { color: var(--t-dark); }

/* --------------------------------------------------- catalogue strip --- */

.cstrip { width: 100%; background: var(--ink-2); }
.cstrip__row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 28px var(--gutter);
}
.cstrip__frame {
  flex: none;
  width: 320px;
  height: 320px;
  padding: 10px;
  background: var(--film);
  display: block;
}
.cstrip__frame img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-radius: 2px;
}
.cstrip__what,
.cstrip__fields {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  background-color: var(--paper);
  background-image: url("../img/grain-light.png");
  background-size: 256px 256px;
  background-position: top left;
}
.cstrip__what { flex: none; width: 380px; padding: 28px; }
.cstrip__fields { flex: 1 1 0; min-width: 0; padding: 22px 24px; }

.cstrip__title {
  font: 900 58px/0.9 var(--cond);
  letter-spacing: .58px;
  text-transform: uppercase;
  color: var(--t-dark);
}
.cstrip__text { font: 500 17px/1.5 var(--sans); color: var(--t-dark); }

.facts { width: 100%; margin: 0; }
.facts > div {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line-light);
}
.facts > div:first-child { border-top: 0; }
.facts dt {
  flex: none;
  width: 84px;
  font: 700 12px/1.33 var(--sans);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--t-dark-2);
}
.facts dd {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font: 500 15px/1.35 var(--sans);
  color: var(--t-dark);
}

.btn--dark { background: var(--t-dark); color: var(--t-light); }
.btn--dark:hover { background: #000; }

/* ---------------------------------------------- game frame hover loop --- */

.fhover { position: relative; --fsize: 128px; }
.fhover__loop {
  position: absolute;
  left: calc(var(--fsize) * -0.203);
  top: calc(var(--fsize) * -0.203);
  width: calc(var(--fsize) * 1.406);
  height: calc(var(--fsize) * 1.406);
  max-width: none;
  pointer-events: none;
  opacity: 0;
}
.fhover:hover .fhover__loop,
.fhover:focus-within .fhover__loop { opacity: 1; }
.fhover:hover .gframe__title,
.fhover:focus-within .gframe__title,
.fhover:hover .cstrip__title,
.fhover:focus-within .cstrip__title,
.fhover:hover .also__title,
.fhover:focus-within .also__title { text-decoration: underline; text-underline-position: from-font; }
.fhover:hover .link,
.fhover:focus-within .link { color: var(--marker); }
.section--light .fhover:hover .link,
.section--light .fhover:focus-within .link { color: var(--marker); }

/* ==========================================================================
   GUIDE PAGE
   ========================================================================== */

.guidehead__scene {
  position: absolute;
  left: calc(var(--gutter) + 609.55px);
  top: 46px;
  width: 439px;
  height: 429px;
  transform-origin: top left;
  pointer-events: none;
}
.guidehead__cover {
  position: absolute;
  left: 35.96px;
  top: 26px;
  width: 370.276px;
  height: 370.276px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.guidehead__cover .rot { filter: drop-shadow(0 24px 20px rgba(0, 0, 0, .6)); }
.guidehead__cover .cover {
  display: block;
  width: 358px;
  height: 358px;
  padding: 14px;
  background: var(--film);
}
.guidehead__cover img { width: 330px; height: 330px; object-fit: cover; border-radius: 2px; }
.guidehead__loop {
  position: absolute;
  left: 0;
  top: 0;
  width: 438.19px;
  height: 428.545px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rot--2 { transform: rotate(2deg); }

/* facts band */

.factsband { width: 100%; background: var(--ink-2); }
.factsband__row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 14px var(--gutter);
}
.fact-card {
  flex: none;
  width: 120px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background-color: var(--paper);
  background-image: url("../img/grain-light.png");
  background-size: 256px 256px;
  background-position: top left;
}
.fact-card dt {
  font: 700 12px/1.33 var(--sans);
  letter-spacing: .96px;
  text-transform: uppercase;
  color: var(--t-dark-2);
}
.fact-card dd {
  margin: 0;
  font: 800 22px/1 var(--cond);
  letter-spacing: .22px;
  text-transform: uppercase;
  color: var(--t-dark);
}

/* guide body */

.guidebody {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
  padding: 80px var(--gutter) 104px;
}
.gsection {
  width: 740px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.gsection h2 {
  width: 100%;
  font: 900 56px/0.92 var(--cond);
  letter-spacing: .56px;
  text-transform: uppercase;
  color: var(--t-dark);
}
.gsection p { width: 100%; font: 400 18px/1.65 var(--sans); color: var(--t-dark); }
.gsection--lede p { font: 500 22px/1.5 var(--sans); }
.gsection--fit p { font: 500 20px/1.55 var(--sans); }

.hands { width: 100%; }
.hands > div {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line-light);
}
.hands > div:first-child { border-top: 0; }
.hands dt {
  flex: none;
  width: 230px;
  font: 700 17px/1.3 var(--sans);
  color: var(--t-dark);
}
.hands dd { margin: 0; }
.key {
  display: inline-block;
  padding: 7px 12px;
  border-radius: 2px;
  background: var(--ink-2);
  font: 600 15px/1.3 var(--sans);
  color: var(--t-light);
}

.advice { display: flex; flex-direction: column; gap: 18px; width: 100%; }
.advice li { display: flex; align-items: flex-start; gap: 14px; }
.advice img { flex: none; width: 22px; height: 18px; margin-top: 4px; }
.advice p { font: 400 18px/1.6 var(--sans); color: var(--t-dark); }

.twice { display: flex; flex-direction: column; gap: 18px; width: 100%; }
.twice li {
  padding: 10px 0 10px 18px;
  border-left: 3px solid var(--t-dark);
  font: 400 17px/1.55 var(--sans);
  color: var(--t-dark);
}

.also { display: flex; gap: 16px; width: 100%; }
.also__card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 10px 10px;
  border-radius: 2px;
  background: var(--ink-2);
  text-decoration: none;
}
.also__frame { flex: none; width: 72px; height: 72px; background: var(--film); display: block; }
.also__frame img { width: 72px; height: 72px; object-fit: cover; border-radius: 2px; }
.also__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.also__title {
  font: 900 28px/1.05 var(--cond);
  letter-spacing: .28px;
  text-transform: uppercase;
  color: var(--t-light);
}
.also__link {
  font: 600 14px/1.3 var(--sans);
  color: var(--t-light);
  text-decoration: underline;
  text-underline-position: from-font;
}

.pokibox {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 20px 22px;
  border: 1.5px dashed var(--t-dark-2);
}
.pokibox p { font: 400 16px/1.55 var(--sans); color: var(--t-dark); }
.pokibox a { font: 600 16px/1.3 var(--sans); color: var(--t-dark); text-decoration: underline; text-underline-position: from-font; }

/* ==========================================================================
   ABOUT / CONTACT / LEGAL
   ========================================================================== */

.aboutbody {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 56px var(--gutter) 104px;
}
.arow {
  display: flex;
  align-items: flex-start;
  gap: 64px;
  width: 100%;
  padding: 40px 0 44px;
  border-top: 2px solid var(--t-dark);
}
.arow:first-child { border-top: 0; }
.arow h2 {
  flex: none;
  width: 360px;
  font: 900 52px/0.92 var(--cond);
  letter-spacing: .52px;
  text-transform: uppercase;
  color: var(--t-dark);
}
.arow__body {
  flex: none;
  width: 592px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.arow__body > p { font: 500 19px/1.55 var(--sans); color: var(--t-dark); }

.authors { display: flex; gap: 16px; width: 100%; }
.author {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  background: var(--ink-2);
}
.author__name {
  font: 900 28px/1.2 var(--cond);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--t-light);
}
.author__role {
  font: 600 12px/1.33 var(--sans);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--t-light-2);
}
.author__note { font: 400 14px/1.5 var(--sans); color: var(--t-mute); }

.criteria {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
  background: var(--paper);
  border: 1.5px solid var(--t-dark);
}
.criteria__label {
  font: 700 12px/1.33 var(--sans);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--t-dark-2);
}
.criteria li { display: flex; align-items: center; gap: 12px; }
.criteria img { flex: none; width: 18px; height: 14px; }
.criteria span { font: 400 16px/1.4 var(--sans); color: var(--t-dark); }

.contactbody {
  display: flex;
  align-items: flex-start;
  gap: 72px;
  width: 100%;
  padding: 80px var(--gutter) 104px;
}
.contactbody__col { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.contactbody__col--a { flex: none; width: 470px; max-width: 100%; }
.contactbody__col--b { flex: none; width: 474px; max-width: 100%; }
.contactbody h2 {
  font: 900 52px/1.2 var(--cond);
  letter-spacing: .52px;
  text-transform: uppercase;
  color: var(--t-dark);
}
.cfacts { width: 100%; }
.cfacts > div {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line-light);
}
.cfacts > div:first-child { border-top: 0; }
.cfacts dt {
  flex: none;
  width: 110px;
  font: 700 12px/1.33 var(--sans);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--t-dark-2);
}
.cfacts dd { flex: 1 1 0; min-width: 0; margin: 0; font: 700 16px/1.35 var(--sans); color: var(--t-dark); }
.cfacts dd a { color: inherit; text-decoration: none; }
.cfacts dd a:hover { text-decoration: underline; text-underline-position: from-font; }
.cnote { font: 600 14px/1.4 var(--sans); color: var(--t-dark-2); }
.cnote a { color: inherit; text-decoration: underline; text-underline-position: from-font; }

.reason {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 0;
  border-top: 2px solid var(--t-dark);
}
.reason h3 {
  font: 900 30px/1.2 var(--cond);
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--t-dark);
}
.reason p { font: 400 17px/1.5 var(--sans); color: var(--t-dark); }

.notcard {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  background: var(--ink-2);
}
.notcard p { font: 500 16px/1.5 var(--sans); color: var(--t-light); }
.notcard div { display: flex; flex-wrap: wrap; gap: 20px; }
.notcard a {
  font: 600 15px/1.3 var(--sans);
  color: var(--t-light);
  text-decoration: underline;
  text-underline-position: from-font;
}

.legalbody {
  display: flex;
  align-items: flex-start;
  gap: 72px;
  width: 100%;
  padding: 72px var(--gutter) 104px;
}
.toc {
  position: sticky;
  top: 24px;
  flex: none;
  width: 270px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 20px;
  background: var(--ink-2);
}
.toc__label {
  font: 600 12px/1.33 var(--sans);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--t-mute);
}
.toc a { font: 500 15px/1.3 var(--sans); color: var(--t-light); text-decoration: none; }
.toc a:hover { text-decoration: underline; }

.legal__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 36px; }
.lsection { scroll-margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.lsection h2 {
  font: 900 36px/1 var(--cond);
  letter-spacing: .36px;
  text-transform: uppercase;
  color: var(--t-dark);
}
.lsection p { font: 400 17px/1.65 var(--sans); color: var(--t-dark); }

/* ==========================================================================
   COOKIE BANNER + MOBILE MENU
   ========================================================================== */

.cookie {
  position: fixed;
  left: calc(208px + 24px);
  bottom: 24px;
  z-index: 40;
  width: 500px;
  max-width: calc(100vw - 48px);
  border-radius: 3px;
  overflow: hidden;
  background: var(--ink-2);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
}
.cookie[hidden] { display: none; }
.cookie__perf {
  height: 28px;
  background: url("../img/grain-sprocket-h.png") top left / 34px 28px repeat, var(--ink-2);
}
.cookie__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 28px 28px;
}
.cookie__head { display: flex; align-items: center; gap: 12px; width: 100%; }
.cookie__head img { flex: none; width: 34px; height: 34px; }
.cookie__head h2 {
  font: 900 38px/1.1 var(--cond);
  letter-spacing: .38px;
  text-transform: uppercase;
  color: var(--t-light);
}
.cookie__text { font: 400 16px/1.5 var(--sans); color: var(--t-light); }
.cookie__actions { display: flex; gap: 10px; width: 100%; }
.cookie__actions button {
  flex: 1 1 0;
  min-width: 0;
  padding: 13px 16px;
  border: 0;
  border-radius: 2px;
  background: var(--paper-2);
  font: 700 15px/1.3 var(--sans);
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--t-dark);
  cursor: pointer;
}
.cookie__actions button:hover { background: #fff; }
.cookie__link {
  font: 600 15px/1.3 var(--sans);
  color: var(--t-light);
  text-decoration: underline;
  text-underline-position: from-font;
}

.rail__menu,
.nav__close { display: none; }

/* ==========================================================================
   RESPONSIVE — inner pages
   ========================================================================== */

@media (max-width: 1367px) {
  .guidehead__scene { transform: scale(.9); left: calc(var(--gutter) + 600px); }
}
@media (max-width: 1300px) {
  .guidehead__scene { transform: scale(.8); left: calc(var(--gutter) + 590px); }
}
@media (max-width: 1220px) {
  .guidehead__scene { transform: scale(.72); left: calc(var(--gutter) + 570px); }
}

@media (max-width: 1120px) {
  .cookie { left: 24px; }

  .guidehead__scene {
    position: relative;
    left: auto;
    top: auto;
    order: 5;
    margin-top: 8px;
    width: calc(439px * .8);
    height: calc(429px * .8);
    transform: scale(.8);
  }
  .pagehead__title { font-size: 92px; }
  .pagehead__title--600 { font-size: 96px; }

  .cstrip__row { flex-wrap: wrap; }
  .cstrip__what { width: 100%; }
  .cstrip__fields { flex: 1 1 320px; }
}

@media (max-width: 1000px) {
  .pagehead__title,
  .pagehead__title--760,
  .pagehead__title--800,
  .pagehead__title--600 { width: 100%; font-size: 68px; }
  .pagehead__lead, .pagehead__meta, .genrejump { width: 100%; }

  .genreband { flex-direction: column; align-items: flex-start; gap: 16px; }
  .genreband__head { width: auto; }

  .arow { flex-direction: column; gap: 22px; }
  .arow h2 { width: 100%; font-size: 42px; }
  .arow__body { width: 100%; }

  .contactbody { flex-direction: column; gap: 48px; }
  .contactbody__col--a, .contactbody__col--b { width: 100%; }

  .legalbody { flex-direction: column; gap: 36px; }
  .toc { position: static; width: 100%; }

  .gsection h2 { font-size: 42px; }
  .factsband__row { flex-wrap: wrap; }
  .fact-card { flex: 1 1 140px; width: auto; }
}

@media (max-width: 860px) {
  .pagehead { padding-block: 40px 56px; gap: 18px; }
  .pagehead__title,
  .pagehead__title--760,
  .pagehead__title--800,
  .pagehead__title--600 { font-size: 54px; }

  .guidebody { padding-block: 56px 72px; gap: 44px; }
  .guidehead__scene { transform: scale(.62); width: calc(439px * .62); height: calc(429px * .62); }

  .cstrip__frame { width: 100%; height: auto; }
  .cstrip__frame img { width: 100%; height: auto; aspect-ratio: 1; }
  .cstrip__title { font-size: 44px; }

  .also { flex-direction: column; }
  .hands > div { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hands dt { width: auto; }

  .authors { flex-direction: column; }
  .aboutbody, .contactbody, .legalbody { padding-block: 48px 72px; }
}

@media (max-width: 620px) {
  .rail__menu {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 8px 12px;
    border: 1.5px solid var(--line-dark);
    border-radius: 2px;
    background: transparent;
    font: 700 13px/1 var(--sans);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--t-light);
    cursor: pointer;
  }

  .rail .nav {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    padding: 24px 28px;
    background: var(--ink-2);
  }
  .rail .nav.is-open { display: flex; }
  .rail .nav .nav__label { font-size: 44px; }
  .rail__meta { display: none; }

  .rail .nav.is-open .nav__close {
    display: block;
    position: absolute;
    top: 18px;
    right: 18px;
    padding: 10px 14px;
    border: 1.5px solid var(--line-dark);
    border-radius: 2px;
    background: transparent;
    font: 700 13px/1 var(--sans);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--t-light);
    cursor: pointer;
  }

  .cookie { left: 16px; right: 16px; bottom: 16px; width: auto; max-width: 330px; }
  .cookie__body { padding: 16px 20px 20px; }
  .cookie__head h2 { font-size: 30px; }

  .pagehead__title,
  .pagehead__title--760,
  .pagehead__title--800,
  .pagehead__title--600 { font-size: 42px; }
  .gsection h2 { font-size: 34px; }
  .genreband__name { font-size: 40px; }
  .contactbody h2 { font-size: 40px; }
  .lsection h2 { font-size: 28px; }
}

/* ==========================================================================
   ADDITIONS
   ========================================================================== */

.sr-only {
  position: absolute;
  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;
}

/* the six contact-sheet frames are links; the loupe tracks keyboard focus */
.hero__scene { pointer-events: none; }
.sheet { pointer-events: auto; }
.sheet__frame { display: block; position: relative; }
.sheet__frame:focus-visible { outline: 3px solid var(--marker); outline-offset: 3px; }

/* the lens shows the scene itself, magnified */
.loupe__mag {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 644px;
  height: 715px;
  transform-origin: 0 0;
  will-change: transform;
}
.loupe__mag .scene__box { pointer-events: none; }
.loupe__mag .sheet { filter: none; pointer-events: none; }

.genre--xl img { width: 30.8px; height: 14px; }
.genre--xl span { font-size: 14px; letter-spacing: 1.4px; }

/* "Cookie settings" in the footer is a button that reopens the banner */
.footer__cookie {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
}

@media (max-width: 1000px) {
  .genre--xl img { width: 26.4px; height: 12px; }
  .genre--xl span { font-size: 13px; }
}

/* At rest the lens carries the crop the design draws; once the pointer moves
   over the hero it is swapped for a live magnification of the sheet. */
.loupe__still {
  position: absolute;
  left: -44.95px;
  top: -82.95px;
  width: 399.9px;
  height: 399.9px;
  max-width: none;
  object-fit: cover;
}
.loupe__still[hidden], .loupe__mag[hidden] { display: none; }