/* =========================================================
   TORONTO BIKING — site.css
   Shared by every page. Page-type sheets (trail.css, etc.)
   layer on top. Don't put page-specific rules in here.
   ========================================================= */

:root{
  /* palette */
  --bg-deep:#1a2f26;--bg-primary:#2d4a3e;--bg-secondary:#3d2b1f;--bg-card:#243b31;--bg-card-hover:#2a4537;--bg-surface:#1e3329;
  --text-primary:#f0e6d6;--text-secondary:#c4b49a;--text-muted:#8a7e6b;--text-accent:#d4a54a;
  --accent-amber:#d4a54a;--accent-amber-hover:#e0b255;--accent-moss:#7a9e7e;--accent-warm:#c47d3b;
  --tan:#b59a7c;          /* kicker / label colour */
  --data:#a89a83;         /* stats + meta numbers */
  --line:rgba(240,230,214,.14);
  --line-soft:rgba(240,230,214,.06);
  --easy:#7a9e7e;--moderate:#d4a54a;--hard:#c45c3b;
  --pin-trailhead:#e05252;--pin-poi:#7a9e7e;

  /* scale */
  --space-xs:.25rem;--space-sm:.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--space-3xl:4rem;--space-4xl:6rem;
  --text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:2rem;--text-4xl:2.75rem;--text-5xl:3.5rem;--text-6xl:4.5rem;

  /* type */
  --font-heading:'Playfair Display',Georgia,serif;
  --font-body:'DM Sans',sans-serif;
  --font-data:'Barlow Semi Condensed',sans-serif;   /* numbers, meta, badges */
  --font-kicker:'Big Shoulders Display',sans-serif; /* small all-caps labels */
  --font-ui:Archivo,sans-serif;                      /* condensed buttons/chips */
  --font-mini:Roboto,sans-serif;                     /* footer + form micro type */

  --radius-sm:4px;--radius-md:8px;--radius-lg:12px;
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* paper texture (uncoated paper + faint tonal drift) */
  --paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='w' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.15 0 0 0 -0.075'/%3E%3C/filter%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -0.55 0 0 0 0.275'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200'%3E%3Cfilter id='w' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0025' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.04 0 0 0 -0.02'/%3E%3C/filter%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0025' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -0.12 0 0 0 0.06'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
  /* brown board texture (Ride Report, callouts) */
  --board:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='r' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02 .035' numOctaves='6' seed='9' stitchTiles='stitch'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='3'%3E%3CfeDistantLight azimuth='235' elevation='50'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E");
}

/* ---------- reset & base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--font-body);font-size:var(--text-base);line-height:1.7;color:var(--text-primary);background-color:var(--bg-deep);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--accent-amber);text-decoration:none;transition:color .3s ease}
a:hover{color:var(--text-primary)}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:700;line-height:1.2;color:var(--text-primary)}
button{font:inherit}

/* ---------- layout ---------- */
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--space-lg)}
.container--narrow{max-width:768px}
.section{position:relative;padding:var(--space-4xl) 0;background-color:var(--bg-deep);background-image:var(--paper);background-size:180px 180px,1200px 1200px}
.section--surface{background-color:var(--bg-surface)}
.section--flush-top{padding-top:0}
.divider{width:100%;height:1px;background:linear-gradient(to right,transparent,rgba(240,230,214,.1),transparent)}

/* ---------- section intros (no eyebrows) ---------- */
.intro-row{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-lg);flex-wrap:wrap;margin-bottom:var(--space-2xl)}
.intro-text{display:flex;flex-direction:column;gap:12px;max-width:640px}
.section-heading{font-size:3rem;line-height:1.05;letter-spacing:-.01em}
.intro-desc{color:var(--text-secondary);font-size:1.0625rem;line-height:1.5;text-wrap:pretty}
.intro-desc em{color:var(--text-primary)}
.kicker{font:800 1.125rem/1 var(--font-kicker);letter-spacing:.04em;text-transform:uppercase;color:var(--tan)}
.kicker span{color:var(--accent-amber)}
.text-link{color:var(--text-primary);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:rgba(240,230,214,.35);text-underline-offset:5px;transition:color .3s ease,text-decoration-color .3s ease}
.text-link:hover{color:var(--accent-amber);text-decoration-color:var(--accent-amber)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:var(--space-sm);background:transparent;color:var(--text-primary);border:1px solid rgba(240,230,214,.3);border-radius:0;font-family:var(--font-body);font-weight:500;font-size:.9375rem;padding:13px 24px;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .35s ease,border-color .35s ease,color .35s ease}
.btn:hover{background:rgba(240,230,214,.12);border-color:rgba(240,230,214,.5);color:var(--text-primary)}
.btn-solid{display:inline-block;background:var(--accent-amber);color:#1c1a17;border:0;border-radius:0;padding:14px 24px;font-family:var(--font-body);font-weight:600;font-size:.9375rem;transition:background .2s}
.btn-solid:hover{background:var(--accent-amber-hover);color:#1c1a17}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:var(--space-lg) 0;transition:background .4s ease,padding .4s ease,box-shadow .4s ease}
.nav::before{content:'';position:absolute;top:0;left:0;right:0;height:120px;background:linear-gradient(to bottom,rgba(0,0,0,.45) 0%,transparent 100%);z-index:-1;pointer-events:none}
.nav.scrolled{background:rgba(26,47,38,.95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:var(--space-md) 0;box-shadow:0 2px 20px rgba(0,0,0,.3)}
.nav-inner{display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center}
.nav-logo-img{height:42px;width:auto}
.nav-links{display:flex;gap:var(--space-xl);list-style:none}
.nav-links a{font-family:var(--font-body);font-size:var(--text-sm);font-weight:500;color:var(--text-secondary);letter-spacing:.02em;position:relative;padding-bottom:2px}
.nav-links a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;background:var(--accent-amber);transition:width .3s var(--ease-out)}
.nav-links a:hover{color:var(--text-primary)}
.nav-links a:hover::after{width:100%}
.nav-links a.active{color:var(--accent-amber)}
.nav-links a,.nav-logo{text-shadow:0 1px 2px rgba(0,0,0,.55),0 0 14px rgba(0,0,0,.35)}
.nav:not(.scrolled) .nav-links a{color:var(--text-primary)}
.nav:not(.scrolled) .nav-links a:hover,.nav:not(.scrolled) .nav-links a.active{color:var(--accent-amber)}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:var(--space-sm)}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--text-primary);margin:5px 0;transition:.3s ease}
.nav-dd{position:relative}
.nav-dd>a{display:inline-flex;align-items:center;gap:7px}
.nav-caret{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.nav-dd:hover .nav-caret,.nav-dd:focus-within .nav-caret{transform:translateY(1px) rotate(225deg)}
.nav-dd-menu{position:absolute;top:100%;right:-16px;min-width:200px;padding-top:14px;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .2s,transform .2s,visibility 0s .2s}
.nav-dd-menu::before{content:"";position:absolute;inset:14px 0 0;background:rgba(20,26,22,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(240,230,214,.12);z-index:-1}
.nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .2s}
.nav-links .nav-dd-menu a{display:block;padding:12px 18px;text-shadow:none;color:var(--text-secondary);white-space:nowrap}
.nav-links .nav-dd-menu a::after{display:none}
.nav-links .nav-dd-menu a:hover{color:var(--accent-amber);background:rgba(240,230,214,.05)}
.nav-dd-menu a:first-child{margin-top:6px}
.nav-dd-menu a:last-child{margin-bottom:6px}
/* Toronto Local flyout and "Soon" items, matching the new site header's menu */
.nav-sub{position:relative}
.nav-links .nav-sub>a{display:flex;align-items:center;justify-content:space-between;gap:14px}
.nav-sub-caret{width:5px;height:5px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
.nav-sub-menu{position:absolute;top:0;right:100%;min-width:220px;display:flex;flex-direction:column;padding:6px 0;background:rgba(20,26,22,.94);backdrop-filter:blur(8px);border:1px solid rgba(240,230,214,.12);opacity:0;visibility:hidden;transform:translateX(4px);transition:opacity .2s,transform .2s,visibility 0s .2s}
.nav-sub:hover .nav-sub-menu,.nav-sub:focus-within .nav-sub-menu{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .2s}
.nav-links .nav-sub:hover>a,.nav-links .nav-sub:focus-within>a{color:var(--accent-amber);background:rgba(240,230,214,.05)}
.nav-dd-menu .nav-sub-menu a{margin:0}
.nav-soon{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;font-family:var(--font-body);font-size:var(--text-sm);font-weight:500;color:var(--text-secondary);opacity:.7;cursor:default;white-space:nowrap}
.nav-soon em{font-style:normal;font-size:.7em;letter-spacing:.1em;text-transform:uppercase;border:1px solid rgba(240,230,214,.3);padding:3px 5px}
@media (max-width:768px){.nav-sub-menu{position:static;opacity:1;visibility:visible;transform:none;background:none;backdrop-filter:none;border:0;padding:0 0 0 14px;min-width:0}.nav-sub-caret{display:none}.nav-soon{padding:8px 0;justify-content:flex-start}}

/* ---------- badges & stars ---------- */
.badges{display:flex;flex-wrap:wrap;gap:4px}
.badge,.trail-card-badge{display:inline-block;font:600 .8125rem/1.5 var(--font-data);letter-spacing:.08em;text-transform:uppercase;padding:.25em .75em;border-radius:var(--radius-sm)}
.badge-easy{background:rgba(122,158,126,.9);color:var(--bg-deep)}
.badge-moderate{background:rgba(212,165,74,.9);color:var(--bg-deep)}
.badge-hard{background:rgba(196,92,59,.9);color:var(--text-primary)}
.is-easy{color:var(--easy)}.is-moderate{color:var(--moderate)}.is-hard{color:var(--hard)}
.stars{display:flex;gap:3px}
.star{width:14px;height:14px;fill:var(--accent-amber)}
.star-empty{fill:rgba(212,165,74,.25)}

/* ---------- trail cards ---------- */
.trails-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-xl)}
.trails-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.trail-card{position:relative;display:flex;flex-direction:column;background:var(--bg-card);border-radius:var(--radius-lg);overflow:hidden;transition:transform .4s var(--ease-out),box-shadow .4s ease}
.trail-card:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(0,0,0,.3)}
.trail-card-image{display:block;position:relative;padding-top:65%;overflow:hidden}
.trail-card-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.trail-card:hover .trail-card-image img{transform:scale(1.05)}
.trail-card-image>.trail-card-badge,.trail-card-image>.badges{position:absolute;top:var(--space-md);left:var(--space-md)}
.trail-card-body{flex:1;display:flex;flex-direction:column;padding:var(--space-lg)}
/* meta: exactly three <span>s — distance / surface / season */
.trail-card-meta{display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:center;margin-bottom:var(--space-sm);font:500 .9375rem/1.4 var(--font-data);letter-spacing:.02em;color:var(--data);font-variant-numeric:tabular-nums;white-space:nowrap}
.trail-card-meta>span{grid-row:1}
.trail-card-meta>span:first-child{grid-column:1}
.trail-card-meta>span:nth-child(2){grid-column:3}
.trail-card-meta>span:last-child{grid-column:5}
.trail-card-meta::before,.trail-card-meta::after{content:"";grid-row:1;justify-self:center;width:1px;height:1em;background:rgba(240,230,214,.22)}
.trail-card-meta::before{grid-column:2}
.trail-card-meta::after{grid-column:4}
.trail-card-title{font-size:var(--text-xl);margin-bottom:var(--space-sm)}
.trail-card-title a{color:var(--text-primary)}
.trail-card-title a:hover{color:var(--accent-amber)}
.trail-card-excerpt{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.6}
.trail-card-body>.stars,.trail-card-foot{margin-top:auto;padding-top:var(--space-md)}
.trail-card-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--space-md)}
.trail-card-note{font:500 var(--text-xs)/1 var(--font-data);letter-spacing:.02em;color:var(--data);text-align:right}

/* ---------- Ride Report (newsletter band) ---------- */
.rg-news{background:var(--board),#3d2b1e;background-blend-mode:normal,multiply;color:#f5f4f1;padding:var(--space-4xl) max(32px,calc((100% - 1216px) / 2));display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;align-items:end;scroll-margin-top:24px;font-family:var(--font-ui)}
.rg-news-copy{grid-column:span 7;display:flex;flex-direction:column;gap:18px}
.rg-ride-report{position:relative;display:inline-block;align-self:flex-start}
.rg-rider-svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible;opacity:0;pointer-events:none}
.rg-rr-text{position:relative;z-index:1;display:inline-block;font:800 30px/1 var(--font-kicker);text-transform:uppercase;letter-spacing:.04em;color:var(--tan)}
.rg-rr-text span{color:#eadcb8}
.rg-news h2{font-family:var(--font-ui);font-weight:800;font-size:72px;line-height:.88;font-stretch:66%;text-transform:uppercase;color:#f5f4f1}
.rg-news p{max-width:480px;font-size:15px;line-height:1.55;color:#e0d4c4}
.rg-news-form{grid-column:span 5;display:flex;flex-direction:column;gap:12px}
.rg-news-form>span{font-size:12px;line-height:1.5;color:#c4b29c}
.rg-news-field{display:flex;border:1px solid #f5f4f1}
.rg-news-field input{flex:1;min-width:0;background:transparent;border:0;padding:16px;color:#f5f4f1;font:400 14px var(--font-mini);outline:none}
.rg-news-field input::placeholder{color:#c4b29c}
.rg-news-field button{background:var(--accent-amber);color:#1c1a17;border:0;border-radius:0;padding:0 22px;font:600 11.5px/1 var(--font-mini);text-transform:uppercase;letter-spacing:.08em;cursor:pointer}
.rg-news-field button:hover{background:var(--accent-amber-hover)}

/* ---------- footer ---------- */
.tb-footer{background-color:var(--bg-surface);background-image:var(--paper);background-size:180px 180px,1200px 1200px;border-top:1px solid var(--line-soft);font-size:14px;color:#d9d7d2}
.tb-foot-inner{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;max-width:1280px;margin:0 auto}
.tb-foot-brand,.tb-foot-col{padding:32px;display:flex;flex-direction:column;gap:10px}
.tb-foot-brand{gap:16px}
.tb-foot-brand img{height:56px;width:auto;align-self:flex-start}
.tb-foot-brand span{line-height:1.5;max-width:300px;color:var(--text-secondary)}
.tb-foot-social{display:flex;gap:18px;margin-top:4px}.tb-foot-social a{display:inline-flex;color:#b8ad9c;transition:color .2s}.tb-foot-social a:hover{color:#d4a54a}.tb-foot-social svg{width:22px;height:22px;display:block}
.tb-foot-col span{font:500 11px/1 var(--font-mini);text-transform:uppercase;letter-spacing:.1em;color:var(--accent-amber);margin-bottom:6px}
.tb-foot-col a{color:var(--text-secondary)}
.tb-foot-col a:hover{color:var(--accent-amber)}
.tb-foot-col a.tb-foot-h{font:500 11px/1 var(--font-mini);text-transform:uppercase;letter-spacing:.1em;color:var(--accent-amber);margin-bottom:6px}
.tb-foot-col a.tb-foot-h:hover{color:var(--text-primary)}
.tb-foot-col span.tb-foot-soon{font:inherit;text-transform:none;letter-spacing:normal;margin:0;color:var(--text-secondary);opacity:.8}
@media (max-width:1100px) and (min-width:961px){.tb-foot-inner{grid-template-columns:2fr 1fr 1fr}}
.tb-foot-copy{margin:0 max(32px,calc((100% - 1280px) / 2 + 32px));padding:var(--space-xl) 0;border-top:1px solid var(--line-soft);font:500 10.5px/1 var(--font-mini);text-transform:uppercase;letter-spacing:.1em;color:#9a9995}

/* ---------- motion ---------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal.visible{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.1s}.reveal-delay-2{transition-delay:.2s}.reveal-delay-3{transition-delay:.3s}
.fade-up{opacity:0;transform:translateY(20px);animation:fadeUp .8s var(--ease-out) forwards}
@keyframes fadeUp{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.reveal,.fade-up{opacity:1;transform:none;animation:none;transition:none}}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .trails-grid,.trails-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .rg-news{grid-template-columns:1fr;padding:64px 20px}
  .rg-news-copy,.rg-news-form{grid-column:auto}
  .rg-news h2{font-size:48px}
  .tb-foot-inner{grid-template-columns:1fr}
  .tb-foot-brand,.tb-foot-col{padding:20px 32px}
}
@media (max-width:768px){
  .nav-links{display:none}
  .nav-links.open{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:rgba(26,47,38,.98);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:var(--space-xl) var(--space-lg);gap:var(--space-lg)}
  .nav-toggle{display:block}
  .nav-dd-menu{position:static;opacity:1;visibility:visible;transform:none;padding:4px 0 0 14px;min-width:0}
  .nav-dd-menu::before{display:none}
  .nav-links .nav-dd-menu a{padding:8px 0}
  .nav-caret{display:none}
  .section{padding:var(--space-3xl) 0}
  .section-heading{font-size:2.25rem}
  .trails-grid,.trails-grid--4{grid-template-columns:1fr}
}