/* ==========================================================================
   SAKE PICKS — YMY-inspired immersive editorial template
   Theme: BLACK / RED / GOLD
   Assets intentionally use placeholders.
   ========================================================================== */

:root{
  --black:#080808;
  --black-2:#11110f;
  --black-3:#171613;
  --ivory:#f0eadf;
  --ivory-2:#d9d0c1;
  --red:#9d1f1b;
  --red-bright:#c22d24;
  --red-deep:#57100e;
  --gold:#c6a35c;
  --gold-light:#e2c77d;
  --gold-dark:#80652d;
  --line:rgba(240,234,223,.18);
  --line-dark:rgba(8,8,8,.18);
  --sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:"Yu Mincho","Hiragino Mincho ProN","Hiragino Mincho Pro","Iowan Old Style","Times New Roman",serif;
  --max:1600px;
  --pad:clamp(24px,4vw,72px);
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--black)}
body{
  margin:0;
  background:var(--black);
  color:var(--ivory);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:90;
  opacity:.12;
  background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px),
    radial-gradient(circle at 40% 20%,rgba(255,255,255,.05),transparent 38%);
  mix-blend-mode:soft-light;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
img{display:block;max-width:100%}
em{font-weight:400;color:var(--gold);font-style:italic}
::selection{background:var(--red);color:white}

.section-dark{background:var(--black);color:var(--ivory)}
.section-red{background:var(--red);color:var(--ivory)}
.section-gold{background:var(--gold);color:var(--black)}

/* intro */
.intro{
  position:fixed;
  inset:0;
  z-index:9999;
  background:var(--black);
  display:grid;
  place-items:center;
  transition:transform 1.15s var(--ease),visibility 1.15s;
}
.intro.is-done{transform:translateY(-100%);visibility:hidden}
.intro__mark{display:grid;justify-items:center;gap:16px;position:relative;z-index:2}
.intro__kanji{
  display:grid;place-items:center;
  width:74px;height:74px;border:1px solid var(--gold);
  color:var(--gold);font:400 44px/1 var(--serif)
}
.intro__mark strong{font-size:12px;letter-spacing:.32em}
.intro__line{
  position:absolute;
  left:0;top:50%;width:0;height:1px;background:var(--red);
  animation:introLine 1.55s var(--ease) forwards
}
.intro__counter{
  position:absolute;right:32px;bottom:28px;
  color:var(--gold);font:400 12px/1 var(--serif);letter-spacing:.2em
}
@keyframes introLine{to{width:100%}}

/* pointer orb */
.cursor-orb{
  position:fixed;
  left:0;top:0;
  width:48px;height:48px;
  border:1px solid rgba(198,163,92,.55);
  border-radius:50%;
  z-index:1000;
  pointer-events:none;
  transform:translate(-50%,-50%);
  transition:width .22s var(--ease),height .22s var(--ease),background .22s;
  mix-blend-mode:difference
}
.cursor-orb.is-hover{width:72px;height:72px;background:rgba(198,163,92,.18)}
@media(pointer:coarse){.cursor-orb{display:none}}

/* progress */
.scroll-progress{
  position:fixed;left:0;top:0;width:100%;height:2px;z-index:3000;background:transparent
}
.scroll-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--red),var(--gold))}

/* header */
.header{
  position:fixed;
  z-index:500;
  left:0;right:0;top:0;
  height:88px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 var(--pad);
  border-bottom:1px solid rgba(240,234,223,.11);
  background:linear-gradient(to bottom,rgba(8,8,8,.76),rgba(8,8,8,0));
  backdrop-filter:blur(2px);
  transition:height .35s var(--ease),background .35s
}
.header.is-scrolled{height:68px;background:rgba(8,8,8,.88);backdrop-filter:blur(14px)}
.logo{display:inline-flex;align-items:center;gap:13px;width:max-content}
.logo__stamp{
  width:40px;height:40px;display:grid;place-items:center;
  border:1px solid var(--gold);color:var(--gold);font:400 22px/1 var(--serif)
}
.logo__text{display:grid;gap:2px}
.logo__text strong{font-size:10px;letter-spacing:.23em}
.logo__text small{font-size:8px;letter-spacing:.06em;color:rgba(240,234,223,.52)}
.nav{display:flex;gap:32px;font-size:9px;letter-spacing:.18em;text-transform:uppercase}
.nav a{position:relative;padding:8px 0}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:width .35s var(--ease)
}
.nav a:hover::after{width:100%}
.header__right{justify-self:end;display:flex;align-items:center;gap:22px}
.age{font-size:9px;color:var(--gold);border:1px solid rgba(198,163,92,.45);padding:7px 8px}
.menu-button{display:none;background:none;border:0;width:34px;height:34px;padding:8px;cursor:pointer}
.menu-button span{display:block;width:100%;height:1px;background:var(--ivory);margin:5px 0}

/* shared */
.kicker{
  margin:0 0 18px;
  font-size:9px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)
}
.arrow-link{
  display:inline-flex;align-items:center;gap:18px;
  margin-top:30px;font-size:9px;font-weight:800;letter-spacing:.18em
}
.arrow-link span{color:var(--gold)}
.button{
  min-height:52px;padding:0 20px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid currentColor;
  font-size:9px;font-weight:800;letter-spacing:.16em;
  transition:transform .25s var(--ease),background .25s,color .25s
}
.button:hover{transform:translateY(-3px)}
.button--red{background:var(--red);border-color:var(--red);color:white}
.button--outline{color:var(--ivory);border-color:rgba(240,234,223,.38)}
.button--gold{background:var(--gold);border-color:var(--gold);color:var(--black)}
.button--glass{background:rgba(8,8,8,.22);border-color:rgba(240,234,223,.34);backdrop-filter:blur(8px)}

.media-placeholder{
  position:relative;overflow:hidden;
  background:
    linear-gradient(125deg,rgba(198,163,92,.11),transparent 30%),
    radial-gradient(circle at 75% 20%,rgba(157,31,27,.30),transparent 28%),
    linear-gradient(135deg,#12110f,#24201a 48%,#080808);
}
.media-placeholder::before{
  content:"";
  position:absolute;inset:-20%;
  background:
    linear-gradient(35deg,transparent 42%,rgba(198,163,92,.07) 43% 44%,transparent 45%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.015) 0 1px,transparent 1px 36px);
  transform:rotate(-5deg)
}
.media-placeholder__grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:80px 80px
}
.media-placeholder__label{
  position:absolute;z-index:3;left:clamp(18px,3vw,48px);bottom:clamp(18px,3vw,48px);
  max-width:390px;padding:15px 16px;
  border-left:2px solid var(--gold);
  background:rgba(8,8,8,.56);backdrop-filter:blur(10px)
}
.media-placeholder__label small{display:block;color:var(--gold);font-size:8px;letter-spacing:.18em;margin-bottom:8px}
.media-placeholder__label strong{display:block;font:400 16px/1.4 var(--serif)}
.media-placeholder__label span{display:block;margin-top:5px;color:rgba(240,234,223,.53);font-size:9px}

/* HERO */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-columns:55% 45%;
  background:var(--black);
  overflow:hidden
}
.hero__visual{min-height:100svh;transform:scale(1.03)}
.hero__visual-number{
  position:absolute;right:24px;top:100px;color:rgba(240,234,223,.22);
  font:italic 400 160px/1 var(--serif);z-index:2
}
.hero__copy{
  position:relative;display:flex;flex-direction:column;justify-content:center;
  padding:130px var(--pad) 92px;
  background:
    radial-gradient(circle at 80% 20%,rgba(157,31,27,.13),transparent 26%),
    var(--black)
}
.eyebrow{
  display:flex;align-items:center;gap:14px;
  color:var(--gold);font-size:8px;letter-spacing:.18em;margin-bottom:36px
}
.eyebrow i{width:44px;height:1px;background:var(--gold)}
.hero__title{
  margin:0;
  font:400 clamp(62px,7.2vw,126px)/.84 var(--serif);
  letter-spacing:-.065em
}
.hero__title span{display:block}
.hero__lead{
  margin:42px 0 0;
  max-width:540px;
  font:400 clamp(16px,1.45vw,22px)/1.8 var(--serif);
  color:rgba(240,234,223,.72)
}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:18px 26px;margin-top:30px;
  color:rgba(240,234,223,.42);font-size:8px;letter-spacing:.12em
}
.scroll-link{
  margin-top:58px;display:inline-flex;align-items:center;gap:18px;width:max-content;
  font-size:8px;font-weight:800;letter-spacing:.18em
}
.scroll-link i{display:block;width:82px;height:1px;background:var(--gold);position:relative;overflow:hidden}
.scroll-link i::after{
  content:"";position:absolute;inset:0;background:var(--red);
  transform:translateX(-100%);animation:scan 2.4s ease-in-out infinite
}
@keyframes scan{50%,100%{transform:translateX(100%)}}
.hero__jp{
  position:absolute;right:18px;bottom:90px;writing-mode:vertical-rl;
  color:rgba(198,163,92,.46);font:400 11px/1 var(--serif);letter-spacing:.28em
}
.hero__ticker{
  position:absolute;left:0;right:0;bottom:0;height:44px;
  border-top:1px solid rgba(240,234,223,.12);background:rgba(8,8,8,.72);
  display:flex;align-items:center;overflow:hidden
}
.marquee{display:flex;width:max-content;animation:marquee 27s linear infinite}
.marquee span{white-space:nowrap;color:rgba(240,234,223,.54);font-size:8px;letter-spacing:.24em;padding-right:60px}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Manifesto */
.manifesto{
  min-height:95svh;
  display:grid;grid-template-columns:150px minmax(0,1fr) 240px;gap:60px;
  align-items:center;padding:130px var(--pad);
  border-top:1px solid var(--line)
}
.manifesto__index{
  align-self:start;color:rgba(240,234,223,.15);
  font:italic 400 82px/1 var(--serif)
}
.manifesto__text{max-width:1040px}
.manifesto h2{
  margin:0;
  font:400 clamp(46px,6vw,100px)/1.02 var(--serif);
  letter-spacing:-.055em
}
.manifesto h2 strong{font-weight:400;color:var(--red-bright)}
.manifesto__body{
  max-width:700px;margin:44px 0 0;
  color:rgba(240,234,223,.58);font-size:14px;line-height:1.95
}
.manifesto__seal{
  width:180px;height:180px;border:1px solid rgba(198,163,92,.35);border-radius:50%;
  display:grid;place-items:center;align-content:center;gap:6px;color:var(--gold);
  animation:slowSpin 18s linear infinite
}
.manifesto__seal b{font:400 60px/1 var(--serif)}
.manifesto__seal span{font-size:7px;letter-spacing:.28em}
@keyframes slowSpin{to{transform:rotate(360deg)}}

/* Story */
.story{
  background:var(--ivory);color:var(--black);
  display:grid;grid-template-columns:38% 62%;
  min-height:300vh
}
.story__sticky{
  position:sticky;top:0;height:100svh;
  padding:130px var(--pad) 70px;
  border-right:1px solid var(--line-dark);
  display:flex;flex-direction:column
}
.story__sticky .kicker{color:var(--red)}
.story__sticky h2{
  margin:0;font:400 clamp(46px,5vw,80px)/1 var(--serif);letter-spacing:-.05em
}
.story__sticky h2 em{color:var(--red)}
.story__steps{margin-top:auto;border-top:1px solid var(--line-dark)}
.story-step{
  width:100%;display:grid;grid-template-columns:46px 1fr;gap:6px 18px;
  align-items:start;text-align:left;
  background:none;border:0;border-bottom:1px solid var(--line-dark);
  padding:17px 0;color:rgba(8,8,8,.38);cursor:pointer;transition:color .3s
}
.story-step span{grid-row:1/3;font:italic 400 16px var(--serif);color:var(--red)}
.story-step strong{font-size:9px;letter-spacing:.18em}
.story-step small{font-size:9px}
.story-step.is-active{color:var(--black)}
.story__scenes{position:relative}
.story-scene{
  min-height:100svh;
  display:grid;grid-template-rows:minmax(62svh,1fr) auto;
  border-bottom:1px solid var(--line-dark)
}
.story-scene__visual{min-height:65svh}
.scene-number{
  position:absolute;right:26px;top:26px;color:rgba(240,234,223,.5);
  font:italic 400 96px/1 var(--serif);z-index:2
}
.story-scene__copy{padding:46px var(--pad) 62px;background:var(--ivory)}
.story-scene__copy .kicker{color:var(--red)}
.story-scene__copy h3{
  margin:0;font:400 clamp(34px,4vw,62px)/1.05 var(--serif);letter-spacing:-.04em
}
.story-scene__copy>p:not(.kicker){
  max-width:700px;margin:20px 0 0;color:rgba(8,8,8,.62);line-height:1.9;font-size:13px
}
.micro-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.micro-tags span{
  border:1px solid rgba(8,8,8,.20);border-radius:999px;padding:7px 10px;
  font-size:8px;letter-spacing:.08em;text-transform:uppercase
}

/* image break */
.image-break{height:180svh;background:var(--black)}
.image-break__sticky{
  position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center
}
.image-break__media{
  position:absolute;inset:0;
  transform:scale(.72);
  clip-path:inset(10% 12% round 1px);
  transition:none
}
.image-break__copy{
  position:relative;z-index:3;text-align:center;pointer-events:none
}
.image-break__copy>span{font-size:8px;letter-spacing:.26em;color:var(--gold)}
.image-break__copy h2{
  margin:20px 0 0;
  font:400 clamp(58px,9vw,150px)/.84 var(--serif);letter-spacing:-.065em;
  text-shadow:0 4px 25px rgba(0,0,0,.35)
}

/* pairing */
.pairing{padding:130px var(--pad)}
.pairing .kicker{color:var(--red-deep)}
.pairing__head{
  display:grid;grid-template-columns:1.3fr .7fr;gap:60px;align-items:end;
  max-width:var(--max);margin:0 auto 80px
}
.pairing__head h2{
  margin:0;font:400 clamp(58px,7vw,110px)/.9 var(--serif);letter-spacing:-.06em
}
.pairing__head>p{max-width:520px;margin:0;color:rgba(8,8,8,.62);line-height:1.9;font-size:12px}
.pairing__selector{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:repeat(5,1fr);
  border-top:1px solid rgba(8,8,8,.45);border-bottom:1px solid rgba(8,8,8,.45)
}
.pairing-choice{
  min-height:144px;padding:18px 15px;background:transparent;border:0;border-right:1px solid rgba(8,8,8,.26);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;
  color:rgba(8,8,8,.56);cursor:pointer;transition:background .35s,color .35s,transform .35s
}
.pairing-choice:last-child{border-right:0}
.pairing-choice span{font:italic 400 13px var(--serif)}
.pairing-choice strong{font-size:9px;letter-spacing:.13em}
.pairing-choice small{font-size:8px;opacity:.68}
.pairing-choice:hover,.pairing-choice.is-active{background:var(--black);color:var(--ivory);transform:translateY(-6px)}
.pairing__result{
  max-width:var(--max);margin:72px auto 0;
  display:grid;grid-template-columns:1.1fr .9fr;min-height:640px;background:var(--black);color:var(--ivory)
}
.pairing__result-visual{min-height:640px}
.pairing__kanji{
  position:absolute;right:5%;top:3%;
  font:400 clamp(150px,23vw,340px)/1 var(--serif);
  color:rgba(198,163,92,.09);z-index:2
}
.pairing__result-copy{padding:70px clamp(32px,5vw,78px);display:flex;flex-direction:column;justify-content:center}
.pairing__result-copy h3{
  margin:0;font:400 clamp(42px,5vw,76px)/1 var(--serif);letter-spacing:-.045em
}
.pairing__result-copy>p:not(.kicker){
  max-width:560px;color:rgba(240,234,223,.62);line-height:1.9;font-size:13px;margin:26px 0 0
}
.meter-list{display:grid;gap:14px;margin-top:40px}
.meter{display:grid;grid-template-columns:62px 1fr 26px;gap:12px;align-items:center}
.meter>span,.meter>em{font-size:7px;letter-spacing:.12em;font-style:normal}
.meter>i{height:2px;background:rgba(240,234,223,.18);display:block}
.meter>i>b{display:block;height:100%;width:var(--meter);background:linear-gradient(90deg,var(--red),var(--gold));transition:width .55s var(--ease)}

/* craft */
.craft{background:var(--ivory);color:var(--black);padding:140px var(--pad)}
.craft__intro{
  max-width:var(--max);margin:0 auto 90px;
  display:grid;grid-template-columns:230px 1fr;gap:65px;align-items:start
}
.craft__large-jp{
  display:grid;place-items:center;width:210px;height:270px;
  background:var(--red);color:var(--ivory);font:400 120px/1 var(--serif)
}
.craft .kicker{color:var(--red)}
.craft__intro h2{
  margin:0;font:400 clamp(50px,6vw,90px)/.98 var(--serif);letter-spacing:-.055em
}
.craft__intro h2 em{color:var(--red)}
.craft__intro p:last-child{max-width:720px;margin-top:30px;color:rgba(8,8,8,.60);line-height:1.9;font-size:13px}
.craft__cards{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.craft-card{border-top:1px solid rgba(8,8,8,.38);padding-top:16px}
.craft-card__image{aspect-ratio:4/5;margin-bottom:25px}
.craft-card>span{font-size:8px;letter-spacing:.15em;color:var(--red)}
.craft-card h3{font:400 28px/1.1 var(--serif);margin:12px 0}
.craft-card p{color:rgba(8,8,8,.58);font-size:11px;line-height:1.8}

/* bottles */
.bottles{padding:130px 0 150px;overflow:hidden}
.bottles__head{
  padding:0 var(--pad);max-width:var(--max);margin:0 auto 70px;
  display:flex;justify-content:space-between;align-items:end;gap:40px
}
.bottles__head h2{margin:0;font:400 clamp(58px,7vw,105px)/.9 var(--serif);letter-spacing:-.06em}
.bottles__controls{display:flex;gap:8px}
.carousel-btn{
  width:50px;height:50px;border:1px solid rgba(240,234,223,.24);
  background:transparent;color:var(--ivory);cursor:pointer;transition:background .2s,color .2s
}
.carousel-btn:hover{background:var(--gold);color:var(--black)}
.bottle-track{
  display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:0 max(var(--pad),calc((100vw - var(--max))/2 + var(--pad))) 30px
}
.bottle-track::-webkit-scrollbar{display:none}
.bottle-card{
  flex:0 0 min(76vw,520px);scroll-snap-align:start;
  border:1px solid rgba(240,234,223,.14);background:var(--black-2)
}
.bottle-card__image{aspect-ratio:4/4.7}
.bottle-card__no{
  position:absolute;right:20px;top:18px;color:rgba(240,234,223,.32);z-index:2;
  font:italic 400 52px/1 var(--serif)
}
.bottle-card__copy{padding:34px}
.bottle-card__copy h3{margin:0;font:400 38px/1 var(--serif)}
.bottle-card__copy>p:not(.kicker){color:rgba(240,234,223,.55);line-height:1.75;font-size:11px}
.pill-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.pill-row span{border:1px solid rgba(240,234,223,.15);border-radius:999px;padding:7px 9px;font-size:7px;text-transform:uppercase;letter-spacing:.08em}
.bottle-card--cta{
  position:relative;display:flex;align-items:flex-end;overflow:hidden;
  background:linear-gradient(145deg,var(--red-deep),var(--red));min-height:670px
}
.bottle-card__cta-mark{
  position:absolute;right:-18px;top:-35px;color:rgba(240,234,223,.08);
  font:400 310px/1 var(--serif)
}
.bottle-card--cta .bottle-card__copy{position:relative;z-index:2;padding:44px}
.bottle-card--cta h3{font-size:64px}
.cta-stack{display:flex;gap:9px;margin-top:35px;flex-wrap:wrap}

/* source */
.source{background:var(--black-2);display:grid;grid-template-columns:1.1fr .9fr;min-height:780px}
.source__visual{min-height:780px}
.source__copy{padding:100px var(--pad);display:flex;flex-direction:column;justify-content:center}
.source__copy h2{margin:0;font:400 clamp(52px,6vw,90px)/.96 var(--serif);letter-spacing:-.05em}
.source__copy>p:not(.kicker){max-width:560px;color:rgba(240,234,223,.57);line-height:1.9;font-size:12px;margin-top:28px}
.source__legend{display:grid;gap:18px;margin-top:45px;padding-top:28px;border-top:1px solid var(--line)}
.source__legend>div{display:grid;grid-template-columns:16px 170px 1fr;align-items:center;gap:10px}
.source__legend span{font-size:8px;letter-spacing:.14em}
.source__legend small{font-size:9px;color:rgba(240,234,223,.42)}
.dot{width:8px;height:8px;border-radius:50%;display:block}
.dot--gold{background:var(--gold)}
.dot--red{background:var(--red-bright)}

/* faq */
.faq{background:var(--ivory);color:var(--black);padding:130px var(--pad)}
.faq__head{max-width:var(--max);margin:0 auto 60px}
.faq .kicker{color:var(--red)}
.faq h2{margin:0;font:400 clamp(58px,7vw,110px)/.9 var(--serif);letter-spacing:-.06em}
.faq__list{max-width:var(--max);margin:0 auto;border-top:1px solid rgba(8,8,8,.5)}
.faq details{border-bottom:1px solid rgba(8,8,8,.22)}
.faq summary{
  list-style:none;cursor:pointer;
  display:grid;grid-template-columns:56px 1fr 30px;gap:20px;align-items:center;
  padding:28px 0
}
.faq summary::-webkit-details-marker{display:none}
.faq summary span{font:italic 400 16px var(--serif);color:var(--red)}
.faq summary strong{font:400 24px/1.35 var(--serif)}
.faq summary i{font-style:normal;font-size:24px;color:var(--red);transition:transform .3s var(--ease)}
.faq details[open] summary i{transform:rotate(45deg)}
.faq details>p{margin:0 0 30px 76px;max-width:760px;color:rgba(8,8,8,.56);line-height:1.9;font-size:12px}

/* final CTA */
.final-cta{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.final-cta__visual{position:absolute;inset:0;transform:scale(1.04)}
.final-cta__overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,8,.82),rgba(8,8,8,.28) 60%,rgba(8,8,8,.38))}
.final-cta__copy{position:relative;z-index:2;padding:0 var(--pad) 11vh;max-width:940px}
.final-cta__copy h2{margin:0;font:400 clamp(70px,10vw,160px)/.82 var(--serif);letter-spacing:-.07em}
.final-cta__copy p:not(.kicker){max-width:500px;color:rgba(240,234,223,.67);line-height:1.8;font-size:12px;margin:28px 0}
.final-cta__buttons{display:flex;gap:10px;flex-wrap:wrap}
.final-cta__jp{
  position:absolute;z-index:2;right:30px;top:120px;writing-mode:vertical-rl;
  font:400 12px/1 var(--serif);letter-spacing:.28em;color:rgba(240,234,223,.58)
}

/* footer */
.footer{padding:70px var(--pad) 90px;border-top:1px solid var(--line)}
.footer__top{max-width:var(--max);margin:0 auto 70px;display:flex;justify-content:space-between;align-items:end}
.footer__top>div{display:flex;align-items:center;gap:15px}
.footer__top strong{font-size:12px;letter-spacing:.24em}
.footer__top p{margin:0;color:rgba(240,234,223,.40);font-size:9px}
.footer__grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding-top:35px;border-top:1px solid var(--line)}
.footer__grid>div{display:grid;gap:10px}
.footer__grid span{font-size:8px;letter-spacing:.16em;color:var(--gold);margin-bottom:5px}
.footer__grid a{font:400 18px var(--serif);width:max-content}
.footer__bottom{max-width:var(--max);margin:70px auto 0;display:flex;justify-content:space-between;gap:30px;color:rgba(240,234,223,.32)}
.footer__bottom small{font-size:8px;line-height:1.6}
.mobile-cta{display:none}

/* animations */
[data-split]>span{
  display:block;transform:translateY(115%);opacity:0;transition:transform 1s var(--ease),opacity 1s var(--ease)
}
body.is-loaded [data-split]>span:nth-child(1){transform:none;opacity:1;transition-delay:.12s}
body.is-loaded [data-split]>span:nth-child(2){transform:none;opacity:1;transition-delay:.22s}
.reveal-up{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
body.is-loaded .hero .reveal-up{opacity:1;transform:none}
body.is-loaded .hero .reveal-up:nth-of-type(1){transition-delay:.35s}
body.is-loaded .hero .reveal-up:nth-of-type(2){transition-delay:.45s}
.reveal-word{opacity:0;transform:translateX(-15px);transition:opacity .8s .15s var(--ease),transform .8s .15s var(--ease)}
body.is-loaded .reveal-word{opacity:1;transform:none}
.js-reveal{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js-reveal.is-visible{opacity:1;transform:none}

/* responsive */
@media(max-width:1100px){
  .header{grid-template-columns:1fr auto}
  .nav{display:none}
  .menu-button{display:block}
  .hero{grid-template-columns:52% 48%}
  .manifesto{grid-template-columns:100px 1fr}
  .manifesto__seal{display:none}
  .story{grid-template-columns:42% 58%}
  .pairing__selector{grid-template-columns:repeat(3,1fr)}
  .pairing-choice:nth-child(3){border-right:0}
  .pairing-choice:nth-child(-n+3){border-bottom:1px solid rgba(8,8,8,.25)}
  .source{grid-template-columns:1fr 1fr}
}

@media(max-width:820px){
  :root{--pad:22px}
  .header{height:70px}
  .logo__text small,.age{display:none}
  .hero{display:block;min-height:auto;padding-top:70px}
  .hero__visual{min-height:64svh}
  .hero__copy{min-height:72svh;padding:72px var(--pad) 80px}
  .hero__title{font-size:clamp(62px,19vw,110px)}
  .hero__visual-number{font-size:100px;top:25px}
  .hero__jp{display:none}
  .manifesto{min-height:auto;grid-template-columns:1fr;padding:95px var(--pad)}
  .manifesto__index{font-size:50px}
  .story{display:block;min-height:auto}
  .story__sticky{position:relative;height:auto;padding:90px var(--pad) 40px;border-right:0}
  .story__steps{margin-top:45px}
  .story-scene{min-height:auto}
  .story-scene__visual{min-height:65svh}
  .image-break{height:140svh}
  .image-break__copy h2{font-size:clamp(58px,17vw,110px)}
  .pairing{padding:95px var(--pad)}
  .pairing__head{grid-template-columns:1fr;gap:28px;margin-bottom:48px}
  .pairing__selector{display:flex;overflow-x:auto;scrollbar-width:none}
  .pairing__selector::-webkit-scrollbar{display:none}
  .pairing-choice{min-width:170px}
  .pairing__result{grid-template-columns:1fr;min-height:auto}
  .pairing__result-visual{min-height:58svh}
  .pairing__result-copy{padding:55px 28px}
  .craft{padding:95px var(--pad)}
  .craft__intro{grid-template-columns:1fr;gap:34px}
  .craft__large-jp{width:120px;height:150px;font-size:72px}
  .craft__cards{grid-template-columns:1fr;gap:50px}
  .craft-card__image{aspect-ratio:16/10}
  .bottles{padding-top:95px}
  .bottles__head{align-items:flex-end}
  .bottle-card{flex-basis:82vw}
  .source{grid-template-columns:1fr}
  .source__visual{min-height:65svh}
  .source__copy{padding:70px var(--pad)}
  .faq{padding:95px var(--pad)}
  .final-cta__copy{padding-bottom:100px}
  .footer{padding-bottom:115px}
  .footer__top{display:grid;gap:20px}
  .footer__grid{grid-template-columns:1fr 1fr}
  .mobile-cta{
    position:fixed;z-index:800;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));
    display:grid;grid-template-columns:.8fr 1.2fr;height:54px;box-shadow:0 16px 34px rgba(0,0,0,.36)
  }
  .mobile-cta a{display:grid;place-items:center;font-size:9px;font-weight:800;letter-spacing:.12em}
  .mobile-cta a:first-child{background:var(--ivory);color:var(--black)}
  .mobile-cta a:last-child{background:var(--red);color:white}
}

@media(max-width:560px){
  .hero__visual{min-height:58svh}
  .hero__copy{min-height:68svh}
  .hero__lead{font-size:16px}
  .story-scene__visual{min-height:55svh}
  .image-break__media{clip-path:inset(8% 6%)}
  .pairing-choice{min-width:148px}
  .source__legend>div{grid-template-columns:14px 1fr}
  .source__legend small{grid-column:2}
  .faq summary{grid-template-columns:38px 1fr 25px}
  .faq summary strong{font-size:19px}
  .faq details>p{margin-left:58px}
  .footer__grid{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .intro{display:none}
  [data-split]>span,.reveal-up,.reveal-word,.js-reveal{opacity:1!important;transform:none!important}
}