/*
Theme Name: Bicol Trail Dossier
Theme URI: https://bicoladventureatv.com
Author: Bicol Adventure ATV
Description: Rugged trail-dossier theme for an independent ATV-riding editorial guide to the Bicol region, Philippines.
Version: 1.0
Text Domain: bicol-trail-dossier
*/

* { box-sizing: border-box; }

/* Absolute-fill photo inside a positioned container, replacing a CSS background-image
   so the browser can defer/size the request (srcset, loading="lazy") — a background
   image is always fetched at full desktop size on every viewport (QA round 1, M3). */
.bicoltd-fill-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

:root {
  --bg: #16140f;
  --bg-raise: rgba(232,224,200,0.04);
  --paper: #d8cfae;
  --paper-dark: #c7bd98;
  --ink-on-paper: #221d15;
  --ink-muted-on-paper: #4a4330;
  --text: #e8e0c8;
  --text-muted: #b8ae8f;
  --text-dim: #8a7f5f;
  --rust: #8a4a2f;
  --rust-light: #c98a63;
  --rust-lighter: #e8ac82;
  --khaki: #6f6b45;
  --hairline: rgba(216,207,174,0.14);
  --hairline-strong: rgba(216,207,174,0.25);
  --radius: 3px;
  --font-display: 'Black Ops One', 'Barlow Condensed', sans-serif;
  --font-body: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
}
img { max-width: 100%; display: block; }
a { color: var(--rust-light); text-decoration: none; }
a:hover { color: var(--rust-lighter); }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text); letter-spacing: 0.5px; }
.mono { font-family: var(--font-mono); }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.09); } }
@keyframes driftLines { from { background-position: 0 0, 0 0; } to { background-position: 140px 90px, -100px 60px; } }
@keyframes orbFloat { 0% { transform: translate(0,0); } 50% { transform: translate(36px,-26px); } 100% { transform: translate(0,0); } }
@keyframes orbFloat2 { 0% { transform: translate(0,0); } 50% { transform: translate(-28px,24px); } 100% { transform: translate(0,0); } }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes zoomSlow { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 500; opacity: 0.045; mix-blend-mode: overlay;
  background-image: radial-gradient(rgba(255,255,255,0.9) 0.6px, transparent 0.6px);
  background-size: 3px 3px;
}
.breadcrumbs { margin: 20px 0 4px; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; font-size: 12.5px; letter-spacing: 0.5px; color: var(--text-dim); }
.breadcrumbs li:not(:last-child)::after { content: '/'; margin-left: 6px; color: var(--khaki); }
.breadcrumbs a { color: var(--text-dim); }
.breadcrumbs a:hover { color: var(--rust-light); }
.breadcrumbs span[aria-current] { color: var(--rust-light); }

.other-routes { margin: 34px 0; padding: 20px 22px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--bg-raise); }
.other-routes h4 { font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: var(--rust-light); margin: 0 0 12px; }
.other-routes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.other-routes a { font-size: 15px; }

.route-map { margin: 28px 0 40px; border: 1px solid var(--paper-dark); border-radius: var(--radius); overflow: hidden; box-shadow: 0 14px 34px rgba(0,0,0,0.4); }
.route-map svg { width: 100%; height: auto; display: block; }
.route-map .rm-label { font-family: var(--font-mono); font-size: 11px; fill: var(--ink-muted-on-paper); letter-spacing: 0.5px; }
.route-map .rm-route-label { font-family: var(--font-body); font-weight: 700; font-size: 26px; fill: #f6ede0; letter-spacing: 0.5px; text-transform: uppercase; }
.route-map .rm-elev { font-family: var(--font-mono); font-size: 9.5px; fill: var(--ink-muted-on-paper); letter-spacing: 0.3px; }
.route-map .rm-compass-n { font-family: var(--font-mono); font-size: 10px; fill: var(--ink-on-paper); font-weight: 700; }
.route-map .rm-scale { font-family: var(--font-mono); font-size: 9.5px; fill: var(--ink-on-paper); }
.route-map .rm-label-photo { font-family: var(--font-mono); font-size: 20px; fill: #f6ede0; letter-spacing: 1px; font-weight: 600; }
.route-map .rm-compass-n-photo { font-family: var(--font-mono); font-size: 24px; fill: #f6ede0; font-weight: 700; }
.route-map .rm-scale-photo { font-family: var(--font-mono); font-size: 20px; fill: #f6ede0; }
.route-map a { cursor: pointer; }
.route-map a:hover rect { opacity: 0.85; }
.route-map a:hover text.rm-route-label { fill: #fff; }
.route-map-caption { text-align: center; font-size: 11px; color: var(--text-dim); letter-spacing: 0.5px; margin: 8px 0 0; text-transform: uppercase; }

.tread { height: 7px; background-image: repeating-linear-gradient(115deg, var(--rust) 0 10px, transparent 10px 22px); opacity: 0.55; }

/* reveal-on-scroll (progressive enhancement; content visible without JS) */
.reveal { opacity: 0; }
.reveal.is-visible { animation: fadeUp 0.6s ease forwards; }

/* ── site header ───────────────────────────── */
.site-header { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; border-bottom: 1px solid var(--hairline); }
.brand { display: flex; align-items: center; gap: 14px; color: var(--text); }
.brand-mark { width: 42px; height: 42px; border: 2px solid var(--rust); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.brand-name { font-size: 21px; letter-spacing: 1px; }
.brand-name .accent { color: var(--rust-light); }
.brand:hover { color: var(--rust-lighter); }
.primary-nav ul { list-style: none; display: flex; gap: 34px; margin: 0; padding: 0; }
.primary-nav a { font-size: 16px; letter-spacing: 0.5px; color: #cfc6ab; }
.primary-nav a:hover, .primary-nav .current-menu-item a { color: var(--rust-lighter); }

.nav-toggle-input { position: absolute; opacity: 0; pointer-events: none; }
.nav-toggle-label { display: none; color: var(--rust-light); cursor: pointer; padding: 6px; }

/* ── ticker ─────────────────────────────────── */
.ticker-strip { background: #221d15; border-bottom: 1px solid var(--hairline); overflow: hidden; white-space: nowrap; padding: 8px 0; }
.ticker-track { display: inline-block; animation: tickerScroll 30s linear infinite; font-size: 12.5px; letter-spacing: 1px; color: #a3925f; text-transform: uppercase; }
.ticker-track span { margin-right: 46px; }
.ticker-track span b { color: var(--rust-light); }

/* ── hero ───────────────────────────────────── */
/* Capped, not full-bleed-to-viewport: an uncapped hero stretched the 1280px
   source image via background-size:cover on any screen wider than that,
   which is real visible upscale-blur, not a generation-quality problem. */
.hero { position: relative; min-height: 560px; max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 52px; border-bottom: 4px solid var(--rust); overflow: hidden; }
.hero-bg {
  position: absolute; inset: -20px; z-index: 0;
  background:
    linear-gradient(0deg, rgba(22,20,15,0.2) 0%, rgba(22,20,15,0.55) 55%, rgba(22,20,15,0.96) 100%),
    repeating-linear-gradient(72deg, rgba(40,30,20,0.9) 0 34px, rgba(58,44,30,0.9) 34px 68px, rgba(30,22,15,0.95) 68px 102px),
    linear-gradient(135deg, #3a2a1c 0%, #241b13 60%, #16140f 100%);
  animation: heroZoom 26s ease-in-out infinite alternate;
}
.hero-bg.has-photo { background-size: cover; background-position: center; }
.hero-contour { position: absolute; inset: -60px; z-index: 1; opacity: 0.5; pointer-events: none;
  background-image: repeating-radial-gradient(circle at 22% 30%, transparent 0 46px, rgba(232,224,200,0.05) 46px 48px), repeating-radial-gradient(circle at 82% 74%, transparent 0 60px, rgba(232,224,200,0.045) 60px 62px);
  animation: driftLines 50s linear infinite; }
.orb { position: absolute; border-radius: 50%; filter: blur(46px); z-index: 1; pointer-events: none; }
.orb-a { width: 260px; height: 260px; left: 8%; top: 10%; background: rgba(138,74,47,0.35); animation: orbFloat 19s ease-in-out infinite; }
.orb-b { width: 200px; height: 200px; right: 12%; top: 30%; background: rgba(111,107,69,0.3); animation: orbFloat2 23s ease-in-out infinite; }
.hero-content { position: relative; z-index: 2; }
.hero-eyebrow { font-size: 12px; color: var(--rust-light); letter-spacing: 1px; margin-bottom: 14px; text-transform: uppercase; }
.hero h1 { font-size: 40px; line-height: 1.18; margin: 0 0 18px; max-width: 920px; color: #f2ead2; text-shadow: 0 2px 10px rgba(0,0,0,0.6); }
.hero p { font-size: 19px; max-width: 580px; color: #ded4b6; margin: 0 0 28px; text-shadow: 0 1px 6px rgba(0,0,0,0.5); }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }

/* ── buttons ────────────────────────────────── */
.btn { font-family: var(--font-body); font-weight: 700; font-size: 16px; letter-spacing: 1px; text-transform: uppercase; padding: 13px 26px; border-radius: 2px; display: inline-flex; align-items: center; gap: 8px; transition: transform 0.2s, background 0.2s, color 0.2s, border-color 0.2s; cursor: pointer; border: none; }
.btn-primary { background: var(--rust); color: #f6ede0; }
.btn-primary:hover { background: #a3592f; color: #fff; transform: translateY(-2px); }
.btn-ghost { background: rgba(22,20,15,0.3); border: 1px solid #cfc6ab; color: #f2ead2; }
.btn-ghost:hover { border-color: var(--rust-lighter); color: var(--rust-lighter); transform: translateY(-2px); }

/* ── layout ─────────────────────────────────── */
.layout { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 44px; padding: 48px 0; }
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }
.section-label { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.section-label .num { color: var(--khaki); font-size: 13px; }
.section-label h2 { font-size: 24px; margin: 0; }
.section-label .rule { flex: 1; height: 1px; background: var(--hairline); }

/* ── route / trail dossier cards ───────────── */
.routes-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; margin-bottom: 56px; }
@media (max-width: 900px) { .routes-grid { grid-template-columns: 1fr; } }
.route-card { border-radius: var(--radius); transition: transform 0.35s ease; position: relative; }
.route-card:hover { transform: translateY(-8px); }
.route-card-link { display: block; color: inherit; text-decoration: none; }
.route-photo { height: 190px; border-radius: var(--radius) var(--radius) 0 0; position: relative; overflow: hidden; box-shadow: 0 10px 22px rgba(0,0,0,0.4); background-size: cover; background-position: center; }
.route-photo .tag { position: absolute; bottom: 8px; left: 10px; font-size: 9.5px; color: rgba(255,255,255,0.55); background: rgba(0,0,0,0.4); padding: 3px 7px; border-radius: 2px; letter-spacing: 0.5px; }
.route-photo::after { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%); }
.route-card:hover .route-photo { box-shadow: 0 16px 30px rgba(0,0,0,0.55); }
.p1 { background-image: repeating-linear-gradient(64deg, #241a12 0 22px, #3a2a1c 22px 44px, #17110b 44px 66px), linear-gradient(160deg,#4a2f1c,#1a130c); }
.p2 { background-image: repeating-linear-gradient(58deg, #22301c 0 20px, #3a4a2c 20px 40px, #182412 40px 60px), linear-gradient(160deg,#3d4a2c,#151d10); }
.p3 { background-image: repeating-linear-gradient(70deg, #1c2a30 0 22px, #2c4048 22px 44px, #131c20 44px 66px), linear-gradient(160deg,#2c3f48,#101619); }
.route-dossier { background: var(--paper); color: var(--ink-on-paper); padding: 18px 18px 16px; border-radius: 0 0 var(--radius) var(--radius); border: 1px solid var(--paper-dark); border-top: none; position: relative; }
.stamp { position: absolute; top: -25px; right: 14px; width: 66px; height: 66px; border-radius: 50%; border: 2.5px solid var(--rust); background: var(--paper); color: var(--rust); display: flex; align-items: center; justify-content: center; transform: rotate(-14deg); font-family: var(--font-display); font-size: 7.5px; text-align: center; line-height: 1.15; letter-spacing: 0; box-shadow: 0 4px 10px rgba(0,0,0,0.3); padding: 5px; box-sizing: border-box; overflow: hidden; hyphens: auto; overflow-wrap: break-word; }
.route-code { font-size: 11px; color: var(--khaki); letter-spacing: 1px; margin-bottom: 6px; }
.route-dossier h3 { font-family: var(--font-body); font-weight: 700; font-size: 18px; line-height: 1.28; margin: 0 0 12px; max-width: 78%; text-transform: uppercase; color: var(--ink-on-paper); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.84em; }
.route-dossier h3 a { color: inherit; }
.route-stats { display: flex; flex-direction: column; gap: 6px; border-top: 1px dashed #a89a6c; padding-top: 12px; font-size: 15px; }
.route-stats .row { display: flex; justify-content: space-between; }
.route-stats .k { color: var(--khaki); text-transform: uppercase; font-size: 12px; letter-spacing: 0.5px; }
.route-stats .v { font-weight: 600; }
.route-terrain { font-size: 14px; color: var(--ink-muted-on-paper); margin-top: 10px; font-style: italic; }

/* ── spotlight ──────────────────────────────── */
.spotlight { margin-bottom: 56px; position: relative; border-radius: var(--radius); overflow: hidden; min-height: 340px; display: flex; align-items: flex-end; border: 1px solid var(--hairline); }
.spotlight-bg { position: absolute; inset: 0; background: repeating-linear-gradient(48deg, #221a12 0 30px, #3a2c1c 30px 60px, #17110b 60px 90px), radial-gradient(circle at 70% 30%, rgba(200,138,99,0.18), transparent 60%); animation: zoomSlow 22s ease-in-out infinite alternate; background-size: cover; background-position: center; }
.spotlight::after { content:''; position:absolute; inset:0; background: linear-gradient(0deg, rgba(22,20,15,0.92) 10%, rgba(22,20,15,0.1) 70%); }
.spotlight-content { position: relative; z-index: 2; padding: 34px 36px; }
.spotlight-content .kicker { font-size: 12px; color: var(--rust-light); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px; }
.spotlight-content h3 { font-size: 30px; margin: 0 0 10px; max-width: 640px; color: #f2ead2; }
.spotlight-content p { max-width: 520px; font-size: 16px; color: #d7cdb0; margin: 0; }

/* ── gallery ────────────────────────────────── */
.gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); grid-auto-rows: 100px; gap: 12px; }
@media (max-width: 700px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.gallery-photo { border-radius: var(--radius); overflow: hidden; position: relative; border: 1px solid var(--hairline); background-size: cover; background-position: center; display: block; }
.gallery-photo .fill { position: absolute; inset: 0; transition: transform 0.5s ease; background-size: cover; background-position: center; }
.gallery-photo:hover .fill { transform: scale(1.1); }
.gallery-photo .cap { position: absolute; bottom: 8px; left: 10px; font-size: 9.5px; color: rgba(255,255,255,0.65); z-index: 2; }
.gallery-photo::before { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.5) 100%); z-index:1; }
.g-span2 { grid-column: span 2; } .g-rowspan2 { grid-row: span 2; }

/* full gallery page + lightbox (pure CSS :target, no JS) */
.full-gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin: 28px 0 40px; }
@media (max-width: 700px) { .full-gallery-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.full-gallery-grid a { aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--hairline); position: relative; }
.full-gallery-grid a .fill { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.4s ease; }
.full-gallery-grid a:hover .fill { transform: scale(1.06); }
.lightbox { display: none; position: fixed; inset: 0; z-index: 900; background: rgba(10,9,6,0.92); align-items: center; justify-content: center; padding: 40px; }
.lightbox:target { display: flex; }
.lightbox .lightbox-frame { max-width: 900px; width: 100%; background: var(--bg); border: 1px solid var(--hairline-strong); border-radius: var(--radius); overflow: hidden; }
.lightbox .lightbox-photo { aspect-ratio: 16/10; background-size: cover; background-position: center; }
.lightbox .lightbox-cap { padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--text-muted); }
.lightbox .lightbox-count { color: var(--text-dim); }
/* Close + prev/next sit on the dark overlay itself (not tucked in the caption row),
   so they read as real controls rather than something you have to hunt for.
   Selectors are scoped under .lightbox (not just the bare class) so this wins
   over ".full-gallery-grid a" (line ~208), which also matches these <a> tags
   since the whole lightbox sits inside .full-gallery-grid in the markup and
   was silently forcing position:relative on them via higher specificity. */
.lightbox .lightbox-close {
	position: fixed; top: 22px; right: 28px; z-index: 2;
	width: 44px; height: 44px; aspect-ratio: auto; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: rgba(20,16,10,0.6); border: 1px solid var(--hairline-strong); color: #f6ede0; font-size: 26px; line-height: 1;
}
.lightbox .lightbox-close:hover { background: var(--rust); }
.lightbox .lightbox-arrow {
	position: fixed; top: 50%; transform: translateY(-50%); z-index: 2;
	width: 52px; height: 52px; aspect-ratio: auto; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: rgba(20,16,10,0.6); border: 1px solid var(--hairline-strong); color: #f6ede0; font-size: 30px; line-height: 1;
}
.lightbox .lightbox-arrow:hover { background: var(--rust); }
.lightbox .lightbox-prev { left: 20px; }
.lightbox .lightbox-next { right: 20px; }
@media (max-width: 640px) {
	.lightbox { padding: 16px; }
	.lightbox .lightbox-close { top: 12px; right: 12px; width: 38px; height: 38px; font-size: 22px; }
	.lightbox .lightbox-arrow { width: 42px; height: 42px; font-size: 24px; }
	.lightbox .lightbox-prev { left: 8px; }
	.lightbox .lightbox-next { right: 8px; }
}

/* ── blog / journal ─────────────────────────── */
.blog-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
@media (max-width: 700px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card { border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; background: var(--bg-raise); transition: transform 0.3s ease; }
.blog-card:hover { transform: translateY(-5px); }
.blog-card-link { display: block; color: inherit; text-decoration: none; }
.blog-thumb { height: 190px; position: relative; background-size: cover; background-position: center; }
.blog-thumb::after { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(22,20,15,0.5) 100%); }
.blog-card-body { padding: 18px 20px 20px; }
.blog-card .cat { font-size: 11px; color: var(--rust); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
.blog-card h4 { font-family: var(--font-body); font-size: 21px; margin: 0 0 10px; font-weight: 600; color: #f2ead2; }
.blog-card h4 a { color: inherit; }
.blog-card p { font-size: 15px; color: var(--text-muted); margin: 0 0 10px; }
.blog-card .read { font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase; font-weight: 600; }

/* ── sidebar ────────────────────────────────── */
/* Sticky, not fixed: a grid item stretches to its row's height by default, which would
   silently defeat position:sticky (the sidebar is already as tall as .main, so it never
   has room to "stick") — align-self:start gives it its own content height instead. */
.sidebar { display: flex; flex-direction: column; gap: 22px; align-self: start; position: sticky; top: 24px; }
/* Placed AFTER the base .sidebar rule on purpose: an earlier copy of this override, textually
   before line 263 above, was silently beaten by it at equal specificity (later same-specificity
   rule wins) — sticky stayed active under 900px even though this exact override existed, just
   in the wrong position in the cascade. */
@media (max-width: 900px) { .sidebar { position: static; } }
.widget { background: var(--bg-raise); border: 1px solid var(--hairline); border-radius: 2px; padding: 20px; }
.widget h3 { font-size: 15px; margin: 0 0 16px; color: var(--rust-light); letter-spacing: 0.5px; text-transform: uppercase; border-bottom: 1px solid var(--hairline); padding-bottom: 10px; }
.widget ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.widget li a { font-size: 15px; color: #d7cdb0; display: flex; align-items: center; gap: 10px; }
.widget li a:hover { color: var(--rust-lighter); }
.mini-thumb { width: 40px; height: 40px; border-radius: 2px; flex-shrink: 0; background-size: cover; background-position: center; }
.widget .cat-link { display: inline-flex; align-items: center; gap: 6px; background: rgba(138,74,47,0.18); border: 1px solid var(--rust); color: var(--rust-lighter); padding: 5px 12px; border-radius: 2px; font-size: 13px; letter-spacing: 0.5px; text-transform: uppercase; }
.ad-widget { border: 1px dashed var(--khaki); background: rgba(111,107,69,0.08); }
.ad-widget .ad-label { font-size: 10px; letter-spacing: 1px; color: var(--khaki); text-transform: uppercase; margin-bottom: 10px; }

/* ── trail single page ─────────────────────── */
.trail-hero { position: relative; min-height: 380px; border-radius: var(--radius); overflow: hidden; margin: 28px 0; background-size: cover; background-position: center; display: flex; align-items: flex-end; border: 1px solid var(--hairline); }
.trail-hero::after { content:''; position:absolute; inset:0; background: linear-gradient(0deg, rgba(22,20,15,0.9) 10%, rgba(22,20,15,0.05) 65%); }
.trail-hero .trail-hero-content { position: relative; z-index: 2; padding: 30px; }
.trail-meta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.trail-pill { font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; padding: 5px 12px; border-radius: 20px; border: 1px solid var(--hairline-strong); color: var(--text-muted); }
.trail-pill.status-open { border-color: #6b8f5c; color: #a9d199; }
.trail-pill.status-caution { border-color: #a3792f; color: #e8b969; }
.trail-pill.status-unknown { border-color: var(--hairline-strong); color: var(--text-dim); }

.gauge-cluster { display: flex; gap: 64px; flex-wrap: wrap; justify-content: center; margin: 30px 0; }
.gauge { width: 160px; text-align: center; }
.gauge svg { width: 160px; height: 160px; transform: rotate(-90deg); display: block; }
.gauge .track { stroke: rgba(216,207,174,0.15); fill: none; }
.gauge .arc { fill: none; stroke-linecap: round; stroke: var(--rust); stroke-dasharray: 251; }
.gauge-num { font-family: var(--font-display); font-size: 32px; }
.gauge-label { font-size: 13px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 8px; }

.elevation-chart { margin: 30px 0; background: var(--bg-raise); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 20px; }
.elevation-chart h4 { font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: var(--rust-light); margin: 0 0 14px; }
.elevation-chart svg { width: 100%; height: auto; display: block; }
.elevation-chart .fill-area { fill: rgba(138,74,47,0.25); }
.elevation-chart .line { fill: none; stroke: var(--rust-light); stroke-width: 2.5; stroke-dasharray: 900; stroke-dashoffset: 900; animation: drawLine 2.2s ease forwards; }
.elevation-chart .grid-line { stroke: rgba(216,207,174,0.08); stroke-width: 1; }
.elevation-chart .pt-label { font-size: 10px; fill: var(--text-dim); font-family: var(--font-mono); }

.trail-body { max-width: 760px; }
.trail-body h2 { margin-top: 42px; }
.trail-body p { color: var(--text-muted); }
.safety-box { border: 1px solid var(--hairline-strong); border-left: 3px solid var(--rust); background: var(--bg-raise); border-radius: var(--radius); padding: 20px 24px; margin: 26px 0; }
.safety-box h4 { margin: 0 0 10px; font-size: 16px; display: flex; align-items: center; gap: 8px; }

.faq-list { margin: 30px 0; max-width: 760px; }
.faq-item { border: 1px solid var(--hairline); border-radius: var(--radius); margin-bottom: 10px; background: var(--bg-raise); }
.faq-item summary { padding: 16px 20px; cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-item summary h3 { margin: 0; font: inherit; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .chev { transition: transform 0.25s ease; flex-shrink: 0; }
.faq-item[open] summary .chev { transform: rotate(180deg); }
.faq-item .faq-answer { padding: 0 20px 18px; color: var(--text-muted); }

.cost-table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px; }
.cost-table th, .cost-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--hairline); }
.cost-table th { color: var(--rust-light); text-transform: uppercase; font-size: 12px; letter-spacing: 0.5px; }

/* ── generic page / article content ────────── */
.page-content, .single-content { max-width: 760px; }
.page-content p, .single-content p { color: var(--text-muted); }
.entry-header { margin: 28px 0 20px; }
.entry-header h1 { font-size: 38px; margin: 0 0 10px; }
.entry-meta { font-size: 13px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
.entry-thumb { border-radius: var(--radius); overflow: hidden; margin: 20px 0 30px; height: 320px; background-size: cover; background-position: center; border: 1px solid var(--hairline); }
.body-photo { margin: 34px 0; }
.body-photo-img { border-radius: var(--radius); overflow: hidden; height: 300px; background-size: cover; background-position: center; border: 1px solid var(--hairline); }
.body-photo figcaption { font-size: 13px; color: var(--text-dim); margin-top: 8px; font-style: italic; }

/* ── footer ─────────────────────────────────── */
.site-footer { padding: 28px 0; border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; color: var(--text-dim); flex-wrap: wrap; gap: 12px; }
.site-footer a { color: var(--text-dim); }
.foot-links { display: flex; gap: 20px; }

@media (max-width: 640px) {
  .nav-toggle-label { display: flex; align-items: center; }
  .primary-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
    background: #1c1913; border-bottom: 3px solid var(--rust); padding: 12px 24px 20px;
  }
  .primary-nav ul { flex-direction: column; gap: 4px; }
  .primary-nav a { display: block; padding: 12px 4px; font-size: 17px; border-bottom: 1px solid var(--hairline); }
  .nav-toggle-input:checked ~ .primary-nav { display: block; }
  .site-header { position: relative; }
  .hero h1 { font-size: 36px; }
  .gauge-cluster { justify-content: center; }
}