:root{
  /* ---- レイアウト ---- */
  --hsize: 8;        /* 見出しサイズ（vw） */
  --x: 4.5;          /* テキストブロックの左位置（%）— ヘッダーのロゴと左端を揃える */
  --y: 44;           /* テキストブロックの縦位置（%） */
  --lh: 0.98;        /* 見出しの行間 */

  /* ---- 色替え ---- */
  --dwell: 7;        /* 1色を見せる秒数（自動巡回時） */
  --fade: 1.3;       /* 切り替わりにかける秒数 */

  /* ---- 質感 ---- */
  --bgdark: 0.34;    /* 背景だけを落とす量 */
  --grain: 0.05;     /* グレインの濃度 */

  /* ---- 色・書体 ---- */
  --ink:#140508;
  --bone:#F2EADB;
  --gold:#C0A16B;
  --muted:rgba(242,234,219,.52);
  --display:"adobe-caslon-pro","Libre Caslon Text",Baskerville,"Times New Roman",Georgia,serif;
  --util:"Jost",system-ui,sans-serif;
  --jp:"Shippori Mincho","Yu Mincho","Hiragino Mincho ProN",serif;
  --gut:clamp(24px,8vw,120px);

  --img-x: 62;       /* 画像の水平位置（%） */
  --img-y: 50;       /* 画像の垂直位置（%） */
  --img-zoom: 1;     /* cover を基準にした拡大率 */
  --imgpos: calc(var(--img-x) * 1%) calc(var(--img-y) * 1%);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--ink);color:var(--bone)}
body{font-family:var(--util);-webkit-font-smoothing:antialiased}

.stage{position:relative;height:100svh;min-height:600px;overflow:hidden;isolation:isolate}
.layer{position:absolute;inset:0;background-size:cover;background-position:var(--imgpos);background-repeat:no-repeat;pointer-events:none}

/* ?v= はキャッシュ避け。ヒーローの層は中身だけ差し替えることがある */
.l-base{z-index:0;background-image:url("../assets/hero-base.webp?v=3")}
.l-bgdark{z-index:1;background-image:url("../assets/hero-bgmask.webp?v=3");opacity:var(--bgdark)}
.l-shade{z-index:2;background:
  linear-gradient(100deg, rgba(20,5,8,.80) 0%, rgba(20,5,8,.52) 26%, rgba(20,5,8,.06) 52%, rgba(20,5,8,0) 66%),
  radial-gradient(120% 92% at 50% 42%, rgba(20,5,8,0) 42%, rgba(20,5,8,.62) 100%)}
.l-subject{z-index:4;background-image:url("../assets/hero-subject.webp?v=3")}

/* ---- ネクタイの色替え（下地のバーガンディの上に4色を重ねる） ---- */
.tie{z-index:5;opacity:0;transition:opacity calc(var(--fade) * 1s) cubic-bezier(.4,0,.2,1);will-change:opacity}
.t-navy    {background-image:url("../assets/tie-navy.webp?v=3")}
.t-bottle  {background-image:url("../assets/tie-bottle.webp?v=3")}
.t-charcoal{background-image:url("../assets/tie-charcoal.webp?v=3")}
.t-silver  {background-image:url("../assets/tie-silver.webp?v=3")}

/* ---- 色スウォッチ ---- */
.swatches{display:flex;align-items:center;gap:14px;margin-top:clamp(20px,3vh,32px)}
.dots{display:flex;gap:10px}
.dot{width:15px;height:15px;padding:0;border-radius:50%;cursor:pointer;
  border:.5px solid rgba(242,234,219,.3);transition:outline-color .3s,transform .3s}
.dot:hover{transform:scale(1.14)}
.dot[aria-pressed="true"]{outline:.5px solid var(--gold);outline-offset:3px}
.dot:focus-visible{outline:1px solid var(--bone);outline-offset:3px}
.dot-label{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
  transition:opacity .3s;min-width:13em;white-space:nowrap}

.l-grain{z-index:9999;opacity:var(--grain);mix-blend-mode:overlay;background-size:200px;background-repeat:repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---- ヘッダー ---- */
.bar{position:absolute;inset:0 0 auto 0;z-index:10000;display:flex;align-items:center;justify-content:space-between;
  padding:clamp(20px,3.2vh,34px) clamp(20px,5vw,64px)}
.mark{text-decoration:none;font-family:var(--display);font-size:17px;letter-spacing:.20em;text-transform:uppercase;color:var(--bone)}
.nav{display:flex;gap:clamp(18px,2.4vw,34px);align-items:center}
.nav a{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .35s}
.nav a:hover,.nav a:focus-visible{color:var(--bone)}

/* ---- コピー（被写体レイヤーより下＝ラペルの奥に回り込む） ---- */
.copy{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);z-index:3;max-width:62vw;
  transform:translateY(-50%)}
.copy-in{animation:rise 1.4s .3s both cubic-bezier(.22,.61,.36,1)}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.eyebrow{font-size:clamp(10px,.78vw,13px);letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin-bottom:clamp(14px,2.2vh,26px)}
.head{font-family:var(--display);font-weight:400;
  font-size:clamp(42px,calc(var(--hsize) * 1vw),150px);line-height:var(--lh);letter-spacing:-.005em;color:var(--bone)}
.head em{font-style:italic}
.lede{margin-top:clamp(18px,2.6vh,30px);font-family:var(--jp);
  font-size:clamp(12.5px,.92vw,15px);line-height:2.05;color:var(--muted);max-width:24em}
.cta{display:inline-flex;align-items:center;gap:12px;margin-top:clamp(24px,3.4vh,40px);
  padding:15px 30px;border:.5px solid rgba(192,161,107,.6);border-radius:999px;
  font-family:var(--util);font-size:12px;letter-spacing:.2em;color:var(--gold);text-decoration:none;
  transition:background .45s,color .45s,border-color .45s}
.cta:hover,.cta:focus-visible{background:var(--gold);border-color:var(--gold);color:#20080d}
.cta span{width:16px;height:.5px;background:currentColor;transition:width .45s}
.cta:hover span{width:26px}

.cue{position:absolute;left:calc(var(--x) * 1%);bottom:30px;z-index:10000;
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  font-size:9.5px;letter-spacing:.32em;color:var(--muted)}
.cue b{display:block;width:.5px;height:40px;background:linear-gradient(180deg,rgba(242,234,219,.5),transparent);font-weight:400}

/* ============ Craft ============ */
.craft{position:relative;background:var(--ink);padding:clamp(96px,15vh,190px) 0 clamp(80px,12vh,150px)}
.wrap{max-width:1300px;margin:0 auto;padding:0 var(--gut)}

.sec-head{max-width:44em}
.sec-eyebrow{font-size:clamp(10px,.78vw,12px);letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin-bottom:clamp(18px,2.6vh,30px)}
.sec-title{font-family:var(--jp);font-weight:500;font-size:clamp(26px,3.1vw,46px);line-height:1.62;letter-spacing:.02em;color:var(--bone)}
.sec-lead{margin-top:clamp(22px,3vh,36px);font-family:var(--jp);font-size:clamp(13px,1vw,15.5px);line-height:2.3;color:var(--muted);max-width:34em}

/* ---- 全体を貫く一本の線 ---- */
.steps{position:relative;margin-top:clamp(64px,10vh,124px);padding-left:clamp(26px,4vw,64px)}
.spine{position:absolute;left:0;top:0;bottom:0;width:.5px;background:rgba(242,234,219,.13)}
.spine i{position:absolute;left:0;top:0;width:.5px;height:0;background:linear-gradient(180deg,rgba(192,161,107,.15),var(--gold))}

/* ---- 工程 ---- */
.step{position:relative;display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,1fr);
  gap:clamp(28px,4vw,76px);align-items:center;margin-bottom:clamp(64px,10vh,124px)}
.step:last-child{margin-bottom:0}
.step::before{content:"";position:absolute;left:calc(-1 * clamp(26px,4vw,64px) - 2.5px);top:2px;
  width:5px;height:5px;border-radius:50%;background:var(--gold)}

.step:nth-of-type(even){grid-template-columns:minmax(0,1fr) minmax(0,1.16fr)}
.step:nth-of-type(even) .plate{order:2}

/* ---- 重ね組みの版 ---- */
.plate{position:relative;aspect-ratio:1/.94}
.bignum{position:absolute;left:0;top:2%;z-index:0;font-family:var(--display);
  font-size:clamp(78px,10.6vw,172px);line-height:.8;color:rgba(192,161,107,.34);letter-spacing:-.02em;pointer-events:none}
.fig{position:absolute;background:#1C0A0F;border:.5px solid rgba(242,234,219,.14);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:6%}
.fig--main{left:27%;top:0;width:70%;aspect-ratio:1/1;z-index:1;justify-content:flex-start}
.fig--sub{right:0;bottom:0;width:43%;aspect-ratio:1/1;z-index:2;
  box-shadow:0 0 0 clamp(7px,1.1vw,16px) var(--ink)}
.step:nth-of-type(even) .bignum{left:auto;right:0}
.step:nth-of-type(even) .fig--main{left:auto;right:27%}
.step:nth-of-type(even) .fig--sub{right:auto;left:0}

/* 写真を入れた枠：説明テキスト用のpaddingを外し、画像を隅まで敷く */
.fig--photo{padding:0;overflow:hidden}
.fig--photo img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.94) brightness(.97)}

.fig i{font-style:normal;font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);opacity:.75}
.fig span{font-family:var(--jp);font-size:12px;line-height:1.95;color:rgba(242,234,219,.42);max-width:19em}
.fig--sub span{font-size:11px;line-height:1.85}
.dgm{width:78%;height:auto;display:block;margin:0 auto}

/* ---- 文章 ---- */
.step-num{display:flex;align-items:center;gap:14px;font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.step-num::after{content:"";flex:1;height:.5px;background:linear-gradient(90deg,rgba(192,161,107,.45),transparent);max-width:96px}
.step h3{margin:clamp(14px,2.2vh,24px) 0 clamp(12px,1.8vh,20px);font-family:var(--jp);font-weight:500;
  font-size:clamp(19px,1.85vw,27px);line-height:1.5;letter-spacing:.02em;color:var(--bone)}
.step p{font-family:var(--jp);font-size:clamp(12.5px,.95vw,15px);line-height:2.25;color:var(--muted);max-width:26em}

/* ---- 仕様 ---- */
.specs{margin-top:clamp(80px,12vh,150px);padding-top:clamp(36px,5vh,56px);
  border-top:.5px solid rgba(242,234,219,.14);
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,3vw,48px)}
.spec dt{font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.spec dd{font-family:var(--jp);font-size:clamp(13px,1.05vw,16px);line-height:1.7;color:var(--bone)}
.spec dd small{display:block;margin-top:7px;font-size:11.5px;line-height:1.9;color:var(--muted)}
.sec-cta{margin-top:clamp(44px,6vh,76px)}
.sec-cta .cta{margin-top:0}

/* ---- 背骨の線がスクロールで伸びる ---- */
const spineFill=document.getElementById('spineFill'), stepsEl=document.querySelector('.steps');
let spineRaf=null;
function updSpine(){
  spineRaf=null;
  const r=stepsEl.getBoundingClientRect();
  const p=Math.min(1,Math.max(0,(innerHeight*.72-r.top)/r.height));
  spineFill.style.height=(p*100).toFixed(1)+'%';
}
addEventListener('scroll',()=>{if(!spineRaf)spineRaf=requestAnimationFrame(updSpine);},{passive:true});
addEventListener('resize',()=>{if(!spineRaf)spineRaf=requestAnimationFrame(updSpine);});
updSpine();

/* ============ Collection ============ */
.collection{position:relative;background:var(--ink);padding:clamp(80px,12vh,150px) 0 clamp(90px,14vh,170px);
  border-top:.5px solid rgba(242,234,219,.1);overflow:hidden}
.col-top{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}
.col-top .sec-lead{margin-bottom:0}
.col-aside{display:flex;flex-direction:column;align-items:flex-end;gap:20px;flex-shrink:0}
.viewall{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);text-decoration:none;
  display:inline-flex;align-items:center;gap:10px;transition:gap .4s}
.viewall::after{content:"";width:22px;height:.5px;background:currentColor;transition:width .4s}
.viewall:hover::after{width:34px}
.arrows{display:flex;gap:10px}
.arrows button{width:40px;height:40px;border-radius:50%;background:transparent;cursor:pointer;
  border:.5px solid rgba(242,234,219,.24);color:var(--bone);font-size:13px;line-height:1;
  transition:border-color .4s,color .4s,opacity .4s}
.arrows button:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}
.arrows button:disabled{opacity:.28;cursor:default}

.rail-wrap{margin-top:clamp(44px,7vh,84px);padding-left:max(var(--gut),calc((100vw - 1300px)/2 + var(--gut)))}
.rail{display:flex;gap:clamp(18px,2.4vw,34px);overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding:0 var(--gut) clamp(56px,7vh,78px) 0}
.rail::-webkit-scrollbar{display:none}

.card{flex:0 0 auto;width:clamp(186px,22vw,272px);scroll-snap-align:start;text-decoration:none;display:block;
  transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.card:nth-child(1){margin-top:0}
.card:nth-child(2){margin-top:clamp(20px,4.6vh,46px)}
.card:nth-child(3){margin-top:clamp(6px,1.6vh,16px)}
.card:nth-child(4){margin-top:clamp(26px,6vh,60px)}
.card:nth-child(5){margin-top:clamp(12px,2.8vh,28px)}
.card:hover{transform:translateY(-10px)}

.card-img{position:relative;aspect-ratio:4/5;background:#1F0B11;border:.5px solid rgba(242,234,219,.13);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.94) brightness(.97);
  transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.card:hover .card-img img{transform:scale(1.045)}
.card-img::after{content:"";position:absolute;inset:auto 0 0 0;height:26%;
  background:linear-gradient(180deg,transparent,rgba(20,5,8,.34))}

.card-meta{padding:clamp(14px,2vh,20px) 2px 0}
.card-line{font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);opacity:.85}
.card-name{margin-top:9px;font-family:var(--jp);font-size:clamp(13.5px,1.05vw,16px);line-height:1.5;color:var(--bone)}
.card-foot{margin-top:11px;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.card-price{font-family:var(--display);font-size:clamp(13px,1vw,15.5px);letter-spacing:.02em;color:rgba(242,234,219,.78);font-variant-numeric:tabular-nums}
.card-price em{font-style:normal;font-size:10.5px;color:var(--muted);margin-left:5px}
.card-go{font-size:13px;color:var(--gold);opacity:0;transform:translateX(-6px);transition:opacity .45s,transform .45s}
.card:hover .card-go{opacity:1;transform:none}

.rail-bar{margin-top:clamp(26px,4vh,44px);height:.5px;background:rgba(242,234,219,.13);position:relative}
.rail-bar i{position:absolute;left:0;top:-.5px;height:1.5px;background:var(--gold);width:22%;transition:transform .18s linear;transform-origin:left}

@media (max-width:820px){
  .col-top{align-items:flex-start;gap:26px}
  .col-aside{align-items:flex-start;width:100%;flex-direction:row;justify-content:space-between;align-items:center}
  .card{width:min(62vw,260px)}
  .card:nth-child(2){margin-top:22px}
  .card:nth-child(3){margin-top:8px}
  .card:nth-child(4){margin-top:30px}
  .card:nth-child(5){margin-top:14px}
  .arrows{display:none}
}

/* ---- スクロールで現れる ---- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity 1.05s cubic-bezier(.22,.61,.36,1),transform 1.05s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}

@media (max-width:820px){
  .steps{padding-left:22px;margin-top:clamp(48px,7vh,80px)}
  .step,.step:nth-of-type(even){grid-template-columns:minmax(0,1fr);gap:clamp(22px,3.4vh,32px);margin-bottom:clamp(56px,9vh,92px)}
  .step:nth-of-type(even) .plate{order:0}
  .step::before{left:-24.5px}
  .plate{aspect-ratio:1/.9}
  .bignum{font-size:clamp(76px,22vw,110px)}
  .fig--main{left:22%;width:78%}
  .dgm{width:70%}
  .step:nth-of-type(even) .fig--main{left:22%;right:auto}
  .fig--sub{width:40%;box-shadow:0 0 0 8px var(--ink)}
  .step:nth-of-type(even) .fig--sub{left:auto;right:0}
  .specs{grid-template-columns:1fr 1fr;gap:28px 24px}
  .sec-lead,.step p{max-width:none}
}

/* ============================================================
   下層ページ（Store / Collection）
   トップはヒーロー上にヘッダーを重ねるが、下層は面として置く。
   ============================================================ */
.bar--solid{position:sticky;top:0;background:rgba(20,5,8,.86);
  backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:.5px solid rgba(242,234,219,.1)}
.nav a.is-here{color:var(--bone)}

/* 下層ページの導入。ヒーローを持たないぶん、余白で静けさをつくる */
.page-head{padding:clamp(72px,14vh,150px) 0 clamp(48px,8vh,90px)}
.page-head .sec-title{font-size:clamp(28px,3.6vw,54px)}

.section{padding:clamp(56px,9vh,110px) 0}
.section + .section{border-top:.5px solid rgba(242,234,219,.1)}

/* 店舗：写真と情報を左右に置き、情報は既存の .specs を流用する */
.place{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(28px,4vw,64px);align-items:start}
.place + .place{margin-top:clamp(56px,9vh,104px);padding-top:clamp(56px,9vh,104px);
  border-top:.5px solid rgba(242,234,219,.1)}
/* 外観写真は縦位置（4:5）。横長に切ると建物の縦の伸びが失われるので正方形で受ける */
.place-photo{position:relative;aspect-ratio:1/1;overflow:hidden;
  border:.5px solid rgba(242,234,219,.13);background:#1F0B11}
.place-photo img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.94) brightness(.97)}
.place-tag{position:absolute;left:0;bottom:0;padding:9px 16px;
  background:rgba(20,5,8,.82);font-family:var(--util);font-size:9.5px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.place-name{font-family:var(--jp);font-size:clamp(20px,2.1vw,30px);line-height:1.5;color:var(--bone)}
.place-note{margin-top:clamp(16px,2.2vh,24px);font-family:var(--jp);
  font-size:clamp(13px,1vw,15px);line-height:2.25;color:var(--muted);max-width:32em}
.place .specs{margin-top:clamp(28px,4vh,44px);padding-top:clamp(24px,3.4vh,34px);
  grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.4vw,34px)}

/* 来店前に：3項目だけ。増やさない */
.visit{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,64px);
  margin-top:clamp(40px,6vh,72px)}
.visit-item dt{font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px}
.visit-item dd{font-family:var(--jp);font-size:clamp(13px,1vw,15px);line-height:2.2;color:var(--muted)}
.visit-item dd b{display:block;font-weight:500;color:var(--bone);margin-bottom:8px}

/* フッター */
.site-foot{border-top:.5px solid rgba(242,234,219,.1);
  padding:clamp(40px,6vh,64px) 0 clamp(30px,4.5vh,44px)}
.foot-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:20px}
.foot-nav{display:flex;gap:clamp(18px,2.4vw,34px)}
.foot-nav a{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;transition:color .35s}
.foot-nav a:hover{color:var(--bone)}
.foot-copy{margin-top:clamp(28px,4vh,44px);font-family:var(--util);
  font-size:10.5px;letter-spacing:.18em;color:rgba(242,234,219,.32)}

@media (max-width:820px){
  .place{grid-template-columns:minmax(0,1fr);gap:clamp(22px,3.4vh,32px)}
  .visit{grid-template-columns:minmax(0,1fr);gap:clamp(26px,4vh,38px)}
  .place .specs{grid-template-columns:1fr 1fr}
}


/* ============================================================
   Collection 一覧と、色ごとの詳細ページ
   トップのレール用 .card を流用し、並べ方だけを差し替える。
   ============================================================ */
.col-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.6vw,40px) clamp(18px,2.4vw,34px);margin-top:clamp(44px,7vh,84px)}
.col-grid .card{width:auto;margin-top:0}          /* レールの段差をここでは使わない */
.col-grid--sm{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(28px,4vh,48px)}

/* 型はひとつなので、全体像は1枚だけ置いて全色で共有する */
.form-note{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(28px,4vw,64px);align-items:center;margin-top:clamp(56px,9vh,104px);
  padding-top:clamp(48px,7vh,88px);border-top:.5px solid rgba(242,234,219,.1)}
.form-photo{aspect-ratio:4/5;overflow:hidden;border:.5px solid rgba(242,234,219,.13);background:#1F0B11}
.form-photo img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.94) brightness(.97)}

/* ---- 詳細ページ ---- */
.crumb{display:flex;align-items:baseline;gap:12px;
  padding-top:clamp(28px,4.5vh,48px);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase}
.crumb a{color:var(--muted);text-decoration:none;transition:color .35s}
.crumb a:hover{color:var(--bone)}
.crumb span{color:rgba(242,234,219,.28)}
.crumb em{font-style:normal;font-family:var(--jp);letter-spacing:.06em;text-transform:none;color:var(--bone)}

.pdp{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(32px,5vw,88px);align-items:start;padding:clamp(36px,6vh,72px) 0 clamp(56px,9vh,110px)}
.pdp-main{aspect-ratio:4/5;overflow:hidden;border:.5px solid rgba(242,234,219,.13);background:#1F0B11}
.pdp-main img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.94) brightness(.97)}
.pdp-thumbs{display:flex;gap:10px;margin-top:12px}
.pdp-thumb{width:clamp(56px,6vw,78px);aspect-ratio:1/1;padding:0;overflow:hidden;cursor:pointer;
  background:#1F0B11;border:.5px solid rgba(242,234,219,.13);transition:border-color .35s,opacity .35s;opacity:.6}
.pdp-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pdp-thumb:hover{opacity:.85}
.pdp-thumb.is-on{opacity:1;border-color:rgba(192,161,107,.7)}

.pdp-no{font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.pdp-name{margin-top:clamp(14px,2vh,20px);font-family:var(--jp);font-weight:500;
  font-size:clamp(26px,3vw,42px);line-height:1.4;color:var(--bone)}
.pdp-price{margin-top:clamp(12px,1.8vh,18px);font-family:var(--display);
  font-size:clamp(16px,1.4vw,21px);letter-spacing:.02em;color:rgba(242,234,219,.8);font-variant-numeric:tabular-nums}
.pdp-price em{font-style:normal;font-size:11px;color:var(--muted);margin-left:7px}
.pdp-note{margin-top:clamp(22px,3.2vh,34px);font-family:var(--jp);
  font-size:clamp(13px,1vw,15px);line-height:2.3;color:var(--muted)}
.pdp .specs{margin-top:clamp(30px,4.5vh,50px);padding-top:clamp(26px,3.6vh,38px);
  grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.4vw,32px)}

@media (max-width:820px){
  .col-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .col-grid--sm{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-note,.pdp{grid-template-columns:minmax(0,1fr);gap:clamp(24px,3.6vh,34px)}
}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

@media (max-width:820px){
  :root{--img-x:64;--img-y:82;--img-zoom:1.3}
  .stage{min-height:640px}
  .layer{inset:auto 0 0 0;height:58%;background-size:auto 130%}
  .l-grain{inset:0;height:auto;background-size:200px}
  .l-subject{display:none}
  .l-shade{background:linear-gradient(180deg,var(--ink) 0%,rgba(20,5,8,.9) 16%,rgba(20,5,8,.24) 38%,rgba(20,5,8,0) 58%,rgba(20,5,8,.42) 100%)}
  .copy{left:7%;right:7%;top:13%;max-width:none;transform:none}
  .head{font-size:clamp(40px,13.4vw,74px)}
  .lede{font-size:13px;line-height:1.95;max-width:none}
  .cta{padding:14px 26px}
  .nav{display:none}
  .cue{bottom:22px;left:7%}
  .panel{width:auto;left:14px;right:14px}
}
@media (prefers-reduced-motion:reduce){
  .tie{transition:none}
  .copy-in{animation:none}
}