/* ------------------------------------------------------------------
   Northern Tales — base
   Typography, colour tokens, resets, inline elements.
   ------------------------------------------------------------------ */

:root {
    --parchment:   #f2ead8;
    --parchment-2: #ece2cc;
    --ink-deep:    #1a1410;
    --ink-faded:   #4a3e32;
    --bloodstone:  #6b1f1f;
    --bronze:      #8a6a2e;
    --moss:        #3d4a2a;
    --mist:        #6b7a85;
    --shadow:      #2a2520;
    --gold-leaf:   #b8924d;

    --bg:            var(--parchment);
    --bg-raised:     var(--parchment-2);
    --fg:            var(--ink-deep);
    --fg-muted:      var(--ink-faded);
    --accent:        var(--bloodstone);
    --link:          var(--bronze);
    --link-hover:    var(--bloodstone);

    --rule:          rgba(26, 20, 16, 0.18);
    --rule-strong:   rgba(26, 20, 16, 0.55);

    --bg-header:     rgba(242, 234, 216, 0.88);
    --shadow-soft:   0 1px 4px rgba(26, 20, 16, 0.08), 0 4px 16px rgba(26, 20, 16, 0.04);
    --shadow-card:   0 2px 8px rgba(26, 20, 16, 0.1), 0 8px 24px rgba(26, 20, 16, 0.06);

    --measure:       68ch;
    --step:          1.25rem;

    --font-body:     "Crimson Text", Georgia, "Times New Roman", Cambria, serif;
    --font-display:  "Crimson Text", Georgia, "Times New Roman", Cambria, serif;
    --font-sans:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

    --body-size:     1.1875rem;   /* 19px */
    --body-leading:  1.7;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:         #1a1410;
        --bg-raised:  #221a15;
        --fg:         var(--parchment);
        --fg-muted:   #c7bda8;
        --accent:     #c54b4b;
        --link:       var(--gold-leaf);
        --link-hover: #e3c27a;
        --rule:       rgba(242, 234, 216, 0.2);
        --rule-strong:rgba(242, 234, 216, 0.55);
        --bg-header:  rgba(26, 20, 16, 0.88);
        --shadow-soft: 0 1px 4px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.1);
        --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.15);
    }
}

body.dark {
    --bg:         #1a1410;
    --bg-raised:  #221a15;
    --fg:         var(--parchment);
    --fg-muted:   #c7bda8;
    --accent:     #c54b4b;
    --link:       var(--gold-leaf);
    --link-hover: #e3c27a;
    --rule:       rgba(242, 234, 216, 0.2);
    --rule-strong:rgba(242, 234, 216, 0.55);
    --bg-header:  rgba(26, 20, 16, 0.88);
    --shadow-soft: 0 1px 4px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.1);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* -----------------------------------------------------------------
   Fonts — self-hosted, subsetted woff2 from /srv/aedelore/app/html/fonts
   ----------------------------------------------------------------- */

@font-face {
    font-family: "Crimson Text";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/crimson-400.woff2") format("woff2");
}
@font-face {
    font-family: "Crimson Text";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/crimson-400-italic.woff2") format("woff2");
}
@font-face {
    font-family: "Crimson Text";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/assets/fonts/crimson-600.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/inter-400.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/assets/fonts/inter-600.woff2") format("woff2");
}

/* -----------------------------------------------------------------
   Reset-ish
   ----------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    background-image:
        radial-gradient(ellipse at 15% 30%, rgba(138, 106, 46, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 15%, rgba(138, 106, 46, 0.03) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 80%, rgba(107, 31, 31, 0.02) 0%, transparent 50%);
    background-attachment: fixed;
    color: var(--fg);
    font-family: var(--font-body);
    font-size: var(--body-size);
    line-height: var(--body-leading);
    font-feature-settings: "kern", "liga", "onum", "calt";
    text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }

/* -----------------------------------------------------------------
   Typography
   ----------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--accent);
    line-height: 1.15;
    margin: 2rem 0 0.8rem;
    letter-spacing: 0.01em;
}
h1 { font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.1rem); margin-top: 0; letter-spacing: -0.01em; }
h2 { font-size: 1.7rem; letter-spacing: 0.005em; }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.15rem; font-variant: small-caps; letter-spacing: 0.04em; }

p { margin: 0 0 var(--step); }

a {
    color: var(--link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color 0.2s ease, text-decoration-thickness 0.2s ease;
}
a:hover, a:focus-visible {
    color: var(--link-hover);
    text-decoration-thickness: 2px;
}

blockquote {
    margin: 1.5rem 0;
    padding: 0.25rem 0 0.25rem 1.25rem;
    border-left: 2px solid var(--rule-strong);
    color: var(--fg-muted);
    font-style: italic;
}

cite { font-style: italic; }

em { font-style: italic; }
strong { font-weight: 600; }

hr {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: 2.5rem 0;
}

.placeholder {
    color: var(--fg-muted);
    font-style: italic;
    border-left: 2px dotted var(--rule-strong);
    padding-left: 1rem;
    margin-left: 0;
}

/* -----------------------------------------------------------------
   Skip link & focus
   ----------------------------------------------------------------- */

.skip-link {
    position: absolute;
    top: -2.5rem;
    left: 0.5rem;
    background: var(--fg);
    color: var(--bg);
    padding: 0.5rem 0.75rem;
    z-index: 100;
    text-decoration: none;
}
.skip-link:focus { top: 0.5rem; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* -----------------------------------------------------------------
   Drop cap — first paragraph of intro sections
   ----------------------------------------------------------------- */

.drop-cap::first-letter {
    float: left;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 3.4em;
    line-height: 0.8;
    padding: 0.05em 0.1em 0 0;
    color: var(--accent);
}

/* -----------------------------------------------------------------
   Ornamental divider
   ----------------------------------------------------------------- */

.ornament {
    display: block;
    margin: 2.5rem auto;
    color: var(--bronze);
    opacity: 0.85;
}

/* -----------------------------------------------------------------
   Lifted card style for raised boxes
   ----------------------------------------------------------------- */

.lifted {
    box-shadow: var(--shadow-soft);
    border-radius: 3px;
}
.lifted:hover {
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.25s ease;
}