/*
 * The landing page — the one page with design latitude.
 *
 * The rest of the app is a restrained reading UI; this is a quiet threshold.
 * No feature grid, no hero stat: there is one thing to say and one way in.
 * The boldness is spent in a single place — the hero is a line from the vault
 * with a real [[wikilink]] in it, styled exactly as the reader styles one, so
 * the front door is made of the same material as the rooms.
 *
 * Every value is a token; no new palette.
 */

.landing {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: var(--space-2xl) var(--space-lg);
    background-color: var(--color-background);
    color: var(--color-text);
}

.landing__inner {
    width: 100%;
    max-width: 34rem;
    /* One orchestrated entrance, once, and only if motion is welcome. */
    animation: landing-rise var(--transition-base) ease both;
}

/* The mark in brand indigo, with the wordmark beside it. */
.landing__brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: var(--space-xl);
}

.landing__brand .logo {
    font-size: 2rem;
    color: var(--color-primary);
}

.landing__wordmark {
    font-family: var(--font-ui);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    /* Spacing now lives on .landing__brand, which wraps mark + wordmark. */
}

/*
 * The hero is set in the reading serif, because reading is what this is. Large
 * but quiet — a sentence, not a slogan.
 */
.landing__hero {
    font-family: var(--font-reading);
    font-weight: 400;
    font-size: 1.875rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--color-text);
    margin: 0;
    text-wrap: balance;
}

/*
 * The signature. The vault's own [[…]] syntax, in the reader's live-link
 * treatment (main.css .wikilink): a quiet indigo underline that thickens on
 * hover. It is not a link that goes anywhere — it is the product showing what
 * it is made of.
 */
.landing__wikilink {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    white-space: nowrap;
}

.landing__sub {
    max-width: 28rem;
    margin-top: var(--space-lg);
    font-family: var(--font-ui);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.landing__action {
    margin-top: var(--space-2xl);
}

.landing__button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: 2.75rem;
    padding: 0 var(--space-xl);
    background-color: var(--color-primary);
    border-radius: var(--radius-md);
    color: var(--color-text-inverse);
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--transition-fast);
}

.landing__button::after {
    /* A forward arrow — this is a way in. */
    content: "→";
    font-size: 1.05em;
    transition: transform var(--transition-fast);
}

.landing__button:hover {
    background-color: var(--color-primary-hover);
    /* Hold the inverse text colour; otherwise the global a:hover rule recolours
       it to --color-primary-hover — the same value the background becomes, so
       the label disappears. */
    color: var(--color-text-inverse);
}

.landing__button:hover::after {
    transform: translateX(2px);
}

/* Explains the absence of a signup path rather than leaving a hole (FR-003). */
.landing__note {
    margin-top: var(--space-md);
    font-family: var(--font-ui);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* The theme control a guest may use, tucked in the corner. */
.landing__theme {
    position: absolute;
    top: var(--space-lg);
    right: var(--space-lg);
}

@media (min-width: 768px) {
    .landing__hero {
        font-size: 2.5rem;
    }
}

@keyframes landing-rise {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .landing__inner {
        animation: none;
    }
}