/* =========================================================
   SHIHAKU 至白 — Dior-editorial language, pure white + sky blue
   Structure & type: maison editorial. Soul: daylight, high contrast.
   ========================================================= */

:root{
  --ivory:    #ffffff;   /* pure white base */
  --ivory-2:  #f9fafb;
  --white:    #ffffff;
  --ink:      #0a0a0a;   /* near-black, high contrast */
  --ink-soft: #525252;
  --gold:     #5b7280;   /* muted slate — neutral accent, flatters warm & cool photos */
  --gold-deep:#43545e;
  --sky-light:#eef3f6;
  --line:     #e5e5e5;
  --line-soft:#f0f0f0;

  --display:"Playfair Display","Noto Serif TC",serif;
  --serif:"Noto Serif TC","Playfair Display",serif;
  --sans:"Noto Sans TC","Helvetica Neue",Arial,sans-serif;

  --maxw:1280px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:auto; -webkit-text-size-adjust:100%; overflow-x:hidden; }
body{
  font-family:var(--sans);
  background:var(--ivory);
  color:var(--ink);
  font-weight:400;
  line-height:1.95;
  letter-spacing:.015em;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 40px; }

/* ---------- Intro splash ---------- */
.intro-splash{
  position:fixed;
  inset:0;
  z-index:3000;
  display:grid;
  place-items:center;
  background:#fff;
  color:#0a0a0a;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .52s var(--ease), visibility .52s var(--ease);
}
.intro-splash.hide{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.intro-splash.skip{ display:none; }
.intro-mark{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  transform:translateY(8px);
  opacity:0;
  animation:introMark 1.05s var(--ease) forwards;
}
.intro-logo{
  font-family:var(--display);
  font-size:clamp(2rem,7vw,4rem);
  font-weight:500;
  letter-spacing:.36em;
  text-indent:.36em;
  line-height:1;
}
.intro-sub{
  font-family:var(--serif);
  font-size:clamp(.84rem,2vw,1.08rem);
  letter-spacing:.56em;
  text-indent:.56em;
  color:rgba(10,10,10,.62);
}
@keyframes introMark{
  0%{ opacity:0; transform:translateY(12px); filter:blur(4px); }
  42%{ opacity:1; transform:translateY(0); filter:blur(0); }
  100%{ opacity:1; transform:translateY(0); filter:blur(0); }
}

/* ---------- Typography ---------- */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:450; line-height:1.28; letter-spacing:.01em; }
.italic{ font-family:var(--display); font-style:italic; font-weight:400; }
.italic-lg{ font-family:var(--display); font-style:italic; font-weight:450; font-size:clamp(2rem,4.4vw,3.2rem); line-height:1.3; }

.eyebrow{
  font-family:var(--sans);
  font-size:.7rem; font-weight:400;
  letter-spacing:.42em; text-transform:uppercase;
  color:var(--gold-deep);
  margin-bottom:1.8rem;
}
.eyebrow.light{ color:rgba(255,253,249,.85); }
.eyebrow.center{ text-align:center; }
.center{ text-align:center; }

p{ font-size:1.06rem; font-weight:400; color:var(--ink-soft); }

/* ---------- "Discover" thin underline link (Dior signature) ---------- */
.discover{
  display:inline-block; position:relative;
  font-family:var(--sans); font-size:.74rem; font-weight:400;
  letter-spacing:.26em; text-transform:uppercase; color:var(--ink);
  padding-bottom:7px;
}
.discover::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform-origin:right; transform:scaleX(1);
  transition:transform .5s var(--ease);
}
.discover:hover::after{ transform-origin:left; transform:scaleX(0); }
.discover::before{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--gold); transform-origin:left; transform:scaleX(0);
  transition:transform .5s var(--ease) .05s;
}
.discover:hover::before{ transform:scaleX(1); }
.discover.light{ color:var(--white); }
.discover.lg{ font-size:.92rem; letter-spacing:.2em; }

/* ---------- Header ---------- */
.site-header{
  position:fixed; top:0; left:0; width:100%; z-index:100;
  padding:clamp(18px,2.4vw,28px) 0;
  background:transparent; pointer-events:auto;
  transition:color .5s var(--ease), padding .5s var(--ease);
  color:var(--ink);
}
.site-header.nav-light{ color:#fff; text-shadow:0 1px 18px rgba(0,0,0,.45); }
.site-header.nav-dark{ color:var(--ink); text-shadow:none; }
.header-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 40px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
}
.brand{ grid-column:2; display:flex; flex-direction:column; align-items:center; gap:2px; color:inherit; }
.brand-mark{ font-family:var(--display); font-size:1.55rem; font-weight:500; letter-spacing:.34em; text-indent:.34em; }
.brand-sub{ font-family:var(--serif); font-size:.72rem; letter-spacing:.5em; text-indent:.5em; opacity:.8; }
.nav{ display:flex; align-items:center; gap:clamp(20px,2vw,34px); }
.nav-left{ grid-column:1; justify-self:start; }
.nav-right{ grid-column:3; justify-self:end; }
.nav a{ font-size:.74rem; letter-spacing:.18em; text-transform:none; position:relative; padding:4px 0; color:inherit; }
.nav a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold); transition:width .45s var(--ease); }
.nav a:hover::after{ width:100%; }
.nav-mobile{ display:none; }
.nav-toggle{ grid-column:1; justify-self:start; display:none; flex-direction:column; gap:6px; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle span{ width:26px; height:1px; background:currentColor; transition:.35s var(--ease); }

/* ---------- Hero ---------- */
.hero{
  position:relative; height:100vh; min-height:660px;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; color:var(--ink); overflow:hidden;
}
.hero-media{ position:absolute; inset:0; z-index:0; background:linear-gradient(180deg,#dfeaf0 0%,#eef3f6 44%,#fafbfc 100%); transform:scale(1.14); transform-origin:center; will-change:transform; }
.hero-media[data-placeholder]::before{ color:rgba(10,10,10,.35); }
.hero-veil{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.15)); }
.hero-inner{ position:relative; z-index:2; max-width:900px; padding:0 24px; }
.hero-title{
  font-family:var(--serif); font-weight:450;
  font-size:clamp(2.8rem,8vw,6rem); line-height:1.15; letter-spacing:.06em;
}
.hero-title span{ display:block; }
.hero-title .italic{ font-weight:400; letter-spacing:.04em; color:var(--gold-deep); }
.hero-sub{ margin-top:1.8rem; font-size:clamp(1rem,1.6vw,1.18rem); color:var(--ink-soft); font-weight:300; letter-spacing:.08em; }
.hero .discover{ margin-top:2.6rem; }
.scroll-cue{ position:absolute; bottom:40px; left:50%; transform:translateX(-50%); z-index:3; width:1px; height:60px; background:linear-gradient(rgba(21,17,13,.42),transparent); animation:cue 2.6s var(--ease) infinite; transform-origin:top; }
.scroll-cue.light{ background:linear-gradient(rgba(255,255,255,.75),transparent); }

/* ---------- Stable media layers ---------- */
.enter-media,
.editorial-media,
.series-cover-media,
.spotlight-media{
  overflow:hidden;
  isolation:isolate;
}
.enter-media img,
.editorial-media img,
.series-cover-media img,
.spotlight-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:translate3d(0,var(--media-y,0px),0) scale(var(--media-scale,1.12));
  transform-origin:center;
  transition:transform 1.15s cubic-bezier(.22,.61,.36,1), filter 1.15s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
html.snap #pager > section.is-active .enter-media img,
html.snap #pager > section.is-active .editorial-media img,
html.snap #pager > section.is-active .series-cover-media img,
html.snap #pager > section.is-active .spotlight-media img{
  --media-y:0px;
  --media-scale:1.035;
}
html.snap #pager > section.is-prev .enter-media img,
html.snap #pager > section.is-prev .editorial-media img,
html.snap #pager > section.is-prev .series-cover-media img,
html.snap #pager > section.is-prev .spotlight-media img{
  --media-y:56px;
}
html.snap #pager > section.is-next .enter-media img,
html.snap #pager > section.is-next .editorial-media img,
html.snap #pager > section.is-next .series-cover-media img,
html.snap #pager > section.is-next .spotlight-media img{
  --media-y:-56px;
}

/* ---------- Go-to-top button ---------- */
.gotop{ position:fixed; right:clamp(18px,3vw,34px); bottom:clamp(18px,3vw,34px); z-index:90; width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .4s var(--ease), transform .4s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); }
.gotop.show{ opacity:1; transform:none; pointer-events:auto; }
.gotop:hover{ background:#fff; box-shadow:0 4px 16px rgba(0,0,0,.1); }

/* ============ TRANSFORM PAGER — strict one-page-per-gesture (desktop + mobile) ============ */
/* Toggle whole effect by removing "snap" class on <html>. */
html.snap, html.snap body{ height:100%; margin:0; overflow:hidden; }
html.snap #pager{ will-change:transform; transition:transform .52s cubic-bezier(.65,0,.35,1); transform:translate3d(0,0,0); backface-visibility:hidden; }
@media (prefers-reduced-motion:reduce){ html.snap #pager{ transition:none; } }
html.snap #pager > section,
html.snap #pager > .footer-page{ height:100vh; height:100dvh; height:var(--appvh,100dvh); overflow-y:auto; -webkit-overflow-scrolling:touch; }
html.snap #pager > .enter,
html.snap #pager > .editorial,
html.snap #pager > .series-cover,
html.snap #pager > .spotlight{ overflow:hidden; }
html.snap #pager > .product-slide{ min-height:var(--appvh,100dvh); overflow:hidden; }
html.snap .enter-brand{ display:none; }
html.snap .site-header{ display:block; }
html.snap .statement,
html.snap .facts,
html.snap .guide,
html.snap .pillars,
html.snap .ritual,
html.snap .faq,
html.snap .stockists,
html.snap .contact{ display:flex; flex-direction:column; justify-content:safe center; }
html.snap .footer-page{ display:flex; flex-direction:column; justify-content:center; }
html.snap .footer-page .site-footer{ width:100%; }
/* compress dense panels toward one screen */
html.snap .stockists{ padding-top:clamp(40px,5vh,72px); padding-bottom:clamp(40px,5vh,72px); }
html.snap .stockists .block-intro{ margin-top:1rem; }
html.snap .channel{ padding:30px 30px; }
html.snap .retailer{ padding:26px 36px; }
html.snap .channel-block + .channel-block{ margin-top:30px; }
@keyframes cue{ 0%{transform:translateX(-50%) scaleY(0)} 45%{transform:translateX(-50%) scaleY(1)} 100%{transform:translateX(-50%) scaleY(0); transform-origin:bottom} }

/* ---------- Hero mega type (redesign) ---------- */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.hero-mega{ font-family:var(--display); font-weight:450; font-size:clamp(5rem,17vw,12.5rem); line-height:.92; letter-spacing:.18em; text-indent:.18em; color:var(--ink); }
.hero-latin{ font-family:var(--sans); font-weight:300; font-size:clamp(.78rem,1.3vw,.98rem); letter-spacing:.62em; text-indent:.62em; margin-top:1.2rem; color:var(--ink); }
.hero-inner .hero-sub{ margin-top:1.5rem; }

/* ---------- Series featured image (redesign) ---------- */
.series-feature{ width:100vw; margin-left:calc(50% - 50vw); margin-bottom:clamp(50px,6vw,86px); }
.series-feature img{ width:100%; height:clamp(420px,72vh,820px); object-fit:cover; }
.series-feature figcaption{ text-align:center; padding-top:30px; }
.series-feature-title{ font-family:var(--display); font-size:clamp(1.6rem,3.4vw,2.6rem); font-weight:450; line-height:1.42; color:var(--ink); margin-top:12px; }

/* ---------- Split entry hero (B — intent) ---------- */
.enter{ position:relative; height:100vh; min-height:640px; display:flex; }
.enter-pane{ position:relative; flex:1; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; transition:flex .9s var(--ease); color:#fff; }
.enter-media{ position:absolute; inset:0; z-index:0; }
.enter-pane:hover{ flex:1.28; }
.enter-pane:hover .enter-media img{ --media-scale:1.08; }
.enter-veil{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(8,10,12,.22) 0%,rgba(8,10,12,.30) 45%,rgba(8,10,12,.62) 100%); transition:background .6s var(--ease); }
.enter-pane:hover .enter-veil{ background:linear-gradient(180deg,rgba(8,10,12,.12) 0%,rgba(8,10,12,.22) 40%,rgba(8,10,12,.6) 100%); }
.enter-content{ position:relative; z-index:2; text-align:center; padding:0 24px 12vh; }
.enter-content .eyebrow{ display:block; margin-bottom:1rem; }
.enter-title{ display:block; font-family:var(--display); font-weight:450; font-size:clamp(2rem,4vw,3.4rem); color:#fff; margin:.4rem 0 .7rem; }
.enter-sub{ display:block; font-size:.92rem; color:rgba(255,255,255,.85); margin-bottom:1.7rem; letter-spacing:.05em; }
.enter-content .discover{ color:#fff; }
.enter-content .discover::after{ background:#fff; }
.enter-brand{ position:absolute; top:46%; left:50%; transform:translate(-50%,-50%); z-index:3; text-align:center; color:#fff; pointer-events:none; text-shadow:0 2px 20px rgba(0,0,0,.35); }
.enter-mark{ display:block; font-family:var(--display); font-size:clamp(1.7rem,3.2vw,2.6rem); font-weight:500; letter-spacing:.42em; text-indent:.42em; }
.enter-cjk{ display:block; font-family:var(--serif); font-size:.78rem; letter-spacing:.55em; text-indent:.55em; margin-top:8px; opacity:.92; }
.enter-divider{ position:absolute; top:0; bottom:0; left:50%; width:1px; background:rgba(255,255,255,.35); z-index:3; pointer-events:none; }

/* ---------- Product wall (4 連幅 full-bleed) ---------- */
.product-wall{ width:100vw; margin-left:calc(50% - 50vw); display:grid; grid-template-columns:repeat(4,1fr); }
.pwall-pane{ position:relative; min-height:64vh; background-size:cover; background-position:center; border:none; cursor:pointer; padding:0; overflow:hidden; display:flex; align-items:flex-end; justify-content:center; font-family:inherit; }
.pwall-veil{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,10,12,0) 38%,rgba(8,10,12,.58) 100%); transition:background .6s var(--ease); }
.pwall-pane:hover .pwall-veil{ background:linear-gradient(180deg,rgba(8,10,12,.08) 25%,rgba(8,10,12,.66) 100%); }
.pwall-meta{ position:relative; z-index:2; text-align:center; color:#fff; padding:0 16px 44px; }
.pwall-name{ display:block; font-family:var(--serif); font-size:clamp(1.2rem,1.7vw,1.62rem); font-weight:450; margin:9px 0 18px; }
.product-cat.light{ color:rgba(255,255,255,.82); }
.pwall-meta .discover{ color:#fff; }
.pwall-meta .discover::after{ background:#fff; }

/* ---------- Product modal (lightbox) ---------- */
.pmodal{ position:fixed; inset:0; z-index:1000; opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s var(--ease); }
.pmodal.open{ opacity:1; visibility:visible; }
.pmodal-backdrop{ position:absolute; inset:0; background:rgba(10,12,14,.62); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }
.pmodal-card{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.955); opacity:0; width:min(940px,94vw); max-height:90vh; overflow:hidden; background:#fff; display:grid; grid-template-columns:1fr 1fr; transition:transform .42s var(--ease), opacity .42s var(--ease); }
.pmodal.open .pmodal-card{ transform:translate(-50%,-50%) scale(1); opacity:1; }
.pmodal-img{ background:#eef3f6; }
.pmodal-img img{ width:100%; height:100%; object-fit:cover; }
.pmodal-body{ padding:clamp(30px,4vw,52px); overflow-y:auto; max-height:90vh; }
.pmodal-close{ position:absolute; top:12px; right:16px; z-index:4; background:none; border:none; font-size:30px; line-height:1; cursor:pointer; color:#0a0a0a; }
.pmodal-more{ position:absolute; left:50%; right:0; bottom:0; height:62px; display:flex; align-items:flex-end; justify-content:center; padding-bottom:12px; background:linear-gradient(rgba(255,255,255,0), #fff 74%); pointer-events:none; opacity:0; transition:opacity .35s var(--ease); z-index:3; }
.pmodal-more.show{ opacity:1; }
.pmodal-more svg{ width:22px; height:22px; color:var(--gold-deep); animation:moreBounce 1.8s var(--ease) infinite; }
@keyframes moreBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }
.pm-cat{ font-size:.66rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold-deep); }
.pm-name{ font-family:var(--serif); font-size:1.6rem; font-weight:450; margin:.5rem 0 1rem; }
.pm-intro{ font-size:.96rem; line-height:1.9; color:var(--ink-soft); margin-bottom:1.4rem; }
.pm-dl{ margin:0 0 1.2rem; border-top:1px solid var(--line-soft); padding-top:14px; }
.pm-dl dt{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); margin-top:12px; }
.pm-dl dd{ font-size:.86rem; line-height:1.75; color:var(--ink-soft); margin:3px 0 0; }
.pm-caution{ font-size:.74rem; line-height:1.7; color:rgba(10,10,10,.5); border-top:1px solid var(--line-soft); padding-top:12px; margin-bottom:1.6rem; }

/* ---------- Facts (成分科普) ---------- */
.facts{ padding:clamp(90px,11vw,150px) 0; background:#fafbfc; }
.fact-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(34px,5vw,70px); margin-top:clamp(48px,6vw,78px); }
.fact{ text-align:center; }
.fact-num{ display:block; font-family:var(--display); font-size:clamp(2rem,3.4vw,2.8rem); font-weight:450; letter-spacing:.02em; color:var(--gold-deep); margin-bottom:1.1rem; }
.fact::after{ content:""; display:block; width:30px; height:1px; background:var(--line); margin:0 auto 1.3rem; }
.fact p{ font-size:.96rem; max-width:18em; margin:0 auto; }

/* ---------- Soap guide (選皂指南) ---------- */
.guide{ padding:clamp(90px,11vw,150px) 0; background:var(--white); }
.guide-row{ max-width:680px; margin:clamp(40px,5vw,64px) auto 0; }
.guide-item{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:24px 8px; border-bottom:1px solid var(--line-soft); }
.guide-item:first-child{ border-top:1px solid var(--line-soft); }
.guide-skin{ font-size:1rem; color:var(--ink-soft); letter-spacing:.02em; }
.guide-arrow{ flex:1; height:1px; background:var(--line); margin:0 6px; }
.guide-soap{ font-family:var(--serif); font-size:1.18rem; color:var(--ink); white-space:nowrap; }

/* ---------- FAQ ---------- */
.faq{ padding:clamp(90px,11vw,150px) 0; background:#fafbfc; }
.faq-list{ max-width:760px; margin:clamp(40px,5vw,60px) auto 0; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{ list-style:none; cursor:pointer; padding:24px 36px 24px 4px; position:relative; font-family:var(--serif); font-size:1.1rem; color:var(--ink); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"＋"; position:absolute; right:6px; top:23px; color:var(--gold); font-weight:300; transition:transform .3s var(--ease); }
.faq-item[open] summary::after{ content:"－"; }
.faq-item p{ padding:0 4px 26px; font-size:.95rem; line-height:1.9; color:var(--ink-soft); }

/* ---------- Placeholder blocks ---------- */
[data-placeholder]{ position:relative; overflow:hidden; background:linear-gradient(135deg,#f4f7f9,#eaf0f3); }
[data-placeholder]::before{
  content:attr(data-placeholder); position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:28px; font-family:var(--sans); font-size:.74rem; line-height:1.8; letter-spacing:.06em; color:rgba(10,10,10,.32);
}
[data-placeholder]::after{ content:""; position:absolute; inset:18px; border:1px solid rgba(0,102,204,.12); pointer-events:none; }

/* ---------- Maison statement ---------- */
.statement{ padding:clamp(110px,16vw,200px) 0; text-align:center; }
.statement-inner{ max-width:780px; margin:0 auto; padding:0 32px; }
.statement-title{ font-size:clamp(2rem,5vw,3.4rem); font-weight:450; line-height:1.35; margin-bottom:2.2rem; letter-spacing:.02em; }
.statement-body{ font-size:1.1rem; line-height:2.15; margin-bottom:2.6rem; color:var(--ink-soft); font-weight:400; }

/* ---------- Full-bleed editorial ---------- */
/* full-bleed editorial slide — image fills, caption overlaid bottom-left */
.editorial{ position:relative; min-height:100dvh; display:flex; align-items:flex-end; overflow:hidden; }
.editorial-media{ position:absolute; inset:0; z-index:0; background:#eef3f6; }
.editorial-media.alt{ background:linear-gradient(135deg,#eef3f6,#e6edf1); }
.editorial::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(8,10,12,0) 28%,rgba(8,10,12,.64) 100%); pointer-events:none; }
.editorial-caption{ position:relative; z-index:2; max-width:640px; margin:0; text-align:left; padding:clamp(44px,6vw,92px); color:#fff; }
.editorial-caption .eyebrow{ text-align:left; }
.editorial-caption h2,.editorial-caption .italic-lg{ font-size:clamp(1.8rem,4vw,2.8rem); font-weight:450; margin-bottom:1.2rem; color:#fff; }
.editorial-caption p{ margin-bottom:1.8rem; color:rgba(255,255,255,.9); }
.editorial-caption .eyebrow.light,.editorial-caption .light{ color:rgba(255,255,255,.85); }
.editorial-caption .discover.light{ color:#fff; }
.editorial-caption .discover.light::after{ background:#fff; }

/* Maison story hero — centered, collection-cover treatment */
#maison-story{
  align-items:center;
  justify-content:center;
  text-align:center;
}
#maison-story::after{
  background:linear-gradient(180deg,rgba(8,10,12,.20) 0%,rgba(8,10,12,.34) 46%,rgba(8,10,12,.42) 100%);
}
#maison-story .editorial-caption{
  max-width:900px;
  margin:0 auto;
  padding:0 28px;
  text-align:center;
}
#maison-story .editorial-caption .eyebrow{
  text-align:center;
  margin-bottom:1.25rem;
}
#maison-story .editorial-caption .italic-lg{
  font-size:clamp(2.4rem,5.8vw,4.8rem);
  line-height:1.18;
  margin-bottom:1.55rem;
}
#maison-story .editorial-caption p:not(.eyebrow){
  max-width:42em;
  margin:0 auto 2rem;
  font-size:clamp(.96rem,1.2vw,1.08rem);
  line-height:2.05;
}
#maison-story .discover{
  margin-top:.2rem;
}

/* ---------- Block headers ---------- */
.series,.pillars,.ritual,.stockists,.contact{ padding:clamp(96px,12vw,160px) 0; }
.block-head{ text-align:center; max-width:620px; margin:0 auto clamp(50px,6vw,84px); }
.block-title{ font-size:clamp(1.8rem,4.4vw,3rem); font-weight:450; letter-spacing:.02em; }
.block-title.center{ text-align:center; }
.block-intro{ margin-top:1.4rem; color:var(--ink-soft); }
.block-intro.center{ text-align:center; max-width:34em; margin-left:auto; margin-right:auto; }

/* ---------- Series ---------- */
.series{ background:var(--white); }
.product-data{ display:none; }
.product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:40px; }
.product{ text-align:center; }
.product-img{ aspect-ratio:3/4; margin-bottom:26px; overflow:hidden; transition:transform 1.1s var(--ease); }
.product-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.product[data-accent="vegan"] .product-img{ background:linear-gradient(180deg,#dfeaf0 0%,#eef3f6 46%,#fafbfc 100%); }
.product[data-accent="original"] .product-img{ background:linear-gradient(180deg,#dfeaf0 0%,#eef3f6 46%,#fafbfc 100%); }
.product[data-accent="greentea"] .product-img{ background:linear-gradient(180deg,#dfeaf0 0%,#eef3f6 46%,#fafbfc 100%); }
.product[data-accent="herbal"] .product-img{ background:linear-gradient(180deg,#dfeaf0 0%,#eef3f6 46%,#fafbfc 100%); }
.product[data-accent] .product-img[data-placeholder]::before{ color:rgba(10,10,10,.4); }
.product[data-accent] .product-img[data-placeholder]::after{ border-color:rgba(0,102,204,.2); }
.product:hover .product-img{ transform:scale(1.03); }
.product-cat{ font-size:.66rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold-deep); }
.product h3{ font-size:1.32rem; font-weight:450; margin:.8rem 0 1rem; line-height:1.45; }
.product p{ font-size:.96rem; margin-bottom:1.2rem; min-height:4.5em; font-weight:400; }
.product-attrs{ list-style:none; display:flex; justify-content:center; flex-wrap:wrap; gap:0 13px; margin:0 0 1.7rem; }
.product-attrs li{ position:relative; font-size:.76rem; letter-spacing:.06em; color:var(--ink-soft); }
.product-attrs li:not(:last-child)::after{ content:"·"; color:var(--gold); margin-left:13px; }
.product-detail{ text-align:left; max-width:340px; margin:0 auto 1.4rem; }
.product-detail summary{ list-style:none; cursor:pointer; display:block; width:100%; text-align:center; font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-deep); padding:8px 0; }
.product-detail summary::-webkit-details-marker{ display:none; }
.product-detail summary::after{ content:"＋"; margin-left:8px; color:var(--gold); }
.product-detail[open] summary::after{ content:"－"; }
.detail-body{ margin-top:8px; padding-top:14px; border-top:1px solid var(--line-soft); }
.detail-name{ font-family:var(--serif); font-size:.94rem; font-weight:500; color:var(--ink); margin-bottom:12px; }
.detail-body dl{ margin:0 0 12px; }
.detail-body dt{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); margin-top:11px; }
.detail-body dd{ font-size:.84rem; line-height:1.75; color:var(--ink-soft); margin:2px 0 0; }
.detail-caution{ font-size:.74rem; line-height:1.7; color:rgba(21,17,13,.5); border-top:1px solid var(--line-soft); padding-top:11px; }
.series-note{ text-align:center; max-width:46em; margin:clamp(40px,5vw,62px) auto 0; font-size:.9rem; color:var(--ink-soft); }

/* ---------- Spotlight (split) ---------- */
/* ---------- Series cover (full-bleed) ---------- */
.series-cover{ position:relative; min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; overflow:hidden; color:#fff; }
.series-cover-media{ position:absolute; inset:0; z-index:0; background:#eef3f6; }
.series-cover-veil{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(8,10,12,.30),rgba(8,10,12,.46)); }
.series-cover-text{ position:relative; z-index:2; max-width:820px; padding:0 28px; }
.series-cover .eyebrow.light{ color:rgba(255,255,255,.85); }
.series-cover-title{ font-family:var(--display); font-weight:450; font-size:clamp(2.2rem,5.6vw,4.4rem); line-height:1.22; color:#fff; margin:.7rem 0 1.5rem; }
.series-cover-sub{ font-size:1rem; line-height:1.95; color:rgba(255,255,255,.86); max-width:36em; margin:0 auto; }

/* ---------- Product slides (one composition per screen) ---------- */
.product-slide{ position:relative; min-height:100dvh; display:grid; grid-template-columns:1.04fr .96fr; align-items:stretch; background:#fafbfc; overflow:hidden; contain:layout paint; }
.ps-reverse .ps-photo{ order:2; }
.ps-photo{ position:relative; overflow:hidden; isolation:isolate; background:#eef3f6; min-width:0; min-height:0; }
.ps-photo img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:translate3d(0,var(--product-y,0px),0) scale(var(--product-scale,1.06));
  transition:transform 1.12s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
html.snap #pager > .product-slide.is-active .ps-photo img{
  --product-y:0px;
  --product-scale:1.015;
}
html.snap #pager > .product-slide.is-prev .ps-photo img{
  --product-y:30px;
  --product-scale:1.06;
}
html.snap #pager > .product-slide.is-next .ps-photo img{
  --product-y:-30px;
  --product-scale:1.06;
}
.ps-text{ display:flex; flex-direction:column; justify-content:center; min-width:0; min-height:0; padding:clamp(40px,6vw,96px); }
.ps-text .product-cat{ color:var(--gold-deep); }
.ps-name{ font-family:var(--serif); font-weight:450; font-size:clamp(2rem,4vw,3.2rem); line-height:1.3; margin:.6rem 0 1.4rem; }
.ps-desc{ font-size:1.02rem; line-height:1.95; color:var(--ink-soft); margin-bottom:1.7rem; max-width:30em; }
.ps-text .product-attrs{ justify-content:flex-start; margin:0 0 2.1rem; }
.ps-cta{ align-self:flex-start; background:none; border:none; cursor:pointer; }

.spotlight{ position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:stretch; min-height:88vh; }
.spotlight-media{ position:relative; overflow:hidden; background:linear-gradient(150deg,#eef3f6,#e6edf1); }
.spotlight-text{ display:flex; flex-direction:column; justify-content:center; padding:clamp(56px,8vw,120px); }
.spotlight-text h2{ margin:.4rem 0 1.8rem; }
.spotlight-text p{ font-size:1.05rem; line-height:2.05; margin-bottom:2.2rem; max-width:34em; }

/* ---------- Pillars ---------- */
.pillars{ background:#fafbfc; }
.pillar-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(30px,5vw,72px); margin-top:clamp(48px,6vw,80px); }
.pillar{ text-align:center; }
.pillar-no{ font-family:var(--display); font-size:1.6rem; color:var(--gold); display:block; margin-bottom:1.2rem; letter-spacing:.1em; }
.pillar h3{ font-size:1.36rem; font-weight:450; margin-bottom:1.1rem; }
.pillar::after{ content:""; display:block; width:30px; height:1px; background:var(--line); margin:1.4rem auto 0; }
.pillar p{ font-size:.96rem; }

/* ---------- Ritual ---------- */
.ritual{ background:var(--white); }
.steps{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(28px,4vw,56px); counter-reset:s; }
.steps li{ text-align:center; }
.step-no{ font-family:var(--display); font-size:1.4rem; color:var(--gold); display:block; margin-bottom:1.1rem; letter-spacing:.1em; }
.steps h4{ font-size:1.22rem; font-weight:450; margin-bottom:.8rem; }
.steps p{ font-size:.94rem; }

/* ---------- Stockists ---------- */
.stockists{ background:#fafbfc; }
.channel-block{ max-width:880px; margin:0 auto; }
.channel-block + .channel-block{ margin-top:56px; }
.channel-label{ font-size:.7rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold-deep); text-align:center; padding-bottom:22px; border-bottom:1px solid var(--line); margin-bottom:8px; }
.channel-grid{ display:grid; grid-template-columns:repeat(2,1fr); }
.channel{ display:flex; flex-direction:column; align-items:center; gap:16px; padding:46px 30px; border-bottom:1px solid var(--line-soft); transition:background .5s var(--ease); }
.channel:nth-child(odd){ border-right:1px solid var(--line-soft); }
.channel-grid .channel:last-child:nth-child(odd){ grid-column:1 / -1; border-right:none; }
.channel:hover{ background:#ffffff; box-shadow:0 2px 12px rgba(0,0,0,0.06); }
.channel-name{ font-family:var(--serif); font-size:1.3rem; font-weight:400; }
.channel-meta{ font-size:.8rem; color:var(--ink-soft); letter-spacing:.04em; }

/* retailer-grouped online channels */
.retailer-grid{ display:grid; grid-template-columns:repeat(2,1fr); }
.retailer{ padding:40px 36px; border-bottom:1px solid var(--line-soft); }
.retailer:nth-child(odd){ border-right:1px solid var(--line-soft); }
.retailer .channel-name{ display:block; margin-bottom:16px; }
.retailer-links{ display:flex; flex-wrap:wrap; align-items:center; row-gap:8px; }
.retailer-links a{ font-size:.86rem; letter-spacing:.04em; color:var(--ink-soft); transition:color .3s var(--ease); white-space:nowrap; }
.retailer-links a + a{ margin-left:14px; padding-left:14px; border-left:1px solid var(--line); }
.retailer-links a:hover{ color:var(--gold-deep); }

/* ---------- Contact ---------- */
.contact{ background:var(--white); }
.contact-cta{ text-align:center; margin-top:2.6rem; }

/* ---------- Footer ---------- */
.site-footer{ background:#fafbfc; padding:80px 0 40px; }
.footer-top{ display:flex; flex-direction:column; align-items:center; gap:34px; padding-bottom:46px; border-bottom:1px solid var(--line); }
.footer-brand{ color:var(--ink); }
.footer-nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:30px; }
.footer-nav a{ font-size:.78rem; letter-spacing:.16em; color:var(--ink-soft); transition:color .3s; }
.footer-nav a:hover{ color:var(--gold-deep); }
.footer-base{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; padding-top:30px; font-size:.74rem; letter-spacing:.06em; color:rgba(21,17,13,.5); }
.footer-base a:hover{ color:var(--gold-deep); }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity 1.15s var(--ease), transform 1.15s var(--ease), filter 1.15s var(--ease); }
.editorial-caption.reveal,
.series-cover-text.reveal,
.spotlight-copy.reveal,
.ps-text.reveal,
.statement-inner.reveal{ transform:translateY(48px); filter:blur(5px); }
.reveal.in{ opacity:1; transform:none; filter:none; }
html:not(.js) .reveal{ opacity:1 !important; transform:none !important; filter:none !important; }
.product.reveal:nth-child(2){ transition-delay:.1s; }
.product.reveal:nth-child(3){ transition-delay:.2s; }
.product.reveal:nth-child(4){ transition-delay:.3s; }
.steps li.reveal:nth-child(2){ transition-delay:.1s; }
.steps li.reveal:nth-child(3){ transition-delay:.2s; }
.steps li.reveal:nth-child(4){ transition-delay:.3s; }
.pillar.reveal:nth-child(3){ transition-delay:.1s; }
.pillar.reveal:nth-child(4){ transition-delay:.2s; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .product-grid{ grid-template-columns:repeat(2,1fr); gap:34px; }
  .product p{ min-height:0; }
  .steps{ grid-template-columns:repeat(2,1fr); gap:40px; }
  .product-wall{ grid-template-columns:repeat(2,1fr); }
  .pwall-pane{ min-height:52vh; }
  .fact-row{ grid-template-columns:1fr; gap:44px; }
  .pmodal-card{ grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); max-height:88vh; }
  .pmodal-img{ height:28vh; }
  .pmodal-body{ max-height:none; min-height:0; overflow-y:auto; padding:26px 24px 30px; }
  .pmodal-more{ left:0; }
}
@media (max-width:820px){
  .nav-left,.nav-right{ display:none; }
  .nav-toggle{ display:flex; }
  .header-inner{ grid-template-columns:1fr auto 1fr; }
  .nav-mobile.open{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    position:fixed; inset:0; width:100%; height:100dvh; height:var(--appvh,100dvh);
    background:#ffffff; padding:0 24px; z-index:99; color:var(--ink);
  }
  .nav-mobile.open a{ font-size:1.35rem; letter-spacing:.16em; padding:16px 0; color:var(--ink); }
  .nav-toggle{ z-index:101; }
  .nav-toggle.active span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
  .nav-toggle.active span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }
  .spotlight{ grid-template-columns:1fr; grid-template-rows:46% 54%; min-height:var(--appvh,100dvh); }
  .spotlight-media{ min-height:0; }
  .spotlight-text{ justify-content:center; padding:clamp(20px,4vh,30px) 28px clamp(30px,5vh,44px); }
  .spotlight-text .eyebrow{ margin-bottom:.8rem; }
  .spotlight-text h2{ margin:.2rem 0 1rem; }
  .spotlight-text p{ font-size:.95rem; line-height:1.82; margin-bottom:1.35rem; }
  #sustain .editorial-media img{
    object-position:62% center;
  }
  html.snap .facts,
  html.snap .guide,
  html.snap .pillars,
  html.snap .ritual,
  html.snap .faq{
    padding-top:clamp(34px,5vh,46px);
    padding-bottom:clamp(34px,5vh,46px);
  }
  html.snap .block-head{ margin-bottom:clamp(24px,4vh,34px); }
  html.snap .block-intro{ margin-top:.85rem; }
  html.snap .fact-row{ gap:clamp(18px,3vh,26px); margin-top:0; }
  html.snap .fact-num{ font-size:clamp(1.55rem,7vw,2.05rem); margin-bottom:.5rem; }
  html.snap .fact::after{ margin-bottom:.65rem; }
  html.snap .fact p{ font-size:.9rem; line-height:1.65; }
  html.snap .pillar-row{ gap:clamp(20px,3vh,30px); margin-top:0; }
  html.snap .pillar-no{ margin-bottom:.55rem; }
  html.snap .pillar h3{ margin-bottom:.45rem; }
  html.snap .pillar::after{ margin-top:.75rem; }
  html.snap .pillar p{ font-size:.9rem; line-height:1.65; }
  html.snap .steps{ gap:clamp(18px,3vh,26px); }
  html.snap .step-no{ margin-bottom:.45rem; }
  html.snap .steps h4{ margin-bottom:.35rem; }
  html.snap .steps p{ font-size:.9rem; line-height:1.62; }
  html.snap .reveal,
  html.snap .editorial-caption.reveal,
  html.snap .series-cover-text.reveal,
  html.snap .spotlight-copy.reveal,
  html.snap .ps-text.reveal,
  html.snap .statement-inner.reveal{
    transform:none;
    filter:none;
  }
  .product-slide{ grid-template-columns:1fr; }
  .product-slide .ps-photo{ height:44vh; order:0; }
  .ps-reverse .ps-photo{ order:0; }
  .ps-text{ padding:clamp(24px,5vh,40px) 28px; }
  .ps-name{ margin:.45rem 0 1rem; }
  .ps-desc{ font-size:.96rem; line-height:1.78; margin-bottom:1.2rem; }
  .ps-text .product-attrs{ margin-bottom:1.35rem; }
  .pillar-row{ grid-template-columns:1fr; gap:50px; }
  .enter{ flex-direction:column; }
  .enter-pane{ height:50%; min-height:0; flex:1 1 50%; }
  .enter-pane:hover{ flex:1 1 50%; }
  .enter-content{ padding:0 24px clamp(46px,9vh,80px); }
  .enter-divider{ display:none; }
  .enter-brand{ display:none; }
}
@media (max-width:560px){
  .container,.header-inner{ padding-left:24px; padding-right:24px; }
  .product-grid{ grid-template-columns:1fr; gap:48px; }
  .steps{ grid-template-columns:1fr; gap:44px; }
  .channel-grid,.retailer-grid{ grid-template-columns:1fr; }
  .channel:nth-child(odd),.retailer:nth-child(odd){ border-right:none; }
  .footer-base{ flex-direction:column; align-items:center; text-align:center; gap:8px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; filter:none; }
  .enter-media img,
  .editorial-media img,
  .series-cover-media img,
  .spotlight-media img,
  .ps-photo img{ transform:none !important; }
  html{ scroll-behavior:auto; }
  .discover::after{ transform:scaleX(1) !important; }
}