.makeup {
    padding: 108px var(--gutter) 120px;
    background: #e8dad2;
    scroll-margin-top: 0;
}

.makeup:focus { outline: none; }
.makeup-inner { max-width: 1640px; margin-inline: auto; }
.makeup-header { margin-bottom: 32px; }
.makeup-header h1 { margin: 18px 0 0; font-family: var(--serif); font-size: clamp(68px, 6.5vw, 100px); line-height: 1; font-weight: 400; letter-spacing: -.045em; }
.makeup-tabs { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 28px; border-bottom: 1px solid var(--line); }
.makeup-tab { display: flex; align-items: center; gap: 16px; min-height: 78px; padding: 18px 3px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); font-size: 16px; line-height: 1.5; transition: color .2s, border-color .2s; }
.makeup-tab-number { flex-shrink: 0; font-size: 13px; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.makeup-tab-short { display: none; }
.makeup-tab:hover { color: var(--burgundy); }
.makeup-tab[aria-selected='true'] { color: var(--burgundy); border-bottom-color: var(--burgundy); font-weight: 600; }
.makeup-tab:focus-visible { outline-offset: 4px; border-radius: 2px; }

.makeup-panel { display: grid; grid-template-columns: 1fr 1.18fr; grid-template-areas: 'heading gallery' 'copy gallery' 'more more'; grid-template-rows: auto 1fr auto; column-gap: clamp(55px, 6.4vw, 108px); align-items: start; padding-top: 56px; }
.makeup-panel + .makeup-panel { margin-top: 72px; border-top: 1px solid var(--line); }
.makeup-tabs-ready .makeup-panel + .makeup-panel { margin-top: 0; border-top: 0; }
.makeup-panel-heading { grid-area: heading; min-width: 0; }
.makeup-panel-heading h2 { margin: 0 0 27px; font-family: var(--serif); font-size: clamp(52px, 5vw, 76px); font-weight: 400; line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
.makeup-copy { grid-area: copy; min-width: 0; max-width: 540px; font-size: 16px; line-height: 1.85; color: var(--muted); }
.makeup-copy p + p { margin-top: 21px; }
.makeup-copy strong, .makeup-gallery-caption strong { font-weight: 700; }
.makeup-lead { color: var(--burgundy); }
.makeup-gallery { grid-area: gallery; width: 100%; min-width: 0; max-width: 720px; justify-self: end; }
.makeup-gallery-label { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; color: var(--muted); font-size: 14px; letter-spacing: .04em; }
.makeup-gallery-label span { flex: 1; height: 1px; background: var(--line); }
.makeup-collage { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.makeup-photo { grid-column: span 2; aspect-ratio: 3 / 4; min-width: 0; min-height: 0; overflow: hidden; border-radius: 7px; background: #dbc8be; }
.makeup-photo-main { grid-column: span 4; grid-row: span 2; aspect-ratio: auto; }
.makeup-collage-compact { grid-template-columns: 3fr 1fr; }
.makeup-collage-compact .makeup-photo { grid-column: 2; }
.makeup-collage-compact .makeup-photo-main { grid-column: 1; grid-row: 1 / 4; }
.makeup-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.makeup-gallery-caption { margin-top: 20px; color: var(--muted); font-family: var(--serif); font-size: 22px; font-style: italic; line-height: 1.35; }
.makeup-gallery-more { grid-area: more; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: 34px; }
.makeup-gallery-more .makeup-photo { grid-column: auto; }

@media (min-width: 1800px) {
    .makeup { padding-top: 135px; padding-bottom: 145px; }
}

@media (min-width: 701px) and (max-width: 1100px) {
    .makeup { padding-top: 90px; padding-bottom: 95px; }
    .makeup-panel { column-gap: 38px; grid-template-columns: 1fr 1fr; }
    .makeup-tabs { gap: 20px; }
    .makeup-tab { gap: 10px; }
    .makeup-collage { gap: 10px; }
    .makeup-gallery-more { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 701px) and (max-width: 900px) {
    .makeup-panel { grid-template-columns: 1fr 1.25fr; grid-template-areas: 'heading gallery' 'copy copy' 'more more'; gap: 28px 35px; }
    .makeup-panel-heading { align-self: center; }
    .makeup-copy { max-width: none; columns: 2; column-gap: 35px; }
    .makeup-copy p { break-inside: avoid; }
    .makeup-gallery-more { margin-top: 0; }
}

@media (max-width: 700px) {
    .makeup { padding-top: 66px; padding-bottom: 74px; }
    .makeup-header { margin-bottom: 24px; }
    .makeup-header h1 { margin-top: 16px; font-size: clamp(58px, 14vw, 80px); }
    .makeup-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .makeup-tab { justify-content: center; min-height: 62px; padding: 16px 2px; }
    .makeup-tab-number, .makeup-tab-full { display: none; }
    .makeup-tab-short { display: inline; }
    .makeup-panel { grid-template-columns: 1fr; grid-template-areas: 'heading' 'gallery' 'copy' 'more'; grid-template-rows: auto; gap: 0; padding-top: 32px; }
    .makeup-panel-heading h2 { margin-bottom: 26px; font-size: clamp(44px, 10.5vw, 62px); }
    .makeup-gallery { max-width: 540px; justify-self: center; margin-bottom: 29px; }
    .makeup-gallery-label { margin-bottom: 13px; }
    .makeup-collage { gap: 10px; }
    .makeup-photo { grid-column: span 3; border-radius: 5px; }
    .makeup-photo-main { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 3 / 4; }
    .makeup-collage-compact { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .makeup-collage-compact .makeup-photo { grid-column: span 2; }
    .makeup-collage-compact .makeup-photo-main { grid-column: 1 / -1; grid-row: auto; }
    .makeup-gallery-caption { margin-top: 15px; font-size: 22px; }
    .makeup-copy { max-width: none; }
    .makeup-gallery-more { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
}

@media (prefers-reduced-motion: no-preference) {
    .makeup-tabs-ready .makeup-panel:not([hidden]) { animation: makeup-panel-reveal .25s ease-out; }
    @keyframes makeup-panel-reveal { from { opacity: 0; } to { opacity: 1; } }
}