/* Atelier — shared type, palette and control system. */
@font-face{font-family:'Cormorant Garamond';src:url('../fonts/cormorant-garamond/500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Be Vietnam Pro';src:url('../fonts/huong-scent-ui/400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Be Vietnam Pro';src:url('../fonts/huong-scent-ui/500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
:root{--ivory:#f4f0e8;--ink:#332a26;--wine:#512d35;--line:#d6cbbe;--muted:#71665e;--wall:#e7d5c4;--font-display:'Cormorant Garamond',serif;--font-ui:'Be Vietnam Pro',sans-serif;--type-display:clamp(64px,7.1vw,108px);--type-h2:clamp(36px,3.5vw,54px);--type-h3:clamp(24px,2.2vw,32px);--type-body:16px;--type-small:13px;--type-micro:10px;--radius:0;--control:52px;--touch:44px;--ease:cubic-bezier(.2,.7,.2,1);font-synthesis:none}
html{color:var(--ink);background:var(--ivory);scroll-behavior:auto;scroll-padding-top:104px}
body{font-family:var(--font-ui);font-size:var(--type-body);line-height:1.6;color:var(--ink);background:var(--ivory)}
h1,h2,h3,.brand-serif{font-family:var(--font-display);font-weight:500;letter-spacing:-.035em;color:inherit}
h1{font-size:var(--type-display)}h2{font-size:var(--type-h2)}h3{font-size:var(--type-h3)}
p{line-height:1.7}button,input,select,textarea{font-family:var(--font-ui);font-size:var(--type-small);font-weight:400;color:inherit;border-radius:var(--radius)}
a,button,input,select,textarea,summary{touch-action:manipulation}a,button,summary{min-height:var(--touch)}button{min-width:var(--touch)}a{display:inline-flex;align-items:center}a:has(img){display:block}a,button{transition:color .2s var(--ease),background-color .2s var(--ease),opacity .2s var(--ease),transform .2s var(--ease)}
:is(button,a,input,select,textarea,summary):focus-visible{outline:2px solid var(--wine);outline-offset:4px}
:is(button,a,summary):hover{color:var(--wine)}:is(button,a,summary):active{transform:translateY(1px);opacity:.75}button:disabled,input:disabled{opacity:.45;cursor:not-allowed}
.eyebrow,.product-brand,.brand,.film-eyebrow{font-family:var(--font-ui);font-size:var(--type-micro);font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.button,.film-cta,body[data-page=shop] button:not(.icon),body[data-page=shop] .button{border:1px solid var(--ink);border-radius:var(--radius);min-height:var(--control);padding:12px 22px;font-family:var(--font-ui);font-size:var(--type-small);font-weight:500;line-height:1.6;letter-spacing:.025em;display:inline-flex;align-items:center;justify-content:space-between;gap:24px;text-decoration:none;background:transparent;color:var(--ink)}
.button:hover,.film-cta:hover{background:var(--ink);color:var(--ivory)}
body[data-page=shop] [data-add],body[data-page=shop] a.button[href="#checkout"],body[data-page=shop] #checkout button,body[data-page=shop] #auth:not([data-kind=reset]) button,body[data-page=shop] a.button[href="#login"],body[data-page=shop] a.button[href="#register"],body[data-page=shop] [data-action=report-payment]{background:var(--ink);color:var(--ivory)}
body[data-page=shop] button:hover,body[data-page=shop] .button:hover{background:var(--wine);color:var(--ivory)}
.button.light{background:transparent;color:var(--ivory);border-color:var(--ivory)}.button.light:hover{background:var(--ivory);color:var(--ink)}
input:not([type=checkbox]),textarea,select,.search-inline{border:1px solid var(--line);border-radius:var(--radius);background:transparent;min-height:var(--control);padding:12px 14px;max-width:100%}.search-inline input{border:0;padding:0;min-height:var(--touch)}input:hover,textarea:hover,select:hover{border-color:var(--ink)}input[type=checkbox]{appearance:none;width:44px;height:44px;min-height:44px;vertical-align:middle;border:1px solid var(--line);cursor:pointer;margin:0 10px 0 0}input[type=checkbox]:checked{background:var(--ink);box-shadow:inset 0 0 0 12px var(--ivory)}
.filters button,.ask-price,.text-link{min-height:44px}.save-product,.product-visual .icon,.header .icon{width:44px;height:44px;border-radius:0}.save-product{background:var(--ivory)}
.product-card h3{font-size:var(--type-h3);line-height:1.18;min-height:0}.product-card h3 button{font:inherit;min-height:44px}.product-bottom{flex-wrap:wrap}.catalog-note a{min-height:44px}.footer-grid a,.footer-grid button,.footer-bottom a{min-height:44px}.footer-grid h3{font-family:var(--font-ui);font-size:var(--type-small);letter-spacing:0;font-weight:500}.footer-menu{display:flex;gap:24px;flex-wrap:wrap;padding:24px max(5vw,20px);border-top:1px solid var(--line);font-size:var(--type-small)}.footer-menu a{min-height:44px}
body[data-page=shop] main{padding-top:140px}body[data-page=shop] footer{display:block;background:var(--ivory);color:var(--ink);border-top:1px solid var(--line)}.card h2{font-size:var(--type-h3)}.panel{background:transparent;border:1px solid var(--line)}#notice,.toast{background:var(--ink);color:var(--ivory)}.gift-copy h2,.closing h2{color:var(--ivory)}
/* Compact single-row navigation lives entirely in the wall area. */
header.atelier-header{position:fixed;inset:0 0 auto;height:88px;min-height:0;z-index:40;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:16px;padding:0 2.2vw;background:transparent;border:0;transition:background-color .25s var(--ease);color:var(--ink)}
header.atelier-header.is-solid,body[data-page=shop] header.atelier-header{background:var(--ivory);border-bottom:1px solid var(--line)}
.atelier-header .wordmark{font-family:var(--font-display);font-size:var(--type-h3);font-weight:500;letter-spacing:.015em;color:var(--ink);line-height:1;display:flex;flex-wrap:wrap;column-gap:.2em;align-content:center;flex:0 0 158px;white-space:nowrap}
.atelier-header .wordmark span{font-weight:500}.atelier-header .wordmark small{font-family:var(--font-ui);font-size:var(--type-micro);letter-spacing:.14em;line-height:1.5;transform:scale(.68);transform-origin:left center;width:147%;margin:3px 0 0}
.atelier-header .desktop-nav{display:flex;flex-direction:row;position:static;gap:14px;margin:0;padding:0;background:transparent;border:0;font-size:var(--type-micro);white-space:nowrap;text-transform:uppercase;letter-spacing:.14em}
.atelier-header .header-actions{display:flex;align-items:center;gap:0;margin:0}.atelier-header .menu-toggle{display:inline-flex}.atelier-header .icon{color:var(--ink);background:transparent;border:0;padding:0;display:inline-flex;align-items:center;justify-content:center}.atelier-header svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.3}.atelier-header [id$=count],.atelier-header [data-saved-count]{position:absolute;top:0;right:0;font-size:var(--type-micro)}
.atelier-header .menu-panel{position:absolute;top:100%;left:0;width:min(390px,100vw);max-height:calc(100svh - 88px);overflow:auto;padding:24px;display:none;background:var(--ivory);border:1px solid var(--line);font-size:var(--type-small);margin:0;flex-direction:column;gap:4px}.atelier-header .menu-panel.open{display:flex}.menu-panel a{min-height:44px}
/* Reveals are opt-in. No JS means all content remains visible. */
.reveal-pending{opacity:0;transform:translateY(24px)}.reveal-enter{transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--reveal-delay,0ms);opacity:1;transform:translateY(0)}img.reveal-pending{transform:translateY(24px) scale(1.04)}img.reveal-enter{transform:translateY(0) scale(1)}
@media(min-width:1600px){header.atelier-header{gap:24px;padding-inline:3.3vw}.atelier-header .wordmark{flex-basis:210px}.atelier-header .desktop-nav{font-size:var(--type-small);gap:24px}}
@media(max-width:1199px){:root{--type-display:clamp(44px,6.5vw,72px);--type-h2:40px;--type-h3:26px}header.atelier-header{height:64px;padding:0 24px;gap:12px}.atelier-header .desktop-nav{display:none}.atelier-header .header-saved,.atelier-header .header-cart{display:none}.atelier-header .menu-panel{max-height:calc(100svh - 64px)}.atelier-header .wordmark{flex-basis:158px}.atelier-header .header-actions{margin:0}.atelier-header .header-actions .menu-toggle{order:2}.atelier-header .header-actions [data-search]{order:1}body[data-page=shop] main{padding-top:108px}}
@media(max-width:600px){:root{--type-display:46px;--type-h2:36px;--type-h3:24px;--type-body:14px;--type-small:12px;--control:48px}header.atelier-header{padding:0 14px;gap:0;align-items:flex-start}.atelier-header .wordmark{font-size:var(--type-h3);flex:0 0 102px;height:64px;white-space:normal;column-gap:.15em;letter-spacing:-.015em;line-height:.9}.atelier-header .wordmark small{display:none}.atelier-header .header-actions{height:64px}.atelier-header .icon{width:44px;min-width:44px}.atelier-header .menu-panel{width:100vw}.product-card h3,.card h2{font-size:var(--type-h3)}.footer-menu{gap:12px 24px}.row{flex-wrap:wrap}.row>div{flex-basis:100%}.button,.film-cta{max-width:100%}body[data-page=shop] .grid{gap:32px 14px}.card button{width:100%;padding-inline:10px!important;gap:8px!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal-pending,.reveal-enter{opacity:1!important;transform:none!important}}
html[data-save-data] *,html[data-save-data] *::before{animation:none!important;transition:none!important}html[data-save-data] .reveal-pending{opacity:1;transform:none}
/* Keep the wordmark on one baseline; action icons occupy the wall to the right. */
.atelier-header .wordmark{display:block;flex-basis:180px;white-space:nowrap;line-height:1.1;--type-h3:26px}.atelier-header .wordmark small{width:auto;transform:scale(.68);margin-top:4px}.atelier-header .header-actions{margin-left:auto}
@media(max-width:1199px){.atelier-header .wordmark{flex-basis:180px}.atelier-header .header-actions{margin-left:0}}
@media(max-width:600px){.atelier-header .wordmark{display:flex;flex-wrap:wrap;align-content:center;white-space:normal;flex-basis:102px;--type-h3:24px}.atelier-header .header-actions{margin-left:0}}
html{scrollbar-width:none}html::-webkit-scrollbar{display:none}.campaign,.quiz-photo,.story-layout figure{overflow:hidden}
@media(max-width:600px){.atelier-header .wordmark{flex-basis:78px;--type-h3:22px}.atelier-header .header-actions{margin-left:auto}}
@media(max-width:600px){header.atelier-header{padding-inline:8px}.atelier-header .wordmark{flex-basis:74px;--type-h3:20px}}
.atelier-header .icon:hover{background:var(--ink);color:var(--ivory)}.atelier-header .wordmark:hover{color:var(--wine)}
.footer-grid>div>a:not(.wordmark),.footer-grid button{min-height:44px}
/* Header is self-contained on the shop, which does not load marketing.css. */
.atelier-header a{text-decoration:none}.atelier-header .wordmark small{display:block}.atelier-header .header-actions .icon{position:relative}
@media(max-width:600px){.atelier-header .wordmark small{display:none}}
body[data-page=shop] footer>a:first-child{display:block;text-decoration:none;font-family:var(--font-display);font-size:var(--type-h3);font-weight:500;margin-bottom:8px}body[data-page=shop] footer>span{display:block;font-size:var(--type-small);color:var(--muted);margin-bottom:24px}
/* Programmatic focus targets are not controls: no page frame. */
[tabindex="-1"]:focus{outline:none}
/* Phone: two-letter monogram replaces the wordmark; the header stays see-through over the hero. */
.wordmark-mono{display:none}
@media(max-width:600px){.atelier-header .wordmark{display:block;flex:0 0 auto;font-size:0;line-height:0;height:64px;min-width:44px;padding-left:8px}.atelier-header .wordmark>span:not(.wordmark-mono),.atelier-header .wordmark small{display:none}.atelier-header .wordmark .wordmark-mono{display:inline-flex;align-items:center;height:64px;font-family:var(--font-display);font-weight:500;font-size:28px;line-height:1;letter-spacing:.06em;color:var(--ink)}.atelier-header .wordmark:hover .wordmark-mono{color:var(--wine)}}