/* ==========================================================
   HIGHER IDEALS
   Framework v1.0
========================================================== */

/* ==========================
   RESET
========================== */

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

html{
    scroll-behavior:smooth;
}

body{

    margin:0;

    padding:0;

    background:#f3f1eb;

    color:#222;

    font-family:"Source Serif 4", Georgia, serif;

    font-size:22px;

    line-height:1.8;

}

/* ==========================================================
   READING PROGRESS BAR
========================================================== */

.progress-container{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:transparent;

    z-index:9999;

}

#progress{

    width:0;

    height:100%;

    background:linear-gradient(
        90deg,
        #c8a24a,
        #e2c56b
    );

    transition:width .1s linear;

}

/* ==========================
   VARIABLES
========================== */

:root{

    --navy:#0b2c6b;

    --gold:#c8a03c;

    --paper:#ffffff;

    --background:#f3f1eb;

    --text:#222;

    --muted:#666;

    --shadow:0 12px 40px rgba(0,0,0,.08);

}

/* ==========================
   TYPOGRAPHY
========================== */

h1,
h2,
h3,
h4{

    margin-top:0;

    color:var(--navy);

    font-family:"Cormorant Garamond", serif;

    font-weight:700;

}

p{

    margin:0 0 1.5em;

}

a{

    color:var(--navy);

    text-decoration:none;

    transition:.25s;

}

a:hover{

    color:var(--gold);

}

img{

    max-width:100%;

    display:block;

}

/* ==========================================================
   PAGE LAYOUT
========================================================== */

.site-header{

    background:var(--navy);

    color:white;

    border-bottom:4px solid var(--gold);

}

.site-brand{

    max-width:1500px;

    margin:auto;

    padding:22px 40px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}


.brand-left{

    display:flex;

    align-items:center;

    gap:18px;

}



.site-logo{
    width:116px;
    height:116px;
    object-fit:contain;
    flex-shrink:0;
}

.top-nav{

    display:flex;

    gap:36px;

    margin-left:auto;

    font-family:Inter,sans-serif;

    font-size:18px;

    font-weight:600;

}

.top-nav a{

    color:white;

}

.top-nav a:hover{

    color:var(--gold);

}

.site-brand h1{

    color:white;

    font-size:64px;

    line-height:1;

    letter-spacing:2px;

    margin:0;

}

.site-brand p{

    margin-top:8px;

    color:#d7ddea;

    font-family:Inter,sans-serif;

    font-size:20px;

}

.page{

    max-width:1500px;

    margin:50px auto;

    padding:0 30px;

    display:grid;

    grid-template-columns:280px 1fr;

    gap:50px;

    align-items:start;

}

.sidebar{

    position:sticky;

    top:30px;

    max-height:calc(100vh - 60px);

    overflow-y:auto;

    padding-right:8px;

}

.toc-box{

    background:white;

    border-radius:16px;

    padding:30px;

    box-shadow:var(--shadow);

}

.sidebar::-webkit-scrollbar{
    width:8px;
}

.sidebar::-webkit-scrollbar-thumb{
    background:#cfa74a;
    border-radius:8px;
}

.sidebar::-webkit-scrollbar-track{
    background:transparent;
}

main{

    background:white;

    padding:70px;

    border-radius:16px;

    box-shadow:var(--shadow);

    min-width:0;

}

#toc a{

    display:block;

    padding:12px 0;

    color:var(--navy);

    text-decoration:none;

    font-family:Inter,sans-serif;

    font-weight:500;

    transition:.25s;

}

#toc a:hover{

    color:var(--red);

    transform:translateX(6px);

}

#toc a.active{

    color:var(--red);

    font-weight:700;

    border-left:4px solid var(--gold);

    padding-left:14px;

}

/* ==========================================================
   SIDEBAR
========================================================== */

.toc-box{

    background:var(--paper);

    border-radius:18px;

    padding:30px;

    box-shadow:var(--shadow);

    border:1px solid #e6e6e6;

}

.toc-box h3{

    margin-bottom:25px;

    font-family:Inter,sans-serif;

    font-size:14px;

    letter-spacing:2px;

    text-transform:uppercase;

    color:var(--muted);

}

#toc{

    margin-bottom:35px;

}

#toc a{

    display:block;

    padding:10px 0;

    font-family:Inter,sans-serif;

    font-size:15px;

    color:var(--navy);

    border-left:3px solid transparent;

    padding-left:12px;

    transition:.25s;

}

#toc a:hover{

    border-left:3px solid var(--gold);

    color:var(--gold);

    padding-left:18px;

}

#toc a.active{

    border-left:3px solid var(--gold);

    color:var(--gold);

    font-weight:700;

}

.reading-info{

    margin-top:30px;

    padding-top:25px;

    border-top:1px solid #e3e3e3;

    font-family:Inter,sans-serif;

}

.reading-info strong{

    display:block;

    margin-bottom:8px;

    font-size:13px;

    letter-spacing:1px;

    text-transform:uppercase;

    color:#666;

}

.reading-info strong{

    display:block;

    font-size:.72rem;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#666;

    margin-bottom:14px;

}

#readtime{

    margin:0;

    font-size:2rem;

    font-weight:700;

    color:var(--primary);

}

#readtime span{

    font-size:1rem;

    font-weight:500;

    color:#555;

}

#readtime{

    margin:0;

    font-size:18px;

    font-weight:600;

}

/* ==========================================================
   ARTICLE HERO
========================================================== */

.hero{

    border-bottom:4px solid var(--gold);

    padding-bottom:50px;

    margin-bottom:60px;

}

.article-category{

    font-family:Inter,sans-serif;

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:14px;

    font-weight:700;

    color:var(--gold);

    margin-bottom:20px;

}

.article-title{

    font-size:72px;

    line-height:1.05;

    color:var(--navy);

    margin-bottom:20px;

}

.article-subtitle{

    font-size:28px;

    line-height:1.4;

    color:#666;

    font-style:italic;

    margin-bottom:30px;

}

.article-meta{

    font-family:Inter,sans-serif;

    font-size:16px;

    color:#666;

}

.article-header-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:2.5rem;
    gap:1rem;
}

.article-header-meta .article-meta{
    margin:0;
}

/* ==========================================================
   ARTICLE BODY
========================================================== */

article{

    max-width:900px;

}

article h2{

    margin-top:80px;

    margin-bottom:25px;

    font-size:48px;

    color:var(--navy);

}

article p{

    margin-bottom:32px;

    text-align:justify;

}

.dropcap:first-letter{

    float:left;

    font-size:5rem;

    line-height:.8;

    margin-right:10px;

    color:var(--navy);

    font-family:"Cormorant Garamond",serif;

    font-weight:700;

}/* ==========================================================
   FIGURES
========================================================== */

figure{

    margin:70px auto;

    max-width:900px;

}

figure img{

    width:100%;

    border-radius:12px;

    border:1px solid #ddd;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

figcaption{

    margin-top:15px;

    font-family:Inter,sans-serif;

    font-size:14px;

    color:#666;

    text-align:center;

}


/* ==========================================================
   PULL QUOTES
========================================================== */

blockquote{

    margin:70px auto;

    padding:35px 45px;

    border-left:6px solid var(--gold);

    background:#faf8f2;

    border-radius:12px;

    font-size:1.45rem;

    font-style:italic;

    color:#333;

    box-shadow:0 8px 20px rgba(0,0,0,.05);

}


/* ==========================================================
   TABLES
========================================================== */

table{

    width:100%;

    border-collapse:collapse;

    margin:50px 0;

}

th{

    background:#f2efe8;

    color:var(--navy);

    font-family:Inter,sans-serif;

}

th,
td{

    padding:15px;

    border:1px solid #ddd;

}


/* ==========================================================
   SOURCES
========================================================== */

article ul{

    margin-top:25px;

}

article li{

    margin-bottom:12px;

    line-height:1.7;

}

/* ==========================================================
   PROGRESS BAR
========================================================== */

#progress{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:5px;

    background:var(--gold);

    z-index:9999;

}


/* ==========================================================
   BACK TO TOP
========================================================== */

#top{

    position:fixed;

    right:30px;

    bottom:30px;

    width:60px;

    height:60px;

    border:4px solid white;

    border-radius:50%;

    background:var(--gold);

    color:var(--navy);

    font-size:34px;

    font-weight:800;

    line-height:1;

    cursor:pointer;

    box-shadow:0 8px 20px rgba(0,0,0,.2);

    transition:
    background .25s,
    transform .25s,
    box-shadow .25s;

    display:flex;

    align-items:center;

    justify-content:center;

}

#top i{

    font-size:34px;

    font-weight:900;

    line-height:1;

    transform:translateY(-1px);

}


#top:hover{

    background:#c8102e;

    color:var(--navy);

    transform:translateY(-4px) scale(1.08);

    box-shadow:0 14px 30px rgba(0,0,0,.28);

}


/* ==========================================================
   FOOTER
========================================================== */

.site-footer{

    margin-top:100px;

    background:var(--navy);

    color:white;

    text-align:center;

    padding:70px 30px;

}

.site-footer h2{

    color:white;

    margin-bottom:10px;

}

.site-footer hr{

    width:120px;

    margin:30px auto;

    border:none;

    border-top:2px solid var(--gold);

}

.footer-content{

    max-width:900px;

    margin:auto;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:1100px){

    .page{

        grid-template-columns:1fr;

    }

    .sidebar{

        position:relative;

        top:auto;

    }

    main{

        padding:40px;

    }

    .article-title{

        font-size:52px;

    }

}

@media (max-width:700px){

    body{

        font-size:20px;

    }

    main{

        padding:25px;

    }

    .article-title{

        font-size:42px;

    }

    article h2{

        font-size:36px;

    }

    .site-brand h1{

        font-size:48px;

    }

}

/* ==========================================================
   ARTICLE HERO IMAGE
========================================================== */

.article-hero{

    margin:40px 0 70px;

}

.article-hero img{

    width:100%;

    height:340px;

    object-fit:cover;

    object-position:center center;

    border-radius:18px;

    box-shadow:0 18px 45px rgba(0,0,0,.18);

}

/* ==========================================================
   ARTICLE IMAGES
========================================================== */

figure{

    margin:50px 0;

}

.article-image{

    display:block;

    width:100%;

    border-radius:18px;

    border:1px solid rgba(0,0,0,.08);

    box-shadow:0 18px 40px rgba(0,0,0,.12);

    transition:
        transform .25s,
        box-shadow .25s;

    cursor:zoom-in;

}

.article-image:hover{

    transform:translateY(-4px);

    box-shadow:0 24px 48px rgba(0,0,0,.18);

}

figcaption{

    margin-top:16px;

    text-align:center;

    font-family:Inter,sans-serif;

    font-size:.95rem;

    color:#666;

    font-style:italic;

}

/* ==========================================================
   IMAGE LIGHTBOX
========================================================== */

.lightbox{

    position:fixed;

    inset:0;

    background:rgba(10,18,38,.92);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:opacity .25s ease;

    z-index:5000;

    cursor:zoom-out;

}

.lightbox.active{

    opacity:1;

    visibility:visible;

}

#lightbox-image{

    max-width:92vw;

    max-height:92vh;

    border-radius:16px;

    box-shadow:0 30px 70px rgba(0,0,0,.45);

    border:2px solid rgba(255,255,255,.15);

    transform:scale(.95);

    transition:transform .25s ease;

}

.lightbox.active #lightbox-image{

    transform:scale(1);

}

/* ==========================================================
   PULL QUOTES
========================================================== */

.pull-quote{

    margin:70px auto;

    padding:50px 60px;

    max-width:760px;

    text-align:center;

    border-top:3px solid var(--gold);

    border-bottom:3px solid var(--gold);

}

.pull-quote blockquote{

    margin:0;

    font-family:"Cormorant Garamond",serif;

    font-size:2.3rem;

    line-height:1.35;

    color:var(--navy);

    font-weight:600;

}

.pull-quote cite{

    display:block;

    margin-top:28px;

    font-family:Inter,sans-serif;

    font-size:.95rem;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:#777;

    font-style:normal;

}

/* ==========================================================
   TIMELINE
========================================================== */

.timeline{

    margin:0;

}

.timeline h2{

    margin:0 0 35px;

    text-align:center;

    font-family:"Cormorant Garamond",serif;

    font-size:2rem;

    font-weight:700;

    color:var(--navy);

    padding-bottom:18px;

    border-bottom:2px solid var(--gold);

}

.timeline-item{
    position:relative;
    
    padding:0 0 42px 42px;

    margin-bottom:32px;
}




.timeline-item::after{

    content:"";

    position:absolute;

    left:11px;

    top:24px;

    bottom:-30px;

    width:2px;

    background:var(--gold);

}

.timeline-item:last-child::after{

    display:none;

}

.timeline-item:last-child{

    margin-bottom:0;

    padding-bottom:0;

    border-left:none;

}

.timeline-item::before{

    content:"★";

    position:absolute;

    left:0;

    top:5px;

    font-size:22px;

    line-height:1;

    color:#9b1c1c;

    -webkit-text-stroke:.7px var(--gold);

    text-shadow:
        .5px .5px 0 rgba(194,150,39,.6);

}


.timeline-year{

    display:block;

    margin-bottom:2px;

    font-family:"Cormorant Garamond",serif;

    font-size:2.6rem;

    font-weight:700;

    line-height:1;

    color:var(--gold);

    -webkit-text-stroke:.35px #a11b1b;

    text-shadow:.5px .5px 0 rgba(161,27,27,.45);

    margin-left:-2px;

}

.timeline-content h3{

    margin:0 0 8px;

    font-family:"Cormorant Garamond",serif;

    font-size:1.5rem;

    color:var(--navy);

    line-height:1.25;

}

.timeline-content p{

    margin:0;

    font-family:Inter,sans-serif;

    font-size:.95rem;

    line-height:1.6;

    color:#666;

}

/* ==========================================================
   EDITORIAL MODULES
========================================================== */


.editorial-module{
    float:right;
    width:320px;
    margin:20px -70px 40px 40px;
    padding:30px;
    background:#fdfbf6;
    border:1px solid rgba(194,150,39,.12);
    border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

#sources{
    clear:right;
}

/* ==========================================================
   SOURCES
========================================================== */

.sources-intro{
    max-width:900px;
    margin:0 0 50px;
    font-style:italic;
    color:#555;
}

.sources-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:32px;
    margin-top:40px;
}

.source-category{
    height:100%;
    background:#faf8f2;
    padding:28px;
    border-radius:16px;
    border:1px solid rgba(200,160,60,.18);
    box-shadow:0 8px 24px rgba(0,0,0,.05);
}

.source-category h3{
    margin:0 0 18px;
    color:var(--navy);
    font-size:1.8rem;
    border-bottom:2px solid var(--gold);
    padding-bottom:8px;
}

.source-category ul{
    margin:0;
    padding-left:22px;
}

.source-category li{
    margin-bottom:10px;
    line-height:1.6;
}


/* =====================================================
   FRANKLIN FEATURE
===================================================== */

.section-break{
    margin:70px auto;
    text-align:center;
}

.photo-heading{
    font-family:'Cormorant Garamond', serif;
    font-size:2rem;
    font-style:italic;
    color:#1e3a6d;
    margin-bottom:30px;
    position:relative;
}

.photo-heading:before,
.photo-heading:after{
    content:"";
    position:absolute;
    top:50%;
    width:30%;
    height:2px;
    background:#c7a347;
}

.photo-heading:before{
    left:0;
}

.photo-heading:after{
    right:0;
}

.photo-pair{
    display:flex;
    gap:25px;
    justify-content:center;
    align-items:flex-start;
    flex-wrap:wrap;
    margin-bottom:20px;
}

.photo-pair .article-photo{
    flex:1 1 380px;
    max-width:520px;
}

.photo-pair img{
    width:100%;
    border-radius:8px;
    border:1px solid #d8d8d8;
    box-shadow:0 6px 18px rgba(0,0,0,.15);
}

.photo-pair-caption{
    max-width:900px;
    margin:0 auto;
    font-style:italic;
    color:#666;
    line-height:1.6;
}

/* ==========================================================
   DOWNLOAD BUTTON
========================================================== */

.article-download{

    margin:30px 0 45px;

}

.download-button{

    display:inline-block;

    padding:12px 24px;

    background:var(--navy);

    color:#fff;

    text-decoration:none;

    font-family:Inter,sans-serif;

    font-size:.95rem;

    font-weight:600;

    border-radius:999px;

    transition:all .2s ease;

}

.download-button:hover{

    background:var(--gold);

    color:var(--navy);

}

/* =========================================================
   FEATURE PHOTOGRAPHS
========================================================= */

.feature-photo{
    margin:3rem 0 4rem;
}

.feature-photo img{
    display:block;
    width:100%;
    border-radius:16px;
    border:1px solid #ddd;
    box-shadow:0 12px 30px rgba(0,0,0,.10);
}

.feature-photo figcaption{
    max-width:90%;
    margin:1rem auto 0;
    text-align:center;
    font-style:italic;
    color:#666;
    line-height:1.6;
    font-size:.98rem;
}

/* =========================================================
   TWO PHOTO GRID
========================================================= */

.photo-grid-2{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:1.5rem;

    margin:3rem 0;

}

.photo-grid-2 figure{

    margin:0;

}

.photo-grid-2 img{

    width:100%;

    display:block;

    border-radius:14px;

    border:1px solid #ddd;

    box-shadow:0 10px 24px rgba(0,0,0,.08);

}

.photo-grid-2 figcaption{

    margin-top:.75rem;

    text-align:center;

    font-style:italic;

    color:#666;

    line-height:1.5;

   font-size:.95rem;
}

@media(max-width:900px){

}

/* ==========================================================
   TWO PHOTO GALLERY
========================================================== */

.photo-grid-2{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:2rem;
    margin:3rem 0;
}

.photo-grid-2 figure{
    margin:0;
}

.photo-grid-2 img{
    width:100%;
    height:300px;
    object-fit:cover;
    object-position:center;
    display:block;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
}

.photo-grid-2 figcaption{
    margin-top:1.5rem;
    text-align:center;
    font-style:italic;
    color:#666;
    line-height:1.6;
}

/* ==========================================
   KING'S GARDEN HERO
========================================== */

.hero-photo-section {
    margin: 4rem auto;
    max-width: 1200px;
}

.hero-photo-section img {
    width: 100%;
    height: 700px;
    object-fit: cover;
    display: block;
    border-radius: 14px;
}

.hero-photo-section figure {
    margin: 0;
}

.hero-photo-section img {

    width: 100%;
    height: 600px;

    display: block;

    object-fit: cover;
    object-position: center 42%;

    border-radius: 14px;

    box-shadow:
        0 12px 30px rgba(0,0,0,.18);

    transition: transform .35s ease;
}

.hero-photo-section img:hover{
    transform: scale(1.01);
}

.hero-photo-section figcaption{

    margin-top:1.25rem;

    text-align:center;

    font-style:italic;

    color:#666;

    font-size:1rem;

    line-height:1.7;

    max-width:900px;

    margin-left:auto;
    margin-right:auto;
}

/* Staircase photo — slightly reduced for visual balance */
.stairs-figure img {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

/* Historical maps — smaller than photographic figures */
.historical-map {
    max-width: 78%;
    margin: 3rem auto;
}

.historical-map img {
    width: 100%;
    height: auto;
}

.historical-map figcaption {
    margin-top: 1rem;
    text-align: center;
}

/* Indigenous history photograph */
.native-american-figure {
    width: 64%;
    margin: 2.5rem auto 2rem;
}

.native-american-figure img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center 48%;
    display: block;
}

/* Young Washington historical artwork */
.washington-figure {
    width: 70%;
    margin: 3rem auto 2.5rem;
}

.washington-figure img {
    width: 100%;
    height: auto;
    display: block;
}

/* ==========================================
   CARILLON PLAN
========================================== */

.carillon-plan-figure {
    max-width: 900px;
    margin: 3rem auto;
}

.carillon-plan-figure img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}

.carillon-plan-figure figcaption {
    margin-top: 1rem;
    text-align: center;
    font-size: 0.95rem;
    font-style: italic;
    line-height: 1.5;
    color: #666;
}

/* ==========================================
   BATTLE OF CARILLON — 1758
========================================== */

.battle-carillon-figure {
    width: 80%;
    margin: 3rem auto;
}

.battle-carillon-figure img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.battle-carillon-figure figcaption {
    margin-top: 1rem;
    text-align: center;
    font-size: 0.95rem;
    font-style: italic;
    line-height: 1.5;
    color: #666;
}

.schieffelin-figure img {
    width: 62%;
    max-width: 620px;
    height: 560px;
    object-fit: cover;
    object-position: center 42%;
    display: block;
    margin: 0 auto;
}

/* The Fall of Carillon — overlooking the lake */
.overlooking-lake-figure {
    max-width: 820px;
    margin: 2.5rem auto 2.75rem;
}

.overlooking-lake-figure img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    object-position: center center;
    border-radius: 10px;
    display: block;
}

/* American Revolutionary-era plaque */
.american-plaque-figure {
    max-width: 620px;
    margin: 42px auto 46px;
}

.american-plaque-figure img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.american-plaque-figure figcaption {
    margin-top: 14px;
    text-align: center;
    font-style: italic;
    font-size: 0.92rem;
    line-height: 1.55;
    color: #666;
}

/* Franco-American friendship plaque */
.franco-american-figure {
    max-width: 560px;
    margin: 42px auto 46px;
}

.franco-american-figure img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 620px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.franco-american-figure figcaption {
    margin-top: 14px;
    text-align: center;
    font-style: italic;
    font-size: 0.92rem;
    line-height: 1.55;
    color: #666;
}

/* Ethan Allen at Ticonderoga */
.ethan-allen-figure {
    max-width: 680px;
    margin: 44px auto 48px;
}

.ethan-allen-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.ethan-allen-figure figcaption {
    margin-top: 14px;
    text-align: center;
    font-style: italic;
    font-size: 0.92rem;
    line-height: 1.55;
    color: #666;
}

.ethan-allen-figure .figure-source {
    max-width: 620px;
    margin: 8px auto 0;
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #888;
}

/* Colonel Benedict Arnold — 1776 portrait */
.colonel-arnold-figure {
    max-width: 400px;
    margin: 40px auto 44px;
}

.colonel-arnold-figure img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 560px;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.12);
}

.colonel-arnold-figure figcaption {
    margin-top: 12px;
    text-align: center;
    font-style: italic;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #666;
}

.colonel-arnold-figure .figure-source {
    max-width: 380px;
    margin: 7px auto 0;
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #888;
}

/* ==========================================================
   HENRY KNOX — GUNS OF TICONDEROGA
========================================================== */

/* Hero image */
.knox-hero {
    margin: 2.75rem 0 3.25rem;
}

.knox-hero {
    max-width: 760px;
    margin: 2.5rem auto 3rem;
}

.knox-hero img {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 2px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.knox-hero figcaption,
.knox-closing figcaption {
    margin-top: 0.7rem;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #666;
    text-align: center;
}


/* Two-photo diptych */
.knox-diptych {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 3.25rem 0 0.65rem;
}

.knox-diptych figure {
    margin: 0;
    overflow: hidden;
}

.knox-diptych img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}

.knox-diptych-caption {
    margin: 0 0 3rem;
    font-size: 0.78rem;
    line-height: 1.5;
    color: #666;
    text-align: center;
}


/* Closing image */
.knox-closing {
    margin: 3.75rem 0 2.25rem;
}

.knox-closing img {
    width: 100%;
    max-height: 600px;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 2px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12);
}


/* Mobile */
@media (max-width: 700px) {

    .knox-diptych {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .knox-diptych img {
        aspect-ratio: 16 / 10;
    }

    .knox-hero img,
    .knox-closing img {
        max-height: 420px;
    }
}

/* =========================================================
   TICONDEROGA — AMERICAN FORTRESS IMAGE SYSTEM
   ========================================================= */

.hi-section-image {
    margin: 2.5rem auto;
    max-width: 700px;
}

.hi-section-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2px;
}

.hi-section-image figcaption {
    margin-top: 0.65rem;
    padding: 0 0.5rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #666;
    text-align: center;
    font-style: italic;
}

.hi-image-medium {
    max-width: 700px;
}

.hi-image-wide {
    max-width: 1000px;
}


/* Barracks photographic diptych */

.hi-image-diptych {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    max-width: 1000px;
    margin: 3rem auto;
}

.hi-image-diptych figure {
    margin: 0;
}

.hi-image-diptych img {
    display: block;
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 2px;
}

.hi-image-diptych figcaption {
    margin-top: 0.65rem;
    padding: 0 0.25rem;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #666;
    text-align: center;
    font-style: italic;
}


/* Mobile */

@media (max-width: 700px) {

    .hi-image-diptych {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .hi-image-diptych img {
        height: auto;
    }

    .hi-section-image {
        margin: 2rem auto;
    }

}

.hi-cannon-image {
    max-width: 700px;
}

.hi-cannon-image img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

/* =========================================================
   GENTLEMAN JOHNNY — BURGOYNE PORTRAIT
   ========================================================= */

.hi-burgoyne-image {
    max-width: 680px;
    margin: 2.75rem auto;
}

.hi-burgoyne-image img {
    display: block;
    width: 100%;
    height: auto;
}

.hi-burgoyne-image figcaption {
    margin-top: 0.65rem;
    padding: 0 0.5rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #666;
    text-align: center;
    font-style: italic;
}

/* ==========================================================
   HIGHER IDEALS — FORT TICONDEROGA PART I
   MOUNT DEFIANCE ART DIRECTION
   Updated: August 8, 2026
========================================================== */

/*
   Visual principle:
   This sequence moves from PLACE → TERRAIN → INTERPRETATION
   → THREAT → ARTILLERY.

   It is intentionally documentary rather than gallery-like.
*/

/* ----------------------------------------------------------
   HERO / PANORAMA
---------------------------------------------------------- */

.defiance-hero {
    margin: 2.75rem 0 3.5rem;
}

.defiance-hero img {
    width: 100%;
    max-height: 680px;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 2px;
    box-shadow: 0 16px 42px rgba(0,0,0,.13);
}

.defiance-hero figcaption,
.defiance-sign figcaption,
.defiance-supporting figcaption,
.defiance-cannon-wide figcaption,
.defiance-cannon-detail figcaption,
.defiance-pair figcaption {
    margin-top: .7rem;
    font-family: "Inter", Arial, sans-serif;
    font-size: .78rem;
    line-height: 1.5;
    color: #666;
}

/* ----------------------------------------------------------
   TERRAIN + OVERLOOK DIPTYCH
---------------------------------------------------------- */

.defiance-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 3.25rem 0 3.5rem;
}

.defiance-pair figure {
    margin: 0;
}

.defiance-pair img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 2px;
    box-shadow: 0 10px 28px rgba(0,0,0,.10);
}

/* ----------------------------------------------------------
   INTERPRETIVE SIGN
---------------------------------------------------------- */

.defiance-sign {
    margin: 3.5rem auto;
    max-width: 860px;
}

.defiance-sign img {
    width: 100%;
    max-height: 620px;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 2px;
    box-shadow: 0 12px 32px rgba(0,0,0,.10);
}

/* ==========================================================
   MOUNT DEFIANCE — CANNON PHOTO SEQUENCE
   ========================================================== */

.defiance-cannon-sequence {
    display: grid;
    grid-template-columns: 1.35fr 0.75fr;
    gap: 22px;

    align-items: start;

    max-width: 900px;
    margin: 3rem auto 1rem;
}


/* ==========================================================
   FIGURES
   ========================================================== */

.defiance-cannon-sequence figure {
    margin: 0;
    padding: 0;
}


/* ==========================================================
   PRIMARY PHOTO
   defiance-cannon3.jpg

   Large image.
   Modest crop from the original photograph.
   Faces remain outside the frame while preserving
   most of the original scene.
   ========================================================== */

.defiance-cannon-wide {
    overflow: hidden;
}

.defiance-cannon-wide img {
    width: 100%;
    height: 700px;

    object-fit: cover;
    object-position: center 58%;

    display: block;

    border-radius: 2px;

    box-shadow:
        0 12px 34px rgba(0, 0, 0, 0.12);
}


/* ==========================================================
   SECONDARY PHOTO
   defiance-cannon5.jpg

   Landscape photograph.
   NO CROPPING.
   Preserve the complete original image.
   ========================================================== */

.defiance-cannon-context {
    width: 100%;

    margin-top: 40px;
}

.defiance-cannon-context img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    border-radius: 2px;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.11);
}


/* ==========================================================
   CAPTIONS
   ========================================================== */

.defiance-cannon-sequence figcaption {
    margin-top: 10px;

    text-align: center;

    font-size: 0.82rem;
    line-height: 1.4;

    font-style: italic;

    color: #666;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {

    .defiance-cannon-sequence {
        grid-template-columns: 1fr;

        gap: 28px;

        max-width: 100%;
    }


    .defiance-cannon-wide img {
        height: auto;

        object-fit: contain;
    }


    .defiance-cannon-context {
        max-width: 100%;

        margin-top: 0;
    }

}

/* =========================================================
   WHEN THE GUNS FELL SILENT — MAP STYLING
   Higher Ideals
   ========================================================= */

.map-feature {
    width: min(760px, 92%);
    margin: 2.5rem auto 3rem;
    text-align: center;
}

.map-feature img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 3px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
}

.map-feature figcaption {
    max-width: 700px;
    margin: 0.75rem auto 0;
    padding: 0 1rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.92rem;
    line-height: 1.45;
    font-style: italic;
    color: #666;
}

/* Saratoga map is intentionally a little smaller */
.map-feature-secondary {
    width: min(680px, 88%);
    margin-top: 3.5rem;
    margin-bottom: 2.5rem;
}

/* Mobile */
@media (max-width: 700px) {
    .map-feature,
    .map-feature-secondary {
        width: 96%;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .map-feature figcaption {
        font-size: 0.86rem;
    }
}

/* =========================================================
   HIGHER IDEALS — SOURCES & FURTHER READING
   Fort Ticonderoga Part I
   ========================================================= */

.sources-section {
    margin-top: 5rem;
    padding-top: 4rem;
    border-top: 1px solid rgba(20, 50, 95, 0.18);
}

.sources-section .sources-intro {
    max-width: 850px;
    margin: 0 auto 3.5rem;
    text-align: center;
}

.sources-section .sources-intro p {
    margin: 0 auto 1rem;
}

.sources-section .sources-note-inline {
    font-size: 0.9rem;
    font-style: italic;
    opacity: 0.75;
}


/* ---------------------------------------------------------
   MAJOR SOURCE GROUPS
   --------------------------------------------------------- */

.source-section-block {
    max-width: 1100px;
    margin: 0 auto 4.5rem;
}

.source-section-heading {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(20, 50, 95, 0.18);
}

.source-section-number {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid #c9a23f;
    color: #123b73;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.source-section-heading .section-kicker {
    margin-bottom: 0.3rem;
}

.source-section-heading h3 {
    margin: 0;
}


/* ---------------------------------------------------------
   SOURCE LISTS
   --------------------------------------------------------- */

.source-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
}

.source-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem;
}

.source-entry {
    padding: 1.75rem;
    background: rgba(248, 246, 240, 0.72);
    border: 1px solid rgba(201, 162, 63, 0.25);
    border-radius: 2px;
}

.source-entry h4 {
    margin: 0 0 0.9rem;
    color: #123b73;
}

.source-entry p {
    margin: 0 0 1rem;
    text-align: left;
}

.source-entry .source-detail {
    font-size: 0.92rem;
    opacity: 0.88;
}

.source-link {
    display: inline-block;
    margin-top: 0.35rem;
    color: #123b73;
    font-weight: 600;
    text-decoration: none;
}

.source-link:hover {
    text-decoration: underline;
}


/* ---------------------------------------------------------
   VISUAL MATERIALS
   --------------------------------------------------------- */

.source-section-block--visual {
    margin-top: 5rem;
}

.visual-credit-panel {
    margin-bottom: 2rem;
    padding: 2rem;
    background: #123b73;
    color: #f8f6f0;
    border-left: 5px solid #c9a23f;
}

.visual-credit-panel h4 {
    margin: 0 0 0.75rem;
    color: #ffffff;
}

.visual-credit-panel p {
    max-width: 800px;
    margin: 0 0 1rem;
}

.visual-credit-panel .copyright-credit {
    margin-bottom: 0;
    font-size: 0.9rem;
    opacity: 0.9;
}


/* ---------------------------------------------------------
   VISUAL SOURCE LIST
   --------------------------------------------------------- */

.visual-source-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid rgba(20, 50, 95, 0.18);
}

.visual-source {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 1rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(20, 50, 95, 0.14);
}

.visual-source-number {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0.15rem;
    color: #c9a23f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.9rem;
    font-weight: 700;
}

.visual-source h4 {
    margin: 0 0 0.45rem;
    color: #123b73;
}

.visual-source p {
    margin: 0 0 0.65rem;
    font-size: 0.92rem;
}

.visual-source a {
    color: #123b73;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.visual-source a:hover {
    text-decoration: underline;
}


/* ---------------------------------------------------------
   CLOSING RESEARCH NOTE
   --------------------------------------------------------- */

.sources-closing-note {
    max-width: 850px;
    margin: 4rem auto 0;
    padding: 1.5rem 1.75rem;
    border-top: 1px solid #c9a23f;
    border-bottom: 1px solid rgba(20, 50, 95, 0.18);
    text-align: center;
}

.sources-closing-note strong {
    display: block;
    margin-bottom: 0.5rem;
    color: #123b73;
    font-family: Georgia, "Times New Roman", serif;
}

.sources-closing-note p {
    margin: 0;
    font-size: 0.9rem;
    font-style: italic;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 800px) {

    .sources-section {
        margin-top: 3.5rem;
        padding-top: 3rem;
    }

    .source-grid {
        grid-template-columns: 1fr;
    }

    .source-section-block {
        margin-bottom: 3.5rem;
    }

    .source-section-heading {
        gap: 0.9rem;
    }

    .source-section-number {
        width: 2rem;
        height: 2rem;
    }

    .source-entry {
        padding: 1.4rem;
    }

}


@media (max-width: 520px) {

    .sources-section .sources-intro {
        text-align: left;
    }

    .source-section-heading {
        align-items: center;
    }

    .visual-source {
        grid-template-columns: 2.25rem minmax(0, 1fr);
        gap: 0.75rem;
    }

    .visual-credit-panel {
        padding: 1.4rem;
    }

}

/* ==========================================================
   HIGHER IDEALS — ABOUT THE AUTHOR
   Fort Ticonderoga — Part I
   Added: August 10, 2026
========================================================== */

.about-author-section {
    margin: 6rem 0 2rem;
}

.about-author-card {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 44px;
    align-items: center;
    padding: 48px;
    background: #f4ecd5;
    border: 1px solid rgba(200,160,60,.35);
    border-radius: 22px;
    box-shadow: 0 14px 35px rgba(0,0,0,.08);
}

.about-author-photo-wrap {
    display: flex;
    justify-content: center;
}

.about-author-photo {
    width: 170px;
    height: 170px;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    border: 5px solid #c8a03c;
    box-shadow: 0 10px 24px rgba(0,0,0,.16);
}

.about-author-copy h2 {
    margin: 0 0 8px;
    color: var(--navy);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 2.45rem;
    line-height: 1.05;
}

.about-author-copy h3 {
    margin: 0 0 22px;
    color: #1d3557;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.5rem;
    font-weight: 600;
}

.about-author-copy p {
    margin: 0;
    max-width: 850px;
    line-height: 1.8;
}

/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media (max-width: 800px) {

    .about-author-card {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 34px 26px;
    }

    .about-author-copy p {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 520px) {

    .about-author-photo {
        width: 145px;
        height: 145px;
    }

    .about-author-copy h2 {
        font-size: 2rem;
    }

    .about-author-copy h3 {
        font-size: 1.25rem;
    }
}

/* =========================================================
   HIGHER IDEALS — ABOUT THE AUTHOR
   Fort Ticonderoga — Part I
   HTML selector alignment
   ========================================================= */

.about-author {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 44px;
    align-items: center;
    margin: 60px 0 20px;
    padding: 48px;
    background: #f4ecd5;
    border: 1px solid rgba(200, 160, 60, .35);
    border-radius: 22px;
    box-shadow: 0 14px 35px rgba(0,0,0,.08);
}

.about-author-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-author-image img {
    width: 170px;
    height: 170px;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    border: 5px solid #c8a03c;
    box-shadow: 0 10px 24px rgba(0,0,0,.16);
    display: block;
}

.about-author-content {
    max-width: 850px;
}

.about-author-label {
    margin: 0 0 8px;
    color: #6d6d6d;
    font-family: Arial, sans-serif;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .16em;
}

.about-author-content h2 {
    margin: 0 0 22px;
    color: var(--navy);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 2.45rem;
    line-height: 1.05;
}

.about-author-content h3 {
    margin: 0 0 22px;
    color: #1d3557;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.5rem;
    font-weight: 600;
}

.about-author-content p {
    margin: 0;
    max-width: 850px;
    line-height: 1.8;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 800px) {

    .about-author {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 34px 26px;
    }

    .about-author-content p {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 520px) {

    .about-author-image img {
        width: 145px;
        height: 145px;
    }

    .about-author-content h2 {
        font-size: 2rem;
    }

    .about-author-content h3 {
        font-size: 1.25rem;
    }
}