/* Explain: Applies a coordinated luxury couture polish to typography and interactive elements. */
/* ==========================================================================
   Radiance Rare — layering, contrast and couture polish
   Guarantees the correct stack (colour plate → gold artwork → content) and
   keeps every heading, paragraph, team name, price and form label crisp
   over the embroidery, while the flowers stay fully visible across the
   background — including behind the copy.
   ========================================================================== */

/* --- Layer order: colour at the bottom, artwork above it, content on top --- */
.section,
#contact {
    position: relative;
    isolation: isolate;
}

.art-layer {
    z-index: 0;
}

.section > *:not(.art-layer),
#contact > *:not(.art-layer) {
    position: relative;
    z-index: 2;
}

/* --- A soft veil sits on the artwork only where the reading surface is,
       so the ornamental edges stay fully visible while text stays crisp --- */
.section-head {
    position: relative;
    padding: 1.5rem 1.75rem;
    border-radius: var(--radius);
    background: radial-gradient(ellipse 100% 100% at 50% 50%, rgba(12, 12, 11, .8), rgba(12, 12, 11, .34) 62%, rgba(12, 12, 11, 0) 86%);
}

#about .section-head,
#team .section-head {
    background: radial-gradient(ellipse 100% 100% at 50% 50%, rgba(246, 240, 230, .92), rgba(246, 240, 230, .44) 62%, rgba(246, 240, 230, 0) 86%);
}

/* --- Editorial headings: balanced lines, refined letterspacing --- */
:is(#founder, #about, #collections, #gallery, #team, #bespoke, #pricing, #measure, #contact) h1,
:is(#founder, #about, #collections, #gallery, #team, #bespoke, #pricing, #measure, #contact) h2 {
    text-wrap: balance;
    letter-spacing: 0.006em;
}

/* --- Eyebrow labels gain a short gold hairline for editorial rhythm --- */
.eyebrow {
    display: inline-block;
}

.eyebrow::after {
    content: "";
    display: block;
    width: 2.25rem;
    height: 1px;
    margin-top: 0.65rem;
    background: linear-gradient(to right, var(--accent-color), transparent);
}

.section-head .eyebrow::after,
.text-center .eyebrow::after {
    margin-inline: auto;
}

/* --- Body copy stays legible over the embroidery --- */
.section p,
#contact p {
    text-wrap: pretty;
}

/* --- Dark sections: warm ivory ink lifted off the gold with a soft halo --- */
:is(#founder, #collections, #gallery, #bespoke, #pricing, #measure, #contact) h1,
:is(#founder, #collections, #gallery, #bespoke, #pricing, #measure, #contact) h2,
:is(#founder, #collections, #gallery, #bespoke, #pricing, #measure, #contact) h3,
:is(#founder, #collections, #gallery, #bespoke, #pricing, #measure, #contact) h4 {
    color: var(--text-color);
    text-shadow: 0 1px 6px rgba(6, 6, 5, 1), 0 0 30px rgba(6, 6, 5, .9);
}

:is(#founder, #collections, #gallery, #bespoke, #pricing, #measure, #contact) p,
:is(#founder, #collections, #gallery, #bespoke, #pricing, #measure, #contact) li,
:is(#founder, #collections, #gallery, #bespoke, #pricing, #measure, #contact) .eyebrow,
:is(#founder, #collections, #gallery, #bespoke, #pricing, #measure, #contact) .step-num,
:is(#founder, #collections, #gallery, #bespoke, #pricing, #measure, #contact) .form-label {
    text-shadow: 0 1px 5px rgba(6, 6, 5, .98), 0 0 20px rgba(6, 6, 5, .8);
}

/* --- Ivory sections: deep charcoal ink held crisp over the pale gold --- */
:is(#about, #team) h1,
:is(#about, #team) h2,
:is(#about, #team) h3,
:is(#about, #team) h4 {
    color: #111110;
    text-shadow: 0 1px 2px rgba(255, 253, 246, 1), 0 0 22px rgba(255, 253, 246, .85);
}

:is(#about, #team) p,
:is(#about, #team) li,
:is(#about, #team) .eyebrow {
    text-shadow: 0 1px 2px rgba(255, 253, 246, .96), 0 0 16px rgba(255, 253, 246, .7);
}

/* --- The Atelier: each team card keeps a quiet ivory plate behind the
       name, title and biography (anchored to the lower text zone) so all
       three members read completely while the floral cards stay visible --- */
#team .reveal {
    padding: 1.1rem;
    border-radius: var(--radius);
    background: radial-gradient(ellipse 100% 62% at 50% 82%, rgba(246, 240, 230, .9), rgba(246, 240, 230, .46) 60%, rgba(246, 240, 230, 0) 86%);
}

/* --- Philosophy: the copy column sits on a gentle ivory veil --- */
#about .reveal.flex {
    padding: 1.1rem;
    border-radius: var(--radius);
    background: radial-gradient(ellipse 100% 94% at 50% 50%, rgba(246, 240, 230, .82), rgba(246, 240, 230, .4) 60%, rgba(246, 240, 230, 0) 84%);
}

/* --- Bespoke: process steps sit on a subtle dark veil --- */
#bespoke .reveal {
    padding: 1.1rem;
    border-radius: var(--radius);
    background: radial-gradient(ellipse 100% 96% at 50% 50%, rgba(12, 12, 11, .72), rgba(12, 12, 11, .34) 60%, rgba(12, 12, 11, 0) 84%);
}

/* --- The Founder: the editorial copy column sits on a charcoal veil,
       keeping the founder's photograph prominent --- */
#founder .max-w-xl {
    padding: 1.35rem;
    border-radius: var(--radius);
    background: radial-gradient(ellipse 100% 96% at 42% 50%, rgba(12, 12, 11, .74), rgba(12, 12, 11, .36) 60%, rgba(12, 12, 11, 0) 84%);
}

/* --- Enquiries: contact details and the form panel sit on a soft veil --- */
#contact .reveal {
    padding: 1.1rem;
    border-radius: var(--radius);
    background: radial-gradient(ellipse 100% 96% at 50% 50%, rgba(12, 12, 11, .66), rgba(12, 12, 11, .3) 62%, rgba(12, 12, 11, 0) 84%);
}

/* --- Buttons: quiet inner highlight, richer hover lift --- */
.btn-couture {
    box-shadow: inset 0 1px 0 rgba(240, 233, 222, .14);
}

.btn-couture--outline,
.btn-couture--ghost-light {
    box-shadow: none;
}

.btn-couture--outline:hover,
.btn-couture--ghost-light:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, .3);
}

.btn-couture:active {
    transform: translateY(1px);
}

/* --- Cards: coordinated hairline borders and deep hover tone --- */
.collection-card,
.look-item,
.measure-card {
    box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
}

.collection-card:hover,
.look-item:hover,
.measure-card:hover {
    box-shadow: 0 26px 54px rgba(0, 0, 0, .4);
}

/* --- Form fields + labels: readable over the embroidery --- */
.form-field:focus-visible {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(180, 154, 106, .16);
}

#contact .form-field {
    background: rgba(14, 14, 13, .74);
}

#contact .form-field:focus {
    background: rgba(14, 14, 13, .9);
}

.form-status.is-success {
    color: var(--accent-color);
}

@media (prefers-reduced-motion: reduce) {
    .btn-couture:active {
        transform: none;
    }
}