/* =========================================
   convivial — shared styles
   convivial.works
   ========================================= */

/* ---- Self-hosted fonts ----
   Variable fonts: one file covers all weights (200–800).
   DM Sans: individual files per weight (smaller than variable).
   unicode-range scoped to latin to avoid loading for other scripts.
   ---- */

/* Newsreader — normal */
@font-face {
    font-family: 'Newsreader';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('/fonts/newsreader-latin-normal.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Newsreader — italic */
@font-face {
    font-family: 'Newsreader';
    font-style: italic;
    font-weight: 200 800;
    font-display: swap;
    src: url('/fonts/newsreader-latin-italic.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Fraunces — normal (display, weight 700 only) */
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('/fonts/fraunces-latin-normal.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* DM Sans — 400 normal */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/dm-sans-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* DM Sans — 400 italic */
@font-face {
    font-family: 'DM Sans';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/dm-sans-400-italic.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* DM Sans — 500 normal */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/dm-sans-500-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* DM Sans — 600 normal */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/dm-sans-600-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---- Design tokens ---- */

:root {
    --ink: #1a1a18;
    --paper: #f6f3ec;
    --accent: #8b4513;
    --muted: #6b6560;
    --rule: #c9c2b6;
}

/* ---- Reset & base ---- */

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

html {
    font-size: 18px;
    scroll-behavior: smooth;
    overflow-y: scroll;
}

body {
    font-family: 'Newsreader', Georgia, 'Times New Roman', serif;
    color: var(--ink);
    background-color: var(--paper);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ---- Header ----
   The <header> is full-width so its border-bottom spans the viewport.
   .header-inner constrains logo + nav to the 720px content column,
   keeping them visually aligned with the text below.
   ---- */

.site-header {
    /* border lives on .header-inner so the rule aligns with the content column */
}

.header-inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--rule);
}

.site-name {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.site-name a {
    color: inherit;
    text-decoration: none;
}

.site-nav {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.site-nav a {
    color: inherit;
    text-decoration: none;
    margin-left: 2rem;
}

.site-nav a:hover { color: var(--ink); }
.site-nav a.active { color: var(--ink); }

/* ---- Footer ---- */

.site-footer {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 2rem 5rem;
}

.site-footer .footer-inner {
    padding-top: 2rem;
    border-top: 1px solid var(--rule);
}

.site-footer p {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    color: var(--muted);
}

.site-footer a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid var(--accent);
}

.site-footer a:hover {
    color: var(--ink);
    border-color: var(--ink);
}

/* ---- Responsive ---- */

@media (max-width: 680px) {
    html { font-size: 16px; }
    .header-inner { padding: 1.2rem 1.5rem; }
    .site-nav a { margin-left: 1.2rem; }
    .site-footer { padding: 0 1.5rem 4rem; }
}

/* ---- Print ---- */

@media print {
    body { background: white; font-size: 11pt; }
    .site-header, .site-nav { display: none; }
}