/* =============================================================================
   MotorcycleRidePlanner — HERITAGE
   The American motorcycle idiom riders actually expect: full-bleed photography,
   heavy uppercase gothic, square corners, black / white / one orange.
   Type is Libre Franklin — the open revival of Franklin Gothic, which is the
   face this whole category is set in.
   Not affiliated with, endorsed by, or imitating any motorcycle manufacturer.
   ========================================================================== */

:root{
  --black:#0A0A0A;
  --ink:#1A1A1A;
  --steel:#5C5C5C;
  --smoke:#8C8C8C;
  --rule:#DCDCDC;
  --stone:#F2F2F0;
  --white:#FFFFFF;
  --orange:#E35205;      /* signal orange — the single accent */
  --orange-dk:#B83F02;

  --gothic:"Libre Franklin","Franklin Gothic Medium","Arial Narrow",
           system-ui,-apple-system,sans-serif;
  --page:1320px;
  --gut:26px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--gothic);font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

.shell{max-width:var(--page);margin:0 auto;padding:0 var(--gut)}

/* ------------------------------ utility bar ------------------------------ */
.util{background:var(--black);color:#CFCFCF}
.util .shell{display:flex;justify-content:flex-end;gap:26px;align-items:center;height:36px}
.util a{font-size:11.5px;font-weight:600;letter-spacing:.055em;text-transform:uppercase}
.util a:hover{color:var(--white)}

/* -------------------------------- masthead ------------------------------- */
.mast{background:var(--white);border-bottom:1px solid var(--rule)}
.mast .shell{display:flex;align-items:center;gap:38px;height:70px}
.mark{display:flex;align-items:center;gap:11px;flex:none}
.mark-badge{
  width:40px;height:40px;background:var(--black);color:var(--orange);
  display:grid;place-items:center;font-weight:900;font-size:15px;letter-spacing:-.04em;
}
.mark b{
  font-weight:800;font-size:15.5px;letter-spacing:-.005em;text-transform:uppercase;
  line-height:1.05;color:var(--black);
}
.mark b i{display:block;font-style:normal;font-weight:600;font-size:9.5px;
  letter-spacing:.16em;color:var(--steel)}
.mast nav{display:flex;gap:28px;margin-left:6px}
.mast nav a{
  font-size:13px;font-weight:800;letter-spacing:.045em;text-transform:uppercase;
  color:var(--black);padding:4px 0;border-bottom:3px solid transparent;
}
.mast nav a:hover{border-bottom-color:var(--orange)}
.mast nav a.on{border-bottom-color:var(--orange)}
.mast form{margin-left:auto;display:flex;align-items:center}
.mast input{
  font-family:var(--gothic);font-size:13px;border:1px solid var(--rule);
  padding:9px 13px;min-width:230px;background:var(--white);color:var(--ink);
}
.mast input::placeholder{color:var(--smoke)}

/* ------------------------------ promo strip ------------------------------ */
.promo{background:var(--orange);color:var(--white)}
.promo .shell{display:flex;align-items:center;justify-content:center;gap:10px;height:42px;text-align:center}
.promo p{margin:0;font-size:13px;font-weight:700;letter-spacing:.02em}
.promo a{text-decoration:underline;font-weight:800}

/* --------------------------------- hero ---------------------------------- */
.hero{position:relative;background:var(--black);overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 58%}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.55) 38%,rgba(0,0,0,.08) 72%,rgba(0,0,0,.25) 100%);
}
.hero-body{position:relative;z-index:2;padding:112px 0 118px;color:var(--white)}
.hero-eyebrow{
  font-size:13px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  margin:0 0 16px;color:var(--white);
}
.hero h1{
  font-weight:900;font-size:clamp(44px,7.2vw,92px);line-height:.92;letter-spacing:-.022em;
  text-transform:uppercase;margin:0 0 20px;max-width:16ch;
}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero p.sub{
  font-size:17px;line-height:1.5;max-width:46ch;margin:0 0 30px;color:#E6E6E6;font-weight:400;
}
.btn{
  display:inline-flex;align-items:center;gap:13px;background:var(--white);color:var(--black);
  font-size:14px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:16px 24px;border:0;
}
.btn:hover{background:var(--orange);color:var(--white)}
.btn.ghost{background:transparent;color:var(--white);box-shadow:inset 0 0 0 2px var(--white)}
.btn.ghost:hover{background:var(--white);color:var(--black)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}
.hero-credit{
  position:absolute;right:14px;bottom:10px;z-index:3;font-size:10.5px;color:rgba(255,255,255,.62);
}
.hero-credit a{text-decoration:underline}

/* ------------------------------- filter row ------------------------------ */
.filters{border-bottom:1px solid var(--rule);background:var(--white)}
.filters .shell{display:flex;gap:10px;overflow-x:auto;padding-top:18px;padding-bottom:18px}
.chip{
  flex:none;font-size:12.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:11px 18px;border:1px solid var(--rule);background:var(--white);color:var(--black);
  white-space:nowrap;cursor:pointer;font-family:var(--gothic);
}
.chip:hover{border-color:var(--black)}
.chip.on{background:var(--black);color:var(--white);border-color:var(--black)}

/* -------------------------------- section -------------------------------- */
.sec{padding:62px 0 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;margin-bottom:26px}
.sec-head h2{
  font-weight:900;font-size:clamp(26px,3.4vw,40px);line-height:1;letter-spacing:-.02em;
  text-transform:uppercase;margin:0;
}
.sec-head p{margin:0;font-size:15px;color:var(--steel);max-width:44ch;line-height:1.5}
.sec-head a{font-size:13px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  border-bottom:3px solid var(--orange);padding-bottom:3px;white-space:nowrap}

/* --------------------------------- cards --------------------------------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.rcard{background:var(--white);display:flex;flex-direction:column}
.rcard-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--stone)}
.rcard-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.rcard:hover .rcard-media img{transform:scale(1.04)}
.rcard-tag{
  position:absolute;left:0;top:0;background:var(--orange);color:var(--white);
  font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:7px 12px;
}
.rcard-body{padding:18px 0 0;display:flex;flex-direction:column;flex:1}
.rcard h3{
  font-weight:900;font-size:21px;line-height:1.08;letter-spacing:-.012em;text-transform:uppercase;
  margin:0 0 7px;
}
.rcard .where{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--steel);margin:0 0 11px}
.rcard p{font-size:14.5px;line-height:1.55;color:var(--steel);margin:0 0 16px;flex:1}
.rspecs{display:flex;gap:0;border-top:2px solid var(--black)}
.rspecs div{flex:1;padding:12px 10px 12px 0}
.rspecs b{display:block;font-weight:900;font-size:19px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rspecs span{display:block;margin-top:5px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}

/* ------------------------------- stat band ------------------------------- */
.band{background:var(--black);color:var(--white);margin-top:66px;padding:54px 0 58px}
.band-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.band-cell{padding:0 26px;border-left:1px solid #2A2A2A}
.band-cell:first-child{border-left:none;padding-left:0}
.band-cell b{display:block;font-weight:900;font-size:clamp(34px,4.4vw,54px);line-height:.95;
  letter-spacing:-.03em;color:var(--orange);font-variant-numeric:tabular-nums}
.band-cell span{display:block;margin-top:12px;font-size:11.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:#B5B5B5}

/* --------------------------------- table --------------------------------- */
.tbl-head{background:var(--black);color:var(--white);padding:44px 0 34px}
.tbl-head h1{font-weight:900;font-size:clamp(34px,5vw,58px);line-height:.95;letter-spacing:-.025em;
  text-transform:uppercase;margin:0 0 12px}
.tbl-head p{margin:0;font-size:16px;color:#C6C6C6;max-width:56ch;line-height:1.5}
.ctrls{border-bottom:1px solid var(--rule);background:var(--white);position:sticky;top:0;z-index:40}
.ctrls .shell{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
.ctrls select,.ctrls input{
  font-family:var(--gothic);font-size:13px;font-weight:600;border:1px solid var(--rule);
  padding:10px 12px;background:var(--white);color:var(--ink);
}
.ctrls input{min-width:230px}
.ctrls .tally{margin-left:auto;font-size:12px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--steel);font-variant-numeric:tabular-nums}
table.roads{width:100%;border-collapse:collapse}
table.roads th{
  text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--steel);padding:16px 16px 12px 0;border-bottom:2px solid var(--black);white-space:nowrap;
}
table.roads th.num,table.roads td.num{text-align:right;font-variant-numeric:tabular-nums}
table.roads td{padding:16px 16px 16px 0;border-bottom:1px solid var(--rule);vertical-align:middle}
table.roads tbody tr:hover{background:var(--stone)}
.road-nm{font-weight:900;font-size:16px;text-transform:uppercase;letter-spacing:-.01em;line-height:1.12}
.road-where{display:block;font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--steel);margin-top:4px}
.tag{
  display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  background:var(--black);color:var(--white);padding:5px 9px;white-space:nowrap;
}
td.num b{font-weight:900;font-size:16px}
.bar{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-variant-numeric:tabular-nums}
.bar i{display:block;width:46px;height:6px;background:var(--rule);position:relative}
.bar i u{position:absolute;inset:0 auto 0 0;background:var(--orange);display:block;text-decoration:none}
.none{padding:52px 0;text-align:center;color:var(--steel);font-weight:700;text-transform:uppercase;letter-spacing:.08em}

/* -------------------------------- credits -------------------------------- */
.creds{list-style:none;margin:0;padding:0}
.creds li{display:grid;grid-template-columns:130px 1fr;gap:20px;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--rule)}
.creds img{width:130px;height:84px;object-fit:cover}
.creds b{display:block;font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:-.005em}
.creds span{display:block;font-size:13px;color:var(--steel);margin-top:4px;line-height:1.5}
.creds a{text-decoration:underline}

/* --------------------------------- footer -------------------------------- */
.foot{background:var(--black);color:#9A9A9A;padding:46px 0 54px;margin-top:0}
.foot .shell{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:flex-start}
.foot .mark b{color:var(--white)}
.foot nav{display:flex;gap:24px;flex-wrap:wrap}
.foot a{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#C9C9C9}
.foot a:hover{color:var(--orange)}
.foot small{display:block;width:100%;font-size:11px;line-height:1.6;color:#6E6E6E;margin-top:8px}

/* ------------------------------- responsive ------------------------------ */
@media (max-width:1040px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .band-grid{grid-template-columns:repeat(2,1fr);gap:30px 0}
  .band-cell:nth-child(3){border-left:none;padding-left:0}
  .mast nav{display:none}
}
@media (max-width:680px){
  .grid{grid-template-columns:1fr}
  .band-grid{grid-template-columns:1fr}
  .band-cell{border-left:none;padding-left:0}
  .hero-body{padding:74px 0 78px}
  .util .shell{gap:16px;justify-content:center}
  .mast form{display:none}
  .sec-head{flex-direction:column;align-items:flex-start;gap:12px}
  table.roads thead{display:none}
  table.roads,table.roads tbody,table.roads tr,table.roads td{display:block;width:100%}
  table.roads tr{padding:16px 0;border-bottom:1px solid var(--rule)}
  table.roads td{border:none;padding:3px 0;text-align:left!important}
  table.roads td[data-l]::before{content:attr(data-l) " ";font-size:10px;font-weight:800;
    letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
  .ctrls .tally{margin-left:0;width:100%}
  .creds li{grid-template-columns:92px 1fr}
  .creds img{width:92px;height:62px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ------------------------------ road map -------------------------------- */
.mapsec{padding:62px 0 0}
.mapwrap{position:relative;margin-top:26px;background:var(--black)}
#roadmap{width:100%;height:clamp(380px,54vh,620px)}
.maplegend{
  position:absolute;left:0;bottom:0;z-index:2;display:flex;align-items:center;gap:10px;
  background:var(--black);color:var(--white);padding:12px 18px;
  font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
}
.maplegend .dot{width:11px;height:11px;background:var(--orange);display:block;border-radius:50%}
.mapfallback{
  padding:60px 24px;text-align:center;color:#B5B5B5;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;font-size:13px;margin:0;
}
.mapfallback a{color:var(--orange);text-decoration:underline}

/* popup, restyled out of maplibre's default rounded white bubble */
.maplibregl-popup-content{
  background:var(--black);color:var(--white);border-radius:0;padding:16px 18px 18px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.maplibregl-popup-tip{display:none}
.maplibregl-popup-close-button{color:#9A9A9A;font-size:19px;padding:2px 8px}
.maplibregl-popup-close-button:hover{background:transparent;color:var(--orange)}
.mappop h4{
  font-family:var(--gothic);font-weight:900;font-size:16px;line-height:1.12;margin:0 0 5px;
  text-transform:uppercase;letter-spacing:-.01em;color:var(--white);
}
.mappop-where{
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#9A9A9A;margin:0 0 13px;
}
.mappop-figs{display:flex;gap:18px;border-top:2px solid var(--orange);padding-top:11px;margin-bottom:13px}
.mappop-figs b{display:block;font-weight:900;font-size:16px;line-height:1;font-variant-numeric:tabular-nums}
.mappop-figs span{display:block;margin-top:4px;font-size:9px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:#9A9A9A}
.mappop-go{
  font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--orange);border-bottom:2px solid var(--orange);padding-bottom:2px;
}

/* =============================================================================
   DISCOVER — the signed-off split-screen concept, in Heritage.
   Feed left, live map right, both alive at once. Real SVG icons, no emoji.
   The map container is EXPLICITLY bounded: the old build let it inherit auto
   height and it grew to 43,898px, past the WebGL canvas cap, rendering blank.
   ========================================================================== */
.dsc{display:grid;grid-template-columns:minmax(360px,440px) 1fr;
     height:calc(100vh - 148px);min-height:520px;border-top:1px solid var(--rule)}
.dsc-feed{display:flex;flex-direction:column;border-right:1px solid var(--rule);background:var(--white);
     min-width:0;min-height:0}   /* min-height:0 — grid items default to min-height:auto, which
                                    lets 252 cards push the row (and the map) to 32,853px. This
                                    single declaration is the whole fix, and it is the same class
                                    of bug that made the old cockpit map 43,898px tall. */
.dsc-tools{padding:14px 18px;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:10px;flex:none}
.dsc-tools input,.dsc-tools select{
  font-family:var(--gothic);font-size:13px;font-weight:600;border:1px solid var(--rule);
  padding:10px 12px;background:var(--white);color:var(--ink);width:100%}
.dsc-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.dsc-chip{
  flex:none;display:inline-flex;align-items:center;gap:7px;font-family:var(--gothic);
  font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:9px 13px;border:1px solid var(--rule);background:var(--white);color:var(--black);
  white-space:nowrap;cursor:pointer}
.dsc-chip svg{width:15px;height:15px;flex:none}
.dsc-chip:hover{border-color:var(--black)}
.dsc-chip[aria-pressed="true"]{background:var(--black);color:var(--white);border-color:var(--black)}
.dsc-count{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);
  padding:0 18px 12px;flex:none;font-variant-numeric:tabular-nums}
/* the feed scrolls INSIDE itself — it must never grow the page */
.dsc-list{flex:1;overflow-y:auto;overscroll-behavior:contain}
.dsc-card{display:block;width:100%;text-align:left;background:var(--white);border:0;
  border-bottom:1px solid var(--rule);padding:16px 18px;cursor:pointer;font-family:var(--gothic)}
.dsc-card:hover{background:var(--stone)}
.dsc-card[aria-current="true"]{background:var(--stone);box-shadow:inset 4px 0 0 var(--orange)}
.dsc-card h3{font-weight:900;font-size:15.5px;line-height:1.14;letter-spacing:-.012em;
  text-transform:uppercase;margin:0 0 4px}
.dsc-where{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);margin:0 0 11px}
.dsc-figs{display:flex;gap:18px;border-top:2px solid var(--black);padding-top:9px}
.dsc-figs b{display:block;font-weight:900;font-size:15px;line-height:1;font-variant-numeric:tabular-nums}
.dsc-figs span{display:block;margin-top:4px;font-size:9px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--steel)}
/* Ad slot: BETWEEN cards, never above the first. Mirrors the signed-off board. */
.dsc-ad{border-bottom:1px solid var(--rule);padding:14px 18px;background:var(--stone)}
.dsc-ad span{display:block;font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke);margin-bottom:6px}
.dsc-ad p{margin:0;font-size:12.5px;color:var(--steel);line-height:1.45}
.dsc-map{position:relative;min-width:0;min-height:0;background:var(--black)}
.dsc-map #dscmap{position:absolute;inset:0}   /* bounded by the grid row, never auto */
.dsc-empty{padding:44px 18px;text-align:center;color:var(--steel);font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;font-size:12px}

@media (max-width:900px){
  .dsc{grid-template-columns:1fr;height:auto}
  .dsc-map{height:44vh;min-height:280px;order:-1}      /* map on top, always visible */
  .dsc-feed{border-right:0}
  .dsc-list{max-height:none;overflow:visible}
}

/* 3D terrain toggle — sits on the map, Heritage square, one accent */
.dsc-3d{
  position:absolute;left:14px;top:14px;z-index:3;font-family:var(--gothic);
  font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  padding:10px 14px;border:0;background:var(--white);color:var(--black);cursor:pointer}
.dsc-3d:hover{background:var(--orange);color:var(--white)}
.dsc-3d[aria-pressed="true"]{background:var(--orange);color:var(--white)}