/* ============================================================
   JOKLOVEN GOLF — base.css
   Design system: tokens, reset, typography, buttons, forms
   ============================================================ */

:root{
  /* color */
  --ink:#0E0F11;
  --ink-800:#15171A;
  --ink-700:#202328;
  --paper:#FFFFFF;
  --bone:#F5F4F0;
  --bone-2:#ECEAE4;
  --line:#E3E1DB;
  --line-dark:rgba(255,255,255,.14);
  --gray:#5E6066;
  --gray-2:#6B6D73;
  --red:#C8102E;      /* 巡回赛正红：白字压底 5.88:1，正文小字可达 AA */
  --red-ink:#A50D26;  /* 小字专用：白底 7.82:1 */
  --red-deep:#8C0A20;  /* 按下 / 深压 */

  /* brand star palette */
  --star-purple:#C391C1;
  --star-rose:#E74F64;
  --star-yellow:#F6EA7B;
  --star-pink:#F3C0CC;
  --star-orange:#FEA14D;
  --star-blue:#B5DDE8;

  /* type */
  --font-display:"Archivo","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"PingFang SC","Microsoft YaHei",sans-serif;
  --font-body:"Inter","Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"PingFang SC","Microsoft YaHei",sans-serif;

  /* layout */
  --wrap:1480px;
  --pad-x:clamp(20px,4vw,64px);
  --sect-y:clamp(64px,8.5vw,140px);
  --nav-h:76px;
  --nav-h-s:60px;

  /* motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --dur:.5s;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.62;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
figure{margin:0}
h1,h2,h3,h4,h5{margin:0;font-family:var(--font-display);font-weight:800;line-height:1.04;letter-spacing:-.015em;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* ---------- wrap / section ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad-x)}
.section{padding-block:var(--sect-y)}
.section--tight{padding-block:calc(var(--sect-y) * .62)}
.section--merged-top{padding-top:0}
.bg-bone{background:var(--bone)}
.bg-ink{background:var(--ink);color:#fff}

/* ---------- type scale ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.72em;
  font-family:var(--font-display);
  font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--red-ink);
}
.eyebrow::before{content:"";width:26px;height:2px;background:currentColor}
.eyebrow--plain::before{display:none}
.eyebrow--light{color:#fff}
.eyebrow--light::before{background:#fff}
.eyebrow--muted{color:var(--gray-2)}

.display-xl{font-size:clamp(52px,9.2vw,150px);font-weight:800;letter-spacing:-.022em;line-height:.92;text-transform:uppercase}
.display-l{font-size:clamp(38px,5.6vw,86px);font-weight:800;letter-spacing:-.02em;line-height:.98;text-transform:uppercase}
.display-m{font-size:clamp(30px,3.6vw,54px);font-weight:800;letter-spacing:-.018em;line-height:1.03;text-transform:uppercase}
.display-s{font-size:clamp(24px,2.4vw,34px);font-weight:800;letter-spacing:-.014em;line-height:1.08}
.heading-up{text-transform:uppercase}

.lead{font-size:clamp(17px,1.35vw,20px);line-height:1.6;color:var(--gray)}
.lead--ink{color:var(--ink)}
.lead--light{color:rgba(255,255,255,.78)}
.body-s{font-size:14px;line-height:1.62;color:var(--gray)}
.body-xs{font-size:12.5px;line-height:1.55;color:var(--gray)}
.on-ink .lead{color:rgba(255,255,255,.78)}
.on-ink .body-s{color:rgba(255,255,255,.66)}
.on-ink .body-xs{color:rgba(255,255,255,.5)}

.maxw-56{max-width:56ch}
.maxw-46{max-width:46ch}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  font-family:var(--font-display);
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:16px 30px;border-radius:999px;
  border:1.5px solid transparent;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn--solid{background:var(--ink);color:#fff}
.btn--solid:hover{background:var(--red)}
.btn--red{background:var(--red);color:#fff}
.btn--red:hover{background:var(--red-deep)}
.btn--outline{border-color:var(--ink);color:var(--ink)}
.btn--outline:hover{background:var(--ink);color:#fff}
.btn--ghost-light{border-color:rgba(255,255,255,.92);color:#fff}
.btn--ghost-light:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn--white{background:#fff;color:var(--ink)}
.btn--white:hover{background:var(--red);color:#fff}
.btn--sm{padding:11px 20px;font-size:12px}
.btn--lg{padding:19px 38px;font-size:14px}
.btn--block{width:100%}
.btn .arr{transition:transform var(--dur) var(--ease)}
.btn:hover .arr{transform:translateX(4px)}

.link-arrow{
  position:relative;
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--font-display);font-size:13px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  padding-bottom:5px;
  transition:color .35s var(--ease);
}
.link-arrow::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor;opacity:.9}
.link-arrow::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--red);transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--ease);z-index:1}
.link-arrow:hover::before{transform:scaleX(1)}
.link-arrow .arr{transition:transform .35s var(--ease)}
.link-arrow:hover{color:var(--red)}
.link-arrow:hover .arr{transform:translateX(5px)}
.link-arrow--light{color:#fff}
.link-arrow--light::after{background:rgba(255,255,255,.6)}
.link-arrow--light::before{background:#fff}
.link-arrow--light:hover{color:#fff}

/* ---------- rules / dividers ---------- */
.hairline{height:1px;background:var(--line);border:0;margin:0}
.hairline--dark{background:var(--line-dark)}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.field label{
  font-family:var(--font-display);font-size:11.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
}
.field .req{color:var(--red-ink)}
.input,.select,.textarea{
  width:100%;padding:14px 2px;
  background:transparent;border:0;border-bottom:1.5px solid var(--line);
  border-radius:0;font-size:15.5px;color:var(--ink);
  transition:border-color .3s var(--ease);
}
.input::placeholder,.textarea::placeholder{color:var(--gray-2)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--ink)}
.select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23101113' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 6px center;padding-right:28px}
.textarea{min-height:120px;resize:vertical}
.checkline{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--gray)}
.checkline input{margin-top:3px;accent-color:var(--ink);width:16px;height:16px}
.form-ok{display:none}
.form-ok.show{display:block;font-family:var(--font-display);font-weight:700;letter-spacing:.04em;
  color:var(--red-ink);margin-bottom:16px;font-size:14.5px}
.form-state{display:none;min-height:500px;padding:34px 0 18px;border-top:1px solid var(--line);outline:none}
.form-state.is-visible{display:flex;flex-direction:column;justify-content:center}
.form-state__card{display:none;max-width:560px}
.form-state__card.is-visible{display:block}
.form-state__icon{display:inline-grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--font-display);font-size:24px;font-weight:800}
.form-state__icon--error{background:#FBE9EC;color:var(--red-ink)}
.form-state__title{margin:22px 0 12px;font-size:clamp(26px,3vw,36px);line-height:1.08}
.form-state__message{max-width:48ch;color:var(--gray);font-size:15px}
.form-state__message a{color:var(--red-ink);text-decoration:underline;text-underline-offset:3px}
.form-state__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
[data-form-panel][hidden],.form-state[hidden]{display:none!important}
@media(max-width:640px){.form-state{min-height:360px;padding-top:24px}.form-state__actions{align-items:stretch}.form-state__actions .btn{width:100%}}

/* ---------- reveal-on-scroll ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal--d1{transition-delay:.08s}
.reveal--d2{transition-delay:.16s}
.reveal--d3{transition-delay:.24s}
.reveal--d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  *{animation-duration:.001s !important;animation-delay:0s !important}
}

/* ---------- helpers ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.no-select{user-select:none}
.text-center{text-align:center}
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:36px}.mt-5{margin-top:52px}

/* ============================================================
   design v2 refinements (2026-10-06) — base layer
   ============================================================ */
html{scrollbar-width:thin;scrollbar-color:#C7C5BF #F5F4F0}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#F5F4F0}
::-webkit-scrollbar-thumb{background:#C7C5BF;border:3px solid #F5F4F0;border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:#A6A49E}
.btn:not(:active):hover{transform:translateY(-1px)}
.btn--solid:hover,.btn--red:hover,.btn--white:hover{box-shadow:0 16px 34px -18px rgba(200,16,46,.45)}
.btn--outline:hover{box-shadow:0 14px 30px -20px rgba(14,15,17,.35)}
.gallery__count,.filters__count,.spec-table__row dd,.intro__fact .n{font-variant-numeric:tabular-nums}
[id]{scroll-margin-top:calc(var(--nav-h-s) + 26px)}
img{color:transparent}