/* Parasite Games site — one stylesheet for every page, studio and game alike.
   No external fonts, no scripts, no third-party requests: a privacy page that
   phoned home to a CDN would contradict its own text.

   Layout follows the studio-site convention: a thin sticky bar with the wordmark
   left and uppercase nav right, and a full-bleed hero band per page. Privacy,
   terms and support are site-wide pages at the root rather than per-game
   documents, so the footer carries the same three links everywhere. */

:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --raised: #f7f5f1;
  --text: #14120f;
  --muted: #6b635a;
  --accent: #3b4ce8;
  --accent-ink: #ffffff;
  --accent-soft: #e7e9fc;
  --border: #e3ddd4;
  --hero-from: #3b4ce8;
  --hero-to: #141a4d;
  --hero-text: #f4f1ea;
  --fill-bg: #fff3c4;
  --fill-text: #6b4e00;
  --fill-border: #e0c14a;
}

* { box-sizing: border-box; }

/* The key-art hero has no visible heading, but a page still owes assistive tech
   and search engines one h1 — this is that h1, present in the document and
   absent from the picture. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 46rem; margin: 0 auto; padding: 0 1.5rem; }
.wrap.wide { max-width: 66rem; }

/* ---- sticky bar ---- */

/* The bar floats over the page rather than sitting on a rule. The hairline that
   used to close it off read as a seam against the key art, which starts on white
   and meets it edge to edge — with nothing between them the art simply runs up
   under the bar.

   Where the browser can blur, the bar goes translucent and frosts what scrolls
   beneath it, which is what separates the two layers now that no border does.
   Where it cannot, the opaque `--surface` stays and the bar is simply solid;
   that is the fallback, not a degraded state. */
header.site {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header.site {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.5rem;
  flex-wrap: wrap;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* The wordmark is now artwork, not type. The file is transparent and the drawing
   is pure black ink, so it sits straight on the bar with no plate behind it —
   which only holds because the site renders one light palette.

   The file is cropped above the cables' upper ends on purpose. At full height the
   lettering is 18% of the image, which lands at 9px inside the bar and cannot be
   read; the crop lifts the same lettering to 15px without changing the drawing.
   3.5rem is the tallest the bar takes without growing. */
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand img {
  display: block;
  height: 3.5rem;
  width: auto;
}

.bar nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.bar nav a {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  text-decoration: none;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  white-space: nowrap;
}

.bar nav a:hover, .bar nav a:focus { color: var(--text); background: var(--raised); }

.bar nav a.on {
  background: var(--accent);
  color: var(--accent-ink);
}

.bar nav a.on:hover, .bar nav a.on:focus { background: var(--accent); color: var(--accent-ink); }

/* ---- language picker ----
   A <details> rather than a scripted menu, because this site ships no JavaScript
   and a language switcher is not worth breaking that for. The browser gives the
   toggle, the keyboard behaviour and the open state for free.

   The trade-off is that it does not close on an outside click — that genuinely
   needs script. Every item in it navigates away, so the state rarely outlives the
   click that opened it.

   The visible labels are the two-letter codes; the full language name rides on
   `aria-label`, so a screen reader announces "English" rather than spelling out
   E-N. `lang` stays on the item for the other language — it is what tells the
   browser which casing rules to apply, and it is why this was ever a problem:
   under `lang="tr"` a Turkish uppercasing of "English" produces ENGLİSH with the
   dotted capital. The codes are immune to that, but the attribute still belongs
   there for the label underneath. */
.langpick {
  position: relative;
  margin-left: 0.4rem;
}

.langpick > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  white-space: nowrap;
}

.langpick > summary::-webkit-details-marker { display: none; }
.langpick > summary::marker { content: ""; }

.langpick > summary::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 0.26rem solid transparent;
  border-right: 0.26rem solid transparent;
  border-top: 0.3rem solid currentColor;
  transition: transform 0.15s ease;
}

.langpick[open] > summary::after { transform: rotate(180deg); }
.langpick > summary:hover, .langpick > summary:focus-visible { color: var(--text); background: var(--raised); }
.langpick[open] > summary { color: var(--text); background: var(--raised); }

/* Opaque, unlike the bar above it — a translucent panel over a translucent bar
   would stack two veils and leave the items washed out. */
.langmenu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  z-index: 20;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.langmenu a {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  text-decoration: none;
  padding: 0.42rem 0.9rem;
  border-radius: 999px;
  white-space: nowrap;
}

.langmenu a:hover, .langmenu a:focus { color: var(--text); background: var(--raised); }

.langmenu a[aria-current] {
  background: var(--accent);
  color: var(--accent-ink);
}

.langmenu a[aria-current]:hover, .langmenu a[aria-current]:focus {
  background: var(--accent);
  color: var(--accent-ink);
}

/* ---- collapsing nav ----
   A checkbox, not a script — this site ships no JavaScript, and a menu that stops
   opening without one would be worse than no menu. `<details>` was tried first and
   does not work here: a closed `<details>` hides its content in a way `display`
   cannot override, so the wide layout would have had no nav at all.

   Above 48rem the checkbox and its label are invisible and the nav is simply a
   row. Below it the label becomes the button, the nav becomes a panel hanging off
   the bar, and `:checked` is what opens it. Navigating away resets the checkbox,
   which is the behaviour you want anyway. */
.nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.nav-button {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  cursor: pointer;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.nav-button svg { display: block; width: 1.25rem; height: 1.25rem; }
.nav-button:hover { color: var(--text); background: var(--raised); }
.nav-toggle:focus-visible + .nav-button { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 48rem) {
  .bar { position: relative; }
  .nav-button { display: inline-flex; }

  .bar nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 15;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    padding: 0.6rem 1.5rem 0.9rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  }

  .nav-toggle:checked ~ nav { display: flex; }

  /* 44px is the smallest comfortable touch target; the desktop padding left these
     at 38 and the button itself at 42. Measured in a real 375px viewport, not
     assumed. */
  .bar nav a {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.4rem 0.8rem;
  }

  .langpick > summary { min-height: 2.75rem; }
  .langmenu a { min-height: 2.75rem; display: flex; align-items: center; }

  /* The picker drops its dropdown inline here — an absolutely positioned menu
     inside an absolutely positioned panel lands off the edge on a narrow screen. */
  .langpick { margin-left: 0; }
  .langmenu {
    position: static;
    flex-direction: row;
    margin-top: 0.35rem;
    box-shadow: none;
    background: none;
    border: 0;
    padding: 0;
  }
}

/* ---- hero band ---- */

.hero {
  background: linear-gradient(160deg, var(--hero-from), var(--hero-to));
  color: var(--hero-text);
  text-align: center;
  padding: 4.5rem 0;
}

/* `doc` is the band on the site's documents — privacy, terms, support. They carry
   a title and nothing else, while pages that lead somewhere carry a title and a
   strapline, so the same padding would leave the documents shorter than the rest
   of the site and the fold would shift as you moved between them.

   The strapline occupies 2.882rem — a 1.1rem top margin over one 1.08rem line at
   the inherited 1.65 line-height — so half of it is added to each side here and
   the two bands come out level. Splitting it rather than adding it all below also
   keeps the title on the same optical centre as the overview's title-plus-line.

   This holds while a strapline stays one line. On a narrow screen it wraps and the
   page carrying it grows; the documents stay put, which is the right way round —
   a band that grows past its content would be worse than one a little shorter. */
.hero.doc { padding: 5.941rem 0; }

/* ---------------------------------------------------------------------------
   Scene heroes — a painting behind the title instead of the flat navy band.

   Two pages carry one: the games listing and BrambleWorld's own page. Everything
   they share lives on `.scene`; the second class only names which painting. The
   band keeps its height, so each 3.4:1 image is cropped into it by `cover`.

   The scrim is not decoration. Measured on the rendered page, white type over the
   bare listing painting reaches 3.47:1 at its worst — under the 4.5:1 that body
   text needs — and the wash lifts it to 6.41:1. It is mixed from the same two
   navy values the flat band uses, and it is a gradient rather than a flat fill
   because the top of a frame is usually lighter than the ground at the bottom.
   --------------------------------------------------------------------------- */
.hero.scene {
  position: relative;
  background-color: var(--hero-to);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero.scene.listing { background-image: linear-gradient(180deg, rgba(20, 26, 77, 0.78), rgba(20, 26, 77, 0.62) 55%, rgba(20, 26, 77, 0.72)), url("img/scene/games-2000.jpg"); }
.hero.scene.bramble { background-image: linear-gradient(180deg, rgba(20, 26, 77, 0.78), rgba(20, 26, 77, 0.62) 55%, rgba(20, 26, 77, 0.72)), url("img/scene/bramble-2000.jpg"); }

@supports (background-image: image-set(url("i.webp") 1x)) {
  .hero.scene.listing {
    background-image: linear-gradient(180deg, rgba(20, 26, 77, 0.78), rgba(20, 26, 77, 0.62) 55%, rgba(20, 26, 77, 0.72)),
      image-set(url("img/scene/games-2000.webp") 1x, url("img/scene/games-3400.webp") 2x);
  }
  .hero.scene.bramble {
    background-image: linear-gradient(180deg, rgba(20, 26, 77, 0.78), rgba(20, 26, 77, 0.62) 55%, rgba(20, 26, 77, 0.72)),
      image-set(url("img/scene/bramble-2000.webp") 1x, url("img/scene/bramble-3400.webp") 2x);
  }
}

/* Below this width the band is narrower than 3.4 times its own height, so `cover`
   switches to scaling by height and the whole vertical frame enters the crop.
   Contrast survives that (measured 6.03:1), so this is a composition call: a third
   of a phone-sized listing band was going to empty sky, shrinking the maze the
   picture is about. The horizon crop fills it with the scene instead, at 35KB
   against 112KB. BrambleWorld's painting has no empty sky to lose — its top is
   canopy — so it keeps the full frame and only the listing swaps. */
@media (max-width: 56rem) {
  .hero.scene.listing { background-image: linear-gradient(180deg, rgba(20, 26, 77, 0.78), rgba(20, 26, 77, 0.62) 55%, rgba(20, 26, 77, 0.72)), url("img/scene/games-narrow-900.jpg"); }

  @supports (background-image: image-set(url("i.webp") 1x)) {
    .hero.scene.listing {
      background-image: linear-gradient(180deg, rgba(20, 26, 77, 0.78), rgba(20, 26, 77, 0.62) 55%, rgba(20, 26, 77, 0.72)),
        image-set(url("img/scene/games-narrow-900.webp") 1x, url("img/scene/games-narrow-1600.webp") 2x);
    }
  }
}

.hero h1 {
  margin: 0;
  font-size: clamp(2rem, 7vw, 3.4rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--hero-text);
}

/* Hero titles are uppercased in CSS rather than typed that way, so a Turkish page
   renders GİZLİLİK and not the dotless GIZLILIK a hand-typed heading would give.
   A product name is the exception: BrambleWorld is set the way the name is
   written everywhere else on the site, because shouting it in caps reads as a
   different wordmark from the one on the cards that link to it. */
.hero h1.wordmark { text-transform: none; }

.hero p {
  margin: 1.1rem auto 0;
  max-width: 34rem;
  font-size: 1.08rem;
  color: rgba(244, 241, 234, 0.82);
}

.hero .fill-note { color: inherit; }

/* ---- document switcher ----
   The pill under a game's hero. It held four peers — overview, privacy, terms,
   support — until the legal documents moved to the root and stopped belonging to
   any one game. What is left marks where you are in the game's own section and
   draws the rule that separates the hero from the page; a second title would put
   its own pill here, not another copy of the site-wide documents. */

.docnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem 0 0;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1.5rem;
}

.docnav a {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.42rem 1rem;
  white-space: nowrap;
}

.docnav a:hover, .docnav a:focus { color: var(--text); border-color: var(--muted); }

.docnav a.on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.docnav a.on:hover, .docnav a.on:focus { color: var(--accent-ink); border-color: var(--accent); }

/* ---- text ---- */

main { padding: 2.5rem 0 4rem; }

/* h2 carries a 2.75rem top margin to separate sections, but main has padding of
   its own so that margin cannot collapse into it — the first heading on a page
   was inheriting both, and under the key-art hero the two stacked into ~127px
   of dead space before the word "Games". Sections still get their gap; only the
   opening one loses a margin it had no section to separate it from. */
main > :first-child { margin-top: 0; }

h2 {
  font-size: 1.22rem;
  font-weight: 700;
  margin: 2.75rem 0 0.75rem;
  letter-spacing: -0.01em;
}

h3 { font-size: 1.02rem; margin: 1.75rem 0 0.5rem; }

.lede { font-size: 1.12rem; color: var(--muted); margin: 0 0 1.25rem; }

.updated {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0 0 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

p, ul, ol { margin: 0 0 1rem; }
li { margin-bottom: 0.4rem; }
a { color: var(--accent); }
strong { font-weight: 600; }
code { font-size: 0.92em; }

/* The game's logo, above the lede on its own page. Deliberately small: the hero
   already says the name in type, so this is the wordmark as a picture rather than
   a second title — sized to sit under the document pills without competing with
   them. It carries `alt=""` for the same reason. A screen reader that has just
   read the h1 gains nothing from hearing the name again.

   The PNG is transparent, so it needs no plate; the drop shadow baked into the
   art is dark, which is why it is not given one here either. */
.game-logo {
  display: block;
  width: 100%;
  max-width: 20rem;
  height: auto;
  margin: 0 0 1.75rem;
}

/* ---- blocks ---- */

/* The top margin matters as much as the bottom one: a card following running text
   used to butt straight into it, because nothing in the flow supplies that gap —
   the screens strip's hint line ends on a zero bottom margin, so the "Get the
   game" card sat directly against it. A card that opens a page gives the margin
   back to `main > :first-child`, and were two ever stacked, the two margins would
   collapse to the larger of the pair rather than sum. */
.card {
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem 1.4rem;
  margin: 1.5rem 0 1.25rem;
}

.card h3 { margin-top: 0; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }

.note {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  padding: 1rem 1.2rem;
  margin: 0 0 1.75rem;
  font-size: 0.97rem;
}

.note p:last-child { margin-bottom: 0; }

/* ---- games grid ----
   One card per released game, and the card *is* its cover: nothing but a 4:5
   portrait painting with the game's wordmark inside it, filling the tile to all
   four corners. Adding a title means adding one <a class="game">; the grid reflows
   on its own, so nothing here changes when the catalogue grows.

   Gone with the art taking over: the visible <h3>, the line of description, and
   the status pill with it — `.copy` and `.status` were removed rather than left
   unused. A release badge would have to be painted into the cover now. */

.games {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1.1rem;
  margin: 0 0 2.5rem;
}

a.game {
  display: block;
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  /* positioned so the hover scale can lift this card over its neighbours; with a
     single game in the grid it changes nothing, with two it stops the one on the
     left growing underneath the one on its right. */
  position: relative;
  text-decoration: none;
  color: var(--text);
  transition: transform 0.25s ease;
}

/* Pointing at a card grows the whole tile from its centre. 1.03 adds about 10px
   across a 324px card — comfortably inside the 17.6px gutter, so a growing card
   never touches its neighbour. */
a.game:hover, a.game:focus-visible { transform: scale(1.03); z-index: 1; }

/* Keyboard focus is an outline rather than a border colour, matching the screens
   strip and the nav button. That is not only consistency: an accent border draws a
   visible arc across the two top corners, because the painting is clipped to the
   card's inner curve while the border is stroked on the outer one, and the mismatch
   stops hiding the moment the border is no longer near-invisible. An outline is
   painted outside the box and never meets that seam. */
a.game:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The clip lives here rather than on the card alone: 13px is the card's own inner
   curve (14px radius less its 1px border), so the painting follows the border
   exactly, on all four corners now that the art is the whole tile. The layer is
   deliberate — a rounded clip inside an ancestor that is itself being scaled is the
   case browsers have historically let leak at the corners. */
.game picture {
  display: block;
  border-radius: 13px;
  overflow: hidden;
  transform: translateZ(0);
}

/* The ratio is declared here as well as in the markup so the grid reserves the
   card's height before the file arrives. `cover` is insurance: the published files
   are already 4:5, so nothing is actually cropped. */
.game img {
  display: block;
  width: 100%;
  /* height:auto is load-bearing, not boilerplate: the width/height attributes on
     the tag land as a real `height: 1350px`, which wins over aspect-ratio and
     stretches the card to the file's pixel height. */
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  a.game { transition: none; }
  a.game:hover, a.game:focus-visible { transform: none; }
}

/* Every value the developer still has to replace before publishing.
   Deliberately loud: an unfilled placeholder must be impossible to miss. */
mark.fill {
  background: var(--fill-bg);
  color: var(--fill-text);
  border: 1px dashed var(--fill-border);
  border-radius: 4px;
  padding: 0 0.3em;
  font-style: normal;
}

table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-weight: 700; color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.09em; }

.table-scroll { overflow-x: auto; }

/* ---- footer ---- */

footer.site {
  border-top: 1px solid var(--border);
  background: var(--raised);
  padding: 2rem 0 2.5rem;
  font-size: 0.9rem;
  color: var(--muted);
}

/* One row: the copyright line holds the left edge, the links the right, both on
   the same baseline. The set is identical on every page — a footer that changed
   with the section made the site feel like several sites. It wraps to two rows
   when the two halves stop fitting, links first. */
footer.site .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
}

footer.site p { margin: 0; }
footer.site a { color: var(--muted); text-decoration: none; }
footer.site a:hover, footer.site a:focus { color: var(--accent); text-decoration: underline; }

footer.site nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }

@media (max-width: 34rem) {
  body { font-size: 16px; }

  /* The bar stays sticky here now. It used to scroll away because the nav wrapped
     to a second row and ate the screen; the nav collapses into a button instead,
     so the bar is one short row at every width. */
  .bar {
    min-height: 0;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
    gap: 0.6rem;
  }

  .docnav { gap: 0.4rem; }
  .docnav a { padding: 0.38rem 0.8rem; font-size: 0.76rem; }

  .hero { padding: 3.25rem 0; }
  .hero.doc { padding: 4.691rem 0; }

}

/* ---------------------------------------------------------------------------
   Key-art hero, used on the two studio home pages.

   The artwork is painted on white with the characters low in the frame, and it
   carries the band alone — the studio name and strapline that used to sit under
   it moved into the page as an "About Us" section, so the art is not competing
   with a wordmark that already appears in the bar 200px above it. Overlaying the
   text was tried before that and the title landed on the bear.

   The band's own background is white, like the painting's — a dark band behind a
   white JPEG shows as a hard edge the moment the image letterboxes.

   The art runs edge to edge — it has no white margin of its own, content reaches
   the first and last column — so no max-width bounds it. What used to be a white
   strip either side was this rule, not the file.

   Two crops of the same painting, picked by <picture>, because one aspect cannot
   serve both ends of the range. The wide one is 3.4:1: at that ratio a 1920px
   window gets a 565px band instead of the 857px a 2.24:1 image would force, so
   the games grid still clears the fold. Below 48rem that ratio collapses to a
   ~115px sliver, so narrow screens get the 2:1 centre crop instead — which is
   exactly the original composition, every character intact.

   The ratios are declared here rather than left to the file, so the band reserves
   its height before either source loads and nothing shifts underneath it.

   max-height is a backstop for very tall windows only; it crops from the top
   anchor, eating hedge rather than the bear's ears — the hedge is repeating
   foliage with no character in it below y=720 of 893.
   --------------------------------------------------------------------------- */
.hero.art {
  padding: 0;
  background: #ffffff;
  overflow: hidden;
}
.hero.art .hero-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3.4 / 1;
  max-height: 80vh;
  object-fit: cover;
  object-position: 50% 0;
  margin: 0;
}

@media (max-width: 48rem) {
  .hero.art .hero-art { aspect-ratio: 2 / 1; }
}



/* ---------------------------------------------------------------------------
   Screens — a sideways strip of gameplay shots on the game page.

   Scroll-snap rather than a scripted carousel, because this site ships no
   JavaScript and a policy page that loaded a slider library would be arguing
   with itself. The browser does the work: touch swipes, trackpads scroll
   sideways, and a keyboard reaches it because the strip is focusable.

   Each shot keeps its 2778x1284 aspect, so the strip's height is set by the
   width of one slide and nothing reflows as the images load — they carry their
   intrinsic width and height for the same reason.
   --------------------------------------------------------------------------- */
.shots {
  display: flex;
  gap: 0.9rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.6rem;
  scrollbar-width: thin;
}
.shots:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 14px;
}
.shots .shot {
  flex: 0 0 min(100%, 34rem);
  margin: 0;
  scroll-snap-align: center;
}
.shots .shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--raised);
}
.shots-hint {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}