/* Adventure Buddy: homepage styles. Plain CSS, no build step.
   The supplied artwork is the centerpiece; this file only frames it with
   navigation, buttons and footer. */

@font-face {
  font-family: "Alegreya";
  src: url("/assets/fonts/alegreya-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Handwriting (About letter, Support signature); only downloaded where used. */
@font-face {
  font-family: "Caveat";
  src: url("/assets/fonts/caveat-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #120904;
  --walnut-950: #140b05;
  --walnut-900: #1d1009;
  --walnut-800: #2a170c;
  --gold-100: #ffeab0;
  --gold-300: #ffd27a;
  --gold-500: #eeab3e;
  --cream: #f6e7c8;
  --cream-dim: #d8c09a;
  --periwinkle: #c9d2ff;
  --magic: #7fb4ff;

  --font-body: "Alegreya", "Palatino Linotype", "Book Antiqua", Georgia, serif;

  /* Supplied wide desktop artwork is 1774 x 887 (2:1). Desktop art is scaled height-first: it
     always fills the visible viewport height (browser toolbars and taskbar already excluded)
     and its width follows from the aspect ratio. */
  --art-ratio: 2;
  --vh: 100vh;
  --art-w: calc(var(--vh) * var(--art-ratio));
  color-scheme: dark;
}
@supports (height: 100dvh) {
  :root { --vh: 100dvh; }
}

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

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

body {
  position: relative;
  margin: 0;
  min-height: var(--vh);
  background:
    radial-gradient(ellipse 80% 60% at 30% 40%, rgba(255, 150, 60, .12), transparent 70%),
    linear-gradient(180deg, var(--walnut-800), var(--walnut-950));
  background-color: var(--walnut-950);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.5;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }

:focus-visible {
  outline: 3px solid var(--gold-100);
  outline-offset: 4px;
  border-radius: 6px;
}

/* Visually hidden but available to assistive technology. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--gold-300);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---------- Navigation (overlay pill in the upper right) ----------
   Fixed to the visible viewport on every page, so it stays in reach while scrolling. */

.site-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10;
  padding: clamp(12px, 2vh, 22px) clamp(16px, 2.2vw, 40px);
  padding-top: max(clamp(12px, 2vh, 22px), env(safe-area-inset-top));
  padding-right: max(clamp(16px, 2.2vw, 40px), env(safe-area-inset-right));
}

.site-nav ul {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 6px 14px;
  list-style: none;
  border: 1px solid rgba(214, 164, 84, .5);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(38, 21, 11, .74), rgba(18, 10, 5, .66));
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 160, .12),
    0 8px 24px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.site-nav li { display: flex; align-items: center; }
/* Small gold diamond between links */
.site-nav li + li::before {
  content: "";
  width: 5px;
  height: 5px;
  margin: 0 4px;
  transform: rotate(45deg);
  background: var(--gold-500);
  opacity: .8;
}
.site-nav a {
  position: relative;
  display: inline-block;
  padding: 6px 14px;
  font-size: clamp(1.05rem, 1.15vw, 1.3rem);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--cream);
  text-decoration: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
  transition: color .2s, text-shadow .2s;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 3px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-300), transparent);
  transform: scaleX(0);
  transition: transform .25s;
}
.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--gold-100);
  text-shadow: 0 0 10px rgba(255, 190, 90, .55), 0 1px 3px rgba(0, 0, 0, .9);
}
.site-nav a:hover::after,
.site-nav a:focus-visible::after { transform: scaleX(1); }
/* Current page: each page marks its own link with aria-current="page". */
.site-nav a[aria-current="page"] { color: var(--gold-300); }
.site-nav a[aria-current="page"]::after { transform: scaleX(1); opacity: .7; }

.nav-toggle { display: none; }

/* ---------- Hero stage (desktop) ----------
   The stage is exactly the displayed artwork: full viewport height, width from the ratio.
   Anything positioned inside it in percentages stays on the same spot of the painting.
   Narrower windows crop the sides, 30/70 toward the right so the logo on the left survives;
   wider windows centre the stage on solid walnut. The artwork is never blurred or feathered.

   Artwork landmarks (1774 x 887): logo x 265-900, y 265-570 (centre x ~575); dragon from
   x ~870 (wing tip, y 470-560); books from x ~785, y ~685; leafy sprig x 820-950, y 640-690. */

.hero {
  position: relative;
  height: var(--vh);
  overflow: hidden;
  background: var(--walnut-950);
}

.hero__stage {
  position: absolute;
  top: 0;
  left: max(calc((100% - var(--art-w)) * .3), calc((100% - var(--art-w)) / 2));
  width: var(--art-w);
  aspect-ratio: 1774 / 887;
  container-type: inline-size;
}

.hero__art {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hero__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Shown only if the artwork is missing; positioned where the painted logo sits. */
.hero__fallback {
  position: absolute;
  left: 15%;
  top: 36%;
  z-index: 0;
  width: 36%;
  text-align: center;
}
.hero__fallback h1 {
  margin: 0;
  font-size: 5cqw;
  font-weight: 700;
  line-height: 1;
  color: var(--gold-300);
  text-shadow: 0 3px 0 #3a1d06;
}

/* Tagline: real text centred under the painted logo (artwork x 575, from y 571). */
.hero__tagline {
  position: absolute;
  left: 32.41%;
  top: 64.37%;
  z-index: 2;
  margin: 0;
  transform: translateX(-50%);
  font-size: clamp(14px, 1.05cqw, 24px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .01em;
  text-align: center;
  white-space: nowrap;
  color: #f7ecd6;
  text-shadow:
    0 1px 2px #000,
    0 0 8px rgba(0, 0, 0, .95),
    0 0 20px rgba(0, 0, 0, .75);
}
.hero__tagline span { display: block; }

/* Buttons: a centred pair under the tagline (artwork x ~560, from y 627), above the books
   (y ~685) and left of the leafy sprig (x ~820). */
.hero__actions {
  position: absolute;
  left: 31.57%;
  top: 70.69%;
  z-index: 2;
  transform: translateX(-50%);
}
.hero__buttons {
  display: grid;
  grid-template-columns: repeat(2, 15.5em);
  gap: 1.2em;
  font-size: clamp(12px, .89cqw, 22px);
}
.hero__buttons .btn { min-height: 3.25em; padding-block: .45em; }

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

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65em;
  width: 100%;
  min-height: 3.4em;
  padding: .5em 1em;
  border: 2px solid transparent;
  border-radius: .75em;
  font: 700 1em / 1.1 var(--font-body);
  letter-spacing: .01em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s, box-shadow .25s, filter .25s;
}
.btn__icon { width: 1.5em; height: 1.5em; flex: none; }
.btn__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

/* Gem studs on each end of the frame */
.btn::before, .btn::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  transform: rotate(45deg);
  background: var(--gold-100);
  box-shadow: 0 0 6px rgba(255, 220, 150, .8);
}
.btn::before { left: -7px; }
.btn::after { right: -7px; }

.btn--gold {
  color: #2a1406;
  border-color: #6b3a0c;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 42%),
    linear-gradient(180deg, #fff0bf 0%, #ffd06a 36%, #f2a833 64%, #d9891c 100%);
  text-shadow: 0 1px 0 rgba(255, 236, 190, .6);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .75),
    inset 0 -4px 0 rgba(130, 64, 0, .45),
    0 0 0 3px #f6c86a,
    0 0 0 5px #4a2608,
    0 0 22px rgba(255, 170, 60, .4),
    0 10px 20px rgba(0, 0, 0, .55);
}

/* Navy button: antique-gold trim and small filigree corners. */
.btn--navy {
  color: var(--cream);
  border-color: #070b18;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1 13V6a5 5 0 0 1 5-5h7' fill='none' stroke='%23e6b45c' stroke-width='1.5'/%3E%3Ccircle cx='5.5' cy='5.5' r='1.4' fill='%23ffe3a0'/%3E%3C/svg%3E") top 4px left 4px / 13px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg transform='rotate(90 7 7)'%3E%3Cpath d='M1 13V6a5 5 0 0 1 5-5h7' fill='none' stroke='%23e6b45c' stroke-width='1.5'/%3E%3Ccircle cx='5.5' cy='5.5' r='1.4' fill='%23ffe3a0'/%3E%3C/g%3E%3C/svg%3E") top 4px right 4px / 13px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg transform='rotate(180 7 7)'%3E%3Cpath d='M1 13V6a5 5 0 0 1 5-5h7' fill='none' stroke='%23e6b45c' stroke-width='1.5'/%3E%3Ccircle cx='5.5' cy='5.5' r='1.4' fill='%23ffe3a0'/%3E%3C/g%3E%3C/svg%3E") bottom 4px right 4px / 13px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cg transform='rotate(270 7 7)'%3E%3Cpath d='M1 13V6a5 5 0 0 1 5-5h7' fill='none' stroke='%23e6b45c' stroke-width='1.5'/%3E%3Ccircle cx='5.5' cy='5.5' r='1.4' fill='%23ffe3a0'/%3E%3C/g%3E%3C/svg%3E") bottom 4px left 4px / 13px no-repeat,
    linear-gradient(180deg, rgba(150, 180, 255, .18), transparent 45%),
    linear-gradient(180deg, #34497f 0%, #1d2b56 55%, #131d3d 100%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
  box-shadow:
    inset 0 1px 0 rgba(170, 195, 255, .4),
    inset 0 -3px 0 rgba(0, 0, 0, .35),
    0 0 0 3px #d6a24a,
    0 0 0 5px #3a2208,
    0 10px 20px rgba(0, 0, 0, .55);
}
.btn--navy .btn__icon { color: var(--periwinkle); }

/* Hover and focus: warm glow (gold), magical blue highlight (navy). */
.btn--gold:hover,
.btn--gold:focus-visible {
  filter: brightness(1.06);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .8),
    inset 0 -4px 0 rgba(130, 64, 0, .45),
    0 0 0 3px #ffd98a,
    0 0 0 5px #4a2608,
    0 0 38px rgba(255, 180, 70, .8),
    0 10px 22px rgba(0, 0, 0, .55);
}
.btn--navy:hover,
.btn--navy:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(190, 215, 255, .55),
    inset 0 0 18px rgba(127, 180, 255, .45),
    inset 0 -3px 0 rgba(0, 0, 0, .35),
    0 0 0 3px #e6b45c,
    0 0 0 5px #3a2208,
    0 0 28px rgba(110, 160, 255, .55),
    0 10px 22px rgba(0, 0, 0, .55);
}
.btn--navy:hover .btn__icon,
.btn--navy:focus-visible .btn__icon { color: #e3ebff; filter: drop-shadow(0 0 6px var(--magic)); }
.btn:focus-visible { outline-offset: 8px; }

.btn:not([aria-disabled="true"]):hover { transform: translateY(-2px); }
.btn:not([aria-disabled="true"]):active { transform: translateY(1px); }

/* Coming soon: same craft, clearly marked, not actionable. */
.btn[aria-disabled="true"] { cursor: not-allowed; }
.btn[aria-disabled="true"]:not(:hover):not(:focus-visible) { filter: saturate(.85); }
.btn[aria-disabled="true"] > .btn__text,
.btn[aria-disabled="true"] > .btn__icon { opacity: .9; }

.btn__tag {
  margin-top: .3em;
  font-size: max(.6em, 9.5px);
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: none;
}
.btn--gold .btn__tag { color: #6b3d0f; }
.btn--navy .btn__tag { color: var(--gold-300); opacity: .85; }

/* ---------- Footer (desktop: compact overlay on the bottom edge) ---------- */

.site-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 28px;
  padding: 22px clamp(16px, 2.2vw, 40px) 10px;
  background: linear-gradient(0deg, rgba(10, 5, 2, .82), rgba(10, 5, 2, .5) 55%, transparent);
  font-size: .78rem;
  color: var(--cream-dim);
  text-shadow: 0 1px 3px #000;
}
.site-footer nav a {
  font-size: .98rem;
  font-weight: 600;
  color: var(--cream);
  text-decoration: none;
}
.site-footer nav a:hover,
.site-footer nav a:focus-visible { color: var(--gold-100); text-decoration: underline; text-underline-offset: 3px; }
.site-footer p { text-align: right; opacity: .9; }

/* ---------- Privacy button (every page) ----------
   A small fantasy button fixed to the bottom-left of the visible viewport on desktop (mirroring
   the navigation's top-right margins), independent of the artwork. In the phone layout it sits
   in the footer wherever a fixed button could cover content (see the phone rules below). */

.privacy-btn {
  position: fixed;
  left: max(clamp(16px, 2.2vw, 40px), env(safe-area-inset-left));
  bottom: max(clamp(12px, 2vh, 22px), env(safe-area-inset-bottom));
  z-index: 9;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .32em .85em .36em .7em;
  border: 1px solid rgba(214, 164, 84, .7);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(44, 25, 13, .92), rgba(22, 12, 6, .92));
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 160, .14),
    0 4px 12px rgba(0, 0, 0, .45);
  font: 600 .95rem / 1.2 var(--font-body);
  letter-spacing: .02em;
  transition: border-color .2s, color .2s, box-shadow .2s;
}
.site-footer nav a.privacy-btn { font-size: .95rem; color: var(--cream); text-decoration: none; }
.privacy-btn__icon { width: 1em; height: 1em; color: var(--gold-300); }
.site-footer nav a.privacy-btn:hover,
.site-footer nav a.privacy-btn:focus-visible {
  color: var(--gold-100);
  text-decoration: none;
  border-color: var(--gold-300);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 160, .2),
    0 0 14px rgba(255, 190, 90, .35),
    0 4px 12px rgba(0, 0, 0, .45);
}
.privacy-btn:focus-visible { outline-offset: 3px; }

/* ---------- Page transitions ----------
   Cross-document View Transitions between same-origin pages (Home, About, Support Us and any
   future page that loads this stylesheet): a ~300ms blur-and-crossfade. The outgoing page fades
   out while blurring to 4px; the incoming page fades in from 4px to sharp; both overlap (the
   browser's default plus-lighter blending keeps the crossfade from dipping to black). The blur
   exists only on the transition snapshots, never on the live page. Browsers without support,
   and anyone who prefers reduced motion, get normal instant navigation. Covers links and
   browser Back/Forward. */

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

::view-transition-group(root) { animation-duration: 300ms; }
::view-transition-old(root) { animation: ab-page-out 300ms cubic-bezier(.4, 0, .2, 1) both; }
::view-transition-new(root) { animation: ab-page-in 300ms cubic-bezier(.4, 0, .2, 1) both; }

@keyframes ab-page-out {
  from { opacity: 1; filter: blur(0); }
  to { opacity: 0; filter: blur(4px); }
}
@keyframes ab-page-in {
  from { opacity: 0; filter: blur(4px); }
  to { opacity: 1; filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* ---------- Portrait and phone: supplied mobile artwork, buttons over its foot ----------
   Keep this condition identical to the <source media> in index.html (and about.css). */

@media (max-aspect-ratio: 7/5), (max-width: 760px) {
  body { font-size: 1rem; }

  .site-header {
    padding: 12px;
    padding-top: max(12px, env(safe-area-inset-top));
    padding-right: max(12px, env(safe-area-inset-right));
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid rgba(214, 164, 84, .6);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(38, 21, 11, .82), rgba(18, 10, 5, .76));
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
    color: var(--cream);
    font: 600 1rem var(--font-body);
    cursor: pointer;
  }
  .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--gold-300);
  }
  .nav-toggle__bars { position: relative; }
  .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle__bars::before { top: -6px; }
  .nav-toggle__bars::after { top: 6px; }

  /* With JavaScript the toggle controls the menu; without it the links stay visible. */
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: block; }
  .js .site-nav {
    position: absolute;
    top: calc(100% - 2px);
    right: 12px;
    min-width: 210px;
  }
  .js .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    padding: 6px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(48, 27, 14, .96), rgba(24, 13, 7, .96));
  }
  .js .site-nav li + li::before { display: none; }
  .js .site-nav li + li { border-top: 1px solid rgba(214, 164, 84, .25); }
  .js .site-nav a { display: block; width: 100%; padding: 12px 14px; }
  .js .site-nav a::after { left: 14px; right: auto; width: 40px; }
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .site-nav a { padding: 6px 8px; font-size: .95rem; }

  body { display: flex; flex-direction: column; }

  .hero { height: auto; overflow: visible; }

  /* The portrait artwork is the full-width mobile hero; the buttons are layered over its foot. */
  .hero__stage {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    aspect-ratio: 941 / 1672;
    margin: 0 auto;
  }
  .hero__art::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30%;
    background: linear-gradient(180deg, transparent, rgba(14, 7, 3, .5) 45%, rgba(14, 7, 3, .86));
    pointer-events: none;
  }
  .hero__fallback {
    left: 0;
    right: 0;
    top: 14%;
    width: auto;
    padding: 0 6%;
  }
  .hero__fallback h1 { font-size: 13cqw; }
  .hero__tagline {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
  }

  /* Paws end at ~78% of the artwork height; the buttons stay below that. */
  .hero__actions {
    top: auto;
    left: 50%;
    bottom: 2.6cqw;
  }
  .hero__buttons {
    grid-template-columns: 1fr;
    gap: .6em;
    width: min(84cqw, 21em);
    font-size: clamp(14px, 3.9cqw, 22px);
  }

  .site-footer {
    position: static;
    flex: 1 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    padding: 14px 16px 18px;
    background: var(--walnut-950);
    border-top: 1px solid rgba(214, 164, 84, .18);
    text-align: center;
  }
  .site-footer p { max-width: 36em; text-align: center; }
  .page-home .site-footer { padding-bottom: calc(max(12px, env(safe-area-inset-bottom)) + 48px); }
  .privacy-btn {
    left: max(12px, env(safe-area-inset-left));
    bottom: max(12px, env(safe-area-inset-bottom));
  }
  /* Scrolling pages (About, Support Us): a fixed button would sit on the letter or the Ko-fi
     button, so the same styled button lives at the top of the footer instead. */
  .page-about .privacy-btn,
  .page-support .privacy-btn { position: static; }
}

/* Phones shorter than ~1.94:1 and portrait tablets: the portrait splash fills the whole screen,
   so a fixed Privacy button would sit on "Get the Addon". Keep it in the footer there instead. */
@media (max-width: 760px) and (min-aspect-ratio: 50/97), (max-aspect-ratio: 7/5) and (min-aspect-ratio: 50/97) {
  .privacy-btn { position: static; }
  .page-home .site-footer { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
}

/* Landscape-ish windows narrower than 7:5 use the portrait artwork (the desktop painting can't
   keep both the logo and the dragon there); keep the whole splash near one screen tall. */
@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 7/5) {
  .hero__stage { width: min(100%, calc(var(--vh) * .7)); }
}