/* ==========================================================================
   Happy Rides — happyrides.net

   Editorial / printed-matter treatment: paper ground, ink text, brass
   accents, rules instead of boxes. Deliberately no gradients, no glows,
   no drop shadows and no rounded "pill" shapes anywhere.
   ========================================================================== */

@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/instrument-serif-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/outfit-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Noto Serif Devanagari is injected from index.html the first time Hindi is
   chosen, so an English visit never downloads it. */

:root {
  --paper: #f3efe6;
  --paper-2: #ece6d9;
  --ink: #17150f;
  --ink-2: #413b31;
  --ink-3: #6d6559;
  --brass: #8a6a1e;
  --rule: rgba(23, 21, 15, 0.18);
  --rule-2: rgba(23, 21, 15, 0.42);
  --wa: #0f7556;

  --serif: "Instrument Serif", "Noto Serif Devanagari", Georgia,
    "Times New Roman", serif;
  --sans: "Outfit", "Noto Serif Devanagari", system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;

  --maxw: 1140px;
  --gut: 22px;
}

/* In Hindi the Devanagari face leads; its unicode-range means Latin
   characters still fall through to the faces above. */
html[lang="hi"] {
  --serif: "Noto Serif Devanagari", "Instrument Serif", Georgia, serif;
  --sans: "Noto Serif Devanagari", "Outfit", system-ui, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--paper);
  /* a 64px grain tile, barely there, to stop the ground reading as flat CSS */
  background-image: url("/assets/grain.png");
  background-repeat: repeat;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--ink); text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
a:hover { color: var(--brass); text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 12px;
  top: 12px;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
}

/* small letterspaced labels do a lot of the editorial work here */
.label,
.kicker,
.panel-head,
.utility,
.plate-tag,
.lang,
.num {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Devanagari has no case and the tracking makes it unreadable */
html[lang="hi"] .label,
html[lang="hi"] .kicker,
html[lang="hi"] .panel-head,
html[lang="hi"] .utility,
html[lang="hi"] .plate-tag,
html[lang="hi"] .foot-col .label {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 13px;
}

/* ---------------------------------------------------------- utility bar */

.utility {
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
}

.utility .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 9px;
}

.utility-where { margin: 0; }
.utility .dot { margin-inline: 8px; color: var(--rule-2); }

.lang { display: flex; align-items: center; gap: 10px; flex: none; }

.lang-btn {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  background: none;
  border: 0;
  padding: 7px 3px;
  font-size: 12.5px;
  color: var(--ink-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.lang-btn:hover { color: var(--brass); }
.lang-btn.is-on {
  color: var(--ink);
  border-bottom-color: var(--brass);
}
.lang-sep {
  width: 1px;
  height: 13px;
  background: var(--rule-2);
}

/* ----------------------------------------------------------- nameplate */

.plate {
  border-bottom: 3px solid var(--ink);
}

.plate .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 18px;
}

.plate-mark {
  width: 56px;
  height: 56px;
  flex: none;
  /* the logo is gold-on-black: let it sit as a printed block, not a circle */
  background: #0b0a08;
}

.plate-name { margin: 0; margin-right: auto; }

.plate-brand {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(30px, 5.4vw, 40px);
  line-height: 1;
  letter-spacing: 0.005em;
}

.plate-tag {
  margin: 5px 0 0;
  color: var(--ink-3);
}

.plate-call { margin: 0; text-align: right; }
.plate-call .label { display: block; color: var(--ink-3); margin-bottom: 2px; }
.plate-call a {
  font-family: var(--serif);
  font-size: 23px;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- lede */

/* grid children need this or a long word can blow the column out */
.lede-main { min-width: 0; }

.lede { padding-block: clamp(34px, 6vw, 62px); }

.lede-grid { display: grid; gap: clamp(28px, 4vw, 48px); }

.kicker { margin: 0 0 14px; color: var(--brass); }

.lede h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 7.4vw, 74px);
  line-height: 1.04;
  letter-spacing: -0.012em;
  max-width: 16ch;
}

.lede-text {
  margin: 20px 0 0;
  font-size: clamp(17px, 2.3vw, 19.5px);
  color: var(--ink-2);
  max-width: 48ch;
}

.fineprint {
  margin: 18px 0 0;
  font-size: 14.5px;
  color: var(--ink-3);
}

/* ------------------------------------------------------------- buttons */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  border: 1px solid transparent;
  border-radius: 2px;             /* square: pills read as template */
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease,
    border-color 0.15s ease;
}

.btn svg { width: 18px; height: 18px; flex: none; }

.btn-ink {
  background: var(--ink);
  color: var(--paper);
}
.btn-ink:hover { background: var(--brass); color: var(--paper); }

.btn-wa {
  background: var(--wa);
  color: #fff;
}
.btn-wa:hover { background: #0b5f45; color: #fff; }

/* ----------------------------------------------------- at-a-glance panel */

.panel {
  border-top: 2px solid var(--ink);
  padding-top: 14px;
  align-self: start;
}

.panel-head { margin: 0 0 12px; color: var(--brass); }

.panel dl { margin: 0; }

.panel dt {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 14px;
}
html[lang="hi"] .panel dt { text-transform: none; letter-spacing: 0.02em; font-size: 13px; }

.panel dd {
  margin: 3px 0 0;
  font-size: 16px;
  line-height: 1.45;
}
.panel dd a { text-decoration: none; font-variant-numeric: tabular-nums; }
.panel dd a:hover { text-decoration: underline; }

/* -------------------------------------------------------------- bands */

.band { padding-block: clamp(38px, 6vw, 66px); border-top: 1px solid var(--rule); }
.band-alt { background: var(--paper-2); }

.sec-head {
  margin: 0 0 26px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(27px, 4vw, 38px);
  line-height: 1.1;
}

.num {
  margin: 0 0 8px;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
}

/* two-column "what we rent" */
.cols { display: grid; gap: 28px; }

.col {
  border-top: 1px solid var(--rule-2);
  padding-top: 14px;
}
.col h3 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.15;
}
.col p { margin: 0; color: var(--ink-2); max-width: 42ch; }

/* plain ruled list — the old icon-card grid was the most templated block */
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }

.rows li {
  padding: 15px 0 15px 34px;
  border-bottom: 1px solid var(--rule);
  position: relative;
  max-width: 62ch;
}
.rows li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 25px;
  width: 16px;
  height: 1px;
  background: var(--brass);
}

/* numbered steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }

.steps li {
  border-top: 1px solid var(--rule-2);
  padding-top: 14px;
}
.steps h3 {
  margin: 0 0 7px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.15;
}
.steps p { margin: 0; color: var(--ink-2); max-width: 40ch; }

/* --------------------------------------------------- motorcycle band */

/* A strip of road between two sections. The bike crosses it right to left
   as the band scrolls up through the viewport. Because the band occupies
   its own space in the flow, the bike can never cover page content.
   --x / --spin are set from JS in index.html. */
.roadband {
  position: relative;
  overflow: hidden;
  height: 108px;
  color: var(--ink);
  border-top: 1px solid var(--rule);
}

.roadband-road {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 28px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--rule-2) 12%,
    var(--rule-2) 88%,
    transparent
  );
}

.roadband-bike {
  position: absolute;
  left: 0;
  bottom: 29px;                 /* road bottom + road height */
  width: 128px;
  height: auto;
  /* default keeps it parked on the road when JS is off or motion is reduced */
  transform: translate3d(var(--x, 12vw), 0, 0);
  will-change: transform;
}

/* spokes turn in step with the distance travelled */
.whl {
  transform-box: view-box;
  transform: rotate(calc(var(--spin, 0) * -1deg));
}
.whl-f { transform-origin: 34px 66px; }
.whl-r { transform-origin: 126px 66px; }

.roadband-trail { opacity: 0; transition: opacity 0.25s ease; }
.roadband.is-riding .roadband-trail { opacity: 0.45; }

@media (prefers-reduced-motion: reduce) {
  .roadband-trail { display: none; }
}

/* --------------------------------------------------------------- visit */

.visit { display: grid; gap: 30px; }

.letterhead {
  font-style: normal;
  border-left: 3px solid var(--ink);
  padding-left: 18px;
}
.letterhead .label { display: block; color: var(--brass); margin-bottom: 9px; }
.letterhead .lines {
  font-family: var(--serif);
  font-size: clamp(19px, 2.8vw, 24px);
  line-height: 1.5;
}

.visit-meta dl { margin: 0 0 20px; }
.visit-meta dt {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 13px;
}
html[lang="hi"] .visit-meta dt { text-transform: none; letter-spacing: 0.02em; font-size: 13px; }
.visit-meta dd { margin: 2px 0 0; font-size: 16.5px; font-variant-numeric: tabular-nums; }
.visit-meta dd a { text-decoration: none; }
.visit-meta dd a:hover { text-decoration: underline; }

.visit-links { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0; }

/* text links with a rule, instead of yet another button */
.arrow {
  text-decoration: none;
  border-bottom: 1px solid var(--rule-2);
  padding-bottom: 3px;
  font-weight: 500;
}
.arrow::after { content: " \2192"; color: var(--brass); }
.arrow:hover { border-bottom-color: var(--brass); }

/* -------------------------------------------------------------- footer */

.foot {
  border-top: 3px solid var(--ink);
  padding-top: 34px;
  padding-bottom: 28px;
  font-size: 15px;
}

.foot-grid { display: grid; gap: 26px; }

.foot-brand {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 27px;
  line-height: 1;
}
.foot-about { margin: 0; color: var(--ink-2); max-width: 44ch; }

.foot-col .label { display: block; color: var(--brass); margin-bottom: 10px; }
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li { padding-block: 5px; color: var(--ink-2); }
.foot-col a { text-decoration: none; }
.foot-col a:hover { text-decoration: underline; }

.foot-rule {
  margin-top: 30px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 20px;
  color: var(--ink-3);
  font-size: 13.5px;
}
.foot-rule p { margin: 0; }

/* ----------------------------------------------------- phone call bar */

.callbar { display: none; }

/* --------------------------------------------------------- responsive */

@media (min-width: 760px) {
  .lede-grid { grid-template-columns: minmax(0, 1.55fr) minmax(220px, 0.85fr); }
  .cols { grid-template-columns: 1fr 1fr; gap: 36px; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .visit { grid-template-columns: 1.1fr 0.9fr; gap: 44px; }
  .foot-grid { grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
}

@media (max-width: 759px) {
  /* ---- phone ---------------------------------------------------------
     Mid-range Android on mobile data is the main audience: keep the call
     buttons close to the first screen and the paint work cheap. */

  body { padding-bottom: 76px; }   /* clears the fixed call bar */

  /* English wraps to three lines here; the hours repeat in the panel
     immediately below, so the bar keeps only the place and the switch */
  .utility .wrap { padding-block: 4px; }
  .utility-where .dot,
  .utility-where span:last-child { display: none; }

  .plate .wrap { gap: 13px; padding-block: 14px; }
  .plate-mark { width: 46px; height: 46px; }
  .plate-call { display: none; }   /* the number is in the fixed bar below */

  .lede { padding-block: 26px 34px; }
  .lede h1 { max-width: none; }
  .actions .btn { width: 100%; }

  .panel { border-top-width: 1px; }

  .letterhead { border-left-width: 2px; padding-left: 14px; }

  .roadband { height: 78px; }
  .roadband-road { bottom: 20px; }
  .roadband-bike { bottom: 21px; width: 100px; }

  .foot-col li { padding-block: 8px; }   /* honest tap targets */

  .callbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
    background: var(--paper);
    border-top: 1px solid var(--ink);
  }
  .callbar .btn { width: 100%; padding-block: 12px; font-size: 15.5px; }
}

@media (max-width: 380px) {
  .lede h1 { font-size: 36px; }
  .roadband-bike { width: 92px; }
}