/* Switchback Outdoor Co. Shared styles. A trail-map look: flat hills, chunky rounded UI. */
@font-face { font-family: 'Fredoka'; src: url('/demos/_fonts/fredoka/fredoka-latin-wght-normal.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('/demos/_fonts/nunito/nunito-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('/demos/_fonts/nunito/nunito-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('/demos/_fonts/nunito/nunito-latin-800-normal.woff2') format('woff2'); font-weight: 800; font-display: swap; }

@view-transition { navigation: auto; }

:root {
  --paper: #FFF7E8;
  --sand: #FFEDCC;
  --meadow: #E5F2D6;
  --ink: #1C2B27;
  --ink-2: #44534E;
  --forest: #1F5A43;
  --forest-2: #2E7A57;
  --pine: #163C2F;
  --grass: #7DBE6A;
  --hill: #A9D88E;
  --sun: #FFC23D;
  --sun-2: #FFE09A;
  --coral: #F2694B;
  --coral-d: #B23A22;
  --river: #47B6C8;
  --river-d: #0E5D6E;
  --sky: #BFE6EE;
  --focus: #0E5D6E;
  --r: 22px;
  --r-s: 14px;
  --bw: 2.5px;
  --lift: 0 5px 0 var(--ink);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --display: 'Fredoka', 'Nunito', ui-rounded, system-ui, sans-serif;
  --body: 'Nunito', ui-rounded, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap: 1180px;
  --hd: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hd) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--body); overflow-x: clip; }
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.1; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
p { margin: 0; }
a { color: var(--forest); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--forest-2); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.dark, .ft { --focus: var(--sun); }
.quiz, .brief-list li, .dark .cta { --focus: var(--river-d); }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: min(var(--wrap), calc(100% - 40px)); margin-inline: auto; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 800; transition: top .3s var(--ease); }
.skip:focus { top: 12px; color: var(--paper); }

/* ---------- Type ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 700 14px/1.2 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.eyebrow::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 3px rgba(242, 105, 75, .22); }
.dark .eyebrow { color: #E9F2E2; }
.h-xl { font-size: clamp(40px, 6.2vw, 74px); line-height: 1.02; }
.h-l { font-size: clamp(32px, 4.4vw, 52px); }
.h-m { font-size: clamp(24px, 2.6vw, 32px); }
.lead { font-size: clamp(18px, 1.6vw, 20px); color: var(--ink-2); max-width: 60ch; }
.dark .lead { color: #E3ECDD; }
.muted { color: var(--ink-2); }
.sec { padding: clamp(64px, 9vw, 112px) 0; position: relative; }
.sec-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: clamp(32px, 4vw, 48px); }
.sec-head.center { margin-inline: auto; text-align: center; justify-items: center; }
.meadow { background: var(--meadow); }
.sandy { background: var(--sand); }
.dark { background: var(--forest); color: var(--paper); }
.dark a:not(.btn) { color: var(--sun-2); }

/* Section edges: a hard ink line with a dashed trail marking under it (decorative) */
.edge-top { border-top: 3px solid var(--ink); }
.edge-top::before { content: ''; position: absolute; left: 0; right: 0; top: 9px; border-top: 3px dashed rgba(28, 43, 39, .16); pointer-events: none; }
.dark.edge-top::before, .ft.edge-top::before { border-top-color: rgba(255, 247, 232, .16); }
.hero-hills { display: none; }
.hero, .phero { border-bottom: 3px solid var(--ink); }
:root { --hills: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V20C90 4 170 4 260 18S430 40 520 22 690 0 790 12 960 36 1050 22 1160 10 1200 20V40Z'/%3E%3C/svg%3E"); }

/* ---------- Buttons ---------- */
.btn { --bg: var(--paper); --fg: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 24px; border-radius: 999px; border: var(--bw) solid var(--ink); background: var(--bg); color: var(--fg); font: 600 17px/1.1 var(--display); letter-spacing: .01em; text-decoration: none; box-shadow: var(--lift); transition: transform .35s var(--spring), box-shadow .35s var(--ease), background-color .3s var(--ease); white-space: nowrap; }
.btn:hover { color: var(--fg); transform: translateY(-2px); box-shadow: 0 7px 0 var(--ink); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); transition-duration: .08s; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-sun { --bg: var(--sun); }
.btn-sun:hover { --bg: #FFCB57; }
.btn-forest { --bg: var(--forest); --fg: var(--paper); }
.btn-forest:hover { --bg: var(--forest-2); }
.btn-sm { min-height: 42px; padding: 8px 18px; font-size: 16px; box-shadow: 0 4px 0 var(--ink); }
.btn[aria-disabled='true'], .btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: 0 3px 0 var(--ink); }
.btns { display: flex; flex-wrap: wrap; gap: 14px; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; min-height: 44px; }
.link-arrow svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Header ---------- */
.hd { position: sticky; top: 0; z-index: 60; background: rgba(255, 247, 232, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 2px solid transparent; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.scrolled .hd { border-bottom-color: rgba(28, 43, 39, .12); box-shadow: 0 8px 24px rgba(28, 43, 39, .06); }
.hd-in { display: flex; align-items: center; gap: 20px; height: var(--hd); }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 600 21px/1 var(--display); letter-spacing: -.01em; margin-right: auto; }
.logo:hover { color: var(--ink); }
.logo svg { width: 40px; height: 40px; transition: transform .5s var(--spring); }
.logo:hover svg { transform: rotate(-8deg) scale(1.06); }
.logo small { display: block; font: 700 11px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-top: 3px; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { position: relative; padding: 10px 14px; border-radius: 999px; color: var(--ink); font-weight: 800; text-decoration: none; font-size: 16px; transition: background-color .25s var(--ease); }
.nav a:hover { background: var(--sand); color: var(--ink); }
.nav a[aria-current='page'] { background: var(--meadow); box-shadow: inset 0 0 0 2px var(--forest); }
.hd-act { display: flex; align-items: center; gap: 12px; }
.view-tog { display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 6px 8px 6px 14px; border-radius: 999px; border: 2px solid rgba(28, 43, 39, .25); background: var(--paper); font: 800 14px/1 var(--body); color: var(--ink); transition: border-color .25s var(--ease); }
.view-tog:hover { border-color: var(--ink); }
.view-tog .sw { position: relative; width: 40px; height: 24px; border-radius: 999px; background: #CBD5C6; transition: background-color .3s var(--ease); flex: none; }
.view-tog .sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .35s var(--spring); }
.view-tog[aria-pressed='true'] .sw { background: var(--forest); }
.view-tog[aria-pressed='true'] .sw::after { transform: translateX(16px); }
.menu-btn { display: none; width: 48px; height: 48px; border-radius: 50%; border: var(--bw) solid var(--ink); background: var(--paper); box-shadow: 0 3px 0 var(--ink); place-items: center; padding: 0; }
.menu-btn span, .menu-btn span::before, .menu-btn span::after { display: block; width: 20px; height: 2.5px; border-radius: 2px; background: var(--ink); transition: transform .35s var(--ease), opacity .2s; }
.menu-btn span { position: relative; }
.menu-btn span::before, .menu-btn span::after { content: ''; position: absolute; left: 0; }
.menu-btn span::before { top: -6px; }
.menu-btn span::after { top: 6px; }
.menu-btn[aria-expanded='true'] span { background: transparent; }
.menu-btn[aria-expanded='true'] span::before { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded='true'] span::after { transform: translateY(-6px) rotate(-45deg); }
.mnav { position: fixed; z-index: 55; left: 12px; right: 12px; top: calc(var(--hd) + 4px); padding: 14px; border-radius: var(--r); background: var(--paper); border: var(--bw) solid var(--ink); box-shadow: 0 8px 0 var(--ink), 0 30px 60px rgba(28, 43, 39, .2); display: grid; gap: 6px; opacity: 0; transform: translateY(-12px) scale(.98); transform-origin: top center; visibility: hidden; transition: opacity .3s var(--ease), transform .4s var(--ease), visibility 0s .4s; max-height: calc(100dvh - var(--hd) - 24px); overflow: auto; }
.mnav.on { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.mnav a:not(.btn) { padding: 14px 16px; border-radius: var(--r-s); font: 600 21px/1.1 var(--display); color: var(--ink); text-decoration: none; }
.mnav a:not(.btn):hover, .mnav a[aria-current='page'] { background: var(--meadow); }
.mnav .btn { margin-top: 8px; }
.mnav .view-tog { justify-content: space-between; margin-top: 6px; min-height: 52px; font-size: 16px; }
@media (max-width: 960px) {
  .nav, .hd-act .view-tog, .hd-act .btn { display: none; }
  .menu-btn { display: grid; }
}
@media (min-width: 961px) { .mnav { display: none; } }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(28px, 4vw, 56px) 0 clamp(80px, 9vw, 120px); background: linear-gradient(180deg, var(--paper) 0%, #FFF1D6 100%); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.hero-copy { display: grid; gap: 22px; justify-items: start; }
.hero-copy .btns { margin-top: calc(32px - 22px); }
.hero-facts { display: flex; flex-wrap: wrap; gap: 10px 18px; list-style: none; padding: 0; margin: 4px 0 0; font-weight: 700; color: var(--ink-2); font-size: 15px; }
.hero-facts li { display: inline-flex; align-items: center; gap: 8px; }
.hero-facts li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--forest-2); }
.hero-hills { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; pointer-events: none; }
.hero-hills svg { width: 100%; height: 100%; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } }

/* Page hero (inner pages) */
.phero { position: relative; padding: clamp(40px, 6vw, 80px) 0 clamp(90px, 10vw, 130px); background: linear-gradient(180deg, var(--paper), #FFEFD0); overflow: hidden; }
.phero-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: center; }
.phero-copy { display: grid; gap: 18px; justify-items: start; }
.phero-art { justify-self: end; width: min(100%, 380px); }
.phero-art svg { border-radius: 32px; border: 3px solid var(--ink); box-shadow: 0 8px 0 var(--ink); }
@media (max-width: 860px) { .phero-in { grid-template-columns: 1fr; } .phero-art { justify-self: start; width: min(100%, 300px); } }
.crumbs { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.crumbs li + li::before { content: '/'; margin-right: 8px; opacity: .6; }

/* ---------- Trail game panel ---------- */
.trail { position: relative; display: grid; gap: 12px; }
.trail-frame { position: relative; border-radius: 28px; border: 3px solid var(--ink); background: var(--sky); box-shadow: 0 8px 0 var(--ink); overflow: hidden; aspect-ratio: 16 / 11; }
@media (max-width: 620px) { .trail-frame { aspect-ratio: auto; height: clamp(360px, 104vw, 440px); } }
.trail-frame canvas { width: 100%; height: 100%; outline: none; touch-action: manipulation; }
.trail-frame.playing canvas { touch-action: none; }
.trail-frame canvas:focus-visible { outline: none; }
.trail-frame:has(canvas:focus-visible) { box-shadow: 0 8px 0 var(--ink), 0 0 0 4px var(--paper), 0 0 0 7px var(--focus); }
.hud { position: absolute; z-index: 6; left: 12px; right: 12px; top: 12px; display: flex; align-items: center; gap: 8px; pointer-events: none; }
.hud > * { pointer-events: auto; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 247, 232, .94); border: 2px solid var(--ink); font: 600 15px/1 var(--display); color: var(--ink); white-space: nowrap; }
.chip svg { width: 16px; height: 16px; }
.chip.pop { animation: pop .5s var(--spring); }
@keyframes pop { 40% { transform: scale(1.18); } }
.hud .prog { flex: 1; position: relative; height: 12px; border-radius: 999px; background: rgba(255, 247, 232, .85); border: 2px solid var(--ink); overflow: visible; min-width: 60px; }
.hud .prog i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); background: var(--forest-2); border-radius: 999px; }
.hud .prog b { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }
.hud .prog b.on { background: var(--coral); }
.hud-btn { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper); display: grid; place-items: center; padding: 0; transition: transform .3s var(--spring); }
.hud-btn:hover { transform: scale(1.08); }
.hud-btn svg { width: 18px; height: 18px; }
.ov { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 64px 16px 16px; pointer-events: none; background: linear-gradient(180deg, rgba(22, 60, 47, 0) 0%, rgba(22, 60, 47, .45) 100%); transition: opacity .4s var(--ease), visibility 0s; }
.ov.off { opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s .3s; }
.ov-card, .stops .cp.open { width: min(440px, 100%); max-height: 100%; overflow: auto; padding: 22px; border-radius: var(--r); background: var(--paper); border: var(--bw) solid var(--ink); box-shadow: 0 6px 0 var(--ink); text-align: center; display: grid; gap: 12px; justify-items: center; }
.ov:not(.off) .ov-card { animation: rise .55s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.ov-card { pointer-events: auto; }
.ov-card .ov-t { font: 600 clamp(22px, 2.4vw, 28px)/1.1 var(--display); color: var(--ink); }
.ov-body { display: grid; gap: 8px; justify-items: center; }
.ov-card p { color: var(--ink-2); font-size: 16px; }
.ov-card .best { font-size: 14px; font-weight: 800; }
.ov-card .btns { justify-content: center; margin-top: 4px; }
.ov-card .ov-score { font: 600 clamp(30px, 4vw, 44px)/1 var(--display); color: var(--forest); }
.ov-card .ov-score small { font-size: .5em; color: var(--ink-2); }
.ov-new { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--sun); border: 2px solid var(--ink); font: 600 14px/1.2 var(--display); }
.trail-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; justify-content: space-between; }
.trail-keys { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; padding: 0; margin: 0; font-size: 14px; font-weight: 700; color: var(--ink-2); }
kbd { display: inline-block; min-width: 26px; padding: 2px 7px; border-radius: 7px; border: 2px solid var(--ink); border-bottom-width: 4px; background: var(--paper); font: 600 13px/1.2 var(--display); text-align: center; color: var(--ink); }
.stop-bar { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.stop-bar button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; border: 2px solid var(--ink); background: var(--paper); font: 600 15px/1 var(--display); transition: background-color .25s var(--ease), transform .3s var(--spring); }
.stop-bar button:hover { transform: translateY(-2px); background: var(--sand); }
.stop-bar button i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #DDE3D8; font: 700 12px/1 var(--body); font-style: normal; }
.stop-bar button[data-found] i { background: var(--coral); color: #fff; }
.stop-bar-lab { font-size: 14px; font-weight: 800; color: var(--ink-2); margin-right: 4px; }
.trail-note { font-size: 14px; color: var(--ink-2); }
.classic-art { display: none; }
.trail-keys .touch { display: none; }
@media (pointer: coarse) { .trail-keys .key { display: none; } .trail-keys .touch { display: list-item; } }
.motion-note { display: none; }

/* Stops: checkpoint content */
.stops { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.cp { position: relative; display: grid; gap: 12px; align-content: start; padding: 24px; border-radius: var(--r); background: var(--paper); border: var(--bw) solid var(--ink); box-shadow: var(--lift); }
.cp:focus { outline: none; }
.cp-flag { display: inline-flex; align-items: center; gap: 8px; font: 700 13px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.cp-flag svg { width: 22px; height: 22px; }
.cp h2 { font-size: 23px; }
.cp p { color: var(--ink-2); font-size: 16px; }
.cp ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-weight: 700; font-size: 15px; text-align: left; }
.cp ul li { display: flex; gap: 10px; align-items: baseline; }
.cp ul li::before { content: ''; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--forest-2); transform: translateY(-1px); }
.cp-act { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin-top: calc(32px - 12px); }
.cp .keep { display: none; }
.stops-sec .stops .cp-act { justify-content: flex-start; }
@media (max-width: 1080px) { .stops { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .stops { grid-template-columns: 1fr; } }

/* In the game, stops live inside the frame and open one at a time */
.trail-frame .stops { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 60px 14px 14px; grid-template-columns: 1fr; pointer-events: none; }
.trail-frame .stops:has(.open) { background: rgba(22, 60, 47, .4); pointer-events: auto; }
.trail-frame .stops .cp { display: none; }
.trail-frame .stops .cp.open { display: grid; pointer-events: auto; animation: rise .5s var(--ease); text-align: left; justify-items: stretch; padding: 20px; gap: 10px; }
.trail-frame .stops .cp.open .keep { display: inline-flex; }
.trail-frame .stops .cp.open .cp-act { margin-top: 8px; justify-content: flex-start; }
.trail-frame .stops .cp.open h2 { font-size: 22px; }
.trail-frame .stops .cp.open p { font-size: 15px; }
.trail-frame .stops .cp.open ul { font-size: 14px; gap: 5px; }

@media (max-width: 620px) {
  .ov { padding: 58px 10px 10px; }
  .ov-card { padding: 16px; gap: 8px; }
  .ov-card p { font-size: 15px; }
  .ov-card .btn { min-height: 44px; padding: 8px 16px; font-size: 16px; }
  .trail-frame .stops:has(.open) { position: fixed; z-index: 90; padding: 76px 14px; background: rgba(22, 60, 47, .55); }
  .trail-frame .stops .cp.open { max-height: calc(100dvh - 152px); }
}

/* Classic view: no game, plain sections */
.classic .trail-frame, .classic .trail-bar, .classic .stop-bar-wrap, html:not(.js) .trail-frame, html:not(.js) .trail-bar, html:not(.js) .stop-bar-wrap { display: none !important; }
.classic .classic-art, html:not(.js) .classic-art { display: block; }
.classic .motion-note.on { display: flex; }
html.js:not(.classic) .stops-sec { display: none; }
.stop-bar-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.motion-note { align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 12px 16px; border-radius: var(--r-s); background: var(--paper); border: 2px dashed rgba(28, 43, 39, .35); font-size: 15px; font-weight: 700; color: var(--ink-2); }
.motion-note button { font-weight: 800; color: var(--forest); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.classic-art svg { width: 100%; height: auto; border-radius: 28px; border: 3px solid var(--ink); box-shadow: 0 8px 0 var(--ink); }

/* ---------- Cards ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } }
.card { position: relative; display: grid; gap: 12px; align-content: start; padding: 26px; border-radius: var(--r); background: var(--paper); border: var(--bw) solid var(--ink); box-shadow: var(--lift); transition: transform .45s var(--spring), box-shadow .45s var(--ease); }
.card h3 { font-size: 23px; }
.card p { color: var(--ink-2); }
.card-hover:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 9px 0 var(--ink); }
.ico { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--sun); border: var(--bw) solid var(--ink); }
.ico svg { width: 30px; height: 30px; }
.ico.c2 { background: var(--hill); }
.ico.c3 { background: var(--river); }
.ico.c4 { background: #FFB8A3; }

/* Tour cards */
.tour { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: var(--r); background: var(--paper); border: var(--bw) solid var(--ink); box-shadow: var(--lift); overflow: hidden; transition: transform .45s var(--spring), box-shadow .45s var(--ease), opacity .35s var(--ease); }
.tour:hover { transform: translateY(-4px); box-shadow: 0 9px 0 var(--ink); }
.tour-art { position: relative; aspect-ratio: 16 / 8; border-bottom: var(--bw) solid var(--ink); overflow: hidden; }
.tour-art svg { width: 100%; height: 100%; }
.tour-art .badge { position: absolute; left: 14px; top: 14px; }
.tour-body { display: grid; gap: 12px; align-content: start; padding: 22px; }
.tour-body h3 { font-size: 23px; }
.tour-body h3 a { color: inherit; text-decoration: none; }
.tour-body p { color: var(--ink-2); font-size: 16px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--meadow); border: 1.5px solid rgba(28, 43, 39, .25); font-size: 13.5px; font-weight: 800; color: var(--ink); }
.tag.lv-easy { background: #DDF0CF; }
.tag.lv-moderate { background: var(--sun-2); }
.tag.lv-challenging { background: #FFD2C4; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--paper); border: 2px solid var(--ink); font: 600 14px/1 var(--display); }
.badge svg { width: 16px; height: 16px; }
.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 14px; margin-top: auto; border-top: 2px dashed rgba(28, 43, 39, .2); }
.price { font: 600 26px/1 var(--display); }
.price small { font: 700 14px/1 var(--body); color: var(--ink-2); margin-left: 4px; }
.facts-row { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; margin: 0; padding: 0; font-size: 14.5px; font-weight: 700; color: var(--ink-2); }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; counter-reset: s; list-style: none; padding: 0; margin: 0; }
.steps li { position: relative; display: grid; gap: 10px; align-content: start; padding: 26px 22px 24px; border-radius: var(--r); background: rgba(255, 247, 232, .07); border: 2px solid rgba(255, 247, 232, .35); }
.steps li::before { counter-increment: s; content: counter(s); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--sun); color: var(--ink); border: 2.5px solid var(--ink); font: 600 21px/1 var(--display); }
.steps h3 { font-size: 22px; }
.steps p { color: #E3ECDD; font-size: 16px; }
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* Split block */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.split-copy { display: grid; gap: 18px; justify-items: start; }
.split-copy .btns { margin-top: calc(32px - 18px); }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.rate-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; width: 100%; }
.rate-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-radius: var(--r-s); background: var(--paper); border: 2px solid var(--ink); font-weight: 800; }
.rate-list li span:last-child { font: 600 20px/1 var(--display); white-space: nowrap; }

/* Closing call to action */
.cta { position: relative; overflow: hidden; border-radius: 32px; border: 3px solid var(--ink); box-shadow: 0 8px 0 var(--ink); background: var(--sun); padding: clamp(32px, 6vw, 72px); display: grid; gap: 18px; justify-items: start; }
.cta > * { position: relative; z-index: 1; }
.cta .btns { margin-top: calc(32px - 18px); }
.cta .lead { color: var(--ink); }
.cta-art { position: absolute !important; z-index: 0 !important; right: -10px; bottom: -6px; width: min(56%, 560px); pointer-events: none; }
@media (max-width: 760px) { .cta-art { opacity: .35; width: 90%; } }

/* ---------- Forms ---------- */
.field { display: grid; gap: 6px; }
.field label, .field .lab, legend { font-weight: 800; font-size: 15px; color: var(--ink); }
.field .hint { font-size: 14px; color: var(--ink-2); }
.inp { width: 100%; min-height: 50px; padding: 11px 14px; border-radius: var(--r-s); border: 2px solid var(--ink); background: #fff; color: var(--ink); transition: box-shadow .25s var(--ease), border-color .25s; }
.inp:focus { outline: none; box-shadow: 0 0 0 4px rgba(14, 93, 110, .3); border-color: var(--river-d); }
textarea.inp { min-height: 110px; resize: vertical; }
select.inp { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%231C2B27' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px; padding-right: 40px; }
.inp[aria-invalid='true'] { border-color: var(--coral-d); box-shadow: 0 0 0 3px rgba(178, 58, 34, .18); }
.err { font-size: 14px; font-weight: 800; color: var(--coral-d); min-height: 0; }
.err:empty { display: none; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.checks { display: grid; gap: 10px; margin-top: 8px; }
.check { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: var(--r-s); border: 2px solid rgba(28, 43, 39, .2); background: #fff; cursor: pointer; transition: border-color .25s var(--ease), background-color .25s; }
.check:hover { border-color: var(--ink); }
.check:has(input:checked) { border-color: var(--forest); background: #F1F8EA; }
.check:has(input:disabled) { opacity: .6; cursor: not-allowed; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--forest); flex: none; }
.check b { display: block; font-weight: 800; }
.check small { display: block; color: var(--ink-2); font-size: 14px; }
.check .amt { margin-left: auto; font: 600 17px/1.2 var(--display); white-space: nowrap; }

/* Segmented chips (radio groups) */
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 2px solid var(--ink); background: var(--paper); font: 600 16px/1 var(--display); transition: background-color .25s var(--ease), transform .3s var(--spring), box-shadow .25s; }
.seg span svg { width: 18px; height: 18px; }
.seg label:hover span { background: var(--sand); }
.seg input:checked + span { background: var(--forest); color: var(--paper); box-shadow: 0 3px 0 var(--ink); }
.seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.seg input:disabled + span { opacity: .45; cursor: not-allowed; }

.stepper { justify-self: start; width: max-content; display: inline-flex; align-items: center; border: 2px solid var(--ink); border-radius: 999px; background: #fff; overflow: hidden; }
.stepper button { width: 46px; height: 46px; border: 0; background: var(--paper); font: 600 22px/1 var(--display); display: grid; place-items: center; transition: background-color .2s; }
.stepper button:hover { background: var(--sand); }
.stepper button:disabled { opacity: .4; cursor: not-allowed; }
.stepper input { width: 56px; height: 46px; border: 0; border-inline: 2px solid var(--ink); text-align: center; font: 600 19px/1 var(--display); background: #fff; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.success { display: grid; gap: 14px; justify-items: start; padding: 28px; border-radius: var(--r); background: #F1F8EA; border: var(--bw) solid var(--forest); }
.success h3 { font-size: 26px; }
.success[hidden] { display: none; }
.success:not([hidden]) { animation: rise .55s var(--ease); }
.tick { width: 56px; height: 56px; border-radius: 50%; background: var(--forest); display: grid; place-items: center; border: var(--bw) solid var(--ink); }
.tick svg { width: 28px; height: 28px; color: #fff; }

/* ---------- Trail log (fixed bottom-right) ---------- */
.tl-badge { position: fixed; z-index: 70; right: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border-radius: 999px; border: var(--bw) solid var(--ink); background: var(--sun); box-shadow: 0 5px 0 var(--ink), 0 14px 30px rgba(28, 43, 39, .2); font: 600 16px/1 var(--display); color: var(--ink); transition: transform .4s var(--spring), box-shadow .3s var(--ease); }
.tl-badge:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--ink), 0 18px 34px rgba(28, 43, 39, .22); }
.tl-badge .medal { position: relative; width: 40px; height: 40px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); display: grid; place-items: center; }
.tl-badge .medal svg { width: 24px; height: 24px; }
.tl-badge .medal::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid var(--coral); opacity: 0; transform: scale(.7); }
.tl-badge.ping { animation: badge-bounce .8s var(--spring); }
.tl-badge.ping .medal::after { animation: ring .9s var(--ease); }
@keyframes badge-bounce { 25% { transform: translateY(-10px) rotate(-6deg) scale(1.06); } 55% { transform: translateY(0) rotate(3deg); } }
@keyframes ring { 0% { opacity: 1; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.7); } }
.tl-badge .cnt { font: 700 13px/1 var(--body); padding: 4px 8px; border-radius: 999px; background: var(--paper); border: 1.5px solid var(--ink); }
.tl-panel { position: fixed; z-index: 71; right: 18px; bottom: 88px; width: min(400px, calc(100vw - 36px)); max-height: calc(100dvh - 120px); overflow: auto; overscroll-behavior: contain; padding: 22px; border-radius: 26px; background: var(--paper); border: 3px solid var(--ink); box-shadow: 0 8px 0 var(--ink), 0 30px 60px rgba(28, 43, 39, .25); display: grid; gap: 16px; opacity: 0; transform: translateY(16px) scale(.97); transform-origin: bottom right; visibility: hidden; transition: opacity .3s var(--ease), transform .45s var(--ease), visibility 0s .45s; }
.tl-panel.on { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.tl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tl-head h2 { font-size: 26px; }
.tl-head p { font-size: 15px; color: var(--ink-2); margin-top: 4px; }
.tl-x { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper); display: grid; place-items: center; padding: 0; }
.tl-x svg { width: 18px; height: 18px; }
.xp { display: grid; gap: 6px; }
.xp-top { display: flex; justify-content: space-between; font-weight: 800; font-size: 14px; }
.xp-bar { height: 16px; border-radius: 999px; background: #E3E8DD; border: 2px solid var(--ink); overflow: hidden; }
.xp-bar i { display: block; height: 100%; width: var(--xp, 0%); background: repeating-linear-gradient(-45deg, var(--forest-2) 0 10px, #3A8C64 10px 20px); border-radius: 999px; transition: width .9s var(--ease); }
.quests { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.quests li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-s); border: 2px solid rgba(28, 43, 39, .18); background: #fff; transition: border-color .3s, background-color .3s; }
.quests li.done { border-color: var(--forest); background: #F1F8EA; }
.quests .qi { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #E3E8DD; border: 2px solid rgba(28, 43, 39, .3); }
.quests .qi svg { width: 18px; height: 18px; }
.quests li.done .qi { background: var(--forest); border-color: var(--ink); color: #fff; }
.quests li.done.fresh .qi { animation: pop .6s var(--spring); }
.quests b { display: block; font-weight: 800; font-size: 15px; line-height: 1.3; }
.quests small { display: block; font-size: 13.5px; color: var(--ink-2); }
.quests .go { font-size: 14px; font-weight: 800; white-space: nowrap; }
.quests .xpv { font: 600 14px/1 var(--display); color: var(--forest); white-space: nowrap; }
.pass { display: grid; gap: 12px; padding: 18px; border-radius: 20px; border: var(--bw) dashed var(--ink); background: var(--sand); }
.pass.unlocked { border-style: solid; background: #FFF1C7; }
.pass h3 { font-size: 21px; display: flex; align-items: center; gap: 10px; }
.pass h3 svg { width: 24px; height: 24px; }
.pass p { font-size: 15px; color: var(--ink-2); }
.pass form { display: grid; gap: 12px; }
.pass .inp { min-height: 46px; }
.code { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: var(--r-s); background: #fff; border: 2px solid var(--ink); }
.code strong { font: 600 26px/1 var(--display); letter-spacing: .08em; }
.tl-reset { justify-self: start; background: none; border: 0; padding: 0; font-size: 14px; font-weight: 800; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.toasts { position: fixed; z-index: 72; right: 18px; bottom: 90px; display: grid; gap: 10px; justify-items: end; pointer-events: none; width: min(340px, calc(100vw - 36px)); }
.toast { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 18px; background: var(--ink); color: var(--paper); font-weight: 700; font-size: 15px; box-shadow: 0 14px 30px rgba(28, 43, 39, .3); animation: toast-in .5s var(--ease); }
.toast.out { animation: toast-out .4s var(--ease) forwards; }
.toast i { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--sun); color: var(--ink); display: grid; place-items: center; font-style: normal; }
.toast i svg { width: 18px; height: 18px; }
.toast b { color: var(--sun-2); }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }
.classic .tl-badge, .classic .tl-panel, .classic .toasts { display: none !important; }
@media (max-width: 620px) {
  /* On phones the badge moves into the header (site.js), so nothing floats over the game. */
  .hd-act .tl-badge { position: static; gap: 6px; padding: 3px 10px 3px 3px; min-height: 44px; box-shadow: 0 3px 0 var(--ink); font-size: 14px; }
  .hd-act .tl-badge:hover { transform: none; box-shadow: 0 3px 0 var(--ink); }
  .hd-act .tl-badge .medal { width: 34px; height: 34px; }
  .hd-act .tl-badge .medal svg { width: 20px; height: 20px; }
  .tl-badge .lbl { display: none; }
  .tl-panel { right: 10px; left: 10px; width: auto; top: calc(var(--hd) + 8px); bottom: auto; max-height: calc(100dvh - var(--hd) - 90px); padding: 18px; transform-origin: top right; }
  .toasts { right: 12px; left: 12px; width: auto; bottom: auto; top: calc(var(--hd) + 10px); }
}

/* ---------- Footer ---------- */
.ft { position: relative; background: var(--pine); color: #E3ECDD; padding: 72px 0 110px; }
.ft a { color: #fff; }
.ft-top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.ft-brand { display: grid; gap: 14px; align-content: start; }
.ft .logo { color: #fff; }
.ft .logo small { color: #C9D6C3; }
.ft-brand p { font-size: 15px; max-width: 36ch; }
.ft-col { display: grid; gap: 0; align-content: start; font-size: 15px; }
.ft-col a, .ft-col span { display: flex; align-items: center; min-height: 44px; padding-block: 6px; }
.ft-h { font: 600 17px/1.2 var(--display); color: var(--sun-2); margin-bottom: 4px; }
.ft-col a { text-decoration: none; }
.ft-col a:hover { text-decoration: underline; }
.ft-bot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 48px; padding-top: 22px; border-top: 1.5px solid rgba(255, 255, 255, .18); font-size: 14px; }
@media (max-width: 860px) { .ft-top { grid-template-columns: 1fr 1fr; } .ft-brand { grid-column: 1 / -1; } }
@media (max-width: 420px) { .ft-top { grid-template-columns: 1fr; } }

/* ---------- Tours page ---------- */
.filters { display: grid; gap: 16px; padding: 22px; border-radius: var(--r); background: var(--paper); border: var(--bw) solid var(--ink); box-shadow: var(--lift); margin-bottom: 28px; }
.filter-row { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 12px; }
.filter-row legend { float: left; width: 110px; padding-top: 10px; }
.filter-row .seg span { min-height: 40px; font-size: 15px; padding: 7px 14px; }
.filter-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; align-items: center; font-weight: 800; font-size: 15px; color: var(--ink-2); }
.filter-foot button { background: none; border: 0; padding: 0; font-weight: 800; color: var(--forest); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .filter-row { grid-template-columns: 1fr; gap: 8px; } .filter-row legend { float: none; padding: 0; } }
.tour[hidden] { display: none; }
.empty { padding: 32px; border-radius: var(--r); border: 2px dashed rgba(28, 43, 39, .35); text-align: center; display: grid; gap: 10px; justify-items: center; }
.empty[hidden] { display: none; }
.private { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; margin-top: 28px; padding: 24px 28px; border-radius: var(--r); background: var(--sun-2); border: var(--bw) solid var(--ink); box-shadow: var(--lift); }
.private h3 { font-size: 23px; }
.private p { color: var(--ink); }
@media (max-width: 760px) { .private { grid-template-columns: 1fr; } }

.builder { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
@media (max-width: 980px) { .builder { grid-template-columns: 1fr; } }
.b-steps { display: grid; gap: 18px; }
.b-step { padding: 24px; border-radius: var(--r); background: var(--paper); border: var(--bw) solid var(--ink); box-shadow: var(--lift); display: grid; gap: 16px; }
.b-step > legend { float: left; width: 100%; display: flex; align-items: center; gap: 12px; font: 600 22px/1.2 var(--display); padding: 0; }
.b-step > legend + * { clear: both; }
.b-step legend .n { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--sun); border: 2px solid var(--ink); font-size: 18px; transition: background-color .3s; }
.b-step.ok legend .n { background: var(--forest); color: #fff; }
.b-sub { font-weight: 800; font-size: 15px; margin-bottom: -4px; }
.tour-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 560px) { .tour-pick { grid-template-columns: 1fr; } }
.tour-pick label { position: relative; display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-s); border: 2px solid rgba(28, 43, 39, .22); background: #fff; cursor: pointer; transition: border-color .25s, background-color .25s, transform .3s var(--spring); }
.tour-pick label:hover { border-color: var(--ink); }
.tour-pick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tour-pick label:has(input:checked) { border-color: var(--forest); background: #F1F8EA; box-shadow: inset 0 0 0 1px var(--forest); }
.tour-pick label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.tour-pick b { font: 600 17px/1.2 var(--display); }
.tour-pick small { color: var(--ink-2); font-size: 14px; font-weight: 700; }
.tour-pick label[hidden] { display: none; }
.cal-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 800; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal .dow { text-align: center; font-size: 12px; font-weight: 800; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; }
.cal button { position: relative; display: grid; gap: 2px; justify-items: center; padding: 8px 2px; border-radius: 12px; border: 2px solid rgba(28, 43, 39, .22); background: #fff; font: 600 17px/1 var(--display); transition: border-color .2s, background-color .2s, transform .3s var(--spring); min-height: 56px; }
.cal button small { font: 800 10.5px/1 var(--body); letter-spacing: .02em; color: var(--ink-2); text-transform: uppercase; }
.cal button:hover:not(:disabled) { border-color: var(--ink); transform: translateY(-2px); }
.cal button[aria-pressed='true'] { background: var(--forest); color: #fff; border-color: var(--ink); }
.cal button[aria-pressed='true'] small { color: #E3ECDD; }
.cal button:disabled { background: repeating-linear-gradient(-45deg, #F3EEE4 0 6px, #EAE3D6 6px 12px); color: #57534C; cursor: not-allowed; }
.cal button:disabled small { color: #57534C; }
.slots { display: flex; flex-wrap: wrap; gap: 8px; }
.slots button { display: grid; gap: 2px; min-width: 110px; padding: 10px 14px; border-radius: var(--r-s); border: 2px solid var(--ink); background: #fff; text-align: left; transition: background-color .2s, transform .3s var(--spring); }
.slots button b { font: 600 18px/1 var(--display); }
.slots button small { font-size: 13px; font-weight: 800; color: var(--ink-2); }
.slots button[aria-pressed='true'] { background: var(--forest); color: #fff; }
.slots button[aria-pressed='true'] small { color: #E3ECDD; }
.slots button:disabled { border-color: rgba(28, 43, 39, .25); background: #F3EEE4; cursor: not-allowed; }
.slots button:disabled b { text-decoration: line-through; color: #57534C; }
.summary { position: sticky; top: calc(var(--hd) + 16px); display: grid; gap: 14px; padding: 24px; border-radius: 26px; background: var(--paper); border: 3px solid var(--ink); box-shadow: 0 8px 0 var(--ink); }
.summary h3 { font-size: 24px; }
.sum-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 15.5px; }
.sum-list li { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 2px dashed rgba(28, 43, 39, .15); }
.sum-list li span:first-child { color: var(--ink-2); font-weight: 700; }
.sum-list li span:last-child { font-weight: 800; text-align: right; }
.sum-list li.empty-v span:last-child { color: #6B6A63; font-weight: 700; }
.total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.total span { font-weight: 800; }
.total strong { font: 600 36px/1 var(--display); }
.total strong.bump { animation: pop .45s var(--spring); }
.sum-note { font-size: 14px; color: var(--ink-2); }
.summary .btn { width: 100%; }
.summary .hint-need { font-size: 14px; font-weight: 800; color: var(--coral-d); }

/* ---------- Gear page ---------- */
.kit { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
@media (max-width: 980px) { .kit { grid-template-columns: 1fr; } }
.kit-list { display: grid; gap: 12px; list-style: none; padding: 0; margin: 0; }
.kit-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center; padding: 14px 16px; border-radius: var(--r); background: var(--paper); border: var(--bw) solid var(--ink); box-shadow: 0 4px 0 var(--ink); transition: background-color .3s; }
.kit-item.has { background: #F1F8EA; }
.kit-item .ico { width: 64px; height: 64px; }
.kit-item .ico svg { width: 38px; height: 38px; }
.kit-item h3 { font-size: 20px; }
.kit-item p { font-size: 14.5px; color: var(--ink-2); }
.kit-item .rate { font: 600 17px/1.2 var(--display); color: var(--forest); }
@media (max-width: 560px) { .kit-item { grid-template-columns: 52px 1fr; } .kit-item .ico { width: 52px; height: 52px; } .kit-item .stepper { grid-column: 1 / -1; justify-self: start; } }
.sizer { display: grid; gap: 14px; padding: 22px; border-radius: var(--r); background: var(--sand); border: var(--bw) solid var(--ink); margin-bottom: 18px; }
.sizer-row { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; }
@media (max-width: 560px) { .sizer-row { grid-template-columns: 1fr; } }
.range { width: 100%; accent-color: var(--forest); height: 28px; }
.size-out { display: grid; gap: 2px; justify-items: center; min-width: 140px; padding: 12px 16px; border-radius: 18px; background: var(--paper); border: 2px solid var(--ink); text-align: center; }
.size-out strong { font: 600 30px/1 var(--display); color: var(--forest); }
.size-out span { font-size: 13.5px; font-weight: 800; color: var(--ink-2); }
.size-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.size-table th, .size-table td { padding: 10px 12px; text-align: left; border-bottom: 2px dashed rgba(28, 43, 39, .15); }
.size-table th { font-weight: 800; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.size-table tr.on td { background: #F1F8EA; font-weight: 800; }
.quiz { max-width: 760px; margin-inline: auto; padding: clamp(22px, 4vw, 36px); border-radius: 30px; background: var(--paper); border: 3px solid var(--ink); box-shadow: 0 8px 0 var(--ink); display: grid; gap: 22px; color: var(--ink); }
.quiz-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 800; font-size: 15px; color: var(--ink-2); }
.dots { display: flex; gap: 6px; }
.dots i { width: 28px; height: 8px; border-radius: 999px; background: #DDE3D8; transition: background-color .35s var(--ease), width .35s var(--ease); }
.dots i.on { background: var(--forest-2); }
.dots i.cur { width: 40px; background: var(--coral); }
.q { display: grid; gap: 16px; }
.q[hidden] { display: none; }
.q:not([hidden]) { animation: rise .45s var(--ease); }
.q legend { font: 600 clamp(22px, 2.6vw, 28px)/1.2 var(--display); margin-bottom: 14px; padding: 0; }
.opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 620px) { .opts { grid-template-columns: 1fr; } }
.opts label { position: relative; display: grid; gap: 8px; justify-items: start; padding: 16px; border-radius: 18px; border: 2px solid rgba(28, 43, 39, .22); background: #fff; cursor: pointer; transition: border-color .2s, background-color .2s, transform .3s var(--spring); }
.opts label:hover { border-color: var(--ink); transform: translateY(-2px); }
.opts input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opts label:has(input:checked) { border-color: var(--forest); background: #F1F8EA; box-shadow: inset 0 0 0 1px var(--forest); }
.opts label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.opts .em { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--sun-2); border: 2px solid var(--ink); }
.opts .em svg { width: 26px; height: 26px; }
.opts b { font: 600 18px/1.2 var(--display); }
.opts small { color: var(--ink-2); font-size: 14px; font-weight: 700; }
.quiz-nav { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.result { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: center; }
.result[hidden] { display: none; }
.result:not([hidden]) { animation: rise .55s var(--ease); }
.result-art { border-radius: 22px; border: var(--bw) solid var(--ink); overflow: hidden; aspect-ratio: 4 / 3; }
.result-art svg { width: 100%; height: 100%; }
.result-copy { display: grid; gap: 12px; justify-items: start; }
.result-copy h3 { font-size: clamp(26px, 3vw, 34px); }
.result-copy .btns { margin-top: calc(32px - 12px); }
@media (max-width: 620px) { .result { grid-template-columns: 1fr; } .result-art { width: 100%; max-width: 320px; } }

/* ---------- Visit page ---------- */
.map-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
@media (max-width: 980px) { .map-wrap { grid-template-columns: 1fr; } }
.map { position: relative; border-radius: 28px; border: 3px solid var(--ink); box-shadow: 0 8px 0 var(--ink); overflow: hidden; background: #CDEBB8; }
.map > svg { width: 100%; height: auto; }
.pin { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -100%); display: grid; justify-items: center; gap: 2px; padding: 0; border: 0; background: none; z-index: 2; }
.pin .head { width: 40px; height: 40px; border-radius: 50% 50% 50% 6px; transform: rotate(-45deg); background: var(--c, var(--coral)); border: 2.5px solid var(--ink); display: grid; place-items: center; box-shadow: 0 3px 0 var(--ink); transition: transform .35s var(--spring); }
.pin .head svg { width: 20px; height: 20px; transform: rotate(45deg); color: var(--ink); }
.pin .nm { padding: 4px 10px; border-radius: 999px; background: var(--paper); border: 2px solid var(--ink); font: 600 13.5px/1.1 var(--display); white-space: nowrap; color: var(--ink); }
.pin:hover .head, .pin[aria-pressed='true'] .head { transform: rotate(-45deg) scale(1.15); }
.pin[aria-pressed='true'] .nm { background: var(--ink); color: var(--paper); }
.pin:focus-visible { outline: none; }
.pin:focus-visible .nm { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (max-width: 640px) { .pin .nm { display: none; } .pin[aria-pressed='true'] .nm { display: block; } .pin .head { width: 34px; height: 34px; } }
.pin-detail { display: grid; gap: 12px; padding: 24px; border-radius: var(--r); background: var(--paper); border: var(--bw) solid var(--ink); box-shadow: var(--lift); }
.pin-detail h3 { font-size: 24px; }
.pin-detail p { color: var(--ink-2); }
.pin-detail dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 15px; }
.pin-detail dt { font-weight: 800; }
.pin-detail dd { margin: 0; color: var(--ink-2); }
.pin-detail.swap { animation: rise .45s var(--ease); }
.pin-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; list-style: none; padding: 0; margin: 24px 0 0; }
.pin-list li { padding: 16px 18px; border-radius: var(--r-s); background: var(--paper); border: 2px solid rgba(28, 43, 39, .25); font-size: 15px; }
.pin-list b { display: block; font: 600 17px/1.2 var(--display); margin-bottom: 4px; }
@media (max-width: 860px) { .pin-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pin-list { grid-template-columns: 1fr; } }

.brief { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 860px) { .brief { grid-template-columns: 1fr; } }
.brief-side { position: sticky; top: calc(var(--hd) + 20px); display: grid; gap: 14px; padding: 20px; border-radius: var(--r); background: rgba(255, 247, 232, .08); border: 2px solid rgba(255, 247, 232, .35); }
@media (max-width: 860px) { .brief-side { position: static; } }
.brief-side p { font-size: 15px; color: #E3ECDD; }
.brief-meter { height: 12px; border-radius: 999px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.brief-meter i { display: block; height: 100%; width: var(--rp, 0%); background: var(--sun); border-radius: 999px; transition: width .3s var(--ease); }
.brief-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; counter-reset: b; }
.brief-list li { display: grid; grid-template-columns: 52px 1fr; gap: 16px; padding: 22px; border-radius: var(--r); background: var(--paper); color: var(--ink); border: var(--bw) solid var(--ink); box-shadow: 0 5px 0 var(--pine); }
.brief-list li::before { counter-increment: b; content: counter(b); width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--sun); border: 2px solid var(--ink); font: 600 24px/1 var(--display); }
.brief-list h3 { font-size: 21px; margin-bottom: 6px; }
.brief-list p { color: var(--ink-2); font-size: 16px; }
.brief-end { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 18px 20px; border-radius: var(--r); border: 2px dashed rgba(255, 247, 232, .5); font-weight: 800; }
.brief-end .tick { width: 44px; height: 44px; flex: none; background: var(--forest-2); transition: transform .5s var(--spring), background-color .3s; transform: scale(.85); }
.brief-end.read .tick { background: var(--sun); transform: scale(1); }
.brief-end.read .tick svg { color: var(--ink); }
.bring { columns: 2; column-gap: 28px; list-style: none; padding: 0; margin: 0; }
.bring li { break-inside: avoid; display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 2px dashed rgba(28, 43, 39, .15); font-weight: 700; }
.bring li svg { width: 22px; height: 22px; flex: none; color: var(--forest); margin-top: 2px; }
@media (max-width: 560px) { .bring { columns: 1; } }
.faq { display: grid; gap: 12px; max-width: 860px; }
.faq details { border-radius: var(--r-s); background: var(--paper); border: var(--bw) solid var(--ink); box-shadow: 0 4px 0 var(--ink); overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; font: 600 19px/1.3 var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--ink); background: var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 4v12M4 10h12' stroke='%231C2B27' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .4s var(--spring); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 20px 20px; color: var(--ink-2); }
.faq summary:focus-visible { outline-offset: -4px; }

/* ---------- Book page ---------- */
.book { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
@media (max-width: 980px) { .book { grid-template-columns: 1fr; } .book .summary { position: static; order: -1; } }
.form-card { padding: clamp(22px, 3vw, 34px); border-radius: 26px; background: var(--paper); border: 3px solid var(--ink); box-shadow: 0 8px 0 var(--ink); display: grid; gap: 22px; }
.form-card h2 { font-size: 28px; }
.form-card .btn[type='submit'] { justify-self: start; margin-top: calc(32px - 22px); }
.form-sec { display: grid; gap: 16px; padding-top: 18px; border-top: 2px dashed rgba(28, 43, 39, .18); }
.form-sec > legend { float: left; width: 100%; }
.form-sec > h3, .form-sec > legend { font-size: 20px; font-family: var(--display); font-weight: 600; padding: 0; }
.from-builder { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r-s); background: var(--meadow); border: 2px solid var(--forest); font-weight: 700; font-size: 15px; }
.from-builder[hidden] { display: none; }
.from-builder svg { width: 22px; height: 22px; color: var(--forest); flex: none; }
.disc { color: var(--forest); }

/* ---------- Motion ---------- */
/* Switchback's own reveal: a small springy pop, like a checkpoint flag popping up */
.rv { opacity: 0; transform: scale(.93) rotate(-1.2deg); transform-origin: 50% 100%; transition: opacity .45s var(--ease), transform .75s var(--spring); transition-delay: calc(var(--d, 0) * 70ms); }
.rv.in { opacity: 1; transform: none; }
html:not(.js) .rv { opacity: 1; transform: none; }
.float { animation: float 7s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px); } }
.drift { animation: drift 40s linear infinite; }
@keyframes drift { from { transform: translateX(-8%); } to { transform: translateX(8%); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .rv { opacity: 1; transform: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
.hd .btn[aria-current='page'], .mnav .btn[aria-current='page'] { box-shadow: 0 4px 0 var(--ink), 0 0 0 3px var(--paper), 0 0 0 5.5px var(--forest); }
body:has(.tl-panel.on) .toasts { right: 436px; }
@media (max-width: 860px) { body:has(.tl-panel.on) .toasts { display: none; } }

/* ---------- Classic view: no game language ---------- */
.c-only { display: none; }
.classic .g-only, html:not(.js) .g-only { display: none; }
.classic .c-only, html:not(.js) .c-only { display: inline; }
.classic .cp-flag, html:not(.js) .cp-flag { display: none; }

/* ---------- Home: featured trips ---------- */
.feat-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; }
.feat-grid > :first-child { grid-row: span 2; }
.feat-grid > div > .tour { height: 100%; }
.feat-grid > :first-child .tour-art { aspect-ratio: 16 / 10; }
.tour.side { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); grid-template-rows: none; }
.tour.side .tour-art { aspect-ratio: auto; height: 100%; min-height: 220px; border-bottom: 0; border-right: var(--bw) solid var(--ink); }
.tour.side .tour-body { padding: 18px 20px; gap: 10px; }
.tour.side .tour-body > p:not(.price) { font-size: 15px; }
.tour.side .facts-row { display: none; }
@media (max-width: 980px) { .feat-grid { grid-template-columns: 1fr; } .feat-grid > :first-child { grid-row: auto; } }
@media (max-width: 620px) {
  .tour.side { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .tour.side .tour-art { aspect-ratio: 16 / 8; min-height: 0; height: auto; border-right: 0; border-bottom: var(--bw) solid var(--ink); }
}

/* ---------- Home: kit laid out on the deck ---------- */
.kit-lay { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.kit-copy { display: grid; gap: 16px; justify-items: start; }
.kit-key { list-style: none; counter-reset: k; padding: 0; margin: 0; display: grid; gap: 8px; }
.kit-key li { counter-increment: k; position: relative; padding-left: 38px; font-size: 16.5px; color: var(--ink-2); }
.kit-key li::before { content: counter(k); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); font: 600 14px/1 var(--display); transform: translateY(3px); }
.kit-key b { color: var(--ink); }
.kit-note { font-weight: 700; color: var(--ink); padding: 12px 16px; border-radius: var(--r-s); background: var(--paper); border: 2px solid var(--ink); }
.kit-art { margin: 0; }
.kit-art svg { width: 100%; height: auto; display: block; border-radius: 28px; border: 3px solid var(--ink); box-shadow: 0 8px 0 var(--ink); }
@media (max-width: 900px) { .kit-lay { grid-template-columns: 1fr; } .kit-art { order: -1; } }

/* ---------- Home: the day as a route with times ---------- */
.day { position: relative; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.day::before { content: ''; position: absolute; left: 6px; right: 6px; top: 21px; border-top: 4px dashed var(--sun-2); opacity: .7; }
.day li { position: relative; display: grid; gap: 8px; align-content: start; }
.day time { justify-self: start; position: relative; z-index: 1; padding: 9px 14px; border-radius: 999px; background: var(--sun); color: var(--ink); border: 2.5px solid var(--ink); font: 600 17px/1 var(--display); box-shadow: 0 4px 0 var(--ink); margin-bottom: 10px; }
.day h3 { font-size: 21px; }
.day p { color: #E3ECDD; font-size: 16px; }
@media (max-width: 1000px) {
  .day { grid-template-columns: 1fr; gap: 22px; padding-left: 4px; }
  .day::before { left: 46px; right: auto; top: 10px; bottom: 10px; border-top: 0; border-left: 4px dashed var(--sun-2); }
  .day li { grid-template-columns: 96px 1fr; column-gap: 18px; }
  .day time { grid-row: span 2; margin: 0; justify-self: center; }
}

/* ---------- Book: month calendar ---------- */
.bcal { display: grid; gap: 10px; padding: 14px; border-radius: var(--r-s); border: 2px solid var(--ink); background: #fff; }
.bcal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 600 18px/1 var(--display); }
.bcal-nav { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper); display: grid; place-items: center; padding: 0; }
.bcal-nav svg { width: 20px; height: 20px; }
.bcal-nav:disabled { opacity: .35; cursor: not-allowed; }
.bcal .cal button { min-height: 50px; }
.bcal .cal button.d-out { background: transparent; border-color: transparent; color: #8A8780; }
.bcal .cal button.d-closed { background: repeating-linear-gradient(45deg, #E9EEF2 0 6px, #DCE3E8 6px 12px); }
.cal-key { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.cal-key span { display: inline-flex; align-items: center; gap: 8px; }
.cal-key i { width: 18px; height: 14px; border-radius: 4px; border: 1.5px solid rgba(28, 43, 39, .3); }
.cal-key .k-full { background: repeating-linear-gradient(-45deg, #F3EEE4 0 4px, #EAE3D6 4px 8px); }
.cal-key .k-closed { background: repeating-linear-gradient(45deg, #E9EEF2 0 4px, #DCE3E8 4px 8px); }

/* ---------- Book: the summary is a trip ticket with a tear-off stub ---------- */
.book .summary { border-radius: 18px; padding-top: 18px; overflow: hidden; }
.tk-top { display: flex; justify-content: space-between; font: 700 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.tk-stub { position: relative; margin-top: 10px; padding-top: 22px; border-top: 3px dashed rgba(28, 43, 39, .4); }
.tk-stub::before, .tk-stub::after { content: ''; position: absolute; top: -16px; width: 28px; height: 28px; border-radius: 50%; background: var(--paper); border: 3px solid var(--ink); }
.tk-stub::before { left: -40px; }
.tk-stub::after { right: -40px; }