/* ============================================================
   chika.bid — boutique horticultural bidding house
   corporate-playful · asymmetric 7/5 · futura-geometric · warm
   ============================================================ */

:root {
    /* warm palette — 8 tones */
    --marigold:   #e8a87c;  /* primary warm focal — live bid numerals */
    --rose:       #d97c6a;  /* secondary — auction clock, active states */
    --apricot:    #f9d6c1;  /* gradient-mesh midtone, skeletons */
    --cream:      #fdf6ee;  /* page canvas, never pure white */
    --tea-stem:   #a8b59c;  /* botanical line-art, success */
    --mahogany:   #5c3d2e;  /* corporate ink, body text */
    --plum:       #6b3d4a;  /* sealed-lot indicator */
    --linen:      #e8dcc9;  /* secondary surfaces, row striping */
    --mesh-cloud: #f5e7dc;  /* extra mesh stop */

    --asym-split: 5fr 7fr;
    --asym-flip:  7fr 5fr;

    --gap-section: clamp(2rem, 5vw, 6rem);

    --font-display: 'Jost', 'Futura', 'Century Gothic', sans-serif;
    --font-body:    'Questrial', 'Futura', sans-serif;
    --font-mono:    'Major Mono Display', 'Space Mono', monospace;
    --font-botanic: 'Cormorant Infant', 'Cormorant', Georgia, serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-snap-type: y proximity; }

body {
    background: var(--cream);
    color: var(--mahogany);
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
em { font-family: var(--font-botanic); font-style: italic; font-weight: 500; }

/* ---------- gradient-mesh peony (signature motif) ---------- */
.mesh-peony {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    filter: blur(0.5px) saturate(1.05);
    background-color: var(--cream);
    background-image:
        radial-gradient(ellipse at 30% 25%, var(--apricot) 0%, transparent 50%),
        radial-gradient(ellipse at 65% 40%, var(--marigold) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 75%, var(--rose) 0%, transparent 60%),
        radial-gradient(ellipse at 20% 80%, var(--mesh-cloud) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 20%, var(--cream) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 50%, var(--marigold) 0%, transparent 70%);
    animation: drift 24s ease-in-out infinite alternate;
}
@keyframes drift {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(2%, -1%) scale(1.04); }
}

.mesh-peony--masthead {
    width: 60vw; height: 70vh;
    left: -10vw; top: 8vh;
}
.mesh-peony--lot {
    inset: 0;
    border-radius: 4px;
    opacity: 0.9;
}
.mesh-peony--clock {
    inset: -10%;
    border-radius: 50%;
    opacity: 0.55;
}

/* ---------- provenance seal (only hard circle) ---------- */
.provenance-seal {
    position: absolute;
    width: 32px; height: 32px;
    border-radius: 50%;
    display: grid; place-items: center;
    background:
        radial-gradient(circle at 35% 30%, #f3c9a8 0%, var(--rose) 55%, var(--plum) 100%);
    box-shadow: inset 0 0 6px rgba(92,61,46,0.5), 0 1px 3px rgba(92,61,46,0.25);
    top: 1rem; right: 1rem;
    z-index: 3;
}
.provenance-seal span {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    color: var(--cream);
    letter-spacing: -0.02em;
}
.provenance-seal--lg { width: 46px; height: 46px; }
.provenance-seal--lg span { font-size: 0.75rem; }

/* ---------- petal bullet markers ---------- */
.petal-bullet {
    display: inline-block;
    width: 13px; height: 13px;
    margin-right: 0.6rem;
    flex: 0 0 auto;
    background: var(--tea-stem);
    border-radius: 50% 8% 50% 8%;
    transform: rotate(45deg);
    opacity: 0.85;
}

/* ============================================================
   MASTHEAD
   ============================================================ */
.masthead {
    position: relative;
    min-height: 100vh;
    padding: clamp(1.5rem, 3vw, 3rem) clamp(1.5rem, 4vw, 4rem);
    display: grid;
    grid-template-columns: var(--asym-split);
    grid-template-rows: auto 1fr;
    gap: var(--gap-section);
    scroll-snap-align: start;
    overflow: hidden;
}

.masthead-nav {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    position: relative;
    z-index: 2;
    border-bottom: 1px solid var(--linen);
    padding-bottom: 1.1rem;
}
/* broken-rule masthead — the rule does not span fully */
.masthead-nav::after {
    content: "";
    position: absolute;
    left: 38%; right: 0; bottom: -1px;
    height: 3px; background: var(--marigold);
}

.wordmark {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.5rem, 12vw, 5.5rem);
    line-height: 0.9;
    letter-spacing: 0.02em;  /* +20 tracking-ish */
    color: var(--mahogany);
    order: 2;
}
.masthead-links {
    list-style: none;
    display: flex;
    gap: clamp(1rem, 2.5vw, 2.5rem);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    order: 1;
}
.masthead-links a { color: var(--mahogany); padding-bottom: 2px; border-bottom: 1px solid transparent; transition: border-color .25s, color .25s; }
.masthead-links a:hover { border-color: var(--rose); color: var(--rose); }

/* the deliberate void — left/lower of masthead */
.masthead-void {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    position: relative;
    z-index: 1;
    align-self: end;
}
.void-note {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    color: var(--mahogany);
    opacity: 0.5;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* featured lot — slim right rail column */
.featured-lot {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    align-self: start;
    justify-self: end;
    max-width: 340px;
    width: 100%;
    position: relative;
    z-index: 2;
    padding: 1.6rem 1.5rem 1.8rem;
    background: rgba(253,246,238,0.66);
    backdrop-filter: blur(3px);
    border: 1px solid var(--linen);
    border-radius: 4px;
}
.featured-lot__kicker {
    text-transform: uppercase;
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    color: var(--rose);
    margin-bottom: 1.4rem;
}
.featured-lot__number {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: -0.02em;
    color: var(--mahogany);
    margin-bottom: 0.4rem;
}
.featured-lot__binomial {
    font-family: var(--font-botanic);
    font-style: italic;
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--mahogany);
    margin-bottom: 1.3rem;
}
.featured-lot__bidlabel {
    text-transform: uppercase;
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    opacity: 0.6;
    margin-bottom: 0.2rem;
}
.featured-lot__bid {
    font-family: var(--font-mono);
    font-size: clamp(2rem, 4vw, 2.7rem);
    color: var(--marigold);
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 1.2rem;
}
.featured-lot__meta {
    font-size: 0.72rem;
    color: var(--mahogany);
    opacity: 0.7;
}
.featured-lot__meta span { font-family: var(--font-mono); letter-spacing: -0.02em; }

/* ============================================================
   STEM DIVIDERS
   ============================================================ */
.stem-divider {
    width: 100%;
    height: 60px;
    line-height: 0;
}
.stem-divider svg { width: 100%; height: 100%; display: block; }
.stem-divider--flip svg { transform: scaleY(-1); }

/* ============================================================
   SECTION HEADS (shared)
   ============================================================ */
.section-kicker {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.24em;
    color: var(--rose);
    margin-bottom: 1rem;
}
.section-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 3.6rem);
    line-height: 1.02;
    color: var(--mahogany);
    margin-bottom: 1.1rem;
}
.section-lede, .section-title + p {
    max-width: 34ch;
    font-size: 0.9rem;
    color: var(--mahogany);
    opacity: 0.78;
}

/* ============================================================
   SPECIMEN RAIL
   ============================================================ */
.rail-section {
    padding: clamp(3rem, 7vw, 6rem) 0 clamp(3rem, 7vw, 6rem);
    scroll-snap-align: start;
}
.rail-head {
    display: grid;
    grid-template-columns: var(--asym-split);
    gap: var(--gap-section);
    align-items: end;
    padding: 0 clamp(1.5rem, 4vw, 4rem);
    margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.rail-head .section-kicker { grid-column: 1 / 2; }
.rail-head .section-title  { grid-column: 1 / 2; }
.rail-head .section-lede   { grid-column: 2 / 3; }

.specimen-rail {
    display: flex;
    gap: clamp(1.2rem, 2.5vw, 2rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 1.5rem;
    margin-left: clamp(40px, 12vw, 180px);
    margin-right: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--marigold) var(--linen);
}
.specimen-rail::-webkit-scrollbar { height: 6px; }
.specimen-rail::-webkit-scrollbar-track { background: var(--linen); }
.specimen-rail::-webkit-scrollbar-thumb { background: var(--marigold); border-radius: 3px; }

.lot-card {
    flex: 0 0 240px;
    width: 240px;
    height: 480px;
    position: relative;
    scroll-snap-align: start;
    background: var(--cream);
    border: 1px solid var(--linen);
    border-radius: 4px;
    display: grid;
    grid-template-rows: 60% 20% 20%;
    overflow: hidden;
}
.lot-card__portrait {
    position: relative;
    overflow: hidden;
}
.lot-card__portrait .mesh-peony {
    inset: -15%;
    opacity: 0.95;
}
.lot-card__name {
    padding: 0.85rem 0.95rem 0.4rem;
    border-top: 1px solid var(--linen);
}
.lot-card__binomial {
    font-family: var(--font-botanic);
    font-style: italic;
    font-weight: 500;
    font-size: 1.05rem;
    line-height: 1.15;
    color: var(--mahogany);
}
.lot-card__id {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: -0.02em;
    color: var(--mahogany);
    opacity: 0.6;
    margin-top: 0.3rem;
    text-transform: uppercase;
}
.lot-card__ticker {
    padding: 0.6rem 0.95rem 0.9rem;
    border-top: 1px solid var(--linen);
    background: var(--linen);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.lot-card__ticker-label {
    text-transform: uppercase;
    font-size: 0.55rem;
    letter-spacing: 0.18em;
    opacity: 0.6;
}
.lot-card__ticker-value {
    font-family: var(--font-mono);
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    color: var(--marigold);
    margin-top: 0.15rem;
}
.lot-card__ticker-value.is-bumped {
    animation: bidbump .6s ease;
}
@keyframes bidbump {
    0% { color: var(--rose); transform: translateY(0); }
    35% { transform: translateY(-3px); }
    100% { color: var(--marigold); transform: translateY(0); }
}
.lot-card.is-sealed .lot-card__ticker-value { color: var(--plum); }
.lot-card.is-sealed::after {
    content: "Sealed";
    position: absolute;
    top: 0.8rem; left: 0.8rem;
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: 0.55rem;
    letter-spacing: 0.2em;
    color: var(--cream);
    background: var(--plum);
    padding: 2px 7px;
    border-radius: 2px;
    z-index: 4;
}

/* ============================================================
   SKELETON — petal-silhouette placeholders + warm shimmer
   ============================================================ */
.skeleton {
    position: relative;
    overflow: hidden;
    background: var(--mesh-cloud);
}
.skeleton::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, var(--mesh-cloud) 30%, var(--apricot) 50%, var(--mesh-cloud) 70%);
    background-size: 200% 100%;
    animation: shimmer 2.4s linear infinite;
}
@keyframes shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}
.skeleton-petal {
    border-radius: 50% 8% 50% 8%;
}
/* a lot-card skeleton previews the actual 60/20/20 silhouette */
.lot-card.is-skeleton .lot-card__portrait { background: var(--mesh-cloud); }
.lot-card.is-skeleton .lot-card__name,
.lot-card.is-skeleton .lot-card__ticker { background: var(--cream); }
.skeleton-line {
    height: 0.7rem;
    margin: 0.5rem 0.95rem;
    border-radius: 50% 8% 50% 8%;
}
.skeleton-line.short { width: 45%; }

/* ============================================================
   THE BID LEDGER
   ============================================================ */
.ledger-section {
    padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 4vw, 4rem) clamp(4rem, 8vw, 7rem);
    scroll-snap-align: start;
}
.ledger-head {
    display: grid;
    grid-template-columns: var(--asym-split);
    gap: var(--gap-section);
    margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.ledger-head .section-kicker,
.ledger-head .section-title { grid-column: 2 / 3; }

/* the 5/7 split INVERTED — provenance on the left 7/12 */
.ledger-grid {
    display: grid;
    grid-template-columns: var(--asym-flip);
    gap: var(--gap-section);
    align-items: start;
}

/* LEFT 7/12 : provenance */
.provenance-lot {
    position: relative;
    display: grid;
    grid-template-columns: var(--asym-split);
    gap: clamp(1.2rem, 3vw, 2.4rem);
    align-items: center;
    padding: 1.6rem;
    border: 1px solid var(--linen);
    border-radius: 4px;
    background: var(--cream);
    overflow: hidden;
    min-height: 220px;
}
.provenance-lot .mesh-peony--lot {
    position: absolute;
    width: 42%;
    height: 130%;
    left: -4%;
    top: -15%;
    inset: auto;
    border-radius: 4px;
}
.provenance-lot__text { grid-column: 2 / 3; position: relative; z-index: 2; }
.provenance-lot__number {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}
.provenance-lot__binomial {
    font-family: var(--font-botanic);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.4rem, 3vw, 2rem);
    line-height: 1.15;
    margin-bottom: 1.1rem;
}
.lot-spec {
    list-style: none;
    display: grid;
    gap: 0.55rem;
}
.lot-spec li {
    display: flex;
    align-items: flex-start;
    font-size: 0.82rem;
    color: var(--mahogany);
    opacity: 0.85;
}

.bid-history {
    margin-top: clamp(1.5rem, 3vw, 2.4rem);
    border: 1px solid var(--linen);
    border-radius: 4px;
    overflow: hidden;
}
.bid-history__title {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: var(--mahogany);
    padding: 0.9rem 1.2rem;
    background: var(--linen);
}
.bid-history__rows { display: flex; flex-direction: column; }
.bid-row {
    display: grid;
    grid-template-columns: 5fr 4fr 3fr;
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.7rem 1.2rem;
    border-top: 1px solid var(--linen);
    font-size: 0.8rem;
}
.bid-row:nth-child(odd) { background: rgba(232,220,201,0.32); }
.bid-row__who { color: var(--mahogany); }
.bid-row__who em { font-family: var(--font-botanic); font-style: italic; }
.bid-row__when {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: -0.02em;
    opacity: 0.6;
}
.bid-row__amount {
    font-family: var(--font-mono);
    font-size: 0.92rem;
    letter-spacing: -0.02em;
    color: var(--marigold);
    text-align: right;
}
.bid-row.is-mine .bid-row__amount { color: var(--tea-stem); }
.bid-row.is-mine .bid-row__who::after {
    content: " · you";
    font-family: var(--font-body);
    color: var(--tea-stem);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
/* skeleton row */
.bid-row.is-skeleton > * {
    background: var(--mesh-cloud);
    color: transparent;
    border-radius: 50% 8% 50% 8%;
    height: 0.8rem;
    overflow: hidden;
    position: relative;
}
.bid-row.is-skeleton > *::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(110deg, var(--mesh-cloud) 30%, var(--apricot) 50%, var(--mesh-cloud) 70%);
    background-size: 200% 100%;
    animation: shimmer 2.4s linear infinite;
}
.bid-row.is-entering { animation: rowfade .45s ease both; }
@keyframes rowfade { from { opacity: 0; } to { opacity: 1; } }

/* RIGHT 5/12 : action */
.ledger-action {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.8rem, 4vw, 2.6rem);
}

.auction-clock {
    position: relative;
    width: 280px; height: 280px;
    display: grid;
    place-items: center;
}
.auction-clock canvas {
    position: relative;
    z-index: 2;
    width: 280px; height: 280px;
}
.auction-clock__count {
    position: absolute;
    z-index: 3;
    font-family: var(--font-mono);
    font-size: 2.3rem;
    letter-spacing: -0.02em;
    color: var(--mahogany);
}
.auction-clock.is-urgent .auction-clock__count { color: var(--plum); }
.auction-clock__label {
    position: absolute;
    z-index: 3;
    bottom: 56px;
    text-transform: uppercase;
    font-size: 0.58rem;
    letter-spacing: 0.2em;
    opacity: 0.6;
}

.bid-form {
    width: 100%;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.bid-form__label {
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    color: var(--mahogany);
}
.bid-form__field {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid var(--mahogany);
    border-radius: 3px;
    background: var(--cream);
    padding: 0 0.9rem;
}
.bid-form__prefix {
    font-family: var(--font-mono);
    color: var(--marigold);
    margin-right: 0.4rem;
    font-size: 1.05rem;
}
.bid-form__field input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-mono);
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    color: var(--mahogany);
    padding: 0.75rem 0;
}
.bid-form__field input::placeholder { color: var(--mahogany); opacity: 0.35; }

/* petal focus ring — four outwardly-expanding petal lobes */
.petal-ring {
    position: absolute;
    inset: -8px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease, transform .3s ease;
    transform: scale(0.9);
}
.petal-ring::before, .petal-ring::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--marigold);
    border-radius: 60% 12% 60% 12%;
    opacity: 0.6;
}
.petal-ring::after { transform: rotate(45deg); }
.bid-form__field:focus-within .petal-ring { opacity: 1; transform: scale(1); }
.bid-form__field:focus-within { border-color: var(--marigold); }

.bid-form__hint {
    font-size: 0.7rem;
    opacity: 0.6;
}
.bid-form__hint.is-error { color: var(--rose); opacity: 1; }
.bid-form__hint.is-ok { color: var(--tea-stem); opacity: 1; }

.bid-form__submit {
    position: relative;
    margin-top: 0.4rem;
    border: none;
    cursor: pointer;
    background: var(--mahogany);
    color: var(--cream);
    font-family: var(--font-display);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.78rem;
    padding: 0.95rem 1.2rem;
    border-radius: 3px;
    overflow: visible;
    transition: background .25s ease;
}
.bid-form__submit:hover { background: var(--rose); }
.bid-form__submit:active { background: var(--plum); }

/* petal-bloom microanimation */
.petal-burst {
    position: absolute;
    left: 50%; top: 50%;
    width: 0; height: 0;
    pointer-events: none;
}
.petal-burst i {
    position: absolute;
    left: 0; top: 0;
    width: 16px; height: 16px;
    margin: -8px;
    background: var(--marigold);
    border-radius: 50% 8% 50% 8%;
    opacity: 0;
    transform: scale(0);
}
.bid-form__submit.is-blooming .petal-burst i {
    animation: petalfly 480ms cubic-bezier(.2,.7,.3,1) forwards;
}
.petal-burst i:nth-child(1) { --dx: 0px;    --dy: -80px; transform: rotate(0deg); }
.petal-burst i:nth-child(2) { --dx: 80px;   --dy: 0px;   transform: rotate(45deg); }
.petal-burst i:nth-child(3) { --dx: 0px;    --dy: 80px;  transform: rotate(90deg); }
.petal-burst i:nth-child(4) { --dx: -80px;  --dy: 0px;   transform: rotate(135deg); }
@keyframes petalfly {
    0%   { opacity: 0; transform: translate(0,0) scale(0); }
    25%  { opacity: 1; }
    70%  { opacity: 0.95; }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); }
}

/* ============================================================
   THE CONSERVATORY (footer)
   ============================================================ */
.conservatory {
    position: relative;
    min-height: 70vh;
    background: var(--linen);
    overflow: hidden;
    display: flex;
    align-items: stretch;
    scroll-snap-align: start;
}
.conservatory-illustration {
    position: absolute;
    left: -6%;
    bottom: -10%;
    width: 70%;
    height: 120%;
    opacity: 0.85;
}
.conservatory-text {
    margin-left: auto;
    width: 280px;
    flex: 0 0 280px;
    align-self: center;
    padding: 2.5rem clamp(1.5rem, 4vw, 3rem) 2.5rem 0;
    position: relative;
    z-index: 2;
}
.conservatory-text__mark {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.8rem;
    letter-spacing: 0.02em;
    color: var(--mahogany);
    margin-bottom: 1.3rem;
}
.conservatory-text__line {
    font-size: 0.8rem;
    color: var(--mahogany);
    opacity: 0.85;
    margin-bottom: 1rem;
}
.conservatory-text__links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1.4rem 0;
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
}
.conservatory-text__links a { color: var(--mahogany); padding-bottom: 2px; border-bottom: 1px solid transparent; transition: border-color .25s, color .25s; }
.conservatory-text__links a:hover { border-color: var(--rose); color: var(--rose); }
.conservatory-text__fine {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: -0.02em;
    color: var(--mahogany);
    opacity: 0.5;
    line-height: 1.7;
}

/* ============================================================
   RESPONSIVE — vertical asymmetry, never collapse the void
   ============================================================ */
@media (max-width: 768px) {
    .masthead {
        grid-template-columns: 1fr;
        grid-template-rows: auto 7fr 5fr;
        min-height: 100vh;
    }
    .mesh-peony--masthead {
        width: 110vw; height: 42vh;
        left: -5vw; top: -8vh;
    }
    .masthead-nav { flex-direction: column-reverse; align-items: flex-start; gap: 0.8rem; }
    .masthead-nav::after { left: 30%; }
    .wordmark { font-size: clamp(3rem, 16vw, 4rem); }
    .masthead-links { flex-wrap: wrap; }
    .featured-lot {
        grid-row: 2 / 3; grid-column: 1 / -1;
        justify-self: stretch; max-width: none;
        align-self: end;
    }
    .masthead-void { grid-row: 3 / 4; grid-column: 1 / -1; align-self: center; }
    .void-note { writing-mode: horizontal-tb; transform: none; }

    .rail-head { grid-template-columns: 1fr; }
    .rail-head .section-kicker,
    .rail-head .section-title,
    .rail-head .section-lede { grid-column: 1 / -1; }
    .specimen-rail { margin-left: clamp(20px, 8vw, 60px); }

    .ledger-head { grid-template-columns: 1fr; }
    .ledger-head .section-kicker,
    .ledger-head .section-title { grid-column: 1 / -1; }
    .ledger-grid { grid-template-columns: 1fr; }
    .provenance-lot { grid-template-columns: 1fr; min-height: 0; }
    .provenance-lot .mesh-peony--lot { width: 100%; height: 36%; left: 0; top: -10%; }
    .provenance-lot__text { grid-column: 1 / -1; }

    .conservatory { flex-direction: column; min-height: 90vh; }
    .conservatory-illustration { width: 100%; height: 58%; left: -10%; bottom: auto; top: -4%; }
    .conservatory-text { width: 100%; flex: none; margin-left: 0; padding: 2rem 1.5rem; margin-top: 40vh; }
}