/* ============================================================
   SPACEHOLDERS MAGAZINE · digital print design system
   Warm paper, near black ink, editorial serifs, film grain.
   Deliberately not the teal Youniq product language.
   ============================================================ */

/* The magazine name wears Bodoni Moda: highest stroke contrast,
   hairline serifs, more didone than calligraphic. */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&display=swap');

:root {
    --font-logo: 'Bodoni Moda', 'Fraunces', serif;
    /* Paper & ink */
    --paper: #F6F1E8;
    --paper-deep: #EFE7D8;
    --ink: #171410;
    --ink-soft: #4A443B;
    --ink-faint: #8A8172;
    --line: rgba(23, 20, 16, 0.14);
    --accent: #B4552D;          /* burnt sienna, sparing editorial accent */
    --accent-soft: #D9B29A;

    /* Type */
    --font-display: 'Fraunces', 'Cormorant Garamond', serif;
    --font-serif: 'Cormorant Garamond', Georgia, serif;
    --font-sans: 'Inter', -apple-system, sans-serif;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
    font-family: var(--font-sans);
    background: var(--paper);
    color: var(--ink-soft);
    line-height: 1.7;
    overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

/* ── Masthead bar ─────────────────────────────────────────── */
.mast {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.4rem clamp(1.25rem, 4vw, 3rem);
    border-bottom: 1px solid var(--line);
}

.mast-word {
    font-family: var(--font-logo);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: 0.01em;
    color: var(--ink);
}

.mast-word em { font-style: italic; font-weight: 500; }

.mast-issue {
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn-ink, .btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.95rem 2.1rem;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 0;
    transition: all 0.4s var(--ease);
}

.btn-ink {
    background: var(--ink);
    color: var(--paper);
    border: 1px solid var(--ink);
}

.btn-ink:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-2px); }

.btn-ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--ink);
}

.btn-ghost:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }

/* ── Small caps label ─────────────────────────────────────── */
.kicker {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--accent);
}

/* ── Footer ───────────────────────────────────────────────── */
.foot {
    border-top: 1px solid var(--line);
    padding: 2rem clamp(1.25rem, 4vw, 3rem);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--ink-faint);
    letter-spacing: 0.06em;
}

.foot a:hover { color: var(--ink); }

/* ── Reveal animation ─────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    animation: reveal 1s var(--ease) forwards;
}

.reveal-1 { animation-delay: 0.12s; }
.reveal-2 { animation-delay: 0.24s; }
.reveal-3 { animation-delay: 0.38s; }
.reveal-4 { animation-delay: 0.55s; }

@keyframes reveal { to { opacity: 1; transform: translateY(0); } }