/* =========================================================
   abby Auction by OKURA — Design Tokens
   Style: Premium auction house (white / warm cream / gold)
   Ref: 白＋クリーム地 / ゴールド #C9972A / ミンチョ見出し / 細罫線
   ========================================================= */
:root{
  /* ---- Surfaces ---- */
  --white:#ffffff;
  --bg:#ffffff;
  --bg-soft:#faf8f5;      /* warm cream */
  --bg-mute:#f3efe8;      /* deeper cream */

  /* ---- Text ---- */
  --ink:#1a1a1a;
  --body:#4a4a4a;
  --mute:#8a8681;

  /* ---- Hairlines ---- */
  --line:#e8e3da;
  --line-2:#d9d2c6;

  /* ---- Brand (single warm gold accent) ---- */
  --brand:#c9972a;
  --brand-d:#b58420;
  --brand-l:#faf4e6;
  --grad:#c9972a;
  --grad-soft:#f3e9d2;
  --gold-l:#d4a338;

  /* ---- Status ---- */
  --ok:#3f7d4f;
  --ng:#b3382f;

  /* ---- Type families ---- */
  --serif:"Shippori Mincho","Noto Serif JP","Yu Mincho",serif;   /* JP headings */
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;

  /* ---- Layout ---- */
  --max:1200px;
  --head:1280px;
  --hh:68px;
  --gap:120px;
  --gap-m:96px;
  --gap-s:64px;

  /* ---- Radius ---- */
  --r-s:6px;
  --r:8px;
  --r-l:10px;
  --r-xl:12px;
  --r-pill:999px;

  /* ---- Shadow ---- */
  --sh-s:0 1px 2px rgba(26,26,26,.04);
  --sh-m:0 8px 22px -14px rgba(26,26,26,.12);
  --sh-l:0 22px 44px -26px rgba(26,26,26,.18);
  --sh-brand:0 10px 22px -14px rgba(201,151,42,.4);

  --rv-ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- Reset / base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--hh);-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  color:var(--body);
  background:var(--bg);
  font-size:15.5px;
  line-height:1.9;
  letter-spacing:.01em;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pc{display:inline}

/* ---------- Layout helpers ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
.sec{padding:var(--gap) 0}
section{position:relative}

/* ---------- Eyebrow (— LABEL — with flanking hairlines) ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--sans);
  font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brand);
  background:none;border:0;border-radius:0;padding:0;
}
.eyebrow::before,.eyebrow::after{content:"";height:1px;width:28px;background:var(--line-2);flex:none}
.eyebrow::after{margin-left:0}
.eyebrow.nocase{text-transform:none}
.eyebrow.on-dark{color:var(--gold-l)}
.eyebrow.on-dark::before,.eyebrow.on-dark::after{background:rgba(255,255,255,.28)}

/* ---------- Headings ---------- */
.h2{
  font-family:var(--sans);font-weight:700;
  font-size:clamp(25px,3vw,38px);line-height:1.5;letter-spacing:.02em;
  color:var(--ink);
}
.h2 strong{font-weight:600;color:var(--brand)}
.lead{color:var(--mute);font-size:14.5px;letter-spacing:.02em}
.shead{margin-bottom:var(--gap-s);max-width:760px}
.shead .h2{margin-top:20px}
.shead .lead{margin-top:14px}

/* on-dark text */
.on-dark{color:#fff}
.on-dark .h2{color:#fff}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:48px;padding:0 26px;
  font-size:14px;font-weight:700;letter-spacing:.02em;
  border:1px solid transparent;border-radius:var(--r-s);
  transition:transform .2s,box-shadow .25s,background .25s,color .25s,border-color .25s;
  cursor:pointer;white-space:nowrap;
}
.btn .ar{display:inline-block;width:20px;height:1.5px;background:currentColor;position:relative;transition:width .3s;flex:none;border-radius:2px}
.btn .ar::after{content:"";position:absolute;right:0;top:-2.5px;width:6px;height:6px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);transform-origin:center}
.btn:hover .ar{width:28px}
.btn-g{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-g:hover{background:var(--brand-d);border-color:var(--brand-d);transform:translateY(-1px)}
.btn-k{background:#1a1d20;color:#fff}
.btn-k:hover{background:#2b3035;transform:translateY(-1px)}
.btn-o{background:#fff;border-color:var(--line-2);color:var(--ink)}
.btn-o:hover{border-color:var(--brand);color:var(--brand)}
.btn-ow{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.32);color:#fff}
.btn-ow:hover{background:#fff;color:var(--ink)}
.btn-w{background:#fff;color:var(--ink);border-color:#fff}
.btn-w:hover{background:transparent;color:#fff}