:root{
  color-scheme:light;
  --bg:#F8F5EF;--surface:#F2EDE4;--text:#2D3E3A;--muted:#596A65;--gold:#A37D32;--border:oklch(0.35 0.025 165 / .18);
  --dark:#2D3E3A;--inverse:#F8F5EF;--inverse-muted:#D4DDD7;--gold-light:#D4B06A;
  --font-display:'Cormorant',Georgia,serif;--font-body:'Switzer',system-ui,sans-serif;
  --text-xs:clamp(.75rem,.73rem + .1vw,.8125rem);--text-sm:clamp(.875rem,.84rem + .12vw,.9375rem);--text-base:clamp(1rem,.95rem + .2vw,1.0625rem);--text-xl:clamp(1.875rem,1.5rem + 1.3vw,2.75rem);--text-hero:clamp(2.625rem,1.8rem + 2.6vw,3.5rem);
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--space-32:8rem;
  --radius:100px;
}
[data-theme=dark]{color-scheme:dark;--bg:#202D29;--surface:#283630;--text:#F3EEE4;--muted:#BDC8C0;--gold:#D4B06A;--border:oklch(.90 .02 90 / .2);--dark:#17231F}
body{font-family:var(--font-body);font-size:var(--text-base);background:var(--bg);color:var(--text);overflow-wrap:anywhere}
.hero>*,.story-grid>*,.blend>*,.formats-grid>*{min-width:0}
.container{max-width:1160px;margin-inline:auto;padding-inline:var(--space-8)}
.skip-link{position:fixed;top:var(--space-2);left:var(--space-4);z-index:200;padding:var(--space-3);background:var(--text);color:var(--bg);transform:translateY(-150%)}
.skip-link:focus{transform:translateY(0)}
.header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--border)}
.header-inner{max-width:1440px;margin-inline:auto;padding:var(--space-4) var(--space-8);display:flex;gap:var(--space-6);align-items:center;min-height:84px}
.studio-logo{display:flex;align-items:center;gap:var(--space-3);flex-shrink:0}
.brand-mark{width:30px;height:36px;color:var(--gold)}
.studio-name{font-family:var(--font-display);font-weight:500;font-size:1.5rem;display:block;line-height:1.1}
.studio-tagline{font-size:var(--text-xs);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);display:block;margin-top:var(--space-1)}
.desktop-nav{margin-left:auto;display:flex;align-items:center;gap:var(--space-5);font-size:var(--text-xs);white-space:nowrap}
.desktop-nav a{min-height:44px;display:inline-flex;align-items:center;border-bottom:1px solid transparent}
.desktop-nav a:hover,.desktop-nav a[aria-current]{border-color:var(--gold)}
.header-controls{display:flex;align-items:center;gap:var(--space-2)}
.theme-button{width:44px;height:44px;border:0;background:transparent;font-size:var(--text-base)}
.menu-button{display:none;border:0;background:none;padding:var(--space-2);font-size:var(--text-sm);min-height:44px;align-items:center;gap:var(--space-3)}
.mobile-nav{padding:var(--space-4) var(--space-6);border-top:1px solid var(--border);max-height:70vh;overflow-y:auto}
.mobile-nav a{display:flex;align-items:center;min-height:44px;font-size:var(--text-sm)}
.mobile-nav a[aria-current]{color:var(--gold)}
.hero{display:grid;grid-template-columns:1.12fr 1fr;gap:var(--space-20);align-items:center;padding-block:var(--space-12) var(--space-16)}
.eyebrow{font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500}
.hero h1{font:400 var(--text-hero)/1.03 var(--font-display);margin-top:var(--space-6);letter-spacing:-.02em}
.hero h1 span{display:block}
.hero h1 .soundroof{font-size:.71em;letter-spacing:.12em;font-weight:500;margin-bottom:var(--space-3)}
.gold-rule{width:44px;height:1px;background:var(--gold);margin-block:var(--space-8)}
.hero-tagline{font-family:var(--font-display);font-size:var(--text-xl);font-weight:400;line-height:1.17}
.hero-description{max-width:46ch;color:var(--muted);margin-block:var(--space-6) var(--space-8)}
.button{display:inline-flex;gap:var(--space-6);justify-content:center;align-items:center;background:var(--text);color:var(--bg);border:1px solid var(--text);border-radius:var(--radius);padding:var(--space-3) var(--space-6);min-height:48px;max-width:100%;font-size:var(--text-sm);font-weight:500;transition:background .2s,color .2s}
.button:hover{background:transparent;color:var(--text)}
.button:active{opacity:.8}
.hero-footnote{font-size:var(--text-xs);letter-spacing:.08em;color:var(--muted);margin-top:var(--space-6)}
.hero-photo img{width:100%;background:var(--surface)}
.hero-photo figcaption{font-size:var(--text-xs);color:var(--muted);text-align:right;margin-top:var(--space-3)}
.story{background:var(--surface);padding-block:var(--space-16)}
.story-grid{display:grid;grid-template-columns:.85fr 1.3fr;gap:var(--space-20)}
h2,h3{font-family:var(--font-display);font-weight:400;line-height:1.16}
h2{font-size:var(--text-xl);margin-top:var(--space-4)}
.story-copy{max-width:65ch;color:var(--muted)}
.story-copy p+p{margin-top:var(--space-5)}
.collection{padding-block:var(--space-20) var(--space-8)}
#main,#collection,.blend,#formats{scroll-margin-top:110px}
.collection-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-8);padding-bottom:var(--space-10)}
.scent-links{display:flex;gap:var(--space-6);font-size:var(--text-sm);flex-wrap:wrap}
.scent-links a{border-bottom:1px solid var(--border);padding-block:var(--space-3);min-height:44px}
.scent-links a:hover{border-color:var(--gold)}
.blend{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-20);align-items:center;padding-block:var(--space-12) var(--space-16);border-top:1px solid var(--border)}
.product-photo{background:white}
.product-photo img{width:100%;height:auto;object-fit:contain}
.blend-reverse .product-photo{grid-column:2;grid-row:1}
.blend-reverse .blend-copy{grid-column:1;grid-row:1}
.blend h3{font-size:var(--text-xl);margin-top:var(--space-3)}
.intentions{font-size:var(--text-sm);font-weight:500;letter-spacing:.015em;margin-block:var(--space-3) var(--space-6)}
.blend-copy>p:not(.eyebrow):not(.intentions){color:var(--muted);margin-top:var(--space-4);max-width:50ch}
.ingredients{margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--border);font-size:var(--text-sm)}
.ingredients div+div{margin-top:var(--space-4)}
.ingredients dt{font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;font-weight:500;margin-bottom:var(--space-1)}
.ingredients dd{color:var(--muted);margin:0}
.formats{background:var(--dark);color:var(--inverse);padding-block:var(--space-20)}
.formats-grid{display:grid;grid-template-columns:.8fr 1.35fr;gap:var(--space-20)}
.formats .eyebrow{color:var(--gold-light)}
.formats-intro h2{margin-top:var(--space-5)}
.formats-intro>p:last-child{color:var(--inverse-muted);margin-top:var(--space-6);font-size:var(--text-sm)}
.format-row{display:grid;grid-template-columns:1fr auto;gap:var(--space-6);padding-block:var(--space-8);border-bottom:1px solid oklch(.95 .01 90 / .2)}
.format-row:first-child{padding-top:0}
.format-row:last-child{border:0;padding-bottom:0}
.format-row h3{font-size:var(--text-xl);max-width:22ch}
.format-row div>p{color:var(--inverse-muted);font-size:var(--text-sm);margin-top:var(--space-3);max-width:43ch}
.format-row div>.offer{color:var(--gold-light);font-size:var(--text-xs)}
.price{font-size:var(--text-xl);font-family:var(--font-display);line-height:1.1;white-space:nowrap;font-variant-numeric:tabular-nums}
.price span{display:block;font-family:var(--font-body);font-size:var(--text-xs);letter-spacing:.08em;color:var(--inverse-muted);text-align:right;margin-bottom:var(--space-2)}
.contact{text-align:center;padding-block:var(--space-24)}
.contact>p:not(.eyebrow){color:var(--muted);margin-top:var(--space-5)}
.contact .button{margin-top:var(--space-8)}
.footer{background:var(--surface)}
.footer-top{display:flex;justify-content:space-between;align-items:center;gap:var(--space-8);padding-block:var(--space-12)}
.footer-name{font-family:var(--font-display);font-size:var(--text-xl)}
.footer-top>p,.footer-top>a{font-size:var(--text-sm);color:var(--muted)}
.footer-top>a{min-height:44px;display:flex;align-items:center}
.footer-bottom{display:flex;justify-content:space-between;gap:var(--space-6);padding-block:var(--space-5);border-top:1px solid var(--border);font-size:var(--text-xs);color:var(--muted)}
.footer-bottom div{display:flex;gap:var(--space-6)}
.footer-bottom a{display:inline-flex;align-items:center;min-height:44px}
.footer-bottom>p{align-self:center}
.img-fallback{display:grid;place-items:center;min-height:300px;padding:var(--space-8);background:var(--surface);color:var(--muted);text-align:center}
@media(min-width:1440px){.hero{gap:var(--space-24)}}
@media(max-width:1190px){.desktop-nav{display:none}.header-controls{margin-left:auto}.menu-button{display:inline-flex}.hero{gap:var(--space-12)}.blend{gap:var(--space-12)}}
@media(max-width:800px){
  .container{padding-inline:var(--space-6)}
  .header-inner{padding-inline:var(--space-6);gap:var(--space-3);min-height:76px}
  .brand-mark{display:none}
  .studio-name{font-size:1.5rem}
  .hero{grid-template-columns:1fr 1fr;gap:var(--space-8)}
  .hero-description{font-size:var(--text-sm)}
  .story-grid{gap:var(--space-10);grid-template-columns:.8fr 1.3fr}
  .collection-heading{align-items:flex-start;flex-direction:column;gap:var(--space-5)}
  .scent-links{gap:var(--space-6)}
  .blend{gap:var(--space-8)}
  .formats-grid{grid-template-columns:1fr;gap:var(--space-12)}
  .formats-intro h2 br{display:none}
  .formats-intro h2{max-width:16ch}
  .formats-intro>p:last-child{display:none}
  .footer-top{flex-wrap:wrap}
}
@media(max-width:600px){
  .header-inner{padding-block:var(--space-3);flex-wrap:wrap}
  .studio-logo{max-width:100%;flex-shrink:1}
  .studio-tagline{letter-spacing:.05em}
  .hero{grid-template-columns:1fr;padding-block:var(--space-10) var(--space-12);gap:var(--space-10)}
  .hero h1{margin-top:var(--space-5)}
  .hero-description{font-size:var(--text-base)}
  .gold-rule{margin-block:var(--space-6)}
  .hero-footnote{margin-top:var(--space-4)}
  .hero-photo{max-width:460px;margin-inline:auto}
  .hero-photo figcaption{text-align:left}
  .story{padding-block:var(--space-12)}
  .story-grid{grid-template-columns:1fr;gap:var(--space-6)}
  .story h2 br{display:none}
  .collection{padding-top:var(--space-12)}
  .collection-heading{padding-bottom:var(--space-6)}
  .scent-links{gap:var(--space-4);font-size:var(--text-xs)}
  .blend{grid-template-columns:1fr;gap:var(--space-8);padding-block:var(--space-8) var(--space-12)}
  .blend-reverse .product-photo,.blend-reverse .blend-copy{grid-column:auto;grid-row:auto}
  .ingredients{margin-top:var(--space-6)}
  .formats{padding-block:var(--space-12)}
  .format-row{display:flex;flex-wrap:wrap;gap:var(--space-4)}
  .format-row>div{flex:1 1 200px;min-width:0}
  .format-row h3{font-size:1.75rem}
  .price{font-size:var(--text-xl)}
  .contact{padding-block:var(--space-16)}
  .desktop-break{display:none}
  .footer-top{gap:var(--space-5);padding-block:var(--space-8)}
  .footer-top>p{width:100%}
  .footer-bottom{flex-direction:column;gap:var(--space-2)}
  .footer-bottom>p{align-self:flex-start}
}
@media(max-width:360px){
  .header-inner{padding-inline:var(--space-4);gap:var(--space-2)}
  .studio-name{font-size:1.25rem}
  .header-controls{gap:0}
  .menu-button{padding-inline:0}
}
.formats-grid{grid-template-columns:1fr;gap:var(--space-12)}
.formats-intro h2{max-width:none}
.formats-intro h2 br{display:none}
.formats-intro>p:last-child{display:none}
.format-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8)}
.format-row,.format-row:first-child,.format-row:last-child{display:flex;flex-direction:column;gap:var(--space-5);padding:0;border:0;min-width:0}
.format-photo img{width:100%;height:auto;object-fit:contain;background:white}
.format-photo figcaption{font-size:var(--text-xs);line-height:1.5;color:var(--inverse-muted);margin-top:var(--space-3);min-height:3em}
.format-row .format-copy{flex:1}
.format-row h3{font-size:clamp(1.75rem,1.4rem + .6vw,2rem)}
.format-row .price{padding-top:var(--space-5);border-top:1px solid oklch(.95 .01 90 / .2);display:flex;align-items:baseline;gap:var(--space-2)}
.format-row .price span{margin:0}
@media(max-width:800px){.format-list{gap:var(--space-5)}}
@media(max-width:600px){
  .format-list{grid-template-columns:1fr;gap:var(--space-12)}
  .format-photo figcaption{min-height:0}
  .format-row,.format-row:first-child,.format-row:last-child{gap:var(--space-4)}
  .format-row .format-copy{flex:auto}
}