/* ============================================================================
   The Good Fight of Faith: shared theme + layout
   ----------------------------------------------------------------------------
   Colors, fonts, radii and shadows are all tokens in :root; restyle there.

   Layering, back to front (all three pinned to the viewport):
     body::before   the split-sky painting
     body::after    the navy gradient panel: transparent at the top, deep navy
                    below, so it fades out the same way at every scroll depth
     .scroll-region the content; scrolls over the panel and masks to zero
                    alpha before it reaches the nav bar
   Sections paint no backgrounds of their own.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. DESIGN TOKENS  (the one place the whole look is controlled)
   --------------------------------------------------------------------------- */
:root {
  /* --- Brand palette (Jonathan's design-file values) --- */
  --navy:         #1a1f45;   /* panels + header */
  --navy-2:       #33306b;   /* the violet-leaning panel in his section stack */
  --navy-deep:    #141838;   /* his darkest panel / outer column tint */
  --gold:         #fcc04b;   /* accents, CTAs, headlines */
  --gold-soft:    #ffd36b;   /* highlight gold */
  --gold-warm:    #f3a63a;   /* deeper amber highlight */
  --gold-deep:    #9c5a2c;   /* link colour on light surfaces; 4.7:1 on cream,
                                so it clears AA. Do not lighten. */
  --accent-red:   #9d1c00;   /* the PLAY red */
  --red-deep:     #7a1600;   /* pressed red / active nav pill / bullet badges */
  --sky:          #1e6be0;   /* Jonathan's bright blue (buttons, focus edges) */
  --sky-soft:     #eaf2ff;   /* his light blue: tints on light cards */
  --periwinkle:   #c9d1f0;   /* his light blue 2: muted text on navy */
  --cream:        #fbefd3;   /* church white: light card / section bg */
  --grass:        #6b8e23;   /* grass green: nature accents */
  --brown:        #9c5a2c;   /* his brown */
  /* Derived, not Jonathan's, but keyed off his cream so light cards hold together */
  --parchment:    #f6eccf;
  --parchment-2:  #ece0c2;
  --heaven:       #f6eccf;
  --sky-pale:     #ffffff;
  --sky-deep:     #16306e;   /* dark blue: rules and edges, NOT text */

  /* --- Text --- */
  --ink:          #2a1f14;   /* deep warm ink: body text on light cards */
  --ink-soft:     #5c4a34;   /* muted brown: secondary text on light cards */
  --text:         var(--ink);
  --on-navy:      #eaf2ff;   /* his light blue: reading text on navy (13:1) */
  --on-navy-soft: #c9d1f0;   /* his light blue 2: muted text on navy (10.5:1) */

  /* --- Typography. Both faces ship 400/700 only; asking for 800 would get a
     synthesised fake-bold. --- */
  --display: 'Averia Serif Libre', Georgia, 'Times New Roman', serif;
  --body:    'Andika', system-ui, -apple-system, Segoe UI, sans-serif;
  --wt-display: 700;

  /* --- Shape & depth --- */
  --radius:    12px;
  --radius-sm: 8px;
  --radius-lg: 22px;   /* Jonathan's large panel radius (the Play frame) */
  --radius-pill: 999px;
  --shadow:    0 8px 22px rgba(6,9,30,0.30);
  --shadow-sm: 0 3px 10px rgba(6,9,30,0.22);
  --ring:      0 0 0 3px rgba(240,196,106,0.65); /* focus ring */

  /* --- Layout --- */
  --maxw: 1100px;
  --gutter: 20px;
  --frame-w: 960px;   /* the content column that scrolls over the sky */
  --head-gap: 0px;    /* sky showing above the floating header (desktop only) */
  --head-h: 68px;     /* header pill height */

  /* --- Fade zone: content is transparent above --fade-start (the bottom of
     the header, so nothing ghosts through the translucent bar) and fully
     opaque by --fade-end. Lengthen --fade-len for a softer melt. --- */
  --fade-len: 84px;

  /* Height the Play page reserves under the game frame for its Full screen
     row (button + the Esc note). Kept as a token because the frame's height
     cap subtracts it; see section 12. */
  --play-fs-h: 66px;   /* measured: 52px row + its 14px top margin */
  --fade-start: calc(var(--head-gap) + var(--head-h));
  --fade-end:   calc(var(--head-gap) + var(--head-h) + var(--fade-len));

  /* --- The fixed panel's navy: 90% at full strength, so the painting still
     reads through the content. */
  --panel-a:    rgba(20,24,56,0.90);
  --hairline:   rgba(252,192,75,0.32);   /* his gold hairline on the column */

  /* --- The split-sky scene art: one token to swap if it is ever replaced.
     Served as JPEG; re-encode from the lossless master
     (img/_source/title-bg-final-master.png), never from the JPEG. --- */
  --backdrop: url('../img/title-bg.jpg'), #14204a;
  /* The game's own cursor art; hotspot at the blade tip. */
  --cursor-sword: url('../img/cursor.png') 2 2;
}

/* ---------------------------------------------------------------------------
   2. RESET / BASE
   --------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html { background: #10132f; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--body);
  color: var(--on-navy);       /* everything sits on the navy panel by default;
                                  light cards restate --ink for themselves */
  background: transparent;     /* the fixed sky backdrop (body::before) shows through */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;            /* .scroll-region is the scroller, not the document */
}

/* ---------------------------------------------------------------------------
   The scroll region. The mask must live on a viewport-fixed scroller, not on
   <main>: a mask paints in its carrier's coordinate space, so on <main> it
   would scroll away and the fade would only exist at scroll position zero.
   With the mask box pinned to the window, content dissolves to zero alpha
   before it reaches the header at any scroll depth.
   --------------------------------------------------------------------------- */
.scroll-region {
  position: fixed; inset: 0; z-index: 1;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  /* deep-link targets (faq.html#ages etc.) must clear the header + the fade */
  scroll-padding-top: calc(var(--fade-end) + 12px);

  -webkit-mask-image: linear-gradient(to bottom,
      transparent 0,
      transparent var(--fade-start),
      #000 var(--fade-end));
          mask-image: linear-gradient(to bottom,
      transparent 0,
      transparent var(--fade-start),
      #000 var(--fade-end));
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;    mask-size: 100% 100%;
}

/* The fixed sky. A fixed layer paints once, which is far cheaper than
   background-attachment: fixed, and works on iOS. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: var(--backdrop); background-size: cover; background-position: center;
}

/* The fixed navy panel: the content column's one and only backdrop.
   Transparent at the top, ~90% navy by mid-screen; it never moves, so the
   fade toward the top is identical at every scroll depth. The gold hairlines
   ride on this layer, and the same top mask the scroller uses keeps them from
   running up behind the nav bar. */
body::after {
  content: ""; position: fixed; top: 0; bottom: 0; z-index: 0;
  left: 50%; transform: translateX(-50%);
  /* width:100% capped at the column, NOT width:min(...): min() is missing from
     older mobile Safari, and an invalid width would collapse the whole panel. */
  width: 100%; max-width: var(--frame-w);
  pointer-events: none;
  border-left: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
  background: linear-gradient(180deg,
      rgba(20,24,56,0.00) 0%,
      rgba(20,24,56,0.10) 9%,
      rgba(20,24,56,0.30) 17%,
      rgba(20,24,56,0.55) 27%,
      rgba(20,24,56,0.75) 38%,
      rgba(20,24,56,0.86) 50%,
      var(--panel-a) 62%,
      var(--panel-a) 100%);
  -webkit-mask-image: linear-gradient(to bottom,
      transparent 0, transparent var(--fade-start), #000 var(--fade-end));
          mask-image: linear-gradient(to bottom,
      transparent 0, transparent var(--fade-start), #000 var(--fade-end));
}

h1, h2, h3, h4 {
  font-family: var(--display);
  line-height: 1.18;
  color: var(--navy);   /* dark by default for LIGHT cards; headings that sit
                           straight on the panel are restyled below */
  margin: 0 0 0.5em;
  font-weight: var(--wt-display);
}

p { margin: 0 0 1em; }
a { color: var(--gold); }
a:hover, a:focus { color: var(--gold-soft); }
img { display: block; max-width: 100%; }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 4px; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skip link */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: var(--gold);
  padding: 12px 18px; z-index: 1000; border-radius: 0 0 6px 0; text-decoration: none;
}
.skip:focus { left: 0; }

/* ---------------------------------------------------------------------------
   3. BUTTONS
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--display); font-weight: 700; font-size: 1.02rem;
  text-decoration: none; cursor: pointer; text-align: center;
  padding: 14px 28px; min-height: 52px; border-radius: var(--radius-sm);
  border: 2px solid transparent; transition: transform .12s, box-shadow .12s, background .15s, color .15s;
}
.btn-primary { background: var(--gold); color: var(--navy); box-shadow: 0 3px 0 var(--gold-deep); }
.btn-primary:hover, .btn-primary:focus { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(26,31,69,.28); color: var(--navy); }
/* The mid-page Play button wears the header PLAY button's red and its triangle,
   so the two read as the same control rather than two different offers (Ray,
   2026-09-07). Sizing and face stay .btn's; only the colour comes from
   .btn-play. White on --accent-red is 8.1:1, the same pairing the header
   already ships. Downloads keeps .btn-ghost, which is .btn-dl's look already. */
.btn-play-online { background: var(--accent-red); color: #fff; box-shadow: 0 3px 0 var(--red-deep); }
.btn-play-online:hover, .btn-play-online:focus { background: var(--red-deep); color: #fff; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(26,31,69,.28); }
.btn-play-online .tri { font-size: .78em; line-height: 1; }
.btn-ghost { background: transparent; color: var(--gold); border-color: var(--gold); }
.btn-ghost:hover, .btn-ghost:focus { background: var(--gold); color: var(--navy); transform: translateY(-2px); }
.btn-block { width: 100%; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------------------------------------------------------------------------
   4. HEADER / NAV  (shared chrome, identical markup on every page)
   Only the inner .navbar pill is painted; the sky shows in the gap above it.
   --------------------------------------------------------------------------- */
header.site {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent; border: 0;
  padding-top: var(--head-gap);
  pointer-events: none;          /* only the bar itself is clickable */
}
header.site > * { pointer-events: auto; }

/* Translucent on purpose. The fade mask has already taken scrolling content
   to zero alpha before it reaches this band, so nothing ghosts through. */
.navbar {
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: var(--frame-w); margin: 0 auto;
  min-height: var(--head-h); padding: 8px 14px;
  background: linear-gradient(180deg, rgba(15,19,48,.74) 0%, rgba(15,19,48,.56) 100%);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
          backdrop-filter: blur(12px) saturate(1.15);
  border: 1px solid rgba(240,196,106,.20);
  box-shadow: 0 8px 24px rgba(6,9,30,.30);
}
/* Browsers without backdrop-filter get a slightly stronger scrim so the nav
   stays readable. They lose the frosting, not the legibility. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .navbar { background: linear-gradient(180deg, rgba(15,19,48,.88) 0%, rgba(15,19,48,.78) 100%); }
}
.brand {
  display: flex; align-items: center; gap: 12px; flex: none;
  color: var(--gold); text-decoration: none; line-height: 1.1;
}
.brand img { width: 46px; height: 46px; flex: none; }
/* The condensed wordmark: italic gold tagline, as in the comps. */
.brand .brand-tag {
  font-family: var(--display); font-style: italic; font-weight: var(--wt-display);
  font-size: 1.02rem; color: var(--gold); white-space: nowrap;
}

.nav-toggle {
  background: transparent; border: 2px solid var(--gold);
  color: var(--gold); font-size: .92rem; font-family: var(--body); font-weight: 700;
  padding: 8px 14px; border-radius: var(--radius-sm); cursor: pointer;
  min-height: 44px; margin-left: auto; flex: none;
}

nav.main { margin-left: auto; }
nav.main ul { list-style: none; display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; }
nav.main a {
  display: block; color: #dfe4f4; text-decoration: none;
  padding: 8px 11px; border-radius: var(--radius-sm); font-size: .9rem; font-weight: 700;
  transition: background .15s, color .15s;
}
nav.main a:hover, nav.main a:focus { background: rgba(255,255,255,.10); color: var(--gold); }
nav.main a[aria-current="page"] { background: var(--red-deep); color: var(--gold); }

/* Header CTAs: Ray's two jobs-to-be-done, visible above the fold on load. */
.head-cta { display: flex; gap: 10px; flex: none; }
.btn-head {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--body); font-weight: 700; font-size: .9rem;
  padding: 9px 18px; min-height: 44px; border-radius: var(--radius-sm);
  text-decoration: none; white-space: nowrap;
  border: 2px solid transparent; transition: background .15s, color .15s, transform .12s;
}
.btn-dl { border-color: var(--gold); color: var(--gold); background: transparent; }
.btn-dl:hover, .btn-dl:focus { background: var(--gold); color: var(--navy); }
.btn-play { background: var(--accent-red); color: #fff; box-shadow: 0 2px 0 var(--red-deep); }
.btn-play:hover, .btn-play:focus { background: var(--red-deep); color: #fff; transform: translateY(1px); box-shadow: none; }
.btn-play .tri { font-size: .78em; line-height: 1; }
/* Play and Downloads are buttons, not nav links, so they carry the you-are-here
   state on their own pages (nothing else in the bar could show it). */
.btn-head[aria-current="page"] { box-shadow: 0 0 0 2px var(--gold-soft); }

/* ---------------------------------------------------------------------------
   5. THE CONTENT COLUMN + SECTIONS
   One column scrolling over the fixed panel. Sections paint nothing behind
   themselves; the band/section-* classes stay as no-op markers so older
   markup remains valid.
   --------------------------------------------------------------------------- */
main#main {
  width: 100%; max-width: var(--frame-w); margin: 0 auto;
  position: relative; z-index: 1;
  /* The header is fixed and out of flow, so the column reserves its own room.
     At rest the first block starts exactly below the bar. */
  padding-top: calc(var(--head-gap) + var(--head-h));
}

section { padding: 48px 0; }
.band, .band-2, .band-adam,
.section-light, .section-cream, .section-sky, .section-navy { background: transparent; }

/* One section-heading style, sitewide. */
.section-title { text-align: center; font-size: 1.7rem; margin-bottom: 8px; color: var(--gold); }
.section-title::after { content: ""; display: block; width: 64px; height: 3px; background: var(--gold-warm); margin: 14px auto 0; border-radius: 2px; }
.lead { max-width: 720px; margin: 0 auto; text-align: center; font-size: 1.1rem; color: var(--on-navy); }

/* Landing-page feature bullets: plain list, gold markers. */
.feature-list { max-width: 720px; margin: 28px auto 0; padding-left: 24px; display: grid; gap: 13px; }
.feature-list li { color: var(--on-navy); }
.feature-list li::marker { color: var(--gold-warm); }
.feature-list strong { color: var(--gold); }

/* Page header (interior pages). Same heading style as every section title. */
.page-head {
  padding: 60px 0 6px; text-align: center;
}
.page-head h1 { color: var(--gold); font-size: 2rem; margin-bottom: 8px;
  /* Interior page heads sit on the bright cloud band, not flat navy, so the
     type needs the same two-layer shadow the home-page verse uses: the tight
     one keeps letterforms crisp, the wide one seats them on the sky. */
  text-shadow: 0 1px 2px rgba(6, 9, 30, .85), 0 3px 16px rgba(6, 9, 30, .70); }
.page-head h1::after { content: ""; display: block; width: 64px; height: 3px; background: var(--gold-warm); margin: 14px auto 0; border-radius: 2px; }
/* Subhead brightened 2026-08-31 (meeting): --on-navy-soft is rated against
   flat navy and washed out over the clouds. Brighter token + shadow + a nudge
   up in size and weight. */
.page-head p {
  color: var(--on-navy); max-width: 680px; margin: 14px auto 0;
  font-size: 1.06rem; font-weight: 500; line-height: 1.55;
  text-shadow: 0 1px 2px rgba(6, 9, 30, .88), 0 3px 16px rgba(6, 9, 30, .72);
}
.page-head a { color: var(--gold); }

/* ---------------------------------------------------------------------------
   6. HOME: INTRO (logo + verse) and MEET ADAM
   --------------------------------------------------------------------------- */
/* --- The intro: floating logo + verse. The fixed panel supplies the navy. -- */
.band-intro {
  /* Top padding clears the fade zone (--fade-end) so the logo is crisp at rest
     and only dissolves once you actually scroll. */
  /* Bottom padding added 2026-08-31 (meeting), then matched to the site's
     normal section rhythm: 48px here + 48px on the next section = the same
     96px gap you get between Welcome and Meet Adam. */
  padding: clamp(88px, 11vh, 120px) 0 48px;
  text-align: center;
  color: var(--on-navy);
}

/* Sized by width, small enough that the first section is visible below it on
   a laptop. aspect-ratio reserves the box before the PNG decodes, so the
   verse underneath never jumps on load. */
.intro-logo {
  width: clamp(200px, 29vw, 356px);
  height: auto; aspect-ratio: 866 / 900;
  margin: 0 auto;
  filter: drop-shadow(0 18px 30px rgba(4, 7, 24, .55));
  animation: gffFloat 7s ease-in-out infinite;
}
@keyframes gffFloat {
  0%, 100% { transform: translateY(-9px); }
  50%      { transform: translateY(9px); }
}

/* The verse reads as the logo's subtitle. */
.intro-scripture {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(1rem, 1.9vw, 1.44rem);
  line-height: 1.5; color: var(--cream);
  max-width: 620px; margin: 10px auto 0;
  /* Two layered shadows, not one: the tight one keeps the letterforms legible
     against the brightest part of the sky, the wide one seats the line on it. */
  text-shadow: 0 1px 2px rgba(6, 9, 30, .85), 0 3px 16px rgba(6, 9, 30, .70);
}
.intro-ref,
.foot-scripture cite {
  font-family: var(--body); font-weight: 700; text-transform: uppercase;
  letter-spacing: .22em; font-size: .78rem; color: var(--on-navy-soft);
  margin: 10px 0 0;
  text-shadow: 0 1px 2px rgba(6, 9, 30, .80);
}

/* Breathing room between the verse and the first section, only when the intro
   is present. Now the standard 48px so the intro-to-Welcome gap reads the same
   as every other section boundary (changed from 36px, 2026-08-31). */
.band-intro + section { padding-top: 48px; }

/* Meet Adam: art down the left on desktop, stacked on phones. */
.adam-grid {
  display: grid; grid-template-columns: 1fr; gap: 22px;
  grid-template-areas: "art" "copy";
  margin-top: 26px;
}
.adam-art  { grid-area: art; }
.adam-copy { grid-area: copy; }

.adam-art { position: relative; display: flex; justify-content: center; }
.adam-art::before {
  content: ""; position: absolute; inset: -4% -6% 2%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(120,146,232,.30), rgba(120,146,232,0) 72%);
}
/* Sized by height, not width, so the whole figure always fits head to
   sandals at any window size. aspect-ratio keeps him undistorted and reserves
   the box before the PNG loads. */
.adam-art img {
  position: relative;
  width: auto; max-width: 100%;
  height: min(240px, 30vh);
  aspect-ratio: 850 / 1025;
  filter: drop-shadow(0 18px 26px rgba(4,7,24,.55));
}
.adam-copy p { color: var(--on-navy); font-size: 1.06rem; }

/* ---------------------------------------------------------------------------
   7. CARDS  (light components floating on the navy panel)
   No hover motion; cards are not clickable.
   --------------------------------------------------------------------------- */
.cards { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 36px; }
.card {
  /* Light surface on the navy panel, so it must restate the text colour:
     body is var(--on-navy) and would leave anything not covered by a child
     rule below near-white on cream. */
  background: var(--cream); color: var(--ink); border: 1px solid var(--parchment-2);
  border-top: 4px solid var(--gold); border-radius: var(--radius);
  padding: 26px 22px;
}
.card h3 { font-size: 1.2rem; color: var(--gold-deep); }
.card p { color: var(--ink); }
.card a:not(.btn) { color: var(--gold-deep); }
.card a:not(.btn):hover, .card a:not(.btn):focus { color: var(--accent-red); }

/* ---------------------------------------------------------------------------
   8. SCREENSHOTS  (the Explore 2x2 grid + the map carousel)
   --------------------------------------------------------------------------- */
.shots { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 36px; }
figure.shot {
  margin: 0; background: var(--navy); border: 3px solid rgba(255,255,255,.55);
  border-radius: var(--radius); overflow: hidden; box-shadow: 0 16px 34px rgba(6,9,30,.42);
  /* Column layout + a growing caption so paired cards end level, never ragged. */
  display: flex; flex-direction: column;
}
figure.shot img { width: 100%; height: auto; display: block; }
figure.shot figcaption {
  flex: 1; padding: 12px 16px; font-size: .88rem; line-height: 1.5;
  color: var(--on-navy-soft); background: var(--navy); text-align: center;
}
figure.shot figcaption strong { display: block; color: var(--gold); font-family: var(--display); }
.shot.placeholder {
  background: repeating-linear-gradient(45deg, var(--navy-2) 0 12px, var(--navy) 12px 24px);
  min-height: 200px; display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--periwinkle); color: var(--periwinkle);
  font-family: var(--display); text-align: center; padding: 24px; font-size: .95rem;
}

/* Explore screenshots open full-size in a new tab; the hover lift and zoom
   cursor advertise it. The one place non-button hover motion is allowed. */
.shot-link { display: block; cursor: zoom-in; overflow: hidden; }
.shot-link img { transition: transform .18s ease; }
.shot-link:hover img, .shot-link:focus img { transform: scale(1.04); }

/* The map carousel: three slides on a 7.5s CSS cycle, no JS, so each map holds
   for about two and a half seconds (Ray asked for 2-3, 2026-09-07). The
   aspect-ratio matches Ray's generated maps (932x601) and the slides use
   object-fit:contain, because the parchment is transparent around its edge and
   must not be cropped. With animations off (reduced motion, old browsers) the
   first slide shows.

   The keyframe stops are percentages of the cycle, not seconds, so they scale
   with the duration on their own: change the 7.5s and the three delays
   together (each delay is one third of the cycle) and nothing else. */
.map-carousel {
  position: relative; max-width: 100%; margin: 0;
  aspect-ratio: 932 / 601;
  background: var(--navy); overflow: hidden;
}
.map-carousel .slide { position: absolute; inset: 0; opacity: 0; animation: mapFade 7.5s linear infinite; }
.map-carousel .slide:nth-child(1) { opacity: 1; animation-delay: 0s; }
.map-carousel .slide:nth-child(2) { animation-delay: 2.5s; }
.map-carousel .slide:nth-child(3) { animation-delay: 5s; }
.map-carousel .slide img { width: 100%; height: 100%; object-fit: contain; }
@keyframes mapFade {
  0%    { opacity: 0; }
  4%    { opacity: 1; }
  33.3% { opacity: 1; }
  38%   { opacity: 0; }
  100%  { opacity: 0; }
}
/* Ray wanted the map caption inside the frame like the Explore shots, so the
   carousel now sits in a figure.shot and inherits that frame and figcaption.
   The wrapper carries the width and the outer margin the carousel used to.

   Selector must stay figure.shot.map-shot, not .map-shot: figure.shot above
   sets margin:0, and an element+class selector outranks a lone class, so a
   bare .map-shot loses and the carousel ends up flush left with no gap above
   it (Ray, 2026-09-08). Match its weight or it silently regresses again. */
figure.shot.map-shot { max-width: 680px; margin: 36px auto 0; }

/* ---------------------------------------------------------------------------
   8b. SWORD ROWS (home). Five screenshot-and-caption rows. Phones stack image
   over caption; from 760px up they sit side by side and alternate which side
   the art is on. Only the grid PLACEMENT flips, never the DOM order, so the
   reading order stays image-then-caption for screen readers and for the
   no-CSS fallback.
   --------------------------------------------------------------------------- */
.sword-rows { display: grid; gap: 44px; margin-top: 36px; }
.sword-row { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: center; }
.sword-row figure { margin: 0; }
/* The frame belongs to the LINK, not the image, so the hover zoom happens
   inside it. While the border rode on the image it scaled with it, spilled
   past the link's overflow:hidden and vanished for as long as you hovered
   (Ray, 2026-09-08). This is how figure.shot already frames the Explore
   shots: static frame, image growing within it. */
.sword-row .shot-link {
  background: var(--navy); border: 3px solid rgba(255,255,255,.55);
  border-radius: var(--radius); box-shadow: 0 16px 34px rgba(6,9,30,.42);
}
.sword-row img { width: 100%; height: auto; display: block; }
.sword-cap { margin: 0; color: var(--on-navy); font-size: 1.05rem; line-height: 1.65; }

/* ---------------------------------------------------------------------------
   9. LEARN MORE / LINK LIST  (also the FAQ teaser style, reused)
   --------------------------------------------------------------------------- */
.faq-list { list-style: none; padding: 0; margin: 32px auto 0; max-width: 640px; }
.faq-list li { margin: 0 0 12px; }
.faq-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--cream); border: 1px solid var(--parchment-2);
  border-left: 4px solid var(--gold); border-radius: var(--radius-sm);
  padding: 16px 18px; min-height: 44px; color: var(--text); text-decoration: none; font-size: 1.02rem;
  transition: transform .12s, box-shadow .12s, border-color .15s;
}
.faq-list a:hover, .faq-list a:focus { transform: translateX(3px); box-shadow: var(--shadow-sm); border-left-color: var(--gold-deep); color: var(--text); }
.faq-list a .chev { font-family: var(--display); color: var(--gold-deep); font-weight: 700; flex: none; }
/* Each link carries a one-line description under it (Ray, 2026-09-07). The
   label and its description are one block so the chevron stays centred against
   the pair rather than against the title alone. */
.faq-list .faq-label { display: block; }
.faq-list .faq-desc {
  display: block; margin-top: 3px;
  font-size: .86rem; line-height: 1.45; color: var(--ink-soft);
}

/* ---------------------------------------------------------------------------
   10. FAQ ACCORDION (faq.html): one open at a time, driven by <button>+region
   --------------------------------------------------------------------------- */
.accordion { max-width: 760px; margin: 0 auto; }
/* color is set on the container, not per child: the answers hold <ul>, <li> and
   inline links as well as <p>, and anything left to inherit body's var(--on-navy)
   would be near-white on cream. .acc-trigger sets its own var(--navy). */
.acc-item { border: 1px solid var(--parchment-2); border-radius: var(--radius-sm); background: var(--cream); color: var(--ink); margin-bottom: 12px; overflow: hidden; }
.acc-item a:not(.btn) { color: var(--gold-deep); }
.acc-item a:not(.btn):hover, .acc-item a:not(.btn):focus { color: var(--accent-red); }
.acc-item + .acc-item { margin-top: 0; }
.acc-item p { color: var(--ink); }
.acc-trigger {
  width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer;
  font-family: var(--display); font-weight: 700; font-size: 1.08rem; color: var(--navy);
  padding: 18px 20px; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.acc-trigger:hover { background: rgba(252,192,75,.12); }
.acc-trigger .plus { flex: none; font-size: 1.4rem; color: var(--gold-deep); transition: transform .2s; line-height: 1; }
.acc-trigger[aria-expanded="true"] .plus { transform: rotate(45deg); }
.acc-panel { max-height: 0; overflow: hidden; transition: max-height .28s ease; }
.acc-panel .acc-inner { padding: 0 20px 20px; }
/* JS toggles .is-open on the .acc-item (the trigger sits inside an <h2>, so an
   adjacent-sibling selector on the button would not reach the panel). */
.acc-item.is-open > .acc-panel { max-height: 1200px; }
/* "Still have a question?" line under the accordion: on the panel, so gold. */
.faq-more { text-align: center; }
.faq-more a { color: var(--gold); font-weight: 700; text-decoration: none; }
.faq-more a:hover, .faq-more a:focus { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   11. GLOSSARY  (one entry per full-width row)
   --------------------------------------------------------------------------- */
.glossary-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin: 0 auto 8px; max-width: 760px; }
.glossary-controls input[type="search"] {
  flex: 1 1 240px; min-height: 48px; padding: 10px 14px; font-size: 1rem; font-family: var(--body);
  border: 2px solid var(--parchment-2); border-radius: var(--radius-sm); background: #fff; color: var(--ink);
}
.gloss-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.gloss-filter button {
  font-family: var(--body); font-weight: 700; font-size: .9rem; cursor: pointer;
  padding: 8px 14px; min-height: 40px; border-radius: var(--radius-pill);
  border: 2px solid var(--gold); background: transparent; color: var(--gold);
}
.gloss-filter button[aria-pressed="true"] { background: var(--gold); color: var(--navy); }
.gloss-count { text-align: center; color: var(--on-navy-soft); font-size: .9rem; margin: 6px 0 20px; }

/* One entry per row, always. */
.glossary-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.gloss-card {
  /* Light surface: restate the text colour here, same reason as .card above. */
  display: flex; align-items: center; gap: 20px; background: var(--cream); color: var(--ink); border: 1px solid var(--parchment-2);
  border-left: 5px solid var(--gold); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm);
}
/* Icon centred vertically on the left, capped at the game's native 128x128.
   The cap is the CSS box, not the source file: a few of the PNGs are larger
   and still render at 128. */
.gloss-card .gloss-art {
  flex: none; width: 128px; height: 128px; align-self: center;
  background: transparent; border: 0;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.gloss-card .gloss-art img {
  width: 100%; height: 100%; max-width: 128px; max-height: 128px;
  object-fit: contain; image-rendering: pixelated;
}
.gloss-card .gloss-art.missing { font-size: .62rem; color: var(--ink-soft); text-align: center; padding: 6px; font-weight: 700; }
.gloss-body h3 { font-size: 1.15rem; margin-bottom: 4px; color: var(--navy); }
.gloss-body { color: var(--ink); }
.gloss-type { display: inline-block; font-size: .68rem; text-transform: uppercase; letter-spacing: .6px; font-weight: 700; color: var(--gold-deep); background: var(--sky-soft); border-radius: var(--radius-pill); padding: 2px 10px; margin-bottom: 8px; }
.gloss-scripture { font-style: italic; color: var(--ink-soft); border-left: 3px solid var(--parchment-2); padding-left: 12px; margin: 8px 0; }
.gloss-desc { margin: 8px 0 0; }
.glossary-status { text-align: center; padding: 40px 0; color: var(--on-navy-soft); }

/* On phones the 128px icon next to text is too tight: stack them. */
@media (max-width: 560px) {
  .gloss-card { flex-direction: column; align-items: center; text-align: center; }
  .gloss-card .gloss-art { align-self: center; }
  .gloss-scripture { border-left: 0; padding-left: 0; }
}

/* ---------------------------------------------------------------------------
   12. PLAY ONLINE  (iframe frame + hint cards + mobile gate)
   --------------------------------------------------------------------------- */
/* 1036 = 1024 + the 6px gold border on each side, i.e. the game at its native
   1024x768. The site's own content column (--frame-w 960 less the .wrap
   padding) caps this at 880, so the game scales down from there and keeps its
   4:3 (Ray: "if not that size, depending on client resolution"). */
.play-frame-wrap { max-width: 1036px; margin: 0 auto; }

/* The Play page follows the same heading-then-content rhythm as the rest of
   the site. The shared .page-head spacing clears the fade before the game
   frame appears. */

/* The Full screen row under the frame. Its height is subtracted from the cap
   above, so "the whole frame is in view" still means the frame AND this row.
   Change the row and change --play-fs-h with it or the page starts scrolling. */
.play-fs {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  flex-wrap: wrap; margin: 14px 0 0; text-align: center;
}
/* The row ships with [hidden] and js/site.js clears it. A bare display:flex on
   the class BEATS the browser's own [hidden]{display:none}, so without this the
   button would show on a browser that cannot do fullscreen, which is the one
   case the hidden attribute exists to cover. */
.play-fs[hidden] { display: none; }
.play-fs .btn { padding: 9px 20px; }
.play-fs-note { color: var(--on-navy-soft); font-size: .88rem; }
.play-fs-note kbd {
  font-family: inherit; font-size: .92em; color: var(--cream);
  border: 1px solid var(--hairline); border-radius: 4px; padding: 1px 6px;
}

/* Jonathan's Play panel (README, "Play Online" view): a heavy gold frame with a
   deep-red inset rule and a subtle diagonal striped fill. Built from the existing
   tokens (--gold #fcc04b, --accent-red #9d1c00, --navy), so it re-skins with
   everything else. When Ray's real embed goes in, the iframe fills this same
   frame and the stripes simply sit behind it. */
.play-frame {
  /* aspect-ratio measures the BORDER box by default, which would fold the 6px
     gold frame into the 4:3 and letterbox the game all over again. content-box
     plus a width inset by the two borders makes the INSIDE of the frame exactly
     4:3 at every width, with the outer box still filling the wrap. */
  position: relative; box-sizing: content-box;
  width: calc(100% - 12px); aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(135deg,
      rgba(252,192,75,.055) 0 14px,
      rgba(252,192,75,0)   14px 28px),
    var(--navy);
  border: 6px solid var(--gold); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: inset 0 0 0 3px var(--accent-red), 0 26px 60px rgba(0,0,0,.40);
}
.play-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.play-frame .play-placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--on-navy-soft); text-align: center; padding: 24px; gap: 10px;
}
/* Real text, not an image, so it is readable by screen readers and scales. */
.play-placeholder .pp-title {
  font-family: var(--display); font-weight: var(--wt-display);
  font-size: clamp(1.15rem, 2.6vw, 1.6rem); color: var(--gold); margin: 0;
}
.play-placeholder .pp-sub { margin: 0; max-width: 460px; font-size: .95rem; }
.play-placeholder a { color: var(--gold); }
.play-placeholder a:hover, .play-placeholder a:focus { color: var(--gold-soft); }
.manual-callout { max-width: 720px; margin: 0 auto; text-align: center; }
.manual-action { margin: 18px 0 0; }
.mobile-gate {
  display: none; max-width: 620px; margin: 0 auto; text-align: center;
  background: var(--sky-soft); border: 2px solid var(--sky); border-radius: var(--radius); padding: 28px 24px;
  color: var(--ink);
}
.mobile-gate h2 { color: var(--navy); }
.mobile-gate .ico { font-size: 2.4rem; }
body.is-mobile .desktop-only { display: none !important; }
body.is-mobile .mobile-gate { display: block; }

/* ---------------------------------------------------------------------------
   13. DOWNLOADS
   --------------------------------------------------------------------------- */
.dl-buttons { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 760px; margin: 0 auto 40px; }
.dl-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  background: var(--cream); border: 1px solid var(--parchment-2); border-top: 4px solid var(--gold);
  border-radius: var(--radius); padding: 24px 20px; text-decoration: none; color: var(--ink);
  transition: transform .15s, box-shadow .15s;
}
/* Real links lift on hover (they are clickable); the muted "coming soon"
   placeholders below explicitly do not. */
a.dl-card:hover, a.dl-card:focus { transform: translateY(-4px); box-shadow: var(--shadow); color: var(--ink); }
/* Icon badges: dark-red circle + gold stroke icon. Inline SVGs, not emoji;
   emoji render differently on every OS. */
.dl-card .os, .mobile-gate .ico {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  background: var(--red-deep); border: 1px solid rgba(240,196,106,.42);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--gold); margin-bottom: 4px;
}
.dl-card .os svg, .mobile-gate .ico svg { width: 26px; height: 26px; display: block; }
.mobile-gate .ico { margin: 0 auto 14px; }
.dl-card .os-name { font-family: var(--display); font-weight: 700; font-size: 1.2rem; color: var(--navy); }
.dl-card .os-meta { font-size: .85rem; color: var(--ink-soft); }
/* Not-yet-available download card: solid muted surfaces, not clickable.
   Never whole-card opacity; over the bright sky it goes ghostly. */
.dl-buttons.dl-single { grid-template-columns: 1fr !important; max-width: 360px; }
.dl-card.is-soon { background: var(--parchment-2); border-top-color: #cbbfa0; cursor: default; }
.dl-card.is-soon .os { background: #8b8274; border-color: transparent; color: var(--parchment); }
.dl-card.is-soon .os-name { color: var(--ink-soft); }
.dl-card.is-soon:hover, .dl-card.is-soon:focus { transform: none; box-shadow: none; }

.table-wrap { max-width: 860px; margin: 0 auto; overflow-x: auto; }
table.versions { width: 100%; border-collapse: collapse; background: var(--cream); border-radius: var(--radius); overflow: hidden; color: var(--ink); }
table.versions th, table.versions td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--parchment-2); font-size: .95rem; }
table.versions thead th { background: var(--navy); color: var(--gold); font-family: var(--display); }
table.versions a { color: var(--gold-deep); }

/* ---------------------------------------------------------------------------
   14. NEWS
   --------------------------------------------------------------------------- */
.news-list { max-width: 760px; margin: 0 auto; display: grid; gap: 20px; }
.news-item { background: var(--cream); border: 1px solid var(--parchment-2); border-left: 5px solid var(--gold); border-radius: var(--radius); padding: 22px 24px; color: var(--ink); }
.news-item time { display: block; font-size: .82rem; text-transform: uppercase; letter-spacing: .6px; color: var(--gold-deep); font-weight: 700; margin-bottom: 6px; }
.news-item h3 { font-size: 1.25rem; margin-bottom: 8px; }
.news-item a { color: var(--gold-deep); }
.news-item a:hover, .news-item a:focus { color: var(--accent-red); }

/* ---------------------------------------------------------------------------
   15. FORMS  (contact + admin login)
   --------------------------------------------------------------------------- */
.form-card { max-width: 640px; margin: 0 auto; background: var(--cream); border: 1px solid var(--parchment-2); border-radius: var(--radius); padding: 28px 26px; box-shadow: var(--shadow-sm); color: var(--ink); }
.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 700; margin-bottom: 6px; color: var(--navy); }
.field .req { color: var(--accent-red); }
.field input[type="text"], .field input[type="email"], .field input[type="password"], .field textarea, .field select, .field input[type="file"] {
  width: 100%; padding: 12px 14px; font-size: 1rem; font-family: var(--body);
  border: 2px solid var(--parchment-2); border-radius: var(--radius-sm); background: #fff; color: var(--ink); min-height: 48px;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--sky); outline: none; box-shadow: var(--ring); }
.radio-group { display: grid; gap: 10px; }
.radio-group label { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; cursor: pointer; padding: 12px 14px; border: 2px solid var(--parchment-2); border-radius: var(--radius-sm); background: #fff; }
.radio-group label:hover { border-color: var(--gold); }
.radio-group input { margin-top: 4px; }
.radio-group label.sel { border-color: var(--sky); background: var(--sky-soft); }
.field-note { font-size: .85rem; color: var(--ink-soft); margin-top: 6px; }
.conditional { display: none; }
.conditional.show { display: block; }
.form-msg { padding: 14px 16px; border-radius: var(--radius-sm); margin-bottom: 18px; font-weight: 700; }
.form-msg.ok { background: #e6f2df; color: #3a5a1e; border: 1px solid var(--grass); }
.form-msg.err { background: #f9e0da; color: var(--accent-red); border: 1px solid var(--accent-red); }

/* Donate row (sits straight on the navy panel, so gold, not brown) */
.donate-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; }
.donate-row a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; border: 2px solid var(--gold); color: var(--gold); padding: 10px 18px; border-radius: var(--radius-sm); min-height: 44px; font-weight: 700; }
.donate-row a:hover, .donate-row a:focus { background: var(--gold); color: var(--navy); }

/* ---------------------------------------------------------------------------
   16. TESTIMONIALS (home rotator)
   --------------------------------------------------------------------------- */
.testimony-rotator { max-width: 720px; margin: 24px auto 0; min-height: 120px; position: relative; }
/* Framed like the Explore screenshots (same border, radius and navy) so a quote
   and a shot read as the same family of object; the shadow is softer because
   this is a card of text, not a photograph. Left-aligned since the border now
   gives the block its own edge to sit against. */
.testimony {
  text-align: left;
  margin: 0; padding: 22px 26px;
  background: var(--navy); color: var(--on-navy);
  border: 3px solid rgba(255,255,255,.55); border-radius: var(--radius);
  box-shadow: 0 8px 20px rgba(6,9,30,.30);
}
.testimony blockquote { font-size: 1.25rem; font-style: italic; color: var(--cream); margin: 0 0 12px; line-height: 1.5; }
.testimony .who { font-weight: 700; color: var(--gold); }
.testimony-invite { text-align: center; color: var(--on-navy-soft); font-size: .95rem; margin: 18px 0 0; }

/* ---------------------------------------------------------------------------
   17. FOOTER  (shared chrome): the site-map links, the verse, the bottom line.
   --------------------------------------------------------------------------- */
footer.site {
  width: 100%; max-width: var(--frame-w); margin: 0 auto;
  position: relative; z-index: 1;
  background: transparent; color: var(--on-navy);
  padding: 36px 0 40px; border-top: 1px solid var(--hairline);
  text-align: center;
}
.foot-links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; margin: 0 0 4px; padding: 0; }
.foot-links a { color: var(--gold); text-decoration: none; font-weight: 700; font-size: .92rem; }
.foot-links a:hover, .foot-links a:focus { text-decoration: underline; }

/* The crest: the mark with the verse centred directly beneath it, as in
   Jonathan's design (Ray, 2026-09-10). This is a vertical stack at EVERY width:
   the old 640px rule set the verse off the mark's right shoulder, which is what
   Ray asked to be undone. text-align is stated here rather than inherited so it
   survives the left-aligned .foot-main row at 1000px and up. */
.foot-crest { margin: 30px auto 0; max-width: 560px; text-align: center; }
.foot-logo {
  display: block; width: 86px; height: auto; aspect-ratio: 866 / 900;
  margin: 0 auto 14px;
  filter: drop-shadow(0 8px 20px rgba(4,7,24,.62));
}
.foot-crest .foot-scripture { margin-top: 0; margin-left: auto; margin-right: auto; }

/* Desktop footer, back to Jonathan's original arrangement: the crest on the
   left, the link rows to its right, the copyright and attribution centred
   underneath the whole row (Ray, 2026-09-08).

   The markup order stays nav-then-crest and only the flex order flips, so the
   stacked mobile footer below this breakpoint is byte-for-byte what it was.
   1000px is the same width the desktop nav appears at. */
@media (min-width: 1000px) {
  .foot-main {
    display: flex; align-items: center; gap: 32px; text-align: left;
  }
  /* The crest column is wide enough that "Fight the good fight of faith," sets
     on one line (it is the longest of the three), and no wider, so both link
     rows still clear a single line each: at the generous 430px it once took,
     "Downloads" and "Admin" each wrapped alone onto a second line. The frame
     caps .foot-main at 880px from 1000px up, so these numbers hold at every
     desktop width, 1000 to 1600+. The mark keeps its mobile 86px. */
  .foot-crest {
    order: 0; flex: 0 0 auto; width: 300px; max-width: 300px; margin: 0;
  }
  .foot-logo { width: 86px; }
  .foot-nav { order: 1; flex: 1 1 auto; min-width: 0; }
  .foot-links { justify-content: flex-start; column-gap: 16px; }
  .foot-links + .foot-links { margin-top: 10px; }
}

/* No bold and no gold in here: --gold is the footer's link colour, and Ray
   does not want the verse competing with it. Same face, style and cream as
   .intro-scripture at the top of the home page. */
.foot-scripture { margin: 24px auto 0; max-width: 480px; }
.foot-scripture p {
  font-family: var(--display); font-style: italic; font-size: 1rem; line-height: 1.55;
  color: var(--cream); margin: 0 0 8px;
}
.foot-scripture cite {
  display: block; font-style: normal; font-size: .6rem;
}

/* A margin gap only. The rule used to carry a gold divider as well, which read
   as divider plus gap plus gap once the crest landed above it. */
.foot-bottom { margin-top: 30px; font-size: .85rem; color: var(--on-navy-soft); }
.foot-bottom p { margin: 0 0 4px; }
.foot-credit a { color: var(--on-navy-soft); }
.foot-credit a:hover, .foot-credit a:focus { color: var(--gold); }

/* ---------------------------------------------------------------------------
   18. SCROLL REVEAL (opt-in via JS so no-JS shows everything)
   --------------------------------------------------------------------------- */
body.reveal-on .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
body.reveal-on .reveal.in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------------
   19. RESPONSIVE
   --------------------------------------------------------------------------- */
/* --- Header: collapse the nav below 1000px; the two CTAs NEVER collapse, so
       Play and Downloads stay above the fold at 375px as well as 1440px. ----- */
@media (max-width: 999px) {
  .nav-toggle { display: inline-flex; align-items: center; }
  nav.main { display: none; order: 4; width: 100%; }
  nav.main.open { display: block; }
  .navbar { flex-wrap: wrap; }
  nav.main ul { flex-direction: column; width: 100%; gap: 2px; padding-top: 10px; }
  nav.main a { padding: 12px; min-height: 44px; }
}
@media (min-width: 1000px) {
  .nav-toggle { display: none; }
  nav.main { display: block !important; }
}
/* Phones: brand mark only, then the two CTAs on their own full-width row. */
@media (max-width: 620px) {
  .brand .brand-tag { display: none; }
  .navbar { padding: 8px 12px; row-gap: 8px; }
  .head-cta { order: 3; width: 100%; margin-left: 0; }
  .head-cta .btn-head { flex: 1; }
  .nav-toggle { margin-left: auto; }

  /* The bar becomes TWO rows here, so --head-h has to grow with it or the fade
     would start 50px too high and content would ghost through the translucent
     header. Measured at 118px; 122px leaves a little headroom, and overshooting
     is harmless (a sliver of extra sky) while undershooting is not.
     KEEP THIS IN SYNC if you change the mobile bar's contents. */
  :root { --head-h: 122px; }
}

/* An OPEN mobile menu needs its own solid surface. The bar itself is
   deliberately translucent, which is fine for a single row of nav, but a full
   dropdown list with the page scrolling behind it would be unreadable. */
@media (max-width: 999px) {
  nav.main.open {
    background: var(--navy);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    margin-top: 6px; padding: 4px;
  }
}

/* --- Desktop: float the header pill and open the sky at the sides ---------- */
@media (min-width: 1024px) {
  :root { --head-gap: 14px; }
  .navbar { border-radius: 12px; }
}

@media (min-width: 700px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
  .shots { grid-template-columns: repeat(2, 1fr); }   /* the Explore 2x2 */
  .section-title { font-size: 2rem; }
  .dl-buttons { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 760px) {
  /* Side by side the rows should read as one block, so the vertical space
     between them goes (Ray, 2026-09-08). The art alternates sides, so no two
     screenshots ever end up touching. Phones keep .sword-rows' 44px gap:
     stacked, an image would otherwise butt straight into the next caption. */
  .sword-rows { gap: 0; }
  .sword-row { grid-template-columns: 1fr 1fr; gap: 40px; }
  .sword-row:nth-child(even) .sword-art { grid-column: 2; grid-row: 1; }
  .sword-row:nth-child(even) .sword-cap { grid-column: 1; grid-row: 1; }

  .adam-grid {
    grid-template-columns: 296px 1fr; gap: 6px 40px;
    grid-template-areas: "art copy";
  }
  .adam-art { align-self: center; }        /* Adam centres against the whole block */
  .adam-art img { height: min(370px, 46vh); }
}

@media (prefers-reduced-motion: reduce) {
  /* Smooth scrolling is set on .scroll-region, not on html: the region is the
     scroller, the document is not. Overriding html alone left this inert. */
  html, .scroll-region { scroll-behavior: auto; }
  * { transition: none !important; }
  /* The home logo settles at its mid position rather than bobbing. */
  .intro-logo { animation: none !important; transform: none !important; }
  body.reveal-on .reveal { opacity: 1 !important; transform: none !important; }
  .acc-panel { transition: none !important; }
  /* The map carousel holds on its first slide instead of rotating. */
  .map-carousel .slide { animation: none !important; }
  .map-carousel .slide:first-child { opacity: 1 !important; }
}

/* ---------------------------------------------------------------------------
   20. THEMED SWORD CURSOR. Delete this block + the --cursor-sword token to
   revert. Text fields keep a normal caret; .shot-link keeps its zoom-in.
   --------------------------------------------------------------------------- */
html { cursor: var(--cursor-sword), auto; }
a, button, .btn, [role="button"], label, summary,
.acc-trigger, .gloss-filter button, .nav-toggle, .dl-card, .radio-group label {
  cursor: var(--cursor-sword), pointer;
}
a.shot-link { cursor: zoom-in; }
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], textarea { cursor: text; }