/* =========================================================================
   L'ATELIER DE MIA — Editorial Luxury Design System
   ========================================================================= */

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body {
    font-family: var(--font-sans);
    color: var(--ink);
    background: var(--ivory);
    line-height: 1.6;
    font-weight: 300;
    overflow-x: hidden;
    max-width: 100vw;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }

/* ---------- Tokens ---------- */
:root {
    /* Palette — soft luxury */
    --ivory:       #F7F3EC;
    --cream:       #EFE8DC;
    --beige:       #E4D9C4;
    --sand:        #D8CCB8;
    --warm-gray:   #8B8175;
    --ink:         #1C1917;
    --ink-soft:    #2C2926;
    --gold:        #B8936A;
    --gold-deep:   #9A7A54;
    --whisper:     rgba(28, 25, 23, 0.08);

    /* Typography */
    --font-serif:  'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    --font-sans:   'Inter', -apple-system, 'Helvetica Neue', sans-serif;
    --font-script: 'Italiana', 'Cormorant Garamond', serif;

    /* Scale */
    --fs-xs:  0.72rem;
    --fs-sm:  0.82rem;
    --fs-base:1rem;
    --fs-md:  1.15rem;
    --fs-lg:  1.5rem;
    --fs-xl:  2.2rem;
    --fs-2xl: 3.2rem;
    --fs-3xl: 4.8rem;
    --fs-4xl: 6.8rem;

    /* Spacing */
    --s-1: 0.5rem;
    --s-2: 1rem;
    --s-3: 1.5rem;
    --s-4: 2rem;
    --s-5: 3rem;
    --s-6: 4.5rem;
    --s-7: 6rem;
    --s-8: 9rem;
    --s-9: 12rem;

    /* Motion — single easing token, matches css/tokens.css --ease.
       Kept redeclared here so console pages (which load only style.css)
       still resolve var(--ease). Public pages that also load tokens.css
       receive the same value either way. */
    --ease:   cubic-bezier(0.65, 0, 0.35, 1);
    --slow:   1.2s;
    --medium: 0.7s;
    --fast:   0.35s;
}

/* ---------- Typography ---------- */
.eyebrow {
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: 400;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--warm-gray);
    display: inline-block;
}

h1, h2, h3, h4 {
    font-family: var(--font-serif);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--ink);
}

h1 { font-size: clamp(2.4rem, 5.4vw, 5.2rem); line-height: 1.05; }
h2 { font-size: clamp(1.8rem, 3.6vw, 3.6rem); line-height: 1.1; }
h3 { font-size: clamp(1.4rem, 2.2vw, 2.4rem); line-height: 1.15; }
h4 { font-size: var(--fs-lg); line-height: 1.25; }

.serif-italic { font-family: var(--font-serif); font-style: italic; font-weight: 300; }
.script { font-family: var(--font-script); letter-spacing: 0.02em; }

p { font-weight: 300; color: var(--ink-soft); }
p.lead { font-size: var(--fs-md); line-height: 1.8; color: var(--ink-soft); }

/* ---------- Layout ---------- */
.container { max-width: 1440px; margin: 0 auto; padding: 0 var(--s-5); }
.container-narrow { max-width: 820px; margin: 0 auto; padding: 0 var(--s-5); }
.section { padding: clamp(4.5rem, 7vw, 7rem) 0; }
.section-sm { padding: clamp(3.5rem, 5.2vw, 5rem) 0; }

.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Navigation ---------- */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: clamp(1.4rem, 2vw, 2rem) clamp(2rem, 4vw, 4rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(2rem, 4vw, 4rem);
    background: transparent;
    transition: background var(--medium) var(--ease), padding var(--medium) var(--ease);
    mix-blend-mode: difference;
    color: #fff;
}
.nav.scrolled {
    background: rgba(247, 243, 236, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: clamp(1rem, 1.5vw, 1.4rem) clamp(2rem, 4vw, 4rem);
    mix-blend-mode: normal;
    color: var(--ink);
    border-bottom: 1px solid var(--whisper);
}
.nav__logo {
    font-family: var(--font-script);
    font-size: clamp(1.85rem, 2vw, 2.15rem);
    line-height: 1;
    letter-spacing: 0.01em;
    font-weight: 400;
    flex-shrink: 0;
    font-style: italic;
    /* signature feel */
    text-transform: lowercase;
    transform: translateY(-1px);
}
.nav__menu {
    display: flex;
    gap: clamp(2.4rem, 4.2vw, 4.6rem);
    list-style: none;
    font-size: 0.7rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    margin: 0 auto;
}
.nav__menu a {
    position: relative;
    padding: var(--s-1) 0;
    white-space: nowrap;
    transition: opacity var(--fast) var(--ease);
}
.nav__menu a::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 0; height: 1px;
    background: currentColor;
    transition: width var(--medium) var(--ease);
}
.nav__menu a:hover::after { width: 100%; }
.nav__menu a.active { color: var(--gold-deep); }
.nav__menu a.active::after { width: 100%; background: var(--gold); }
.nav__cta {
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: var(--s-1) 0;
    border: none;
    background: transparent;
    white-space: nowrap;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    transition: opacity var(--fast) var(--ease), gap var(--medium) var(--ease);
}
.nav__cta::after {
    content: '\2192'; /* → */
    display: inline-block;
    font-size: 0.85rem;
    line-height: 1;
    transition: transform var(--medium) var(--ease);
}
.nav__cta:hover {
    background: transparent;
    color: inherit;
    opacity: 0.85;
}
.nav__cta:hover::after { transform: translateX(4px); }

/* Nav right cluster (account + CTA) */
.nav__right {
    display: flex;
    align-items: center;
    gap: clamp(1.4rem, 2.5vw, 2.4rem);
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
}
.nav__account {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: var(--s-1) 0;
    position: relative;
    white-space: nowrap;
    transition: opacity var(--fast) var(--ease);
}
.nav__account svg {
    display: block;
    flex-shrink: 0;
}
.nav__account::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 0; height: 1px;
    background: currentColor;
    transition: width var(--medium) var(--ease);
}
.nav__account:hover::after { width: 100%; }

/* Mobile-only menu item (hidden on desktop, visible in mobile overlay) */
.nav__menu-mobile-only { display: none; }

.nav__burger { display: none; flex-direction: column; gap: 4px; }
.nav__burger span { width: 26px; height: 1px; background: currentColor; transition: all var(--fast) var(--ease); }

/* ---------- Hero ---------- */
.hero {
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 560px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    color: #fff;
    background: #1a1714;
}
@media (max-width: 1023px) {
    .hero__tagline, .hero__scroll { display: none; }
}
.hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero__media::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 100%);
}
.hero__image {
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: center bottom;
    animation: slow-zoom 18s ease-in-out infinite alternate;
}
@keyframes slow-zoom {
    from { transform: scale(1); }
    to   { transform: scale(1.08); }
}
.hero__content {
    position: relative;
    z-index: 2;
    padding: 0 var(--s-5) var(--s-7);
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: var(--s-5);
}
.hero__title {
    font-size: clamp(2.6rem, 6.4vw, 5.4rem);
    font-weight: 300;
    line-height: 1.02;
    max-width: 18ch;
    color: var(--ivory);
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.28);
}
.hero__title em { font-style: italic; font-family: var(--font-serif); }
.hero__meta {
    max-width: 340px;
    text-align: right;
    font-size: var(--fs-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.85;
}
.hero__tagline {
    position: absolute;
    top: 50%; left: var(--s-5);
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: left top;
    font-size: var(--fs-xs);
    letter-spacing: 0.4em;
    text-transform: uppercase;
    white-space: nowrap;
}
.hero__scroll {
    position: absolute;
    right: var(--s-5); top: 50%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    font-size: var(--fs-xs);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: var(--s-3);
}
.hero__scroll::after {
    content: '';
    width: 1px; height: 60px;
    background: #fff;
    animation: scroll-line 2.4s ease-in-out infinite;
}
@keyframes scroll-line {
    0%, 100% { transform: scaleY(1); opacity: 0.4; transform-origin: top; }
    50%      { transform: scaleY(0.4); opacity: 1; }
}

/* ---------- Split Paths (Customized / RTW) ---------- */
.paths { padding: 0; }
.paths__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 70vh;
}
.path {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: var(--s-7) var(--s-5);
    color: #fff;
    transition: flex var(--slow) var(--ease);
}
.path__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform var(--slow) var(--ease);
    z-index: 0;
}
.path::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.38) 45%, rgba(0,0,0,0.72) 100%);
    z-index: 1;
    transition: background var(--medium) var(--ease);
}
.path:hover .path__bg { transform: scale(1.06); }
.path:hover::after { background: linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.3) 45%, rgba(0,0,0,0.82) 100%); }
.path__content { position: relative; z-index: 2; max-width: 440px; }
.path__eyebrow {
    font-size: var(--fs-xs);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    opacity: 0.8;
    margin-bottom: var(--s-2);
}
.path__title {
    font-family: var(--font-serif);
    font-size: clamp(2.2rem, 4vw, 3.8rem);
    font-weight: 300;
    line-height: 1.05;
    margin-bottom: var(--s-3);
    color: var(--ivory);
}
.path__desc { font-size: var(--fs-sm); line-height: 1.7; margin-bottom: var(--s-4); opacity: 0.88; color: var(--ivory); }
.path__cta {
    font-size: var(--fs-xs);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    padding-bottom: var(--s-1);
    border-bottom: 1px solid #fff;
    display: inline-block;
    transition: letter-spacing var(--medium) var(--ease);
}
.path__cta:hover { letter-spacing: 0.32em; }

/* ---------- Story Section ---------- */
.story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-6);
    align-items: center;
}
.story__image {
    aspect-ratio: 4/5;
    overflow: hidden;
    background: var(--beige);
}
.story__image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 2s var(--ease);
}
.story:hover .story__image img { transform: scale(1.03); }
.story__text { padding: 0 var(--s-4); }
.story__text h2 { margin: var(--s-3) 0 var(--s-4); }
.story__text p + p { margin-top: var(--s-3); }
.story__signature {
    font-family: var(--font-script);
    font-size: 1.8rem;
    margin-top: var(--s-4);
    color: var(--gold-deep);
}

/* ---------- Featured Dresses ---------- */
.featured__header {
    text-align: center;
    margin-bottom: var(--s-7);
}
.featured__header h2 { margin: var(--s-2) 0 var(--s-3); }
.featured__header p { max-width: 520px; margin: 0 auto; }

.featured__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.dress-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.dress-card__image {
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--beige);
    position: relative;
}
.dress-card__image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1.4s var(--ease);
}
.dress-card:hover .dress-card__image img { transform: scale(1.06); }
.dress-card__image::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(28, 25, 23, 0);
    transition: background var(--medium) var(--ease);
}
.dress-card:hover .dress-card__image::after { background: rgba(28, 25, 23, 0.15); }
.dress-card__info {
    padding: var(--s-3) 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-top: 1px solid var(--whisper);
}
.dress-card__name {
    font-family: var(--font-serif);
    font-size: var(--fs-md);
    font-style: italic;
    font-weight: 300;
}
.dress-card__tag {
    font-size: var(--fs-xs);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--warm-gray);
}
.dress-card__caption {
    position: absolute;
    bottom: var(--s-5);
    left: var(--s-3);
    color: #fff;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--fs-md);
    opacity: 0;
    transform: translateY(10px);
    transition: all var(--medium) var(--ease);
    max-width: 80%;
}
.dress-card:hover .dress-card__caption { opacity: 1; transform: translateY(0); }
@media (hover: none) {
    .dress-card__caption { opacity: 1; transform: translateY(0); }
    .dress-card__image::after { background: rgba(28, 25, 23, 0.3); }
}

/* ---------- Couture vs RTW Comparison ---------- */
.compare {
    background: var(--cream);
}
.compare__intro {
    text-align: center;
    margin-bottom: var(--s-7);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}
.compare__grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--s-5);
    align-items: stretch;
}
.compare__column {
    padding: var(--s-5) var(--s-4);
}
.compare__column h3 {
    font-size: var(--fs-xl);
    margin-bottom: var(--s-4);
}
.compare__column ul { list-style: none; }
.compare__column li {
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--whisper);
    font-size: var(--fs-sm);
    display: flex;
    gap: var(--s-2);
}
.compare__column li::before {
    content: '—';
    color: var(--gold);
    flex-shrink: 0;
}
.compare__divider {
    width: 1px;
    background: var(--whisper);
    position: relative;
}
.compare__divider::before {
    content: 'et';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: var(--cream);
    padding: var(--s-2);
    font-family: var(--font-script);
    font-size: 1.4rem;
    font-style: italic;
    color: var(--gold-deep);
}

/* ---------- Buttons (REMOVED — Phase 0) ---------------------------------
   Legacy .btn / .btn--solid / .btn--light / .btn--gold / .btn--ghost /
   .btn--block / .btn--back / .btn--plain / .btn--sm / .btn--loading have
   been deleted. Actions now use .primary-link / .quiet-link from
   css/primitives.css (Master Playbook §8). Call-sites will migrate in
   Phase 1; any HTML `class="btn ..."` that remains is a TODO(phase1).
-------------------------------------------------------------------------- */

/* ---------- CTA Band ---------- */
.cta-band {
    padding: var(--s-9) var(--s-5);
    text-align: center;
    background: var(--ink);
    color: var(--ivory);
}
.cta-band .eyebrow { color: var(--gold); }
.cta-band h2 {
    color: var(--ivory);
    max-width: 18ch;
    margin: var(--s-3) auto var(--s-5);
}

/* ---------- Footer ---------- */
.footer {
    padding: var(--s-7) var(--s-5) var(--s-4);
    background: var(--ivory);
    border-top: 1px solid var(--whisper);
}
.footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--s-5);
    margin-bottom: var(--s-6);
}
.footer__brand h3 {
    font-family: var(--font-script);
    font-size: 2.4rem;
    line-height: 1;
    letter-spacing: 0.01em;
    font-weight: 400;
    font-style: italic;
    text-transform: lowercase;
    margin-bottom: var(--s-2);
}
.footer__brand p { max-width: 320px; font-size: var(--fs-sm); }
.footer__col h5 {
    font-size: var(--fs-xs);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--warm-gray);
    margin-bottom: var(--s-3);
    font-family: var(--font-sans);
    font-weight: 400;
}
.footer__col ul { list-style: none; }
.footer__col li { padding: var(--s-1) 0; }
.footer__col a { font-size: var(--fs-sm); transition: color var(--fast); }
.footer__col a:hover { color: var(--gold-deep); }
.footer__bottom {
    padding-top: var(--s-3);
    border-top: none;
    display: flex;
    justify-content: space-between;
    font-size: var(--fs-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--warm-gray);
}

/* ---------- Reveal Animations ---------- */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal--delay-1 { transition-delay: 0.1s; }
.reveal--delay-2 { transition-delay: 0.25s; }
.reveal--delay-3 { transition-delay: 0.4s; }

/* ---------- Page Hero (inner pages) ---------- */
.page-hero {
    padding: clamp(7rem, 11vw, 9rem) var(--s-5) clamp(3.5rem, 5vw, 5rem);
    text-align: center;
    background: var(--cream);
}
.page-hero .eyebrow { margin-bottom: var(--s-3); }
.page-hero h1 {
    font-size: clamp(2.2rem, 5vw, 4.6rem);
    margin-bottom: var(--s-3);
    line-height: 1.05;
}
.page-hero p.lead { max-width: 600px; margin: 0 auto; }

/* ---------- Forms (Booking Flow) ---------- */
.form-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--s-6);
    background: #fff;
    border: 1px solid var(--whisper);
}
.form-steps {
    display: flex;
    justify-content: center;
    gap: var(--s-2);
    margin-bottom: var(--s-6);
    list-style: none;
}
.form-step {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-xs);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--warm-gray);
    opacity: 0.5;
    transition: opacity var(--medium);
}
.form-step.active { opacity: 1; color: var(--ink); }
.form-step.complete { opacity: 1; color: var(--gold-deep); }
.form-step__num {
    width: 32px; height: 32px;
    border: 1px solid currentColor;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-serif);
    font-style: italic;
}
.form-step + .form-step::before {
    content: '';
    width: 40px; height: 1px;
    background: currentColor;
    margin-right: var(--s-2);
    opacity: 0.3;
}

.field { margin-bottom: var(--s-4); }
.field label {
    display: block;
    font-size: var(--fs-xs);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: var(--s-2);
    color: var(--warm-gray);
}
.field input,
.field textarea,
.field select {
    width: 100%;
    padding: var(--s-2) 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--whisper);
    font-size: var(--fs-base);
    font-weight: 300;
    transition: border-color var(--fast);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
    outline: none;
    border-bottom-color: var(--gold-deep);
}
.field textarea { min-height: 120px; resize: vertical; }

.field-group { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }

.choice-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-2);
}
.choice {
    padding: var(--s-3);
    border: 1px solid var(--whisper);
    text-align: center;
    cursor: pointer;
    transition: all var(--medium) var(--ease);
    font-size: var(--fs-sm);
}
.choice:hover { border-color: var(--gold); }
.choice.selected {
    background: var(--ink);
    color: var(--ivory);
    border-color: var(--ink);
}
.choice__icon {
    font-family: var(--font-script);
    font-size: 1.4rem;
    font-style: italic;
    display: block;
    margin-bottom: var(--s-1);
    color: var(--gold-deep);
}
.choice.selected .choice__icon { color: var(--gold); }

.form-step-panel { display: none; animation: fade 0.8s var(--ease); }
.form-step-panel.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.form-actions {
    display: flex;
    justify-content: space-between;
    margin-top: var(--s-5);
    gap: var(--s-3);
}

.fee-notice {
    padding: var(--s-4);
    background: var(--cream);
    border-left: 2px solid var(--gold);
    margin-bottom: var(--s-4);
}
.fee-notice strong { font-family: var(--font-serif); font-style: italic; font-weight: 500; }

/* ---------- Portfolio ---------- */
.portfolio__tabs {
    display: flex;
    justify-content: center;
    gap: var(--s-6);
    margin-bottom: var(--s-7);
    border-bottom: 1px solid var(--whisper);
    padding-bottom: var(--s-2);
}
.portfolio__tab {
    font-size: var(--fs-xs);
    letter-spacing: 0.26em;
    text-transform: uppercase;
    padding: var(--s-2) 0;
    position: relative;
    color: var(--warm-gray);
    transition: color var(--medium);
}
.portfolio__tab.active { color: var(--ink); }
.portfolio__tab.active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -9px;
    height: 1px;
    background: var(--gold);
}

.dress-story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-7);
    align-items: center;
    margin-bottom: var(--s-9);
}
.dress-story:nth-child(even) { direction: rtl; }
.dress-story:nth-child(even) > * { direction: ltr; }
.dress-story__image {
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--beige);
}
.dress-story__image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 2s var(--ease);
}
.dress-story:hover .dress-story__image img { transform: scale(1.04); }
.dress-story__text { padding: 0 var(--s-4); }
.dress-story__number {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--fs-lg);
    color: var(--gold-deep);
    margin-bottom: var(--s-2);
}
.dress-story__name {
    font-size: var(--fs-2xl);
    margin-bottom: var(--s-4);
}
.dress-story__label {
    font-size: var(--fs-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--warm-gray);
    margin-top: var(--s-3);
    margin-bottom: var(--s-1);
}
.dress-story__mood {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--fs-md);
    color: var(--ink-soft);
    padding: var(--s-3) 0;
    margin-top: var(--s-3);
    border-top: 1px solid var(--whisper);
}

/* ---------- Press Strip ---------- */
.press {
    padding: var(--s-5) 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-top: var(--s-7);
}
.press__track {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: var(--s-5);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--fs-lg);
    opacity: 0.6;
}

/* ---------- RTW Product Grid ---------- */
.rtw-intro {
    text-align: center;
    max-width: 600px;
    margin: 0 auto var(--s-7);
}
.rtw-section { padding-bottom: var(--s-8); }
.rtw-section__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--s-3);
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--whisper);
    margin-bottom: var(--s-5);
}
.rtw-section__title h3 { margin-bottom: var(--s-1); }
.rtw-section__title .eyebrow { color: var(--gold-deep); }
.rtw-section__meta { font-size: var(--fs-sm); color: var(--warm-gray); max-width: 340px; text-align: right; }
@media (max-width: 720px) {
    .rtw-section__header {
        flex-direction: column;
        align-items: flex-start;
    }
    .rtw-section__meta { text-align: left; max-width: 100%; }
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-3) var(--s-3);
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}
.product-grid--3 {
    grid-template-columns: repeat(3, 1fr);
    max-width: 860px;
    column-gap: var(--s-3);
    row-gap: var(--s-4);
}

.product-card {
    position: relative;
    cursor: pointer;
}
.product-card__image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--beige);
    margin-bottom: 10px;
    position: relative;
}
.product-card__image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}
.product-card:hover .product-card__image img { transform: scale(1.04); }
.product-card__badge {
    position: absolute;
    top: 10px; left: 10px;
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 3px 8px;
    background: var(--ivory);
    color: var(--ink);
}
.product-card__name {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.25;
    margin-bottom: 1px;
}
.product-card__price {
    font-size: 0.72rem;
    color: var(--ink-soft);
    letter-spacing: 0.08em;
}
.product-card__cta {
    display: inline-block;
    margin-top: 6px;
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 2px;
    opacity: 0;
    transform: translateY(6px);
    transition: all var(--medium) var(--ease);
}
.product-card:hover .product-card__cta { opacity: 1; transform: translateY(0); }

/* ---------- Payment Schedule ---------- */
.payment-plan {
    background: var(--cream);
    padding: var(--s-6);
    border-left: 2px solid var(--gold);
    margin: var(--s-5) 0;
}
.payment-plan h4 { margin-bottom: var(--s-3); }
.payment-plan__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); margin-top: var(--s-4); }
.payment-plan__step {
    text-align: center;
    padding: var(--s-3);
    border: 1px solid var(--whisper);
    background: var(--ivory);
}
.payment-plan__pct {
    font-family: var(--font-serif);
    font-size: 2.4rem;
    color: var(--gold-deep);
    margin-bottom: var(--s-1);
}
.payment-plan__when {
    font-size: var(--fs-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--warm-gray);
}

/* ---------- Private Viewing ---------- */
.viewing-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 90vh;
    padding-top: 80px;
}
.viewing-hero__image { background-size: cover; background-position: 70% center; }
.viewing-hero__text {
    padding: var(--s-8) var(--s-6);
    background: var(--cream);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.viewing-hero__text h1 { margin: var(--s-3) 0 var(--s-4); }

.viewing-perks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5);
    margin-top: var(--s-6);
}
.viewing-perk {
    text-align: center;
    padding: var(--s-4);
}
.viewing-perk__num {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 3rem;
    color: var(--gold);
    margin-bottom: var(--s-2);
    line-height: 1;
}
.viewing-perk h4 { margin-bottom: var(--s-2); }
.viewing-perk p { font-size: var(--fs-sm); }

/* ---------- Calendar Placeholder ---------- */
.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin: var(--s-4) 0;
}
.calendar__day {
    padding: var(--s-2);
    text-align: center;
    font-size: var(--fs-sm);
    border: 1px solid var(--whisper);
    cursor: pointer;
    transition: all var(--fast);
}
.calendar__day:hover { border-color: var(--gold); }
.calendar__day.selected {
    background: var(--ink);
    color: var(--ivory);
    border-color: var(--ink);
}
.calendar__day.disabled { opacity: 0.3; cursor: not-allowed; }
.calendar__header {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--fs-xs);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-align: center;
    padding: var(--s-1);
    color: var(--warm-gray);
}

.time-slots {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-2);
    margin-top: var(--s-3);
}
.time-slot {
    padding: var(--s-2);
    text-align: center;
    border: 1px solid var(--whisper);
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: all var(--fast);
}
.time-slot:hover { border-color: var(--gold); }
.time-slot.selected { background: var(--ink); color: var(--ivory); border-color: var(--ink); }

/* ---------- Testimonial / Quote ---------- */
.quote {
    text-align: center;
    max-width: 780px;
    margin: 0 auto;
    padding: var(--s-7) var(--s-5);
}
.quote__mark {
    font-family: var(--font-serif);
    font-size: 5rem;
    line-height: 0.5;
    color: var(--gold);
    margin-bottom: var(--s-3);
}
.quote__text {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--fs-xl);
    line-height: 1.4;
    color: var(--ink);
    font-weight: 300;
}
.quote__author {
    font-size: var(--fs-xs);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--warm-gray);
    margin-top: var(--s-4);
}

/* ---------- Modal ---------- */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(28, 25, 23, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--s-4);
}
.modal.open { display: flex; animation: fade 0.4s; }
.modal__inner {
    background: var(--ivory);
    max-width: 560px;
    width: 100%;
    padding: var(--s-6);
    text-align: center;
}
.modal__inner h3 { margin-bottom: var(--s-3); }
.modal__close {
    position: absolute;
    top: var(--s-3); right: var(--s-3);
    font-size: 1.5rem;
    color: #fff;
}

/* ---------- Account page: nav CTA hidden (button lives at page bottom) ---------- */
body.is-account .nav__cta { display: none; }

/* ---------- Account bottom CTA (replaces nav CTA on /account.html) ---------- */
.account-foot-cta {
    background: var(--cream);
    border-top: 1px solid var(--whisper);
    padding: var(--s-7) 0;
    margin-top: var(--s-6);
}
.account-foot-cta__inner {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: var(--s-5);
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}
.account-foot-cta__copy .eyebrow { margin-bottom: 0.6rem; }
.account-foot-cta__copy h3 {
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    line-height: 1.1;
    margin: 0 0 0.8rem;
}
.account-foot-cta__copy p {
    font-size: 0.92rem;
    color: var(--warm-gray);
    line-height: 1.65;
    max-width: 520px;
    margin: 0;
}
.account-foot-cta__actions {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    align-items: flex-start;
    justify-self: end;
}
/* .account-foot-cta__actions .btn rule removed (Phase 0 — legacy button). */
@media (max-width: 900px) {
    .account-foot-cta__inner {
        grid-template-columns: 1fr;
        gap: var(--s-4);
    }
    .account-foot-cta__actions {
        justify-self: stretch;
    }
    /* mobile .account-foot-cta__actions .btn rule removed (Phase 0). */
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
    /* Hide the CTA on mid-width screens where it clips */
    .nav__cta { display: none; }
}
@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .product-grid { grid-template-columns: repeat(3, 1fr); }
    .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    :root {
        --s-5: 2rem;
        --s-7: 4rem;
        --s-8: 5rem;
        --s-9: 7rem;
    }
    .nav__menu { display: none; }
    .nav__burger { display: flex; }
    .nav__cta { display: none; }
    .nav__right { display: none; }
    .nav__menu.open .nav__menu-mobile-only { display: block; }

    .hero__tagline, .hero__scroll { display: none; }
    .hero__content { grid-template-columns: 1fr; }
    .hero__meta { text-align: left; }
    .hero__image { object-position: center bottom; }
    .hero { min-height: 85vh; }

    .paths__grid, .grid-2, .grid-3, .featured__grid,
    .product-grid, .product-grid--3,
    .story, .dress-story, .viewing-hero,
    .compare__grid, .viewing-perks, .payment-plan__steps {
        grid-template-columns: 1fr;
    }
    .dress-story:nth-child(even) { direction: ltr; }
    .compare__divider { display: none; }
    .footer__grid { grid-template-columns: 1fr; gap: var(--s-4); }
    .footer__bottom { flex-direction: column; gap: var(--s-2); text-align: center; }
    .field-group { grid-template-columns: 1fr; }
    .form-steps { flex-wrap: wrap; }
    .form-step + .form-step::before { display: none; }
    .section { padding: var(--s-7) 0; }
    .portfolio__tabs { gap: var(--s-3); }

    /* Mobile touch targets — form controls need 44px min (Phase 0: .btn removed). */
    input, select, textarea, button {
        min-height: 44px;
    }

    /* Mobile auth social buttons stack vertically */
    .auth-card [style*="display:flex"][style*="gap:0.75rem"] {
        flex-direction: column;
    }

    /* Mobile product card images — taller on phone */
    .product-card__image { aspect-ratio: 3 / 4; }
    .product-card__image img { height: 100%; object-fit: cover; }

    /* Mobile meta rows on product page — stack vertically */
    .product-detail__meta-row {
        flex-direction: column;
        gap: 0.25rem;
    }

    /* Mobile booking form — more breathing room */
    .form-wrap { padding: var(--s-3); }
    .form-step-panel { padding: var(--s-3) 0; }

    /* Mobile account hero stats — 2 columns */
    .account-hero__stats { grid-template-columns: 1fr 1fr; }

    /* Mobile footer — center all text */
    .footer__logo { text-align: center; }
}

/* =========================================================================
   PRODUCT DETAIL
   ========================================================================= */
.product-detail {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--s-6);
    padding-top: 120px;
    min-height: 90vh;
}
.product-detail__gallery {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    align-self: start;
}
.product-gallery__main {
    background: var(--cream);
    height: calc(100vh - 180px);
    overflow: hidden;
}
.product-gallery__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 400ms var(--ease), transform 1.4s var(--ease);
}
.product-detail__gallery:hover .product-gallery__main img {
    transform: scale(1.04);
}
.product-gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-2);
}
.product-gallery__thumb {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border: 1px solid transparent;
    padding: 0;
    background: var(--cream);
    cursor: pointer;
    transition: border-color 400ms var(--ease),
                transform 500ms var(--ease);
}
.product-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.82;
    transition: opacity 400ms var(--ease);
}
.product-gallery__thumb:hover img,
.product-gallery__thumb.active img {
    opacity: 1;
}
.product-gallery__thumb.active {
    border-color: var(--gold-deep);
}

/* Product info additions */
.product-detail__top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    margin-bottom: var(--s-3);
}
.product-detail__top-row .product-detail__breadcrumb {
    margin-bottom: 0;
}
.product-size-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: var(--s-3);
    gap: var(--s-2);
}
.product-size-guide {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-deep);
    position: relative;
}
.product-size-guide::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: var(--gold-deep);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 500ms var(--ease);
}
.product-size-guide:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Product editorial story */
.container--narrow {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 var(--s-3);
}
.product-story {
    text-align: left;
    padding: var(--s-5) 0;
}
.product-story h2 {
    font-size: clamp(2rem, 3.5vw, 3rem);
    line-height: 1.1;
}
.product-story p {
    font-size: 1.02rem;
    line-height: 1.9;
    margin-bottom: 1.2rem;
    color: var(--ink-soft);
}
.product-story p em {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--ink);
    font-weight: 400;
}
.product-story__specs {
    margin-top: var(--s-5);
    padding-top: var(--s-4);
    border-top: 1px solid var(--whisper);
    display: grid;
    gap: var(--s-2);
}
.product-story__spec {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--s-3);
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--whisper);
    font-size: 0.9rem;
}
.product-story__spec:last-child {
    border-bottom: none;
}
.product-story__spec-label {
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--warm-gray);
}
.product-detail__info {
    padding: var(--s-6) var(--s-6) var(--s-7) 0;
    max-width: 560px;
}
.product-detail__breadcrumb {
    font-size: var(--fs-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--warm-gray);
    margin-bottom: var(--s-3);
}
.product-detail__breadcrumb a { color: var(--gold-deep); }
.product-detail__name {
    font-size: clamp(2.4rem, 4vw, 3.8rem);
    margin-bottom: var(--s-2);
    line-height: 1;
}
.product-detail__price {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--fs-lg);
    color: var(--gold-deep);
    margin-bottom: var(--s-4);
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--whisper);
}
.product-detail__story {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--fs-md);
    line-height: 1.7;
    color: var(--ink-soft);
    padding: var(--s-3) 0 var(--s-4);
    border-bottom: 1px solid var(--whisper);
    margin-bottom: var(--s-4);
}
.product-detail__meta {
    display: grid;
    gap: var(--s-3);
    margin-bottom: var(--s-5);
}
.product-detail__meta-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: var(--s-3);
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--whisper);
    font-size: var(--fs-sm);
}
.product-detail__meta-label {
    font-size: var(--fs-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--warm-gray);
}

.size-picker {
    display: flex;
    gap: var(--s-2);
    margin: var(--s-3) 0 var(--s-4);
    flex-wrap: wrap;
}
.size-picker__option {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--whisper);
    cursor: pointer;
    font-size: var(--fs-sm);
    transition: all var(--medium) var(--ease);
}
.size-picker__option:hover { border-color: var(--gold); }
.size-picker__option.selected {
    background: var(--ink);
    color: var(--ivory);
    border-color: var(--ink);
}
.size-picker__option.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    text-decoration: line-through;
}

.product-detail__actions {
    display: flex;
    gap: var(--s-2);
    margin-top: var(--s-4);
}
/* .product-detail__actions .btn rule removed (Phase 0 — legacy button). */

.product-detail__notes {
    margin-top: var(--s-5);
    padding-top: var(--s-4);
    border-top: 1px solid var(--whisper);
    display: grid;
    gap: var(--s-3);
    font-size: var(--fs-sm);
    color: var(--warm-gray);
}
.product-detail__notes div {
    display: flex;
    gap: var(--s-2);
}
.product-detail__notes strong {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--ink);
    font-weight: 400;
}

/* =========================================================================
   CART / CHECKOUT
   ========================================================================= */
.cart-page {
    padding-top: 140px;
    min-height: 90vh;
    background: var(--cream);
    padding-bottom: var(--s-9);
}
.cart-page__header {
    text-align: center;
    margin-bottom: var(--s-7);
}
.cart-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--s-5);
    align-items: start;
}
.cart-items {
    background: var(--ivory);
    padding: var(--s-5);
}
.cart-item {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: var(--s-4);
    padding: var(--s-4) 0;
    border-bottom: 1px solid var(--whisper);
    align-items: start;
}
.cart-item:last-child { border-bottom: none; }
.cart-item__image {
    width: 120px;
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--beige);
}
.cart-item__image img { width: 100%; height: 100%; object-fit: cover; }
.cart-item__name {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--fs-md);
    margin-bottom: var(--s-1);
}
.cart-item__meta {
    font-size: var(--fs-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--warm-gray);
    margin-bottom: var(--s-2);
}
.cart-item__qty {
    display: flex;
    gap: var(--s-1);
    align-items: center;
    font-size: var(--fs-sm);
    margin-top: var(--s-2);
}
.cart-item__qty button {
    width: 28px; height: 28px;
    border: 1px solid var(--whisper);
    transition: all var(--fast);
}
.cart-item__qty button:hover { border-color: var(--gold); background: var(--cream); }
.cart-item__qty span { padding: 0 var(--s-2); min-width: 30px; text-align: center; }
.cart-item__price {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--fs-md);
    color: var(--gold-deep);
    text-align: right;
}
.cart-item__remove {
    display: block;
    margin-top: var(--s-2);
    font-size: var(--fs-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--warm-gray);
    text-align: right;
    transition: color var(--fast);
}
.cart-item__remove:hover { color: var(--ink); }

.cart-summary {
    background: var(--ivory);
    padding: var(--s-5);
    position: sticky;
    top: 100px;
}
.cart-summary h3 { margin-bottom: var(--s-4); font-size: var(--fs-xl); }
.cart-summary__row {
    display: flex;
    justify-content: space-between;
    padding: var(--s-2) 0;
    font-size: var(--fs-sm);
    border-bottom: 1px solid var(--whisper);
}
.cart-summary__row--total {
    border-bottom: none;
    border-top: 1px solid var(--ink);
    margin-top: var(--s-3);
    padding-top: var(--s-3);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--fs-lg);
}
.cart-summary__delivery {
    margin-top: var(--s-4);
    padding: var(--s-3);
    background: var(--cream);
    border-left: 2px solid var(--gold);
    font-size: var(--fs-xs);
}
.cart-summary__delivery strong {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    color: var(--ink);
}

/* =========================================================================
   ADMIN DASHBOARD
   ========================================================================= */
.admin {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
    background: var(--cream);
}
.admin__sidebar {
    background: var(--ink);
    color: var(--ivory);
    padding: var(--s-4) 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.admin__logo {
    font-family: var(--font-script);
    font-size: 1.8rem;
    padding: var(--s-2) var(--s-4) var(--s-5);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: var(--s-3);
}
.admin__logo em { font-style: italic; }
.admin__logo small {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0.5;
    margin-top: var(--s-1);
}
.admin__nav {
    list-style: none;
    padding: 0 var(--s-2);
}
.admin__nav li a {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    font-size: var(--fs-sm);
    color: rgba(255,255,255,0.6);
    transition: all var(--fast);
    border-left: 2px solid transparent;
}
.admin__nav li a:hover {
    color: var(--ivory);
    background: rgba(255,255,255,0.04);
}
.admin__nav li a.active {
    color: var(--gold);
    border-left-color: var(--gold);
    background: rgba(184,147,106,0.08);
}
.admin__nav-icon {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.1rem;
    width: 22px;
    text-align: center;
}
.admin__nav-section {
    font-size: var(--fs-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    padding: var(--s-3) var(--s-3) var(--s-1);
    margin-top: var(--s-3);
}

.admin__main { padding: var(--s-5) var(--s-6); }
.admin__topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--s-5);
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--whisper);
}
.admin__title h1 {
    font-size: var(--fs-2xl);
    margin-bottom: 4px;
}
.admin__title p {
    font-size: var(--fs-sm);
    color: var(--warm-gray);
}
.admin__user {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    font-size: var(--fs-sm);
}
.admin__avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--ivory);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-style: italic;
}

.admin__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-3);
    margin-bottom: var(--s-5);
}
.stat-card {
    background: var(--ivory);
    padding: var(--s-4);
    border-left: 2px solid var(--gold);
}
.stat-card__label {
    font-size: var(--fs-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--warm-gray);
    margin-bottom: var(--s-2);
}
.stat-card__value {
    font-family: var(--font-serif);
    font-size: 2.4rem;
    line-height: 1;
    margin-bottom: var(--s-1);
}
.stat-card__delta {
    font-size: var(--fs-xs);
    color: var(--gold-deep);
    font-style: italic;
    font-family: var(--font-serif);
}
.stat-card__delta.down { color: #c44; }

.admin__panel {
    background: var(--ivory);
    margin-bottom: var(--s-4);
}
.admin__panel-header {
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--whisper);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.admin__panel-header h3 {
    font-size: var(--fs-lg);
}
.admin__panel-action {
    font-size: var(--fs-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-deep);
    border-bottom: 1px solid var(--gold);
    padding-bottom: 2px;
}

.admin__table {
    width: 100%;
    border-collapse: collapse;
}
.admin__table th,
.admin__table td {
    padding: var(--s-3) var(--s-4);
    text-align: left;
    border-bottom: 1px solid var(--whisper);
    font-size: var(--fs-sm);
}
.admin__table th {
    font-size: var(--fs-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--warm-gray);
    font-weight: 400;
    background: var(--cream);
}
.admin__table tr:hover td { background: var(--cream); }
.admin__table .client-name {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--fs-base);
}
.admin__table .client-name small {
    display: block;
    font-family: var(--font-sans);
    font-style: normal;
    font-size: var(--fs-xs);
    color: var(--warm-gray);
}
.status-pill {
    display: inline-block;
    padding: 4px 12px;
    font-size: var(--fs-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-family: var(--font-sans);
}
.status-pill--pending { background: #fff3d9; color: #8a6800; }
.status-pill--confirmed { background: #e0f0e3; color: #2d6638; }
.status-pill--fitting { background: #e8e1f5; color: #5b3d8c; }
.status-pill--complete { background: var(--ink); color: var(--ivory); }
.status-pill--paid-25 { background: #f5e8d6; color: #8c5b1f; }
.status-pill--paid-50 { background: #f0d9b8; color: #6b4318; }
.status-pill--paid-100 { background: #c8a87a; color: #fff; }

.admin-action-link {
    font-size: var(--fs-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-right: var(--s-2);
    transition: color var(--fast);
}
.admin-action-link:hover { color: var(--ink); }

.admin__two-col {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--s-4);
}

.activity-feed {
    list-style: none;
}
.activity-feed li {
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--whisper);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--s-3);
    align-items: start;
}
.activity-feed li:last-child { border-bottom: none; }
.activity-feed__text {
    font-size: var(--fs-sm);
    color: var(--ink-soft);
}
.activity-feed__text strong {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    color: var(--ink);
}
.activity-feed__time {
    font-size: var(--fs-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--warm-gray);
    white-space: nowrap;
}

@media (max-width: 1024px) {
    .product-detail { grid-template-columns: 1fr; }
    .product-detail__gallery { position: relative; top: 0; height: auto; }
    .product-gallery__main { height: 70vh; }
    .product-detail__info { padding: var(--s-5) 0; max-width: 100%; }
    .cart-grid { grid-template-columns: 1fr; }
    .admin__stats { grid-template-columns: repeat(2, 1fr); }
    .admin__two-col { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .admin { grid-template-columns: 1fr; }
    .admin__sidebar {
        position: relative;
        height: auto;
        padding: var(--s-3);
    }
    .admin__main { padding: var(--s-4); }
    .admin__stats { grid-template-columns: 1fr; }
    .admin__table { font-size: var(--fs-xs); }
    .admin__table th, .admin__table td { padding: var(--s-2); }
    .cart-item { grid-template-columns: 80px 1fr; }
    .cart-item__price { grid-column: 2; text-align: left; }
}

/* =========================================================================
   CONTACT PAGE
   ========================================================================= */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-7);
    align-items: start;
}
.contact-info { padding: var(--s-3) 0; }
.contact-info h2 { margin: var(--s-2) 0 var(--s-4); }
.contact-block {
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--whisper);
}
.contact-block:last-child { border-bottom: none; }
.contact-block h5 {
    font-size: var(--fs-xs);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--warm-gray);
    margin-bottom: var(--s-2);
    font-family: var(--font-sans);
    font-weight: 400;
}
.contact-block p {
    font-family: var(--font-serif);
    font-size: var(--fs-md);
    font-weight: 300;
    line-height: 1.6;
}
.contact-block a {
    color: var(--ink);
    border-bottom: 1px solid var(--gold);
    transition: color var(--fast);
}
.contact-block a:hover { color: var(--gold-deep); }

.contact-form {
    background: var(--ivory);
    padding: var(--s-5);
    border: 1px solid var(--whisper);
}
.contact-form h3 {
    font-size: var(--fs-xl);
    margin-bottom: var(--s-4);
}

.map-strip {
    height: 360px;
    background: var(--cream);
    background-image:
        linear-gradient(135deg, transparent 49.5%, var(--whisper) 49.5%, var(--whisper) 50.5%, transparent 50.5%),
        linear-gradient(45deg, transparent 49.5%, var(--whisper) 49.5%, var(--whisper) 50.5%, transparent 50.5%);
    background-size: 80px 80px;
    position: relative;
    overflow: hidden;
}
.map-strip::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--ivory) 0%, transparent 20%, transparent 80%, var(--ivory) 100%);
}
.map-pin {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -100%);
    z-index: 2;
    text-align: center;
}
.map-pin__dot {
    width: 16px; height: 16px;
    background: var(--gold);
    border-radius: 50%;
    margin: 0 auto;
    position: relative;
}
.map-pin__dot::before {
    content: '';
    position: absolute; inset: -8px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    animation: pin-pulse 2.4s ease-out infinite;
}
@keyframes pin-pulse {
    0% { transform: scale(0.6); opacity: 1; }
    100% { transform: scale(2.2); opacity: 0; }
}
.map-pin__label {
    font-family: var(--font-script);
    font-size: 1.2rem;
    color: var(--ink);
    margin-top: var(--s-2);
    background: var(--ivory);
    padding: 4px 12px;
    display: inline-block;
}

/* =========================================================================
   SIZING GUIDE
   ========================================================================= */
.sizing-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--ivory);
    margin: var(--s-5) 0;
}
.sizing-table th,
.sizing-table td {
    padding: var(--s-3) var(--s-4);
    text-align: center;
    border-bottom: 1px solid var(--whisper);
    font-size: var(--fs-sm);
}
.sizing-table th {
    background: var(--cream);
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    color: var(--ink);
    font-size: var(--fs-md);
}
.sizing-table td:first-child,
.sizing-table th:first-child {
    text-align: left;
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--gold-deep);
}
.sizing-table tr:hover td { background: var(--cream); }

.measure-guide {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5);
    margin: var(--s-6) 0;
}
.measure-step {
    text-align: center;
    padding: var(--s-4);
}
.measure-step__num {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 3rem;
    color: var(--gold);
    line-height: 1;
    margin-bottom: var(--s-2);
}
.measure-step h4 {
    margin-bottom: var(--s-2);
    font-size: var(--fs-md);
}
.measure-step p { font-size: var(--fs-sm); }

/* =========================================================================
   CMS — Dresses Management
   ========================================================================= */
.cms-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--s-3) var(--s-4);
    background: var(--ivory);
    border-bottom: 1px solid var(--whisper);
    margin-bottom: var(--s-3);
    gap: var(--s-3);
    flex-wrap: wrap;
}
.cms-toolbar__filters { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.cms-pill {
    font-size: var(--fs-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: var(--s-1) var(--s-3);
    border: 1px solid var(--whisper);
    cursor: pointer;
    transition: all var(--fast);
    background: transparent;
}
.cms-pill:hover { border-color: var(--gold); }
.cms-pill.active {
    background: var(--ink);
    color: var(--ivory);
    border-color: var(--ink);
}
.cms-search {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--whisper);
    padding: var(--s-1) 0;
    font-size: var(--fs-sm);
    width: 220px;
}
.cms-search:focus { outline: none; border-bottom-color: var(--gold); }

.cms-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-3);
    background: var(--ivory);
    padding: var(--s-4);
}
.cms-tile {
    background: var(--cream);
    border: 1px solid var(--whisper);
    transition: all var(--medium) var(--ease);
    cursor: pointer;
}
.cms-tile:hover { transform: translateY(-3px); border-color: var(--gold); }
.cms-tile__image {
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--beige);
    position: relative;
}
.cms-tile__image img { width: 100%; height: 100%; object-fit: cover; }
.cms-tile__overlay {
    position: absolute;
    inset: 0;
    background: rgba(28, 25, 23, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    transition: background var(--medium);
}
.cms-tile:hover .cms-tile__overlay { background: rgba(28, 25, 23, 0.55); }
.cms-tile__action {
    opacity: 0;
    background: var(--ivory);
    color: var(--ink);
    padding: var(--s-1) var(--s-3);
    font-size: var(--fs-xs);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: opacity var(--medium);
}
.cms-tile:hover .cms-tile__action { opacity: 1; }
.cms-tile__info {
    padding: var(--s-2) var(--s-3);
    border-top: 1px solid var(--whisper);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cms-tile__name {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--fs-sm);
}
.cms-tile__status {
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--warm-gray);
}
.cms-tile__status.published { color: var(--gold-deep); }
.cms-tile--add {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3/4;
    border: 1px dashed var(--warm-gray);
    background: transparent;
    color: var(--warm-gray);
    transition: all var(--medium);
}
.cms-tile--add:hover {
    border-color: var(--gold);
    color: var(--gold-deep);
    background: rgba(184, 147, 106, 0.04);
}
.cms-tile--add__icon {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 3rem;
    margin-bottom: var(--s-2);
    text-align: center;
}
.cms-tile--add__label {
    text-align: center;
    font-size: var(--fs-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

/* =========================================================================
   404
   ========================================================================= */
.not-found {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ink);
    color: var(--ivory);
    text-align: center;
    padding: var(--s-5);
    position: relative;
    overflow: hidden;
}
.not-found::before {
    content: '404';
    position: absolute;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(20rem, 50vw, 48rem);
    color: rgba(184, 147, 106, 0.06);
    line-height: 0.8;
    z-index: 0;
}
.not-found__inner {
    position: relative;
    z-index: 2;
    max-width: 540px;
}
.not-found .eyebrow { color: var(--gold); }
.not-found h1 {
    color: var(--ivory);
    margin: var(--s-3) 0 var(--s-4);
    font-size: clamp(2.4rem, 5vw, 4.5rem);
}
.not-found p { color: var(--beige); margin-bottom: var(--s-5); }

@media (max-width: 1024px) {
    .contact-grid { grid-template-columns: 1fr; gap: var(--s-5); }
    .cms-grid { grid-template-columns: repeat(3, 1fr); }
    .measure-guide { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .cms-grid { grid-template-columns: repeat(2, 1fr); }
    .sizing-table { font-size: var(--fs-xs); }
    .sizing-table th, .sizing-table td { padding: var(--s-2); }
}

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mb-1 { margin-bottom: var(--s-1); }
.mb-2 { margin-bottom: var(--s-2); }
.mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.gold { color: var(--gold-deep); }
.divider {
    width: 60px;
    height: 1px;
    background: var(--gold);
    margin: var(--s-4) auto;
    display: block;
}

/* =========================================================================
   STEP 1 — GLOBAL POLISH PASS
   Refinements layered on top of the existing design system.
   Edits, never replaces.
   ========================================================================= */

/* ---------- Accessibility ---------- */
:focus-visible {
    outline: 1px solid var(--gold);
    outline-offset: 3px;
}
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
    outline: none;
}
.skip-link {
    position: absolute;
    top: -40px;
    left: var(--s-3);
    background: var(--ink);
    color: var(--ivory);
    padding: var(--s-2) var(--s-3);
    z-index: 200;
    font-size: var(--fs-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    transition: top var(--medium) var(--ease);
}
.skip-link:focus { top: var(--s-2); }

/* Honor reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; }
    .hero__image { animation: none; }
}

/* Button states block removed — see Phase 0 deletion note above. */

/* ---------- Refined fields (validation states) ---------- */
.field { position: relative; }
.field input:focus,
.field textarea:focus,
.field select:focus {
    border-bottom-color: var(--gold-deep);
}
.field input:not(:placeholder-shown):valid,
.field textarea:not(:placeholder-shown):valid {
    border-bottom-color: rgba(154, 122, 84, 0.4);
}
.field--error input,
.field--error textarea,
.field--error select { border-bottom-color: #b85a4a; }
.field--error .field__hint { color: #b85a4a; }
.field--success input,
.field--success textarea { border-bottom-color: var(--gold-deep); }
.field--success .field__hint { color: var(--gold-deep); }
.field__hint {
    display: block;
    margin-top: var(--s-1);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--warm-gray);
    font-style: italic;
    font-family: var(--font-serif);
}
.field__hint--error::before {
    content: '— ';
    color: #b85a4a;
}
.field--required label::after {
    content: ' ·';
    color: var(--gold-deep);
}

/* Refined input typography rhythm */
.field input,
.field textarea,
.field select {
    padding: var(--s-2) 0 calc(var(--s-2) - 2px);
    font-size: var(--fs-md);
    color: var(--ink);
    letter-spacing: 0.01em;
}
.field input::placeholder,
.field textarea::placeholder {
    color: var(--warm-gray);
    opacity: 0.5;
    font-weight: 300;
}
.field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--warm-gray) 50%),
                      linear-gradient(135deg, var(--warm-gray) 50%, transparent 50%);
    background-position: calc(100% - 12px) center, calc(100% - 7px) center;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    padding-right: var(--s-4);
}

/* ---------- Card hover refinement ---------- */
.dress-card,
.product-card,
.cms-tile {
    transition: transform var(--medium) var(--ease);
}

/* ---------- Section rhythm helpers ---------- */
.section--cream { background: var(--cream); }
.section--ink { background: var(--ink); color: var(--ivory); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--ivory); }
.section--ink .eyebrow { color: var(--gold); }

.hairline {
    width: 80px;
    height: 1px;
    background: var(--gold);
    margin: var(--s-4) auto;
    display: block;
}
.hairline--left { margin-left: 0; }

/* Better page-hero rhythm + consistent eyebrow spacing */
.page-hero .eyebrow + h1 { margin-top: var(--s-3); }
.page-hero p.lead { margin-top: var(--s-3); }

/* ---------- Polished mobile nav (overlay) ---------- */
.nav__menu.open {
    display: flex !important;
    flex-direction: column;
    gap: var(--s-3) !important;
    position: fixed;
    inset: 0;
    padding: 100px var(--s-5) var(--s-6) !important;
    background: var(--cream);
    z-index: 98;
    text-align: left;
    align-items: flex-start;
    font-size: var(--fs-md) !important;
    letter-spacing: 0.18em !important;
    animation: fade 0.3s var(--ease);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.nav__menu.open li { width: 100%; padding: var(--s-2) 0; border-bottom: 1px solid var(--whisper); }
.nav__menu.open li:last-child { border-bottom: none; }
.nav__menu.open a {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.4rem;
    text-transform: none;
    letter-spacing: 0.02em;
    color: var(--ink);
}
body.nav-locked { overflow: hidden; }
body.nav-locked .nav {
    background: var(--cream) !important;
    color: var(--ink) !important;
    mix-blend-mode: normal !important;
}

.nav__burger.open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity: 0; }
.nav__burger.open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ---------- Tablet rhythm refinements (1024px) ---------- */
@media (max-width: 1024px) {
    .container { padding: 0 var(--s-4); }

    /* Hero feels tight on tablet */
    .hero__title { font-size: clamp(2.6rem, 7vw, 5rem); }

    /* Two-column blocks fold to one cleanly */
    .story,
    .dress-story,
    .viewing-hero,
    .contact-grid,
    .product-detail {
        grid-template-columns: 1fr;
        gap: var(--s-5);
    }
    .dress-story { margin-bottom: var(--s-7); }
    .dress-story:nth-child(even) { direction: ltr; }
    .viewing-hero { padding-top: 100px; }
    .product-detail__gallery {
        position: relative;
        top: 0;
        height: auto;
    }
    .product-gallery__main { height: 60vh; }
    .product-gallery__thumbs { grid-template-columns: repeat(4, 1fr); }

    /* Three-up grids drop to two */
    .featured__grid,
    .grid-3,
    .viewing-perks,
    .payment-plan__steps,
    .measure-guide {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Section padding reduces gracefully */
    .section { padding: var(--s-8) 0; }
    .page-hero { padding: calc(var(--s-7) + 60px) var(--s-4) var(--s-6); }

    /* Form looks better full width */
    .form-wrap { padding: var(--s-5); }
}

@media (max-width: 768px) {
    .container { padding: 0 var(--s-3); }

    /* Featured drops to single column on phone */
    .featured__grid,
    .viewing-perks,
    .measure-guide,
    .payment-plan__steps,
    .grid-3 {
        grid-template-columns: 1fr;
    }

    /* Hero title scales down */
    .hero__title { font-size: clamp(2.4rem, 10vw, 4rem); line-height: 1; }
    .hero__content { padding: 0 var(--s-3) var(--s-5); }

    /* Page hero rhythm */
    .page-hero {
        padding: calc(var(--s-6) + 60px) var(--s-3) var(--s-5);
    }
    .page-hero h1 { font-size: clamp(2rem, 9vw, 3.2rem); }

    /* Story padding tight */
    .story__text { padding: 0; }

    /* Form actions stack on phone */
    .form-actions {
        flex-direction: column-reverse;
    }
    /* .form-actions .btn mobile rule removed (Phase 0 — legacy button). */

    /* Footer brand reads better */
    .footer__brand p { max-width: none; }

    /* Choice grid two cols stays clean */
    .choice-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Section divider (editorial hairline) ---------- */
.section-divider {
    width: 100%;
    text-align: center;
    padding: var(--s-5) 0;
    position: relative;
}
.section-divider::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 1px;
    background: var(--whisper);
}
.section-divider span {
    position: relative;
    background: var(--ivory);
    padding: 0 var(--s-3);
    font-family: var(--font-script);
    font-style: italic;
    color: var(--gold-deep);
    font-size: 1.4rem;
}

/* ---------- Image lazy fade ---------- */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity var(--medium) var(--ease);
}
img[loading="lazy"].loaded,
img[loading="lazy"].is-loaded { opacity: 1; }

/* =========================================================================
   STEP 2 — BOOKING FLOW REFINEMENTS
   ========================================================================= */

/* ---------- Form progress bar ---------- */
.form-progress {
    height: 1px;
    background: var(--whisper);
    margin-bottom: var(--s-5);
    position: relative;
    overflow: hidden;
}
.form-progress__bar {
    position: absolute;
    inset: 0 100% 0 0;
    background: var(--gold);
    transition: right var(--slow) var(--ease);
}
.form-progress[data-progress="1"] .form-progress__bar { right: 66%; }
.form-progress[data-progress="2"] .form-progress__bar { right: 33%; }
.form-progress[data-progress="3"] .form-progress__bar { right: 0; }

/* ---------- Order/booking review summary ---------- */
.booking-review {
    background: var(--cream);
    padding: var(--s-4);
    margin: var(--s-4) 0;
    border-left: 2px solid var(--gold);
}
.booking-review h5 {
    font-size: var(--fs-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--warm-gray);
    margin-bottom: var(--s-3);
    font-family: var(--font-sans);
    font-weight: 400;
}
.booking-review__row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--s-3);
    padding: var(--s-2) 0;
    font-size: var(--fs-sm);
    border-bottom: 1px solid rgba(28, 25, 23, 0.06);
}
.booking-review__row:last-child { border-bottom: none; }
.booking-review__label {
    font-size: var(--fs-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--warm-gray);
}
.booking-review__value {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--ink);
}

/* ---------- Refined fee notice ---------- */
.fee-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
}
.fee-notice::before {
    content: '◆';
    color: var(--gold);
    font-size: 0.7rem;
    margin-top: 4px;
    flex-shrink: 0;
}
.fee-notice p { font-size: var(--fs-sm); line-height: 1.7; }

/* ---------- Custom checkbox / consent ---------- */
.consent {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    background: var(--cream);
    cursor: pointer;
    transition: background var(--fast);
    border: 1px solid transparent;
}
.consent:hover { border-color: var(--whisper); }
.consent input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid var(--warm-gray);
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
    position: relative;
    transition: all var(--fast);
}
.consent input[type="checkbox"]:checked {
    background: var(--ink);
    border-color: var(--ink);
}
.consent input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px; top: 1px;
    width: 5px; height: 10px;
    border: solid var(--gold);
    border-width: 0 1px 1px 0;
    transform: rotate(45deg);
}
.consent__text {
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--ink-soft);
}
.consent__text strong {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    color: var(--ink);
}

/* ---------- File upload (custom) ---------- */
.file-upload {
    display: block;
    padding: var(--s-4);
    border: 1px dashed var(--warm-gray);
    text-align: center;
    cursor: pointer;
    transition: all var(--fast);
    background: var(--ivory);
}
.file-upload:hover {
    border-color: var(--gold);
    background: rgba(184, 147, 106, 0.04);
}
.file-upload__icon {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 2rem;
    color: var(--gold-deep);
    display: block;
    margin-bottom: var(--s-2);
}
.file-upload__label {
    font-size: var(--fs-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--warm-gray);
    display: block;
}
.file-upload__hint {
    font-size: 0.7rem;
    color: var(--warm-gray);
    margin-top: var(--s-1);
    font-style: italic;
    font-family: var(--font-serif);
}
.file-upload input[type="file"] { display: none; }

/* ---------- Field row icons (date / phone) ---------- */
.field input[type="date"] {
    color: var(--ink);
    font-family: var(--font-sans);
}
.field input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.4) sepia(0.4) hue-rotate(355deg) saturate(2);
    cursor: pointer;
}

/* ---------- Form section labels (mini-heads) ---------- */
.form-section-label {
    font-size: var(--fs-xs);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin: var(--s-5) 0 var(--s-3);
    padding-bottom: var(--s-2);
    border-bottom: 1px solid var(--whisper);
    font-family: var(--font-sans);
    font-weight: 400;
}
.form-section-label:first-child { margin-top: 0; }

/* =========================================================================
   STEP 3 — UI STATES (empty / unavailable / sent / no results / etc.)
   ========================================================================= */

.empty-state {
    text-align: center;
    padding: var(--s-7) var(--s-5);
    max-width: 540px;
    margin: 0 auto;
}
.empty-state__icon {
    font-family: var(--font-script);
    font-style: italic;
    font-size: 5rem;
    color: var(--gold);
    line-height: 1;
    margin-bottom: var(--s-3);
    opacity: 0.7;
}
.empty-state__title {
    font-family: var(--font-serif);
    font-size: var(--fs-xl);
    font-weight: 300;
    margin-bottom: var(--s-2);
    line-height: 1.2;
}
.empty-state__title em { font-style: italic; }
.empty-state__text {
    color: var(--warm-gray);
    font-size: var(--fs-sm);
    line-height: 1.8;
    margin-bottom: var(--s-4);
}
.empty-state__actions {
    display: flex;
    gap: var(--s-3);
    justify-content: center;
    flex-wrap: wrap;
}

.empty-state--inline {
    padding: var(--s-5) var(--s-4);
    background: var(--cream);
    border: 1px dashed var(--whisper);
}
.empty-state--inline .empty-state__icon { font-size: 3rem; }

/* ---------- Inline notice / banner ---------- */
.notice {
    padding: var(--s-3) var(--s-4);
    background: var(--cream);
    border-left: 2px solid var(--gold);
    font-size: var(--fs-sm);
    margin-bottom: var(--s-4);
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
}
.notice__icon {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--gold-deep);
    font-size: 1.2rem;
    line-height: 1;
    margin-top: 2px;
    flex-shrink: 0;
}
.notice strong {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--ink);
}
.notice--error { border-left-color: #b85a4a; background: #faf3f1; }
.notice--error .notice__icon { color: #b85a4a; }
.notice--success { border-left-color: var(--gold-deep); }
.notice--unavailable { border-left-color: var(--warm-gray); background: rgba(139, 129, 117, 0.06); }
.notice--unavailable .notice__icon { color: var(--warm-gray); }

/* ---------- Toast (success ribbon) ---------- */
.toast {
    position: fixed;
    bottom: var(--s-4);
    left: 50%;
    transform: translate(-50%, calc(100% + 2rem));
    background: var(--ink);
    color: var(--ivory);
    padding: var(--s-3) var(--s-5);
    z-index: 1000;
    font-size: var(--fs-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    transition: transform var(--medium) var(--ease);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    gap: var(--s-3);
}
.toast.show { transform: translate(-50%, 0); }
.toast__mark {
    color: var(--gold);
    font-family: var(--font-serif);
    font-style: italic;
    text-transform: none;
    font-size: 1rem;
    letter-spacing: 0;
}

/* ---------- Modal variants for state messaging ---------- */
.modal__inner--lg { max-width: 640px; }
.modal__icon {
    font-family: var(--font-script);
    font-style: italic;
    font-size: 3rem;
    color: var(--gold);
    margin-bottom: var(--s-2);
    line-height: 1;
}

/* ---------- Refined size picker ---------- */
.size-picker__option.disabled {
    position: relative;
    background: var(--cream);
    color: var(--warm-gray);
}
.size-picker__option.disabled::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 70%;
    height: 1px;
    background: var(--warm-gray);
    transform: translate(-50%, -50%) rotate(-25deg);
}
.size-picker__notice {
    margin-top: var(--s-2);
    font-size: 0.7rem;
    color: var(--warm-gray);
    font-style: italic;
    font-family: var(--font-serif);
    letter-spacing: 0.05em;
}
.size-picker__notice--unavailable {
    margin-top: var(--s-3);
    padding: var(--s-3);
    background: var(--cream);
    border-left: 2px solid var(--gold);
    font-style: normal;
    font-family: var(--font-sans);
    color: var(--ink);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}
.size-picker__notice--unavailable strong {
    display: block;
    margin-bottom: var(--s-2);
    font-weight: 500;
    letter-spacing: 0.05em;
}
.size-picker__waitlist {
    display: flex;
    gap: var(--s-2);
    align-items: center;
    flex-wrap: wrap;
}
.size-picker__waitlist input[type="email"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--whisper);
    background: #fff;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    color: var(--ink);
}
.size-picker__waitlist input[type="email"]:focus {
    outline: none;
    border-color: var(--gold);
}
/* .size-picker__waitlist .btn rule removed (Phase 0 — legacy button). */

/* ---------- Draft saved chip ---------- */
.draft-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-1) var(--s-3);
    background: var(--cream);
    color: var(--gold-deep);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-family: var(--font-sans);
    border: 1px solid var(--whisper);
}
.draft-chip::before {
    content: '◆';
    font-size: 0.5rem;
    color: var(--gold);
}

/* =========================================================================
   STEP 4 — ADMIN CMS UPGRADES
   ========================================================================= */

/* Toolbar section refinements */
.cms-toolbar { gap: var(--s-3); }
.cms-toolbar__group {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    flex-wrap: wrap;
}
.cms-toolbar__divider {
    width: 1px;
    height: 24px;
    background: var(--whisper);
}

/* Sort select */
.cms-select {
    background: transparent;
    border: 1px solid var(--whisper);
    padding: var(--s-1) var(--s-3);
    font-size: var(--fs-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-family: var(--font-sans);
    color: var(--ink-soft);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--warm-gray) 50%),
                      linear-gradient(135deg, var(--warm-gray) 50%, transparent 50%);
    background-position: calc(100% - 14px) center, calc(100% - 9px) center;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    padding-right: var(--s-5);
}
.cms-select:hover { border-color: var(--gold); }
.cms-select:focus { outline: none; border-color: var(--gold-deep); }

/* Tile checkbox for bulk select */
.cms-tile {
    position: relative;
}
.cms-tile__check {
    position: absolute;
    top: var(--s-2); left: var(--s-2);
    z-index: 3;
    width: 22px; height: 22px;
    background: var(--ivory);
    border: 1px solid var(--ink);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: all var(--fast);
    opacity: 0;
}
.cms-tile:hover .cms-tile__check,
.cms-tile.selected .cms-tile__check { opacity: 1; }
.cms-tile__check:checked,
.cms-tile.selected .cms-tile__check {
    background: var(--ink);
}
.cms-tile__check:checked::after,
.cms-tile.selected .cms-tile__check::after {
    content: '';
    position: absolute;
    left: 7px; top: 2px;
    width: 5px; height: 11px;
    border: solid var(--gold);
    border-width: 0 1px 1px 0;
    transform: rotate(45deg);
}
.cms-tile.selected { border-color: var(--gold); }
.cms-tile.selected .cms-tile__image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(184, 147, 106, 0.18);
    z-index: 2;
}

/* Bulk-actions bar */
.cms-bulk {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    background: var(--ink);
    color: var(--ivory);
    margin-bottom: var(--s-3);
    font-size: var(--fs-sm);
    animation: bulk-slide 0.4s var(--ease);
}
.cms-bulk.show { display: flex; }
@keyframes bulk-slide {
    from { transform: translateY(-8px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.cms-bulk__count {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--fs-md);
}
.cms-bulk__count strong {
    color: var(--gold);
    font-weight: 500;
}
.cms-bulk__actions {
    display: flex;
    gap: var(--s-2);
}
.cms-bulk__action {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: var(--ivory);
    padding: var(--s-1) var(--s-3);
    font-size: var(--fs-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--fast);
}
.cms-bulk__action:hover { border-color: var(--gold); color: var(--gold); }
.cms-bulk__action--danger:hover { border-color: #b85a4a; color: #b85a4a; }

/* Empty state inside CMS grid */
.cms-empty {
    grid-column: 1 / -1;
    padding: var(--s-7) var(--s-4);
    text-align: center;
}
.cms-empty .empty-state__icon { font-size: 4rem; }

/* =========================================================================
   STEP 4 — DRESS EDIT DRAWER (Modal)
   ========================================================================= */
.drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 540px;
    max-width: 100%;
    background: var(--ivory);
    z-index: 1000;
    transform: translateX(100%);
    transition: transform var(--medium) var(--ease);
    overflow-y: auto;
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.18);
}
.drawer.open { transform: translateX(0); }
.drawer__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(28, 25, 23, 0.6);
    z-index: 999;
    display: none;
    animation: fade 0.4s;
}
.drawer__backdrop.show { display: block; }
.drawer__header {
    padding: var(--s-4);
    border-bottom: 1px solid var(--whisper);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--cream);
    position: sticky;
    top: 0;
    z-index: 2;
}
.drawer__header h3 { font-size: var(--fs-xl); margin: 0; }
.drawer__close {
    width: 36px; height: 36px;
    border: 1px solid var(--whisper);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.4rem;
    color: var(--warm-gray);
    cursor: pointer;
    transition: all var(--fast);
}
.drawer__close:hover { border-color: var(--ink); color: var(--ink); }
.drawer__body { padding: var(--s-5); }
.drawer__footer {
    padding: var(--s-4);
    border-top: 1px solid var(--whisper);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--cream);
    position: sticky;
    bottom: 0;
}

/* Image upload preview */
.image-upload {
    aspect-ratio: 3/4;
    background: var(--cream);
    border: 1px dashed var(--warm-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--s-4);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.image-upload img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.image-upload__overlay {
    position: absolute;
    inset: 0;
    background: rgba(28, 25, 23, 0.55);
    color: var(--ivory);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--s-2);
    opacity: 0;
    transition: opacity var(--fast);
}
.image-upload:hover .image-upload__overlay { opacity: 1; }
.image-upload__overlay span {
    font-size: var(--fs-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.image-upload__placeholder {
    text-align: center;
    color: var(--warm-gray);
}
.image-upload__placeholder span {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 2rem;
    color: var(--gold-deep);
    display: block;
    margin-bottom: var(--s-2);
}

/* Toggle switch (publish) */
.toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-3) 0;
    border-bottom: 1px solid var(--whisper);
}
.toggle__label {
    font-size: var(--fs-sm);
}
.toggle__label strong {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    display: block;
    margin-bottom: 2px;
}
.toggle__label small {
    font-size: var(--fs-xs);
    color: var(--warm-gray);
}
.toggle__switch {
    position: relative;
    width: 44px; height: 22px;
    background: var(--whisper);
    cursor: pointer;
    transition: background var(--fast);
    flex-shrink: 0;
}
.toggle__switch::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    background: var(--ivory);
    transition: transform var(--fast);
}
.toggle input { display: none; }
.toggle input:checked + .toggle__switch { background: var(--gold); }
.toggle input:checked + .toggle__switch::after { transform: translateX(22px); }

/* Tags */
.tag-row {
    display: flex;
    gap: var(--s-2);
    flex-wrap: wrap;
    margin-top: var(--s-2);
}
.tag {
    padding: 4px 12px;
    background: var(--cream);
    color: var(--ink-soft);
    font-size: var(--fs-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border: 1px solid var(--whisper);
}
.tag--gold { background: rgba(184, 147, 106, 0.12); color: var(--gold-deep); border-color: var(--gold); }
.tag--ink { background: var(--ink); color: var(--ivory); border-color: var(--ink); }

/* ---------- Richer CMS tile info (line, price, delivery, status) ---------- */
.cms-tile__info {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: var(--s-3);
}
.cms-tile__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s-2);
}
.cms-tile__line {
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-deep);
}
.cms-tile__price {
    font-size: 0.72rem;
    color: var(--ink);
    letter-spacing: 0.04em;
}
.cms-tile__delivery {
    font-size: 0.68rem;
    color: var(--warm-gray);
    font-family: var(--font-serif);
    font-style: italic;
}
.cms-tile__flags {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 4px;
}
.cms-tile__flag {
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 2px 8px;
    border: 1px solid var(--whisper);
    color: var(--warm-gray);
}
.cms-tile__flag--live {
    background: rgba(184, 147, 106, 0.1);
    color: var(--gold-deep);
    border-color: var(--gold);
}
.cms-tile__flag--draft {
    background: var(--cream);
    color: var(--ink-soft);
}
.cms-tile__flag--dot::before {
    content: '●';
    margin-right: 4px;
    font-size: 0.5rem;
}

/* ---------- Select-all (toolbar) ---------- */
.cms-selectall {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
    cursor: pointer;
    user-select: none;
}
.cms-selectall input {
    width: 16px; height: 16px;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--ink);
    background: var(--ivory);
    cursor: pointer;
    position: relative;
    transition: all var(--fast);
}
.cms-selectall input:checked { background: var(--ink); }
.cms-selectall input:checked::after {
    content: '';
    position: absolute;
    left: 4px; top: 0;
    width: 5px; height: 10px;
    border: solid var(--gold);
    border-width: 0 1px 1px 0;
    transform: rotate(45deg);
}

/* Newsletter band — refined */
.newsletter-band {
    background: var(--cream);
    padding: var(--s-8) 0;
    text-align: center;
    position: relative;
}
.newsletter-band::before,
.newsletter-band::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 60px;
    height: 1px;
    background: var(--gold);
    transform: translateX(-50%);
}
.newsletter-band::before { top: var(--s-5); }
.newsletter-band::after { bottom: var(--s-5); }
.newsletter-band__inner {
    max-width: 560px;
    margin: 0 auto;
    padding: 0 var(--s-4);
}
.newsletter-band h2 {
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    margin: var(--s-3) 0;
}
.newsletter-band p {
    color: var(--warm-gray);
    margin-bottom: var(--s-4);
    line-height: 1.8;
}
.newsletter-form {
    display: flex;
    gap: 0;
    max-width: 460px;
    margin: var(--s-4) auto 0;
    border-bottom: 1px solid var(--ink);
}
.newsletter-form input {
    flex: 1;
    background: transparent;
    border: none;
    padding: var(--s-2) 0;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    color: var(--ink);
    outline: none;
    letter-spacing: 0.02em;
}
.newsletter-form input::placeholder {
    color: var(--warm-gray);
    font-style: italic;
    font-family: var(--font-serif);
}
.newsletter-form button {
    background: transparent;
    border: none;
    font-size: var(--fs-xs);
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ink);
    cursor: pointer;
    padding: var(--s-2) var(--s-3);
    font-family: var(--font-sans);
    transition: color var(--fast);
}
.newsletter-form button:hover { color: var(--gold-deep); }
.newsletter-band small {
    display: block;
    margin-top: var(--s-3);
    font-size: 0.68rem;
    color: var(--warm-gray);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-family: var(--font-serif);
    font-style: italic;
}

@media (max-width: 900px) {
    .newsletter-form { flex-direction: column; gap: var(--s-3); border-bottom: none; }
    .newsletter-form input { border-bottom: 1px solid var(--ink); text-align: center; }
    .newsletter-form button {
        border: 1px solid var(--ink);
        padding: var(--s-2) var(--s-4);
    }
}

/* =========================================================================
   STEP 6 — HOMEPAGE CONVERSION
   ========================================================================= */

/* Hero actions row (stronger CTA clarity) */
.hero__actions {
    display: flex;
    gap: var(--s-5);
    margin-top: var(--s-4);
    flex-wrap: wrap;
    align-items: center;
}
/* .hero__actions .btn / .btn--solid rules removed (Phase 0 — legacy button).
   Hero CTAs now render as Phase 0 primitives (.primary-link). */

/* Trust strip — atelier language, not commerce */
.trust-strip {
    padding: var(--s-5) 0;
    border-top: 1px solid var(--whisper);
    border-bottom: 1px solid var(--whisper);
    background: var(--ivory);
}
.trust-strip__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-4);
    align-items: center;
    text-align: center;
}
.trust-strip__item {
    position: relative;
    padding: 0 var(--s-3);
}
.trust-strip__item + .trust-strip__item::before {
    content: '';
    position: absolute;
    left: 0; top: 20%;
    width: 1px;
    height: 60%;
    background: var(--whisper);
}
.trust-strip__icon {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.8rem;
    color: var(--gold);
    line-height: 1;
    margin-bottom: var(--s-2);
}
.trust-strip__label {
    font-size: var(--fs-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 6px;
}
.trust-strip__sub {
    font-size: 0.72rem;
    color: var(--warm-gray);
    font-family: var(--font-serif);
    font-style: italic;
    line-height: 1.6;
}

/* Portfolio teaser strip — full-bleed editorial tiles */
.portfolio-teaser {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    margin: 0;
}
.portfolio-teaser__tile {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--beige);
}
.portfolio-teaser__tile img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1.4s var(--ease), filter var(--medium);
    filter: grayscale(0.2);
}
.portfolio-teaser__tile:hover img {
    transform: scale(1.06);
    filter: grayscale(0);
}
.portfolio-teaser__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(28, 25, 23, 0.7) 100%);
    display: flex;
    align-items: flex-end;
    padding: var(--s-3);
    color: var(--ivory);
}
.portfolio-teaser__label {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--fs-md);
    line-height: 1.2;
}
.portfolio-teaser__sub {
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    opacity: 0.8;
    margin-top: 4px;
    font-style: normal;
    font-family: var(--font-sans);
}

/* Private viewing highlight band — quiet invitation */
.viewing-invite {
    padding: var(--s-8) 0;
    background: var(--ink);
    color: var(--ivory);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.viewing-invite__inner {
    position: relative;
    z-index: 2;
    max-width: 640px;
    margin: 0 auto;
    padding: 0 var(--s-4);
}
.viewing-invite__mark {
    font-family: var(--font-script);
    font-style: italic;
    font-size: 3rem;
    color: var(--gold);
    line-height: 1;
    margin-bottom: var(--s-3);
}
.viewing-invite h2 {
    color: var(--ivory);
    margin-bottom: var(--s-3);
}
.viewing-invite p {
    color: var(--beige);
    margin-bottom: var(--s-4);
    line-height: 1.8;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--fs-md);
}
.viewing-invite__details {
    display: flex;
    gap: var(--s-5);
    justify-content: center;
    flex-wrap: wrap;
    font-size: var(--fs-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(247, 243, 236, 0.7);
    margin-bottom: var(--s-4);
}
.viewing-invite__details span::before {
    content: '◆ ';
    color: var(--gold);
    font-size: 0.6em;
    margin-right: 4px;
}

@media (max-width: 900px) {
    .portfolio-teaser { grid-template-columns: repeat(2, 1fr); }
    /* .hero__actions .btn mobile rule removed (Phase 0 — legacy button). */
}

/* =========================================================================
   PRODUCTION POLISH — scroll-to-top, micro-interactions, accessibility
   ========================================================================= */

/* ---------- Scroll-to-top — minimal editorial mark ---------- */
.to-top {
    position: fixed;
    right: clamp(1.4rem, 2.4vw, 2.2rem);
    bottom: clamp(1.4rem, 2.4vw, 2.2rem);
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.4rem;
    background: transparent;
    border: none;
    color: var(--ink);
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 600ms var(--ease),
                transform 600ms var(--ease),
                color 300ms ease;
}
.to-top.is-visible {
    opacity: 0.7;
    transform: translateY(0);
    pointer-events: auto;
}
.to-top:hover {
    opacity: 1;
    color: var(--gold-deep);
}
.to-top__line {
    width: 1px;
    height: 28px;
    background: currentColor;
    transition: height 400ms var(--ease);
}
.to-top:hover .to-top__line { height: 38px; }
.to-top__label {
    font-size: 0.58rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-family: var(--font-sans);
    color: currentColor;
}
/* When the page background is dark (e.g. atop dark sections) flip color */
.to-top--on-dark { color: var(--ivory); }

@media (max-width: 720px) {
    .to-top {
        right: var(--s-2);
        bottom: var(--s-2);
    }
    .to-top__line { height: 22px; }
    .to-top__label { font-size: 0.52rem; }
}

/* ---------- Subtle micro-interactions polish ---------- */
/* Legacy .btn / .btn--* selectors removed (Phase 0). Nav CTA keeps its tap
   feedback; the primitive classes carry their own transitions in
   css/primitives.css. */
.nav__cta {
    transition: background 350ms var(--ease),
                color 350ms var(--ease),
                border-color 350ms var(--ease),
                transform 500ms var(--ease),
                box-shadow 500ms var(--ease);
}
.nav__cta:active { transform: translateY(1px); }

a { transition: color 280ms ease, opacity 280ms ease; }

/* Editorial focus ring — keyboard accessibility without harming aesthetics */
:focus-visible {
    outline: 1px solid var(--gold);
    outline-offset: 3px;
    border-radius: 1px;
}
.nav__cta:focus-visible,
.to-top:focus-visible {
    outline-offset: 4px;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
}

/* Selection — luxury gold whisper */
::selection {
    background: rgba(184, 147, 106, 0.25);
    color: var(--ink);
}

/* Lazy image fade-in (no layout shift) */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 800ms var(--ease);
}
img[loading="lazy"].is-loaded,
img[loading="lazy"][data-loaded] {
    opacity: 1;
}

/* =========================================================================
   PORTFOLIO — Three worlds (Wedding · Soirée · Private Commissions)
   ========================================================================= */

.portfolio-worlds {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    margin-top: var(--s-5);
    flex-wrap: wrap;
}
.portfolio-world {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--s-2) var(--s-4);
    text-align: center;
    color: var(--ink);
    transition: transform 600ms var(--ease),
                opacity 400ms ease;
    min-width: 180px;
}
.portfolio-world:hover {
    transform: translateY(-3px);
}
.portfolio-world__roman {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.3rem;
    color: var(--gold-deep);
    line-height: 1;
}
.portfolio-world__name {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    font-weight: 400;
    margin-top: 4px;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: border-color 400ms var(--ease);
}
.portfolio-world:hover .portfolio-world__name {
    border-bottom-color: var(--gold);
}
.portfolio-world__sub {
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--warm-gray);
    margin-top: 4px;
}
.portfolio-world__divider {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.4rem;
    color: var(--gold);
    opacity: 0.5;
}

.portfolio-chapter {
    padding: var(--s-7) 0;
    position: relative;
}
.portfolio-chapter--wedding { background: var(--ivory); }
.portfolio-chapter--soiree { background: var(--cream); }
.portfolio-chapter--private-commissions { background: var(--ink); color: var(--ivory); }

.portfolio-chapter--private-commissions .portfolio-chapter__intro h2,
.portfolio-chapter--private-commissions .lead { color: var(--ivory); }
.portfolio-chapter--private-commissions .eyebrow,
.portfolio-chapter--private-commissions .portfolio-chapter__roman { color: var(--gold); }

.portfolio-chapter__intro {
    text-align: center;
    max-width: 660px;
    margin: 0 auto var(--s-6);
}
.portfolio-chapter__roman {
    display: block;
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--gold-deep);
    letter-spacing: 0.3em;
    font-size: 0.85rem;
    margin-bottom: var(--s-2);
}
.portfolio-chapter__intro h2 {
    font-size: var(--fs-2xl);
    line-height: 1.05;
    margin-bottom: var(--s-3);
}

/* Soirée stories use the existing dress-story layout but with cream backdrop */
.dress-story--soiree { /* inherits dress-story */ }

@media (max-width: 760px) {
    .portfolio-worlds { flex-direction: column; }
    .portfolio-world__divider { display: none; }
    .portfolio-world { width: 100%; max-width: 280px; }
    .portfolio-chapter { padding: var(--s-6) 0; }
}

/* =========================================================================
   RTW PATHS — Corsets vs Soirée separation
   ========================================================================= */

.rtw-paths {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-4);
    margin-top: var(--s-5);
    flex-wrap: wrap;
}
.rtw-path {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--s-3) var(--s-4);
    text-align: center;
    color: var(--ink);
    border: 1px solid var(--whisper);
    background: var(--ivory);
    transition: border-color 400ms var(--ease),
                background 400ms var(--ease),
                transform 600ms var(--ease);
    min-width: 220px;
}
.rtw-path:hover {
    border-color: var(--gold);
    background: var(--cream);
    transform: translateY(-2px);
}
.rtw-path__roman {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.4rem;
    color: var(--gold-deep);
    line-height: 1;
}
.rtw-path__name {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 400;
    margin-top: 6px;
}
.rtw-path__sub {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--warm-gray);
    margin-top: 4px;
}
.rtw-path__divider {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.5rem;
    color: var(--gold);
    opacity: 0.6;
}

.rtw-promise {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-4);
    margin-bottom: var(--s-5);
    padding: var(--s-4) 0;
    border-top: 1px solid var(--whisper);
    border-bottom: 1px solid var(--whisper);
}
.rtw-promise__item {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: var(--s-2);
    align-items: start;
}
.rtw-promise__roman {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.3rem;
    color: var(--gold-deep);
    line-height: 1;
    text-align: center;
}
.rtw-promise__item h5 {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 400;
    margin-bottom: 4px;
    color: var(--ink);
}
.rtw-promise__item p {
    font-size: 0.85rem;
    color: var(--warm-gray);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 760px) {
    .rtw-promise { grid-template-columns: 1fr; gap: var(--s-3); }
    .rtw-paths { flex-direction: column; }
    .rtw-path__divider { display: none; }
    .rtw-path { width: 100%; max-width: 320px; }
}

/* =========================================================================
   MAISON — Founder · Showroom · House
   ========================================================================= */

.maison-anchors {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    margin-top: var(--s-5);
    flex-wrap: wrap;
}
.maison-anchor {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--s-2) var(--s-4);
    text-align: center;
    color: var(--ink);
    transition: transform 600ms var(--ease);
    min-width: 180px;
}
.maison-anchor:hover {
    transform: translateY(-3px);
}
.maison-anchor__roman {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.3rem;
    color: var(--gold-deep);
    line-height: 1;
}
.maison-anchor__name {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    font-weight: 400;
    margin-top: 4px;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: border-color 400ms var(--ease);
}
.maison-anchor:hover .maison-anchor__name {
    border-bottom-color: var(--gold);
}
.maison-anchor__sub {
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--warm-gray);
    margin-top: 4px;
}
.maison-anchor__divider {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.4rem;
    color: var(--gold);
    opacity: 0.5;
}

.maison-chapter {
    position: relative;
}
.maison-chapter--founder { background: var(--ivory); }
.maison-chapter--hq { background: var(--ivory); }
.maison-chapter--place { background: var(--cream); }

.maison-chapter__intro {
    text-align: center;
    max-width: 660px;
    margin: 0 auto var(--s-5);
}
.maison-chapter__roman {
    display: block;
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--gold-deep);
    letter-spacing: 0.3em;
    font-size: 0.85rem;
    margin-bottom: var(--s-2);
}
.maison-chapter__intro h2 {
    font-size: var(--fs-2xl);
    line-height: 1.05;
    margin-bottom: var(--s-3);
}

/* ---- Founder quote ---- */
.founder-quote {
    margin-top: var(--s-4);
    padding: var(--s-3) var(--s-4);
    border-left: 2px solid var(--gold);
    background: var(--cream);
}
.founder-quote p {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.55;
    color: var(--ink);
    margin: 0 0 var(--s-2) 0;
}
.founder-quote cite {
    font-style: normal;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--warm-gray);
}

/* ---- Showroom address card ---- */
.hq-card {
    margin-top: var(--s-4);
    padding: var(--s-3) var(--s-4);
    border-top: 1px solid var(--whisper);
    border-bottom: 1px solid var(--whisper);
    background: var(--ivory);
}
.hq-card__row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: var(--s-2);
    padding: 0.6rem 0;
    border-bottom: 1px dashed var(--whisper);
    align-items: baseline;
}
.hq-card__row:last-child {
    border-bottom: none;
}
.hq-card__label {
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-deep);
}
.hq-card__value {
    font-family: var(--font-serif);
    font-size: 1rem;
    color: var(--ink);
    font-style: italic;
}

/* ---- The Place — three-image grid + essay ---- */
.place-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-3);
}
.place-grid__item {
    margin: 0;
    display: flex;
    flex-direction: column;
}
.place-grid__item img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    display: block;
}
.place-grid__item figcaption {
    margin-top: var(--s-2);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--warm-gray);
    line-height: 1.5;
    text-align: center;
    padding: 0 var(--s-2);
}

.place-essay {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}
.place-essay p {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--ink);
    margin-bottom: var(--s-3);
}
.place-essay__sign {
    font-size: 0.7rem !important;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-deep) !important;
    font-family: var(--font-sans) !important;
    font-style: normal !important;
    margin-top: var(--s-3);
}

@media (max-width: 760px) {
    .maison-anchors { flex-direction: column; }
    .maison-anchor__divider { display: none; }
    .maison-anchor { width: 100%; max-width: 280px; }
    .place-grid { grid-template-columns: 1fr; }
    .place-grid__item img { height: 280px; }
    .hq-card__row { grid-template-columns: 1fr; gap: 4px; }
}

/* =========================================================================
   COUTURE COLLECTIONS — Bridal & Soirée
   ========================================================================= */

.couture-collections {
    background: var(--ivory);
}

.collection-block {
    margin-top: var(--s-5);
}
.collection-block__header {
    text-align: center;
    max-width: 660px;
    margin: 0 auto var(--s-5);
}
.collection-block__roman {
    display: block;
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--gold-deep);
    font-size: 1.6rem;
    line-height: 1;
    margin-bottom: var(--s-2);
}
.collection-block__header h3 {
    font-family: var(--font-serif);
    font-size: var(--fs-2xl);
    font-weight: 400;
    line-height: 1.05;
    margin: var(--s-2) 0 var(--s-2);
}
.collection-block__header p {
    color: var(--warm-gray);
    font-style: italic;
    font-family: var(--font-serif);
    font-size: 1.05rem;
}

.collection-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-4);
}
.collection-card {
    display: flex;
    flex-direction: column;
    background: var(--ivory);
    border: 1px solid var(--whisper);
    color: var(--ink);
    transition: transform 600ms var(--ease),
                border-color 400ms var(--ease),
                box-shadow 600ms var(--ease);
}
.collection-card:hover {
    transform: translateY(-4px);
    border-color: var(--gold);
    box-shadow: 0 30px 60px -30px rgba(28, 25, 23, 0.18);
}
.collection-card__image {
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}
.collection-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1200ms var(--ease);
}
.collection-card:hover .collection-card__image img {
    transform: scale(1.04);
}
.collection-card__body {
    padding: var(--s-3) var(--s-3) var(--s-4);
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
.collection-card__year {
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-deep);
}
.collection-card__body h4 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.1;
    margin: 4px 0 6px;
    color: var(--ink);
}
.collection-card__body p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--warm-gray);
    margin-bottom: var(--s-2);
}
.collection-card__cta {
    margin-top: auto;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    border-top: 1px solid var(--whisper);
    padding-top: var(--s-2);
    transition: color 400ms var(--ease);
}
.collection-card:hover .collection-card__cta {
    color: var(--gold-deep);
}

@media (max-width: 960px) {
    .collection-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .collection-list { grid-template-columns: 1fr; }
}

/* =========================================================================
   COUTURE 6-STEP FLOW
   ========================================================================= */
.couture-process {
    padding-bottom: var(--s-7);
}
.couture-flow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-4);
    margin-top: var(--s-6);
    counter-reset: couture;
}
.couture-flow__step {
    background: var(--ivory);
    border: 1px solid var(--whisper);
    padding: var(--s-4);
    position: relative;
    transition: transform 600ms var(--ease),
                border-color 500ms var(--ease),
                box-shadow 600ms var(--ease);
}
.couture-flow__step::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, var(--gold), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 700ms var(--ease);
}
.couture-flow__step:hover {
    transform: translateY(-4px);
    border-color: rgba(184, 147, 106, 0.35);
    box-shadow: 0 40px 80px -40px rgba(28, 25, 23, 0.18);
}
.couture-flow__step:hover::before {
    transform: scaleX(1);
}
.couture-flow__num {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 2.8rem;
    line-height: 1;
    color: var(--gold-deep);
    margin-bottom: var(--s-3);
    font-weight: 300;
}
.couture-flow__step h4 {
    font-size: 1.5rem;
    margin-bottom: var(--s-2);
    color: var(--ink);
}
.couture-flow__step p {
    font-size: 0.92rem;
    line-height: 1.75;
    color: var(--ink-soft);
}
.couture-flow__step p strong {
    color: var(--ink);
    font-weight: 500;
}

/* Fee callout */
.couture-fee-callout {
    margin-top: var(--s-6);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: var(--s-5) var(--s-4);
    background: var(--cream);
    border: 1px solid rgba(184, 147, 106, 0.3);
    border-top-width: 3px;
    border-top-color: var(--gold-deep);
    position: relative;
}
.couture-fee-callout h4 {
    font-size: 1.8rem;
    color: var(--ink);
}
.couture-fee-callout p {
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--ink-soft);
}
.couture-fee-callout p strong {
    color: var(--gold-deep);
    font-weight: 500;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.05rem;
}

.eyebrow.gold {
    color: var(--gold-deep);
}

@media (max-width: 960px) {
    .couture-flow { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .couture-flow { grid-template-columns: 1fr; }
}

/* =========================================================================
   PORTFOLIO — Clean grid + story modal
   ========================================================================= */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-4) var(--s-3);
    margin-top: var(--s-5);
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}
.portfolio-grid--3 {
    grid-template-columns: repeat(3, 1fr);
    max-width: 920px;
}
.portfolio-tile {
    display: flex;
    flex-direction: column;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    color: var(--ink);
    transition: transform 600ms var(--ease);
}
.portfolio-tile__image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--cream);
    margin-bottom: 10px;
    position: relative;
}
.portfolio-tile__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 60%, rgba(28, 25, 23, 0.25));
    opacity: 0;
    transition: opacity 600ms var(--ease);
    pointer-events: none;
}
.portfolio-tile__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1400ms var(--ease);
}
.portfolio-tile:hover .portfolio-tile__image img {
    transform: scale(1.04);
}
.portfolio-tile:hover .portfolio-tile__image::after {
    opacity: 1;
}
.portfolio-tile__name {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    line-height: 1.22;
    padding: 2px 0 0;
    color: var(--ink);
}
.portfolio-tile__view {
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--warm-gray);
    padding-top: 3px;
    transition: color 500ms var(--ease);
}
.portfolio-tile:hover .portfolio-tile__view {
    color: var(--gold-deep);
}

/* Story modal */
.portfolio-modal {
    position: fixed;
    inset: 0;
    background: rgba(28, 25, 23, 0.78);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    transition: opacity 500ms var(--ease),
                visibility 500ms var(--ease);
    padding: var(--s-3);
}
.portfolio-modal.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.portfolio-modal__close {
    position: absolute;
    top: var(--s-3);
    right: var(--s-3);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(247, 243, 236, 0.92);
    color: var(--ink);
    font-size: 1.6rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 400ms var(--ease),
                transform 400ms var(--ease);
    z-index: 2;
}
.portfolio-modal__close:hover {
    background: var(--ivory);
    transform: rotate(90deg);
}
.portfolio-modal__inner {
    background: var(--ivory);
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1080px;
    width: 100%;
    max-height: 92vh;
    overflow: hidden;
    transform: translateY(20px) scale(0.98);
    opacity: 0;
    transition: transform 700ms var(--ease),
                opacity 600ms var(--ease);
}
.portfolio-modal.open .portfolio-modal__inner {
    transform: translateY(0) scale(1);
    opacity: 1;
    transition-delay: 100ms;
}
.portfolio-modal__image {
    overflow: hidden;
    background: var(--cream);
    max-height: 92vh;
}
.portfolio-modal__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.portfolio-modal__text {
    padding: var(--s-5) var(--s-5);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.portfolio-modal__text h2 {
    font-size: clamp(2rem, 3.4vw, 3rem);
    margin: 1rem 0 1.25rem;
}
.portfolio-modal__text .lead {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.08rem;
    line-height: 1.75;
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--whisper);
    margin-bottom: var(--s-3);
}
.portfolio-modal__meta {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    margin-bottom: var(--s-3);
}
.portfolio-modal__meta-row {
    padding: var(--s-1) 0;
    border-bottom: 1px solid var(--whisper);
}
.portfolio-modal__meta-row:last-child {
    border-bottom: none;
}
.portfolio-modal__label {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--warm-gray);
    margin-bottom: 0.4rem;
}
.portfolio-modal__meta-row p {
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--ink-soft);
}
#pm-price-row p {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--gold-deep);
    font-size: 1.05rem;
}
.portfolio-modal__mood {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--gold-deep);
    padding: var(--s-3) 0;
    border-top: 1px solid var(--whisper);
    border-bottom: 1px solid var(--whisper);
    margin-bottom: var(--s-3);
    text-align: center;
}
.portfolio-modal__actions {
    margin-top: auto;
    padding-top: var(--s-3);
}

@media (max-width: 960px) {
    .portfolio-grid,
    .portfolio-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .portfolio-modal__inner { grid-template-columns: 1fr; max-height: 96vh; overflow-y: auto; }
    .portfolio-modal__image { max-height: 40vh; }
    .portfolio-modal__text { padding: var(--s-4) var(--s-3); }
}
@media (max-width: 600px) {
    .portfolio-grid,
    .portfolio-grid--3 { grid-template-columns: 1fr; }
    .portfolio-tile__name { font-size: 1.4rem; }
}

/* =========================================================================
   ACCOUNT — Log in / Register / Profile / Orders / Appointments
   ========================================================================= */

/* Auth (guest) */
.auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-5);
    max-width: 960px;
    margin: 0 auto;
}
.auth-card {
    background: var(--ivory);
    border: 1px solid var(--whisper);
    padding: var(--s-5) var(--s-4);
    display: flex;
    flex-direction: column;
    transition: border-color 500ms var(--ease),
                box-shadow 500ms var(--ease);
}
.auth-card:hover {
    border-color: rgba(184, 147, 106, 0.35);
    box-shadow: 0 40px 80px -50px rgba(28, 25, 23, 0.25);
}
.auth-card--accent {
    background: var(--cream);
}
.auth-card h2 {
    font-size: clamp(1.8rem, 2.4vw, 2.4rem);
}
.auth-card__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--s-3);
    font-size: 0.82rem;
}
.auth-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--warm-gray);
    cursor: pointer;
    font-size: 0.82rem;
    line-height: 1.4;
}
.auth-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border: 1px solid var(--warm-gray);
    background: transparent;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: border-color 300ms var(--ease),
                background 300ms var(--ease);
}
.auth-check input[type="checkbox"]:checked {
    background: var(--gold-deep);
    border-color: var(--gold-deep);
}
.auth-check input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 0px;
    width: 4px;
    height: 8px;
    border: solid var(--ivory);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}
.auth-link {
    color: var(--gold-deep);
    letter-spacing: 0.05em;
    position: relative;
}
.auth-link:hover {
    color: var(--ink);
}
.auth-card__foot {
    margin-top: var(--s-3);
    padding-top: var(--s-3);
    border-top: 1px solid var(--whisper);
    font-size: 0.76rem;
    color: var(--warm-gray);
    line-height: 1.6;
    text-align: center;
}

/* ---------- Compressed account hero (member dashboard) ---------- */
.page-hero.account-hero {
    padding: calc(var(--s-7) + 40px) var(--s-5) var(--s-4);
    text-align: left;
    background: var(--cream);
    border-bottom: 1px solid var(--whisper);
}
.account-hero__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
    align-items: end;
    gap: var(--s-5);
}
.account-hero__intro .eyebrow { margin-bottom: 0.5rem; }
.account-hero.page-hero h1 {
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    line-height: 1.05;
    margin: 0;
}
.account-hero__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-3);
    border-left: 1px solid var(--whisper);
    padding-left: var(--s-4);
}
.account-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 var(--s-1);
}
.account-stat__num {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    line-height: 1.1;
    color: var(--gold-deep);
    letter-spacing: 0.01em;
}
.account-stat__label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--warm-gray);
    line-height: 1.3;
}
@media (max-width: 1024px) {
    .account-hero__inner { grid-template-columns: 1fr; gap: var(--s-4); }
    .account-hero__stats { border-left: none; padding-left: 0; border-top: 1px solid var(--whisper); padding-top: var(--s-3); }
}
@media (max-width: 640px) {
    .account-hero__stats { grid-template-columns: repeat(2, 1fr); gap: var(--s-3) var(--s-2); }
    .page-hero.account-hero { padding: calc(var(--s-7) + 20px) var(--s-4) var(--s-4); }
}

/* Member layout */
.account-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--s-5);
    align-items: start;
}

/* Sidebar */
.account-nav {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    background: var(--ivory);
    border: 1px solid var(--whisper);
    padding: var(--s-4) var(--s-3);
    position: sticky;
    top: calc(var(--s-7) + var(--s-2));
}
.account-nav__head {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding-bottom: var(--s-3);
    margin-bottom: var(--s-2);
    border-bottom: 1px solid var(--whisper);
}
.account-nav__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--gold-deep);
    color: var(--ivory);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.account-nav__name {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: var(--ink);
    line-height: 1.1;
}
.account-nav__meta {
    font-size: 0.72rem;
    color: var(--warm-gray);
    margin-top: 0.25rem;
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
    white-space: nowrap;
}
.account-nav__item {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-2);
    text-align: left;
    background: transparent;
    color: var(--ink-soft);
    border: none;
    border-left: 2px solid transparent;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    transition: color 400ms var(--ease),
                border-color 400ms var(--ease),
                background 400ms var(--ease);
    cursor: pointer;
}
.account-nav__item:hover {
    color: var(--gold-deep);
}
.account-nav__item.active {
    color: var(--ink);
    border-left-color: var(--gold-deep);
    background: rgba(184, 147, 106, 0.06);
}
.account-nav__roman {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--gold-deep);
    font-size: 0.95rem;
    min-width: 16px;
}
.account-nav__divider {
    height: 1px;
    background: var(--whisper);
    margin: var(--s-2) 0;
}
.account-nav__item--muted {
    color: var(--warm-gray);
    font-size: 0.78rem;
}
.account-nav__item--muted:hover {
    color: var(--ink);
}

/* Main panels */
.account-main {
    min-width: 0;
}
.account-panel {
    display: none;
    animation: panelFade 600ms var(--ease);
}
.account-panel.active {
    display: block;
}
@keyframes panelFade {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.account-panel__head {
    margin-bottom: var(--s-4);
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--whisper);
    position: relative;
}
.account-panel__head::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 48px;
    height: 1px;
    background: var(--gold-deep);
}
.account-panel__head .eyebrow {
    color: var(--gold-deep);
    font-size: 0.65rem;
    letter-spacing: 0.28em;
}
.account-panel__head h2 {
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    line-height: 1.1;
    margin: 0.5rem 0 0.6rem;
}
.account-panel__head p {
    font-size: 0.86rem;
    line-height: 1.55;
}

/* Profile form cards */
.profile-form {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}
.profile-card {
    background: var(--ivory);
    border: 1px solid var(--whisper);
    padding: var(--s-4);
}
.profile-card__title {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-weight: 400;
    margin-bottom: var(--s-3);
    color: var(--ink);
}
.profile-card__unit {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--warm-gray);
    font-family: var(--font-sans);
    font-style: normal;
}
.field-group--3 {
    grid-template-columns: 1fr 1fr 1fr;
}
.profile-form__actions {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding-top: var(--s-2);
}
.profile-form__saved {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--gold-deep);
    font-size: 0.95rem;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.profile-form__saved.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ----- Measurements (view-only, atelier-maintained) ----- */
.profile-card--measurements {
    background: linear-gradient(180deg, var(--ivory) 0%, var(--cream) 100%);
}
.profile-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--s-3);
    margin-bottom: var(--s-3);
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--whisper);
    flex-wrap: wrap;
}
.profile-card__sub {
    font-size: 0.85rem;
    color: var(--warm-gray);
    margin-top: 0.4rem;
    line-height: 1.6;
    max-width: 380px;
}
.profile-card__lock {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    background: rgba(184, 147, 106, 0.08);
    color: var(--gold-deep);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border: 1px solid rgba(184, 147, 106, 0.3);
    flex-shrink: 0;
}
.profile-card__lock svg {
    flex-shrink: 0;
}
.measurement-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-2);
    margin: var(--s-3) 0;
}
.measurement-tile {
    background: var(--ivory);
    border: 1px solid var(--whisper);
    padding: var(--s-3) var(--s-2);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    position: relative;
    transition: border-color 500ms var(--ease);
}
.measurement-tile:hover {
    border-color: rgba(184, 147, 106, 0.3);
}
.measurement-tile__label {
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--warm-gray);
    font-weight: 400;
}
.measurement-tile__value {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 300;
    color: var(--ink);
    line-height: 1;
    margin: 0.2rem 0;
}
.measurement-tile__value--empty {
    color: var(--warm-gray);
    font-style: italic;
}
.measurement-tile__unit {
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--warm-gray);
}
.measurement-tile--size .measurement-tile__value {
    font-style: italic;
    color: var(--gold-deep);
}
.measurement-note {
    margin-top: var(--s-3);
    padding-top: var(--s-3);
    border-top: 1px solid var(--whisper);
}
.measurement-note p {
    font-size: 0.83rem;
    color: var(--warm-gray);
    line-height: 1.7;
    margin: 0 0 0.85rem;
    max-width: 540px;
}
.measurement-note__actions {
    display: flex;
    gap: var(--s-3);
    flex-wrap: wrap;
}
.measurement-note__link {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-deep);
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: border-color 400ms var(--ease);
}
.measurement-note__link:hover {
    border-bottom-color: var(--gold-deep);
}

/* Orders */
.order-section {
    margin-bottom: var(--s-6);
}
.order-section__title {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--warm-gray);
    margin-bottom: var(--s-3);
    padding-bottom: var(--s-2);
    border-bottom: 1px solid var(--whisper);
}
.order-card {
    background: var(--ivory);
    border: 1px solid var(--whisper);
    padding: var(--s-4);
    margin-bottom: var(--s-3);
    transition: border-color 500ms var(--ease),
                box-shadow 500ms var(--ease);
}
.order-card:hover {
    border-color: rgba(184, 147, 106, 0.35);
    box-shadow: 0 30px 60px -40px rgba(28, 25, 23, 0.2);
}
.order-card--past {
    background: var(--cream);
    opacity: 0.85;
}
.order-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--s-3);
    padding-bottom: var(--s-3);
    margin-bottom: var(--s-4);
    border-bottom: 1px solid var(--whisper);
}
.order-card__head h3 {
    font-size: 1.6rem;
}
.order-card__meta {
    font-size: 0.76rem;
    color: var(--warm-gray);
    letter-spacing: 0.04em;
    margin-top: 0.5rem;
}
.order-card__price {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.3rem;
    color: var(--gold-deep);
    white-space: nowrap;
}

/* Order progress bar */
.order-progress {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--s-1);
    position: relative;
    margin: var(--s-3) 0;
    padding: 0 var(--s-1);
}
.order-progress--short {
    grid-template-columns: repeat(4, 1fr);
}
.order-progress::before {
    content: '';
    position: absolute;
    top: 14px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: var(--whisper);
    z-index: 0;
}
.order-progress__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
}
.order-progress__num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ivory);
    border: 1px solid var(--whisper);
    color: var(--warm-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.85rem;
    transition: all 500ms var(--ease);
}
.order-progress__label {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--warm-gray);
    text-align: center;
    text-transform: uppercase;
}
.order-progress__step.done .order-progress__num {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--ivory);
}
.order-progress__step.done .order-progress__label {
    color: var(--ink-soft);
}
.order-progress__step.active .order-progress__num {
    background: var(--gold-deep);
    border-color: var(--gold-deep);
    color: var(--ivory);
    box-shadow: 0 0 0 4px rgba(184, 147, 106, 0.15);
}
.order-progress__step.active .order-progress__label {
    color: var(--gold-deep);
    font-weight: 500;
}

.order-card__note {
    margin-top: var(--s-3);
    padding: var(--s-2) var(--s-3);
    background: var(--cream);
    border-left: 2px solid var(--gold-deep);
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--ink-soft);
}
.order-card__note strong {
    font-weight: 500;
    color: var(--ink);
}
.order-card__note em {
    color: var(--gold-deep);
    font-weight: 500;
    font-style: normal;
}
.order-card__note--quiet {
    background: transparent;
    border-left: none;
    padding: var(--s-1) 0;
    color: var(--warm-gray);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.95rem;
}

/* ==============================================================
   COUTURE TRACKER — dedicated couture commission panel
   The premium "client portal" feeling for in-progress couture
   ============================================================== */
.couture-tracker {
    background: var(--ivory);
    border: 1px solid var(--whisper);
    padding: clamp(1.6rem, 3vw, 2.6rem);
    margin-bottom: var(--s-4);
    position: relative;
    overflow: hidden;
}
.couture-tracker::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold-deep) 0%, var(--gold) 50%, var(--gold-deep) 100%);
    opacity: 0.85;
}

/* ----- Hero strip ----- */
.couture-tracker__hero {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: clamp(1.5rem, 3vw, 2.6rem);
    padding-bottom: var(--s-4);
    margin-bottom: var(--s-4);
    border-bottom: 1px solid var(--whisper);
}
.couture-tracker__image {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--cream);
}
.couture-tracker__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1200ms var(--ease);
}
.couture-tracker:hover .couture-tracker__image img {
    transform: scale(1.04);
}
.couture-tracker__badge {
    position: absolute;
    top: var(--s-2);
    left: var(--s-2);
    background: rgba(247, 243, 236, 0.94);
    color: var(--ink);
    padding: 0.45rem 0.85rem;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.couture-tracker__intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.couture-tracker__intro h3 {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    margin: 0.6rem 0 0.75rem;
    line-height: 1.05;
    color: var(--ink);
}
.couture-tracker__meta {
    font-size: 0.8rem;
    color: var(--warm-gray);
    line-height: 1.7;
    letter-spacing: 0.04em;
}
.couture-tracker__price {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.4rem;
    color: var(--gold-deep);
    margin-top: var(--s-2);
}
.couture-tracker__stage {
    display: inline-flex;
    align-items: baseline;
    gap: 0.55rem;
    margin-top: var(--s-3);
    padding: 0.7rem 1rem;
    background: rgba(184, 147, 106, 0.08);
    border-left: 2px solid var(--gold-deep);
    width: fit-content;
}
.couture-tracker__stage span {
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--warm-gray);
}
.couture-tracker__stage strong {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 1.1rem;
    color: var(--ink);
}
.couture-tracker__stage em {
    font-size: 0.72rem;
    color: var(--gold-deep);
    font-style: normal;
    letter-spacing: 0.05em;
}

/* ----- Editorial timeline ----- */
.couture-timeline {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--s-2);
    position: relative;
    padding: var(--s-4) var(--s-1) var(--s-3);
    margin-bottom: var(--s-4);
}
.couture-timeline__rail {
    position: absolute;
    top: calc(var(--s-4) + 22px);
    left: 8%;
    right: 8%;
    height: 1px;
    background: var(--whisper);
    z-index: 0;
}
.couture-timeline__step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.65rem;
}
.couture-timeline__dot {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ivory);
    border: 1px solid var(--whisper);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--warm-gray);
    transition: all 700ms var(--ease);
}
.couture-timeline__dot em {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1;
}
.couture-timeline__label {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--warm-gray);
    font-weight: 400;
}
.couture-timeline__date {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.78rem;
    color: var(--warm-gray);
    margin-top: -0.15rem;
}
/* states */
.couture-timeline__step.done .couture-timeline__dot {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--ivory);
}
.couture-timeline__step.done .couture-timeline__label {
    color: var(--ink-soft);
}
.couture-timeline__step.done .couture-timeline__date {
    color: var(--ink-soft);
}
.couture-timeline__step.active .couture-timeline__dot {
    background: var(--gold-deep);
    border-color: var(--gold-deep);
    color: var(--ivory);
    box-shadow: 0 0 0 6px rgba(184, 147, 106, 0.14);
    transform: scale(1.08);
}
.couture-timeline__step.active .couture-timeline__label {
    color: var(--gold-deep);
    font-weight: 500;
}
.couture-timeline__step.active .couture-timeline__date {
    color: var(--gold-deep);
}

/* ----- Where we are / Next moment ----- */
.couture-state {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--s-3);
    margin-top: var(--s-3);
}
.couture-state__current {
    background: var(--cream);
    padding: clamp(1.4rem, 2.2vw, 2rem);
    border-left: 2px solid var(--gold-deep);
}
.couture-state__current h4 {
    font-size: 1.5rem;
    margin: 0.6rem 0 1rem;
    color: var(--ink);
}
.couture-state__current p {
    font-size: 0.92rem;
    line-height: 1.85;
    color: var(--ink-soft);
    margin-bottom: 0.85rem;
}
.couture-state__current p:last-child {
    margin-bottom: 0;
}
.couture-state__lead {
    font-family: var(--font-serif) !important;
    font-style: italic;
    color: var(--gold-deep) !important;
    font-size: 0.95rem !important;
}

.couture-state__next {
    background: var(--ivory);
    border: 1px solid var(--whisper);
    padding: clamp(1.4rem, 2.2vw, 1.8rem);
    display: flex;
    flex-direction: column;
}
.couture-state__appt {
    display: flex;
    gap: var(--s-3);
    align-items: stretch;
    margin-top: var(--s-2);
    padding-top: var(--s-2);
    border-top: 1px solid var(--whisper);
}
.couture-state__date {
    flex-shrink: 0;
    width: 70px;
    text-align: center;
    padding: 0.6rem 0.4rem;
    background: var(--cream);
    border: 1px solid var(--whisper);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.couture-state__month {
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    color: var(--gold-deep);
    text-transform: uppercase;
    font-weight: 500;
}
.couture-state__day {
    font-family: var(--font-serif);
    font-size: 1.95rem;
    line-height: 1;
    color: var(--ink);
    margin: 0.2rem 0;
    font-weight: 300;
}
.couture-state__year {
    font-size: 0.62rem;
    color: var(--warm-gray);
    letter-spacing: 0.08em;
}
.couture-state__details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    justify-content: center;
}
.couture-state__details strong {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 1.1rem;
    color: var(--ink);
    margin-bottom: 0.2rem;
}
.couture-state__details span {
    font-size: 0.78rem;
    color: var(--warm-gray);
    line-height: 1.5;
    letter-spacing: 0.02em;
}

/* ----- Quiet message ----- */
.couture-message {
    margin-top: var(--s-4);
    padding: var(--s-4);
    background: linear-gradient(180deg, var(--cream) 0%, var(--ivory) 100%);
    border-top: 1px solid rgba(184, 147, 106, 0.25);
    text-align: center;
}
.couture-message__mark {
    color: var(--gold-deep);
    font-size: 0.9rem;
    display: block;
    margin-bottom: var(--s-2);
}
.couture-message p {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--ink-soft);
    max-width: 560px;
    margin: 0 auto var(--s-2);
}
.couture-message__sign {
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-deep);
    display: block;
}

/* ----- Couture empty state ----- */
.couture-empty {
    background: var(--ivory);
    border: 1px solid var(--whisper);
    padding: clamp(2.5rem, 5vw, 4rem);
    text-align: center;
}
.couture-empty h4 {
    font-size: 1.6rem;
    margin: 1rem 0 1rem;
    color: var(--ink);
}
.couture-empty p {
    color: var(--warm-gray);
    max-width: 420px;
    margin: 0 auto var(--s-3);
    line-height: 1.7;
}

/* Appointments */
.appt-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}
.appt-card {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: var(--s-4);
    align-items: center;
    background: var(--ivory);
    border: 1px solid var(--whisper);
    padding: var(--s-3) var(--s-4);
    transition: border-color 500ms var(--ease),
                box-shadow 500ms var(--ease);
}
.appt-card:hover {
    border-color: rgba(184, 147, 106, 0.35);
    box-shadow: 0 30px 60px -40px rgba(28, 25, 23, 0.2);
}
.appt-card__date {
    text-align: center;
    padding: var(--s-2) var(--s-1);
    border: 1px solid var(--whisper);
    background: var(--cream);
}
.appt-card__month {
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    color: var(--gold-deep);
    text-transform: uppercase;
    font-weight: 500;
}
.appt-card__day {
    font-family: var(--font-serif);
    font-size: 2.4rem;
    line-height: 1;
    color: var(--ink);
    margin: 0.2rem 0;
    font-weight: 300;
}
.appt-card__year {
    font-size: 0.7rem;
    color: var(--warm-gray);
    letter-spacing: 0.08em;
}
.appt-card__body h4 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}
.appt-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    font-size: 0.78rem;
    color: var(--warm-gray);
    letter-spacing: 0.04em;
    margin-top: 0.5rem;
}
.appt-card__meta span {
    white-space: nowrap;
}
.appt-card__actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
/* .appt-card .btn--sm / .btn--ghost rules removed (Phase 0 — legacy button). */
.appt-footer {
    margin-top: var(--s-4);
    padding-top: var(--s-3);
    border-top: 1px solid var(--whisper);
    text-align: center;
}
/* gentle confirmation flash on reschedule */
.appt-card--rescheduled {
    border-color: var(--gold-deep);
    box-shadow: 0 0 0 4px rgba(184, 147, 106, 0.18);
    transition: border-color 800ms var(--ease), box-shadow 800ms var(--ease);
}

/* ==============================================================
   RESCHEDULE MODAL — quiet calendar + time slots
   ============================================================== */
.reschedule-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-3);
}
.reschedule-modal[hidden] {
    display: none !important;
}
.reschedule-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(28, 25, 23, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.reschedule-modal__panel {
    position: relative;
    background: var(--ivory);
    width: 100%;
    max-width: 880px;
    max-height: 92vh;
    overflow-y: auto;
    border: 1px solid var(--whisper);
    box-shadow: 0 60px 120px -40px rgba(28, 25, 23, 0.35);
}
.reschedule-modal__close {
    position: absolute;
    top: var(--s-2);
    right: var(--s-2);
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    color: var(--warm-gray);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: color 300ms var(--ease), transform 300ms var(--ease);
}
.reschedule-modal__close:hover {
    color: var(--gold-deep);
    transform: rotate(90deg);
}
.reschedule-modal__head {
    padding: clamp(2rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem) var(--s-3);
    text-align: center;
    border-bottom: 1px solid var(--whisper);
}
.reschedule-modal__head h3 {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    margin: 0.6rem 0 0.8rem;
}
.reschedule-modal__sub {
    font-size: 0.85rem;
    color: var(--warm-gray);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.6;
}
.reschedule-modal__body {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    padding: clamp(1.5rem, 3vw, 2.5rem);
}
.reschedule-modal__foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--s-2);
    padding: var(--s-3) clamp(1.5rem, 3vw, 2.5rem);
    border-top: 1px solid var(--whisper);
    background: var(--cream);
}
/* .reschedule-modal__foot .btn:disabled rule removed (Phase 0 — legacy button). */

/* Calendar */
.rs-calendar {
    background: var(--ivory);
}
.rs-calendar__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--s-3);
}
.rs-calendar__title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-style: italic;
    color: var(--ink);
    letter-spacing: 0.04em;
}
.rs-calendar__nav {
    background: transparent;
    border: 1px solid var(--whisper);
    width: 32px;
    height: 32px;
    color: var(--ink);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 300ms var(--ease);
    display: flex;
    align-items: center;
    justify-content: center;
}
.rs-calendar__nav:hover {
    border-color: var(--gold-deep);
    color: var(--gold-deep);
}
.rs-calendar__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 0.4rem;
}
.rs-calendar__weekdays span {
    text-align: center;
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--warm-gray);
    font-weight: 400;
    padding: 0.4rem 0;
}
.rs-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.rs-day {
    aspect-ratio: 1;
    background: transparent;
    border: 1px solid transparent;
    color: var(--warm-gray);
    font-family: var(--font-serif);
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 300ms var(--ease);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.rs-day--blank {
    pointer-events: none;
}
.rs-day--available {
    color: var(--ink);
    border-color: var(--whisper);
    background: var(--ivory);
}
.rs-day--available::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gold-deep);
}
.rs-day--available:hover {
    border-color: var(--gold-deep);
    background: rgba(184, 147, 106, 0.08);
}
.rs-day--closed {
    color: rgba(120, 113, 108, 0.4);
    text-decoration: line-through;
    cursor: not-allowed;
}
.rs-day--selected {
    background: var(--ink) !important;
    color: var(--ivory) !important;
    border-color: var(--ink) !important;
    transform: scale(1.04);
}
.rs-day--selected::after {
    background: var(--gold) !important;
}
.rs-calendar__legend {
    display: flex;
    gap: var(--s-2);
    margin-top: var(--s-3);
    padding-top: var(--s-2);
    border-top: 1px solid var(--whisper);
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--warm-gray);
    flex-wrap: wrap;
}
.rs-legend {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.rs-legend::before {
    content: '';
    width: 10px;
    height: 10px;
    border: 1px solid var(--whisper);
    background: var(--ivory);
    position: relative;
}
.rs-legend--available::before {
    border-color: var(--gold-deep);
}
.rs-legend--closed::before {
    background: transparent;
    border-style: dashed;
}
.rs-legend--selected::before {
    background: var(--ink);
    border-color: var(--ink);
}

/* Time slots */
.rs-times {
    background: var(--cream);
    padding: var(--s-3);
    border: 1px solid var(--whisper);
}
.rs-times__head {
    margin-bottom: var(--s-3);
    padding-bottom: var(--s-2);
    border-bottom: 1px solid var(--whisper);
}
.rs-times__head h4 {
    font-size: 1.15rem;
    margin-top: 0.4rem;
    color: var(--ink);
}
.rs-times__grid {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.rs-times__hint {
    font-size: 0.78rem;
    color: var(--warm-gray);
    line-height: 1.6;
    font-style: italic;
    font-family: var(--font-serif);
}
.rs-slot {
    width: 100%;
    background: var(--ivory);
    border: 1px solid var(--whisper);
    color: var(--ink);
    padding: 0.7rem 1rem;
    text-align: left;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 300ms var(--ease);
    position: relative;
}
.rs-slot::before {
    content: '◆';
    margin-right: 0.6rem;
    color: var(--gold-deep);
    font-size: 0.7rem;
    vertical-align: middle;
}
.rs-slot:hover {
    border-color: var(--gold-deep);
    background: rgba(184, 147, 106, 0.05);
}
.rs-slot--selected {
    background: var(--ink) !important;
    color: var(--ivory) !important;
    border-color: var(--ink) !important;
}
.rs-slot--selected::before {
    color: var(--gold) !important;
}

/* Responsive */
@media (max-width: 960px) {
    .auth-grid { grid-template-columns: 1fr; gap: var(--s-4); }
    .account-layout { grid-template-columns: 1fr; gap: var(--s-4); }
    .account-nav { position: relative; top: 0; flex-direction: row; flex-wrap: wrap; }
    .account-nav__head { width: 100%; }
    .account-nav__divider { width: 100%; }
    .account-nav__item { flex: 1 1 auto; border-left: none; border-bottom: 2px solid transparent; }
    .account-nav__item.active { border-left: none; border-bottom-color: var(--gold-deep); }
    .order-progress { grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 0; }
    .order-progress__label { font-size: 0.6rem; }
    .appt-card { grid-template-columns: 80px 1fr; }
    .appt-card__actions { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; padding-top: var(--s-2); border-top: 1px solid var(--whisper); }
    /* Couture tracker stacks on tablet */
    .couture-tracker__hero { grid-template-columns: 180px 1fr; gap: var(--s-3); }
    .couture-state { grid-template-columns: 1fr; }
}

/* Color swatches block removed — Phase 0.
   §5 mandates no swatches on couture pieces; swatch markup in
   customized.html is now inert (TODO(phase1)). */
@media (max-width: 600px) {
    .couture-timeline__date { font-size: 0.7rem; }
    /* Measurements collapse */
    .measurement-grid { grid-template-columns: repeat(2, 1fr); }
    .profile-card__head { flex-direction: column; }
    /* Reschedule modal stacks */
    .reschedule-modal__body { grid-template-columns: 1fr; }
    .order-card__head { flex-direction: column; }
    .order-card__price { font-size: 1.1rem; }
    .order-progress__label { display: none; }
    .field-group--3 { grid-template-columns: 1fr; }
    .appt-card { grid-template-columns: 1fr; }
    .appt-card__date { display: flex; justify-content: center; align-items: baseline; gap: 0.5rem; padding: 0.5rem; }
    .appt-card__day { font-size: 1.4rem; margin: 0; }
    /* Couture tracker — full mobile */
    .couture-tracker { padding: var(--s-3); }
    .couture-tracker__hero { grid-template-columns: 1fr; }
    .couture-tracker__image { aspect-ratio: 4/3; max-height: 280px; }
    .couture-tracker__intro h3 { font-size: 1.7rem; }
    .couture-timeline { grid-template-columns: repeat(5, 1fr); gap: 4px; padding: var(--s-3) 0 var(--s-2); }
    .couture-timeline__rail { top: calc(var(--s-3) + 16px); left: 6%; right: 6%; }
    .couture-timeline__dot { width: 32px; height: 32px; }
    .couture-timeline__dot em { font-size: 0.85rem; }
    .couture-timeline__label { font-size: 0.58rem; letter-spacing: 0.08em; }
    .couture-timeline__date { display: none; }
    .couture-state__appt { flex-direction: row; }
    .couture-message p { font-size: 1rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; }
    .hero__image { transform: none !important; }
}