/* Wijha: colours, fonts and layout. All colours are variables so light and dark mode only change this first part. */
@property --scene { syntax: '<color>'; inherits: true; initial-value: #0A7A48; }

:root {
  --green: #0A7A48; --violet: #5B2EE5; --rose: #D6336C; --amber: #F5A524;
  --bg: #F8FBF8; --surface: #FFFFFF; --fg: #10201A; --muted: #566A60; --line: #DDE7E0;
  --accent: #0A7A48; --btn-bg: #0A7A48; --btn-fg: #FFFFFF;
  --tint-green: #DFF3E8; --tint-violet: #EEE9FF; --tint-rose: #FCE4EC; --tint-amber: #FFF0CC;
  --on-green: #0A7A48; --on-violet: #5B2EE5; --on-rose: #B82458; --on-amber: #8A5200;
  --bar-bg: rgba(248, 251, 248, .82);
  --sea: #D7ECEF; --sea-ink: #3E7C86;
  --font-heading: "Alexandria", "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
  --radius-card: 24px; --radius-button: 14px; --bar-h: 68px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --scene: #0A7A48;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0B1612; --surface: #13241D; --fg: #EEF7F1; --muted: #A9C2B5; --line: #24402F;
  --accent: #5FD39A; --btn-bg: #5FD39A; --btn-fg: #0B1612;
  --tint-green: #123A26; --tint-violet: #2A2260; --tint-rose: #4A1A2E; --tint-amber: #4A3610;
  --on-green: #7BE0AC; --on-violet: #C3B5FF; --on-rose: #FF9DBD; --on-amber: #FFCB6B;
  --bar-bg: rgba(11, 22, 18, .78);
  --sea: #0E2A30; --sea-ink: #7FC3CC;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--bar-h); }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 17px/1.65 var(--font-body); transition: background .3s, color .3s; overflow-x: hidden; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--font-heading); margin: 0; letter-spacing: -.03em; text-wrap: balance; }
h1 { font-size: clamp(44px, 6.4vw, 88px); font-weight: 800; line-height: 1; }
h1 span { color: var(--accent); }
h2 { font-size: clamp(34px, 4.6vw, 60px); font-weight: 800; line-height: 1.05; }
h3 { font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3 { letter-spacing: 0; line-height: 1.3; }
p { margin: 0; max-width: 60ch; }
a { color: inherit; }
.muted { color: var(--muted); }
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 48px); }
.row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.kicker { font-family: var(--font-heading); font-weight: 600; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
:lang(ar) .kicker { letter-spacing: 0; font-size: 16px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* top bar */
.bar { position: fixed; inset: 0 0 auto 0; height: var(--bar-h); z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-inline: clamp(16px, 4vw, 48px); transition: background .3s, border-color .3s, backdrop-filter .3s; border-bottom: 1px solid transparent; }
.bar.solid { background: var(--bar-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--line); }
.logo { direction: ltr; unicode-bidi: isolate; font-family: var(--font-heading); font-weight: 800; font-size: 26px; letter-spacing: -.04em; text-decoration: none; }
.logo i { color: var(--accent); font-style: normal; }
.links { display: flex; gap: 28px; font-weight: 500; font-size: 15.5px; }
.links a { text-decoration: none; padding: 6px 2px; position: relative; }
.links a::after { content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform .25s var(--ease); }
.links a:hover::after { transform: scaleX(1); }
.tools { display: flex; gap: 8px; }
.tool { font: 600 14.5px var(--font-heading); height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); cursor: pointer; transition: border-color .2s, transform .2s var(--ease); }
.tool:hover { border-color: var(--accent); transform: translateY(-1px); }
.tool.icon { width: 40px; padding: 0; display: grid; place-items: center; }
.tool svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tool .moon { display: none; }
[data-theme="dark"] .tool .sun { display: none; }
[data-theme="dark"] .tool .moon { display: block; }

/* the journey: story on one side, 3D on the other */
.journey { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(16px, 4vw, 64px); max-width: 1320px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 48px); }
.story { order: 1; min-width: 0; }
.stage { order: 2; position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; align-items: center; min-width: 0; }
.stage-inner { position: relative; width: 100%; height: min(80vh, 760px); }
.blob { position: absolute; inset: 6% 0; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--scene) 30%, transparent), transparent 100%); transition: --scene .9s ease; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; }
#scene:active { cursor: grabbing; }
.stage-cap { position: absolute; inset: auto 0 2% 0; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
.cap-name { font: 700 15px var(--font-heading); padding: 7px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 24px -16px #000; }
.dots { display: flex; gap: 7px; }
.dots i { width: 8px; height: 8px; border-radius: 4px; background: var(--line); transition: width .35s var(--ease), background .35s; }
.dots i.on { width: 26px; background: var(--accent); }

/* hide/show button for the 3D model (phones and tablets only) */
.stage-toggle { display: none; position: absolute; top: 8px; inset-inline-end: 0; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--fg); cursor: pointer; place-items: center; padding: 0; }
.stage-toggle svg, .to-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }

/* back to top button */
.to-top { position: fixed; bottom: 20px; inset-inline-end: 20px; z-index: 30; width: 50px; height: 50px; border-radius: 50%; border: 0; background: var(--btn-bg); color: var(--btn-fg); cursor: pointer; display: grid; place-items: center; padding: 0;
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .3s, transform .3s var(--ease); }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top.show:hover { transform: translateY(-3px); }

.chapter { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding-block: calc(var(--bar-h) + 24px) 56px; }
.hero .lede { font-size: clamp(18px, 1.6vw, 21px); color: var(--muted); }
.hint { font-size: 15px; color: var(--muted); }

.btn { font: 600 16px/1 var(--font-heading); padding: 15px 22px; border-radius: var(--radius-button); border: 2px solid transparent; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s, color .2s, border-color .2s; }
.btn-main { background: var(--btn-bg); color: var(--btn-fg); }
.btn-main:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -14px var(--btn-bg); }
.btn-main .arr { transition: transform .25s var(--ease); }
.btn-main:hover .arr { transform: translateY(3px); }
.btn-add { background: var(--tint-green); color: var(--on-green); }
.btn-add:hover { transform: translateY(-2px); }
.btn-add[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-fg); }
.btn:active { transform: translateY(1px); }
@keyframes pop { 0% { scale: .9; } 60% { scale: 1.06; } 100% { scale: 1; } }
.btn.just { animation: pop .3s var(--ease); }

.stats { list-style: none; margin: 14px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.stats b, .facts b { display: block; font-family: var(--font-heading); font-weight: 800; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.1; letter-spacing: -.03em; color: var(--accent); }
.stats span, .facts span { font-size: 14.5px; color: var(--muted); line-height: 1.4; display: block; margin-top: 4px; }

/* the route map */
.map-block { display: flex; flex-direction: column; gap: 18px; padding-block: 24px 96px; }
.map-block .lede { color: var(--muted); font-size: 18px; }
.map { container-type: inline-size; position: relative; direction: ltr; border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--line); background: var(--sea); margin-top: 6px; transition: background .3s; }
.map svg { display: block; width: 100%; height: auto; }
.map .land { fill: var(--surface); stroke: var(--line); stroke-width: 1; stroke-linejoin: round; }
.map .ksa { fill: var(--tint-green); stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; }
.map .route { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0.1 9; }
.map .route-draw { fill: none; stroke: #fff; stroke-width: 14; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s cubic-bezier(.5, 0, .3, 1) .2s; }
.map.pre .route-draw { stroke-dashoffset: 1; }
.sea-label { position: absolute; transform: translate(-50%, -50%) rotate(var(--rot)); font: 600 clamp(10px, 1.5vw, 13px) var(--font-heading); letter-spacing: .14em; text-transform: uppercase; color: var(--sea-ink); white-space: nowrap; pointer-events: none; }
:lang(ar) .sea-label { letter-spacing: 0; }
.map-key { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font: 600 11.5px var(--font-heading); color: var(--muted); }
.map-key .scale { display: inline-flex; align-items: center; gap: 6px; }
.map-key .scale i { display: block; height: 6px; border: 2px solid var(--muted); border-top: 0; }
.map-key .n { display: inline-flex; align-items: center; gap: 3px; color: var(--fg); }
.map-key .n svg { width: 12px; height: 12px; fill: var(--fg); }

.pin { --r: 14px; position: absolute; display: flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; cursor: pointer; color: var(--fg); transform: translate(calc(var(--r) * -1), -50%); }
.pin.l { flex-direction: row-reverse; transform: translate(calc(-100% + var(--r)), -50%); }
.pin .dot { width: calc(var(--r) * 2); height: calc(var(--r) * 2); border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--btn-bg); color: var(--btn-fg); font: 800 13px var(--font-heading); border: 2.5px solid var(--surface); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .55); transition: transform .25s var(--ease); }
.pin .name { font: 700 13px var(--font-heading); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; white-space: nowrap; box-shadow: 0 6px 14px -10px rgba(0, 0, 0, .5); transition: border-color .2s, color .2s; }
.pin:hover .dot, .pin:focus-visible .dot { transform: scale(1.18); }
.pin:hover .name, .pin:focus-visible .name { border-color: var(--accent); color: var(--accent); }
.pin:focus-visible { outline: none; }
.pin:focus-visible .dot { outline: 3px solid var(--accent); outline-offset: 2px; }
.pin > * { transition: opacity .5s var(--ease), translate .5s var(--ease), transform .25s var(--ease), border-color .2s, color .2s; transition-delay: calc(var(--i) * 110ms + 250ms), calc(var(--i) * 110ms + 250ms), 0s, 0s, 0s; }
.map.pre .pin > * { opacity: 0; translate: 0 -14px; }

/* place chapters */
.meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tag { font: 600 13px var(--font-heading); padding: 6px 12px; border-radius: 999px; background: var(--tint-green); color: var(--on-green); }
.tag.c1 { background: var(--tint-amber); color: var(--on-amber); }
.tag.c2 { background: var(--tint-rose); color: var(--on-rose); }
.tag.c3 { background: var(--tint-violet); color: var(--on-violet); }
.tag.plain { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.tagline { font: 600 clamp(19px, 1.9vw, 24px)/1.3 var(--font-heading); color: var(--muted); letter-spacing: -.01em; }
.photo { margin: 0; }
.photo .frame { border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 16 / 10; background: var(--tint-green); }
.photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.photo:hover img { transform: scale(1.04); }
.photo figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.facts li { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px; min-width: 0; }
.facts b { font-size: clamp(22px, 2.2vw, 30px); }
.best { font-size: 15px; color: var(--muted); }

/* ---------- motion ----------
   1. The intro plays a short entrance when the page opens.
   2. Everything else is given a data-rv style by app.js and starts hidden (.pre) only if it is below the screen;
      it animates in as it scrolls into view. --d is a delay so items in a group arrive one after another. */
@keyframes rise { from { opacity: 0; translate: 0 32px; } }
@keyframes drop { from { opacity: 0; translate: 0 -100%; } }
@keyframes bloom { from { opacity: 0; scale: .8; } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 4px; } }
.bar { animation: drop .8s var(--ease) both; }
.hero > * { animation: rise .9s var(--ease) both; }
.hero > :nth-child(1) { animation-delay: .15s; }
.hero > :nth-child(2) { animation-delay: .25s; }
.hero > :nth-child(3) { animation-delay: .45s; }
.hero > :nth-child(4) { animation-delay: .6s; }
.hero > .stats { animation: none; }
.hero h1 span { display: inline-block; animation: rise 1s var(--ease) .5s both; }
.stats li { animation: rise .8s var(--ease) both; }
.stats li:nth-child(1) { animation-delay: .8s; }
.stats li:nth-child(2) { animation-delay: .92s; }
.stats li:nth-child(3) { animation-delay: 1.04s; }
.stage-inner { animation: bloom 1.3s var(--ease) .3s both; }
.hero .btn-main .arr { animation: bob 1.8s ease-in-out 1.6s infinite; }
.facts b { font-variant-numeric: tabular-nums; }

[data-rv] { transition: opacity .8s var(--ease), translate .9s var(--ease), scale .9s var(--ease), clip-path 1.2s var(--ease); transition-delay: var(--d, 0ms); }
[data-rv].pre { opacity: 0; }
[data-rv="up"].pre { translate: 0 36px; }
[data-rv="pop"].pre { scale: .88; translate: 0 18px; }
[data-rv="side"].pre { translate: -28px 0; }
[dir="rtl"] [data-rv="side"].pre { translate: 28px 0; }
[data-rv="wipe"] { clip-path: inset(0 0 0 0); }
[data-rv="wipe"].pre { opacity: 1; clip-path: inset(0 0 100% 0); }
[data-rv="words"].pre { opacity: 1; }
.wd { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .14em; margin-block: -.14em; }
.wd > span { display: inline-block; transition: translate .9s var(--ease), opacity .9s var(--ease); transition-delay: calc(var(--d, 0ms) + var(--w) * 70ms); }
[data-rv="words"].pre .wd > span { translate: 0 110%; opacity: 0; }

/* photos sit slightly zoomed so they can drift as you scroll, and zoom out as they are revealed */
.photo img, .card img { scale: 1.12; transition: transform .8s var(--ease), scale 1.6s var(--ease); }
[data-rv].pre img { scale: 1.35; }

/* reading progress line under the top bar */
.progress { position: absolute; inset: auto 0 -1px 0; height: 3px; background: var(--accent); transform-origin: left; transform: scaleX(0); pointer-events: none; }
[dir="rtl"] .progress { transform-origin: right; }

/* lower sections */
.band { padding-block: clamp(64px, 9vw, 120px); border-top: 1px solid var(--line); }
.band .wrap { display: flex; flex-direction: column; gap: 22px; }
.more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 10px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.card:hover { border-color: var(--accent); box-shadow: 0 24px 40px -30px var(--green); }
.card .frame { aspect-ratio: 4 / 3; overflow: hidden; background: var(--tint-amber); }
.card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.card:hover img { transform: scale(1.05); }
.card .txt { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card p { font-size: 15.5px; color: var(--muted); line-height: 1.55; }
.card .tag { align-self: flex-start; }
.card small { font-size: 12.5px; color: var(--muted); margin-top: auto; padding-top: 6px; }

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 10px; }
.tile { border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tile .k { font: 600 13.5px var(--font-heading); }
.tile b { font: 800 24px/1.15 var(--font-heading); letter-spacing: -.02em; }
.tile span { font-size: 15px; line-height: 1.5; }
.tile.t0 { background: var(--tint-amber); } .tile.t0 .k { color: var(--on-amber); }
.tile.t1 { background: var(--tint-green); } .tile.t1 .k { color: var(--on-green); }
.tile.t2 { background: var(--tint-violet); } .tile.t2 .k { color: var(--on-violet); }
.tile.t3 { background: var(--tint-rose); } .tile.t3 .k { color: var(--on-rose); }

.plan-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; margin-top: 8px; }
.trip, .words { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.trip-list { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { font: 600 15px var(--font-heading); padding: 11px 16px; border-radius: 999px; border: 2px dashed var(--line); background: transparent; color: var(--muted); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.chip::before { content: "+ "; }
.chip[aria-pressed="true"] { border: 2px solid var(--btn-bg); background: var(--btn-bg); color: var(--btn-fg); }
.chip[aria-pressed="true"]::before { content: "✓ "; }
.chip.just { animation: pop .3s var(--ease); }
.meter { height: 8px; border-radius: 4px; background: var(--tint-green); overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; background: var(--btn-bg); border-radius: 4px; transition: width .45s var(--ease); }
.words ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.words li { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 20px; align-items: center; padding-block: 14px; border-top: 1px solid var(--line); }
.words li:first-child { border-top: 0; padding-top: 0; }
.words .w { font: 800 26px/1.4 var(--font-heading); color: var(--accent); text-align: center; background: var(--tint-green); border-radius: 12px; padding: 4px 8px; }
.words .t { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.words .t b { font: 700 17px var(--font-heading); }
.words .m { color: var(--muted); font-size: 15.5px; }

/* footer */
.foot { background: var(--green); color: #fff; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; padding-block: 48px; }
.small-cap { font: 600 13px var(--font-heading); letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
:lang(ar) .small-cap { letter-spacing: 0; font-size: 15px; }
.author { font: 800 30px/1.2 var(--font-heading); letter-spacing: -.02em; margin-block: 6px 4px; }
.foot-note { font-size: 14px; opacity: .85; margin-top: 14px; }
.credits { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13.5px; line-height: 1.55; opacity: .9; display: flex; flex-direction: column; gap: 4px; }
.credits a { color: #fff; }

/* tablets and phones: the 3D model sits at the top and the story scrolls beneath it */
@media (max-width: 900px) {
  .links { display: none; }
  .journey { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .stage { order: 0; top: var(--bar-h); height: 38vh; min-height: 230px; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--line); margin-top: var(--bar-h); transition: background .3s; }
  .stage-inner { height: 100%; }
  .stage-cap { inset: auto 0 6% 0; flex-direction: row; justify-content: center; }
  .stage-toggle { display: grid; }
  /* minimised: the model is hidden and only a slim bar with the place name stays */
  .stage.mini { height: auto; min-height: 0; }
  .stage.mini .stage-inner { height: 54px; display: flex; align-items: center; }
  .stage.mini #scene, .stage.mini .blob { display: none; }
  .stage.mini .stage-cap { position: static; justify-content: flex-start; }
  .stage.mini .stage-toggle { top: 8px; }
  .stage.mini .stage-toggle svg { transform: rotate(180deg); }
  .chapter { min-height: 0; padding-block: 40px 56px; justify-content: flex-start; }
  .chapter.hero { padding-top: 24px; }
  .map-block { padding-block: 16px 56px; }
  .pin { --r: 11px; gap: 4px; }
  .pin .dot { font-size: 11px; border-width: 2px; }
  .pin .name { font-size: 11.5px; padding: 2px 8px; }
  .map-key { right: 8px; bottom: 8px; padding: 4px 10px; font-size: 10.5px; }
  .more-grid { grid-template-columns: minmax(0, 1fr); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-grid, .foot-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
  /* the three rows share one pair of columns, so every label starts at the same point */
  .facts { grid-template-columns: auto minmax(0, 1fr); }
  .facts li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; column-gap: 16px; align-items: center; }
  .facts span { margin: 0; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bar, .hero > *, .hero h1 span, .stats li, .stage-inner, .hero .btn-main .arr { animation: none; }
  .photo img, .card img { scale: 1; }
  .btn.just, .chip.just { animation: none; }
  .btn, .photo img, .card img, .chapter > *, .card, .tile, .meter i, .blob, .to-top, .to-top svg, .stage-toggle svg, .pin > *, .pin .dot, .map .route-draw { transition: none; }
  .map.pre .pin > * { opacity: 1; translate: none; }
  .map.pre .route-draw { stroke-dashoffset: 0; }
}