/* ==========================================================
   GoldenDust Bike Trails — "Gold Rush" styles
   Built from the logo: the slanted gold "bike trails" plate, heavy italic
   lettering and diagonal cuts. Colours live in :root.
   ========================================================== */
:root {
  --bg: #241b12;
  --bg-2: #2e2318;
  --bg-3: #3a2c1e;
  --line: rgba(255, 255, 255, .12);
  --gold: #e3b23c;
  --gold-hi: #f6d36e;
  --gold-lo: #c8942a;
  --plate: linear-gradient(90deg, var(--gold-hi), var(--gold) 60%, var(--gold-lo));
  --text: #ffffff;
  --text-dim: rgba(255, 255, 255, .72);
  --wrap: 1240px;
  --head: "Exo 2", "Arial Black", sans-serif;
  --body: "Inter", system-ui, sans-serif; /* fonts without Bulgarian-locale glyph swaps */
  --slant: -18deg;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); } /* never white, even if the browser drops a layer */
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--body); font-size: 17px; line-height: 1.65;
  overflow-x: clip; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 {
  font-family: var(--head); font-style: italic; font-weight: 900; text-transform: uppercase;
  line-height: .92; letter-spacing: -.01em; margin: 0 0 .35em;
}
p { margin: 0 0 1em; color: var(--text-dim); }
.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
.gold { color: var(--gold); }
h1 em, h2 em { font-style: italic; color: var(--gold); display: block; }

/* The slanted gold plate (from the logo) — used for labels */
.eyebrow {
  position: relative; isolation: isolate; display: inline-block;
  padding: .32em 1em; margin: 0 0 18px .3em; color: var(--bg);
  font: italic 800 .82rem var(--head); text-transform: uppercase; letter-spacing: .08em; line-height: 1.3;
}
.eyebrow::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--plate); transform: skewX(var(--slant)); }

/* ---------- Buttons (slanted) ---------- */
.btns { display: flex; flex-wrap: wrap; gap: 16px; }
.btn {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: .5em;
  padding: 16px 30px; margin-left: .3em; cursor: pointer; border: 0; background: none; color: var(--text);
  font: italic 800 1rem var(--head); text-transform: uppercase; letter-spacing: .05em;
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(var(--slant)); box-shadow: inset 0 0 0 2px #fff; transition: background .25s, box-shadow .25s; }
.btn-gold { color: var(--bg); }
.btn-gold::before { background: var(--gold); box-shadow: none; }
.btn .arrow { transition: transform .25s; }

/* ---------- Header ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background .3s; }
.site-header.scrolled, .site-header.open { background: rgba(36, 27, 18, .94); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.nav-logo img { height: 40px; width: auto; }
.nav-logo .logo-dark { display: none; }
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  position: relative; isolation: isolate; display: block; padding: 8px 14px;
  font: italic 700 .95rem var(--head); text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap; transition: color .2s;
}
/* 7 menu items: tighten them on mid-size screens so they stay on one line */
@media (max-width: 1240px) and (min-width: 981px) {
  .nav-links a { padding: 8px 9px; font-size: .86rem; letter-spacing: .02em; }
  .lang-switch { margin-left: 8px; }
}
.nav-links a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gold); transform: skewX(var(--slant)) scaleX(0); transform-origin: left; transition: transform .25s; }
.nav-links a[aria-current="page"] { color: var(--bg); }
.nav-links a[aria-current="page"]::before { transform: skewX(var(--slant)) scaleX(1); }
.nav-toggle { display: none; background: none; border: 0; color: var(--text); width: 46px; height: 46px; cursor: pointer; position: relative; isolation: isolate; }
.nav-toggle::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(var(--slant)); box-shadow: inset 0 0 0 2px var(--gold); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 20px; height: 2px; background: currentColor; margin: auto; position: relative; transition: .3s; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.open .nav-toggle span { background: transparent; }
.open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
.open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }
.lang-switch { display: flex; gap: 2px; margin-left: 14px; }
.lang-switch button {
  position: relative; isolation: isolate; border: 0; background: none; color: var(--text-dim); cursor: pointer;
  padding: 5px 10px; font: italic 800 .8rem var(--head); letter-spacing: .06em;
}
.lang-switch button::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(var(--slant)); box-shadow: inset 0 0 0 1px var(--line); }
.lang-switch button[aria-pressed="true"] { color: var(--bg); }
.lang-switch button[aria-pressed="true"]::before { background: var(--gold); box-shadow: none; }

@media (max-width: 980px) {
  .nav-logo img { height: 32px; }
  .nav-toggle { display: block; }
  .nav { flex-wrap: wrap; height: auto; min-height: 84px; padding-block: 19px; }
  .nav-links { flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 0 20px; display: none; }
  .open .nav-links { display: flex; }
  .nav-links a { padding: 10px 14px; font-size: 1.3rem; }
  .lang-switch { margin: 12px 0 0 6px; }
}

/* ---------- Hero (left-aligned, diagonal bottom edge) ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
}
.hero.short { min-height: 72svh; }
.hero-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; transform: scale(1.06); animation: slowzoom 22s ease-out forwards; }
@keyframes slowzoom { to { transform: scale(1); } }
.hero-video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; }
.hero-video.playing { opacity: 1; }
/* Fine moving film grain over the video: makes an upscaled phone clip read as "cinematic" instead of soft */
.hero-grain { position: absolute; inset: -50%; z-index: -1; pointer-events: none; opacity: .14; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .5s steps(4) infinite; }
@keyframes grain { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } }
@media (prefers-reduced-motion: reduce) { .hero-grain { animation: none; } }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(36, 27, 18, .92) 0%, rgba(36, 27, 18, .55) 45%, rgba(36, 27, 18, .1)),
              linear-gradient(rgba(36, 27, 18, .5), transparent 25%, transparent 55%, rgba(36, 27, 18, .75));
}
.dust-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-content { position: relative; z-index: 1; width: min(var(--wrap), 100% - 40px); margin-inline: auto; padding: 130px 0 17vh; }
.hero.short .hero-content { padding-bottom: 14vh; }
.hero h1 { font-size: clamp(3.2rem, 9.5vw, 8.5rem); margin: 4px 0 20px; }
/* Home: "Welcome to" + the logo */
.hero h1.welcome { margin: 0 0 26px; line-height: 1; }
.welcome span { display: block; margin: 0 0 18px .1em; font: italic 800 clamp(1.5rem, 3.4vw, 2.6rem) var(--head); color: var(--text); }
.welcome img { width: min(680px, 90vw); filter: drop-shadow(0 6px 26px rgba(0, 0, 0, .5)); }
.hero .lead { max-width: 480px; font-size: 1.1rem; line-height: 1.6; color: var(--text-dim); margin: 0 0 30px; }
.scroll-cue { display: none; }

/* ---------- Sections ---------- */
section { padding: clamp(70px, 9vw, 110px) 0; position: relative; }
.alt { background: var(--bg-2); clip-path: polygon(0 clamp(30px, 5vw, 70px), 100% 0, 100% 100%, 0 100%); padding-top: calc(clamp(70px, 9vw, 110px) + 50px); }
.hero { padding: 0; }
.section-head { margin-bottom: 40px; }
.section-head h2, .split h2 { font-size: clamp(2.6rem, 6vw, 5rem); margin: 0; }
.section-head .more { font: italic 800 .95rem var(--head); text-transform: uppercase; color: var(--gold); white-space: nowrap; }

/* ---------- Location cards (slanted) ---------- */
.locs { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 14px; }
.loc { position: relative; height: 520px; overflow: hidden; clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); }
.loc img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.loc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(36, 27, 18, .95)); }
.loc .txt { position: absolute; left: 12%; right: 10%; bottom: 30px; z-index: 2; }
.loc h3 { font-size: clamp(2.4rem, 4vw, 3.6rem); margin: 0; }
.loc small { display: block; margin-top: 10px; font: italic 700 .9rem var(--head); text-transform: uppercase; color: var(--gold); letter-spacing: .06em; }
.loc .num { position: absolute; top: 22px; left: 14%; z-index: 2; font: italic 900 1.2rem var(--head); color: var(--gold); }

/* ---------- Location page: trail cards ---------- */
.trail-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.trail-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 440px; padding: 0 12% 30px 12%;
  overflow: hidden; isolation: isolate; container-type: inline-size; clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
}
.trail-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s; }
.trail-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(36, 27, 18, .1) 20%, rgba(36, 27, 18, .55) 55%, rgba(36, 27, 18, .97)); }
.trail-card .num { position: absolute; top: 22px; left: 14%; font: italic 900 1.2rem var(--head); color: var(--gold); }
.trail-card h3 { font-size: clamp(1.7rem, 17cqi, 3rem); /* shrinks with the card so long names (Shisharka) fit */ margin: 0 0 8px; text-shadow: 0 2px 18px rgba(0, 0, 0, .65), 0 1px 3px rgba(0, 0, 0, .5); }
.trail-card .meta { font: italic 700 .85rem var(--head); text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }
.trail-card .go { margin-top: 14px; font: italic 800 .9rem var(--head); text-transform: uppercase; color: var(--gold); }
.trail-card .go::after { content: " →"; }
.trail-card.tbd img { filter: grayscale(.7) brightness(.4) blur(3px); }
.trail-card .tbd-badge { position: absolute; top: 14px; right: 12%; font-size: 3rem; }
.tbd-note { display: flex; align-items: center; gap: 18px; }
.tbd-note .tbd-badge { font-size: 2.4rem; line-height: 1; }

/* ---------- Single trail view ---------- */
.trail-view[hidden], .trail-index[hidden] { display: none; }
.back-link { display: inline-block; margin-bottom: 24px; font: italic 800 .9rem var(--head); text-transform: uppercase; color: var(--gold); }
.facts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: -10px; }
.fact { position: relative; isolation: isolate; padding: 14px 30px 14px 26px; margin-left: .4em; }
.fact::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bg-3); transform: skewX(var(--slant)); border-left: 4px solid var(--gold); }
.fact small { display: block; font: 600 .68rem var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); }
.fact b { font: italic 900 1.6rem var(--head); text-transform: uppercase; }
.fact[hidden] { display: none; }
.fact.status { order: 1; } .fact.photos { order: 2; }
.fact.status b { display: flex; align-items: center; gap: 10px; }
.fact.status b i { width: 12px; height: 12px; border-radius: 50%; background: var(--st, var(--gold)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--st, var(--gold)) 25%, transparent); animation: rec 2s infinite; }
.fact.status .when { display: block; margin-top: 2px; font-size: .8rem; color: var(--text-dim); }
/* Phones: current status first on its own row, then the facts in an even 2-column grid */
@media (max-width: 760px) {
  .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: -4px; }
  .fact { margin-left: 0; padding: 12px 14px 12px 18px; }
  .fact::before { transform: skewX(-6deg); }
  .fact small { font-size: .62rem; letter-spacing: .12em; }
  .fact b { font-size: 1.35rem; }
  .fact.photos { order: 0; }
  .fact.status { grid-column: 1 / -1; order: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; }
  .fact.status small { flex-basis: 100%; }
  .fact.status .when { margin: 0; }
  .fact:not(.status):last-child:nth-child(even) { grid-column: 1 / -1; } /* status is child 1, so an odd number of facts leaves the last one alone: it takes the full row */
}
.s-great { --st: #4fc46a; } .s-good { --st: #9bd25a; } .s-muddy { --st: #e09a3c; } .s-work { --st: #e0c23c; } .s-closed { --st: #e5483a; }
@media (prefers-reduced-motion: reduce) { .fact.status b i { animation: none; } }
.trail-body { max-width: 760px; margin-top: 40px; }
.trail-body p { font-size: 1.15rem; color: var(--text); }
.block { margin-top: clamp(60px, 8vw, 100px); }
.block-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.block-head h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin: 0; }
.block-head span { font: italic 700 .9rem var(--head); text-transform: uppercase; color: var(--gold); }
.video-frame, .map-frame { position: relative; aspect-ratio: 16 / 9; background: var(--bg-3); }
.video-frame iframe, .map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-frame img { width: 100%; height: 100%; object-fit: contain; }
/* Trail route map (Leaflet): the site's gold and dark brown instead of Leaflet's white and blue */
.map-frame.route { isolation: isolate; z-index: 0; aspect-ratio: auto; /* keeps Leaflet's controls under the site header */ height: min(54svh, 500px); min-height: 280px; border-left: 4px solid var(--gold); }
@media (max-width: 600px) { .map-frame.route { height: 46svh; min-height: 260px; } }
.map-frame .trail-map { position: absolute; inset: 0; background: var(--bg-3); font: 500 .8rem var(--body); } /* .map-frame wins over leaflet.css, which loads later and sets a light grey */
.trail-map img { max-width: none; } /* the site-wide img rule breaks Leaflet's tile placement */
.trail-map:not(.satellite) .leaflet-tile-pane { filter: url(#gd-duotone) contrast(1.1); } /* site brown duotone, see #gd-duotone in main.js */
.map-frame .leaflet-bar { border: 0; box-shadow: 0 6px 20px rgba(0, 0, 0, .4); }
.map-frame .leaflet-bar a { width: 36px; height: 36px; line-height: 36px; background: var(--bg-2); color: var(--gold); border-color: var(--line); font: 700 1.2rem var(--body); }
.map-frame .leaflet-bar a:hover { background: var(--gold); color: var(--bg); }
.map-frame.route .leaflet-control-attribution { background: rgba(36, 27, 18, .75); color: rgba(255, 255, 255, .55); font-size: 9px; }
.map-frame .leaflet-control-attribution a { color: inherit; }
.map-frame .route-start { fill: #4fc46a; } .map-frame .route-finish { fill: #e5483a; }
.map-frame .route-tip { background: var(--bg-2); color: var(--text); border: 0; font: italic 800 .8rem var(--head); text-transform: uppercase; box-shadow: 0 4px 14px rgba(0, 0, 0, .4); }
.map-frame .route-tip::before { display: none; }
.map-switch { position: absolute; top: 14px; right: 14px; z-index: 500; display: flex; gap: 6px; }
.map-switch button { position: relative; isolation: isolate; padding: 9px 18px; border: 0; background: none; cursor: pointer; color: var(--text); font: italic 800 .85rem var(--head); text-transform: uppercase; }
.map-switch button::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bg-2); transform: skewX(var(--slant)); box-shadow: 0 6px 20px rgba(0, 0, 0, .4); }
.map-switch button[aria-pressed="true"] { color: var(--bg); }
.map-switch button[aria-pressed="true"]::before { background: var(--gold); }
.map-switch button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
/* Trail video: text beside a cinema-style poster that turns into the player on click */
.film { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: clamp(30px, 5vw, 70px); align-items: center; }
.film-txt h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); margin: 0 0 16px; }
.film-txt p { margin: 0; font-size: 1.08rem; }
.film-media { position: relative; isolation: isolate; padding: 0 0 8px 8px; }
.film-media::before { content: ""; position: absolute; inset: 8px 8px 0 0; z-index: -1; background: var(--gold); clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%); }
.film-player { clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%); }
.film-player { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; overflow: hidden; cursor: pointer; background: var(--bg-3); }
.film-player img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.62) saturate(1.1); transition: transform .8s, filter .4s; }
.film-play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 104px; height: 72px; transition: scale .3s; }
.film-play::before { content: ""; position: absolute; inset: 0; background: var(--gold); transform: skewX(var(--slant)); box-shadow: 0 10px 40px rgba(0, 0, 0, .45); }
.film-play svg { position: relative; width: 34px; height: 34px; fill: var(--bg); }
.film-tag { position: absolute; left: 7%; bottom: 18px; font: italic 800 .85rem var(--head); text-transform: uppercase; letter-spacing: .06em; color: var(--text); }
.film-tag::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: #e5483a; animation: rec 1.6s infinite; }
@keyframes rec { 50% { opacity: .2; } }
@media (hover: hover) {
  .film-player:hover img { transform: scale(1.05); filter: brightness(.75) saturate(1.1); }
  .film-player:hover .film-play { scale: 1.08; }
}
.film-player:focus-visible { outline: 3px solid var(--text); outline-offset: -3px; }
@media (max-width: 860px) {
  .film { grid-template-columns: minmax(0, 1fr); }
  .film-play { width: 84px; height: 58px; }
}
@media (prefers-reduced-motion: reduce) { .film-tag::before { animation: none; } }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.gallery button { display: block; padding: 0; border: 0; cursor: zoom-in; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-3); }
.gallery button:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s, filter .4s; }
.gallery button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.trail-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: clamp(60px, 8vw, 100px); }
.trail-pager a { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 230px; padding: 26px 9%; overflow: hidden; isolation: isolate; clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%); }
.trail-pager a.next { text-align: right; }
.trail-pager img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: brightness(.5); transition: transform .8s, filter .4s; }
.trail-pager small { font: italic 800 .85rem var(--head); text-transform: uppercase; color: var(--gold); }
.trail-pager b { font: italic 900 2.2rem var(--head); text-transform: uppercase; line-height: 1; }
.empty { position: relative; isolation: isolate; max-width: 560px; padding: 34px 40px; }
.empty::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bg-3); transform: skewX(var(--slant)); border-left: 4px solid var(--gold); }
.empty b { display: block; font: italic 900 1.6rem var(--head); text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.empty p { margin: 0; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 150; display: none; place-items: center; background: rgba(12, 9, 6, .96); }
.lightbox.show { display: grid; }
.lightbox img { max-width: 94vw; max-height: 86vh; }
.lb-btn { position: absolute; width: 54px; height: 50px; cursor: pointer; border: 0; background: var(--gold); color: var(--bg); font-size: 1.6rem; line-height: 1; clip-path: polygon(18% 0, 100% 0, 82% 100%, 0 100%); }
.lb-close { top: 18px; right: 18px; }
.lb-prev { left: 18px; top: 50%; translate: 0 -50%; }
.lb-next { right: 18px; top: 50%; translate: 0 -50%; }
.lb-count { position: absolute; bottom: 20px; left: 50%; translate: -50% 0; font: italic 800 1rem var(--head); color: var(--text-dim); }
@media (max-width: 600px) { .lb-prev, .lb-next { top: auto; bottom: 10px; translate: none; } }

/* ---------- Split (photo + text) ---------- */
.split { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(36px, 6vw, 80px); align-items: center; }
.split figure { margin: 0; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); }
.split img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; }
.split figcaption { display: none; }
.split h2 { margin-bottom: 20px; }

/* ---------- Diggers ---------- */
.diggers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 50px); }
.digger figure { margin: 0 0 22px; overflow: hidden; clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); }
.digger img { width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; transition: transform .8s; }
.digger .role { display: inline-block; position: relative; isolation: isolate; padding: .3em .9em; margin: 0 0 14px .3em; color: var(--bg); font: italic 800 .78rem var(--head); text-transform: uppercase; letter-spacing: .06em; }
.digger .role::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--plate); transform: skewX(var(--slant)); }
.digger h3 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); margin-bottom: 12px; }
.digger .link { font: italic 800 .9rem var(--head); text-transform: uppercase; color: var(--gold); }
.digger .link::after { content: " ↗"; }

/* Trail rules */
.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.value { position: relative; isolation: isolate; padding: 30px 38px 22px; }
.value::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bg-3); transform: skewX(-6deg); border-left: 4px solid var(--gold); }
.value .n { font: italic 900 2.4rem var(--head); color: var(--gold); line-height: 1; }
.value h3 { font-size: 1.7rem; margin: 10px 0 10px; }
.value p { margin: 0; }

/* ---------- Sign up ---------- */
.signup { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(36px, 6vw, 80px); align-items: start; }
.signup-info h2 { font-size: clamp(2.6rem, 5vw, 4.2rem); margin-bottom: 30px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.steps li { display: flex; gap: 20px; align-items: flex-start; }
.steps b { flex: none; font: italic 900 2.4rem var(--head); color: var(--gold); line-height: 1; }
.steps h3 { font-size: 1.4rem; margin: 2px 0 6px; }
.steps p { margin: 0; }

.signup-form {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px;
  padding: clamp(24px, 4vw, 40px); background: var(--bg-2); border-top: 4px solid var(--gold);
}
.field { display: flex; flex-direction: column; gap: 7px; grid-column: 1 / -1; }
.field.half { grid-column: auto; }
.field label { font: italic 800 .85rem var(--head); text-transform: uppercase; letter-spacing: .06em; color: var(--gold); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 0;
  background: var(--bg); color: var(--text); font: 400 1rem var(--body); transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 110px; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(-45deg, transparent 50%, var(--gold) 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.field input::-webkit-calendar-picker-indicator { filter: invert(.8) sepia(1) saturate(4) hue-rotate(5deg); cursor: pointer; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(227, 178, 60, .25); }
.field.invalid input, .field.invalid select { border-color: #e2683c; }
.field .label { font: italic 800 .85rem var(--head); text-transform: uppercase; letter-spacing: .06em; color: var(--gold); }
.field.narrow input { max-width: 160px; }
.field.others[hidden] { display: none; }
.others-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.others-list input.bad { border-color: #e2683c; }
@media (max-width: 600px) { .others-list { grid-template-columns: minmax(0, 1fr); } }
/* Back-to-top arrow (bottom right, appears after scrolling a screen down) */
.to-top { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 50px; height: 46px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; isolation: isolate;
  opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .25s, transform .25s; }
.to-top::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gold); transform: skewX(var(--slant)); box-shadow: 0 8px 22px rgba(0, 0, 0, .45); }
.to-top svg { width: 22px; height: 22px; fill: var(--bg); }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
html.menu-open .to-top { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Ride-day picker: one card per Saturday/Sunday with seats left */
.days { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.days-msg { grid-column: 1 / -1; margin: 0; padding: 14px; background: var(--bg); color: var(--text-dim); }
.day {
  position: relative; display: grid; gap: 6px; padding: 12px 14px 12px; text-align: left; cursor: pointer;
  background: var(--bg); color: var(--text); border: 1px solid rgba(255, 255, 255, .18); font: inherit;
  transition: border-color .2s, background .2s, transform .2s;
}
.day .when { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.day .dow { font: italic 800 .8rem var(--head); text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }
.day b { font: italic 900 1.5rem var(--head); line-height: 1; }
.day .bar { height: 6px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.day .bar i { display: block; height: 100%; background: var(--gold); transform: skewX(var(--slant)); transform-origin: left; }
.day small { font-size: .8rem; color: var(--text-dim); }
.day .place { font: italic 800 .95rem var(--head); text-transform: uppercase; letter-spacing: .03em; color: var(--gold-hi); }
.day .place.tba { font: 500 .78rem var(--body); text-transform: none; letter-spacing: 0; color: var(--text-dim); }
.day.closed { cursor: not-allowed; opacity: .55; }
.day.closed .bar { visibility: hidden; }
.day small strong { color: var(--text); }
.day.low .bar i { background: #f08a3c; }
.day[aria-checked="true"] { border-color: var(--gold); background: rgba(227, 178, 60, .14); box-shadow: inset 0 0 0 1px var(--gold); }
.day[aria-checked="true"] .dow { color: var(--gold); }
.day.full { cursor: not-allowed; border-color: rgba(226, 70, 50, .55); background: rgba(226, 70, 50, .12); }
.day.full .bar i { background: #e24632; }
.day.full b, .day.full .dow { color: rgba(255, 255, 255, .45); }
.day.full small { color: #f06a55; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
#days-field.invalid .days { outline: 1px solid #e2683c; outline-offset: 4px; }
@media (hover: hover) { .day:not(.full):hover { border-color: var(--gold); transform: translateY(-2px); } }

.consent { grid-column: 1 / -1; display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; color: var(--text-dim); cursor: pointer; }
.consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--gold); flex: none; }
.consent.invalid span { color: #f0936e; }
.form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 6px; }
.form-actions .btn { font-size: 1.05rem; }
.form-status { margin: 0; font-weight: 500; }
.form-status.ok { color: var(--gold-hi); }
.form-status.err { color: #f0936e; }
.signup-form.sent > :not(.form-actions) { opacity: .45; pointer-events: none; }

@media (max-width: 860px) {
  .signup { grid-template-columns: minmax(0, 1fr); }
  .signup-form { grid-template-columns: minmax(0, 1fr); }
  .days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field.half { grid-column: 1 / -1; }
}

/* ---------- Text pages (privacy) ---------- */
.page-head { padding: 150px 0 50px; background: linear-gradient(var(--bg-2), var(--bg)); }
.page-head h1 { font-size: clamp(3rem, 8vw, 6rem); margin: 0 0 18px; }
.page-head .lead { max-width: 620px; font-size: 1.1rem; color: var(--text-dim); margin: 0 0 8px; }
.page-head .updated { font-size: .85rem; color: rgba(255, 255, 255, .5); margin: 0; }
.legal { padding-top: 30px; }
.legal-wrap { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(30px, 6vw, 80px); align-items: start; }
.legal-toc { position: sticky; top: 100px; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; border-left: 2px solid var(--line); }
.legal-toc li { counter-increment: toc; }
.legal-toc a { display: block; padding: 7px 0 7px 16px; color: var(--text-dim); font-size: .92rem; transition: color .2s; }
.legal-toc a::before { content: counter(toc, decimal-leading-zero) "  "; color: var(--gold); font: italic 800 .85rem var(--head); }
.legal-toc a:hover { color: var(--text); }
.legal-body { max-width: 760px; }
.legal-body article { padding-bottom: 34px; margin-bottom: 34px; border-bottom: 1px solid var(--line); scroll-margin-top: 100px; }
.legal-body article:last-child { border-bottom: 0; }
.legal-body h2 { display: flex; align-items: baseline; gap: 14px; font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin: 0 0 16px; }
.legal-body h2 b { font-size: 1.1rem; color: var(--gold); }
.legal-body p, .legal-body li { color: rgba(255, 255, 255, .8); }
.legal-body ul { margin: 0 0 1em; padding-left: 1.2em; }
.legal-body li { margin-bottom: .4em; }
.legal-body li::marker { color: var(--gold); }
.legal-body a, .consent a { color: var(--gold-hi); text-decoration: underline; text-underline-offset: 3px; }
.legal-body b { color: var(--text); }
.todo { background: rgba(240, 106, 85, .18); color: #ffb3a6; padding: 0 .3em; font-weight: 600; }
@media (max-width: 860px) {
  .legal-wrap { grid-template-columns: minmax(0, 1fr); }
  .legal-toc { position: static; }
}

/* ---------- Contacts ---------- */
.contact-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: -30px; position: relative; z-index: 2; }
.contact-card { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 8px; padding: 26px 30px; min-height: 150px; justify-content: center; }
.contact-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bg-2); border-left: 4px solid var(--gold); transform: skewX(-6deg); transition: background .25s; }
.contact-card.gold { color: var(--bg); }
.contact-card.gold::before { background: var(--plate); border-left: 0; }
.contact-card .label { font: italic 800 .85rem var(--head); text-transform: uppercase; letter-spacing: .06em; color: var(--gold); }
.contact-card.gold .label { color: var(--bg); opacity: .75; }
.contact-card b { font: italic 900 clamp(1.7rem, 3vw, 2.4rem) var(--head); text-transform: uppercase; line-height: 1; white-space: nowrap; }
.contact-card .go { font: italic 800 .85rem var(--head); text-transform: uppercase; color: var(--gold-hi); }
.contact-card .go::after { content: " →"; }
.contact-card.gold .go { color: var(--bg); }
.contact-social .social { margin-top: 4px; }
.contact-social .social a { width: 52px; height: 48px; }
.contact-social .social svg { width: 24px; height: 24px; }

.places { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.place-card { background: var(--bg); display: flex; flex-direction: column; }
.map { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--bg-3) center / cover; overflow: hidden; }
.map::before { content: ""; position: absolute; inset: 0; background: rgba(36, 27, 18, .55); }
.map > * { position: relative; }
.map.loaded::before { display: none; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tbd-badge { font: italic 900 3.4rem var(--head); color: transparent; -webkit-text-stroke: 2px var(--gold); }
.place-txt { padding: 22px 24px 26px; }
.place-txt h3 { font-size: 2rem; margin: 0 0 8px; }
.place-txt p { margin: 0 0 14px; }
.map-open { font: italic 800 .85rem var(--head); text-transform: uppercase; color: var(--gold); }
.map-open::after { content: " ↗"; }
@media (hover: hover) { .contact-card:not(.gold):hover::before { background: var(--bg-3); } }
@media (max-width: 860px) {
  .contact-cards, .places { grid-template-columns: minmax(0, 1fr); }
  .contact-cards { margin-top: 0; }
}

/* ---------- 404 ---------- */
.notfound .hero-content h1 { font-size: clamp(3.2rem, 9vw, 7.5rem); }
.notfound .code { display: block; font: italic 900 clamp(5rem, 16vw, 12rem) var(--head); line-height: .85; color: transparent; -webkit-text-stroke: 2px var(--gold); opacity: .9; margin-bottom: 10px; }

/* ---------- Coming soon ---------- */
.soon-badge { display: none; }

/* ---------- Footer ---------- */
.site-footer { position: relative; padding: 110px 0 34px; background: var(--bg-2); clip-path: polygon(0 50px, 100% 0, 100% 100%, 0 100%); margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.footer-grid img { height: 42px; width: auto; margin-bottom: 18px; }
.footer-grid h4 { margin: 0 0 14px; font: italic 800 1rem var(--head); text-transform: uppercase; color: var(--gold); }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 8px; }
.footer-grid a { color: var(--text-dim); transition: color .2s; }
.footer-grid a:hover { color: var(--gold); }
.copy { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 50px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .8rem; color: rgba(255, 255, 255, .45); }

/* Partners strip (top of the footer, every page) */
.partners { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 0 0 40px; margin-bottom: 44px; border-bottom: 1px solid var(--line); text-align: center; }
.partners h4 { margin: 0; font: italic 800 1rem var(--head); text-transform: uppercase; color: var(--gold); }
.partners ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 46px; list-style: none; margin: 0; padding: 0; }
.partners a { display: flex; align-items: center; height: 64px; opacity: .8; filter: grayscale(.25); transition: opacity .25s, filter .25s, transform .25s; }
.partners img { height: 100%; width: auto; }
.nameri { display: inline-flex; align-items: center; gap: 10px; font: 700 1.25rem var(--body); color: #fff; letter-spacing: -.01em; }
.nameri-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: #000; color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15); }
.nameri-icon svg { width: 22px; height: 22px; }

/* Social icons + phone */
.social { display: flex; gap: 10px; margin-top: 18px; }
.social a { position: relative; isolation: isolate; display: grid; place-items: center; width: 42px; height: 40px; color: var(--text); transition: color .2s; }
.social a::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(var(--slant)); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); transition: background .2s, box-shadow .2s; }
.social svg { width: 20px; height: 20px; }
.footer-phone { display: inline-flex; align-items: center; gap: 8px; }
.footer-phone svg { width: 16px; height: 16px; color: var(--gold); }
@media (hover: hover) {
  .partners a:hover { opacity: 1; filter: none; transform: translateY(-3px); }
  .social a:hover { color: var(--bg); }
  .social a:hover::before { background: var(--gold); box-shadow: none; }
}
@media (max-width: 600px) {
  .partners { gap: 18px; }
  .partners ul { gap: 18px 28px; }
  .partners a { height: 50px; }
}
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }

/* Hover effects only on devices with a real mouse (on phones a tap would leave them stuck) */
@media (hover: hover) {
  .nav-links a:not([aria-current="page"]):hover { color: var(--gold); }
  .btn:hover::before { background: var(--gold); box-shadow: none; }
  .btn:hover { color: var(--bg); }
  .btn-gold:hover::before { background: var(--gold-hi); }
  .btn:hover .arrow { transform: translateX(4px); }
  .loc:hover img, .trail-card:hover img, .digger:hover img { transform: scale(1.06); }
  .gallery button:hover img { transform: scale(1.05); filter: brightness(1.08); }
  .trail-pager a:hover img { transform: scale(1.06); filter: brightness(.7); }
  .lb-btn:hover { background: var(--gold-hi); }
}

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .hero { clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%); }
  .hero-content { padding: 120px 0 12vh; }
  .hero .btns { flex-direction: column; align-items: flex-start; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .locs { grid-template-columns: 1fr; }
  .loc { height: 300px; clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%); }
  .loc .txt { left: 8%; }
  .loc .num { left: 8%; }
  .trail-list { grid-template-columns: 1fr; }
  .trail-card { height: 280px; clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%); padding: 0 8% 24px; }
  .trail-card .num { left: 8%; }
  .gallery { grid-template-columns: 1fr 1fr; gap: 6px; }
  .trail-pager { grid-template-columns: 1fr; }
  .trail-pager a { min-height: 150px; }
  .trail-pager a.next { text-align: left; }
  .diggers { grid-template-columns: 1fr; gap: 50px; }
  .split figure { clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%); }
}

/* ==========================================================
   Motion
   ========================================================== */

/* Hero: lines slide up one after another on load */
.hero-content > * { animation: rise .9s cubic-bezier(.2, .8, .2, 1) both; }
.hero-content > :nth-child(1) { animation-delay: .15s; }
.hero-content > :nth-child(2) { animation-delay: .3s; }
.hero-content > :nth-child(3) { animation-delay: .45s; }
.hero-content > :nth-child(4) { animation-delay: .6s; }
.hero-content > :nth-child(5) { animation-delay: .75s; }
@keyframes rise { from { opacity: 0; transform: translateY(46px) skewY(2deg); } to { opacity: 1; transform: none; } }
.hero h1 em { animation: slidein 1s .55s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes slidein { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }

/* Light sweeping across the gold plates now and then */
.eyebrow::before, .digger .role::before, .btn-gold::before, .lang-switch button[aria-pressed="true"]::before, .nav-links a[aria-current="page"]::before {
  background-image: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .6) 50%, transparent 65%), var(--plate);
  background-size: 300% 100%, 100% 100%;
  background-repeat: no-repeat;
  animation: shine 5s ease-in-out infinite;
}
@keyframes shine { 0%, 60% { background-position: 150% 0, 0 0; } 100% { background-position: -50% 0, 0 0; } }

/* Header gets slimmer once you scroll */
.nav { transition: height .3s; }
.scrolled .nav { height: 66px; }
.nav-logo img { transition: height .3s; }
.scrolled .nav-logo img { height: 32px; }
/* Phone menu open: the header keeps its full height and background even after scrolling,
   and the page behind it stays put */
@media (max-width: 980px) {
  .site-header.open .nav { height: auto; }
  .site-header.open { max-height: 100svh; overflow-y: auto; }
  html.menu-open, html.menu-open body { overflow: hidden; }
  .site-header.scrolled, .site-header.open { backdrop-filter: none; background: rgba(36, 27, 18, .97); } /* blur behind a fixed header is heavy on phones */
}

/* Cards: gold bar wipes in on hover, and they lift a little */
.loc, .trail-card { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.loc .txt::after, .trail-card h3::after {
  content: ""; display: block; height: 4px; width: 60px; margin-top: 14px; background: var(--gold);
  transform: skewX(var(--slant)) scaleX(.5); transform-origin: left; transition: transform .4s;
}
.trail-card h3::after { margin-top: 10px; }

/* ---------- Reveal on scroll (slides in from the left; groups arrive one by one) ---------- */
.reveal { opacity: 0; translate: -50px 0; transition: opacity .8s, translate .9s cubic-bezier(.2, .8, .2, 1); }
.reveal.in { opacity: 1; translate: 0 0; }
.stagger > * { opacity: 0; translate: 0 50px; transition: opacity .7s, translate .8s cubic-bezier(.2, .8, .2, 1); }
.stagger.in > * { opacity: 1; translate: 0 0; }
.stagger.in > :nth-child(2) { transition-delay: .1s; }
.stagger.in > :nth-child(3) { transition-delay: .2s; }
.stagger.in > :nth-child(4) { transition-delay: .3s; }
.stagger.in > :nth-child(5) { transition-delay: .4s; }
.stagger.in > :nth-child(6) { transition-delay: .5s; }
.stagger.in > :nth-child(7) { transition-delay: .6s; }
.stagger.in > :nth-child(n+8) { transition-delay: .7s; }

@media (hover: hover) {
  .loc:hover, .trail-card:hover { transform: translateY(-8px); }
  .loc:hover .txt::after, .trail-card:hover h3::after { transform: skewX(var(--slant)) scaleX(2); }
  .btn::after { /* light flash across buttons on hover */
    content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(var(--slant));
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%) 150% 0 / 300% 100% no-repeat;
    transition: background-position .6s;
  }
  .btn:hover::after { background-position: -50% 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .stagger > * { opacity: 1; translate: 0 0; }
}