/* Public site — global helpers, typography extensions, layout primitives.
   Keep this file lean; anything visual that belongs to a specific component
   lives in that component's own .css file. */

.site {
    background: var(--color-bg);
    color: var(--color-text);
    overflow-x: hidden;
}

.site__main {
    display: block;
    min-height: 60vh;
}

/* Public-site typography inherits color from its parent context (hero, tile,
   card, etc.) instead of the global rules in base.css. This is what makes
   cream titles on dark photos actually render cream instead of dark brown. */
.site h1,
.site h2,
.site h3,
.site h4,
.site h5,
.site h6,
.site p {
    color: inherit;
}

/* Links inside decorated surfaces (hero, tiles, footer) follow their parent's
   color. Prose links inside .prose-serif get their own accent treatment. */
.site-hero a,
.landing-tile,
.site-footer a,
.visit-panel a {
    color: inherit;
}

/* — Typography scale used only on the public site — */

.serif {
    font-family: var(--font-serif);
    font-weight: 400;
    letter-spacing: 0.005em;
}

.serif-light {
    font-family: var(--font-serif);
    font-weight: 300;
    letter-spacing: 0.01em;
}

.script {
    font-family: var(--font-script);
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1;
}

.eyebrow-serif {
    font-family: var(--font-serif);
    font-weight: 300;
    font-style: italic;
    font-size: var(--fs-md);
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}

.display-xl {
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: clamp(56px, 9vw, var(--fs-6xl));
    line-height: 1.02;
    letter-spacing: -0.01em;
}

.display-lg {
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: clamp(40px, 6vw, var(--fs-5xl));
    line-height: 1.05;
    letter-spacing: -0.005em;
}

.display-md {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(28px, 4vw, var(--fs-4xl));
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.subtitle-serif {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(20px, 2.2vw, var(--fs-xl));
    color: var(--color-text-muted);
    line-height: 1.35;
}

.prose-serif {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: var(--fs-md);
    line-height: 1.75;
    color: var(--color-text);
    max-width: 60ch;
}

.prose-serif p + p {
    margin-top: var(--space-3);
}

/* — Section spacing rhythm — */

.site-section {
    padding-block: clamp(var(--space-7), 10vw, var(--space-9));
    padding-inline: clamp(var(--space-5), 6vw, var(--space-8));
}

.site-section--flush {
    padding-inline: 0;
}

.site-container {
    max-width: var(--site-container);
    margin-inline: auto;
}

.site-container--narrow {
    max-width: var(--site-container-narrow);
    margin-inline: auto;
}

/* — Ornament (small woven "H" decoration used above section headings) — */

.ornament {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-inline: auto;
    color: var(--color-text);
    opacity: 0.7;
}

.ornament svg {
    width: 100%;
    height: 100%;
}

/* — Site-only buttons (thin, unfilled by default) — */

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: transparent;
    color: currentColor;
    border: 1px solid currentColor;
    border-radius: 0;
    font-family: var(--font-family);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background var(--dur-base) var(--ease-out),
                color var(--dur-base) var(--ease-out);
}

.btn-ghost:hover {
    background: var(--color-text);
    color: var(--color-bg);
}

.btn-solid-dark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background: var(--color-text);
    color: var(--color-bg);
    border: 1px solid var(--color-text);
    border-radius: 0;
    font-family: var(--font-family);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background var(--dur-base) var(--ease-out),
                color var(--dur-base) var(--ease-out);
}

.btn-solid-dark:hover {
    background: transparent;
    color: var(--color-text);
}

/* — Skip link for accessibility — */

.skip-link {
    position: absolute;
    inset-inline-start: var(--space-3);
    inset-block-start: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: var(--color-text);
    color: var(--color-bg);
    border-radius: var(--radius-sm);
    z-index: 999;
    transform: translateY(-200%);
    transition: transform var(--dur-base) var(--ease-out);
}

.skip-link:focus {
    transform: translateY(0);
}

/* — Utility centring — */

.center-text { text-align: center; }
.mx-auto { margin-inline: auto; }
.flex-center { display: flex; justify-content: center; }
.stack-4 > * + * { margin-block-start: var(--space-4); }
.stack-5 > * + * { margin-block-start: var(--space-5); }
.stack-6 > * + * { margin-block-start: var(--space-6); }
.stack-7 > * + * { margin-block-start: var(--space-7); }

/* — Scroll reveal — elements with [data-reveal] fade + lift into view — */

[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 700ms var(--ease-out),
                transform 700ms var(--ease-out);
    will-change: opacity, transform;
}

[data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}