:root {
    --color-vellum-bg: rgb(244, 235, 217);
    --color-nav: rgb(43, 37, 31);
    --color-highlight: rgb(140,45,25);
    --color-header: rgb(43, 37, 31);
    --color-text: rgb(89, 77, 66);
    --color-button-bg: rgb(43,37,31);
    --color-card-load-fill: rgb(244,240,234);
    --pigment-date: #1a1511; /* Segment 1: Iron Gall Black */
    --pigment-alert: #8c2d19; /* Segment 2: Sanguine Red Chalk */
    --pigment-warning: #d46721; /* Segment 3: Antimony Orange */
    --pigment-nations: #225c3a; /* Segment 4: Malachite Green */
    --pigment-plural: #1c476e; /* Segment 5: Lapis Lazuli Blue */
    --pigment-singular: #b37312; /* Segment 6: Yellow Ochre Gold */
    --pigment-verdict: #6a306e; /* Segment 7: Tyrian Purple */

    --font-display: 'Cinzel', Georgia, 'Times New Roman', serif;
    --font-ornate: 'Cinzel Decorative', Georgia, 'Times New Roman', serif;
    /*--font-body: 'Cormorant Garamond', Garamond, 'Palatino Linotype', serif;*/
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Georgia, Garamond, serif;
}

/* 1. Set up the accessible root sizing */
html {
    font-size: 62.5%; /* 1rem is now exactly 10px */
    overflow-y: scroll;
}

/* Reset basic browser margins */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: var(--color-vellum-bg);
    font-weight: 500;
    font-family: var(--font-body);
    font-size: 1.6rem; /* Restores the standard body font size to 16px */
    line-height: 1.5;
}

/* BANNER COMPONENT STYLES */
.site-banner {
    /* "../" steps out of the css folder, then enters the images folder */
    background-image: url('../images/vellum-banner-bg.webp');
    background-size: 100% 100%;
    background-position: center; 

    width: 100%;
    min-height: 14rem;
    display: flex;
    align-items: center;
    /*border-bottom: 1px solid rgba(74, 60, 49,0.1);*/
   
    position: sticky; /* Tells the element to pin itself to its container */
    top: 0; /* Pins it exactly to the very top edge of the browser viewport */
    z-index: 1000; /* Places the banner on a high layered plane so content slides UNDER it */
}

.banner-container {
  width: 100%;
  max-width: 190rem; 
  margin: 0 auto;    
  padding: 0 10rem;   
  display: flex;
  justify-content: space-between; 
  align-items: center;
}

.banner-logo {
  height: 14rem; 
  width: auto;   
  display: block;
  mix-blend-mode: multiply; /* Blends logo sepia ink onto vellum */
  transition: transform 0.3s ease;
}

.banner-logo:hover {
 transform: scale(1.02);
}

/* Nav Menu on the Right */
.banner-nav ul {
 display: flex;
 gap: 3rem;
 list-style: none;
}

.banner-nav a {
 color: var(--color-nav);
 font-family: var(--font-display);
 font-weight: 400;
 text-decoration: none;
 text-transform: uppercase;
 font-size: 2rem;
 letter-spacing: 0.15em;
 transition: opacity 0.2s ease;
}

.banner-nav a:hover {
 opacity: 1;
 color: var(--color-highlight)
}


/* ==========================================================================
   HERO COMPONENT STYLES
   ========================================================================== */
.hero {
    /* Calculates exactly 100% viewport height minus your sticky banner height */
    min-height: calc(100vh - 14rem);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.hero-content {
    max-width: 75rem; /* Scaled to 750px max width for optimal reading comfort */
    margin: 0 auto;
}

/*.hero-tagline {
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: #8c2d19; 
    font-weight: 700;
    margin-bottom: 1.5rem;
}*/

.hero-title {
    /* Scales cleanly from 3.2rem (32px) on mobile to 5.4rem (54px) on desktop templates */
    font-size: clamp(3.2rem, 5vw, 5.4rem);
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-nav);
    margin-bottom: 2rem;
}

.hero-description {
    font-size: clamp(1.6rem, 2vw, 1.9rem); 
    color: var(--color-text);
    margin-bottom: 3.5rem;
}

/* INTERACTIVE HERO ACTIONS */
.hero-actions {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* BUTTONS ============================================================================ */

.btn {
    display: inline-block;
    padding: 1.2rem 3rem; /* Perfectly proportioned tap targets */
    font-size: 1.5rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0.4rem;
    transition: all 0.2s ease-in-out;
}

.btn-primary {
    background-color: var(--color-button-bg);
    border: 2px solid var(--color-button-bg);
    color: var(--color-vellum-bg);
}

.btn-primary:hover {
    background-color: #4a3e35;
    transform: translateY(-0.2rem);
}

.btn-secondary {
    background-color: transparent;
    color: #2b251f;
    border: 0.1rem solid #2b251f;
}

.btn-secondary:hover {
    background-color: rgba(43, 37, 31, 0.05);
    transform: translateY(-0.2rem);
}


.articles {
    padding: 2rem 2rem 2rem 2rem;
    width: 100%;
}

/* COMIC STRIP  ======================================================================= */

.post-hook-comic {
    width: 40%;
    margin: 0 auto 4rem auto; /* Centers horizontally and creates a 40px buffer below the artwork */
    padding: 0; /* Strips away the shrunken frame padding to restore full-width bleeding */
    background-color: transparent;
}
.comic-strip-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.4rem;
    filter: drop-shadow(0 0.6rem 1.2rem rgba(26, 21, 17, 0.8));
}

.comic-caption {
    font-family: var(--font-body); /* Enforces Cormorant Garamond font look */
    font-style: italic;
    font-size: 1.5rem;
    color: var(--color-text); /* Balanced Walnut Ink color choice */
    margin-top: 1.5rem;
    text-align: center;
}


/* ==========================================================================
   EXPANDABLE CHAPTERS (ACCORDION UTILITIES)
   ========================================================================== */
.chapter-box {
width: 90%;
margin-left: 5%;
margin-bottom: 2rem;
border: 2px solid var(--color-header); /* Soft ink boundary line */
background-color: var(--color-vellum-bg); 
border-radius: 0.6rem;
overflow: hidden;
transition: all 0.3s ease;
}

/* Interactive header panel clicking bar */
.chapter-header {
    padding: 1rem 2rem 1rem 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    background-color: transparent;
    transition: background-color 0.2s ease;
}

/* Chrome/Safari utility to sweep native arrow markers away */
.chapter-header::-webkit-details-marker {
    display: none;
}

.chapter-header:hover {
    background-color: rgba(140,45,25,0.2); /* Soft hover ink shadow */
}

.chapter-header:hover .chapter-title {
    color: var(--color-highlight); /* Uses your elegant #8c2d19 brand accent */
}

/* Roman numeral chapter design indicators */
.chapter-number {
font-family: var(--font-display); /* Cinzel */
font-size: 2rem;
font-weight: 800;
color: var(--color-highlight); /* Red Chalk indicator */
letter-spacing: 0.05em;
min-width: 3rem;
}

.chapter-title {
font-family: var(--font-display); /* Cinzel */
font-size: 2rem;
font-weight: 800;
color: var(--color-header);
margin: 0 !important; /* Overwrites external header padding overrides */
}


/* Inner reading block containers holding your article texts */
.chapter-content {
 /*padding: 1rem 3rem 4rem 11rem; /* Margins perfectly aligned past chapter numbers */
 padding: 1rem 2rem 1rem 2rem;
 border-top: 2px dashed rgba(74, 60, 49, 0.1); /* Split line separating head from body content */
}

.chapter-box[open]:not(.no-drop-cap) .chapter-content p:first-of-type::first-letter {
    font-family: var(--font-ornate); /* Cinzel Decorative */
    font-style: normal;
    font-size: 5rem;
    font-weight: 800;
    color: var(--color-highlight);
    float: left;
    line-height: 0.75;
    margin-right: 0.3rem;
    margin-bottom: 0.0rem;
    margin-top: 0.6rem;
}

.chapter-content p {
    margin-bottom: 1.5rem; /* Generates a comfortable ~25px reading buffer gap */
}

    /* Cleanup rule: Removes the bottom margin from the very last paragraph in the box 
   so it doesn't create accidental empty whitespace at the base of your folder frame */
.chapter-content p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   CHAPTER II: SCRIPTURE SCROLL & TIMELINE LISTS
   ========================================================================== */
/* The main quote panel style */
.prophecy-scroll {
    margin: 2rem 2rem 2rem 2rem;
    padding: 2rem 2rem;
    border-left: 0.4rem solid var(--color-highlight); /* Red Chalk indicator margin line */
    background-color: rgb(225, 217, 205);
    /*var(--color-vellum-bg); /* rgba(74, 60, 49, 0.5); /* Faint vintage parchment shadow tint */
    border-radius: 6px;
    filter: drop-shadow(0 0.6rem 1.2rem rgba(26, 21, 17, 0.8));
}

/* Update this block to let the inner segment span colors flow through cleanly */
    .prophecy-scroll p {
        font-family: var(--font-body);
        font-style: italic;
        font-size: 1.6rem !important;
        line-height: 2.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .prophecy-scroll cite {
        display: block;
        font-family: var(--font-display); /* Cinzel */
        font-size: 1.6rem;
        font-weight: 600;
        font-style: normal;
        letter-spacing: 0.1em;
        color: var(--color-highlight);
    }

/* Structural commentary layout text */
.commentary-intro {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-header);
    margin-bottom: 0rem;
}

/* Clean, structured breakdown list resetting native dots */
.prophecy-breakdown-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
    font-weight: 600 !important;
}

    .prophecy-breakdown-list p::first-letter {
        font-family: var(--font-body) !important;
        font-size: 1.6rem !important; /* Force standard text scale */
        color: inherit !important;
        font-weight: 600 !important;
        float: none !important;
        margin: 0 !important;
    }

    .prophecy-breakdown-list li {
        display: flex;
        align-items: flex-start;
        gap: 2rem;
        font-weight: 900 !important;
        margin-bottom: 1rem; /* Ensures consistent paragraph-like gaps between list entries */
        padding-bottom: 1rem;
        /* border-bottom: 1px dashed rgba(74, 60, 49, 0.08); /* Hairline separator line */
    }

.prophecy-breakdown-list li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}



/* THE LABEL ACCENT: Turns your verse counts into elegant red chalk tags */
.marker-tag {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    /*letter-spacing: 0.05em;*/
    /*color: var(--color-highlight);*/
    background-color: var(--color-vellum-bg) !important;
    padding: 0rem 0rem;
    border-radius: 0.4rem;
    white-space: nowrap;
    margin-top: 0rem;
    min-width: 11rem; /* 1. Forces every marker block to be exactly 110px wide */
    text-align: left; /* 2. Keeps "Verse 1" flush to the left notebook margin */
    display: inline-block; /* 3. Instructs the browser to respect the width property */
}

.prophecy-breakdown-list p {
    font-size: 1.6rem;
    line-height: 1.6;
    color: inherit;
    margin: 0; /* Cleans up any inherited bottom padding overrides inside the list rows */
}

.prophecy-breakdown-list li:has(.marker-seg-1) p {
    color: var(--pigment-date);
    font-weight: 600;
}

.prophecy-breakdown-list li:has(.marker-seg-2) p {
    color: var(--pigment-alert);
    font-weight: 600;
}

.prophecy-breakdown-list li:has(.marker-seg-3) p {
    color: var(--pigment-warning);
    font-weight: 600;
}

.prophecy-breakdown-list li:has(.marker-seg-4) p {
    color: var(--pigment-nations);
    font-weight: 600;
}

.prophecy-breakdown-list li:has(.marker-seg-5) p {
    color: var(--pigment-plural);
    font-weight: 600;
}

.prophecy-breakdown-list li:has(.marker-seg-6) p {
    color: var(--pigment-singular);
    font-weight: 600;
}

.prophecy-breakdown-list li:has(.marker-seg-7) p {
    color: var(--pigment-verdict);
    font-weight: 600;
}

.verified-tick {
    /* Pulls your authentic #225c3a Malachite Green directly from your root grid */
    color: var(--pigment-nations);
    font-weight: 700; /* Gives the fountain pen stroke a little extra presence */
    padding-right: 0.5rem; /* Micro spatial gap so it doesn't crowd the preceding word */
}

/* ==========================================================================
   CHAPTER II: THE 7-PART HISTORICAL INK INTERFACE (Workshop Seven)
   ========================================================================== */

    /* Base text layout properties */
    .color-coded-prophecy p {
        font-family: var(--font-body); /* Enforces Cormorant Garamond */
        font-size: 2.1rem;
        line-height: 1.8;
        color: var(--color-text);
        margin-bottom: 4rem;
    }

    /*  Map the 7 colors strictly to text slices */
    .color-coded-prophecy .segment-1 {
        color: var(--pigment-date) !important;
        font-weight: 600;
    }

    .color-coded-prophecy .segment-2 {
        color: var(--pigment-alert);
        font-weight: 600;
    }

    .color-coded-prophecy .segment-3 {
        color: var(--pigment-warning);
        font-weight: 600;
    }

    .color-coded-prophecy .segment-4 {
        color: var(--pigment-nations);
        font-weight: 600;
    }

    .color-coded-prophecy .segment-5 {
        color: var(--pigment-plural);
        font-weight: 600;
    }

    .color-coded-prophecy .segment-6 {
        color: var(--pigment-singular);
        font-weight: 600;
    }

    .color-coded-prophecy .segment-7 {
        color: var(--pigment-verdict);
        font-weight: 600;
    }

/*  Synchronise list marker tags below the text block to use the same inks */
.marker-seg-1 {
    /*background-color: rgba(26, 21, 17, 0.08) !important;*/
    color: var(--pigment-date) !important;
}

.marker-seg-2 {
    color: var(--pigment-alert) !important;
}

.marker-seg-3 {
    color: var(--pigment-warning) !important;
}

.marker-seg-4 {
    color: var(--pigment-nations) !important;
}

.marker-seg-5 {
    color: var(--pigment-plural) !important;
}

.marker-seg-6 {
    color: var(--pigment-singular) !important;
}

.marker-seg-7 {
    color: var(--pigment-verdict) !important;
}

/* ==========================================================================
   MINIMALIST INVISIBLE MATRIX ART-GRID
   ========================================================================== */
.articles-workspace {
    width: 100%;
    /* Creates a clean, generous padding buffer directly below your 14rem header */
    padding: 5rem 0 5rem 0;
}

.grid-container {
    max-width: 120rem; /* Perfectly matches your main navbar banner boundaries */
    margin: 0 auto;
    padding: 0rem 0rem 5rem 0rem;
}

/* THE SEAMLESS ARCHITECTURE CONTROLLER */
.dynamic-article-grid {
    display: grid;
    /* Automatically places cards across rows, dropping down cleanly on tablets/phones */
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 4rem 3rem; /* Generous empty white space acting as natural layout separators */
}

/* INDIVIDUAL CARD COMPONENTS */
.visual-card {
    background-color: transparent;
    display: flex;
    flex-direction: column;
}

.card-anchor {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* CARD IMAGE FRAME WITH HIDDEN OVERFLOW CLIPPING */
.card-image-box {
    width: 100%;
    aspect-ratio: 16 / 10; /* Premium wide editorial card proportion */
    background-color: var(--color-vellum-bg); /* Subtle placeholder block while graphics stream */
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    border: 0px solid var(--color-text);
}

.card-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Forces graphics to completely fill the frame boundary */
    display: block;
    padding: 2.5%;
    box-sizing: border-box;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* Premium smooth deceleration ease */
}

/* DETAILS CONTENT HOUSING */
.card-body {
    padding: 2rem 0 0 0;
    display: flex;
    flex-direction: column;
}

.card-title {
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-header);
    margin-bottom: 1rem;
    transition: color 0.2s ease;
}

.card-hook {
    font-size: 1.5rem;
    color: var(--color-text);
    line-height: 1.6;
}

/* HOVER TRANSITIONS & SELECTIONS */
.card-anchor:hover .card-img {
    transform: scale(1.03); /* Elegant, low-profile zoom effect on selection target */
}

.card-anchor:hover .card-title {
    color: var(--color-highlight); /* Shifts header to your global crimson accent upon focus selection */
}

/* ==========================================================================
   GRID UTILITY NAVIGATION ACTION BAR
   ========================================================================== */
.grid-actions-bar {
    width: 100%;
    display: flex;
    justify-content: center; /* Horizontally centers the return button over the canvas layout */
    margin-top: 4rem; /* Creates a large structural buffer block beneath your last row of cards */
    padding-top: 4rem;
    /*border-top: 0.1rem solid rgba(74, 60, 49, 0.08); /* Sophisticated hairline divider above navigation */
}


/* ==========================================================================
   THE UNIFIED MULTI-ROW PROPHECY LEDGER (Workshop Seven Final Grid)
   ========================================================================== */
/* The master wrapper sheet box container styled to match your parchment theme */
.project-data-grid {
    display: flex;
    flex-direction: column; /* Stacks your data row blocks vertically down the page */
    gap: 0rem; /* Creates a clean vertical gap buffer between your row blocks */
    /*padding: 1rem 0 1rem 0; /* Left/Right are 0 so shading can touch the edges! */
    /*rgba(252, 251, 250, 0.4)*/
    background-color: rgb(249, 244, 234); /* Unified parchment white shading */
    border: 2px solid var(--color-header); /* Crisp 1px sepia line frame border */
    border-radius: 6px; /* Textbook corner rounding */
    margin: 1rem 6rem 1rem 6rem; /* Indents grid gracefully down the margin path */
    box-shadow: 0 1rem 3rem rgba(74, 60, 49, .8); /* Soft broad layout shadow depth */
    box-sizing: border-box;
}

.project-data-grid .grid-data-row:nth-of-type(even) {

    background-color: rgba(74, 60, 49, 0.05);
}

/* ==========================================================================
   INTEGRATED WORKSPACE ROW HEADERS (Workshop Seven Matrix)
   ========================================================================== */
/*  THE SPLIT ENGINE: Forces your headers to automatically stretch across both columns */
.grid-header-row {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 4.5fr 5.5fr;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    /* A razor-thin solid ink baseline to split your headers from your copy text */
    border-bottom: 1px solid rgba(74, 60, 49, 0.15);
    background-color: rgba(74, 60, 49, 0.05);
    margin: -0.8rem -1.5rem 1rem -1.5rem; /* Pulls the box tight to the top and sides */
    padding: 1rem 1rem 1rem 1.5rem;
}

.grid-header-row span {
    font-family: var(--font-display); /* Enforces Cinzel logo consistency */
    font-size: 1.6rem;
    font-weight: 800;
    /*text-transform: uppercase;*/
    /*letter-spacing: 0.12em;*/
    color: var(--color-header); /* Matches your brand heading text ink */
}

 /* Micro alignment adjustment to balance your header spacing */
.grid-header-row span:last-of-type {
    padding-left: 2rem; /* Aligns perfectly with your scripture column padding margin */
}


/*THE ENGINE: Forces every single sub-row to act as a perfect 2-column split layout */
.grid-data-row {
    display: grid;
    grid-template-columns: 4.5fr 5.5fr; /* 45% commentary lane | 55% scripture lane */
    gap: 0rem; /* Generous breathing horizontal gap between column text lanes */
    border-bottom: 1px dashed rgba(74, 60, 49, 0.1); /* Separator dashed line between items */
    padding: 1rem 1.5rem;
    box-sizing: border-box;
}

    /* Cleanup rule: Cleans up the dashed line from the final data pair row inside the card */
    .grid-data-row:last-of-type {
        border-bottom: none;
    }

/* Base text cell properties across all rows */
.grid-cell {
    font-family: var(--font-body); /* Cormorant Garamond read font */
    font-size: 1.6rem;
    line-height: 1.5;
    padding-right: 1rem;
}

/* Column 1: Analysis Statement Lane */
.col-text {
    color: var(--color-text); /* Iron Gall Dark Ink */
    /*text-align: justify;  Straight book-layout print edges */
}

/* Column 2: Scripture Scroll Lane */
.col-desc {
    border-left: 1px dashed rgba(74, 60, 49, 0.12); /* Clean vertical divider line */
    padding-left: 2rem;
    padding-right: 1rem;
}

/* AUTOMATIC LINK MARGIN ALIGNMENT: Right-justified text layout */
.scripture-link-wrapper {
    display: flex;
    /*justify-content: flex-end; /* Flushes the interactive link anchor tight against the right lane margin line */
    width: 100%;
    margin-bottom: 0rem;
}

.scripture-link {
    font-family: var(--font-display); /* Cinzel */
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--color-highlight); /* Brand color Red Chalk */
    text-decoration: none;
    /*border-bottom: 1px dashed var(--color-highlight);*/
    /*padding-bottom: 2px;*/
    transition: all 0.2s ease;
}

    .scripture-link:hover {
        color: var(--pigment-nations);
    }

.scripture-excerpt {
    font-style: italic; /* Slants the raw verses elegantly like old handwritten script */
    color: var(--color-text); /* Walnut Ink */
    margin: 0;
}


/* ==========================================================================
   DYNAMIC TREE INTERACTION STATES (Hiding & Rotation Controllers)
   ========================================================================== */
/* THE ACCORDION RESET: Instantly clips and hides any closed child nodes 
   from the viewport when the page first loads! */
.hierarchy-children.hidden {
    display: none !important;
}

/* Base style for the toggle icon arrow */
.toggle-icon {
    font-size: 1.6rem;
    color: var(--color-highlight);
    display: inline-block;
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1); /* Ultra smooth rotation transition */
}

.hierarchy-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0rem 0rem;
    /*background-color: rgba(252, 251, 250, 0.4);
    border: 1px solid rgba(74, 60, 49, 0.12);
    border-radius: 0.6rem;*/
    margin: 0rem 3rem 0rem 3rem;
    user-select: none;
    transition: all 0.2s ease;
    cursor: pointer !important;
}

    .hierarchy-row.level-2 {
        padding-left: 3rem; /* Perfectly indents Subheading lines like 1.1 down the page branch */
    }
/*  ARROW ROTATION CONTROLLER
   When JavaScript strips the .hidden class from a child node, we will add an 
   .active class to the clickable row so the arrow rotates dynamically! */
.hierarchy-row.active .toggle-icon {
    transform: rotate(90deg); /* Snaps the arrow facing downward */
    color: var(--color-highlight); /* Flashes your Leonardo Red Chalk color */
}
    .hierarchy-row.chapter-title,
    .hierarchy-row.section-title {
        color: var(--color-highlight); /* Flashes into your signature Red Chalk ink color */
    }
    .hierarchy-row.level-2 .section-title {
        font-family: var(--font-display);
        font-size: 1.8rem;
        font-weight: 800;
        color: var(--color-header);
    }

    /* 2. MASTER CHAPTER HOVER: Lights up the main title row elements */
    .hierarchy-row.level-1:hover .chapter-number,
    .hierarchy-row.level-1:hover .chapter-title,
    .hierarchy-row.level-1:hover .toggle-icon {
        color: var(--color-highlight);/* Flashes into your signature Red Chalk ink */
    }

    /* 3. SUBHEADING HOVER: Lights up the nested section text lines cleanly */
    .hierarchy-row.level-2:hover .section-title,
    .hierarchy-row.level-2:hover .toggle-icon {
        color: var(--color-highlight); /* Matches your brand color accent */
        padding-left: 0;
    }

.section-number {
    font-family: var(--font-display); /* Enforces Cinzel */
    font-size: 1.8rem; /* Slightly smaller numeric layout code scale */
    font-weight: 800; /* Heavy ink font presence weight */
    color: var(--color-highlight);
    min-width: 2rem; /* THE FIX: Forces an exact spacing box so all titles line up perfectly */
    display: inline-block;
}

.eschatology-text {
    text-align: left;
    margin: 2rem 3rem 2rem 3rem;
    font-size: 1.8rem;
}

/* ==========================================================================
   ARCHIVAL GLOSSARY FLOATING TOOLTIP BOX (#global-tooltip-box)
   ========================================================================== */
#global-tooltip-box {
    position: fixed; /* Floats smoothly over the canvas layer based on cursor coordinates */
    z-index: 10000; /* Forces it safely above all borders, cards, and images */

    display: inline-block !important; /* Forces the box to render as a solid block layout */

    max-width: 32rem; /* Locks the explanation box to a highly readable, compact block size */
    padding: 1.5rem 2rem;


    /* THE PARCHMENT WHITE BACKING: Matches your inner grid cards beautifully */
    background-color: var(--color-vellum-bg);
    /*background-image: url('../images/scroll.webp');
    background-repeat: no-repeat;
    background-size: 100% 100% !important;
    background-position: center center;*/

    /* THE HAIRLINE STROKE: Elegant 1px sepia border matching your master chapters */
    border: 2px solid rgba(74, 60, 49, 0.2);
    border-radius: 4px; /* Crisp textbook book-edge corners */
    /* Typography settings for your definition prose */
    font-family: var(--font-body); /* Cormorant Garamond */
    font-size: 1.6rem;
    line-height: 1.5;
    color: var(--color-header); /* Heavy Iron Gall Ink for comfortable contrast */
    text-align: left;
    /* Smooth opacity fade-in transition system controlled by your JavaScript events */
    opacity: 0;
    pointer-events: none; /* Prevents the tooltip box from trapping mouse scrolls or click fields */
    transition: opacity 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    /* Vintage soft ink shadow diffusion that mimics depth over your porous paper backdrop */
    box-shadow: 0 8px 24px rgba(74, 60, 49, 0.8);
}

    /* INTERACTIVE VISIBILITY TRIGGER STATE */
    #global-tooltip-box.visible {
        opacity: 1 !important; /* Injected dynamically by your JavaScript event loop listeners */
    }

/* ==========================================================================
   GLOSSARY ANCHOR WORD DESIGN UTILITY (Data-Term Target Words)
   ========================================================================== */
/* Automatically designs any keyword inside your reading text carrying a data-term attribute */
.tooltip-term {
    color: var(--color-header);
    font-weight: 700;
    cursor: help !important; /* Transforms your mouse pointer into a helpful question mark arrow indicator */
    /*  THE SCHOLAR MARKER: Injects your signature Red Chalk accent as a dashed underline, 
       perfectly mimicking an author underlining critical records inside a diary log */
    border-bottom: 1px dashed var(--color-highlight);
    padding-bottom: 1px;
    transition: all 0.2s ease;
}

    /* Hovering over the word transitions the dashed sketch mark into a solid ink anchor line */
    .tooltip-term:hover {
        color: var(--color-highlight);
        border-bottom-style: solid;
    }
/*  MOBILE RESPONSIVENESS OVERRIDE (Collapses the columns safely into a single vertical lane) */
@media (max-width: 60rem) {
    .project-data-grid {
        grid-template-columns: 1fr; /* Turns into one full-width stacked lane */
        gap: 3rem;
        margin-left: 1rem;
        padding: 2.5rem;
    }

    .col-desc {
        border-left: none;
        border-top: 1px dashed rgba(74, 60, 49, 0.15); /* Flips orientation on phone viewports */
        padding-left: 0;
        padding-top: 2.5rem;
    }
}


/* ==========================================================================
   GLOBAL BACKGROUND TEXTURE ENGINE (Mostly Transparent Canvas Wallpaper)
   ========================================================================== */
body {
    position: relative; /* Sets the anchor point for our floating wallpaper layer */
    background-color: var(--color-vellum-bg); /* Opaque 10% lighter beige parchment backdrop */
    min-height: 100vh;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: -1; 
    pointer-events: none;
}

body.page-home::before {
    background-image: url('../images/the-four-horsemen-large.webp');
    opacity: 0.1;
}

body.page-tyre::before {
    background-image: url('../images/tyre-large.webp');
    opacity: 0.06;
}

body.page-eschatology::before {
    background-image: url('../images/the-four-horsemen-large.webp');
    opacity: 0.06;
}


/* UNIVERSAL BREAKPOINT RESPONSIVENESS */
@media (max-width: 120rem) {
.grid-container {
    padding-left: 4rem;
    padding-right: 4rem;
}
}

/* MOBILE RESPONSIVENESS */
@media (max-width: 76.8rem) {
    .site-banner {
        min-height: 8rem;
    }

    .banner-container {
        padding: 0 2.0rem;
        flex-direction: row;
        justify-content: space-between;
    }

    .banner-logo {
        height: 6rem;
    }

    .hero {
        /* Shifts height to match your responsive 8rem sticky mobile header layout */
        min-height: calc(100vh - 8rem);
    }

    .articles {
        /* Shifts layout top padding to match your 8rem mobile banner menu breakpoint cushion */
        padding: 2rem 2rem 2rem 2rem;
    }

    .articles-workspace {
        padding-top: 14rem; /* Readjusts height to cleanly balance below your 8rem mobile banner menu */
    }

    .grid-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .dynamic-article-grid {
        gap: 5rem 2rem;
    }

    .grid-actions-bar {
        margin-top: 6rem;
        padding-top: 3rem;
    }

    @media (max-width: 30rem) {
        .chapter-content > p:fist-of-type::first-letter {
            font-size: 4.5rem;
            * Softens the letter scaleon smaller screens */ margin-right: 0.8re
        }
    }
}