@charset "utf-8";
/* =========================================================
   AURUM TOKYO ─ ハイジュエリー LP
   Dark / Gold / Editorial / Horizontal scroll
   ========================================================= */

:root{
  --bk:#0a0a0b;
  --bk2:#111113;
  --gold:#b3924f;
  --gold-l:#d8bd85;
  --cream:#e9e4d9;
  --gray:#8b8880;
  --lat:"Cormorant Garamond",serif;
  --ser:"Shippori Mincho",serif;
  --sans:"Noto Sans JP",sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bk);color:var(--cream);font-family:var(--sans);font-weight:300;
  font-size:14px;line-height:2.1;letter-spacing:.06em;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}

::selection{background:var(--gold);color:#000}

.eyebrow{font-family:var(--lat);font-size:11.5px;letter-spacing:.5em;color:var(--gold);margin-bottom:18px}

/* ===================== CURSOR ===================== */
.cursor,.cursor-dot{position:fixed;top:0;left:0;pointer-events:none;z-index:999;border-radius:50%;mix-blend-mode:difference;opacity:0}
body.has-cursor .cursor,body.has-cursor .cursor-dot{opacity:1}
.cursor{width:34px;height:34px;border:1px solid rgba(255,255,255,.6);transform:translate(-50%,-50%);
  transition:width .35s,height .35s,background .35s,opacity .3s}
.cursor.is-big{width:74px;height:74px;background:rgba(255,255,255,.14);border-color:transparent}
.cursor-dot{width:4px;height:4px;background:#fff;transform:translate(-50%,-50%)}
@media (hover:none){.cursor,.cursor-dot{display:none}}

/* ===================== LOADER ===================== */
.loader{
  position:fixed;inset:0;z-index:900;background:var(--bk);display:grid;place-content:center;justify-items:center;gap:26px;
  transition:opacity .8s .3s,visibility .8s .3s;
}
.loader.is-done{opacity:0;visibility:hidden}
.loader__logo{font-family:var(--lat);font-size:34px;letter-spacing:.6em;color:var(--cream);padding-left:.6em}
.loader__bar{display:block;width:180px;height:1px;background:rgba(255,255,255,.15);overflow:hidden}
.loader__bar i{display:block;height:100%;width:0;background:var(--gold);animation:ld 1.5s cubic-bezier(.6,0,.2,1) forwards}
@keyframes ld{to{width:100%}}

/* ===================== HEADER ===================== */
.hd{
  position:fixed;top:0;left:0;right:0;z-index:200;height:86px;padding:0 40px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  transition:background .5s,height .5s,border-color .5s;border-bottom:1px solid transparent;
}
.hd.is-solid{background:rgba(10,10,11,.86);backdrop-filter:blur(14px);height:70px;border-bottom-color:rgba(255,255,255,.08)}
.hd__place{font-family:var(--lat);font-size:11px;letter-spacing:.4em;color:var(--gray)}
.hd__logo{font-family:var(--lat);font-size:26px;letter-spacing:.52em;padding-left:.52em;color:var(--cream);text-align:center;transition:.4s}
.hd__right{display:flex;justify-content:flex-end;align-items:center;gap:28px}
.hd__book{font-family:var(--lat);font-size:11.5px;letter-spacing:.34em;color:var(--gold);
  border-bottom:1px solid rgba(179,146,79,.4);padding-bottom:4px;transition:.35s}
.hd__book:hover{color:var(--gold-l);border-color:var(--gold-l)}
.hd__menu{background:none;border:0;width:34px;height:14px;position:relative;cursor:pointer}
.hd__menu span{position:absolute;left:0;height:1px;background:var(--cream);transition:.4s cubic-bezier(.2,.8,.2,1)}
.hd__menu span:nth-child(1){top:0;width:100%}
.hd__menu span:nth-child(2){bottom:0;width:62%}
.hd__menu:hover span:nth-child(2){width:100%}
.hd__menu.is-open span:nth-child(1){top:6px;transform:rotate(45deg)}
.hd__menu.is-open span:nth-child(2){bottom:7px;width:100%;transform:rotate(-45deg)}

/* ===================== OVERLAY MENU ===================== */
.ov{
  position:fixed;inset:0;z-index:190;background:var(--bk2);
  clip-path:inset(0 0 100% 0);transition:clip-path .9s cubic-bezier(.76,0,.24,1);
}
.ov.is-open{clip-path:inset(0 0 0 0)}
.ov__inner{height:100%;padding:120px 40px 40px;display:grid;grid-template-columns:1fr .8fr;grid-template-rows:1fr auto;gap:40px}
.ov__nav{display:flex;flex-direction:column;justify-content:center;gap:6px}
.ov__nav a{
  display:flex;align-items:baseline;gap:20px;padding:14px 0;position:relative;
  font-family:var(--lat);font-size:clamp(30px,4.4vw,64px);letter-spacing:.1em;line-height:1.1;color:var(--cream);
  opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s,color .35s;
}
.ov.is-open .ov__nav a{opacity:1;transform:none}
.ov.is-open .ov__nav a:nth-child(1){transition-delay:.35s}
.ov.is-open .ov__nav a:nth-child(2){transition-delay:.43s}
.ov.is-open .ov__nav a:nth-child(3){transition-delay:.51s}
.ov.is-open .ov__nav a:nth-child(4){transition-delay:.59s}
.ov.is-open .ov__nav a:nth-child(5){transition-delay:.67s}
.ov__nav a i{font-style:normal;font-size:12px;letter-spacing:.3em;color:var(--gold);font-family:var(--lat)}
.ov__nav a em{font-family:var(--ser);font-style:normal;font-size:13px;letter-spacing:.2em;color:var(--gray);align-self:center}
.ov__nav a:hover{color:var(--gold-l)}
.ov__vis{overflow:hidden;align-self:stretch;position:relative;filter:grayscale(.2)}
.ov__vis img{transition:opacity .5s}
.ov__foot{grid-column:1/3;display:flex;justify-content:space-between;align-items:flex-end;
  border-top:1px solid rgba(255,255,255,.1);padding-top:26px;font-size:11.5px;color:var(--gray);letter-spacing:.12em;line-height:2}
.ov__tel{font-family:var(--lat);font-size:24px;letter-spacing:.16em;color:var(--cream)}

/* ===================== HERO ===================== */
.hero{position:relative;height:100vh;min-height:620px;overflow:hidden;display:grid;place-items:center}
.hero__bg{position:absolute;inset:0}
.hero__bg img{transform:scale(1.14);animation:kb 22s ease-out forwards;filter:brightness(.62) saturate(.85)}
@keyframes kb{to{transform:scale(1)}}
.hero__veil{position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.1) 0%,rgba(0,0,0,.72) 78%)}
.hero__center{position:relative;text-align:center;padding:0 24px}
.hero__sub{font-family:var(--lat);font-size:11.5px;letter-spacing:.52em;line-height:2.2;color:var(--gold-l);margin-bottom:34px}
.hero__h1{font-family:var(--lat);font-weight:300;font-size:clamp(44px,8vw,120px);line-height:1.06;letter-spacing:.04em}
.hero__h1 span{display:block}
.hero__h1 em{font-style:italic;color:var(--gold-l)}
.hero__ja{font-family:var(--ser);font-size:clamp(13px,1.5vw,17px);letter-spacing:.36em;margin-top:34px;color:rgba(233,228,217,.82)}
.hero__scroll{position:absolute;bottom:38px;left:50%;transform:translateX(-50%);text-align:center}
.hero__scroll span{font-family:var(--lat);font-size:10px;letter-spacing:.4em;color:var(--gray)}
.hero__scroll i{display:block;width:1px;height:52px;margin:12px auto 0;background:rgba(255,255,255,.2);position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;left:0;width:100%;height:40%;background:var(--gold);animation:sc 2.2s cubic-bezier(.7,0,.3,1) infinite}
@keyframes sc{0%{top:-40%}60%,100%{top:100%}}
.hero__side{position:absolute;top:50%;font-family:var(--lat);font-size:10.5px;letter-spacing:.42em;color:var(--gray)}
.hero__side--l{left:26px;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl}
.hero__side--r{right:26px;transform:translateY(-50%);writing-mode:vertical-rl}

/* ===================== STATEMENT ===================== */
.stmt{padding:150px 8% 130px;text-align:center;max-width:900px;margin:0 auto}
.stmt__mark{font-family:var(--lat);font-size:26px;color:var(--gold);margin-bottom:34px}
.stmt__txt{font-family:var(--ser);font-size:clamp(20px,2.7vw,34px);line-height:2;letter-spacing:.14em;font-weight:400}
.stmt__txt span{color:var(--gold-l)}
.stmt__note{margin-top:44px;font-size:13.5px;line-height:2.4;color:var(--gray);letter-spacing:.1em}

/* ===================== CHAPTERS ===================== */
.chapters{padding:0 6%}
.chap{display:grid;grid-template-columns:1fr 1.15fr;gap:80px;padding:110px 0;
  border-top:1px solid rgba(255,255,255,.09)}
.chap--alt{grid-template-columns:1.15fr 1fr}
.chap--alt .chap__txt{order:2}
.chap__txt{position:sticky;top:130px;align-self:start}
.chap__no{font-family:var(--lat);font-size:11.5px;letter-spacing:.44em;color:var(--gold)}
.chap__ttl{font-family:var(--ser);font-weight:500;font-size:clamp(28px,3.4vw,44px);letter-spacing:.16em;
  line-height:1.6;margin:22px 0 30px}
.chap__body{font-size:13.8px;line-height:2.5;color:rgba(233,228,217,.76);letter-spacing:.09em;max-width:30em}
.chap__body b{font-weight:400;color:var(--gold-l);border-bottom:1px solid rgba(179,146,79,.45);padding-bottom:1px}
.chap__spec{margin-top:38px;border-top:1px solid rgba(255,255,255,.1)}
.chap__spec li{display:flex;gap:22px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.07);
  font-size:12.5px;color:var(--gray);letter-spacing:.1em}
.chap__spec span{font-family:var(--lat);color:var(--cream);min-width:84px;letter-spacing:.16em;font-size:12px;padding-top:1px}

.chap__vis{display:flex;flex-direction:column;gap:70px}
.chap__fig{overflow:hidden}
.chap__fig--1{height:560px}
.chap__fig--2{height:420px;width:72%;align-self:flex-end}
.chap--alt .chap__fig--2{align-self:flex-start}
.chap__fig img{transition:transform 1.4s cubic-bezier(.2,.8,.2,1);filter:brightness(.92)}
.chap__fig:hover img{transform:scale(1.05)}

/* ===================== FIGURES ===================== */
.figures{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.09);
  border-bottom:1px solid rgba(255,255,255,.09);margin:40px 6% 0}
.fig{padding:64px 20px;text-align:center;border-left:1px solid rgba(255,255,255,.07)}
.fig:first-child{border-left:0}
.fig b{display:block;font-family:var(--lat);font-weight:300;font-size:clamp(40px,4.6vw,64px);
  letter-spacing:.04em;color:var(--gold-l);line-height:1}
.fig span{display:block;margin-top:16px;font-size:11px;letter-spacing:.22em;color:var(--gray)}

/* ===================== COLLECTION (horizontal) ===================== */
.coll{padding:140px 0 130px;overflow:hidden}
.coll__head{display:flex;justify-content:space-between;align-items:flex-end;padding:0 6%;margin-bottom:60px}
.coll__ttl{font-family:var(--ser);font-weight:500;font-size:clamp(26px,3.2vw,40px);letter-spacing:.18em}
.coll__hint{font-family:var(--lat);font-size:11px;letter-spacing:.34em;color:var(--gray)}
.coll__track{
  display:flex;gap:44px;padding:0 6%;overflow-x:auto;scroll-snap-type:x proximity;
  cursor:grab;scrollbar-width:none;padding-bottom:20px;
}
.coll__track::-webkit-scrollbar{display:none}
.coll__track.is-drag{cursor:grabbing}
.cl{flex:0 0 380px;scroll-snap-align:center}
.cl__img{height:490px;overflow:hidden;background:#141416}
.cl__img img{transition:transform 1.3s cubic-bezier(.2,.8,.2,1);filter:brightness(.95)}
.cl:hover .cl__img img{transform:scale(1.06)}
.cl__meta{padding-top:26px}
.cl__no{font-family:var(--lat);font-size:11px;letter-spacing:.3em;color:var(--gold)}
.cl__meta h3{font-family:var(--lat);font-size:26px;letter-spacing:.22em;font-weight:400;margin:8px 0 14px}
.cl__meta h3 em{display:block;font-family:var(--ser);font-style:normal;font-size:11.5px;
  letter-spacing:.28em;color:var(--gray);margin-top:6px}
.cl__d{font-size:12.5px;line-height:2.1;color:rgba(233,228,217,.66)}
.cl__p{font-family:var(--lat);font-size:19px;letter-spacing:.1em;color:var(--gold-l);margin-top:18px;
  padding-top:14px;border-top:1px solid rgba(255,255,255,.12)}

/* ===================== ATELIER ===================== */
.atelier{position:relative;min-height:88vh;display:flex;align-items:center;justify-content:flex-end;padding:100px 6%}
.atelier__bg{position:absolute;inset:0}
.atelier__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,11,.2),rgba(10,10,11,.9))}
.atelier__bg img{filter:brightness(.7) saturate(.8)}
.atelier__card{position:relative;max-width:520px;background:rgba(10,10,11,.72);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.1);padding:56px 50px}
.atelier__ttl{font-family:var(--ser);font-weight:500;font-size:clamp(24px,2.6vw,32px);line-height:1.75;letter-spacing:.13em}
.atelier__txt{margin-top:26px;font-size:13.5px;line-height:2.4;color:rgba(233,228,217,.74)}
.atelier__list{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,255,255,.12)}
.atelier__list li{font-size:12px;letter-spacing:.14em;color:var(--gray)}
.atelier__list b{font-weight:400;color:var(--gold-l);margin-right:8px}

/* ===================== BESPOKE ===================== */
.bespoke{padding:140px 6% 0}
.bespoke__head{text-align:center;max-width:700px;margin:0 auto 70px}
.bespoke__ttl{font-family:var(--ser);font-weight:500;font-size:clamp(26px,3.2vw,40px);letter-spacing:.18em}
.bespoke__lead{margin-top:24px;font-size:13.5px;line-height:2.3;color:var(--gray)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(255,255,255,.1)}
.steps li{padding:44px 30px;border-left:1px solid rgba(255,255,255,.08);transition:background .45s}
.steps li:first-child{border-left:0}
.steps li:hover{background:rgba(255,255,255,.03)}
.steps span{font-family:var(--lat);font-size:38px;color:rgba(179,146,79,.5);line-height:1}
.steps h3{font-family:var(--ser);font-weight:500;font-size:17px;letter-spacing:.14em;margin:16px 0 14px}
.steps p{font-size:12.5px;line-height:2.1;color:var(--gray)}
.bespoke__vis{height:520px;margin-top:90px;overflow:hidden;filter:brightness(.9)}

/* ===================== SALON ===================== */
.salon{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;margin-top:130px}
.salon__vis{min-height:640px;overflow:hidden}
.salon__vis img{filter:brightness(.78) saturate(.9)}
.salon__body{padding:100px 7%;background:var(--bk2);display:flex;flex-direction:column;justify-content:center}
.salon__ttl{font-family:var(--ser);font-weight:500;font-size:clamp(26px,2.8vw,36px);line-height:1.7;letter-spacing:.15em}
.salon__txt{margin-top:26px;font-size:13.5px;line-height:2.4;color:var(--gray)}
.salon__info{margin:40px 0 44px;border-top:1px solid rgba(255,255,255,.1)}
.salon__info>div{display:flex;gap:26px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.salon__info dt{font-family:var(--lat);font-size:11.5px;letter-spacing:.24em;color:var(--gold);min-width:88px;padding-top:4px}
.salon__info dd{font-size:12.8px;color:rgba(233,228,217,.8);line-height:1.9}
.salon__info a{border-bottom:1px solid rgba(255,255,255,.3)}

.goldbtn{position:relative;display:inline-block;align-self:flex-start;padding:20px 54px;border:1px solid var(--gold);
  overflow:hidden;font-size:13px;letter-spacing:.22em;color:var(--gold-l);transition:color .45s}
.goldbtn::before{content:"";position:absolute;inset:0;background:var(--gold);transform:translateY(101%);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.goldbtn span{position:relative;z-index:2}
.goldbtn:hover{color:#0a0a0b}
.goldbtn:hover::before{transform:none}

/* ===================== FOOTER ===================== */
.ft{text-align:center;padding:100px 6% 50px;border-top:1px solid rgba(255,255,255,.08)}
.ft__logo{font-family:var(--lat);font-size:30px;letter-spacing:.56em;padding-left:.56em}
.ft__ja{font-family:var(--ser);font-size:11.5px;letter-spacing:.36em;color:var(--gray);margin-top:12px}
.ft__nav{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 34px;margin:46px 0 40px}
.ft__nav a{font-family:var(--lat);font-size:11.5px;letter-spacing:.3em;color:var(--gray);transition:.3s}
.ft__nav a:hover{color:var(--gold-l)}
.ft__copy{font-size:10.5px;letter-spacing:.14em;color:#5b5953}

/* ===================== reveal ===================== */
[data-rv]{opacity:0;transform:translateY(34px);transition:opacity 1.1s cubic-bezier(.2,.8,.2,1),transform 1.1s cubic-bezier(.2,.8,.2,1)}
[data-rv].is-in{opacity:1;transform:none}

/* ===================== RESPONSIVE ===================== */
@media (max-width:1080px){
  .chap,.chap--alt{grid-template-columns:1fr;gap:44px}
  .chap--alt .chap__txt{order:0}
  .chap__txt{position:static}
  .chap__fig--1{height:400px}
  .chap__fig--2{height:300px;width:80%}
  .figures{grid-template-columns:repeat(2,1fr)}
  .fig:nth-child(3){border-left:0}
  .fig:nth-child(n+3){border-top:1px solid rgba(255,255,255,.07)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .steps li:nth-child(3){border-left:0}
  .steps li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.08)}
  .salon{grid-template-columns:1fr}
  .salon__vis{min-height:380px}
  .ov__inner{grid-template-columns:1fr}
  .ov__vis{display:none}
}

@media (max-width:720px){
  .hd{padding:0 18px;height:64px;display:flex;justify-content:space-between}
  .hd__left{display:none}
  .hd__logo{font-size:19px;letter-spacing:.3em;padding-left:.3em;text-align:left}
  .hd__right{gap:16px}
  .hd__book{font-size:10px;letter-spacing:.2em;padding-bottom:3px}
  .hero__side{display:none}
  .stmt{padding:96px 24px 84px}
  .chapters{padding:0 24px}
  .chap{padding:70px 0}
  .figures{margin:20px 24px 0}
  .fig{padding:40px 12px}
  .coll{padding:96px 0}
  .coll__head{padding:0 24px;margin-bottom:36px;flex-direction:column;align-items:flex-start;gap:12px}
  .coll__track{padding:0 24px 20px;gap:26px}
  .cl{flex:0 0 76vw}
  .cl__img{height:360px}
  .atelier{padding:80px 24px;min-height:auto}
  .atelier__card{padding:38px 26px}
  .atelier__bg::after{background:linear-gradient(to top,rgba(10,10,11,.92),rgba(10,10,11,.55))}
  .bespoke{padding:96px 24px 0}
  .bespoke__vis{height:340px;margin-top:56px}
  .salon__body{padding:72px 24px}
  .ov__inner{padding:100px 24px 30px}
  .ov__nav a{gap:12px;padding:9px 0}
  .ov__nav a em{display:none}
  .ov__foot{grid-column:1;flex-direction:column;align-items:flex-start;gap:14px}
  .ft{padding:76px 24px 40px}
}