/* ==========================================================================
   VELNOIR — the-first-900 landing (Phase 7). Composed as a descent: the
   unfinished home resolved by an arrival. Token grammar only; drama at the
   named moments, silence everywhere else. Breakpoints per tokens.css
   header: 36rem / 56.25rem / 75rem.
   ========================================================================== */

/* --- The hero: one composed viewport, the LCP nodes never pre-hidden. --- */

.hero {
    padding-block: var(--space-8) var(--space-9);
    border-block-end: var(--hairline) solid var(--line);
    background:
        radial-gradient(120% 90% at 85% 0%, var(--gold-glow), transparent 60%),
        var(--surface);
}

.hero__grid {
    display: grid;
    gap: var(--space-7);
    align-items: center;
}

.hero__kicker {
    margin-block-end: var(--space-5);
}

.hero__title {
    font-size: var(--text-6);
    font-weight: 500;
    max-width: 13em;
}

.hero__lede {
    margin-block-start: var(--space-5);
    max-width: 34em;
}

.hero__actions {
    margin-block-start: var(--space-6);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}

.hero__aside {
    margin-block-start: var(--space-4);
    color: var(--ink-3);
    font-size: var(--text--1);
}

.hero__media {
    position: relative;
    border: var(--hairline) solid var(--line);
    border-radius: var(--radius-2);
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: var(--surface-raised);
}

.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, var(--scrim-soft), transparent 45%);
    pointer-events: none;
}

@media (min-width: 56.25rem) {
    .hero {
        min-height: 82svh;
        display: grid;
        align-items: center;
    }

    .hero__grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: var(--space-8);
    }
}

/* --- Manifesto: typography carries it; one idea per breath. -------------- */

.manifesto__header {
    max-width: var(--container-text);
}

.manifesto__title {
    font-size: var(--text-4);
    margin-block-end: var(--space-4);
}

.manifesto__lede {
    color: var(--ink-2);
    font-size: var(--text-1);
    line-height: var(--leading-body);
}

.manifesto__line {
    font-family: var(--font-display);
    font-size: var(--text-4);
    font-weight: 500;
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    max-width: 20em;
    margin-block: var(--space-9);
    text-wrap: balance;
}

.manifesto__line--offset {
    margin-inline-start: auto;
    text-align: right;
}

.manifesto__media {
    max-width: var(--container-text);
    margin-inline-start: auto;
}

/* --- Published partner / creator stories: optional, quiet, governed. ----- */

.editorial-stories {
    border-block: var(--hairline) solid var(--line);
    background: var(--surface-raised);
}

.editorial-stories__grid {
    display: grid;
    gap: var(--space-8);
}

.editorial-story {
    max-width: var(--container-text);
}

.editorial-story__title {
    margin-block: var(--space-3) var(--space-5);
    font-size: var(--text-3);
    text-wrap: balance;
}

.editorial-story__body {
    color: var(--ink-2);
}

.editorial-story__body + .editorial-story__body {
    margin-block-start: var(--space-4);
}

.editorial-story__media {
    margin-block-end: 0;
}

@media (min-width: 56.25rem) {
    .editorial-stories__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --- The three scents: per-panel accent scoping (semantic tokens only). -- */

.scents__title {
    font-size: var(--text-4);
    margin-block-end: var(--space-7);
    max-width: 16em;
}

.scents__grid {
    display: grid;
    gap: var(--space-7);
}

.scent {
    border-block-start: 2px solid var(--panel-accent, var(--line));
    padding-block-start: var(--space-5);
}

.scent--hn { --panel-accent: var(--scent-hn-accent); }
.scent--ss { --panel-accent: var(--scent-ss-accent); }
.scent--mt { --panel-accent: var(--scent-mt-accent); }

.scent__media {
    border-radius: var(--radius-2);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--surface-raised);
    margin-block-end: var(--space-5);
}

.scent__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scent__name {
    font-size: var(--text-2);
    letter-spacing: var(--tracking-soft);
    text-transform: uppercase;
    color: var(--panel-accent, var(--ink));
}

.scent__world {
    margin-block-start: var(--space-3);
    color: var(--ink-2);
    line-height: var(--leading-snug);
}

.scent__notes {
    margin-block-start: var(--space-4);
    font-size: var(--text--1);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--ink-3);
}

@media (min-width: 56.25rem) {
    .scents__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-6);
    }
}

/* --- THE FIRST 900 mechanics: ritual, diagrammatic, quiet. ---------------- */

.mechanics {
    border-block: var(--hairline) solid var(--line);
    background: var(--surface-raised);
}

.mechanics__title {
    font-size: var(--text-4);
    margin-block-end: var(--space-7);
}

.mechanics__grid {
    display: grid;
    gap: var(--space-6);
}

.mechanic {
    border-inline-start: var(--hairline) solid var(--line);
    padding-inline-start: var(--space-5);
}

.mechanic__figure {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-5);
    line-height: var(--leading-tight);
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.mechanic__label {
    margin-block-start: var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--text-0);
    font-weight: 700;
    letter-spacing: var(--tracking-soft);
}

.mechanic__body {
    margin-block-start: var(--space-2);
    color: var(--ink-2);
    font-size: var(--text-0);
}

.mechanics__countdown {
    margin-block-start: var(--space-8);
}

.mechanics__counter {
    margin-block-start: var(--space-7);
}

@media (min-width: 36rem) {
    .mechanics__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 75rem) {
    .mechanics__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* --- Countdown block. ------------------------------------------------------ */

.countdown-block__static {
    font-family: var(--font-display);
    font-size: var(--text-2);
}

.countdown-block__opened {
    color: var(--accent);
    font-size: var(--text-1);
}

/* --- Concierge invitation. ------------------------------------------------- */

.concierge__frame {
    border: var(--hairline) solid var(--line);
    border-radius: var(--radius-2);
    padding: var(--space-8) var(--container-pad);
    background:
        radial-gradient(80% 120% at 15% 100%, var(--gold-glow), transparent 55%),
        var(--surface-raised);
}

.concierge__title {
    font-size: var(--text-3);
    max-width: 18em;
}

.concierge__lede {
    margin-block: var(--space-4) var(--space-6);
}

.concierge--guide {
    padding-block-end: var(--space-6);
}

.concierge--guide + .scents {
    padding-block-start: var(--space-7);
}

.concierge--guide .concierge__lede {
    margin-block-end: 0;
}

/* --- Waitlist close + the join micro-response (named moment no. 3,
       deliberately CSS-only: a hairline draws under the welcome line). ---- */

.waitlist__frame {
    max-width: var(--container-text);
}

.waitlist__title {
    font-size: var(--text-4);
}

.waitlist__form {
    margin-block-start: var(--space-7);
}

.waitlist__submit {
    margin-block-start: var(--space-5);
}

.waitlist__smallprint {
    margin-block-start: var(--space-4);
    font-size: var(--text--1);
    color: var(--ink-3);
}

.field__optional {
    text-transform: none;
    letter-spacing: normal;
    color: var(--ink-3);
}

.waitlist__response {
    min-height: var(--space-8);
    margin-block-start: var(--space-5);
}

.waitlist__welcome {
    position: relative;
    overflow: hidden;
}

.waitlist__welcome::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: 2px;
    background: var(--accent);
    transform-origin: left;
}

@media (prefers-reduced-motion: no-preference) {
    .waitlist__welcome::after {
        animation: waitlist-underline var(--dur-4) var(--ease-out) both;
    }

    @keyframes waitlist-underline {
        from { transform: scaleX(0); }
        to { transform: scaleX(1); }
    }
}