/* ============================================================================
   Japan Bike Market — base.css  (light theme)
   ============================================================================ */
*,*::before,*::after{ box-sizing:border-box; } *{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; max-width:100%; overflow-x:clip; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ animation:none!important; transition:none!important; } }
body{ font-family:var(--font-jp); background:var(--bg); color:var(--fg); line-height:1.75; overflow-x:clip; max-width:100%; -webkit-font-smoothing:antialiased; }
img,svg{ display:block; max-width:100%; height:auto; } img{ background:var(--paper-2); }
a{ color:inherit; text-decoration:none; } ul{ list-style:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:0; }
input,textarea,select{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
::selection{ background:var(--orange); color:#fff; }
::-webkit-scrollbar{ width:10px; } ::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:20px; } ::-webkit-scrollbar-track{ background:var(--paper); }
.sans{ font-family:var(--font-sans); }

h1,h2,h3,h4{ font-weight:800; line-height:1.12; letter-spacing:-.01em; }

.container{ width:min(100% - 2.4rem, var(--container)); margin-inline:auto; }
.section{ padding-block:var(--sp-8); position:relative; }
.section--tight{ padding-block:var(--sp-6); }
.section--paper{ background:var(--paper); }

.eyebrow{ font-family:var(--font-sans); font-weight:700; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); display:inline-flex; align-items:center; gap:.5rem; }
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--orange); border-radius:2px; }
.title{ font-size:clamp(1.9rem,4.6vw,3.4rem); }
.title .or{ color:var(--orange); }
.lede{ color:var(--muted); font-size:clamp(1rem,1.5vw,1.16rem); max-width:58ch; }
.muted{ color:var(--muted); }
.pill{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-sans); font-weight:600; font-size:.78rem; padding:.35rem .8rem; border-radius:100px; background:var(--paper); border:1px solid var(--line); }

[data-reveal]{ opacity:0; transform:translateY(30px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal-delay="1"]{ transition-delay:.07s; } [data-reveal-delay="2"]{ transition-delay:.14s; } [data-reveal-delay="3"]{ transition-delay:.21s; } [data-reveal-delay="4"]{ transition-delay:.28s; }

.skip-link{ position:fixed; left:1rem; top:-4rem; z-index:1000; background:var(--orange); color:#fff; padding:.6rem 1rem; border-radius:8px; transition:top .3s; }
.skip-link:focus{ top:1rem; }
.scroll-progress{ position:fixed; top:0; left:0; height:3px; width:0; background:var(--grad-orange); z-index:9997; }