/* RogueMT2 - one stylesheet, no external assets.
   The site sends a strict Content-Security-Policy, so everything visual has to
   live here: no inline styles, no CDN fonts, no remote images. */

:root {
  --bg:        #0d0b0c;
  --bg-alt:    #141011;
  --panel:     #191415;
  --line:      #2c2325;
  --ink:       #e8e0dd;
  --ink-dim:   #a29793;
  --ink-faint: #6f6462;
  --blood:     #a51f27;
  --blood-lit: #d13a42;
  --gold:      #c8a45c;
  --ok:        #4f8a5b;
  --radius:    3px;
}

* { box-sizing: border-box; }

/* The full-bleed scene sections are sized with 100vw, which in some browsers
   counts the scrollbar and would otherwise open a sliver of horizontal
   scroll across the whole page. */
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
@supports (overflow-x: clip) { html { overflow-x: clip; } }

body {
  margin: 0;
  /* The scene sections are 100vw wide, and vw counts the scrollbar - so they
     overhang the usable width by exactly the scrollbar and open a few pixels of
     sideways scroll. Clipping on body (html only propagates its own overflow to
     the viewport) trims that overhang without creating a scroll container. */
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.65 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

h1, h2, h3 {
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.01em;
  line-height: 1.2;
  margin: 0 0 0.6rem;
}

h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); margin-bottom: 1.2rem; }
h3 { font-size: 1.05rem; color: var(--gold); }

p { margin: 0 0 1rem; }

a { color: var(--blood-lit); text-decoration: none; }
a:hover { text-decoration: underline; }

em { color: var(--ink); font-style: italic; }
strong { color: #fff; }

/* --- chrome --------------------------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.9rem clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
}

.brand { display: flex; align-items: center; gap: 0.6rem; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand-mark { color: var(--blood); font-size: 1.4rem; line-height: 1; }
.brand-logo { display: block; width: 2rem; height: 2rem; object-fit: contain; }
.brand-name {
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav { display: flex; align-items: center; gap: 1.2rem; font-size: 0.95rem; }
.nav a { color: var(--ink-dim); }
.nav a:hover { color: var(--ink); }
.nav a.cta { color: #fff; }

.inline { display: inline; margin: 0; }

.linkish {
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink-dim);
  font: inherit;
  cursor: pointer;
}
.linkish:hover { color: var(--ink); text-decoration: underline; }

/* The header is a single row of six links plus the brand, which is fine on a
   desktop and a jumble on a phone - the links wrap into the brand and each
   other. Below 44rem the bar becomes two stacked rows: brand centred on top,
   navigation centred underneath, with tighter type and a full-width primary
   action so it reads as a button rather than another link. */
@media (max-width: 44rem) {
  .topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
    padding: 0.7rem 1rem;
  }

  .brand { justify-content: center; }
  .brand-name { font-size: 1rem; }
  .brand-logo { width: 1.6rem; height: 1.6rem; }

  .nav {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: 0.9rem;
  }

  .nav a.cta {
    flex-basis: 100%;
    padding: 0.55rem 1rem;
    text-align: center;
  }
}

/* Narrowest common phones. Measured at 320px: all five links still sit on one
   row at this size with room to spare, so nothing is hidden - an earlier version
   dropped Contacts and Discord here and would have hidden them on every ordinary
   phone, since 26rem is 416px and a modern handset reports 390. */
@media (max-width: 22rem) {
  .nav { gap: 0.4rem 0.8rem; font-size: 0.85rem; }
}

/* 62rem read as a blog column on a desktop monitor. 80rem gives the tables and
   the side-by-side leaderboards room to be the page's furniture rather than
   something squeezed into an article. Prose inside still caps at .lede's
   46rem, so line length stays readable. */
.page { margin: 0 auto; max-width: 80rem; padding: 0 clamp(1rem, 4vw, 3rem); }

.foot {
  margin-top: 4rem;
  padding: 2rem clamp(1rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 0.85rem;
}
.foot p { margin: 0; }

/* --- buttons -------------------------------------------------------------- */

.cta, .ghost {
  display: inline-block;
  padding: 0.6rem 1.3rem;
  border: 1px solid var(--blood);
  border-radius: var(--radius);
  background: var(--blood);
  color: #fff;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.cta:hover { background: var(--blood-lit); border-color: var(--blood-lit); text-decoration: none; }

.ghost { background: transparent; border-color: var(--line); color: var(--ink-dim); }
.ghost:hover { border-color: var(--ink-faint); color: var(--ink); text-decoration: none; }

.big { padding: 0.8rem 1.7rem; font-size: 1rem; }
.wide { width: 100%; margin-top: 0.5rem; }

/* --- landing -------------------------------------------------------------- */

.hero {
  padding: clamp(3rem, 9vw, 4rem) 0 clamp(2rem, 5vw, 3.5rem);
  text-align: center;
}

/* The server's name, set as a wordmark rather than a headline. Without this
   the page opened on a sentence and read like an article; a game site leads
   with what it is called. */
.wordmark {
  margin: 0;
  color: #fff;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(2.6rem, 8vw, 5.2rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.05;
  text-transform: uppercase;
  text-shadow: 0 0 42px rgba(165, 31, 39, 0.5);
}

.tagline {
  margin: 0.9rem auto 1.4rem;
  color: var(--blood-lit);
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(0.85rem, 2vw, 1rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero .lede { margin-left: auto; margin-right: auto; }

/* With the logo in place the h1 is just a frame for it - drop the type
   styling so the glow and letterforms of the artwork are not competing
   with a text shadow underneath. */
.wordmark.has-logo { text-shadow: none; line-height: 0; }
.logo {
  width: clamp(11rem, 26vw, 17rem);
  height: auto;
  max-width: 100%;
}

/* The logo is a square PNG on an opaque stone plate, not a cut-out, so against
   the near-black page it reads as a visible grey box. No blend mode removes it
   (the plate is lighter than the page, so `lighten` keeps it and `multiply`
   kills the emblem) - fading the edges out with a mask is what actually works.
   The ellipse is generous so the emblem's spikes are not clipped. */
.logo, .brand-logo {
  -webkit-mask-image: radial-gradient(ellipse closest-side, #000 74%, transparent 100%);
  mask-image: radial-gradient(ellipse closest-side, #000 74%, transparent 100%);
}

/* Discord's own colour, so the button reads as the thing it is without
   needing an icon. */
.ghost.discord { border-color: #5865f2; color: #aab3ff; }
.ghost.discord:hover { border-color: #7c86ff; color: #fff; }

.foot-links { margin-bottom: 0.5rem; }

.eyebrow {
  margin-bottom: 0.8rem;
  color: var(--blood-lit);
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.lede { max-width: 46rem; color: var(--ink-dim); font-size: clamp(1.05rem, 2.2vw, 1.25rem); }
.narrow { max-width: 42rem; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; }
.hero .hero-actions { justify-content: center; }

/* Section heading with a link opposite it - the "Full rankings" pattern. */
.band-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.band-head h2 { margin-bottom: 0.6rem; }
.more {
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.ghost.disabled {
  border-style: dashed;
  color: var(--ink-faint);
  cursor: default;
}

/* --- operator-supplied imagery -------------------------------------------- */

.shot { margin: 2.4rem 0 0; }

.shot img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 30rem;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}


/* --- status strip --------------------------------------------------------- */

.statusbar {
  margin-top: 2.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.status-line {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--line);
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  font-size: 0.9rem;
}

.dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; flex: none; }
.dot.up { background: #58b06a; box-shadow: 0 0 0 3px rgba(88, 176, 106, 0.18); }
.dot.down { background: var(--blood); box-shadow: 0 0 0 3px rgba(165, 31, 39, 0.2); }

.status-detail { color: var(--ink-faint); }

.counters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--line);
}
.counters > div { padding: 1rem 1.1rem; background: var(--panel); }
.counters dt {
  color: var(--ink-faint);
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.counters dd {
  margin: 0.25rem 0 0;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  font-size: 1.6rem;
  line-height: 1.1;
}
.counters dd.grim { color: var(--blood-lit); }

/* --- leaderboards --------------------------------------------------------- */

.boards { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

.board {
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.ladder { margin: 0.8rem 0 0; padding: 0; list-style: none; }
.ladder li {
  display: grid;
  grid-template-columns: 1.8rem 1fr auto;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
}
.ladder li:last-child { border-bottom: 0; }

.ladder .rank { color: var(--ink-faint); font-size: 0.85rem; }
.ladder .who strong { font-weight: 400; }
.ladder .who em { display: block; color: var(--ink-faint); font-size: 0.78rem; font-style: normal; }
.ladder .lvl {
  color: var(--gold);
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  font-size: 1.05rem;
}

.memorial .rank { color: var(--blood); }
.memorial .who strong { color: var(--ink-dim); }
.memorial .lvl { color: var(--ink-faint); }

/* --- comparison ----------------------------------------------------------- */

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

.compare { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 0.92rem; }
.compare th, .compare td { padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--line); text-align: left; }
.compare thead th {
  color: var(--ink-faint);
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 400;
}
.compare tbody th { color: var(--ink-dim); font-weight: 400; }
.compare td { color: var(--ink-faint); }
.compare .us { background: rgba(165, 31, 39, 0.09); color: var(--ink); }
.compare thead .us { color: var(--blood-lit); }

/* --- start steps ---------------------------------------------------------- */

.startsteps { margin: 0; padding: 0; list-style: none; }
.startsteps li {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 1rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--line);
}
.startsteps li:last-child { border-bottom: 0; }
.startsteps h3 { margin-bottom: 0.35rem; }
.startsteps p { margin: 0 0 0.6rem; color: var(--ink-dim); font-size: 0.95rem; }
.startsteps p:last-child { margin-bottom: 0; }

.startsteps .num {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-faint);
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  font-size: 0.95rem;
}
.startsteps li.done .num { border-color: var(--ok); color: var(--ok); }
.startsteps li.pending .num { border-style: dashed; }
.startsteps li.pending h3 { color: var(--ink-faint); }
.pending-note { color: var(--ink-faint); }

.band { padding: clamp(2rem, 5vw, 3.2rem) 0; border-top: 1px solid var(--line); }
/* background-COLOR, not the `background` shorthand: the shorthand resets
   background-image to none, and at .band.alt strength that silently wiped the
   scene artwork off every alternate section. */
.band.alt { background-color: var(--bg-alt); margin: 0 calc(-1 * clamp(1rem, 4vw, 3rem)); padding-inline: clamp(1rem, 4vw, 3rem); }

.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

.card {
  padding: 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.card p { margin: 0; color: var(--ink-dim); font-size: 0.95rem; }

.split { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

.lost { color: var(--blood-lit); }
.kept { color: var(--gold); }

ul.plain { margin: 0; padding-left: 1.1rem; color: var(--ink-dim); }
ul.plain li { margin-bottom: 0.4rem; }

.note { margin-top: 1.8rem; padding-left: 1rem; border-left: 2px solid var(--blood); color: var(--ink-dim); }

.facts { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.facts th, .facts td { padding: 0.7rem 0.4rem; border-bottom: 1px solid var(--line); text-align: left; }
.facts th { color: var(--ink-dim); font-weight: 400; }
.facts td { color: var(--ink); text-align: right; }

/* --- forms ---------------------------------------------------------------- */

.form-page { max-width: 27rem; margin: 0 auto; padding: clamp(2.5rem, 7vw, 4rem) 0; }
.wide-page { max-width: 34rem; }

/* The landing-page h1 scale is far too large for a 27rem column - it wraps
   "Create an account" onto two lines and dwarfs the form under it. */
.form-page h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); margin-bottom: 0.4rem; }

.form-page h2 {
  margin-top: 2.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  font-size: 1.15rem;
}

.sub { color: var(--ink-dim); font-size: 0.95rem; }

label {
  display: block;
  margin: 1.1rem 0 0.35rem;
  color: var(--ink-dim);
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}

/* type="email" was missing here and rendered with the browser's default white
   field on the contact form - unreadable against the dark page. */
input[type="text"], input[type="password"], input[type="email"] {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #0a0809;
  color: var(--ink);
  font: inherit;
}
input:focus { border-color: var(--blood); outline: 2px solid rgba(165, 31, 39, 0.35); outline-offset: 1px; }

.hint { margin: 0.4rem 0 0; color: var(--ink-faint); font-size: 0.82rem; line-height: 1.5; }

/* "(optional)" next to a label. Same colour as a hint, but it has to sit on
   the label line rather than under the field it qualifies. */
.hint-inline { color: var(--ink-faint); letter-spacing: 0; text-transform: none; }

.alert {
  margin: 1.2rem 0;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid;
  border-radius: var(--radius);
  font-size: 0.92rem;
}
.alert.error { border-color: var(--blood); background: rgba(165, 31, 39, 0.12); color: #f0c9cb; }
.alert.ok { border-color: var(--ok); background: rgba(79, 138, 91, 0.12); color: #cfe6d4; }
.inline-alert { display: inline-block; margin: 0.5rem 0 0; }

/* --- roster --------------------------------------------------------------- */

.roster { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.roster th, .roster td { padding: 0.6rem 0.4rem; border-bottom: 1px solid var(--line); text-align: left; }
.roster th { color: var(--ink-faint); font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 400; }
.roster tr.fallen td { color: var(--ink-faint); text-decoration: line-through; }
.roster tr.fallen td:last-child { color: var(--blood-lit); text-decoration: none; }

/* Community links on /contact, in place of the form that used to live there. */
.contact-links { display: grid; gap: 0.8rem; margin: 1.4rem 0 2rem; }

.contact-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
}
.contact-card:hover { border-color: var(--blood); text-decoration: none; }

.contact-icon { flex: none; width: 1.6rem; height: 1.6rem; }
.contact-icon.discord { fill: #5865f2; }
.contact-icon.whatsapp { fill: #25d366; }

.contact-name {
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  font-size: 1.02rem;
}

/* --- scene backgrounds ----------------------------------------------------- */
/*
 * Each band carries one of the three class banners. `background-attachment:
 * fixed` is what produces the effect: the artwork holds still against the
 * viewport while its section scrolls over it, then the next section's art takes
 * over - the background snaps from one to the next at the section boundary,
 * with no JavaScript involved.
 *
 * The art is 1584x~215, about 7.3:1. `cover` would be wrong for that: on a
 * normal viewport it scales the image roughly fivefold and crops away
 * everything but a horizontal sliver. `100% auto` draws it at full viewport
 * width and its own aspect instead, which keeps it near 1:1 and sharp, and puts
 * the characters - who all stand on the right of these banners - outside the
 * centred text column on wide screens.
 *
 * Selectors are written out at .band.alt.scene strength and this block sits last
 * in the file on purpose. `.band` sets `padding: <n> 0` and `.band.alt` sets
 * `margin: 0 <n>`; both are shorthands, so a plainer `.scene` rule loses the
 * inline padding to source order and the inline margin to specificity, and the
 * full-bleed silently does not happen.
 */

.hero.scene,
.band.scene,
.band.alt.scene {
  /* Break out of .page's 80rem column so the art spans the viewport, while the
     content inside stays aligned to that same column. */
  margin-inline: calc(50% - 50vw);
  padding-inline: max(clamp(1rem, 4vw, 3rem), calc(50vw - 37rem));

  /* Three layers, topmost first:
       1. a flat veil, so text stays legible over the art - heavier now that
          the art fills the whole section rather than a band;
       2. the banner itself, at its own aspect;
       3. a fill in the banner's own edge colours, which is what makes the
          section look covered from top to bottom.
     All three cover the viewport. */
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center center, right center, center center;
  background-attachment: fixed, fixed, fixed;
}

/*
 * The fill colours are sampled from the top and bottom rows of each banner. They
 * are no longer visible behind a covering image, but they are what shows if a
 * file is missing or still loading, so the section is never bare black.
 *
 * The art is sized by HEIGHT, not set to cover, and this is the whole trick.
 *
 * The bg*.jpg files are the supplied banners resampled to 3x with Lanczos, so
 * they are 654px tall. Drawn at 62% of a 1080-tall viewport that is about 670px
 * - very close to 1:1, so the artwork renders at its own resolution and stays
 * crisp. Setting it to `cover` instead forced roughly a fivefold enlargement of
 * the original and looked pixellated; drawing it at full width only
 * (`100% auto`) left a thin 24%-tall strip. 62% is the middle: a character tall
 * enough to carry the section, at a scale the source can actually support.
 *
 * The clamp stops it collapsing on short viewports and stops it over-enlarging
 * on very tall ones, where it would go soft again.
 *
 * Layer three still covers, so the sampled colour fills the space above and
 * below the art and the section reads as full-height regardless.
 *
 * The right-hand anchor is what makes the crop worth having: the characters
 * stand at that edge in all three, and a centred crop would show only the empty
 * middle.
 */

.scene-1 {
  background-image:
    linear-gradient(rgba(13, 11, 12, 0.55), rgba(13, 11, 12, 0.55)),
    url("/media/bg1.jpg"),
    linear-gradient(to bottom, #200a04 0%, #200a04 40%, #29120b 60%, #29120b 100%);
}

.scene-2 {
  background-image:
    linear-gradient(rgba(13, 11, 12, 0.55), rgba(13, 11, 12, 0.55)),
    url("/media/bg2.jpg"),
    linear-gradient(to bottom, #1d161f 0%, #1d161f 40%, #130f19 60%, #130f19 100%);
}

.scene-3 {
  background-image:
    linear-gradient(rgba(13, 11, 12, 0.55), rgba(13, 11, 12, 0.55)),
    url("/media/bg3.jpg"),
    linear-gradient(to bottom, #17170c 0%, #17170c 40%, #16160b 60%, #16160b 100%);
}

/* A section with art does not also need the alternating panel colour - the
   imagery is the rhythm now, and the tint muddies the art. */
.band.alt.scene { background-color: transparent; }

/* iOS Safari does not honour background-attachment: fixed - it silently falls
   back to scroll and mis-scales the layer. Pin it explicitly there and on
   anything without a real pointer, where the effect costs more in repaint than
   it returns. */
@media (hover: none), (max-width: 48rem) {
  .hero.scene,
  .band.scene,
  .band.alt.scene {
    background-attachment: scroll, scroll, scroll;
    background-position: center center, center top, center center;
  }

  /* `scroll` paints the background per element, so with three sections sharing
     an image the same artwork appeared three times running - once per section -
     instead of the single held backdrop it is on the desktop. On a touch screen
     the art is therefore drawn only on the section that opens each group; the
     other two carry the flat colour alone, which reads as one continuous
     backdrop rather than a repeat.

     Written at .scene-N plus two classes so it outranks the plain .scene-N
     rules that set all three layers. */
  .scene:not(.scene-lead).scene-1 {
    background-image:
      linear-gradient(rgba(13, 11, 12, 0.55), rgba(13, 11, 12, 0.55)),
      linear-gradient(to bottom, #200a04 0%, #200a04 40%, #29120b 60%, #29120b 100%);
  }

  .scene:not(.scene-lead).scene-2 {
    background-image:
      linear-gradient(rgba(13, 11, 12, 0.55), rgba(13, 11, 12, 0.55)),
      linear-gradient(to bottom, #1d161f 0%, #1d161f 40%, #130f19 60%, #130f19 100%);
  }

  .scene:not(.scene-lead).scene-3 {
    background-image:
      linear-gradient(rgba(13, 11, 12, 0.55), rgba(13, 11, 12, 0.55)),
      linear-gradient(to bottom, #17170c 0%, #17170c 40%, #16160b 60%, #16160b 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero.scene,
  .band.scene,
  .band.alt.scene { background-attachment: scroll, scroll, scroll; }
}