:root {
    --font-xs: 15px;
    --font-sm: 16px;
    --font-md: 18px;
    --font-lg: 19px;
    --font-xl: 20px;
    --font-fullhd: 21px;
    --accent: #9b7252;
    --accent-tx: rgba(155, 114, 82, .24);
}

.skinroot.light {
    --window-background: #eee8de;
    --window-background-0: #f6f1e8;
    --window-background-1: #e8dfd2;
    --window-background-2: #d8c8b5;
    --window-background-3: #cbb79e;
    --text: #17110f;
    --text-lo: #675c51;
    --border-color: #aa9a87;
    --accent: #7a3e36;
    --accent-light: #ead8cf;
    --text-over-accent: #fffaf0;
    --text-over-accent-hover: #fff
}

.skinroot.dark {
    --window-background: #100d0c;
    --window-background-0: #100d0c;
    --window-background-1: #171210;
    --window-background-2: #211917;
    --window-background-3: #30231f;
    --text: #eee5d7;
    --text-lo: #b9aa98;
    --border-color: #5c4b43;
    --accent: #b58b67;
    --accent-tx: rgba(181, 139, 103, .22);
    --text-over-accent: #120e0c;
    --text-over-accent-hover: #000
}

body {
    font-family: "Manrope", sans-serif;
    font-weight: 400;
    letter-spacing: -.015em
}

h1, h2, h3, h4, .title {
    font-family: "Cormorant Garamond", serif;
    font-weight: 500;
    letter-spacing: -.035em
}

.feature-list .feature {
    background: none !important
}

.feature-list .body p {
    color: inherit
}

.lux-shell {
    max-width: 1260px;
    padding-inline: clamp(1.25rem, 5vw, 5rem)
}

.lux-section {
    padding-block: clamp(5rem, 11vw, 10rem)
}

.kicker {
    font-family: "Manrope", sans-serif;
    font-size: .68rem !important;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase
}

.obscura-hero {
    min-height: 95vh;
    display: grid;
    align-items: end;
    color: #f4eadb;
    position: relative
}

.obscura-hero:after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(231, 214, 181, .22);
    margin: 1.2rem;
    pointer-events: none
}

.hero-content {
    width: min(1260px, calc(100% - 3rem));
    margin: auto;
    padding: 10rem 0 7rem;
    position: relative;
    z-index: 1
}

.feature-list h1.hero-title {
    font-size: clamp(4.4rem, 13vw, 11.5rem);
    line-height: .66;
    margin: .55rem 0 2.5rem;
    letter-spacing: -.065em
}

.hero-title em {
    color: #c19a78;
    font-weight: 400
}

.hero-copy {
    max-width: 520px;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.45rem, 3vw, 2.15rem) !important;
    line-height: 1.12;
    margin-bottom: 2.5rem !important
}

.lux-button, .directions, .locate-button {
    display: inline-flex;
    width: max-content;
    padding: .9rem 1.2rem;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    text-transform: uppercase;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .15em;
    transition: .25s
}

.lux-button:hover, .directions:hover, .locate-button:hover {
    background: var(--accent);
    color: var(--text-over-accent);
    border-color: var(--accent)
}

.bone-section {
    background: #eee8de;
    color: #17110f
}

.ink-section {
    background: #100d0c;
    color: #eee5d7
}

.oxblood-section {
    background: #591e23;
    color: #f3e7d7
}

.gold-section {
    background: #9a7354;
    color: #17110f
}

.lux-heading {
    font-size: clamp(3.6rem, 9vw, 8rem) !important;
    line-height: .78;
    margin: .8rem 0 2.5rem
}

.lux-lead {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.35rem, 2.3vw, 2rem) !important;
    line-height: 1.28;
    align-self: end
}

.editorial-image {
    margin-top: 5rem;
    padding: 0
}

.editorial-image .img {
    min-height: min(65vw, 760px);
    background-size: cover;
    background-position: center
}

.signature-card {
    margin: .75rem;
    padding: 2.2rem !important;
    border: 1px solid #6b5b51;
    background: #171210
}

.signature-card h2 {
    font-size: 2rem !important
}

.signature-card p {
    color: #b9aa98 !important
}

.signature-icon {
    font-size: 1.4rem;
    color: #b58b67
}

.product-editorial {
    padding: 0
}

.product-editorial .img {
    min-height: 650px;
    background-size: cover;
    background-position: center
}

.product-story {
    padding: clamp(3rem, 7vw, 7rem);
    align-self: center
}

.product-story h2 {
    font-size: clamp(4rem, 8vw, 7rem);
    line-height: .72;
    margin: 1rem 0 2rem
}

.product-story p {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.5rem !important
}

.product-story .notes {
    font-family: "Manrope", sans-serif;
    font-size: .68rem !important;
    letter-spacing: .14em;
    border-block: 1px solid rgba(255, 255, 255, .3);
    padding: 1.2rem 0;
    margin: 2rem 0
}

.lux-button.light {
    color: #f3e7d7
}

.obscura-catalogue h1.gen {
    padding: 3rem clamp(1rem, 5vw, 5rem);
    font-size: clamp(3.5rem, 9vw, 8rem);
    font-weight: 500;
    background: #17110f;
    color: #eee5d7
}

.obscura-catalogue .market {
    background: var(--window-background)
}

.obscura-catalogue .subbar {
    border-bottom: 1px solid var(--border-color);
    letter-spacing: .12em;
    text-transform: uppercase
}

.obscura-product-card {
    border: 1px solid var(--border-color);
    background: var(--window-background-1);
    transition: transform .25s, box-shadow .25s
}

.obscura-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .18)
}

.obscura-list-image {
    border-radius: 0 !important;
    border: 0 !important;
    aspect-ratio: 4/3;
}

.obscura-product-title {
    min-height: 5.5rem;
}

.obscura-product-title .title {
    font-size: 1.4rem;
    text-transform: none
}

.obscura-detail {
    max-width: 1300px;
    margin: auto
}

.obscura-detail-image {
    min-height: 520px;
    background-size: cover !important;
    border-radius: 0 !important
}

.obscura-faq {
    padding: 2rem;
    background: var(--window-background)
}

.obscura-faq h1 {
    font-size: clamp(4rem, 10vw, 8rem);
    font-weight: 500
}

.obscura-faq .feature {
    border: 1px solid var(--border-color);
    border-radius: 0;
    margin: 1rem 0;
    padding: 1rem
}

.obscura-faq .titquestion {
    background: transparent
}

.obscura-faq .index {
    color: var(--accent) !important
}

.salon-concierge {
    overflow-y: auto;
    -webkit-overflow-scrolling: auto;
    min-height: 100vh;
    padding: clamp(6rem, 10vw, 10rem) clamp(1rem, 6vw, 6rem);
    background: #100d0c;
    color: #eee5d7
}

.concierge-header {
    max-width: 950px
}

.concierge-header h1 {
    font-size: clamp(4.5rem, 11vw, 10rem);
    line-height: .75;
    margin: 1rem 0 2rem
}

.concierge-intro {
    max-width: 680px;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    line-height: 1.25
}

.locate-button {
    margin-top: 1rem
}

.salon-tabs {
    display: flex;
    gap: .5rem;
    overflow: auto;
    margin: 4rem 0 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #5c4b43
}

.salon-tabs button {
    border: 0;
    background: transparent;
    color: #8f8174;
    padding: .8rem 1rem;
    text-transform: uppercase;
    letter-spacing: .12em
}

.salon-tabs button.selected {
    color: #eee5d7;
    border-bottom: 1px solid #b58b67
}

.salon-focus {
    display: grid;
    grid-template-columns:minmax(180px, 1fr) 2fr;
    border-top: 1px solid #5c4b43;
    padding-top: 3rem
}

.salon-number {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(7rem, 18vw, 16rem);
    line-height: .75;
    color: #2d2320
}

.salon-copy {
    max-width: 700px
}

.salon-copy h2 {
    font-size: clamp(3rem, 7vw, 6rem);
    line-height: .85;
    margin: .5rem 0
}

.address {
    color: #b58b67;
    font-size: .8rem !important;
    text-transform: uppercase;
    letter-spacing: .12em
}

.services {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    padding: 1.5rem 0
}

.services li {
    padding: .5rem .8rem;
    border: 1px solid #5c4b43;
    font-size: .75rem
}

.weather {
    font-family: "Cormorant Garamond", serif;
    font-size: 2rem !important;
    color: #b58b67
}

.weather.consent {
    font-size: 1rem !important
}

.directions {
    margin-top: 1rem
}

.fiction-note {
    margin-top: 5rem;
    color: #8f8174;
    font-size: .7rem !important
}

.concierge-page .footer {
    margin-top: 0
}

@media (max-width: 767px) {
    .hero-content {
        width: calc(100% - 2rem);
        padding-bottom: 5rem
    }

    .feature-list h1.hero-title {
        font-size: 4.4rem
    }

    .lux-heading {
        font-size: 3.6rem !important
    }

    .product-editorial .img {
        min-height: 420px
    }

    .product-story {
        padding: 3rem 1rem
    }

    .salon-focus {
        grid-template-columns:1fr
    }

    .salon-number {
        font-size: 8rem
    }

    .salon-copy h2 {
        font-size: 3.4rem
    }

    .obscura-faq {
        padding: 1rem
    }
}