/* Bundled serif includes precomposed Vietnamese glyphs in every style. */
@font-face{font-family:'Haute Serif';src:url('assets/fonts/haute-serif-regular.woff') format('woff');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Haute Serif';src:url('assets/fonts/haute-serif-bold.woff') format('woff');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:'Haute Serif';src:url('assets/fonts/haute-serif-italic.woff') format('woff');font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:'Haute Serif';src:url('assets/fonts/haute-serif-bolditalic.woff') format('woff');font-style:italic;font-weight:700;font-display:swap}
:root{--ink:#51321f;--brown:#855333;--brown-soft:#b8916c;--blue:#819bad;--paper:#f5e8d5;--hairline:rgba(123,80,49,.26);--header-h:68px;--safe:env(safe-area-inset-top,0px);--content:322px;--space:24px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#eee9e2;color:var(--ink);font-family:'Haute Serif',Georgia,'Times New Roman',serif;font-size:16px;line-height:1.55}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit}a{color:inherit;text-underline-offset:4px}img{max-width:100%}a:focus-visible,button:focus-visible{outline:2px solid #466b88;outline-offset:4px}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;left:18px;top:-80px;z-index:100;background:var(--paper);padding:12px}.skip-link:focus{top:8px}
.site{position:relative;max-width:480px;margin:0 auto;padding:12px 10px;background:repeating-linear-gradient(90deg,#eee2d2 0 11px,#a6b7c2 11px 13px,#d8dadd 13px 14px,#afbfca 14px 16px,#f1e6d8 16px 29px)}
.paper{position:relative;isolation:isolate;padding:0 20px;background:#f5e8d5 url('assets/paper-texture.jpg') repeat;background-size:500px auto;min-height:100vh}
.rail{position:absolute;top:10px;bottom:10px;width:10px;z-index:25;pointer-events:none;background-repeat:repeat-y;background-size:10px 64px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='64'%3E%3Cpath d='M3 0 C0 10 6 17 3 25 S0 43 3 51 S6 59 3 64 M6 0 C3 10 9 17 6 25 S3 43 6 51 S9 59 6 64' fill='none' stroke='%23855333' stroke-width='0.9'/%3E%3C/svg%3E")}.rail.left{left:3px}.rail.right{right:3px;transform:scaleX(-1)}
.edge{position:absolute;left:8px;right:8px;height:10px;z-index:45;pointer-events:none;background-repeat:repeat-x;background-size:64px 10px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='10'%3E%3Cpath d='M0 3 C10 0 17 6 25 3 S43 0 51 3 S59 6 64 3 M0 6 C10 3 17 9 25 6 S43 3 51 6 S59 9 64 6' fill='none' stroke='%23855333' stroke-width='0.9'/%3E%3C/svg%3E")}.edge.top{top:2px}.edge.bottom{bottom:2px}
.site-header{position:sticky;top:0;z-index:40;min-height:calc(var(--header-h) + var(--safe));padding:calc(5px + var(--safe)) 0 5px;display:grid;grid-template-columns:44px minmax(0,1fr) 105px;align-items:center;gap:4px;background:#f5e8d5 url('assets/paper-texture.jpg');background-size:500px auto;border-bottom:1px solid var(--hairline)}
.menu-toggle{width:44px;height:44px;display:grid;place-items:center;background:none;border:0;cursor:pointer}.menu-toggle svg{width:25px;height:25px;stroke:var(--brown)}.brand-home{display:grid;place-items:center;min-width:0;height:54px}.wordmark{display:block;width:140px;height:auto;max-height:55px;object-fit:contain}.header-links{display:flex;align-items:center;justify-content:flex-end;gap:2px}.header-links a{display:flex;align-items:center;justify-content:center;min-height:44px;white-space:nowrap;text-decoration:none;font-size:11px;letter-spacing:.045em}.header-links .contact-link{min-width:59px}.ig-link{width:44px}.ig-link svg{width:20px;height:20px}
.mobile-menu{position:fixed;z-index:50;top:calc(var(--header-h) + var(--safe) + 3px);width:min(calc(100% - 64px),326px);left:50%;transform:translateX(-50%);padding:12px;background:#f8efdf;border:1px solid var(--brown-soft);border-radius:5px;box-shadow:0 12px 32px #3e2a1725}.mobile-menu[hidden]{display:none}.mobile-menu a{display:flex;min-height:48px;align-items:center;padding:8px 14px;text-decoration:none;font-size:16px}.mobile-menu a+a{border-top:1px solid var(--hairline)}
.section{position:relative;padding:46px 4px 48px;scroll-margin-top:calc(var(--header-offset,68px) + 15px);text-align:center}.section+.section{border-top:1px solid var(--hairline)}.section-title{margin:0 auto 20px;font-size:1rem;line-height:1}.title-art{display:block;width:100%;height:auto;margin:0 auto}.hero .section-title{max-width:304px}.philosophy .section-title{max-width:267px}.brands .section-title{max-width:222px}.explore .section-title{max-width:263px}
.hero{padding-top:36px}.hero .intro{font-size:14px;line-height:1.55;font-style:italic;margin:0 auto 12px;max-width:310px}.hero .scent{font-size:16px;line-height:1.45;font-style:italic;margin:0 auto 22px;max-width:305px}.photo-arch{margin:0 auto 26px;width:min(100%,252px);padding:4px;border:1px solid var(--brown);border-radius:50% 50% 2px 2px / 29% 29% 2px 2px;overflow:hidden;background:rgba(255,246,234,.5)}.photo-arch img{width:100%;height:auto;display:block;border-radius:50% 50% 0 0 / 29% 29% 0 0}
.hero-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.hero-nav a{display:flex;align-items:center;justify-content:center;min-height:50px;padding:8px 3px;border:1px solid var(--brown);border-radius:25px;text-decoration:none;font-size:12px;line-height:1.25;font-weight:normal;white-space:nowrap}.hero-nav a.primary{background:var(--brown);color:#fff5e6}.hero-nav a:hover,.hero-nav a:focus-visible,.cta:hover{background:#684025;color:#fff5e6}
.sketch{position:absolute;pointer-events:none;fill:none;stroke:var(--blue);stroke-width:1;opacity:.4}.abstract{left:-20px;top:16px;width:42px;height:275px}.bird-art{position:absolute;width:47px;height:auto;right:-8px;top:6px;opacity:.5;pointer-events:none}.philosophy .abstract{top:200px;height:270px}.philosophy .bird-art{top:312px;right:-7px;width:58px}.flourish{display:flex;gap:12px;align-items:center;justify-content:center;color:var(--blue);margin:0 auto 22px;line-height:1}.flourish:before,.flourish:after{content:'';height:1px;background:var(--blue);width:53px;opacity:.65}.flourish span{font-size:13px}
.etro-photo{margin:0 auto 30px;width:236px;max-width:100%;padding:4px;border:1px solid var(--brown-soft);background:rgba(255,248,238,.6)}.etro-photo img{display:block;width:100%;height:auto}.quote-block{position:relative;text-align:left;font-size:16px;line-height:1.6;margin:0;padding:0 0 0 15px;border-left:1px solid #9eb0bb}.quote-block p{margin:0 0 18px}.quote-block p:last-child{margin-bottom:0}.quote-block .quote-open{display:block;color:var(--blue);font-size:31px;height:25px;line-height:1}.quote-close{color:var(--blue);font-size:23px;line-height:0}.quote-block.english{border-color:var(--brown-soft);font-size:16px;margin-top:26px}.quote-block.english .quote-open,.quote-block.english .quote-close{color:var(--brown-soft)}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:48px;max-width:100%;padding:10px 22px;border:1px solid var(--brown);border-radius:25px;text-decoration:none;font-size:12px;letter-spacing:.06em;line-height:1.35;background:#f4e6d280;transition:background .18s,color .18s}.cta span{font-size:20px;line-height:1}.philosophy .cta{margin-top:30px}
.eyebrow{font-size:10px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 18px}.brands .lede{font-size:16px;line-height:1.5;margin:0 auto 4px}.brands .lede-en{font-size:14px;font-style:italic;margin:0 auto 23px}.brand-list{list-style:none;padding:0;margin:0;display:grid;grid-auto-flow:column;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(25,auto);text-align:center}.brand-list li{min-width:0;min-height:49px;padding:11px 7px;font-size:15px;line-height:1.4;display:flex;align-items:center;justify-content:center;overflow-wrap:normal;border-bottom:1px solid rgba(129,91,58,.12)}.brand-list li:nth-child(n+26){border-left:1px solid var(--hairline)}.teaser{margin-top:32px;padding-top:26px;border-top:1px solid var(--hairline)}.teaser em{display:block;font-size:23px}.teaser p{font-size:14px;margin:3px 0 18px}
.explore .lede{font-size:22px;margin:0 0 5px}.explore .lede-en{font-size:14px;line-height:1.5;margin:0 auto 26px;max-width:300px}.gallery-group{margin:0 0 32px}.gallery-title{font-size:23px;font-weight:normal;line-height:1.25;text-align:left;margin:0 0 15px}.gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}.photo-slot{min-width:0;width:100%;display:block;aspect-ratio:var(--ratio);padding:0;border:1px solid var(--brown-soft);background:rgba(242,227,207,.2);border-radius:0;cursor:pointer;overflow:hidden}.photo-slot:hover,.photo-slot:focus-visible{border-color:var(--brown)}.photo-slot.wide{grid-column:1/-1}.photo-slot.center{grid-column:1/-1;width:74%;justify-self:center}.photo-slot img{display:block;width:100%;height:auto;object-fit:contain}.photo-slot.has-image{aspect-ratio:auto}.file-input{display:none}.save-images{display:block;margin:20px auto 0;min-height:44px;padding:8px 16px;font-size:12px;border:1px dashed var(--brown-soft);background:transparent;cursor:pointer}.save-images[hidden]{display:none}.image-status{font-size:13px;line-height:1.5}.image-status:empty{display:none}
.contact h2{font-weight:normal;font-style:italic;font-size:36px;line-height:1.2;margin:0 0 20px}.contact-card{margin-top:22px}.contact-card h3{font-weight:normal;font-size:11px;letter-spacing:.16em;margin:0 0 10px}.contact-card p{font-size:16px;line-height:1.5;margin:0 0 12px}.contact-card a{display:inline-flex;align-items:center;min-height:44px;max-width:100%;overflow-wrap:anywhere}.contact-links{list-style:none;padding:0;margin:0}.contact-links li{font-size:15px}.contact-links .fb-text{display:block;min-height:44px;padding-top:10px}.back-top{display:inline-flex;align-items:center;min-height:44px;margin-top:22px;font-size:11px;letter-spacing:.1em;text-decoration:none}.contact .fine{font-size:10px;color:#745843;margin:20px 0 0}
@media(max-width:359px){.paper{padding-inline:16px}.site-header{grid-template-columns:40px minmax(0,1fr) 100px;gap:0}.wordmark{width:110px}.header-links a{font-size:10px}.section{padding-inline:4px}.hero-nav{gap:5px}.hero-nav a{white-space:normal;font-size:12px;min-height:52px}.brand-list{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}.brand-list li:nth-child(n+26){border-left:0}.brand-list li{min-height:44px}.bird-art{width:38px}.contact-links li{font-size:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ==========================================================================
   RESPONSIVE EXTENSION — approved 390 px layout remains the mobile base.
   At >= 600 px the canvas becomes a real tablet/desktop website, not a scaled
   mobile poster. All title/wordmark assets are unchanged PNG artwork.
   ========================================================================== */
.header-start,.hero-copy,.philosophy-head,.philosophy-layout,.philosophy-text,.contact-intro{display:contents}
.desktop-nav{display:none}
#contact{border-top:1px solid var(--hairline)}
.mobile-menu{max-height:calc(100dvh - var(--header-offset,68px) - 24px);overflow:auto}
.header-links a:hover,.header-links a:focus-visible{color:var(--brown);text-decoration:underline}
.desktop-nav a[aria-current="location"]{text-decoration:underline;text-underline-offset:8px}

/* Intermediate tablets. Same assets, more breathing room; no fixed page height. */
@media(min-width:600px){
 :root{--header-h:84px}
 .site{width:100%;max-width:none;margin:0;padding:22px 22px;box-shadow:none}
 .paper{max-width:1360px;margin:0 auto;padding-inline:36px;background-image:url('assets/paper-desktop-seamless.jpg');background-size:1000px auto}.site-header{background-image:url('assets/paper-desktop-seamless.jpg');background-size:1000px auto}
 .site-header{grid-template-columns:1fr 170px 1fr;gap:12px}
 .header-start{display:flex;align-items:center;gap:12px;min-width:0}
 .brand-home{height:68px}
 .wordmark{width:170px;max-height:68px}
 .header-links{gap:10px}
 .header-links a{font-size:12px}
 .header-links .contact-link{min-width:76px}
 .section{padding:64px 12px 68px}
 .hero{padding-top:52px}
 .hero .section-title{max-width:440px}
 .hero .intro{max-width:470px;font-size:16px;margin-bottom:16px}
 .hero .scent{max-width:430px;font-size:18px;margin-bottom:28px}
 .photo-arch{width:320px;margin-bottom:32px}
 .hero-nav{max-width:580px;margin:0 auto;gap:12px}
 .hero-nav a{min-height:52px;font-size:14px;padding-inline:13px;border-radius:30px}
 .hero .abstract{width:62px;height:390px;left:-16px;top:80px}
 .hero .bird-art{width:80px;right:0;top:8px;opacity:.48}
 .philosophy .section-title{max-width:320px}
 .etro-photo{width:290px;margin-bottom:36px}
 .philosophy .quote-block{max-width:570px;margin-left:auto;margin-right:auto;font-size:17px;line-height:1.7;padding-left:24px}
 .philosophy .quote-block.english{margin-top:32px}
 .philosophy .abstract{left:-12px;top:205px;width:62px;height:410px}
 .philosophy .bird-art{top:440px;right:-2px;width:80px}
 .brands .section-title{max-width:280px}
 .brands .lede{font-size:17px}
 .brands .lede-en{font-size:16px;margin-bottom:28px}
 .brand-list{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(17,auto)}
 .brand-list li{font-size:16px;min-height:54px;padding:12px 11px;border-left:0}
 .brand-list li:nth-child(n){border-left:0}
 .brand-list li:nth-child(n+18){border-left:1px solid var(--hairline)}
 .teaser{padding-top:30px;margin-top:36px}
 .teaser em{font-size:27px}
 .teaser p{font-size:16px}
 .cta{font-size:13px;min-height:50px;padding:12px 27px}
 .explore .section-title{max-width:320px}
 .explore .lede{font-size:26px}
 .explore .lede-en{font-size:16px;max-width:540px;margin-bottom:44px}
 .gallery-group{margin-bottom:44px}
 .gallery-title{font-size:27px;margin-bottom:22px;display:flex;align-items:center;gap:24px}
 .gallery-title:after{content:"";height:1px;flex:1;background:var(--hairline)}
 .gallery-grid{gap:18px}
 .gallery-grid .wide{grid-column:auto}
 .gallery-grid .center{width:64%}
 .boutique-grid{align-items:start}
 .contact h2{font-size:42px}
 .contact-card p{font-size:17px}
 .contact-links li{font-size:16px}
 .contact-card h3{font-size:12px}
 .contact .fine{font-size:11px}
 .abstract{opacity:.46}
}
@media(min-width:600px) and (max-width:767px){.brand-list{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(25,auto)}.brand-list li:nth-child(n){border-left:0}.brand-list li:nth-child(n+26){border-left:1px solid var(--hairline)}}
/* Desktop: editorial two-column hero; photo + bilingual text; 4-column brands. */
@media(min-width:1000px){
 :root{--header-h:96px}
 .site{padding:28px clamp(30px,4vw,80px)}
 .paper{padding-inline:clamp(48px,5vw,76px)}
 .site-header{grid-template-columns:1fr 184px 1fr;gap:20px}
 .brand-home{height:80px}
 .wordmark{width:184px;max-height:76px}
 .header-links{gap:18px}
 .header-links a{font-size:13px;letter-spacing:.07em}
 .header-links .contact-link{min-width:82px}
 .ig-link svg{width:22px;height:22px}
 .section{padding:80px 12px 84px}
 .hero{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);grid-template-areas:"copy photo" "actions photo";column-gap:clamp(42px,4vw,64px);padding:64px 10px 80px;align-content:center;text-align:left}
 .hero-copy{display:block;grid-area:copy;align-self:end;padding-bottom:28px;min-width:0}
 .hero .section-title{width:100%;max-width:540px;margin:0 0 32px}
 .hero .intro{max-width:500px;margin:0 0 16px;font-size:18px;line-height:1.55}
 .hero .scent{max-width:455px;margin:0;font-size:20px;line-height:1.6}
 .hero .photo-arch{grid-area:photo;align-self:center;justify-self:center;width:100%;max-width:365px;margin:0;padding:5px}
 .hero-nav{grid-area:actions;width:100%;max-width:548px;margin:0;gap:10px;align-self:start}
 .hero-nav a{min-height:52px;font-size:15px;padding:10px 6px}
 .hero .abstract{left:-42px;top:145px;width:60px;height:385px;opacity:.45}
 .hero .bird-art{right:0;top:11px;width:67px;opacity:.48}
 .philosophy-head{display:block;margin-bottom:38px}
 .philosophy .section-title{max-width:335px;margin-bottom:21px}
 .philosophy .flourish{margin-bottom:0}
 .philosophy-layout{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.65fr);column-gap:clamp(38px,5vw,76px);align-items:start}
 .philosophy .etro-photo{width:100%;max-width:316px;justify-self:center;margin:0}
 .philosophy-text{display:grid;grid-template-columns:1fr;min-width:0;text-align:left}
 .philosophy .quote-block{max-width:none;margin:0;font-size:17px;line-height:1.65;padding-left:20px}
 .philosophy .quote-block.english{margin-top:26px}
 .philosophy .quote-block .quote-open{height:30px;font-size:37px}
 .philosophy .quote-block p{margin-bottom:18px}
 .philosophy .quote-block p:last-child{margin-bottom:0}
 .philosophy-text .cta{justify-self:start;margin-top:30px;grid-column:1/-1}
 .philosophy .abstract{left:-44px;top:300px;width:65px;height:390px;opacity:.42}
 .philosophy .bird-art{right:1px;top:95px;width:68px;opacity:.44}
 .brands .eyebrow{font-size:11px;margin-bottom:22px}
 .brands .section-title{max-width:300px}
 .brands .flourish{margin-bottom:44px}
 .brand-list{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(13,auto)}
 .brand-list li:nth-child(n){border-left:0;border-bottom:0;padding:13px 12px;min-height:53px;font-size:17px;line-height:1.45}
 .brand-list li:nth-child(n+14){border-left:1px solid var(--hairline)}
 .teaser{margin-top:42px;padding-top:30px;display:grid;grid-template-columns:1fr auto;align-items:center;text-align:left}
 .teaser em{font-size:28px}
 .teaser p{font-size:16px;margin-bottom:0;grid-column:1}
 .teaser .cta{grid-column:2;grid-row:1/3;min-width:186px}
 .explore .section-title{max-width:365px;margin-bottom:26px}
 .explore .lede{font-size:27px;margin-bottom:10px}
 .explore .lede-en{max-width:none;font-size:17px;margin-bottom:54px}
 .gallery-title{font-size:28px;margin-bottom:24px;font-weight:normal}
 .gallery-group{margin-bottom:54px}
 .gallery-grid:not(.boutique-grid){grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
 .gallery-grid .center{grid-column:auto;width:100%;justify-self:stretch}
 .boutique-grid{display:flex;align-items:flex-start;gap:24px}
 .boutique-grid .photo-slot{flex:var(--weight) 1 0;min-width:0}
 .photo-slot{background:rgba(242,227,207,.10)}
 .contact{display:grid;grid-template-columns:1.06fr 1fr 1.14fr;column-gap:34px;align-items:start;text-align:left;padding-top:64px;padding-bottom:40px}
 .contact-intro{display:block}
 .contact h2{font-size:41px;line-height:1.18;margin-bottom:20px}
 .contact .flourish{justify-content:flex-start;margin:0}
 .contact .flourish:before{width:30px}.contact .flourish:after{width:52px}
 .contact .eyebrow{font-size:10px;letter-spacing:.14em}
 .contact-card{margin:0;border-left:1px solid var(--hairline);padding-left:28px;min-height:185px}
 .contact-card h3{font-size:11px;margin-bottom:16px}
 .contact-card p{font-size:16px;line-height:1.65}
 .contact-links li{font-size:15px}
 .contact .back-top{grid-column:1/-1;justify-self:center;margin-top:36px}
 .contact .fine{grid-column:1/-1;text-align:center;font-size:11px;margin:12px 0 0}
 .mobile-menu{left:calc((100% - min(100% - 8vw,1360px))/2 + clamp(48px,5vw,76px));transform:none}
}
@media(min-width:1200px){
 .header-start{gap:15px}
 .desktop-nav{display:flex;align-items:center;gap:20px}
 .desktop-nav a{display:flex;align-items:center;min-height:44px;text-decoration:none;white-space:nowrap;font-size:14px;letter-spacing:.012em}
 .desktop-nav a:hover{text-decoration:underline;text-underline-offset:8px}
 .philosophy-layout{grid-template-columns:310px minmax(0,1fr);column-gap:64px;align-items:center}
 .philosophy-text{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 30px;align-items:start}
 .philosophy .quote-block{font-size:17px;line-height:1.7;padding-left:20px}
 .philosophy .quote-block.english{margin-top:0}
 .philosophy .cta{justify-self:center}
 .brand-list li:nth-child(n){font-size:18px;min-height:52px}
}
@media(min-width:1600px){
 .hero{column-gap:90px;padding-top:76px;padding-bottom:88px}
 .hero .photo-arch{max-width:390px}
 .hero .section-title{max-width:555px}
 .philosophy-layout{grid-template-columns:330px minmax(0,1fr);column-gap:72px}
 .philosophy .etro-photo{max-width:330px}
 .philosophy .quote-block{font-size:18px}
 .section{padding-block:88px}
 .contact{padding-bottom:40px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Keep the title uncropped and Vietnamese syllables intact in narrow cards. */
.hero .section-title,.hero-copy{overflow:visible}
.hero .title-art{height:auto;max-height:none;object-fit:contain}
.contact-card p,.desktop-nav a,.hero-nav a,.mobile-menu a{word-break:normal;overflow-wrap:normal}
@media(min-width:1000px){.desktop-nav{gap:clamp(10px,1.3vw,20px)}.desktop-nav a{font-size:13px}.contact{grid-template-columns:1fr 1.05fr 1.2fr;column-gap:24px}.contact-card{padding-left:20px}.brand-list li{overflow-wrap:anywhere}}

.address-floor{white-space:nowrap}