/* Chocolili Atelier — shared tokens, chrome and components */
:root{
  --espresso:#211A17; --morandi:#3E342F; --walnut:#2F2623; --gold:#D4AF37; --oat:#F5F2EB; --grey:#A89F91;
  --oat-2:#ECE7DC; --oat-3:#E3DCCD; --ink-soft:#5A4D45;

  --f-display:'Playfair Display',serif;
  --f-head:'Noto Sans TC',sans-serif;
  --f-body:'Noto Serif TC',serif;
  --f-ui:'Noto Sans TC',sans-serif;

  --s-hero:clamp(56px,7.4vw,116px);
  --s-title:clamp(44px,5.4vw,84px);
  --s-head:clamp(32px,3.6vw,52px);
  --s-body:17px;
  --s-small:15px;

  --m:clamp(20px,2.8vw,40px);
  --gap-section:clamp(120px,14vw,200px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--oat);color:var(--espresso);font:400 var(--s-body)/1.65 var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
[hidden]{display:none!important}
::selection{background:var(--gold);color:var(--espresso)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.en{font-family:var(--f-display);font-weight:400;letter-spacing:0}

/* ---------- chrome: identical on every page ---------- */
.mark{position:fixed;top:18px;left:var(--m);z-index:60;display:block;width:72px;height:46px}
.mark img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:left center;transition:opacity .4s var(--ease)}
.mark .mark__l{opacity:0}
@media (prefers-reduced-motion:no-preference){.mark,.burger{animation:chrome-in 1s .1s var(--ease-out) both}}
@keyframes chrome-in{from{opacity:0;transform:translateY(-10px)}}
.on-dark .mark .mark__l,.menu-open .mark .mark__l{opacity:1}
.on-dark .mark .mark__d,.menu-open .mark .mark__d{opacity:0}
.burger{position:fixed;top:18px;right:calc(var(--m) - 10px);z-index:80;width:44px;height:44px}
.burger i{position:absolute;left:9px;right:9px;height:1px; /* taste-skill-ignore: spec asks for 1px vector lines */background:var(--gold);transition:transform .6s var(--ease-out),opacity .3s,left .4s var(--ease)}
.burger i:nth-child(1){top:16px}
.burger i:nth-child(2){top:22px;left:17px}
.burger i:nth-child(3){top:28px}
.burger:hover i:nth-child(2){left:9px}
.burger{transition:background .3s}
.burger.on-img{background:rgba(33,26,23,.62)}
.menu-open .burger i:nth-child(1){transform:translateY(6px) rotate(225deg)}
.menu-open .burger i:nth-child(2){opacity:0}
.menu-open .burger i:nth-child(3){transform:translateY(-6px) rotate(135deg)}

.menu{position:fixed;inset:0;z-index:70}
.menu[hidden]{display:none}
.menu__veil{position:absolute;inset:0;background:rgba(33,26,23,.5);opacity:0;transition:opacity .7s var(--ease)}
.menu-open .menu__veil{opacity:1}
.menu__panel{position:absolute;top:0;right:0;bottom:0;width:min(56vw,860px);background:var(--espresso);color:var(--oat);
  display:grid;grid-template-columns:36% 1fr;gap:32px;padding:120px 64px 48px;
  clip-path:ellipse(0% 0% at 100% 0%);transition:clip-path .9s var(--ease-out)}
.menu-open .menu__panel{clip-path:ellipse(150% 150% at 100% 0%)}
.menu__logos{display:flex;flex-direction:column;gap:40px}
.logo-cl{display:block;width:min(200px,100%)}
.logo-cl img{width:100%;height:auto}
.logo-ec{width:104px;height:104px;border-radius:50%;overflow:hidden}
.logo-ec img{width:100%;height:100%;object-fit:cover}
.menu__right{display:grid;grid-template-rows:1fr auto;gap:40px}
.menu nav a{display:flex;align-items:baseline;gap:18px;padding:8px 0;opacity:0;transform:translateY(14px);transition:opacity .5s,transform .7s var(--ease-out),color .3s}
.menu-open .menu nav a{opacity:1;transform:none}
.menu-open .menu nav li:nth-child(1) a{transition-delay:.25s}
.menu-open .menu nav li:nth-child(2) a{transition-delay:.31s}
.menu-open .menu nav li:nth-child(3) a{transition-delay:.37s}
.menu-open .menu nav li:nth-child(4) a{transition-delay:.43s}
.menu-open .menu nav li:nth-child(5) a{transition-delay:.49s}
.menu-open .menu nav li:nth-child(6) a{transition-delay:.55s}
.menu nav .en{font-size:28px;line-height:1.2}
.menu nav .zh{font:300 15px/1 var(--f-head);color:var(--grey);letter-spacing:.08em}
.menu nav a:hover .en,.menu nav a[aria-current="page"] .en{color:var(--gold)}
.menu__contact{font:400 15px/1.75 var(--f-head)}
.menu__contact .g{color:var(--grey)}
.menu__contact a:hover{color:var(--gold)}
.socials{display:flex;gap:10px;margin-top:22px}
.socials a{width:44px;height:44px;display:grid;place-items:center;background:var(--walnut);transition:background .3s}
.socials a:hover{background:var(--morandi)}
.socials svg{width:20px;height:20px;fill:none;stroke:var(--gold);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.no-scroll{overflow:hidden}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 28px;background:var(--espresso);color:var(--oat);
  font:500 15px/1 var(--f-head);letter-spacing:.04em;transition:background .3s,color .3s,transform .2s}
.btn:hover{background:var(--morandi)}
.btn:active{transform:scale(.98)}
.btn .en{transition:transform .4s var(--ease-out)}
.btn:hover .en{transform:translateX(4px)}
.btn--oat{background:var(--oat);color:var(--espresso)}
.btn--oat:hover{background:var(--oat-2)}
.btn--gold{background:var(--gold);color:var(--espresso)}
.btn--gold:hover{background:#E0BF55}
.btn--quiet{background:var(--oat-2);color:var(--espresso)}
.btn--quiet:hover{background:var(--oat-3)}
.btn[disabled]{opacity:.4;pointer-events:none}

/* ---------- inner page frame ---------- */
.wrap{padding:0 var(--m)}
.page-title{font:300 var(--s-title)/1.02 var(--f-head);letter-spacing:-.02em}
.page-title + .en,.sub-en{display:block;font-size:19px;color:var(--ink-soft);margin-top:14px}
.h2{font:300 var(--s-head)/1.12 var(--f-head);letter-spacing:-.01em}
.lede{font-size:19px;line-height:1.65;max-width:30em}
.small{font-size:var(--s-small);color:var(--ink-soft)}
.section{margin-top:var(--gap-section)}
.tags{display:flex;gap:4px;flex-wrap:wrap}
.chip{padding:10px 16px;background:var(--oat-2);font:400 15px/1 var(--f-head);transition:background .3s,color .3s}
.chip:hover{background:var(--oat-3)}
.chip[aria-pressed="true"]{background:var(--espresso);color:var(--oat)}

/* ---------- footer: a designed close ---------- */
.foot{margin-top:var(--gap-section);background:var(--espresso);color:var(--oat);min-height:92svh;display:grid;grid-template-rows:auto 1fr auto;padding:56px var(--m) 24px}
.foot__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;font:400 15px/1.8 var(--f-head)}
.foot__cols b{display:block;font-weight:500;color:var(--oat)}
.foot__cols span,.foot__cols a{display:block;color:var(--grey)}
.foot__cols a:hover{color:var(--gold)}
.foot__cols .socials{margin-top:12px}
.foot__word{display:block;width:100%;margin-top:40px}
.foot__word text{font-family:var(--f-display);fill:var(--oat)}
.foot__legal{display:flex;justify-content:space-between;gap:16px;margin-top:20px;font:400 13px/1.5 var(--f-head);color:var(--grey)}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){.rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform 1.1s var(--ease-out)}}
.rv.in{opacity:1;transform:none}
.js-off .rv{opacity:1;transform:none}
/* the clip sits on the picture, not the observed box: IntersectionObserver ignores a clipped target */
.shutter{background:transparent!important}
@media (prefers-reduced-motion:no-preference){
  .shutter img{clip-path:inset(0 0 100% 0);transform:scale(1.12);transition:clip-path 1.1s var(--ease-out),transform 1.6s var(--ease-out)}
  .shutter.in img{clip-path:inset(0 0 0 0);transform:none}
  .js-off .shutter img{clip-path:none;transform:none}
}
.zoom{overflow:hidden}
.zoom img{transition:transform 1.2s var(--ease-out)}
.zoom:hover img{transform:scale(1.04)}
[data-parallax]{will-change:transform}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .rv{opacity:1;transform:none}
}

@media (max-width:900px){
  .menu__panel{width:100vw;grid-template-columns:1fr;grid-template-rows:auto 1fr;padding:96px 24px 32px;gap:28px}
  .menu__logos{flex-direction:row;align-items:center;gap:24px}
  .logo-cl{width:132px}
  .logo-ec{width:72px;height:72px}
  .menu nav .en{font-size:24px}
  .foot__cols{grid-template-columns:1fr 1fr;gap:28px 20px}
  .foot__legal{flex-direction:column}
}
@media (max-width:600px){
  .mark{top:12px;width:62px;height:44px}
  .burger{top:12px;right:10px}
  .lede{font-size:17px}
}