/* ==========================================================================
   BikeDokan design system
   Route 3, "The Rickshaw": colour from Bangladeshi rickshaw art, with the
   table discipline of route 1 underneath it. Bold identity, quiet data.

   Hand written on purpose. There is no node or npm on this server, so there
   is no build step. Cache busting is filemtime() in the layout, never a hand
   bumped constant: a stale constant serves old CSS against fresh markup and
   looks exactly like broken CSS while the file on disk is correct.
   ========================================================================== */

/* ------------------------------------------------------------ tokens */
:root{
  --ground:#fdfbf6;
  --panel:#ffffff;
  --panel-2:#f6f2e9;
  --ink:#152a4a;
  --ink-2:#54617a;
  --ink-3:#7a869c;
  --rule:#e5ddcd;
  --rule-2:#d3c9b4;

  --accent:#c2185b;          /* magenta, price and primary action */
  --accent-strong:#a5124c;
  --accent-soft:#fce4ec;
  --gold:#f2a03d;            /* marigold, rules and highlights */
  --gold-soft:#fdf0dc;
  --link:#0a6f71;            /* peacock, darkened to pass contrast on paper */
  --link-soft:#e3f2f1;

  --good:#12695a;
  --warn:#9a5b00;

  --radius:6px;
  --radius-sm:4px;
  --shadow:0 1px 2px rgba(21,42,74,.05),0 10px 28px -16px rgba(21,42,74,.22);

  --display:"Bungee",Impact,"Arial Black",sans-serif;
  --body:"Hind Siliguri",system-ui,-apple-system,"Segoe UI",sans-serif;

  --measure:68ch;
  --gutter:20px;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#141b26;
    --panel:#1d2634;
    --panel-2:#232e3e;
    --ink:#f2ece0;
    --ink-2:#a8b4c6;
    --ink-3:#7f8b9d;
    --rule:#2f3a4a;
    --rule-2:#3c495c;

    --accent:#ff6f97;
    --accent-strong:#ff8fac;
    --accent-soft:#3a1d2a;
    --gold:#f5b458;
    --gold-soft:#332715;
    --link:#4fcfce;
    --link-soft:#123330;

    --good:#4fc7a8;
    --warn:#e0a44a;

    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -16px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --ground:#141b26;
  --panel:#1d2634;
  --panel-2:#232e3e;
  --ink:#f2ece0;
  --ink-2:#a8b4c6;
  --ink-3:#7f8b9d;
  --rule:#2f3a4a;
  --rule-2:#3c495c;
  --accent:#ff6f97;
  --accent-strong:#ff8fac;
  --accent-soft:#3a1d2a;
  --gold:#f5b458;
  --gold-soft:#332715;
  --link:#4fcfce;
  --link-soft:#123330;
  --good:#4fc7a8;
  --warn:#e0a44a;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -16px rgba(0,0,0,.7);
}

/* ------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-decoration-color:color-mix(in srgb,var(--link) 35%,transparent);text-underline-offset:2px}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
table{border-collapse:collapse;width:100%}
h1,h2,h3,h4{text-wrap:balance;margin:0}
p{margin:0}
button{font:inherit}

/* ------------------------------------------------------------ layout */
.wrap{max-width:1140px;margin:0 auto;padding:0 var(--gutter)}
.wrap--narrow{max-width:760px}
.stack>*+*{margin-top:var(--flow,18px)}
.cluster{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* ------------------------------------------------------------ header */
.masthead{
  background:var(--panel);
  border-bottom:2px solid var(--gold);
  position:sticky;top:0;z-index:40;
}
.masthead__bar{display:flex;align-items:center;gap:18px;height:62px}
.brandmark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex-shrink:0}
.brandmark__type{font-family:var(--display);font-size:19px;line-height:1;letter-spacing:-.005em}
.brandmark__type span{color:var(--accent)}
.mainnav{display:flex;gap:2px;margin-left:auto;align-items:center}
.mainnav a{
  color:var(--ink-2);text-decoration:none;font-weight:600;font-size:14.5px;
  padding:8px 11px;border-radius:var(--radius-sm);white-space:nowrap;
}
.mainnav a:hover{background:var(--panel-2);color:var(--ink)}
.mainnav a[aria-current="page"]{color:var(--accent);background:var(--accent-soft)}
.navtoggle{
  display:none;margin-left:auto;background:transparent;border:1px solid var(--rule-2);
  color:var(--ink);border-radius:var(--radius-sm);padding:7px 12px;font-weight:600;font-size:14px;cursor:pointer;
}
@media (max-width:860px){
  .navtoggle{display:block}
  .mainnav{
    display:none;position:absolute;left:0;right:0;top:62px;background:var(--panel);
    border-bottom:1px solid var(--rule);flex-direction:column;align-items:stretch;
    padding:8px var(--gutter) 14px;gap:1px;
  }
  .mainnav[data-open="true"]{display:flex}
  .mainnav a{padding:11px 8px;font-size:16px}
}

/* ------------------------------------------------------- breadcrumbs */
.crumbs{font-size:13px;color:var(--ink-3);padding:16px 0 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.crumbs li::after{content:"›";margin-left:6px;color:var(--rule-2)}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--link);text-decoration:underline}

/* ------------------------------------------------------- model hero */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:30px;align-items:start;padding:22px 0 0}
@media (max-width:860px){.hero{grid-template-columns:1fr;gap:22px}}
.hero__figure{
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);
}
.hero__figure img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--panel-2)}
.hero__figure figcaption{padding:9px 14px;font-size:12.5px;color:var(--ink-3);border-top:1px solid var(--rule)}
.hero__noimg{
  aspect-ratio:4/3;display:grid;place-items:center;background:var(--panel-2);
  color:var(--ink-3);font-size:14px;text-align:center;padding:20px;
}
h1.model__name{font-family:var(--display);font-size:clamp(23px,3.4vw,33px);line-height:1.18;letter-spacing:-.004em}
.model__standfirst{color:var(--ink-2);font-size:15.5px;margin-top:8px}

.pricebox{
  background:var(--accent);color:#fff;border-radius:var(--radius);
  padding:15px 18px;margin-top:18px;
}
.pricebox__label{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.pricebox__amount{display:block;font-family:var(--display);font-size:clamp(23px,3.6vw,30px);line-height:1.16;margin-top:4px}
.pricebox__note{display:block;font-size:12.5px;line-height:1.5;opacity:.9;margin-top:7px}
.pricebox--none{background:var(--panel-2);color:var(--ink-2);border:1px dashed var(--rule-2)}
.pricebox--none .pricebox__amount{font-size:19px;color:var(--ink)}

/* --------------------------------------------------------- stat strip */
.stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius);
  overflow:hidden;margin-top:18px;
}
@media (max-width:560px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{background:var(--panel);padding:12px 14px}
.stat__k{display:block;font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.stat__v{display:block;font-size:20px;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums}
.stat__v i{font-style:normal;font-size:.6em;font-weight:600;color:var(--link);margin-left:2px}

/* ------------------------------------------------------------ badges */
.badge{
  display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;
  padding:3px 10px;border-radius:999px;line-height:1.6;
}
.badge--abs{background:var(--link-soft);color:var(--link)}
.badge--upcoming{background:var(--gold-soft);color:var(--warn)}
.badge--electric{background:var(--link-soft);color:var(--link)}
.badge--discontinued{background:var(--panel-2);color:var(--ink-3)}

/* ------------------------------------------------------------ colours */
.colourchip{
  display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);
  background:var(--panel);border:1px solid var(--rule);border-radius:999px;padding:4px 13px 4px 5px;
}
.colourchip i{width:16px;height:16px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.14)}

/* ------------------------------------------------------------ buttons */
.btn{
  display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:600;
  text-decoration:none;border:0;border-radius:999px;padding:10px 20px;cursor:pointer;line-height:1.5;
}
.btn--primary{background:var(--link);color:#fff}
.btn--primary:hover{background:var(--good)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--gold)}
.btn--ghost:hover{background:var(--gold-soft)}

/* ------------------------------------------------- section + subnav */
.section{margin-top:44px}
.section__head{display:flex;align-items:baseline;gap:14px;border-bottom:2px solid var(--gold);padding-bottom:9px;margin-bottom:18px}
.section__head h2{font-family:var(--display);font-size:clamp(17px,2.4vw,22px);line-height:1.25}
.section__head .more{margin-left:auto;font-size:13.5px;font-weight:600;white-space:nowrap}

.subnav{display:flex;gap:4px;overflow-x:auto;margin-top:20px;padding-bottom:3px;-webkit-overflow-scrolling:touch}
.subnav a{
  white-space:nowrap;font-size:14px;font-weight:600;text-decoration:none;color:var(--ink-2);
  padding:7px 14px;border-radius:999px;border:1px solid var(--rule);background:var(--panel);
}
.subnav a:hover{border-color:var(--rule-2);color:var(--ink)}
.subnav a[aria-current="page"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}

/* ------------------------------------------------------- spec tables */
.specgroup{margin-top:26px}
.specgroup h3{
  font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);padding-bottom:7px;border-bottom:2px solid var(--ink);
}
.spectable{font-size:14.5px}
.spectable th,.spectable td{text-align:left;padding:9px 4px;border-bottom:1px solid var(--rule);vertical-align:top}
.spectable th{font-weight:500;color:var(--ink-2);width:46%}
.spectable td{font-weight:600;font-variant-numeric:tabular-nums}
.tablescroll{overflow-x:auto}

/* ------------------------------------------------------------- cards */
.grid{display:grid;gap:16px}
.grid--bikes{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.grid--brands{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.bikecard{
  display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--rule);
  border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;
}
.bikecard:hover{border-color:var(--gold);box-shadow:var(--shadow)}
.bikecard img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--panel-2)}
.bikecard__noimg{aspect-ratio:4/3;background:var(--panel-2)}
.bikecard__body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.bikecard__brand{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.bikecard__name{font-size:15.5px;font-weight:700;line-height:1.3}
.bikecard__meta{font-size:12.5px;color:var(--ink-2);margin-top:auto;padding-top:6px}
.bikecard__price{font-weight:700;color:var(--accent);font-size:15px;font-variant-numeric:tabular-nums}
.bikecard__price--none{color:var(--ink-3);font-weight:600;font-size:13.5px}

.brandcard{
  display:flex;flex-direction:column;justify-content:center;gap:2px;text-align:center;
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius);
  padding:16px 10px;text-decoration:none;color:inherit;
}
.brandcard:hover{border-color:var(--gold)}
.brandcard b{font-size:15px}
.brandcard span{font-size:12px;color:var(--ink-3)}

/* -------------------------------------------------------------- prose */
.prose{max-width:var(--measure);font-size:16.5px;line-height:1.72}
.prose>*+*{margin-top:16px}
.prose h2{font-family:var(--display);font-size:21px;line-height:1.3;margin-top:30px}
.prose h3{font-size:18px;font-weight:700;margin-top:24px}
.prose ul,.prose ol{padding-left:22px}
.prose li+li{margin-top:6px}
.prose img{border-radius:var(--radius);margin:22px 0}
.prose table{font-size:14.5px;margin:20px 0}
.prose th,.prose td{border:1px solid var(--rule);padding:8px 10px;text-align:left}
.prose blockquote{border-left:3px solid var(--gold);padding-left:16px;color:var(--ink-2);font-style:italic}

/* ------------------------------------------------------------- pagelead */
.pagelead{padding:26px 0 0}
.pagelead h1{font-family:var(--display);font-size:clamp(24px,4vw,36px);line-height:1.16}
.pagelead p{color:var(--ink-2);font-size:16.5px;margin-top:10px;max-width:var(--measure)}

/* --------------------------------------------------------- comparison */
.comparetable{font-size:14.5px;min-width:520px}
.comparetable th,.comparetable td{padding:10px 12px;border-bottom:1px solid var(--rule);text-align:left}
.comparetable thead th{font-family:var(--display);font-size:14px;border-bottom:2px solid var(--gold);vertical-align:bottom}
.comparetable tbody th{font-weight:500;color:var(--ink-2)}
.comparetable td{font-weight:600;font-variant-numeric:tabular-nums}
.comparetable .better{color:var(--good)}

/* ------------------------------------------------------------- footer */
.sitefoot{margin-top:64px;background:var(--panel);border-top:2px solid var(--gold);padding:32px 0 40px}
.sitefoot__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:26px}
.sitefoot h4{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.sitefoot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.sitefoot a{font-size:14px;color:var(--ink-2);text-decoration:none}
.sitefoot a:hover{color:var(--link);text-decoration:underline}
.sitefoot__legal{margin-top:26px;padding-top:18px;border-top:1px solid var(--rule);font-size:13px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between}

/* -------------------------------------------------------- staging flag */
.stagingflag{
  background:var(--warn);color:#fff;font-size:12.5px;font-weight:600;
  text-align:center;padding:5px 12px;
}

/* -------------------------------------------------------------- misc */
.empty{
  background:var(--panel);border:1px dashed var(--rule-2);border-radius:var(--radius);
  padding:26px;text-align:center;color:var(--ink-2);font-size:15px;
}
.pagination{display:flex;gap:8px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.pagination a,.pagination span{
  padding:7px 13px;border-radius:var(--radius-sm);border:1px solid var(--rule);
  text-decoration:none;font-size:14px;font-weight:600;color:var(--ink-2);background:var(--panel);
}
.pagination [aria-current="page"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ------------------------------------------------------- theme button */
.mainnav__theme{
  background:transparent;border:1px solid var(--rule-2);color:var(--ink-2);
  border-radius:999px;padding:6px 13px;font-size:13px;font-weight:600;cursor:pointer;
  margin-left:6px;
}
.mainnav__theme:hover{border-color:var(--gold);color:var(--ink)}
@media (max-width:860px){.mainnav__theme{margin:8px 0 0;align-self:flex-start}}