/* ===== JAKU — type & color system ===== */
:root{
  --paper:#ffffff;
  --paper-warm:#f6f4f1;
  --ink:#15130f;
  --ink-soft:#3a352e;
  --line:#dad6cf;
  --black:#0b0a08;          /* warm near-black for immersive sections */
  --mut:#8a857c;
  --serif:"EB Garamond", Georgia, "Times New Roman", serif;
  --disp:"Cormorant Garamond", Georgia, serif;
}

/* ===== SLIDE-OUT MENU ===== */
#menuOverlay{position:fixed;inset:0;z-index:80;visibility:hidden;pointer-events:none;}
#menuOverlay.open{visibility:visible;pointer-events:auto;}
.menu-scrim{position:absolute;inset:0;background:rgba(11,10,8,0);transition:background .5s ease;}
#menuOverlay.open .menu-scrim{background:rgba(11,10,8,.12);}
.menu-panel{
  position:absolute;left:0;top:0;height:100%;
  width:26vw;min-width:340px;max-width:480px;
  background:#e7e4e0;
  padding:30px 44px;
  transform:translateX(-100%);
  transition:transform .62s cubic-bezier(.16,.7,.2,1);
  display:flex;flex-direction:column;
  will-change:transform;
}
#menuOverlay.open .menu-panel{transform:none;}
.menu-brand{
  font-family:var(--disp);font-weight:500;font-size:30px;letter-spacing:.14em;line-height:1;
  color:var(--ink);display:block;
}
.menu-close{
  margin-top:16px;align-self:flex-start;
  background:none;border:none;cursor:pointer;color:var(--ink);
  font-family:var(--serif);text-transform:uppercase;letter-spacing:.22em;font-size:13px;
  display:inline-flex;align-items:center;padding:4px 0;
}
.menu-close .x{font-size:13px;}
.menu-links{display:flex;flex-direction:column;gap:0;margin-top:46px;}
.menu-links a{
  font-family:var(--serif);text-transform:uppercase;letter-spacing:.18em;
  font-size:13px;font-weight:500;color:var(--ink-soft);
  padding:9px 0;width:max-content;
  transition:color .3s ease,letter-spacing .3s ease;
}
.menu-links a:hover{color:var(--ink);letter-spacing:.24em;}

/* SHOP group + submenu */
.menu-group{display:flex;flex-direction:column;}
.menu-grouptop{
  background:none;border:none;cursor:pointer;text-align:left;
  font-family:var(--serif);text-transform:uppercase;letter-spacing:.18em;
  font-size:13px;font-weight:500;color:var(--ink-soft);
  padding:9px 0;width:max-content;
  display:inline-flex;align-items:center;gap:10px;
  transition:color .3s ease,letter-spacing .3s ease;
}
.menu-grouptop:hover{color:var(--ink);letter-spacing:.24em;}
.menu-grouptop .chev{font-size:13px;line-height:1;transition:transform .35s ease;display:inline-block;}
.menu-group.open .menu-grouptop{color:var(--ink);}
.menu-group.open .menu-grouptop .chev{transform:rotate(45deg);}
.menu-sub{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .42s cubic-bezier(.16,.7,.2,1);
}
.menu-group.open .menu-sub{grid-template-rows:1fr;}
.menu-sub-inner{min-height:0;overflow:hidden;display:flex;flex-direction:column;}
.menu-sub a{
  font-family:var(--serif);text-transform:uppercase;letter-spacing:.16em;
  font-size:12px;font-weight:500;color:var(--mut);
  padding:7px 0 7px 20px;width:max-content;
  transition:color .3s ease,letter-spacing .3s ease;
}
.menu-sub a:first-child{padding-top:4px;}
.menu-sub a:last-child{padding-bottom:10px;}
.menu-sub a:hover{color:var(--ink);letter-spacing:.22em;}
@media(max-width:760px){
  .menu-panel{width:84vw;min-width:0;max-width:none;padding:26px 26px;}
  .menu-brand{font-size:24px;}
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}

/* small-caps letter-spaced label */
.lbl{
  font-family:var(--serif);
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:13px;
  font-weight:500;
}

/* ===== GLOBAL NAV ===== */
#nav{
  position:fixed;left:0;top:0;width:100%;
  z-index:60;
  padding:30px 44px 26px;
  display:flex;align-items:flex-start;justify-content:space-between;
  pointer-events:none;
  opacity:0;transform:translateY(-8px);
  transition:opacity 1s ease,transform 1s ease,color .6s ease;
  color:var(--ink);
  mix-blend-mode:normal;
}
#nav.show{opacity:1;transform:none;pointer-events:auto;}
#nav.light{color:#f4f1ec;}
#nav a{pointer-events:auto;}
.nav-left{display:flex;flex-direction:column;gap:14px;}
.brand{
  font-family:var(--disp);
  font-weight:500;
  font-size:30px;
  letter-spacing:.14em;
  line-height:1;
}
.menu-btn{
  display:flex;align-items:center;gap:11px;
  cursor:pointer;
}
.menu-btn .bars{display:inline-flex;flex-direction:column;gap:4px;width:18px;}
.menu-btn .bars span{height:1.4px;background:currentColor;display:block;}
.menu-btn .bars span:nth-child(2){width:70%;}
/* shared sub-page nav: stacked brand + sublabel */
#nav .brand-block{display:flex;flex-direction:column;gap:5px;}
#nav .sub{font-size:11px;letter-spacing:.26em;text-transform:uppercase;font-weight:500;opacity:.62;}

.nav-right{display:flex;align-items:center;gap:34px;padding-top:6px;}
.nav-right a{white-space:nowrap;}
.nav-right .ico{font-size:15px;opacity:.85;}
#nav .lbl{font-size:12px;}

/* ===== sections ===== */
section{position:relative;}
.wrap{max-width:1340px;margin:0 auto;padding:0 44px;}

/* ===== OPENING (self-playing: black holds, animates in place to white + symbol) ===== */
#opening{position:relative;height:100vh;min-height:620px;overflow:hidden;background:#fff;}
#opening .ob-bg{position:absolute;inset:0;background:var(--black);transition:background 1.9s ease;z-index:0;}
#opening.s2 .ob-bg{background:#fff;}
#opening .word{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  font-family:var(--disp);font-weight:400;color:#6f6a63;
  font-size:46px;letter-spacing:.42em;padding-left:.42em;
  opacity:0;transition:opacity 1.8s ease;
}
#opening.s1 .word{opacity:1;}
#opening.s2 .word{opacity:0;transition:opacity .9s ease;}
#opening .spire{
  position:absolute;left:50%;top:50%;z-index:2;
  transform:translate(-50%,calc(-50% + 64px)) scaleY(.82);transform-origin:center bottom;
  width:auto;height:74vh;max-height:760px;
  opacity:0;clip-path:inset(0 0 100% 0);
  transition:opacity 1.9s ease,transform 2.1s cubic-bezier(.16,.7,.2,1),clip-path 2.3s cubic-bezier(.16,.7,.2,1);
}
#opening.s3 .spire{opacity:1;transform:translate(-50%,-50%);clip-path:inset(0 0 0 0);}
#opening .scrollcue{
  position:absolute;left:50%;bottom:42px;transform:translateX(-50%);z-index:3;
  color:#8a857c;font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  opacity:0;transition:opacity 1.2s ease;
}
#opening.s3 .scrollcue{opacity:1;animation:bob 3s ease-in-out 1s infinite;}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(7px);}}

/* ===== LIVE FREQUENCY readout (fixed left) ===== */
#hzlive{
  position:fixed;left:44px;bottom:38px;z-index:55;
  display:flex;flex-direction:column;gap:9px;align-items:flex-start;
  font-family:var(--serif);color:var(--ink);
  opacity:0;transform:translateY(8px);
  transition:opacity 1.4s ease,transform 1.4s ease,color .6s ease;
  pointer-events:none;
}
#hzlive.show{opacity:1;transform:none;}
#hzlive.light{color:#efece7;}
.hz-dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:hzpulse 1.7s ease-in-out infinite;}
.hz-read{font-family:var(--disp);font-size:32px;line-height:1;letter-spacing:.02em;display:flex;align-items:baseline;gap:7px;font-variant-numeric:tabular-nums;}
.hz-u{font-size:12px;letter-spacing:.22em;text-transform:uppercase;opacity:.8;}
.hz-wave{display:flex;align-items:flex-end;gap:3px;height:15px;}
.hz-wave i{width:2px;background:currentColor;height:30%;opacity:.85;animation:hzbar 1s ease-in-out infinite;}
.hz-wave i:nth-child(1){animation-delay:0s}
.hz-wave i:nth-child(2){animation-delay:.18s}
.hz-wave i:nth-child(3){animation-delay:.36s}
.hz-wave i:nth-child(4){animation-delay:.10s}
.hz-wave i:nth-child(5){animation-delay:.28s}
.hz-wave i:nth-child(6){animation-delay:.44s}
.hz-lab{font-size:11px;letter-spacing:.28em;text-transform:uppercase;opacity:.62;}
@keyframes hzpulse{0%,100%{opacity:.28}50%{opacity:1}}
@keyframes hzbar{0%,100%{height:22%}50%{height:96%}}

/* hero installation — full bleed, connects straight into the installation below */
#hero{padding:13vh 0 0;background:var(--paper);}
#hero .stage{width:100%;}
#hero .stage img{width:100%;display:block;}

/* generic product/feature sections on paper */
.feature{padding:13vh 0;background:var(--paper);text-align:center;}
.feature .ttl{
  font-family:var(--serif);
  font-size:25px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  margin:0;
}
.feature .sub{
  font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
  margin:26px auto 0;max-width:62ch;line-height:1.9;font-weight:500;
}
.feature .media{margin:64px auto 0;}
.feature .media.narrow{max-width:760px;}
.feature .media.mid{max-width:980px;}
.feature .media.wide{max-width:1280px;}

/* one installation — single connected picture with text overlaid in its white middle */
#install{background:var(--paper);padding:0 0 12vh;}
#install .oneimg{position:relative;width:100%;}
#install .oneimg img{width:100%;display:block;}
#install .overtext{
  position:absolute;left:50%;top:34%;transform:translateX(-50%);
  width:100%;text-align:center;pointer-events:none;
}
#install .overtext .ttl{font-size:25px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;margin:0;}
#install .overtext .sub{font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);max-width:62ch;margin:26px auto 0;line-height:1.9;font-weight:500;}

/* signature scent — dark full bleed (baked title) */
#scent{background:var(--black);}
#scent img{width:100%;display:block;}

/* frequencies */
#freq{padding:13vh 0;text-align:center;background:var(--paper);}
#freq .phones{width:170px;margin:0 auto 30px;}
#freq .blocks{max-width:1340px;margin:54px auto 0;}

/* ritual tools */
#ritual{padding:13vh 0;background:var(--paper);text-align:center;}
#ritual .item+.item{margin-top:13vh;}
#ritual .cone{max-width:560px;margin:54px auto 0;}
#ritual .disc{max-width:560px;margin:54px auto 0;}

/* collectible gallery */
#collect{padding:13vh 0 0;background:var(--paper);text-align:center;}
#collect .gal{max-width:1340px;margin:60px auto 0;}

/* ===== newsletter + footer ===== */
#news{background:var(--paper);padding:18vh 0 14vh;text-align:center;}
.news-head{display:inline-flex;align-items:center;gap:12px;font-size:14px;letter-spacing:.04em;color:var(--ink-soft);}
.news-head .chev{font-size:11px;}
#news p{font-size:14px;color:var(--ink-soft);line-height:1.8;margin:38px auto 0;max-width:74ch;}
#news .reso{margin-top:26px;font-size:14px;color:var(--ink-soft);}
.news-form{max-width:660px;margin:60px auto 0;}
.news-form input{
  width:100%;border:none;border-bottom:1px solid var(--line);
  background:transparent;padding:14px 4px;font-family:var(--serif);font-size:15px;color:var(--ink);
  text-align:center;letter-spacing:.04em;outline:none;
}
.news-form input::placeholder{color:var(--mut);letter-spacing:.2em;text-transform:uppercase;font-size:12px;}
.regbtn{
  width:100%;margin-top:34px;background:var(--ink);color:#efece7;border:none;
  padding:20px;letter-spacing:.34em;text-transform:uppercase;font-size:11px;cursor:pointer;
  font-family:var(--serif);transition:background .4s ease;
}
.regbtn:hover{background:#000;}
.socials{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;max-width:900px;margin:78px auto 0;}
.socials a{border-top:1px solid var(--ink);padding-top:16px;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft);}

footer{background:var(--paper-warm);padding:64px 44px 40px;text-align:center;}
.fnav{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 36px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);}
.fnav a:hover{color:var(--ink);}
footer .fbrand{font-family:var(--disp);font-size:30px;letter-spacing:.16em;margin:42px 0 22px;}
footer .pay{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);}
footer .pay+.pay{margin-top:8px;}
.lang{position:absolute;left:44px;font-size:12px;letter-spacing:.18em;color:var(--ink-soft);}
.foot-bottom{position:relative;margin-top:8px;}

/* reveal */
.reveal{opacity:0;transform:translateY(46px);transition:opacity 1.5s cubic-bezier(.16,.7,.2,1),transform 1.5s cubic-bezier(.16,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}

@media(max-width:760px){
  .wrap,#nav{padding-left:22px;padding-right:22px;}
  #nav{padding-top:22px;}
  .brand,footer .fbrand,.fnav{font-size:11px;}
  .brand{font-size:24px;}
  #opening .word{font-size:30px;}
  #hero .htop{flex-direction:column;gap:18px;align-items:flex-start;}
  .nav-right{gap:18px;}
  #freq .blocks{overflow-x:auto;}
  #freq .blocks img{min-width:840px;}
  #hzlive{left:22px;bottom:20px;gap:6px;}
  .hz-read{font-size:24px;}
  .hz-lab{display:none;}
}