/* YOUR BRAND C15 — bright minimal. One accent, small type, lots of air. */
:root{
  --paper:#f6f3ef; --ink:#171412; --mute:#77706a; --line:rgba(23,20,18,.12);
  --accent:#ff4a2b; --lav:#e7e4f3; --peach:#f7ddd3;
  --sans:"Inter Tight","Noto Sans Thai",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 15px/1.6 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
img{display:block;max-width:100%}
[data-l="en"]{display:none}
html.l-en [data-l="en"]{display:revert}
html.l-en [data-l="th"]{display:none}

/* header: wordmark on left, pill and language on right */
.top{position:fixed;inset:0 0 auto;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:18px clamp(16px,3vw,36px);pointer-events:none;width:100%}
.top>*{pointer-events:auto}
/* after the film the page scrolls under the header: give it a frosted paper backing so text never collides */
.top{transition:background .35s var(--ease),box-shadow .35s var(--ease)}
.top.solid{background:rgba(246,243,239,.84);box-shadow:0 1px 0 var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.brand{font-weight:600;font-size:13px;letter-spacing:.06em}
.top-right{display:flex;align-items:center;gap:10px}
.pill{display:flex;gap:2px;padding:4px;border-radius:999px;background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.9);box-shadow:0 6px 24px rgba(40,20,10,.08);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.pill a{padding:8px 16px;border-radius:999px;font-size:13px;font-weight:500;transition:background .25s}
.pill a:hover{background:rgba(23,20,18,.06)}
.pill .buy{background:var(--ink);color:#fff}
.pill .buy:hover{background:var(--accent)}
.pill .buy b{font-weight:600}
.pill .buy b:not(:empty){display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:4px;border-radius:9px;background:var(--accent);font-size:11px}
.lang{min-width:44px;min-height:36px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.6);font-size:12px;font-weight:600;letter-spacing:.06em;backdrop-filter:blur(10px)}

/* film */
.film{position:relative;height:420vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#eb5735}
/* last part of the film melts into the paper colour the shop starts with, so film and page join without a seam */
.stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(246,243,239,0) 0%,rgba(246,243,239,.78) 55%,#f6f3ef 92%);opacity:var(--fade,0)}
.stage .beat,.stage .count,.stage .hint{z-index:2}
#cv{position:absolute;inset:0;width:100%;height:100%}
.beat{position:absolute;left:clamp(32px,8vw,120px);top:50%;max-width:420px;opacity:0;transform:translateY(calc(-50% + 14px));will-change:opacity,transform;pointer-events:none}
.beat.on{pointer-events:auto}
.eb{margin:0 0 14px;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:inherit;opacity:.7}
.beat h1,.beat h2{margin:0 0 12px;font-weight:600;letter-spacing:-.025em;line-height:1.08;font-size:clamp(28px,3vw,42px)}
html[lang="th"] .beat h1,html[lang="th"] .beat h2{line-height:1.22;letter-spacing:-.01em}
.sm{margin:0 0 18px;font-size:14px;opacity:.78;max-width:30ch}
.mini{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:999px;background:var(--ink);color:#fff;font-size:13px;font-weight:500}
.mini:hover{background:var(--accent)}
.stage[data-tone="light"] .beat{color:#fff}
.stage[data-tone="light"] .beat .mini{background:#fff;color:var(--ink)}
.hint{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);font-size:11px;letter-spacing:.14em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px;transition:opacity .4s}
.hint i{width:1px;height:28px;background:currentColor;opacity:.5;animation:drip 1.8s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.count{position:absolute;right:clamp(16px,3vw,36px);bottom:26px;font-size:11px;font-weight:500;letter-spacing:.1em;display:flex;align-items:center;gap:10px}
.count i{display:block;width:56px;height:1px;background:rgba(23,20,18,.2);position:relative;overflow:hidden}
.count b{position:absolute;inset:0;background:currentColor;transform-origin:left;transform:scaleX(0)}
.stage[data-tone="light"] .hint,.stage[data-tone="light"] .count{color:#fff}

/* sections share one rhythm */
section:not(.film){padding:clamp(88px,12vw,160px) clamp(20px,6vw,96px)}
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}

/* shop: the end frame of the story, smooth background transition */
.shop{display:grid;grid-template-columns:minmax(300px,460px) minmax(300px,460px);justify-content:center;gap:clamp(32px,6vw,80px);align-items:center;background:linear-gradient(180deg,#f6f3ef 0%,#ffffff 360px)}
.card{margin:0 auto;position:relative;aspect-ratio:4/5;max-width:420px;width:100%;border-radius:28px;overflow:hidden;background:linear-gradient(160deg,var(--lav),var(--peach));
  transform-style:preserve-3d;transition:transform .5s var(--ease),box-shadow .5s;box-shadow:0 30px 80px -30px rgba(120,60,40,.35)}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .2s linear}
.card figcaption{position:absolute;left:18px;bottom:16px;font-size:11px;letter-spacing:.12em;color:#fff;font-weight:500}
.buybox{max-width:440px}
.buybox .eb{color:var(--mute);opacity:1}
.buybox h2{margin:0 0 6px;font-size:clamp(34px,4vw,52px);font-weight:600;letter-spacing:-.03em;line-height:1}
.thin{font-weight:400;color:var(--mute)}
.price{margin:10px 0 22px;font-size:20px;font-weight:500}
.seg{display:inline-flex;padding:4px;border-radius:999px;background:var(--paper);margin-bottom:16px}
.seg button{border:0;background:transparent;padding:10px 20px;border-radius:999px;font-size:13px;font-weight:500;color:var(--mute);min-height:40px}
.seg button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.06)}
.add{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;border:0;border-radius:999px;background:var(--accent);color:#fff;font-size:14px;font-weight:600;letter-spacing:.02em;transition:transform .2s,background .2s}
.add:hover{background:var(--ink)}
.add:active{transform:scale(.98)}
.spec{margin:28px 0 0;border-top:1px solid var(--line)}
.spec div{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);font-size:13px}
.spec dt{color:var(--mute)}
.spec dd{margin:0}
.note{margin:18px 0 0;font-size:11px;color:var(--mute)}

/* formula */
.formula{background:var(--paper)}
.formula>*{max-width:1080px;margin-left:auto;margin-right:auto}
.formula h2,.ritual h2{margin:0 0 56px;font-size:clamp(30px,3.6vw,48px);font-weight:600;letter-spacing:-.025em;line-height:1.12}
.formula .eb,.ritual .eb{color:var(--mute);opacity:1}
.trio{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,56px);max-width:1080px}
.trio li{border-top:1px solid var(--ink);padding-top:20px;font-size:14px;color:var(--mute)}
.trio b{display:block;margin-bottom:10px;font-size:clamp(44px,5.5vw,76px);font-weight:500;letter-spacing:-.04em;line-height:1;color:var(--accent)}
.trio small{font-size:.45em;margin-left:2px}
.trio li:nth-child(2) b,.trio li:nth-child(3) b{color:var(--ink)}
.slice{margin:clamp(56px,8vw,110px) auto 0;border-radius:24px;overflow:hidden;aspect-ratio:21/9;max-width:1080px}
.slice img{width:100%;height:100%;object-fit:cover}

/* ritual */
.ritual{display:grid;grid-template-columns:minmax(300px,460px) minmax(300px,460px);justify-content:center;gap:clamp(32px,6vw,80px);align-items:center;background:#fff}
.wide{margin:0 auto;border-radius:24px;overflow:hidden;aspect-ratio:1/1;max-width:440px;width:100%}
.wide img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform .3s var(--ease);will-change:transform}
.steps{max-width:440px}
.steps ol{list-style:none;margin:0;padding:0}
.steps li{display:flex;gap:18px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line);font-size:16px}
.steps i{font-style:normal;font-size:12px;font-weight:600;color:var(--accent);min-width:14px}

/* close */
.close{text-align:center;background:var(--paper)}
.close>*{max-width:800px;margin-left:auto;margin-right:auto}
.big{margin:0 0 32px;font-size:clamp(40px,7vw,104px);font-weight:500;letter-spacing:-.045em;line-height:1}
.add.ghost{display:inline-flex;width:auto;padding:0 32px;background:var(--ink)}
.add.ghost:hover{background:var(--accent)}

.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding:28px clamp(20px,6vw,96px) 64px;border-top:1px solid var(--line);font-size:12px;color:var(--mute);background:var(--paper)}

.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;z-index:50;padding:12px 20px;border-radius:999px;background:var(--ink);color:#fff;font-size:13px;transition:.35s var(--ease);pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}
.site-credit{position:fixed;left:10px;bottom:10px;z-index:60;font:500 11px/1.2 system-ui,sans-serif;color:#fff;background:rgba(0,0,0,.45);padding:5px 9px;border-radius:999px;text-decoration:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

@media (max-width:760px){
  .brand{font-size:12px}
  .pill{top:auto}
  .pill a{padding:8px 12px;font-size:12px}
  .pill a:first-child{display:none}
  .beat{left:20px;right:20px;top:auto;bottom:clamp(60px,11vh,100px);max-width:none;transform:translateY(14px)}
  .beat h1,.beat h2{font-size:clamp(26px,7vw,32px)}
  .hint{display:none}
  .count{bottom:32px;right:20px}
  .shop,.ritual{grid-template-columns:1fr;gap:40px}
  .card{aspect-ratio:4/5;max-width:340px;margin:0 auto}
  .trio{grid-template-columns:1fr;gap:36px}
  .slice{aspect-ratio:16/9;border-radius:20px}
  .wide{max-width:340px;margin:0 auto}
  .spec div{grid-template-columns:90px 1fr}
}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.hint i{animation:none}}