/* ===========================================================
   Vintage Eyewear 彩 ── 本鼈甲ページ（黒基調）

   style.css の「あと」に読み込む。
   やっていることは、色の変数を上書きするだけ。
   それだけで文字帯・ナビ・ドロワー・フッターが黒になる。
   このファイルの読み込みを1行消せば、元のサイトの色に戻る。
   =========================================================== */

:root{
  /* ---- 地と文字（白→黒に入れ替え） ---- */
  --bg:#0A0A0B;
  --bg-alt:#101013;
  --bg-deep:#16161A;
  --ink:#EAE6DE;
  --ink-2:#ADA69A;
  --ink-3:#7B766D;
  --line:rgba(234,230,222,.14);

  /* ---- 一点の色：べっ甲の飴色 ---- */
  --amber:#C58B3F;
  --amber-deep:#8A5720;
  --amber-wash:rgba(197,139,63,.09);
}

/* style.css で直に色を書いている3か所だけ、個別に上書きする */
.nav.is-stuck,
.nav.is-solid{ background:rgba(10,10,11,.86); }
.lb{ background:rgba(8,8,9,.96); }

/* ロゴ・紋章は黒い字で書かれているので、反転させて白にする */
.nav__logo img,
.foot__emblem{ filter:invert(1) brightness(1.04); }

/* 文字帯はホバーで飴色に */
.ticker:hover{ background:var(--amber-deep); color:#0A0A0B; }

body{ background:var(--bg); }

/* ===========================================================
   共通の部品
   =========================================================== */
.bk-sec{ padding:clamp(72px,10.5vh,132px) var(--pad); position:relative; }
.bk-sec--tight{ padding-top:clamp(40px,6vh,72px); }
.bk-inner{ max-width:1120px; margin:0 auto; }
.bk-narrow{ max-width:640px; margin:0 auto; }

.bk-eyebrow{
  font-family:var(--ff-lb); font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--amber); margin:0 0 18px;
}
.bk-title{
  font-family:var(--ff-en); font-weight:300;
  font-size:clamp(30px,5vw,58px); line-height:1.16; letter-spacing:.035em;
  margin:0 0 22px;
}
html[data-lang="ja"] .bk-title{
  font-family:var(--ff-mc); font-weight:400;
  font-size:clamp(23px,3.7vw,40px); line-height:1.6; letter-spacing:.09em;
}
.bk-lead{
  color:var(--ink-2); font-size:14px; line-height:2.1; letter-spacing:.03em;
  margin:0 0 16px; max-width:34em;
}
html[data-lang="ja"] .bk-lead{ font-size:13.5px; line-height:2.15; }
.bk-lead b{ color:var(--ink); font-weight:400; }
.bk-note{
  color:var(--ink-3); font-size:11.5px; line-height:2; letter-spacing:.06em; margin:22px 0 0;
}

/* 飴色の細い罫。スクロールで横に伸びる */
.bk-rule{
  height:1px; background:var(--amber); opacity:.55;
  transform:scaleX(0); transform-origin:left; transition:transform 1.3s cubic-bezier(.22,1,.36,1);
}
.bk-rule.is-in{ transform:scaleX(1); }
.bk-rule--center{ transform-origin:center; }

/* ===========================================================
   HERO
   =========================================================== */
.bk-hero{
  position:relative; min-height:min(86svh,780px);
  display:grid; place-items:center; overflow:hidden;
  padding:calc(var(--ticker-h) + env(safe-area-inset-top,0px) + 80px) var(--pad) 72px;
  text-align:center;
}
.bk-hero__media{ position:absolute; inset:0; z-index:0; }
.bk-hero__media img{
  width:100%; height:100%; object-fit:cover;
  opacity:.58; filter:saturate(.9) contrast(1.02);
}
.bk-hero__veil{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(125% 88% at 50% 42%, rgba(10,10,11,.04) 0%, rgba(10,10,11,.58) 66%, #0A0A0B 100%),
    linear-gradient(to bottom, rgba(10,10,11,.5), rgba(10,10,11,0) 34%, rgba(10,10,11,.86));
}
.bk-hero__inner{ position:relative; z-index:2; }
.bk-hero__kicker{
  font-family:var(--ff-lb); font-size:10px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--amber); margin:0 0 26px;
}
.bk-hero__ttl{
  font-family:var(--ff-mc); font-weight:400;
  font-size:clamp(42px,9vw,104px); line-height:1.1; letter-spacing:.14em;
  margin:0; color:var(--ink);
  text-shadow:0 2px 26px rgba(10,10,11,.55);
}
html[data-lang="en"] .bk-hero__ttl{
  font-family:var(--ff-en); font-weight:300; letter-spacing:.2em;
  font-size:clamp(44px,9.5vw,112px);
}
.bk-hero__rule{ width:min(230px,42vw); margin:34px auto 30px; }
.bk-hero__sub{
  font-family:var(--ff-mc); font-size:clamp(15px,2vw,20px); letter-spacing:.14em;
  color:var(--ink-2); margin:0; line-height:1.9;
}
html[data-lang="en"] .bk-hero__sub{ font-family:var(--ff-en); font-size:clamp(17px,2.3vw,23px); letter-spacing:.06em; }
.bk-hero__scroll{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--ff-lb); font-size:9px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-3);
}
.bk-hero__scroll i{ display:block; width:1px; height:34px; background:var(--line); }

/* ===========================================================
   写真の枠（写真が届いていないあいだの見え方）
   =========================================================== */
.bk-fig{
  position:relative; overflow:hidden; margin:0;
  background:var(--bg-alt); border:1px solid var(--line);
  aspect-ratio:1/1;
}
.bk-fig img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s cubic-bezier(.22,1,.36,1), opacity .8s ease;
}
.bk-fig:hover img{ transform:scale(1.03); }

/* 写真がまだ無いとき（js/bekko.js が付ける） */
.bk-fig.is-await{
  background:
    repeating-linear-gradient(135deg,
      rgba(197,139,63,.05) 0 1px, rgba(10,10,11,0) 1px 11px),
    var(--bg-alt);
  border-color:rgba(197,139,63,.22);
}
.bk-fig.is-await img{ display:none; }
.bk-fig.is-await::after{
  content:attr(data-await);
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--ff-lb); font-size:9.5px; letter-spacing:.2em;
  color:rgba(197,139,63,.6); text-align:center; padding:0 12px; line-height:2;
}
.bk-fig--tall{ aspect-ratio:3/4; }
.bk-fig--wide{ aspect-ratio:3/2; }

/* ===========================================================
   素材ふたつ（本鼈甲 / バッファローホーン）
   =========================================================== */
.bk-pair{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line); margin-top:8px;
}
.bk-pair > article{ background:var(--bg); padding:0 0 30px; }
.bk-pair .bk-fig{ border:0; border-bottom:1px solid var(--line); }
.bk-pair__body{ padding:26px clamp(20px,2.6vw,32px) 0; }
.bk-pair__ttl{
  font-family:var(--ff-mc); font-weight:400; font-size:20px; letter-spacing:.1em;
  margin:0 0 4px; color:var(--ink);
}
html[data-lang="en"] .bk-pair__ttl{ font-family:var(--ff-en); font-size:26px; letter-spacing:.06em; }
.bk-pair__en{
  font-family:var(--ff-lb); font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 20px;
}
.bk-pair ul{ list-style:none; margin:0; padding:0; }
.bk-pair li{
  font-size:13px; line-height:1.9; color:var(--ink-2);
  padding:10px 0 10px 16px; border-top:1px solid var(--line); position:relative;
}
.bk-pair li::before{
  content:""; position:absolute; left:0; top:19px;
  width:5px; height:1px; background:var(--amber);
}
.bk-pair__price{
  margin:22px 0 0; font-family:var(--ff-en); font-size:22px; letter-spacing:.04em;
  color:var(--amber); font-variant-numeric:tabular-nums;
}
.bk-pair__price span{
  font-family:var(--ff-ja); font-size:11px; letter-spacing:.14em; color:var(--ink-3);
  display:block; margin-top:4px;
}

/* ===========================================================
   一点もの（写真の並び）
   =========================================================== */
.bk-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  gap:clamp(10px,1.4vw,18px); margin-top:8px;
}

/* ===========================================================
   扱い方
   =========================================================== */
.bk-care{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(24px,3vw,44px); margin-top:8px;
}
.bk-care > div{ border-top:1px solid var(--amber); padding-top:22px; }
.bk-care dt{
  font-family:var(--ff-mc); font-size:16px; letter-spacing:.1em; margin:0 0 10px; color:var(--ink);
}
html[data-lang="en"] .bk-care dt{ font-family:var(--ff-en); font-size:20px; letter-spacing:.05em; }
.bk-care dd{ margin:0; font-size:13px; line-height:2; color:var(--ink-2); }

/* ===========================================================
   見に行く（店頭 / 予約）
   =========================================================== */
.bk-visit{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line); margin-top:8px;
}
.bk-visit--single{ max-width:640px; margin-inline:auto; }
.bk-visit > div{
  background:var(--bg); padding:clamp(30px,3.6vw,46px) clamp(22px,2.8vw,38px);
  display:flex; flex-direction:column;
}
.bk-visit__no{
  font-family:var(--ff-en); font-size:13px; letter-spacing:.2em; color:var(--amber); margin:0 0 16px;
}
.bk-visit__ttl{
  font-family:var(--ff-mc); font-weight:400; font-size:19px; letter-spacing:.1em;
  margin:0 0 14px; color:var(--ink);
}
html[data-lang="en"] .bk-visit__ttl{ font-family:var(--ff-en); font-size:24px; letter-spacing:.05em; }
.bk-visit p{ font-size:13px; line-height:2.05; color:var(--ink-2); margin:0 0 14px; }
.bk-visit__foot{ margin-top:auto; padding-top:18px; }

.bk-btn{
  display:inline-flex; align-items:center; gap:14px;
  border:1px solid var(--amber); color:var(--amber);
  padding:15px 28px; font-family:var(--ff-lb); font-size:10.5px;
  letter-spacing:.22em; text-transform:uppercase;
  transition:background .5s cubic-bezier(.22,1,.36,1), color .5s ease;
}
.bk-btn em{ font-style:normal; font-size:13px; letter-spacing:0; transition:transform .45s cubic-bezier(.22,1,.36,1); }
.bk-btn:hover{ background:var(--amber); color:#0A0A0B; }
.bk-btn:hover em{ transform:translateX(4px); }
.bk-btn--ghost{ border-color:var(--line); color:var(--ink-2); }
.bk-btn--ghost:hover{ background:transparent; border-color:var(--ink); color:var(--ink); }

/* ===========================================================
   最後のひとこと
   =========================================================== */
.bk-close{
  text-align:center; padding:clamp(80px,12vh,150px) var(--pad);
  background:var(--bg-alt); border-top:1px solid var(--line);
}
.bk-close p{
  font-family:var(--ff-mc); font-size:clamp(17px,2.5vw,26px); line-height:2.1;
  letter-spacing:.12em; color:var(--ink); margin:0 auto; max-width:26em;
}
html[data-lang="en"] .bk-close p{ font-family:var(--ff-en); letter-spacing:.04em; line-height:1.7; }

/* ===========================================================
   もどる
   =========================================================== */
.bk-back{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--ff-lb); font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-2); transition:color .35s;
}
.bk-back:hover{ color:var(--ink); }
.bk-back span:first-child{ font-size:12px; letter-spacing:0; }

@media (max-width:640px){
  .bk-hero{ min-height:min(78svh,660px); }
  .bk-pair__body{ padding-top:22px; }
}

/* ===========================================================
   白地の2枚（全幅で挟む）
   黒 → 白 → 黒 と切り替わるので、ここが目を引く
   =========================================================== */
.bk-band{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  margin:clamp(44px,8vh,104px) 0;
}
.bk-band__i{
  margin:0; overflow:hidden; aspect-ratio:1/1; background:#F4F3F1;
}
.bk-band__i img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.6s cubic-bezier(.22,1,.36,1);
}
.bk-band__i:hover img{ transform:scale(1.045); }
@media (max-width:820px){ .bk-band{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .bk-band{ grid-template-columns:1fr; } }

/* ===========================================================
   締めの調整
   =========================================================== */
/* 見出しの上に細い線を引いて、節の始まりをはっきりさせる */
.bk-eyebrow{ display:flex; align-items:center; gap:13px; }
.bk-eyebrow::before{
  content:""; width:28px; height:1px; background:var(--amber); flex:0 0 auto; opacity:.8;
}
/* 題字と見出しの字間をひろげる */
.bk-hero__ttl{ letter-spacing:.2em; }
html[data-lang="ja"] .bk-title{ letter-spacing:.13em; }
.bk-hero__sub{ letter-spacing:.2em; }
/* 価格を主役の大きさに */
.bk-pair__price{ font-size:27px; letter-spacing:.06em; }