/* =========================================================================
   Pace Partners Collective — design preview v2
   Ported from the tourism media kit (apple-design system).
   Shared by index.html, rides-ontario.html, ride-gatineau-park.html.
   ========================================================================= */

/* ============ tokens ============ */
/* single light palette; dark mode intentionally not supported */
:root{
  --paper:#F2F4F1; --paper-2:#E7EBE5;
  --surface:#FFFFFF; --surface-t:rgba(255,255,255,.72); --surface-2:#EDF0EA;
  --ink:#0E1512; --ink-2:#4C5A53; --ink-3:#7E8C84;
  --line:#DCE2D9; --line-soft:rgba(14,21,18,.07);
  --accent:#116B54; --accent-2:#0C4F3E; --accent-soft:#DDEDE5;

  /* stop categories, retuned into the cool-green world */
  --c-food:#B4562F; --c-refresh:#116B54; --c-park:#3F6C8E; --c-hint:#9C7226;

  --shadow-rgb:14,21,18;
  --sh-s:0 1px 2px rgba(var(--shadow-rgb),.05), 0 2px 6px rgba(var(--shadow-rgb),.04);
  --sh-m:0 2px 4px rgba(var(--shadow-rgb),.04), 0 10px 24px rgba(var(--shadow-rgb),.06);
  --sh-l:0 4px 10px rgba(var(--shadow-rgb),.05), 0 22px 50px rgba(var(--shadow-rgb),.10);
  --r-s:10px; --r-m:16px; --r-l:24px;
  --blur:20px;
  --ease:cubic-bezier(.32,.72,0,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--paper); color:var(--ink); margin:0;
  font-family:"Source Serif 4",Georgia,serif;
  font-optical-sizing:auto;
  font-size:1.0625rem; line-height:1.6; letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%}

/* ============ type ============ */
h1,h2,h3,h4,.disp{
  font-family:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  font-optical-sizing:auto; text-wrap:balance; margin:0;
}
h1{font-size:clamp(2.6rem,6.4vw,4.6rem);line-height:.95;font-weight:800;letter-spacing:-.04em}
h2{font-size:clamp(1.75rem,3.4vw,2.5rem);line-height:1.05;font-weight:800;letter-spacing:-.028em}
h3{font-size:1.1rem;line-height:1.32;font-weight:600;letter-spacing:-.012em}
p{margin:0}
a{color:var(--accent);text-underline-offset:3px}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.lbl{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;line-height:1.4;
}
.num{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
  font-variant-numeric:tabular-nums;font-optical-sizing:auto;line-height:.98;
}
.lede{font-size:clamp(1.08rem,1.9vw,1.3rem);line-height:1.52;letter-spacing:-.004em;color:var(--ink-2);max-width:36em}
.sub{font-size:1rem;line-height:1.55;color:var(--ink-2);max-width:40em}
.note{font-size:.855rem;line-height:1.55;color:var(--ink-3)}

/* ============ layout ============ */
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(20px,4vw,32px)}
.narrow{max-width:640px}
section{padding:clamp(32px,3.8vw,52px) 0}
section+section{border-top:1px solid var(--line-soft)}
.stack{display:flex;flex-direction:column}
.g6{gap:6px}.g8{gap:8px}.g12{gap:12px}.g16{gap:16px}.g20{gap:20px}.g24{gap:24px}.g32{gap:26px}.g44{gap:34px}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,26px)}
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}

/* ============ floating translucent chrome ============ */
.nav{
  position:sticky;top:0;z-index:50;
  background:var(--surface-t);
  backdrop-filter:saturate(180%) blur(var(--blur));
  -webkit-backdrop-filter:saturate(180%) blur(var(--blur));
  border-bottom:1px solid var(--line-soft);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:62px}
.nav .mark{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:.95rem;letter-spacing:-.02em;color:var(--ink);text-decoration:none;white-space:nowrap}
.nav nav{display:flex;gap:4px;align-items:center}
.nav nav a{
  font-family:"Bricolage Grotesque",sans-serif;font-size:.86rem;font-weight:500;letter-spacing:-.004em;
  color:var(--ink-2);text-decoration:none;padding:7px 12px;border-radius:99px;
  transition:background-color .18s var(--ease),color .18s var(--ease);
}
.nav nav a:hover{background:var(--surface-2);color:var(--ink)}
.nav nav a[aria-current="page"]{background:var(--surface-2);color:var(--ink);font-weight:600}
.nav .navcta{
  background:var(--ink);color:var(--paper);padding:9px 17px;border-radius:99px;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:.86rem;letter-spacing:-.004em;
  text-decoration:none;white-space:nowrap;
  transition:transform .14s var(--ease),opacity .14s var(--ease);
}
.nav .navcta:hover{opacity:.86}
.nav .navcta:active{transform:scale(.97)}
@media (max-width:900px){.nav nav{display:none}}

/* ============ breadcrumb ============ */
.crumb{padding:20px 0 26px}
.crumb .wrap{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumb a,.crumb span{
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
}
.crumb a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;transition:color .15s var(--ease),border-color .15s var(--ease)}
.crumb a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.crumb .sep{color:var(--ink-3)}
.crumb .cur{color:var(--ink)}

/* ============ hero ============ */
.hero{position:relative;overflow:hidden;padding:0}
.hero-img{position:relative;width:100%;aspect-ratio:2/1;max-height:440px;overflow:hidden;background:var(--paper-2)}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block}
.hero-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(6,12,9,.30) 0%,
    rgba(6,12,9,.06) 26%,
    rgba(6,12,9,0) 50%,
    color-mix(in srgb,var(--paper) 10%,transparent) 74%,
    color-mix(in srgb,var(--paper) 66%,transparent) 90%,
    var(--paper) 100%);
}
.hero-body{position:relative;z-index:2;margin-top:clamp(-104px,-10vw,-64px);padding-bottom:clamp(22px,2.4vw,32px)}
/* full-bleed photo hero, type sits on the image */
.hero.photo{position:relative;width:100%;aspect-ratio:16/9;max-height:640px;overflow:hidden;background:var(--paper-2);padding:0}
.hero.photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block}
.hero.photo::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(6,12,9,.36) 0%,rgba(6,12,9,.02) 30%,rgba(6,12,9,.34) 60%,rgba(6,12,9,.66) 80%,rgba(6,12,9,.86) 100%);
}
.hero-over{position:absolute;left:0;right:0;bottom:0;z-index:2;padding-bottom:clamp(24px,3.2vw,44px)}
.hero-over h1{color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.4)}
.hero-over .lede{color:rgba(255,255,255,.92);max-width:32em;text-shadow:0 1px 16px rgba(0,0,0,.45)}
@media (max-width:620px){
  .hero.photo{aspect-ratio:4/5;max-height:none}
  .hero-over .lede{font-size:1rem}
}

/* collection header: the collection's own photos in their native tall crop */
.collhero{position:relative;overflow:hidden;background:var(--ink)}
.collhero .strip{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);gap:2px}
.collhero .strip img{width:100%;height:100%;object-fit:cover;display:block}
.collhero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,17,13,.62) 0%,rgba(8,17,13,.5) 40%,rgba(8,17,13,.82) 100%);
}
.collhero .inner{position:relative;z-index:2;padding:clamp(46px,7vw,88px) 0 clamp(30px,4vw,52px)}
.collhero h1{color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.collhero .lede{color:rgba(255,255,255,.9);max-width:34em}
.collhero .eyebrow{color:#8FE0C4}
@media (max-width:1000px){
  .collhero .inner{padding-left:clamp(30px,6vw,42px);padding-right:clamp(30px,6vw,42px)}
  .collhero .lede{max-width:30em}
}
@media (max-width:900px){.collhero .strip{grid-template-columns:repeat(4,1fr)}.collhero .strip img:nth-child(n+5){display:none}}
@media (max-width:560px){.collhero .strip{grid-template-columns:repeat(2,1fr)}.collhero .strip img:nth-child(n+3){display:none}}

/* photo-less editorial header */
.hero-flat{padding:clamp(44px,6vw,84px) 0 clamp(34px,4.6vw,56px)}
.eyebrow{color:var(--accent);font-weight:500}
.sitelink{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:.95rem;letter-spacing:-.008em;
  text-decoration:none;align-self:flex-start;
  border-bottom:1.5px solid color-mix(in srgb,var(--accent) 45%,transparent);padding-bottom:1px;
  transition:border-color .18s var(--ease);
}
.sitelink:hover{border-bottom-color:var(--accent)}

/* ============ surfaces ============ */
.panel{
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--r-l);box-shadow:var(--sh-l);overflow:hidden;
}
.card{
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--r-m);box-shadow:var(--sh-s);padding:26px;
  display:flex;flex-direction:column;gap:12px;
}
.card p{font-size:.95rem;color:var(--ink-2);line-height:1.55}

.statband{
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--r-l);box-shadow:var(--sh-l);overflow:hidden;
}
.stat{padding:24px 22px;display:flex;flex-direction:column;gap:8px;position:relative}
.stat+.stat::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:1px;background:var(--line-soft)}
.stat .num{font-size:clamp(1.55rem,3.3vw,2.15rem);letter-spacing:-.035em}
.stat .sub{font-size:.83rem;color:var(--ink-3);line-height:1.4;max-width:none}

/* ============ pill controls ============ */
.pill{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:.88rem;letter-spacing:-.008em;
  color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:99px;
  padding:9px 16px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  box-shadow:var(--sh-s);text-decoration:none;
  transition:transform .16s var(--ease),box-shadow .16s var(--ease),background-color .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease);
}
.pill:hover{box-shadow:var(--sh-m);transform:translateY(-1px);color:var(--ink)}
.pill:active{transform:scale(.98)}
.pill[aria-pressed="true"],.pill.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pill .dot{width:7px;height:7px;border-radius:50%;flex:none;background:currentColor}
.pill .dot.food{background:var(--c-food)}
.pill .dot.refresh{background:var(--c-refresh)}
.pill .dot.park{background:var(--c-park)}
.pill .dot.hint{background:var(--c-hint)}
.pill.solid{
  background:var(--accent);color:#fff;border-color:var(--accent);
  font-size:.95rem;font-weight:600;padding:13px 22px;box-shadow:var(--sh-m);
}
.pill.solid:hover{background:var(--accent-2);border-color:var(--accent-2);color:#fff;box-shadow:var(--sh-l)}
.pill.solid .ico{font-size:1.05em;line-height:1}
.pillrow{display:flex;flex-wrap:wrap;gap:8px}

/* ============ ride cards ============ */
.grid-rides{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,20px)}
.grid-rides.four{grid-template-columns:repeat(4,1fr)}
a.ride{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-m);
  box-shadow:var(--sh-s);overflow:hidden;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
a.ride:hover{transform:translateY(-3px);box-shadow:var(--sh-l)}
a.ride:active{transform:scale(.985);box-shadow:var(--sh-m)}
.ride .shot{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--surface-2)}
.ride .shot img{width:100%;height:100%;object-fit:cover;display:block}
.ride .badge{
  position:absolute;top:10px;left:10px;z-index:2;
  font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(14,21,18,.62);color:#fff;padding:5px 9px;border-radius:99px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.ride .meta{padding:16px 18px;display:flex;flex-direction:column;gap:5px}
.ride .loc{font-family:"IBM Plex Mono",monospace;font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.ride .t{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:1rem;line-height:1.26;letter-spacing:-.016em}
.ride .d{
  font-family:"Bricolage Grotesque",sans-serif;font-size:.82rem;color:var(--ink-3);
  font-variant-numeric:tabular-nums;letter-spacing:-.006em;margin-top:2px;
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
}
.ride .d .diff{color:var(--accent);font-weight:600}
.ride .d .bar{width:1px;height:11px;background:var(--line)}

/* ============ feature panel ============ */
.feature{display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch}
.feature .shot{background:var(--surface-2);min-height:340px;position:relative;overflow:hidden}
.feature .shot img{width:100%;height:100%;object-fit:cover;display:block}
.feature .copy{padding:clamp(26px,3.6vw,46px);display:flex;flex-direction:column;gap:22px;justify-content:center}
.feature h3{font-size:clamp(1.6rem,3vw,2.15rem);font-weight:800;letter-spacing:-.03em;line-height:1.04}
.feature .metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature .metrics .num{font-size:1.4rem;letter-spacing:-.03em}

/* ============ footer ============ */
footer{
  padding:34px 0 56px;color:var(--ink-3);font-size:.86rem;
  border-top:1px solid var(--line-soft);
}
footer .wrap{display:flex;flex-direction:column;gap:14px}
footer .brandline{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1rem;letter-spacing:-.02em;color:var(--ink)}
footer .row{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
footer a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--line);transition:color .15s var(--ease),border-color .15s var(--ease)}
footer a:hover{color:var(--accent);border-color:var(--accent)}
footer .disclaimer{font-size:.8rem;line-height:1.6;max-width:62em;color:var(--ink-3)}

/* ============ motion ============ */
.rise{opacity:0;transform:translateY(18px);transition:opacity .62s var(--ease),transform .62s var(--ease)}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:opacity .2s linear}
  a.ride:hover,a.ride:active,.pill:hover,.pill:active{transform:none}
}
@media (prefers-reduced-transparency:reduce){
  .nav{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (prefers-contrast:more){
  :root{--line-soft:rgba(14,21,18,.28)}
  .nav{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}
  .card,.panel,.statband,a.ride,.pill{border-color:var(--ink-3)}
}

/* ============ responsive ============ */
@media (max-width:1180px){
  .grid-rides.four{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1000px){
  .grid-rides{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .cols2,.cols3,.feature{grid-template-columns:1fr}
  .feature{display:flex;flex-direction:column-reverse}
  .feature .shot{min-height:0;height:clamp(220px,58vw,340px)}
  .statband{grid-template-columns:1fr 1fr}
  .stat+.stat::before{display:none}
  .stat{border-top:1px solid var(--line-soft)}
  .stat:nth-child(1),.stat:nth-child(2){border-top:none}
  .hero-img{aspect-ratio:16/10}
}
@media (max-width:620px){
  .grid-rides,.grid-rides.four{grid-template-columns:1fr;gap:12px}
  a.ride{flex-direction:row;align-items:stretch}
  .ride .shot{flex:0 0 40%;aspect-ratio:1/1}
  .ride .meta{flex:1;min-width:0;justify-content:center;padding:14px 16px;gap:4px}
  .ride .t{font-size:.95rem}
  .ride .d{font-size:.78rem}
  .ride .badge{top:8px;left:8px;font-size:.56rem;padding:4px 7px}
}
@media (max-width:620px){
  .hero-img{aspect-ratio:4/3}
}
@media (max-width:520px){
  body{font-size:1rem}
  .statband{grid-template-columns:1fr 1fr}
  .stat{padding:18px 16px}
  .stat .num{font-size:1.5rem}
  .stat .sub{font-size:.76rem}
  .nav .wrap{height:56px}
}

/* =========================================================================
   Ride page components
   ========================================================================= */

/* ---- route embed ---- */
.routebar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
/* embeds keep square corners, per house rule */
.panel.square{border-radius:0}
.embed{position:relative;background:var(--surface-2);border-radius:0}
.embed iframe{border-radius:0}
.embed iframe{width:100%;height:min(72vh,560px);border:0;display:block}
.embed.hidden{display:none}
.embed .pad{padding:10px}
.embed .fallback{
  display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;text-align:center;
  height:min(72vh,560px);padding:24px;color:var(--ink-3);
}

/* ---- prose ---- */
.prose{display:flex;flex-direction:column;gap:18px}
.prose p{font-size:1.0625rem;line-height:1.68;color:var(--ink-2)}
.prose p strong{color:var(--ink)}
.pullquote{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:600;
  font-size:clamp(1.28rem,2.5vw,1.72rem);line-height:1.22;letter-spacing:-.026em;
  color:var(--ink);border-left:3px solid var(--accent);padding-left:22px;margin:4px 0 2px;
  text-wrap:balance;
}

/* ---- video ---- */
.reelwrap{max-width:392px;width:100%;background:#000;border-radius:var(--r-m);overflow:hidden;box-shadow:var(--sh-l);border:1px solid var(--line-soft)}
.reelwrap video{width:100%;aspect-ratio:9/16;display:block;object-fit:cover;background:#000}
/* about: prose and the reel share the row, neither column is empty */
.aboutgrid{display:grid;grid-template-columns:minmax(0,1fr) 344px;gap:clamp(26px,3.6vw,54px);align-items:start}
.reelcol{position:sticky;top:86px;display:flex;flex-direction:column;gap:10px}
.reelhead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.reellink{
  font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent);padding-bottom:2px;
  transition:border-color .18s var(--ease);
}
.reellink:hover{border-bottom-color:var(--accent)}
@media (max-width:900px){
  .aboutgrid{grid-template-columns:1fr;gap:30px}
  .reelcol{position:static;max-width:392px;width:100%}
}

/* ---- stops ---- */
.stops{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.8vw,18px);align-items:start}
.stop{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-m);
  box-shadow:var(--sh-s);padding:24px;display:flex;flex-direction:column;gap:9px;
  border-left:3px solid var(--line);
  transition:box-shadow .2s var(--ease),transform .2s var(--ease),opacity .28s var(--ease);
}
.stop:hover{box-shadow:var(--sh-m)}
.stop[data-cat="food"]{border-left-color:var(--c-food)}
.stop[data-cat="refresh"]{border-left-color:var(--c-refresh)}
.stop[data-cat="park"]{border-left-color:var(--c-park)}
.stop[data-cat="hint"]{border-left-color:var(--c-hint)}
/* [data-filter-group] in app.js toggles .out on whatever it filters. It was
   only ever styled for stop cards, so the difficulty filter on the collection
   page set the class on ride cards and nothing happened. */
.stop.out,.ride.out,.tripcard.out{display:none}
.stop .tag{
  font-family:"IBM Plex Mono",monospace;font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:7px;
}
.stop[data-cat="food"] .tag{color:var(--c-food)}
.stop[data-cat="refresh"] .tag{color:var(--c-refresh)}
.stop[data-cat="park"] .tag{color:var(--c-park)}
.stop[data-cat="hint"] .tag{color:var(--c-hint)}
.stop .tag .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.stop h3{letter-spacing:-.018em;font-size:1.12rem}
.stop .km{font-family:"Bricolage Grotesque",sans-serif;font-size:.82rem;color:var(--ink-3);letter-spacing:-.006em;font-variant-numeric:tabular-nums}
.stop p{font-size:.95rem;line-height:1.58;color:var(--ink-2)}
.stop .maplink{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:.85rem;letter-spacing:-.008em;
  text-decoration:none;align-self:flex-start;margin-top:2px;
  border-bottom:1.5px solid color-mix(in srgb,var(--accent) 40%,transparent);padding-bottom:1px;
  transition:border-color .18s var(--ease);
}
.stop .maplink:hover{border-bottom-color:var(--accent)}
@media (max-width:760px){.stops{grid-template-columns:1fr}}

/* ---- gallery ---- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,16px)}
.gallery figure{margin:0;border-radius:var(--r-m);overflow:hidden;box-shadow:var(--sh-s);border:1px solid var(--line-soft);background:var(--surface-2)}
.gallery img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;transition:transform .45s var(--ease)}
.gallery figure:hover img{transform:scale(1.03)}
@media (max-width:760px){.gallery{grid-template-columns:1fr 1fr}.gallery figure:nth-child(3){grid-column:span 2}.gallery figure:nth-child(3) img{aspect-ratio:16/9}}

/* ---- prev/next + CTA ---- */
.ctaband{display:flex;flex-direction:column;gap:26px}
.mailto{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
  font-size:clamp(1.15rem,2.6vw,1.75rem);letter-spacing:-.03em;line-height:1.15;
  color:var(--ink);text-decoration:none;align-self:flex-start;
  max-width:100%;overflow-wrap:anywhere;
  border-bottom:3px solid var(--accent);padding-bottom:4px;
  transition:border-color .18s var(--ease),transform .16s var(--ease);
}
.mailto:hover{border-bottom-color:var(--ink)}
.mailto:active{transform:scale(.99)}

/* ---- preview banner (this folder only) ---- */
.previewbar{
  background:var(--ink);color:var(--paper);font-family:"IBM Plex Mono",monospace;
  font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;
}
.previewbar .wrap{display:flex;gap:10px 20px;flex-wrap:wrap;align-items:center;justify-content:space-between;padding-top:9px;padding-bottom:9px}
.previewbar a{color:var(--paper);opacity:.72;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.25)}
.previewbar a:hover,.previewbar a[aria-current="page"]{opacity:1;border-bottom-color:currentColor}
.previewbar .set{display:flex;gap:16px;flex-wrap:wrap}

/* =========================================================================
   Trip-day components: where we stayed, the photo carousel, day-to-day nav
   ========================================================================= */

/* ---- where we stayed ---- */
.staycard{display:grid;grid-template-columns:1.02fr .98fr;align-items:stretch}
.staycard .shot{position:relative;background:var(--surface-2);min-height:300px;overflow:hidden}
.staycard .staybody{
  padding:clamp(24px,3.2vw,40px);display:flex;flex-direction:column;gap:13px;justify-content:center;
}
.staycard .staybody h3{font-size:clamp(1.32rem,2.4vw,1.7rem);font-weight:800;letter-spacing:-.026em;line-height:1.08}
.staycard .staybody p{font-size:.97rem;line-height:1.6;color:var(--ink-2)}
.staytag{
  font-family:"IBM Plex Mono",monospace;font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);
}
.staylinks{display:flex;flex-wrap:wrap;gap:9px;margin-top:5px}
@media (max-width:900px){
  .staycard{display:flex;flex-direction:column}
  .staycard .shot{min-height:0}
  /* the photo-less card has no carousel to stack under, so it keeps the moon
     beside the text until the phone breakpoint */
  .staycard.noshot{display:grid}
}

/* ---- photo carousel ---- */
.carousel{position:relative;overflow:hidden;height:100%;min-height:inherit}
.carousel .track{display:flex;height:100%;transition:transform .5s var(--ease)}
.carousel .track > img{
  flex:0 0 100%;width:100%;height:100%;min-height:300px;object-fit:cover;display:block;
}
.carousel .cnav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line-soft);
  background:var(--surface-t);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--ink);font-size:1.1rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sh-s);
  transition:background-color .16s var(--ease),transform .16s var(--ease),opacity .16s var(--ease);
}
.carousel .cnav:hover{background:var(--surface)}
.carousel .cnav:active{transform:translateY(-50%) scale(.94)}
.carousel .cnav.prev{left:12px}
.carousel .cnav.next{right:12px}
.carousel .cnav[disabled]{opacity:.35;cursor:default}
.carousel .dots{
  position:absolute;left:0;right:0;bottom:12px;z-index:2;
  display:flex;justify-content:center;gap:7px;
}
.carousel .dots button{
  width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.55);box-shadow:0 1px 3px rgba(0,0,0,.35);
  transition:background-color .2s var(--ease),transform .2s var(--ease);
}
.carousel .dots button[aria-current="true"]{background:#fff;transform:scale(1.35)}
.carousel .count{
  position:absolute;top:12px;right:12px;z-index:2;
  font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.1em;
  background:rgba(14,21,18,.6);color:#fff;padding:4px 9px;border-radius:99px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-variant-numeric:tabular-nums;
}
@media (prefers-reduced-motion:reduce){.carousel .track{transition:none}}

/* ---- previous / next day ---- */
.daynav{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,16px)}
.daycard{
  display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-m);
  box-shadow:var(--sh-s);padding:20px 22px;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
a.daycard:hover{transform:translateY(-2px);box-shadow:var(--sh-m)}
a.daycard:active{transform:scale(.99)}
.daycard .k{font-family:"IBM Plex Mono",monospace;font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.daycard .t{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:1.02rem;letter-spacing:-.016em;line-height:1.3}
.daycard.next{text-align:right;align-items:flex-end}
.daycard.disabled{opacity:.45;box-shadow:none;cursor:default}
.daynav .spacer{border:1px dashed var(--line);border-radius:var(--r-m)}
@media (max-width:620px){
  .daynav{grid-template-columns:1fr}
  .daycard.next{text-align:left;align-items:flex-start}
  .daynav .spacer{display:none}
}

/* =========================================================================
   Trip overview: partnership note, day cards with a stay strip, six-up gallery
   ========================================================================= */

/* ---- single-column prose, where there is no reel to sit beside it ---- */
.proseonly{max-width:720px}

/* ---- partnership disclosure ---- */
.disclose{
  background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);
  border-radius:var(--r-m);padding:13px 20px;
  font-size:.88rem;line-height:1.5;color:var(--ink-2);text-align:center;
}
.disclose a{font-weight:600;text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}
.disclose a:hover{border-bottom-color:var(--accent)}

/* ---- day-by-day cards ---- */
.tripgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,20px);align-items:start}
.tripcard{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-m);
  box-shadow:var(--sh-s);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.tripcard:hover{transform:translateY(-3px);box-shadow:var(--sh-l)}
.tripcard .card-main{display:flex;flex-direction:column;text-decoration:none;color:inherit;flex:1}
.tripcard .shot{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--surface-2)}
.tripcard .shot img{width:100%;height:100%;object-fit:cover;display:block}
.tripcard .badge{
  position:absolute;top:10px;left:10px;z-index:2;
  font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;
  background:rgba(14,21,18,.62);color:#fff;padding:5px 10px;border-radius:99px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.tripcard .meta{padding:16px 18px;display:flex;flex-direction:column;gap:5px;flex:1}
.tripcard .t{font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:1rem;line-height:1.26;letter-spacing:-.016em}
.tripcard .d{
  font-family:"Bricolage Grotesque",sans-serif;font-size:.82rem;color:var(--ink-3);
  font-variant-numeric:tabular-nums;letter-spacing:-.006em;
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
}
.tripcard .d .diff{color:var(--accent);font-weight:600}
.tripcard .d .bar{width:1px;height:11px;background:var(--line)}
.tripcard .note{font-size:.86rem;line-height:1.5;color:var(--ink-2);margin-top:4px}

/* the night's bed, hung off the bottom of the card */
.tripcard .stay{
  border-top:1px solid var(--line-soft);background:var(--surface-2);
  padding:11px 18px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-size:.83rem;line-height:1.4;
}
.tripcard .stay .moon{color:var(--accent);font-size:.9rem;line-height:1}
.tripcard .stay .k{font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.tripcard .stay a{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:600;letter-spacing:-.008em;
  text-decoration:none;color:var(--ink);
  border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  transition:border-color .16s var(--ease),color .16s var(--ease);
}
.tripcard .stay a:hover{color:var(--accent);border-bottom-color:var(--accent)}
/* the optional epilogue reads as an aside, not a ninth day */
.tripcard.bonus{border-style:dashed;border-color:var(--line);box-shadow:none;background:var(--paper-2)}
.tripcard.bonus:hover{box-shadow:var(--sh-s)}

@media (max-width:1000px){.tripgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){
  .tripgrid{grid-template-columns:1fr}
  .tripcard .shot{aspect-ratio:16/9}
}

/* ---- six-up trip gallery ---- */
.gallery.six{grid-template-columns:repeat(3,1fr)}
.gallery.six img{aspect-ratio:4/5}
@media (max-width:760px){.gallery.six{grid-template-columns:1fr 1fr}.gallery.six figure:nth-child(3){grid-column:auto}.gallery.six figure:nth-child(3) img{aspect-ratio:4/5}}

/* ---- utility pages: gateway cards on 404 ---- */
.daynav.three{grid-template-columns:repeat(3,1fr)}
a.daycard .n{font-size:.86rem;line-height:1.5;color:var(--ink-2);margin-top:2px}
@media (max-width:760px){.daynav.three{grid-template-columns:1fr}}

/* trip overview: the stat band sits just under the photo-strip header */
.tripstats{padding:clamp(22px,2.6vw,34px) 0 0}

/* four-day trip grid: one row of four on wide screens, never an orphan card */
.tripgrid.four{grid-template-columns:repeat(2,1fr)}
@media (min-width:1180px){.tripgrid.four{grid-template-columns:repeat(4,1fr)}}
@media (max-width:620px){.tripgrid.four{grid-template-columns:1fr}}

/* a trip that ends somewhere rather than staying the night */
.tripcard .stay .flag{color:var(--ink-3);font-size:.86rem;line-height:1}
.tripcard .stay .plain{font-size:.86rem;color:var(--ink-2)}

/* a stay with no photographs: the Toronto to Ottawa nights were never shot,
   so the card drops the carousel rather than rendering an empty one */
.staycard.noshot{
  grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2vw,24px);align-items:start;
  padding:clamp(22px,2.6vw,30px);max-width:760px;
}
.staycard.noshot .staybody{padding:0;justify-content:flex-start;gap:11px}
.staycard.noshot .staybody p{max-width:62ch}
@media (max-width:560px){.staycard.noshot{grid-template-columns:1fr}}
.staycard .moon{
  width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent);font-size:1.15rem;line-height:1;flex:0 0 auto;
}