/* Scale down the global font size for the entire site */
html {
    font-size: 14px; /* Tufte usually defaults to 15px. Try 14px or 13px */
}

/* Remove default italics from H2 headings */
h1 {
    font-size: 2.8rem !important; /* default: 3.2rem */
}

/* Remove default italics from H2 headings */
h2 {
    font-size: 2.0rem !important; /* default: 2.2rem */
    font-style: normal !important;
}

/* Make H3's a bit bigger */
h3 {
    font-size: 1.8rem !important; /* Increased from 1.7rem */
}

/* Quarto doesn't wrap content in <section>, so tufte's
   `section > p` width rule never fires. Replicate it globally. */
p {
    width: 80%;
}

/* Pull lists closer to the paragraph directly above them */
p + ul, p + ol, p + dl {
    margin-top: -1.2rem !important; /* Adjust this number to make it tighter or looser */
}

/* Also fix lists and other block elements for consistency */
ol, ul, dl {
    width: 60%;
}

/* Code & Math Font Sizing Fixes */
.math.inline, .katex, .math.display, .katex-display, pre > code, code {
    font-size: 1em; /* 'em' means it scales relative to your 14px text */
}

/* ==========================================
   TITLE BLOCK FORMATTING (Author & Date)
   ========================================== */

/* 1. Force the author and date to sit next to each other */
#title-block-header .author, 
#title-block-header .date {
    display: inline-block;
    width: auto !important; /* Overrides the 80% paragraph width we set earlier */
    font-size: 1.5rem;
    margin-top: -2rem;
}

/* 2. Inject the Em-Dash directly after the author's name */
#title-block-header .author::after {
    content: " \2014 "; /* \2014 is the safe CSS Unicode for an em-dash */
}

/* ==========================================
   IMAGE SETTINGS
   ========================================== */

/* 1. Fixes image centering issue */
figure p {
    width: 100% !important;
    text-align: center !important;
    margin: 0 auto !important;
}

/* 2. Fix the figure container and align it with your text */
figure {
    max-width: 80% !important;      /* CHANGED: Forces the invisible box to match text width exactly */
    margin-left: 0 !important; 
    margin-right: 0 !important;
    text-align: center !important;
}

/* 3. Center the image and constrain its height */
figure img {
    max-height: 60vh;       
    width: auto !important; 
    object-fit: contain;    
    margin: 0 auto !important; /* Forces the image to sit in the exact center */
    display: block !important; 
}

/* 3. Center the caption below the image */
figcaption {
    float: none !important;    
    max-width: 100% !important; 
    margin-top: 0.6rem !important; 
    text-align: center !important; /* CHANGED: Now centers the text! */
    color: #999;               
    font-size: 1.3em;
    font-style: italic;        
}

/* ==========================================
   Mobile Responsiveness Fixes
   ========================================== */

@media (max-width: 760px) {
    /* Scale down the global font size for the entire site */
    html {
        font-size: 13px; 
    }

    /* Allow text and lines to span the full screen width */
    p, hr {
        width: 100% !important;
    }

    /* Allow lists to span full width and reset their deep indent */
    ol, ul, dl {
        width: 100% !important;
        padding-left: 1.5rem !important; 
    }

    /* Ensure blockquotes don't get squeezed */
    blockquote p {
        width: 100% !important;
        margin-right: 0;
    }

    /* Fix the left-aligned mobile images */
    figure {
        width: 100% !important;
        max-width: 100% !important;     /* CRITICAL: Overrides Tufte's hidden 90% mobile limit */
        margin: 1.5rem auto !important; /* Forces the box to perfectly center itself */
        transform: none !important;     /* Kills the desktop left-nudge */
    }
    
    /* Ensure the invisible paragraph wrapper behaves */
    figure p {
        width: 100% !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    /* Let the image fill the newly centered 100% box */
    figure img {
        width: 100% !important;         
        max-width: 100% !important;
        margin: 0 auto !important;
        max-height: none !important; /* THE FIX: Stops the dynamic resizing jump! */
    }

    /* Ensure the caption stays centered directly underneath */
    figcaption {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        margin: 0.5rem auto 0 auto !important;
    }

    /* Proportionally shrink headings so they don't dominate phone screens */
    h1, .title {
        font-size: 2.7rem !important; /* Scaled down from the PC's 3.2rem */
        margin-top: 2.4rem !important; /* Slightly reduces the massive gap above the title */
    }

    p.subtitle {
        font-size: 1.4rem !important; /* Scaled down from 1.8rem */
    }
}