/* ============================================================
   Kodo Adventure — faded-grandeur overlanding
   ============================================================ */

:root{
  /* palette ----------------------------------------------- */
  --ink:      #2a2219;   /* espresso brown-black              */
  --ink-2:    #241e18;   /* deep dark section                */
  --paper:    #f1eadf;   /* warm parchment                   */
  --paper-2:  #f8f3ea;   /* lighter card                     */
  --rose:     #c29a8e;   /* dusty rose pastel                */
  --sage:     #8e9379;   /* faded sage / olive               */
  --rust:     #a96b45;   /* rusty terracotta — accent        */
  --rust-dk:  #8c5536;
  --brass:    #9a7b40;   /* aged brass — fine lines          */
  --stone:    #7c6f5f;   /* muted secondary text             */
  --stone-lt: #a99c87;   /* muted on dark                    */
  --rule:     #dad0c0;   /* hairline on paper                */
  --rule-dk:  #4a4034;   /* hairline on ink                  */

  /* type -------------------------------------------------- */
  --display: "Fraunces", Georgia, serif;
  --sans:    "Jost", system-ui, sans-serif;

  /* metrics ----------------------------------------------- */
  --gutter: clamp(22px, 5.5vw, 72px);
  --maxw:   1180px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:clamp(16px,1.05vw,17.5px);
  font-weight:300;line-height:1.7;letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:300;line-height:1.06;letter-spacing:-0.015em}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:780px}

/* eyebrow / labels ---------------------------------------- */
.eyebrow{
  font-family:var(--sans);font-weight:400;font-size:.72rem;
  letter-spacing:.32em;text-transform:uppercase;color:var(--rust);
  margin:0 0 1.4rem;
}
.eyebrow--light{color:var(--rose)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--rule);
}
.nav__inner{max-width:var(--maxw);margin-inline:auto;padding:1rem var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:inline-flex;align-items:baseline;gap:.55rem;text-decoration:none;color:var(--ink)}
.brand b{font-family:var(--display);font-weight:400;font-size:1.32rem;letter-spacing:-0.01em}
.brand span{font-family:var(--sans);font-weight:400;font-size:.62rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--stone)}
.nav__links{display:flex;gap:1.9rem;align-items:center}
.nav__links a{font-family:var(--sans);font-weight:400;font-size:.74rem;letter-spacing:.18em;
  text-transform:uppercase;text-decoration:none;color:var(--stone);transition:color .2s}
.nav__links a:hover{color:var(--rust)}

/* ============================================================
   ROUTE LINE — section divider signature
   ============================================================ */
.route{display:flex;align-items:center;gap:.9rem;color:var(--stone)}
.route__seg{flex:1;height:1px;background:repeating-linear-gradient(90deg,var(--brass) 0 7px,transparent 7px 13px);opacity:.8}
.route--ink .route__seg{background:repeating-linear-gradient(90deg,var(--stone-lt) 0 7px,transparent 7px 13px);opacity:.5}
.route__dot{width:7px;height:7px;border-radius:50%;background:var(--rust);flex:0 0 auto}
.route__pin{flex:0 0 auto;display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--sans);font-weight:400;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase}
.route__pin::before{content:"";width:9px;height:9px;border:1.5px solid var(--rust);transform:rotate(45deg)}
.route__coord{font-family:var(--sans);font-weight:300;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--stone);white-space:nowrap}
.route--ink .route__coord{color:var(--stone-lt)}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;background:var(--ink);color:var(--paper);overflow:hidden;
  padding:clamp(4.5rem,12vh,8rem) 0 0}
.hero__contour{position:absolute;inset:0;opacity:.06;pointer-events:none}
.hero__inner{position:relative;z-index:2}
.hero__eyebrow{font-family:var(--sans);font-weight:400;font-size:.74rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--rose);margin:0 0 1.8rem}
.hero h1{font-size:clamp(2.7rem,7.6vw,6rem);font-weight:300;letter-spacing:-0.03em;line-height:1;max-width:15ch}
.hero h1 em{font-style:italic;color:var(--rose)}
.hero__route{margin:clamp(2.2rem,5vh,3.4rem) 0 clamp(1.8rem,4vh,2.6rem);max-width:680px}
.hero__lead{font-family:var(--display);font-weight:300;font-size:clamp(1.15rem,1.8vw,1.5rem);
  font-style:italic;color:#e7ddcf;max-width:46ch;line-height:1.5;margin:0 0 2.2rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:1rem;padding-bottom:clamp(3rem,7vh,5rem)}
.hero__ridge{position:relative;z-index:2;width:100%;display:block}

/* buttons -------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--sans);font-weight:400;
  font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  padding:.95rem 1.6rem;border:1px solid transparent;transition:transform .18s ease,background .2s,color .2s,border-color .2s}
.btn:hover{transform:translateY(-2px)}
.btn--solid{background:var(--rust);color:#fbf6ee}
.btn--solid:hover{background:var(--rust-dk)}
.btn--ghost{border-color:var(--rule-dk);color:var(--paper)}
.btn--ghost:hover{border-color:var(--rose);color:#fff}
.btn--dark{background:var(--ink);color:var(--paper)}
.btn--dark:hover{background:var(--ink-2)}
.btn .arw{transition:transform .2s}
.btn:hover .arw{transform:translateX(4px)}

/* ============================================================
   BANDS
   ============================================================ */
.band{padding:clamp(4rem,10vh,7rem) 0}
.band--paper2{background:var(--paper-2)}
.band--ink{background:var(--ink);color:var(--paper)}
.band--ink h2,.band--ink h3{color:var(--paper)}
.section-head{max-width:60ch}
.section-head h2{font-size:clamp(2rem,4vw,3.1rem);font-weight:300;letter-spacing:-0.02em}
.section-head h2 em{font-style:italic;color:var(--rust)}
.band--ink .section-head h2 em{color:var(--rose)}
.section-head p{color:var(--stone);font-size:1.08rem;margin:1.2rem 0 0;max-width:54ch}
.band--ink .section-head p{color:var(--stone-lt)}

/* ETHOS -- three principles -------------------------------- */
.ethos{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:2.8rem}
.ethos__cell{background:var(--paper);padding:clamp(1.8rem,3.2vw,2.6rem);display:flex;flex-direction:column;gap:.8rem}
.ethos__n{font-family:var(--sans);font-weight:400;font-size:.7rem;letter-spacing:.24em;color:var(--brass);text-transform:uppercase}
.ethos__cell h3{font-size:1.7rem;font-weight:300}
.ethos__cell h3 em{font-style:italic;color:var(--rust)}
.ethos__cell p{margin:0;color:var(--stone);font-size:.98rem}

/* THE RIG -------------------------------------------------- */
.rig{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;margin-top:1rem}
.rig__plate{border:1px solid var(--rule-dk);background:var(--ink-2);padding:clamp(1.8rem,3.4vw,2.6rem)}
.rig__status{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--sans);font-weight:400;
  font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--rose);margin-bottom:1.6rem}
.rig__status .blip{width:7px;height:7px;border-radius:50%;background:var(--rust);box-shadow:0 0 0 4px color-mix(in srgb,var(--rust) 30%,transparent)}
.rig__spec{display:grid;gap:0;border-top:1px solid var(--rule-dk)}
.rig__spec div{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;padding:.85rem 0;border-bottom:1px solid var(--rule-dk);align-items:baseline}
.rig__spec dt{font-family:var(--sans);font-weight:400;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stone-lt)}
.rig__spec dd{margin:0;text-align:right;font-family:var(--display);font-weight:300;font-style:italic;font-size:1.05rem;color:var(--paper)}

/* ROUTES --------------------------------------------------- */
.routes-list{margin-top:2.8rem;border-top:1px solid var(--rule)}
.route-row{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1.2rem,3vw,2.6rem);
  align-items:center;padding:1.7rem 0;border-bottom:1px solid var(--rule);transition:padding-left .2s}
.route-row:hover{padding-left:.6rem}
.route-row__idx{font-family:var(--sans);font-weight:400;font-size:.72rem;letter-spacing:.18em;color:var(--brass)}
.route-row__name{font-family:var(--display);font-weight:300;font-size:clamp(1.4rem,2.8vw,1.95rem)}
.route-row__name span{display:block;font-family:var(--sans);font-weight:300;font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--stone);margin-top:.45rem}
.route-row__alt{font-family:var(--sans);font-weight:300;font-size:.8rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--stone);text-align:right;white-space:nowrap}
.route-row__alt b{display:block;font-family:var(--display);font-style:italic;font-weight:300;
  font-size:1.5rem;color:var(--rust);letter-spacing:0}

/* JOURNEYS (coming soon) ----------------------------------- */
.soon{margin-top:2.4rem;border:1px solid var(--rule);background:var(--paper-2);
  padding:clamp(2.4rem,5vw,4rem);text-align:center}
.soon__tag{font-family:var(--sans);font-weight:400;font-size:.68rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--rust);margin-bottom:1.2rem}
.soon h3{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:300;font-style:italic;max-width:22ch;margin-inline:auto}
.soon p{color:var(--stone);max-width:48ch;margin:1.1rem auto 0}

/* RACING hint band ----------------------------------------- */
.hint{background:var(--ink-2);color:var(--stone-lt);padding:clamp(2.2rem,4vh,3rem) 0}
.hint__row{display:flex;align-items:center;justify-content:center;gap:1.2rem;flex-wrap:wrap;text-align:center}
.hint__row p{margin:0;font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(1.05rem,1.8vw,1.35rem);color:#e7ddcf}
.hint__row .tag{font-family:var(--sans);font-weight:400;font-size:.64rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--rose);border:1px solid var(--rule-dk);padding:.35rem .8rem}

/* CONTACT -------------------------------------------------- */
.contact-cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}

/* FOOTER --------------------------------------------------- */
.footer{background:var(--ink);color:var(--stone-lt);padding:clamp(3rem,6vh,4.5rem) 0 2.4rem;border-top:1px solid var(--rule-dk)}
.footer__top{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:flex-start}
.footer__brand b{font-family:var(--display);font-weight:300;font-size:1.5rem;color:var(--paper);display:block}
.footer__brand span{font-family:var(--sans);font-weight:300;font-size:.66rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--stone-lt);display:block;margin-top:.5rem}
.footer__brand p{max-width:42ch;margin:1.2rem 0 0;color:#cdc3b3;font-size:.96rem}
.footer__nav{display:grid;gap:.7rem}
.footer__nav a{font-family:var(--sans);font-weight:300;font-size:.74rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--stone-lt);text-decoration:none}
.footer__nav a:hover{color:var(--rose)}
.footer__base{margin-top:2.8rem;padding-top:1.4rem;border-top:1px solid var(--rule-dk);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--sans);font-weight:300;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stone-lt)}

/* motion --------------------------------------------------- */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* focus ---------------------------------------------------- */
a:focus-visible,.btn:focus-visible{outline:2px solid var(--rust);outline-offset:3px}
.hero a:focus-visible,.band--ink a:focus-visible,.footer a:focus-visible{outline-color:var(--rose)}

/* responsive ----------------------------------------------- */
@media (max-width:820px){
  .ethos{grid-template-columns:1fr}
  .rig{grid-template-columns:1fr;gap:2rem}
  .rig__spec dd{text-align:left}
}
@media (max-width:680px){
  .nav__links{gap:1.1rem}
  .nav__links a{font-size:.64rem;letter-spacing:.12em}
  .brand span{display:none}
  .route-row{grid-template-columns:auto 1fr;gap:1rem}
  .route-row__alt{grid-column:2;text-align:left}
  .footer__top{flex-direction:column}
}
@media (max-width:460px){
  .route__coord{display:none}
}