/* The Beauty Nutritionist — Site v1 · tokens from Visual Brand Guide v1 */
:root{
  --cream:#F6F1E7;
  --paper:#FDFBF6;
  --tan:#DDBE9B;
  --tan-deep:#B98D5C;
  --sage:#D6DDC9;
  --sage-deep:#4C5A42;
  --ink:#26241F;
  --soft:#5D564A;
  --faint:#8A836F;
  --coral:#E2604A;
  --coral-deep:#B23E27;
  --coral-hover:#C74A31;
  --line:#E5DECF;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--cream);color:var(--ink);
  font-family:'Instrument Sans',Arial,'Noto Sans TC','PingFang TC',sans-serif;
  font-size:17px;line-height:1.7;
}
.serif{font-family:'Fraunces',Georgia,serif;}
.tc{font-family:'Noto Serif TC',serif;}
img{display:block;}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}
.coral{color:var(--coral);}

/* ---------- Nav ---------- */
nav{position:sticky;top:0;z-index:60;background:rgba(246,241,231,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;max-width:1080px;margin:0 auto;}
.logo{font-size:16px;letter-spacing:.02em;text-decoration:none;color:var(--ink);}
.logo b{font-weight:500;font-family:'Fraunces',serif;font-size:17px;}
.logo .dot{color:var(--coral);}
.nav-left{display:flex;align-items:center;gap:14px;}
.nav-right{display:flex;align-items:center;gap:18px;}
.nav-links{display:flex;gap:24px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;}
.nav-links a{color:var(--soft);text-decoration:none;}
.nav-links a:hover,.nav-links a.here{color:var(--ink);border-bottom:1px solid var(--coral);}
.lang-btn{border:1px solid var(--tan-deep);background:none;color:var(--soft);padding:6px 15px;border-radius:999px;cursor:pointer;font-size:12.5px;letter-spacing:.05em;font-family:inherit;line-height:1;}
.lang-btn:hover{border-color:var(--coral);color:var(--coral-deep);}
.cta-mini{border:1px solid var(--coral-deep);color:var(--coral-deep);text-decoration:none;padding:8px 18px;border-radius:2px;font-size:13px;letter-spacing:.08em;}
.cta-mini:hover{background:var(--coral-deep);color:var(--cream);}
.burger{display:none;background:none;border:none;cursor:pointer;font-size:22px;color:var(--ink);line-height:1;padding:4px 8px;}
.mobile-menu{display:none;border-top:1px solid var(--line);background:var(--paper);}
.mobile-menu a{display:block;padding:15px 24px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:14px;letter-spacing:.08em;text-transform:uppercase;}
.mobile-menu.open{display:block;}

/* ---------- Type ---------- */
h1{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(36px,5.2vw,60px);line-height:1.16;letter-spacing:-.01em;text-wrap:balance;}
h2{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(27px,3.4vw,40px);line-height:1.25;margin-bottom:20px;text-wrap:balance;}
h3{font-weight:500;font-size:20px;text-wrap:balance;}
.eyebrow{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);margin-bottom:16px;font-weight:500;}
.eyebrow::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--coral);vertical-align:middle;margin-right:11px;position:relative;top:-1px;}
/* centered eyebrows: dot + gap (18px) skew the label right; pull back half to center optically */
.eyebrow.ec{position:relative;left:-9px;}
.lede{color:var(--soft);max-width:640px;text-wrap:balance;}

/* Single-language display blocks — toggle with the active language */
html[lang="en"] .only-zh{display:none;}
html:not([lang="en"]) .only-en{display:none;}
.num{font-family:'Fraunces',serif;font-weight:500;}
sup.fn{color:var(--coral);font-size:11px;font-weight:500;}
.fn-note{font-size:12.5px;color:var(--faint);border-top:1px solid var(--line);padding-top:10px;margin-top:26px;max-width:560px;}

/* ---------- Buttons ---------- */
.btn{display:inline-block;background:var(--coral-deep);color:var(--cream);text-decoration:none;padding:16px 36px;border-radius:2px;letter-spacing:.08em;font-size:14.5px;transition:background .18s;}
.btn:hover{background:var(--coral-hover);}
.btn.ghost{background:none;border:1px solid var(--ink);color:var(--ink);}
.btn.ghost:hover{border-color:var(--coral-deep);color:var(--coral-deep);background:none;}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.mail-ico{font-size:1.34em;vertical-align:-.09em;margin-right:4px;}
.mail-svg{width:20px;height:20px;vertical-align:-5px;margin-right:9px;}

/* ---------- Logo placeholders + marquee (shared) ---------- */
.logo-ph{width:120px;height:48px;border:1px dashed var(--tan-deep);border-radius:3px;background:var(--paper);display:flex;align-items:center;justify-content:center;color:var(--tan-deep);font-size:11px;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:0 8px;line-height:1.3;}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);}
.marquee-track{display:flex;gap:16px;width:max-content;animation:marquee 32s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee .logo-ph{flex:0 0 auto;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;}.marquee .logo-ph[aria-hidden],.marquee .lg-ink[aria-hidden],.marquee .lg-knock[aria-hidden],.marquee .lg-kwrap[aria-hidden]{display:none;}.marquee{-webkit-mask-image:none;mask-image:none;}}

/* ---------- Logo marquees — real logos, sizes optically equalized ---------- */
.marquee-track.lg{gap:64px;align-items:center;padding-left:64px;animation-duration:44s;}
/* flat single-ink: transparent logo images darkened to ink via filter
   (works on file:// local preview, unlike CSS mask) */
.lg-ink{flex:0 0 auto;display:block;object-fit:contain;filter:brightness(0);opacity:.82;}
/* tonal fallback: keeps internal greys, drops white via multiply */
.lg-knock{flex:0 0 auto;display:block;width:auto;opacity:.82;
  filter:grayscale(1) contrast(1.12);mix-blend-mode:multiply;}
/* crop wrapper for sources with baked-in canvas padding */
.lg-kwrap{flex:0 0 auto;position:relative;overflow:hidden;}
.lg-kwrap img{position:absolute;left:50%;top:var(--cy,50%);transform:translate(-50%,-50%);
  height:var(--ih);width:auto;opacity:.82;filter:grayscale(1) contrast(1.12);mix-blend-mode:multiply;}

/* ---------- Sections & grids ---------- */
section{padding:96px 0;}
.split-37{display:grid;grid-template-columns:37fr 63fr;gap:64px;align-items:center;}
.split-73{display:grid;grid-template-columns:63fr 37fr;gap:64px;align-items:center;}
.band-paper{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.band-sage{background:var(--sage);}
.band-sage .eyebrow{color:var(--sage-deep);}
.band-sage .lede,.band-sage p{color:var(--sage-deep);}

/* ---------- Imagery ---------- */
.ph{border-radius:3px;overflow:hidden;position:relative;}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.ph:hover img{transform:scale(1.025);}
.ph.p45{aspect-ratio:4/5;}
.ph.p169{aspect-ratio:16/9;}
.ph.p11{aspect-ratio:1/1;}
.caption{font-size:12px;color:var(--faint);margin-top:10px;letter-spacing:.04em;}
.ph.placeholder{background:#EFEAD9;border:1px dashed var(--tan-deep);display:flex;align-items:center;justify-content:center;padding:24px;}
.ph.placeholder span{font-size:12px;letter-spacing:.08em;color:var(--tan-deep);text-transform:uppercase;text-align:center;line-height:1.8;max-width:240px;}

/* ---------- Credential strip ---------- */
.cred{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper);}
.cred-inner{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 52px;padding:26px 24px;max-width:1080px;margin:0 auto;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);}
.cred-inner b{font-family:'Fraunces',serif;font-weight:500;color:var(--ink);font-size:16px;text-transform:none;letter-spacing:0;margin-right:6px;}

/* ---------- Pillar cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px;}
.card{background:var(--paper);border:1px solid var(--line);border-radius:3px;overflow:hidden;display:flex;flex-direction:column;}
.card .ph{border-radius:0;aspect-ratio:4/3.4;}
.card-body{padding:28px 26px 32px;}
.card .k{font-size:11px;letter-spacing:.22em;color:var(--coral);margin-bottom:12px;}
.card h3{font-size:21px;margin-bottom:2px;}
.card .zh{font-family:'Noto Serif TC',serif;color:var(--faint);font-size:15px;margin-bottom:12px;}
.card p{color:var(--soft);font-size:15px;line-height:1.65;}

/* ---------- Vertical quote ---------- */
.vquote{display:flex;justify-content:center;gap:56px;align-items:center;padding:20px 0;}
.vquote .zhv{writing-mode:vertical-rl;font-family:'Noto Serif TC',serif;font-size:clamp(22px,2.6vw,30px);letter-spacing:.34em;line-height:2.2;color:var(--ink);height:340px;}
.vquote .env{font-family:'Fraunces',serif;font-style:italic;font-size:clamp(18px,2vw,23px);color:var(--soft);max-width:none;text-align:center;}

/* ---------- Program ---------- */
.program-box{background:var(--paper);border:1px solid var(--line);border-radius:3px;display:grid;grid-template-columns:1.25fr 1fr;overflow:hidden;}
.program-main{padding:60px 56px;}
.program-main ul{list-style:none;margin:26px 0 34px;}
.program-main li{padding:11px 0;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--soft);}
.program-main li::before{content:"·";color:var(--coral);margin-right:12px;font-size:20px;}
.program-side{background:var(--sage);color:var(--sage-deep);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:48px 36px;gap:4px;}
.program-side .weeks{font-family:'Fraunces',serif;font-size:88px;line-height:1;color:var(--ink);}
.program-side .weeks-label{letter-spacing:.24em;text-transform:uppercase;font-size:12px;margin-bottom:20px;}
.program-side p{font-size:14px;line-height:1.6;}

/* ---------- Logo pills ---------- */
.logos{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 0;margin-top:26px;}
.logos span{white-space:nowrap;color:var(--soft);font-size:14.5px;letter-spacing:.01em;}
.logos span:not(:last-child)::after{content:"·";margin:0 14px;color:var(--tan-deep);}

/* ---------- Signup ---------- */
.signup{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px;}
.signup input{flex:1;min-width:220px;padding:14px 16px;border:1px solid var(--line);background:var(--paper);border-radius:2px;font-family:inherit;font-size:15px;color:var(--ink);}
.signup input:focus{outline:none;border-color:var(--tan-deep);}
.signup button{background:none;color:var(--coral-deep);border:1px solid var(--coral-deep);padding:14px 28px;border-radius:2px;font-family:inherit;font-size:13.5px;letter-spacing:.08em;cursor:pointer;}
.signup button:hover{background:var(--coral-deep);color:var(--cream);}

/* ---------- Contact ---------- */
.contact-primary{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:36px;font-size:17px;}
.contact-primary a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--coral);padding-bottom:2px;transition:color .18s,border-color .18s;}
.contact-primary a:hover{color:var(--coral-deep);border-color:var(--coral-deep);}
.contact-social{display:flex;gap:12px;margin-top:24px;}
.contact-social a{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--paper);display:flex;align-items:center;justify-content:center;color:var(--soft);transition:border-color .18s,color .18s;}
.contact-social a:hover{border-color:var(--coral);color:var(--coral-deep);}
.contact-social svg{width:20px;height:20px;display:block;}
.addr{margin-top:28px;color:var(--faint);font-size:14px;text-wrap:balance;}

/* ---------- Footer ---------- */
footer{padding:44px 24px 56px;color:var(--faint);font-size:12.5px;border-top:1px solid var(--line);}
footer .f-inner{max-width:1080px;margin:0 auto;display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center;}
footer .disc{max-width:660px;text-wrap:balance;}
footer .f-inner p{text-wrap:balance;}
footer nav.fnav{position:static;background:none;border:none;backdrop-filter:none;}
footer .fnav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 26px;font-size:14px;letter-spacing:.08em;text-transform:uppercase;}
footer .fnav a{color:var(--soft);text-decoration:none;padding:10px 8px;display:inline-block;}
footer .fnav a:hover{color:var(--coral-deep);}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease;}
.rv.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none;}.ph img{transition:none;}}

/* ---------- Responsive ---------- */
@media(max-width:860px){
  .nav-links,.cta-mini{display:none;}
  .burger{display:block;}
  section{padding:64px 0;}
  .split-37,.split-73{grid-template-columns:1fr;gap:36px;}
  .cards{grid-template-columns:1fr;}
  .program-box{grid-template-columns:1fr;}
  .program-main{padding:40px 28px;}
  .vquote{gap:28px;}
  .vquote .zhv{height:220px;}
}