/* Official KLOÊ identity: original vector outlines, transparent background.
   Header uses black; footer uses menu brown. All logo assets are transparent. */
h1,h2,h3,h1 em,h2 em,h3 em{font-weight:700}
h1{font-size:clamp(62px,7vw,112px);line-height:1.05;letter-spacing:-.065em}
.button,.text-button{font-weight:600}
.eyebrow{font-weight:600}
.topline{background:var(--paper);color:var(--ink)}
.header{background:#dbb797;color:var(--ink);border-bottom:1px solid #c9a486}
.desktop-nav{font-size:18px;font-weight:600;line-height:1.4}
.desktop-nav a{white-space:nowrap}
.desktop-nav a:after{background:currentColor}
.brand{display:block;width:156px;flex:0 0 auto;line-height:0;background:transparent}
.brand img{display:block;width:100%;height:auto;object-fit:contain;background:transparent}
.footer-brand{display:block;width:220px;line-height:0;background:transparent}
.footer-brand img{display:block;width:100%;height:auto;object-fit:contain;background:transparent}
.footer-bottom .footer-domain{letter-spacing:.04em}
/* Nude, sand and cream sampled from the user's fourth attachment. */
.moment{background:#e7cfba;color:var(--ink)}
.mood.active{color:var(--paper)}
.mood:hover{border-color:var(--ink)}
.footer{background:#dbb797;color:var(--ink)}
.footer-location{display:flex;justify-content:space-between;align-items:center;gap:32px;padding:30px 0;border-bottom:1px solid #ba987b}
.footer-location .eyebrow{margin-bottom:10px}
.footer-address{font-style:normal;font-size:15px;line-height:1.7}
.footer-location .text-button{flex-shrink:0;font-size:13px}
.essence-letter{grid-template-columns:1fr 1.45fr;gap:8%;align-items:start}
.letter-heading .eyebrow{margin-bottom:25px}
.essence-letter .essence-copy{display:block;max-width:700px;margin-top:0}
.essence-letter .essence-copy p{font-size:15px;line-height:1.85}
.essence-letter .essence-copy p+p{margin-top:18px}
.essence-letter .essence-copy .letter-welcome{color:var(--ink);font-weight:600}
.essence-letter .essence-copy .letter-signature{font-family:var(--serif);font-style:italic;font-size:30px;color:var(--ink);margin-top:28px}
@media(max-width:1050px) and (min-width:721px){
  .brand{width:137px}
  .desktop-nav{font-size:16px}
  h1{font-size:7.5vw}
}
@media(max-width:720px){
  .brand{width:132px}
  .mobile-nav a{font-size:20px;font-weight:600;line-height:1.4}
  h1{font-size:clamp(56px,12.6vw,92px)}
  .footer-brand{width:202px}
  .footer-location{align-items:flex-start;flex-direction:column;gap:18px;padding:25px 0}
  .footer-address{font-size:14px}
  .essence-letter{gap:30px}
  .essence-letter .essence-copy p{font-size:14px;line-height:1.85}
}
@media(max-width:360px){h1{font-size:53px}}