/* NERA — shared theme v2. Marcellus (Roman caps) + Hanken Grotesk.
   Read CLAUDE.md before editing. Colors strictly: 1 black, 1 white, 1 mat, 1 muted. */

@font-face {
    font-family: 'Marcellus';
    src: url('/fonts/Marcellus.ttf?v=2') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Hanken Grotesk';
    src: url('/fonts/HankenGrotesk.ttf?v=2') format('truetype-variations');
    font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Hanken Grotesk';
    src: url('/fonts/HankenGrotesk-Italic.ttf?v=2') format('truetype-variations');
    font-weight: 100 900; font-style: italic; font-display: swap;
}

:root {
    --black:    #0A0A0A;
    --white:    #FFFFFF;
    --paper:    #FAFAF8;
    --rule:     #1F1F22;
    --muted:    #8A8A8E;
    --muted-2:  #C7C7CC;

    --font-display: 'Marcellus', 'Trajan Pro', 'Times New Roman', serif;
    --font-body:    'Hanken Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif;

    --gutter:   clamp(1.25rem, 4vw, 3rem);
    --max-w:    1100px;
}

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

html, body {
    height: 100%; min-height: 100vh; min-height: 100lvh;
    background: var(--black); color: var(--white);
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
html { touch-action: manipulation; }
body { font-family: var(--font-body); font-weight: 300; line-height: 1.6; }

::selection { background: var(--white); color: var(--black); }

a { color: inherit; text-decoration: none; }

/* WORDMARK — Marcellus, wide letter-spacing. The whole brand sits in
   these 4 letters; don't compress them. */
.wordmark {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    font-size: 1rem;
    text-indent: 0.42em; /* offset the right-side letterspacing visually */
}
.wordmark-lg {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    text-indent: 0.42em;
}

/* THE LETTER TWIST — the "A" in NERA. SVG drawn so the A baseline IS the
   bottom edge of the viewBox; height matches Marcellus cap-height. Vertical
   alignment is `baseline` so the A sits ON the same line as N E R, not below.
   Fill is forced via the SVG attribute (currentColor) — CSS-only fill was
   unreliable on iOS Safari, the path defaulted to black and disappeared on
   the dark background. */
.nera-a {
    display: inline-block;
    height: 0.72em;        /* Marcellus cap-height ~72% of em */
    width: 0.68em;
    vertical-align: baseline;
    margin: 0;
}

/* Marcellus for any display headlines too. */
.serif { font-family: var(--font-display); font-weight: 400; }
.italic { font-family: var(--font-body); font-style: italic; font-weight: 300; }

/* Page chrome */
.page {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: clamp(2.5rem, 6vw, 4rem) var(--gutter) clamp(3rem, 8vw, 5rem);
}
.masthead {
    display: flex; align-items: center; justify-content: space-between;
    padding: clamp(1.1rem, 2.5vw, 1.6rem) var(--gutter);
    border-bottom: 1px solid var(--rule);
}
.masthead a.nav-link {
    font-family: var(--font-body); font-weight: 400;
    font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--muted); transition: color 0.2s ease;
}
.masthead a.nav-link:hover, .masthead a.nav-link.is-active { color: var(--white); }
.masthead nav { display: flex; gap: clamp(1rem, 3vw, 2rem); }

.footer {
    border-top: 1px solid var(--rule);
    padding: 2rem var(--gutter);
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 1rem;
    font-size: 0.70rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--muted);
}
.footer a:hover { color: var(--white); }

/* Prose — Hanken Grotesk body, Marcellus display. */
.prose {
    max-width: 620px; margin: 0 auto;
    font-size: clamp(1rem, 1.4vw, 1.075rem);
    color: var(--muted-2);
}
.prose h1, .prose h2 {
    font-family: var(--font-display); font-weight: 400;
    color: var(--white);
    letter-spacing: 0.01em;
    line-height: 1.18;
}
.prose h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); margin-bottom: 1.6rem; }
.prose h2 { font-size: clamp(1.6rem, 3.5vw, 2.1rem); margin: 3rem 0 1rem; letter-spacing: 0.02em; }
.prose p { margin-bottom: 1.2rem; }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem auto; max-width: 80px; }
.prose strong { color: var(--white); font-weight: 500; }
.prose em { font-style: italic; }

/* Button — Hanken caps, white on black. One accent: white. */
.btn {
    display: inline-block;
    font-family: var(--font-body); font-weight: 500;
    font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--black); background: var(--white);
    padding: 1rem 2rem; border: 0; cursor: pointer;
    transition: opacity 0.25s ease;
}
.btn:hover { opacity: 0.86; }
.btn--ghost {
    background: transparent; color: var(--white);
    border: 1px solid rgba(255,255,255,0.18);
}
.btn--ghost:hover { border-color: var(--white); }

@media (prefers-reduced-motion: reduce) {
    * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}