/* ==========================================================================
   1. FONT DEFINITIONS
   We define 3 families: 'Marauder Text', 'Marauder Display', 'Marauder Caption'
   ========================================================================== */

/* --- BODY TEXT (Marauder Text) --- */
@font-face {
    font-family: 'Marauder Text';
    src: url('fonts/Marauder-Text-Regular.woff2') format('woff2'),
         url('fonts/Marauder-Text-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Marauder Text';
    src: url('fonts/Marauder-Text-Italic.woff2') format('woff2'),
         url('fonts/Marauder-Text-Italic.otf') format('opentype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Marauder Text';
    src: url('fonts/Marauder-Text-Bold.woff2') format('woff2'),
         url('fonts/Marauder-Text-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Marauder Text';
    src: url('fonts/Marauder-Text-BoldItalic.woff2') format('woff2'),
         url('fonts/Marauder-Text-BoldItalic.otf') format('opentype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

/* --- HEADERS (Marauder Display) --- */
/* Display fonts are usually used for larger sizes where details matter */
@font-face {
    font-family: 'Marauder Display';
    src: url('fonts/Marauder-Display-Regular.woff2') format('woff2'),
         url('fonts/Marauder-Display-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Marauder Display';
    src: url('fonts/Marauder-Display-Italic.woff2') format('woff2'),
         url('fonts/Marauder-Display-Italic.otf') format('opentype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Marauder Display';
    src: url('fonts/Marauder-Display-Bold.woff2') format('woff2'),
         url('fonts/Marauder-Display-Bold.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Marauder Display';
    src: url('fonts/Marauder-Display-BoldItalic.woff2') format('woff2'),
         url('fonts/Marauder-Display-BoldItalic.otf') format('opentype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

/* --- SIDENOTES (Marauder Caption) --- */
/* Caption fonts have wider spacing and sturdier strokes for small sizes */
@font-face {
    font-family: 'Marauder Caption';
    src: url('fonts/Marauder-Caption-Regular.woff2') format('woff2'),
         url('fonts/Marauder-Caption-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Marauder Caption';
    src: url('fonts/Marauder-Caption-Italic.woff2') format('woff2'),
         url('fonts/Marauder-Caption-Italic.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* --- CODE (Drafting Mono) --- */
@font-face {
    font-family: 'Drafting Mono';
    src: url('fonts/DraftingMono-Regular.woff2') format('woff2'),
         url('fonts/DraftingMono-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   2. TYPOGRAPHY ASSIGNMENTS
   ========================================================================== */

/* BIGGERING */
html {
    font-size: 18px;
}

/* Apply 'Text' variant to the main body */
body {
    font-family: 'Marauder Text', serif;
}

/* Apply 'Display' variant to all Headers */
h1, h2, h3, h4, .title {
    font-family: 'Marauder Display', serif;
}

/* Apply 'Caption' variant to Sidenotes, Marginnotes, and Figure Captions */
.sidenote, .marginnote, figcaption, .caption {
    font-family: 'Marauder Caption', serif;
}

/* Apply 'Caption' to code blocks for a cool stylistic contrast? 
   Or stick to monospace. Tufte uses monospace, let's keep it standard: */
code {
    font-family: 'Drafting Mono', monospace; /* Or a specific mono font if you have one */
}

/* ==========================================================================
   3. EXTRA FEATURES (TOC, Drop Caps, Hover)
   ========================================================================== */

/* Drop Caps (Using Marauder Display for the big letter) */
.level2 > p:first-of-type::first-letter {
    float: left;
    font-size: 4.8rem;
    line-height: 0.65;
    margin: 0.1em 0.1em 0 0em;
}

/* Table of Contents Styling */
#TOC {
    margin-top: 4rem;
    margin-bottom: 6rem;
    font-size: 1.3rem;
    padding: 2rem 0;
    width: 55%; /* Keep it within the main text column width */
}
#TOC ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}
#TOC > ul > li {
    margin-bottom: 0.8rem;
    font-weight: bold;
}
#TOC ul ul {
    margin-top: 0.2rem;
    padding-left: 1.5rem;
    font-weight: normal;
    font-style: italic;
    font-size: 1.1rem;
}

/* Hover Links */
h1, h2, h3 {
    position: relative;
}
/* The anchor symbol */
h1:hover::before, h2:hover::before, h3:hover::before {
    content: "§"; 
    position: absolute;
    left: -1.5rem; /* Moves into the margin */
    color: #ccc;
    font-size: 0.6em;
    top: 0.2em;
    cursor: pointer;
}

/* Epigraph Width Fix */
/* Constrain the epigraph div to the main column width (55%) */
div.epigraph {
    width: 55%;
    padding-left: 0;
    margin-top: 3em;
    margin-bottom: 3em;
}

/* Ensure the blockquote inside doesn't fight the container */
div.epigraph > blockquote {
    width: 100%; /* Take up 100% of the 55% container */
    margin-left: 0;
    margin-right: 0;
    font-style: italic;
}

/* Style the footer (source of the quote) inside the epigraph */
div.epigraph > blockquote > footer {
    width: 100%;
    font-style: normal;
    text-align: right;
}

/* Responsiveness: On small screens, let it be full width */
@media (max-width: 760px) {
    div.epigraph {
        width: 90%;
    }
}