/* ============================================================
   ZAIRA MAKAEVA — fashion-editorial portfolio
   Type: Bodoni Moda (didone display) · Archivo (grotesque)
   Palette: ivory paper · noir ink · oxblood · antique gold
   ============================================================ */

:root {
    /* Palette */
    --paper: #f3ede1;
    --paper-deep: #eae2d1;
    --ink: #16120e;
    --ink-soft: #4a4139;
    --noir: #14100d;
    --noir-raise: #1d1814;
    --cream: #f3ede1;
    --cream-dim: #c9bfae;
    --wine: #6e1a2c;
    --wine-bright: #a12a44;
    --wine-noir: #260a12;
    --gold: #b3905a;
    --gold-dim: rgba(179, 144, 90, .38);

    /* Type */
    --font-display: "Bodoni Moda", "Bodoni MT", Didot, "Playfair Display", serif;
    --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;

    /* Scale */
    --text-huge: clamp(4.2rem, 14.5vw, 12.5rem);
    --text-h2: clamp(2.4rem, 5.5vw, 4.4rem);
    --text-lede: clamp(2rem, 4.6vw, 3.6rem);
    --text-body: clamp(1rem, 1.05vw, 1.125rem);
    --text-small: .8125rem;
    --text-micro: .6875rem;

    /* Rhythm */
    --gutter: clamp(1.25rem, 5vw, 5rem);
    --section-pad: clamp(4.5rem, 11vw, 9rem);

    /* Motion */
    --ease-out: cubic-bezier(.19, 1, .22, 1);
    --reveal-dur: .9s;

    /* Hairlines */
    --hairline: 1px solid rgba(22, 18, 14, .22);
    --hairline-gold: 1px solid var(--gold-dim);
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 4rem;
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Paper grain over everything */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    opacity: .05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--wine); color: var(--cream); }

a { color: inherit; text-decoration: none; }

:focus-visible {
    outline: 2px solid var(--wine-bright);
    outline-offset: 3px;
}

/* ---------- Scroll progress ---------- */
.progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: 0;
    background: var(--wine);
    z-index: 120;
}

/* ---------- Cursor follower ---------- */
.cursor {
    position: fixed;
    top: 0; left: 0;
    width: 34px;
    height: 34px;
    border: 1px solid var(--wine-bright);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1000;
    opacity: 0;
    transition: width .3s var(--ease-out), height .3s var(--ease-out),
        opacity .35s, background-color .3s;
    translate: -50% -50%;
}
.cursor.on { opacity: .9; }
.cursor.active {
    width: 58px;
    height: 58px;
    background: rgba(179, 144, 90, .12);
}
@media (pointer: coarse) {
    .cursor { display: none; }
}

/* ---------- Masthead ---------- */
.masthead {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.1rem var(--gutter);
    mix-blend-mode: difference;
    color: #fff;
}

.masthead__brand {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: .02em;
    line-height: 1;
}
.masthead__brand i { font-style: italic; font-weight: 500; }

.masthead__links {
    display: flex;
    gap: clamp(1rem, 3vw, 2.5rem);
    list-style: none;
}

.masthead__links a,
.masthead__cv {
    font-size: var(--text-micro);
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
    padding: .35rem 0;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-size: 0% 1px;
    background-position: left bottom;
    transition: background-size .45s var(--ease-out);
}

.masthead__links a:hover,
.masthead__links a[aria-current],
.masthead__cv:hover {
    background-size: 100% 1px;
}

.masthead__cv { letter-spacing: .2em; }

/* ---------- Cover ---------- */
.cover {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(5.5rem, 12vh, 8rem) var(--gutter) 3.5rem;
    position: relative;
    border-bottom: var(--hairline);
    background:
        radial-gradient(58vw 58vw at 84% 12%, rgba(179, 144, 90, .16), transparent 68%),
        radial-gradient(46vw 40vw at 8% 96%, rgba(110, 26, 44, .1), transparent 70%),
        var(--paper);
}

.cover__topline {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    font-size: var(--text-micro);
    font-weight: 600;
    letter-spacing: .42em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: clamp(1.5rem, 4vh, 3rem);
    animation: rise var(--reveal-dur) var(--ease-out) .15s backwards;
}
.cover__topline-mid { color: var(--wine); letter-spacing: 0; }
.cover__topline::before,
.cover__topline::after {
    content: "";
    height: 1px;
    background: currentColor;
    opacity: .4;
    flex: 0 1 5.5rem;
}
.cover__topline::after { flex: 1 1 auto; }

.cover__name {
    font-family: var(--font-display);
    font-size: var(--text-huge);
    font-weight: 850;
    font-optical-sizing: auto;
    line-height: .92;
    letter-spacing: -.015em;
    text-transform: uppercase;
    max-width: 12ch;
}

.cover__line {
    display: block;
    overflow: hidden;
    padding-bottom: .04em;
}

.cover__word {
    display: inline-block;
    transform: translateY(115%);
    animation: unveil 1.1s var(--ease-out) forwards;
}
.cover__line:nth-child(2) .cover__word { animation-delay: .42s; }

/* Letter-by-letter title sequence */
.cover__ch {
    display: inline-block;
    transform: translateY(118%) rotate(5deg);
    animation: unveil-ch 1s var(--ease-out) forwards;
}
.cover__ch:nth-child(1) { animation-delay: .04s; }
.cover__ch:nth-child(2) { animation-delay: .11s; }
.cover__ch:nth-child(3) { animation-delay: .18s; }
.cover__ch:nth-child(4) { animation-delay: .25s; }
.cover__ch:nth-child(5) { animation-delay: .32s; }

.cover__word--italic {
    font-style: italic;
    font-weight: 520;
    color: var(--wine);
    margin-left: .38em;
    text-transform: none;
}

.cover__role {
    margin-top: clamp(1.2rem, 3vh, 2rem);
    font-size: clamp(.9rem, 1.6vw, 1.15rem);
    font-weight: 500;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.cover__role span { color: var(--wine); }

.cover__lines {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem clamp(1.4rem, 4vw, 3.2rem);
    margin-top: auto;
    padding-top: 3rem;
}

.cover__lines li {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.02rem, 1.8vw, 1.3rem);
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    gap: .8rem;
}
.cover__lines li::before {
    content: "✦";
    font-style: normal;
    font-size: .6em;
    color: var(--gold);
}

.cover__scroll {
    position: absolute;
    right: var(--gutter);
    bottom: 3.4rem;
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    font-size: var(--text-micro);
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--ink-soft);
    transition: color .3s;
}
.cover__scroll:hover { color: var(--wine); }
.cover__scroll-arrow {
    display: inline-block;
    animation: nudge 1.8s ease-in-out infinite;
}

/* Garment swing tag */
.tag {
    position: absolute;
    top: clamp(4.2rem, 9vh, 6rem);
    right: clamp(1.5rem, 9vw, 9rem);
    transform-origin: 50% -3.4rem;
    animation: rise var(--reveal-dur) var(--ease-out) backwards, sway 7s ease-in-out 1.2s infinite;
    filter: drop-shadow(0 18px 22px rgba(22, 18, 14, .18));
}

.tag__string {
    position: absolute;
    left: 50%;
    top: -3.4rem;
    width: 1px;
    height: 3.4rem;
    background: var(--ink-soft);
    opacity: .55;
}

.tag__card {
    width: clamp(8.2rem, 15vw, 10.5rem);
    background: var(--ink);
    color: var(--cream);
    padding: 1.3rem 1.1rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    text-align: center;
    position: relative;
    border-radius: 2px;
}
/* punched hole */
.tag__card::before {
    content: "";
    position: absolute;
    top: .55rem;
    left: 50%;
    transform: translateX(-50%);
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--paper);
    box-shadow: inset 0 0 0 1.5px var(--gold);
}

.tag__no {
    margin-top: .55rem;
    font-size: .58rem;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--gold);
}

.tag__zm {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2.1rem;
    line-height: 1;
    letter-spacing: .04em;
}

.tag__rule { width: 2.2rem; height: 1px; background: var(--gold-dim); }

.tag__route {
    font-size: .55rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--cream-dim);
}

.tag__barcode {
    width: 78%;
    height: 1.35rem;
    margin-top: .2rem;
    background: repeating-linear-gradient(90deg,
        var(--cream) 0 1px, transparent 1px 3px,
        var(--cream) 3px 5px, transparent 5px 6px,
        var(--cream) 6px 7px, transparent 7px 11px,
        var(--cream) 11px 12px, transparent 12px 14px);
    opacity: .85;
}

.tag__est {
    font-family: var(--font-display);
    font-style: italic;
    font-size: .72rem;
    color: var(--gold);
}

/* ---------- Ticker ---------- */
.ticker {
    overflow: hidden;
    border-bottom: var(--hairline);
    background: var(--paper-deep);
    padding: .95rem 0;
}

.ticker--wine {
    background: var(--wine);
    border-bottom: none;
}

.ticker__track {
    display: flex;
    align-items: center;
    gap: 2.6rem;
    width: max-content;
    animation: ticker 36s linear infinite;
}
.ticker__track--reverse { animation-direction: reverse; }
.ticker:hover .ticker__track { animation-play-state: paused; }

.ticker__track span {
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.9vw, 1.35rem);
    font-weight: 620;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}
.ticker--wine .ticker__track span { color: var(--cream); font-style: italic; font-weight: 500; }

.ticker__track i {
    font-style: normal;
    font-size: .72rem;
    color: var(--wine);
}
.ticker--wine .ticker__track i { color: var(--gold); }

/* ---------- Sections ---------- */
.section {
    padding: var(--section-pad) var(--gutter);
    position: relative;
}

/* Ghost outlined numerals — print poster effect */
.section[data-ghost]::before {
    content: attr(data-ghost);
    position: absolute;
    top: clamp(.5rem, 3vw, 2rem);
    right: calc(var(--gutter) * .6);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: clamp(8rem, 22vw, 17rem);
    line-height: .8;
    letter-spacing: -.06em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(22, 18, 14, .13);
    pointer-events: none;
    user-select: none;
}
.section--record[data-ghost]::before { -webkit-text-stroke-color: rgba(179, 144, 90, .17); }

.section__head {
    display: flex;
    align-items: baseline;
    gap: 1.4rem;
    margin-bottom: clamp(2.8rem, 6vw, 5rem);
}

.section__no {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    color: var(--wine);
}

.section__title {
    font-family: var(--font-display);
    font-size: var(--text-h2);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .01em;
    line-height: 1;
}

.section__rule {
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: .18;
    align-self: center;
}

.section__folio {
    font-size: var(--text-micro);
    font-weight: 600;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--ink-soft);
    opacity: .75;
    align-self: center;
    white-space: nowrap;
}
.section--record .section__folio { color: var(--cream-dim); }

@media (max-width: 760px) {
    .section__folio { display: none; }
}

/* ---------- 01 Profile ---------- */
.profile__grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: start;
}

.profile__text p + p { margin-top: 1.4em; }
.profile__text { max-width: 62ch; font-size: clamp(1.05rem, 1.35vw, 1.25rem); line-height: 1.75; color: var(--ink-soft); }
.profile__text strong { color: var(--ink); }

.dropcap::first-letter {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 4.6em;
    line-height: .78;
    float: left;
    padding: .08em .14em 0 0;
    color: var(--wine);
}

.profile__pull {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
    line-height: 1.35;
    color: var(--ink);
    border-left: 2px solid var(--wine);
    padding-left: 1.4rem;
}

.stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-left: var(--hairline);
    border-top: var(--hairline);
}

.stats__item {
    border-right: var(--hairline);
    border-bottom: var(--hairline);
    padding: clamp(1.2rem, 2.4vw, 2rem) clamp(1rem, 2vw, 1.6rem);
    transition: background .4s var(--ease-out);
}
.stats__item:hover { background: rgba(110, 26, 44, .06); }

.stats__item dt {
    font-size: var(--text-micro);
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: .6rem;
}

.stats__item dd {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1;
}
.stats__item dd span { color: var(--wine); font-weight: 500; }

/* Houses credit strip — brand marks normalized to one ink tone */
.houses {
    margin-top: clamp(3rem, 6vw, 5rem);
    border-top: var(--hairline);
    padding-top: clamp(1.6rem, 3vw, 2.4rem);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.4rem clamp(1.8rem, 4.5vw, 4rem);
}

.houses__label {
    font-size: var(--text-micro);
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--wine);
}

.houses__word {
    font-family: var(--font-body);
    font-size: clamp(.82rem, 1.1vw, .95rem);
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: .78;
    transition: opacity .3s, color .3s;
}

.houses__logo {
    display: inline-block;
    background: var(--ink);
    opacity: .78;
    transition: opacity .3s, background .3s;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* MK lockup cropped to the circle monogram */
.houses__logo--mk {
    width: 2.7rem;
    height: 2.7rem;
    -webkit-mask-image: url("../../assets/brands/michael-kors.svg");
    mask-image: url("../../assets/brands/michael-kors.svg");
    -webkit-mask-size: 212% auto;
    mask-size: 212% auto;
    -webkit-mask-position: 50% 4%;
    mask-position: 50% 4%;
}

.houses__logo--aero {
    width: 9rem;
    height: 1.15rem;
    -webkit-mask-image: url("../../assets/brands/aeropostale.svg");
    mask-image: url("../../assets/brands/aeropostale.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
}

.houses__word:hover,
.houses__logo:hover { opacity: 1; }
.houses__word:hover { color: var(--wine); }
.houses__logo:hover { background: var(--wine); }

/* ---------- 02 The Record (noir spread) ---------- */
.section--record {
    background:
        radial-gradient(70vw 50vw at 90% 0%, rgba(179, 144, 90, .07), transparent 60%),
        var(--noir);
    color: var(--cream);
}

.section--record .section__no { color: var(--gold); }
.section--record .section__rule { opacity: .28; background: var(--gold); }

.record { list-style: none; border-top: var(--hairline-gold); }

.record__item {
    display: grid;
    grid-template-columns: minmax(3rem, 8rem) minmax(9rem, 15rem) 1fr;
    gap: clamp(1.2rem, 3vw, 3rem);
    padding: clamp(1.8rem, 3.5vw, 2.8rem) clamp(.4rem, 1vw, 1rem);
    border-bottom: var(--hairline-gold);
    position: relative;
    transition: background .45s var(--ease-out);
}

.record__item::before {
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 2px;
    height: 0;
    background: var(--gold);
    transition: height .5s var(--ease-out);
}
.record__item:hover { background: var(--noir-raise); }
.record__item:hover::before { height: 100%; }

.record__no {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    color: var(--gold);
    line-height: 1;
}

.record__when {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.record__dates {
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    font-weight: 600;
    letter-spacing: .04em;
}

.record__where {
    font-size: var(--text-micro);
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--cream-dim);
}

.record__role {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3.2vw, 2.5rem);
    font-weight: 750;
    line-height: 1.08;
}

.record__brand {
    font-size: var(--text-small);
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--gold);
    margin: .55rem 0 1.1rem;
}

.record__points {
    list-style: none;
    max-width: 58ch;
    color: var(--cream-dim);
    font-size: clamp(.95rem, 1.15vw, 1.05rem);
    line-height: 1.7;
}

.record__points li {
    padding-left: 1.3rem;
    position: relative;
}
.record__points li + li { margin-top: .45rem; }
.record__points li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--wine-bright);
}

/* ---------- 03 Expertise ---------- */
.expertise {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
}

.expertise__cat {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1.9vw, 1.6rem);
    font-weight: 750;
    line-height: 1.15;
    padding-bottom: 1.1rem;
    margin-bottom: 1.1rem;
    border-bottom: 2px solid var(--ink);
}
.expertise__cat em { color: var(--wine); font-weight: 500; }

.expertise__col ul { list-style: none; }

.expertise__col li {
    padding: .68rem 0 .68rem 0;
    border-bottom: var(--hairline);
    font-size: .95rem;
    font-weight: 500;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    gap: 0;
    transition: color .3s, padding-left .35s var(--ease-out);
    position: relative;
}

.expertise__col li::before {
    content: "✦";
    font-size: .55rem;
    color: var(--wine);
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: opacity .3s, width .35s var(--ease-out), margin-right .35s var(--ease-out);
}

.expertise__col li:hover {
    color: var(--ink);
}
.expertise__col li:hover::before {
    opacity: 1;
    width: .8rem;
    margin-right: .2rem;
}

/* ---------- 04 Education ---------- */
.section--education { padding-top: 0; }

.education { list-style: none; border-top: var(--hairline); }

.education__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: .4rem 2rem;
    padding: 1.35rem .2rem;
    border-bottom: var(--hairline);
    transition: background .35s;
}
.education__row:hover { background: rgba(110, 26, 44, .05); }

.education__degree {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2vw, 1.5rem);
    font-weight: 700;
}

.education__school {
    font-size: var(--text-small);
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.languages {
    margin-top: 2.2rem;
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.1rem, 1.8vw, 1.35rem);
    color: var(--ink-soft);
}

.languages__label {
    font-family: var(--font-body);
    font-style: normal;
    font-size: var(--text-micro);
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--wine);
    margin-right: 1.1rem;
}

/* ---------- 05 Contact (bordeaux finale) ---------- */
.section--contact {
    background:
        radial-gradient(60vw 42vw at 12% 8%, rgba(179, 144, 90, .12), transparent 62%),
        radial-gradient(50vw 50vw at 95% 100%, rgba(161, 42, 68, .25), transparent 65%),
        var(--wine-noir);
    color: var(--cream);
    text-align: center;
}

.section--contact .section__head { justify-content: center; }
.section--contact .section__no { color: var(--gold); }
.section--contact .section__rule { display: none; }
.section--contact .section__head::before,
.section--contact .section__head::after {
    content: "";
    height: 1px;
    background: var(--gold-dim);
    flex: 0 1 6rem;
    align-self: center;
}

.contact__lede {
    font-family: var(--font-display);
    font-size: var(--text-lede);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.05;
    letter-spacing: .01em;
}
.contact__lede em {
    font-style: italic;
    font-weight: 500;
    color: var(--gold);
    text-transform: none;
}

.contact__sub {
    max-width: 44ch;
    margin: 1.6rem auto 0;
    color: var(--cream-dim);
    font-size: clamp(1rem, 1.3vw, 1.15rem);
}

.contact__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 1.2rem;
    margin-top: clamp(2.2rem, 5vw, 3.4rem);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 1.05rem 2.4rem;
    font-size: var(--text-micro);
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    border-radius: 999px;
    transition: background .35s var(--ease-out), color .35s var(--ease-out),
        border-color .35s, transform .35s var(--ease-out);
}
.btn:active { scale: .97; }

.btn--fill {
    background: var(--cream);
    color: var(--ink);
    border: 1px solid var(--cream);
}
.btn--fill:hover { background: var(--gold); border-color: var(--gold); color: var(--noir); }

.btn--line {
    border: 1px solid rgba(243, 237, 225, .38);
    color: var(--cream);
}
.btn--line:hover { border-color: var(--gold); color: var(--gold); }

.contact__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .8rem 1.3rem;
    margin-top: clamp(2.4rem, 5vw, 3.6rem);
    font-size: var(--text-small);
    letter-spacing: .06em;
    color: var(--cream-dim);
}
.contact__meta span[aria-hidden] { color: var(--gold); font-size: .6rem; }

/* Rotating couture seal */
.seal {
    position: absolute;
    top: clamp(2rem, 6vw, 4.5rem);
    right: var(--gutter);
    width: clamp(7rem, 11vw, 9.5rem);
    aspect-ratio: 1;
    pointer-events: none;
}

.seal__ring {
    transform-origin: 60px 60px;
    animation: spin 28s linear infinite;
}

.seal__text {
    font-family: var(--font-body);
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    fill: var(--gold);
}

.seal__circle {
    stroke: var(--gold-dim);
    stroke-width: 1;
}

.seal__zm {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    fill: var(--cream);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 900px) {
    .seal { display: none; }
}
.contact__meta a {
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-size: 0% 1px;
    background-position: left bottom;
    padding-bottom: .18rem;
    transition: background-size .4s var(--ease-out), color .3s;
}
.contact__meta a:hover { color: var(--cream); background-size: 100% 1px; }

/* ---------- Footer ---------- */
.footer {
    background: var(--wine-noir);
    color: var(--cream-dim);
    text-align: center;
    padding: 2.6rem var(--gutter) 3rem;
    border-top: 1px solid rgba(179, 144, 90, .22);
}

.footer__brand {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--cream);
    display: inline-block;
    margin-bottom: .7rem;
}
.footer__brand i { font-style: italic; font-weight: 500; color: var(--gold); }

.footer__sign {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--gold);
    margin-bottom: .5rem;
}

.footer__copy { font-size: var(--text-small); letter-spacing: .04em; }

/* ---------- Motion ---------- */
@keyframes unveil {
    to { transform: translateY(0); }
}

@keyframes unveil-ch {
    to { transform: translateY(0) rotate(0deg); }
}

/* Ghost numerals drift with scroll (modern browsers only) */
@keyframes ghost-drift {
    from { translate: 0 4.5rem; }
    to { translate: 0 -4.5rem; }
}
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .section[data-ghost]::before {
            animation: ghost-drift linear both;
            animation-timeline: view();
        }
    }
}

@keyframes rise {
    from { opacity: 0; transform: translateY(1.6rem); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes sway {
    0%, 100% { rotate: 2.4deg; }
    50% { rotate: -2deg; }
}

@keyframes nudge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(.3rem); }
}

@keyframes ticker {
    to { transform: translateX(-50%); }
}

/* Load-time staggered reveals (cover) */
.reveal-load {
    animation: rise var(--reveal-dur) var(--ease-out) both;
    animation-delay: var(--d, 0s);
}
.tag.reveal-load {
    animation: rise var(--reveal-dur) var(--ease-out) var(--d, 0s) backwards,
        sway 7s ease-in-out 1.6s infinite;
}

/* Scroll-time reveals */
.reveal {
    opacity: 0;
    transform: translateY(2.2rem);
    transition: opacity var(--reveal-dur) var(--ease-out), transform var(--reveal-dur) var(--ease-out);
    transition-delay: var(--d, 0s);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal, .reveal-load, .cover__word, .cover__ch, .tag {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
    .ticker__track { animation: none; }
    .cover__scroll-arrow { animation: none; }
    .seal__ring { animation: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    .profile__grid { grid-template-columns: 1fr; }
    .expertise { grid-template-columns: 1fr 1fr; }
    .record__item {
        grid-template-columns: minmax(2.2rem, 3rem) 1fr;
        grid-template-areas: "no when" "no body";
    }
    .record__no { grid-area: no; }
    .record__when { grid-area: when; flex-direction: row; align-items: baseline; gap: 1.1rem; flex-wrap: wrap; }
    .record__body { grid-area: body; margin-top: .9rem; }

    /* Tablet: drop the scroll cue below the cover lines instead of overlapping them */
    .cover__scroll {
        position: static;
        margin-top: 2.2rem;
        align-self: flex-start;
    }
}

@media (max-width: 640px) {
    .masthead__links { display: none; }
    .cover__topline {
        font-size: .625rem;
        letter-spacing: .26em;
        gap: .8rem;
    }
    .expertise { grid-template-columns: 1fr; }
    .tag {
        top: auto;
        bottom: 12.5rem;
        right: .6rem;
        scale: .74;
        transform-origin: top right;
    }
    .cover__scroll { position: static; margin-top: 2.4rem; }
    .cover__lines { flex-direction: column; }
    .stats__item dd { font-size: 2.4rem; }
}

@media (max-width: 380px) {
    .cover__role { padding-right: 6.5rem; }
}