/* ==========================================================================
   A. CASCADE LAYERS INITIALIZATION
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Aleo:wght@700&family=IM+Fell+English+SC&family=Lato:ital,wght@0,400;0,700;1,400&display=swap');
@layer reset, base, layout, components, utilities, overrides;

/* ==========================================================================
   0. DESIGN SYSTEM TOKENS (GLOBAL CUSTOM PROPERTIES)
   ========================================================================== */
@layer base {
    :root {
        /* Color Palette Tokens */
        --color-bg-primary: #fcfaf2;        /* Vintage Warm Cream canvas */
        --color-bg-secondary: #f4f0e6;      /* Muted Parchment container blocks */
        --color-text-primary: #2b2b2a;      /* High-Contrast Charcoal for reading */
        --color-text-muted: #5f5f5e;        /* Faded Ink for subtext layers */
        --color-accent-primary: #1b4d3e;    /* Deep Forest Jade for main accents */
        --color-accent-warm: #9b4e44;       /* Antique Document Russet Red */
        --color-focus-ring: rgba(155, 78, 68, 0.6);

        /* Typography Font Stacks */
        --font-heading: "IM Fell Great Primer SC", Georgia, serif;
        --font-accent-serif: "IM Fell Great Primer", Georgia, serif;
        --font-body: "Lora", Georgia, serif;

        /* Fluid Typography Scales */
        --font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
        --font-size-h1: clamp(2.2rem, 1.8rem + 2vw, 3.8rem);
        --font-size-h2: clamp(1.5rem, 1.3rem + 1vw, 2.2rem);

        /* Fluid Spacing Scale via Logical Properties */
        --space-xs: 0.5rem;
        --space-sm: 1rem;
        --space-md: 1.5rem;
        --space-lg: 2rem;
        --space-xl: 4rem;
        --space-fluid-sm: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
        --space-fluid-md: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
        --space-fluid-lg: clamp(2.5rem, 2rem + 3vw, 4.5rem);

        /* Shape & Boundary Constraints */
        --border-radius-sm: 2px;
        --border-radius-md: 4px;
        --layout-max-width: 1100px;
        --container-normal-width: 76ch;    /* Optimal readable line-length */
        
        /* Animation Transitions */
        --transition-speed-fast: 0.2s;
        --transition-ease-standard: ease;

        /* Component-Specific Scopes */
        --chapter-card-bg: var(--color-bg-secondary);
        --chapter-card-border: rgba(43, 43, 42, 0.1);
        --chapter-card-shadow: 0 4px 12px rgba(43, 43, 42, 0.03);
        --chapter-card-hover-shadow: 0 8px 24px rgba(155, 78, 68, 0.08);
        --header-blur-bg: rgba(252, 250, 242, 0.85);
    }
}

/* ==========================================================================
   1. RESET LAYER
   ========================================================================== */
@layer reset {
    *, *::before, *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

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

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

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
}

/* ==========================================================================
   2. BASE LAYER
   ========================================================================== */
@layer base {
    body {
        font-family: var(--font-body);
        font-size: var(--font-size-base);
        background-color: var(--color-bg-primary);
        color: var(--color-text-primary);
        line-height: 1.7;
        min-height: 100vh;
        -webkit-font-smoothing: antialiased;
    }

    h1 { font-family: var(--font-heading); font-size: var(--font-size-h1); line-height: 1.1; margin-bottom: var(--space-md); }
    h2 { font-family: var(--font-heading); font-size: var(--font-size-h2); line-height: 1.2; margin-bottom: var(--space-sm); }
    h3 { font-family: var(--font-heading); font-size: 1.25rem; margin: 1.5rem 0 0.5rem 0; }

    p { margin-bottom: var(--space-md); }
    strong { color: var(--color-accent-primary); }

    ul, ol {
        margin-bottom: var(--space-lg);
        padding-left: var(--space-md);
    }

    li { margin-bottom: var(--space-xs); }
    li ul, li ol { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }

    a:focus-visible,
    button:focus-visible {
        outline: 3px solid var(--color-focus-ring);
        outline-offset: 4px;
    }
}

/* ==========================================================================
   3. STRUCTURAL LAYOUT LAYER
   ========================================================================== */
@layer layout {
    .global-parchment-backdrop {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    /* Hardware-Accelerated Isolated Background Manuscript Canvas */
    .global-parchment-backdrop::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-image: url('https://upload.wikimedia.org/wikipedia/commons/1/1e/Petrarch-triumph-vainglory-bnf-lat-6069F-italy-14th.jpg?utm_source=commons.wikimedia.org&utm_campaign=index&utm_content=original');
        background-size: cover;
        background-position: right 15% top 10%;
        background-repeat: no-repeat;
        mix-blend-mode: multiply;
        opacity: 0.12;
        pointer-events: none;
        z-index: -1;
        will-change: transform;
    }

    /* CRITERION: Responsive foundation via logical properties */
    .site-index {
        inline-size: 100%;
        max-inline-size: var(--layout-max-width);
        margin-block: var(--space-fluid-lg);
        margin-inline: auto;
        padding-inline: var(--space-fluid-md);
        flex: 1;
    }

    .chapter-page {
        inline-size: 100%;
        max-inline-size: var(--container-normal-width);
        margin-block: var(--space-fluid-lg);
        margin-inline: auto;
        padding-inline: var(--space-fluid-md);
        flex: 1;
    }
}

/* ==========================================================================
   4. COMPONENT PATTERNS LAYER (PART 1)
   ========================================================================== */
@layer components {
    /* PATTERN 1: NAVIGATION HEADER */
    .site-header {
        border-bottom: 1px solid rgba(27, 77, 62, 0.15);
        background-color: var(--header-blur-bg);
        backdrop-filter: blur(8px);
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .header-container {
        max-inline-size: var(--layout-max-width);
        margin-inline: auto;
        padding-block: var(--space-md);
        padding-inline: var(--space-lg);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--space-sm);
    }

    .logo-link {
        text-decoration: none;
        color: var(--color-accent-primary);
        font-family: var(--font-heading);
        font-size: 1.6rem;
        letter-spacing: 1px;
    }

    .site-nav ul {
        list-style: none;
        display: flex;
        gap: var(--space-md);
        flex-wrap: wrap;
        margin-bottom: 0;
    }

    .nav-link {
        text-decoration: none;
        color: var(--color-text-primary);
        font-family: var(--font-heading);
        font-size: 0.95rem;
        transition: color var(--transition-speed-fast) var(--transition-ease-standard);
    }

    /* PATTERN 2: CHAPTER PORTAL INTENTIONAL GRID (Intrinsic Sizing) */
    .chapter-portal {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
        gap: var(--space-fluid-md);
    }

    .chapter {
        background-color: var(--chapter-card-bg);
        border: 1px solid var(--chapter-card-border);
        box-shadow: var(--chapter-card-shadow);
        padding: 2.5rem;
        text-decoration: none;
        color: var(--color-text-primary);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: var(--border-radius-sm);
        transition: transform var(--transition-speed-fast) var(--transition-ease-standard),
                    border-color var(--transition-speed-fast) var(--transition-ease-standard),
                    box-shadow var(--transition-speed-fast) var(--transition-ease-standard);
    }

    .chapter h2 {
        font-family: var(--font-heading);
        color: var(--color-accent-primary);
        margin-bottom: var(--space-md);
    }

    .card-action {
        font-family: var(--font-accent-serif);
        font-style: italic;
        color: var(--color-accent-warm);
        font-size: 0.95rem;
    }
    
    /* PATTERN 3: ADVANCED SUBGRID SYSTEM DIRECTORY & FALLBACKS */
    .card-index-list {
        list-style: none;
        padding-inline-start: 0;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
        gap: var(--space-fluid-md);
    }

    .card-index-list > li {
        display: grid;
        grid-template-rows: auto auto 1fr;
        gap: var(--space-xs);
        padding: var(--space-sm);
        background-color: var(--color-bg-secondary);
        border-radius: var(--border-radius-sm);
    }

    @supports (grid-template-rows: subgrid) {
        .card-index-list {
            grid-auto-rows: max-content;
        }
        .card-index-list > li {
            grid-row: span 3;
            grid-template-rows: subgrid;
            background-color: var(--color-bg-secondary);
            padding: var(--space-sm);
        }
    }

    /* PATTERN 4: CONTAINER-QUERY SENSITIVE CALLOUT BOX */
    .content-section {
        container-type: inline-size;
        container-name: content-wrapper;
        margin-block-end: var(--space-fluid-lg);
    }

    .historical-note {
        padding: var(--space-fluid-md);
        background-color: rgba(244, 240, 230, 0.4);
        border-inline-start: 4px solid var(--color-accent-primary);
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
    }

    @container content-wrapper (inline-size > 600px) {
        .historical-note {
            display: grid;
            grid-template-columns: fit-content(120px) 1fr;
            align-items: baseline;
            gap: var(--space-md);
        }
        
        .historical-note h3 {
            margin-block-start: 0;
            border-inline-end: 1px solid rgba(43, 43, 42, 0.2);
            padding-inline-end: var(--space-sm);
        }
    }

    /* PATTERN 5: ACADEMIC BIBLIOGRAPHY MEDIA STRUCTURE */
    .bibliography-list {
        list-style: none;
        padding-left: 0;
    }

    .bibliography-list > li {
        margin-bottom: var(--space-lg);
        padding: var(--space-md);
        background-color: rgba(244, 240, 230, 0.3);
        border-inline-start: 3px solid var(--color-accent-primary);
    }

    cite {
        display: block;
        font-family: var(--font-accent-serif);
        font-size: 1.1rem;
        color: var(--color-accent-primary);
        font-style: normal;
        margin-bottom: var(--space-xs);
    }

    .application-note {
        font-size: 0.95rem;
        color: var(--color-text-muted);
        margin-bottom: 0;
    }

    /* PATTERN 6: HISTORICAL DATA INTERFACE TABLES */
    table {
        inline-size: 100%;
        margin-block: 2.5rem;
        font-size: 0.95rem;
        background-color: rgba(244, 240, 230, 0.5);
        border-radius: var(--border-radius-sm);
    }

    caption {
        font-family: var(--font-heading);
        color: var(--color-accent-primary);
        font-size: 1.2rem;
        margin-bottom: var(--space-sm);
        text-align: left;
    }

    th, td {
        padding: var(--space-sm);
        text-align: left;
        border-bottom: 1px solid rgba(43, 43, 42, 0.1);
    }

    th {
        font-family: var(--font-heading);
        color: var(--color-accent-primary);
        background-color: var(--color-bg-secondary);
        text-transform: uppercase;
        font-size: 0.85rem;
        letter-spacing: 0.5px;
    }

    /* PATTERN 7: FOOTER BLOCKS */
    footer {
        border-top: 1px solid rgba(43, 43, 42, 0.1);
        background-color: var(--color-bg-secondary);
        margin-block-start: auto;
    }

    .site-footer {
        max-inline-size: var(--layout-max-width);
        margin-inline: auto;
        padding-block: 2.5rem;
        padding-inline: var(--space-lg);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--space-md);
        font-size: 0.9rem;
    }

    .copyright { color: var(--color-text-muted); margin-bottom: 0; }
    .footer-links { display: flex; gap: var(--space-md); }

    .footer-links a {
        text-decoration: none;
        color: var(--color-text-primary);
        font-family: var(--font-heading);
        transition: color var(--transition-speed-fast) var(--transition-ease-standard);
    }
}

/* ==========================================================================
   5. UTILITIES & COMPONENT STATES LAYER
   ========================================================================== */
@layer utilities {
    .u-text-center { text-align: center !important; }
    .u-margin-bottom-none { margin-bottom: 0 !important; }
    .u-hide-screen { display: none !important; }

    .nav-link:hover,
    .footer-links a:hover {
        color: var(--color-accent-warm);
    }

    .chapter:hover {
        transform: translateY(-4px);
        border-color: var(--color-accent-warm);
        box-shadow: var(--chapter-card-hover-shadow);
    }

    .nav-link[aria-current="page"] {
        color: var(--color-accent-primary);
        border-bottom: 2px solid var(--color-accent-primary);
        padding-bottom: var(--space-xs);
    }

    .card-link[aria-disabled="true"] {
        color: var(--color-text-muted);
        pointer-events: none;
        opacity: 0.5;
    }

    @media (prefers-reduced-motion: reduce) {
        *, ::before, ::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
        .chapter:hover {
            transform: none !important;
        }
    }
}

/* ==========================================================================
   6. RESPONSIVE BREAKPOINTS OVERRIDES (CONTENT-DRIVEN BREAKPOINTS)
   ========================================================================== */
@layer overrides {
    @media (max-width: 48rem) {
        .header-container, .site-footer {
            flex-direction: column;
            text-align: center;
        }
        .sub-page-nav {
            flex-direction: column;
            gap: var(--space-sm);
        }
    }
}

/* ==========================================================================
   7. PRINT OPTIMIZATION PROFILE
   ========================================================================== */
@media print {
    .site-header, .sub-page-nav, .footer-links, .global-parchment-backdrop::before {
        display: none !important;
    }

    body {
        background: #ffffff !important;
        color: #000000 !important;
        font-size: 12pt;
    }

    .chapter-page {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    h1, h2, h3, table, tr { page-break-inside: avoid; }
    cite { font-weight: bold; color: #000000 !important; }

    th {
        background-color: #f0f0f0 !important;
        color: #000000 !important;
        border-bottom: 2px solid #000000 !important;
    }
}