.melia {
    --melia-dark: #20141c;
    --melia-ink: #30202a;
    --melia-paper: #fff6f4;
    --melia-gold: #f6ca87;
    --melia-rose: #ffc4d0;
    background: var(--melia-paper);
    color: var(--melia-ink);
    font-size: 16px;
    line-height: 1.75;
}

.melia-shell {
    width: min(1200px, 89%);
    margin-inline: auto;
}

.melia-hero {
    background:
        radial-gradient(ellipse at 84% 32%, #542b42 0%, transparent 58%),
        var(--melia-dark);
    color: #fff8f5;
    padding: 26px 0 clamp(44px, 7vw, 104px);
}

.melia-trail {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 244, 238, .23);
    color: #eed5db;
    font-size: 12px;
    letter-spacing: .11em;
}

.melia-trail a { color: inherit; }
.melia-trail a { text-decoration: none; }
.melia-trail a:hover { text-decoration: underline; }

.melia-stage {
    display: grid;
    grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
    margin-top: clamp(36px, 5vw, 70px);
}

.melia-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--melia-gold);
    font-family: Montserrat, Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .21em;
}

.melia-kicker span { font-size: 17px; line-height: 1; }

.melia-heading h1 {
    margin: 5px 0 14px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(86px, 12vw, 172px);
    font-weight: 400;
    line-height: .96;
    letter-spacing: -.065em;
}

.melia-tagline {
    margin: 0;
    color: var(--melia-rose);
    font-size: clamp(22px, 3vw, 40px);
    font-weight: 700;
    letter-spacing: .035em;
    line-height: 1.4;
}

.melia-intro { margin: 24px 0 0; color: #f4dfe3; line-height: 1.9; }


.melia-visual { margin: 0; min-width: 0; }
.melia-art {
    padding: 10px;
    border: 1px solid rgba(246, 202, 135, .6);
    background: #321f2c;
}
.melia-art img { display: block; width: 100%; height: auto; background: #adadad; }
.melia-visual figcaption {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 11px;
    color: var(--melia-rose);
    font-family: Montserrat, Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2em;
}
.melia-visual figcaption span span { margin-left: 5px; color: var(--melia-gold); }

.melia-about { padding: clamp(58px, 9vw, 132px) 0; scroll-margin-top: 32px; }
.melia-about-grid {
    display: grid;
    grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr);
    align-items: center;
    gap: clamp(26px, 5vw, 72px);
}
.melia-about .melia-kicker { color: #8b3657; }
.melia-about h2 {
    margin: 14px 0 0;
    font-size: clamp(34px, 4.55vw, 64px);
    line-height: 1.28;
    letter-spacing: .02em;
}
.melia-profile > p { max-width: 34em; margin: 0 0 26px; line-height: 2; }
.melia-facts { margin: 0; border-top: 1px solid #dbbdc8; }
.melia-facts div {
    display: grid;
    grid-template-columns: minmax(84px, .38fr) 1fr;
    gap: 12px;
    align-items: baseline;
    padding: 11px 0;
    border-bottom: 1px solid #dbbdc8;
}
.melia-facts dt { color: #76324e; font-size: 13px; font-weight: 700; letter-spacing: .09em; }
.melia-facts dd { margin: 0; font-weight: 700; }

.melia-page-content { max-width: 900px; padding-bottom: 50px; }
.melia-page-content img { max-width: 100%; height: auto; }
.melia a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

@media (max-width: 760px) {
    .melia-stage, .melia-about-grid { grid-template-columns: 1fr; }
    .melia-heading h1 { font-size: clamp(76px, 18vw, 130px); }
    .melia-intro { margin-top: 14px; }
    .melia-art { padding: 7px; }
}