@font-face{font-family:'AREN Display';src:url('./assets/fonts/bodoni-moda.ttf') format('truetype');font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:'AREN Display';src:url('./assets/fonts/bodoni-moda-italic.ttf') format('truetype');font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:'AREN Sans';src:url('./assets/fonts/lm-sans-regular.otf') format('opentype');font-weight:400;font-display:swap}
:root{--pearl:#fffaf3;--ink:#1e1712;--champagne:#b69063;--serif:'AREN Display',serif;--sans:'AREN Sans',sans-serif;color-scheme:light}
*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; margin: 0; overflow-x: hidden; }
*{box-sizing:border-box}body{margin:0;min-width:320px;background:#493b30;color:var(--ink);font-family:var(--sans)}a{color:inherit;text-decoration:none}button,input{font:inherit}h1,h2,p{margin:0}button,a,input{touch-action:manipulation}:focus-visible{outline:2px solid #7c4d2d;outline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero{width:100%;aspect-ratio:16/9;position:relative;isolation:isolate;background-image:url('./assets/aren-liquid-glass-background.png');background-size:cover;background-position:center top;background-repeat:no-repeat;overflow:hidden}
.hero::before,.hero::after{content:'';position:absolute;pointer-events:none;z-index:0}
.hero::before{inset:0;background:radial-gradient(ellipse at 40% 45%,#fff0d0,transparent 60%);opacity:.025;animation:haze 24s ease-in-out infinite}
.hero::after{left:3.6%;top:13.5%;width:43.5%;height:60%;border-radius:4%;background:linear-gradient(110deg,transparent 30%,#fffaf3 45%,transparent 60%);background-size:250% 100%;opacity:.035;animation:shimmer 32s ease-in-out infinite alternate}
.site-header{position:absolute;left:0;top:3%;width:100%;text-align:center;z-index:2}.wordmark{font-size:3.25vw;letter-spacing:.38em;text-indent:.38em;display:inline-block;line-height:1}
.copy-panel{position:absolute;left:7.9%;top:20.9%;width:35.2%;text-align:center;z-index:2;background:none;border:0;box-shadow:none}
h1{font-family:var(--serif);font-weight:400;font-size:4.05vw;line-height:1.15;text-transform:uppercase;letter-spacing:-.055em;white-space:nowrap}
h1::before{content:'';display:block;width:5.7vw;height:1px;background:#a8803e;margin:0 auto 1.85vw}
.eyebrow{font-size:1.15vw;line-height:1.4;letter-spacing:.32em;text-transform:uppercase;margin-top:1.05vw;white-space:nowrap}
.lead{font-family:var(--serif);font-style:italic;font-size:1.53vw;line-height:1.3;margin:1.55vw auto 0}
.private-form{margin-top:2vw}.private-form::before{content:'';display:block;width:4vw;height:1px;background:#a8803e;margin:0 auto 1.7vw}
.form-heading>span{font-size:1.15vw;letter-spacing:.3em;text-transform:uppercase}.form-heading p{font-size:1.04vw;letter-spacing:.05em;line-height:1.35;margin:.5vw 0 1.45vw;white-space:nowrap}
.email-control{display:grid;grid-template-columns:minmax(0,1fr) 27.5%;height:3.9vw;border:1px solid #fffaf3;border-radius:9px;overflow:hidden;background:#fffaf344}.email-control input{min-width:0;width:100%;padding:0 1.7vw;border:0;background:transparent;color:var(--ink);font-size:.78vw;letter-spacing:.25em}.email-control input::placeholder{text-transform:uppercase;color:#3b3028}.email-control button{border:0;border-left:1px solid #fffaf3;background:#49382dcc;color:var(--pearl);text-transform:uppercase;letter-spacing:.25em;font-size:1vw;cursor:pointer}.email-control button:hover{background:#30231ee6}.email-control input:focus-visible,.email-control button:focus-visible{outline:2px solid #7c4d2d;outline-offset:-4px}.form-message{font-size:.9vw;line-height:1.25;min-height:1.25em;margin-top:.4vw}
.hero-product{position:absolute;z-index:1;left:55.15%;top:14.1%;width:22.6%;height:auto;object-fit:contain;background:transparent;filter:drop-shadow(0 5px 5px #1e171238);animation:bottle-float 8s ease-in-out infinite}
.philosophy-band{position:absolute;top:83.5%;left:0;width:100%;display:grid;grid-template-columns:1fr 1fr;text-align:center;color:var(--pearl);z-index:2}.philosophy-band>div{padding:0 5vw}.philosophy-band>div+div{border-left:1px solid #fffaf3a6}.philosophy-band h2{font-family:var(--sans);font-size:1vw;font-weight:400;text-transform:uppercase;letter-spacing:.25em;line-height:1.4}.philosophy-band h2::before{content:'';display:block;width:3vw;height:1px;background:#b69063;margin:0 auto .8vw}.philosophy-band p{font-family:var(--serif);font-size:1.03vw;line-height:1.25;margin:.45vw auto 0}.philosophy-band .band-motto{font-family:var(--sans);font-size:.8vw;text-transform:uppercase;letter-spacing:.22em;margin-top:.85vw}
.philosophy{padding:90px 7vw;color:var(--pearl);background:linear-gradient(#493b30,#30251e)}.philosophy-card{max-width:1400px;margin:auto}.section-label{display:flex;justify-content:space-between;text-transform:uppercase;letter-spacing:.25em;font-size:12px;border-bottom:1px solid #fffaf340;padding-bottom:24px}.philosophy-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:6vw;padding-top:40px}.philosophy-copy h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.2vw,60px);line-height:1.1}.prose p{font-family:var(--serif);font-size:20px;line-height:1.6;margin:0 0 22px}.prose .closing{font-style:italic}.site-footer{display:flex;justify-content:space-between;gap:24px;padding:28px 7vw;color:var(--pearl);background:#30251e;text-transform:uppercase;letter-spacing:.25em;font-size:11px}
@keyframes bottle-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes haze{0%,100%{opacity:.018}50%{opacity:.045}}@keyframes shimmer{from{background-position:80% 0}to{background-position:20% 0}}
@media(max-width:1100px){
.hero{aspect-ratio:auto;min-height:0;display:flex;flex-direction:column;align-items:center;padding:110px 24px 0;background-size:auto 900px;background-color:#493b30;background-position:35% top}
.site-header{top:28px}.wordmark{font-size:36px}.copy-panel{position:relative;left:auto;top:auto;width:min(100%,620px);padding:28px 16px;background:#f5eee5d9;border:0}.hero::after{display:none}h1{font-size:clamp(32px,6.5vw,64px);letter-spacing:-.04em}h1::before{width:80px;margin-bottom:26px}.eyebrow{font-size:clamp(10px,1.8vw,16px);letter-spacing:.2em;white-space:normal;margin-top:18px}.lead{font-size:clamp(20px,3vw,27px);margin-top:24px}.private-form{margin-top:26px}.private-form::before{width:55px;margin-bottom:24px}.form-heading>span{font-size:14px;letter-spacing:.22em}.form-heading p{font-size:16px;white-space:normal;margin:12px 0 22px}.email-control{height:58px;grid-template-columns:minmax(0,1fr) 100px}.email-control input{font-size:12px;padding:0 16px;letter-spacing:.12em}.email-control button{font-size:14px}.form-message{font-size:14px;margin-top:8px}.hero-product{position:relative;left:auto;top:auto;width:min(80vw,420px);margin:30px 0 0;flex:none}.philosophy-band{position:relative;top:auto;left:auto;width:calc(100% + 48px);padding:32px 20px;background:#493b3acc;gap:24px}.philosophy-band>div{padding:0 15px}.philosophy-band h2{font-size:14px}.philosophy-band h2::before{width:45px;margin-bottom:15px}.philosophy-band p{font-size:17px;margin-top:12px}.philosophy-band .band-motto{font-size:11px;margin-top:16px}.desktop-break{display:none}.philosophy-copy{grid-template-columns:1fr}.philosophy{padding:60px 24px}
}
@media(max-width:600px){.hero{padding-inline:16px}.copy-panel{padding:26px 12px}.lead br{display:none}.email-control{height:auto;grid-template-columns:1fr}.email-control input{height:54px}.email-control button{height:50px;border-left:0;border-top:1px solid #fffaf3}.philosophy-band{width:calc(100% + 32px);grid-template-columns:1fr}.philosophy-band>div+div{border-left:0;padding-top:24px;border-top:1px solid #fffaf355}.site-footer{flex-direction:column;text-align:center}.prose p{font-size:18px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
/* Optical sizing keeps the Didone hairlines legible at screen resolution. */
h1,.lead,.philosophy-band p{font-optical-sizing:none;font-variation-settings:'opsz' 24}
@media(min-width:1101px){.hero-product{left:55.55%;top:14.3%;width:21.8%}.eyebrow{margin-top:.7vw}.private-form{margin-top:1.5vw}}
@media(max-width:1100px){.hero{background-position:18% top}.copy-panel{background:none}}
@media(max-width:360px){h1{font-size:30px}}

/* Approved typography refinement: scenery and product geometry remain locked. */
.wordmark{letter-spacing:.42em;text-indent:.42em;font-weight:400;transform:translateY(-5px)}
h1{letter-spacing:.025em;font-weight:400;font-kerning:normal;font-feature-settings:'kern' 1,'liga' 1}
.eyebrow{letter-spacing:.42em;font-weight:400}
.lead{letter-spacing:.015em;font-weight:400;font-kerning:normal;line-height:1.35;font-variation-settings:'opsz' 24,'wght' 400}
.form-heading>span{letter-spacing:.34em;font-weight:400}
.email-control{width:97.5%;margin-inline:auto}
.email-control input,.email-control input::placeholder{letter-spacing:.25em;font-weight:400}
.email-control button{letter-spacing:.38em;font-weight:400}
.philosophy-band h2{font-family:var(--serif);font-weight:400;letter-spacing:.28em;font-optical-sizing:none;font-variation-settings:'opsz' 24,'wght' 400}
.philosophy-band h2::before{height:.5px}
.philosophy-band p{font-weight:400;line-height:1.28;letter-spacing:.005em;color:rgba(255,248,238,.88);font-variation-settings:'opsz' 24,'wght' 400}
.philosophy-band .band-motto{font-family:var(--sans);font-weight:400;letter-spacing:.32em}
@media(min-width:1101px){
  .wordmark{font-size:3.0225vw}
  h1{font-size:3.6vw;line-height:1.29375}
  .lead{line-height:1.35;margin-top:1.55vw}
  .private-form{margin-top:1.347vw}
  .philosophy-band h2{font-size:.95vw}
  .philosophy-band p{font-size:.98vw}
  .philosophy-band .band-motto{font-size:.75vw}
  .philosophy-band>div{min-height:5.32vw}
  .philosophy-band>div+div{border-left:0}
  .philosophy-band::after{content:'';position:absolute;left:50%;top:0;width:.5px;height:calc(100% + 8px);background:rgba(255,248,238,.6);pointer-events:none}
}
@media(max-width:1100px){.wordmark{font-size:33.48px}h1{font-size:clamp(25px,5.8vw,58px)}.eyebrow{letter-spacing:.3em}.philosophy-band h2{font-size:13px}.philosophy-band p{font-size:16px}.philosophy-band .band-motto{font-size:10px}}
/* Use the display optical cut for the delicate lower-band serif. */
.philosophy-band h2,.philosophy-band p:not(.band-motto){font-variation-settings:'opsz' 96,'wght' 400}

/* Final desktop typography approval: retain all existing layout dimensions. */
@media(min-width:1101px){
  .wordmark{letter-spacing:.57em;text-indent:.57em}
  .eyebrow{letter-spacing:.374em}
  .lead{font-size:1.4229vw;line-height:1.451613}
  .form-heading>span{letter-spacing:.318em}
  .philosophy-band>div:first-child p{font-size:.9212vw;line-height:1.361702;max-width:31vw;margin-inline:auto;font-weight:400}
}
@media(min-width:1101px){.wordmark{letter-spacing:.65em;text-indent:.65em}.lead{line-height:2.0655vw}}


/* Mobile pages grow with their content and scroll naturally. Desktop rules stay locked. */
@media (max-width: 600px) {
  html,
  body {
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }

  main,
  .hero,
  .philosophy {
    height: auto;
    min-height: 0;
  }

  main,
  .hero {
    overflow: visible;
  }
}

/* Portrait glass composition and scroll behavior are limited to phone/tablet widths. */
.mobile-glass-panel,
.mobile-product-stage {
  display: contents;
}

.mobile-scene,
.mobile-reflection {
  display: none;
}

@media (max-width: 768px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  html,
  body {
    width: 100%;
    max-width: 100%;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body {
    min-width: 0;
  }

  main,
  .hero,
  .philosophy {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
  }

  main,
  .hero {
    overflow: visible;
  }

  .hero {
    display: block;
    isolation: isolate;
    padding: 52px 0 0;
    aspect-ratio: auto;
    background: #493b30;
  }

  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    background-image: url('./assets/aren-liquid-glass-mobile.png');
    background-size: auto 100%;
    background-position: center top;
    background-repeat: no-repeat;
    opacity: 1;
    animation: none;
    transform: translate3d(0, var(--mobile-bg-offset, 0px), 0);
    will-change: transform;
    pointer-events: none;
  }

  .hero::after {
    display: none;
  }

  .mobile-glass-panel {
    display: block;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    width: calc(100vw - 24px);
    max-width: 520px;
    min-width: 0;
    margin: 0 auto;
    padding: 20px 16px 22px;
    border: 1px solid transparent;
    border-radius: 28px;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: blur(1px) saturate(110%);
    backdrop-filter: blur(1px) saturate(110%);
    transform: translate3d(0, var(--mobile-panel-drift, 0px), 0);
    opacity: var(--mobile-panel-opacity, 1);
    will-change: transform, opacity;
  }

  .mobile-glass-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 15px solid transparent;
    border-image: url('./assets/aren-mobile-plaque-frame.svg') 60 / 15px stretch;
    border-radius: 0;
    box-shadow: none;
    opacity: .75;
    mix-blend-mode: screen;
    clip-path: inset(0 round 28px);
    pointer-events: none;
  }

  .mobile-glass-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(108deg, transparent 32%, rgba(255, 250, 243, .13) 48%, transparent 61%);
    opacity: .12;
    transform: translate3d(var(--mobile-highlight-shift, 0px), 0, 0);
    pointer-events: none;
  }

  .site-header {
    position: relative;
    top: auto;
    left: auto;
    z-index: 1;
    width: 100%;
    padding: 0;
    margin: 0 0 24px;
  }

  .copy-panel {
    position: relative;
    top: auto;
    left: auto;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .copy-panel h1,
  .copy-panel p,
  .copy-panel form,
  .copy-panel input,
  .copy-panel button {
    max-width: 100%;
    min-width: 0;
  }

  .wordmark {
    font-size: clamp(26px, 7.3vw, 36px);
  }

  h1 {
    white-space: normal;
    overflow-wrap: normal;
    font-size: clamp(27px, 6.9vw, 52px);
    letter-spacing: 0;
  }

  .eyebrow {
    white-space: normal;
    font-size: clamp(10px, 2.3vw, 15px);
    letter-spacing: .2em;
  }

  .lead {
    font-size: clamp(19px, 4.7vw, 27px);
  }

  .form-heading p {
    font-size: clamp(13px, 3.8vw, 16px);
  }

  .email-control input {
    font-size: 16px;
  }

  .email-control input::placeholder {
    font-size: clamp(11px, 3.2vw, 13px);
    letter-spacing: .16em;
  }

  .email-control button {
    font-size: clamp(12px, 3.6vw, 14px);
  }

  .form-heading p {
    white-space: normal;
  }

  .email-control {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
  }

  .mobile-product-stage {
    display: grid;
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    place-items: center;
    margin: 12px auto 0;
    padding: 0 0 72px;
  }

  .hero-product {
    position: relative;
    top: auto;
    left: auto;
    width: min(72vw, 340px);
    max-width: calc(100vw - 24px);
    height: auto;
    margin: 0;
    background: transparent;
    object-fit: contain;
  }

  .philosophy-band {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  .philosophy-card {
    border: 1px solid rgba(255, 250, 243, .27);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(255, 250, 243, .12), rgba(255, 250, 243, .035));
    box-shadow: inset 0 1px rgba(255, 250, 243, .2), 0 18px 36px rgba(30, 23, 18, .14);
    -webkit-backdrop-filter: blur(10px) saturate(115%);
    backdrop-filter: blur(10px) saturate(115%);
    padding: clamp(20px, 5vw, 36px);
  }

  .hero.mobile-motion-ready .mobile-product-stage {
    opacity: .68;
    transform: translate3d(0, 20px, 0) scale(.985);
    transition: opacity 950ms cubic-bezier(.22, 1, .36, 1), transform 950ms cubic-bezier(.22, 1, .36, 1);
    will-change: transform, opacity;
  }

  .hero.mobile-motion-ready .mobile-product-stage.is-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  .philosophy.mobile-motion-ready .philosophy-card {
    opacity: .72;
    transform: translate3d(0, 14px, 0);
    transition: opacity 950ms cubic-bezier(.22, 1, .36, 1), transform 950ms cubic-bezier(.22, 1, .36, 1);
    will-change: transform, opacity;
  }

  .philosophy.mobile-motion-ready.is-revealed .philosophy-card {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 430px) {
  .mobile-glass-panel {
    padding: 17px 12px 20px;
  }

  .site-header {
    margin-bottom: 20px;
  }

  h1 {
    font-size: clamp(25px, 6.7vw, 31px);
  }

  .form-heading > span {
    font-size: clamp(11px, 3.1vw, 14px);
    letter-spacing: .18em;
  }

  .email-control input {
    padding-inline: 14px;
    font-size: 16px;
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .hero::before,
  .mobile-glass-panel,
  .mobile-glass-panel::after,
  .mobile-product-stage,
  .philosophy-card {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}

@media (max-width: 600px) {
  .lead br {
    display: initial;
  }
}

/* The approved long-scroll artwork is the sole source of mobile glass geometry. */
@media (max-width: 768px) {
  .hero {
    position: relative;
    min-height: calc(100vw * 2078 / 757);
    padding-top: clamp(50px, 15.4vw, 118px);
    background: #2f251f;
    overflow: hidden;
  }

  .hero::before,
  .hero::after {
    display: none;
  }

  .mobile-scene {
    display: block;
    position: absolute;
    inset: 0 auto auto 0;
    z-index: -2;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    pointer-events: none;
  }

  .mobile-reflection {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .mobile-reflection::before {
    content: '';
    position: absolute;
    top: 3%;
    left: -22%;
    width: 62%;
    height: 47%;
    background: linear-gradient(112deg, transparent 32%, rgba(255, 250, 243, .24) 49%, transparent 65%);
    opacity: var(--mobile-reflection-opacity, .055);
    transform: translate3d(var(--mobile-reflection-shift, 0), 0, 0);
    will-change: transform, opacity;
  }

  .mobile-glass-panel {
    width: 75.2vw;
    max-width: 578px;
    min-width: 0;
    margin: 0 auto;
    padding: clamp(14px, 4.1vw, 31px) clamp(7px, 2.3vw, 18px) clamp(12px, 3.6vw, 27px);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transform: none;
    opacity: 1;
    will-change: auto;
  }

  .mobile-glass-panel::before,
  .mobile-glass-panel::after {
    content: none;
    display: none;
  }

  .site-header {
    margin-bottom: clamp(9px, 2.8vw, 21px);
  }

  .wordmark {
    font-size: clamp(22px, 6.4vw, 36px);
  }

  h1 {
    font-size: clamp(22px, 6.3vw, 38px);
  }

  h1::before {
    width: clamp(42px, 13vw, 78px);
    margin-bottom: clamp(12px, 3.6vw, 24px);
  }

  .eyebrow {
    margin-top: clamp(8px, 2.4vw, 16px);
    font-size: clamp(8px, 2.25vw, 13px);
    letter-spacing: .18em;
  }

  .lead {
    margin-top: clamp(10px, 3vw, 20px);
    font-size: clamp(15px, 4.25vw, 25px);
    line-height: 1.28;
  }

  .private-form {
    margin-top: clamp(12px, 3.6vw, 24px);
  }

  .private-form::before {
    width: clamp(36px, 11vw, 66px);
    margin-bottom: clamp(10px, 3vw, 20px);
  }

  .form-heading > span {
    font-size: clamp(9px, 2.65vw, 14px);
    letter-spacing: .18em;
  }

  .form-heading p {
    margin: clamp(5px, 1.5vw, 10px) 0 clamp(8px, 2.5vw, 17px);
    font-size: clamp(11px, 3.15vw, 16px);
    line-height: 1.24;
  }

  .email-control {
    width: 100%;
  }

  .email-control input {
    height: clamp(42px, 12vw, 58px);
    font-size: 16px;
  }

  .email-control button {
    height: clamp(39px, 11.2vw, 54px);
  }

  .form-message {
    min-height: 1.15em;
    margin-top: 4px;
    font-size: clamp(10px, 2.8vw, 13px);
  }

  .mobile-product-stage {
    z-index: 1;
    width: 100%;
    margin-top: clamp(38px, 12vw, 72px);
    padding-bottom: clamp(42px, 12vw, 82px);
  }

  .hero-product {
    width: min(43vw, 330px);
    max-width: calc(100vw - 24px);
  }

  .philosophy-band {
    position: relative;
    z-index: 1;
    padding-top: clamp(26px, 7vw, 52px);
    padding-bottom: clamp(32px, 9vw, 66px);
    background: transparent;
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .mobile-reflection::before {
    transform: none !important;
    opacity: .055 !important;
  }
}

.sound-toggle {
  position: fixed;
  right: clamp(16px, 2vw, 34px);
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 250, 243, .58);
  border-radius: 50%;
  background: rgba(48, 37, 30, .63);
  color: var(--pearl);
  box-shadow: 0 5px 18px rgba(30, 23, 18, .18);
  -webkit-backdrop-filter: blur(7px) saturate(110%);
  backdrop-filter: blur(7px) saturate(110%);
  cursor: pointer;
}

.sound-toggle:hover,
.sound-toggle:focus-visible {
  background: rgba(48, 37, 30, .84);
}

.sound-toggle:focus-visible {
  outline-color: var(--pearl);
}

.sound-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sound-toggle[aria-pressed="false"] .sound-wave,
.sound-toggle[aria-pressed="true"] .sound-slash {
  display: none;
}

.sound-label {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  padding: 7px 10px;
  border: 1px solid rgba(255, 250, 243, .35);
  border-radius: 3px;
  background: rgba(48, 37, 30, .83);
  color: var(--pearl);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .13em;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity 180ms ease;
}

.sound-toggle:hover .sound-label,
.sound-toggle:focus-visible .sound-label,
.sound-toggle.show-label .sound-label {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .sound-label { transition: none; }
}