@import url('https://fonts.googleapis.com/css2?family=GFS+Didot&family=Manrope:wght@400;600;700;800&display=swap');
:root{--wine:#651f23;--wine-dark:#351811;--gold:#bd8b43;--sand:#e5cf9e;--paper:#f5edda;--ink:#261d17;--muted:#75675b;--line:#cdbd9b;--night:#17120f}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,"Segoe UI",sans-serif;line-height:1.7}img{display:block;max-width:100%}a{color:inherit}button{font:inherit}.topbar{position:absolute;z-index:10;top:0;left:0;width:100%;height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,4vw,62px);border-bottom:1px solid rgba(255,255,255,.22);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.15em}.home-link{text-decoration:none}.topbar button{display:none;border:1px solid rgba(255,255,255,.5);background:transparent;color:white;padding:8px 10px}.hero{position:relative;min-height:760px;display:flex;align-items:end;overflow:hidden;background:var(--night);color:#fff}.hero-image{position:absolute;inset:0;background:url('images/constantine.webp') center 22%/cover no-repeat;filter:saturate(.6) contrast(1.07)}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(19,12,9,.96) 0%,rgba(33,16,10,.78) 40%,rgba(33,16,10,.12) 77%),linear-gradient(0deg,rgba(15,10,8,.9),transparent 55%)}.hero-content{position:relative;z-index:2;width:min(920px,calc(100% - 48px));margin:0 max(24px,calc((100vw - 1180px)/2));padding:150px 0 85px}.kicker,.chapter-heading p,.remember>p:first-child{margin:0 0 14px;color:#e4ba6e;font-size:.72rem;font-weight:800;letter-spacing:.18em}.hero h1{max-width:870px;margin:0;font-family:"GFS Didot",Georgia,serif;font-size:clamp(3.5rem,8vw,7.8rem);font-weight:400;line-height:.88;text-wrap:balance}.hero h1 em{display:block;color:var(--sand);font-weight:400}.hero-intro{max-width:700px;margin:30px 0;color:#e8dfd3;font-size:1.08rem}.start-link{display:inline-block;border:1px solid #d4ac6b;padding:12px 18px;color:#fff;text-decoration:none;font-size:.75rem;font-weight:800;letter-spacing:.09em}.roman-number{position:absolute;right:2vw;bottom:-12vw;color:rgba(255,255,255,.055);font-family:"GFS Didot",serif;font-size:42vw;line-height:1}.page-shell{display:grid;grid-template-columns:230px minmax(0,920px);gap:70px;width:min(1220px,calc(100% - 48px));margin:0 auto}.lesson-nav{position:sticky;top:0;align-self:start;padding:50px 0}.lesson-nav p{margin:0 0 18px;color:var(--gold);font-size:.65rem;font-weight:800;letter-spacing:.16em}.lesson-nav a{display:block;padding:9px 0;border-bottom:1px solid rgba(101,31,35,.13);color:var(--muted);text-decoration:none;font-size:.78rem}.lesson-nav a.active{color:var(--wine);font-weight:800;transform:translateX(6px)}main{min-width:0}.chapter{padding:95px 0;border-bottom:1px solid var(--line);scroll-margin-top:20px}.chapter-heading{display:grid;grid-template-columns:70px 1fr;gap:20px;align-items:start;margin-bottom:36px}.chapter-heading>span{display:grid;place-items:center;width:60px;height:60px;border:1px solid var(--gold);border-radius:50%;color:var(--wine);font-family:"GFS Didot",serif;font-size:1.5rem}.chapter-heading p{margin:4px 0 5px;color:var(--wine)}h2,h3{font-family:"GFS Didot",Georgia,serif;font-weight:400}.chapter-heading h2{max-width:720px;margin:0;font-size:clamp(2.4rem,5vw,4.5rem);line-height:1.02}.lead-text{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-bottom:38px;font-size:1.04rem}.problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:20px 0 35px;background:var(--line);border:1px solid var(--line)}.problem-grid article{padding:24px;background:#f9f4e8}.problem-grid b{display:block;margin-bottom:7px;color:var(--wine);font-family:"GFS Didot",serif;font-size:1.35rem}.problem-grid p{margin:0}.proclamation{margin:40px 0;padding:24px 28px;border-left:6px solid var(--gold);background:var(--wine-dark);color:#fff;font-family:"GFS Didot",serif;font-size:1.5rem}.image-triptych{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.image-triptych figure,.palaces figure,.portrait-feature figure{margin:0}.image-triptych img{width:100%;height:230px;object-fit:cover}.image-triptych figcaption,.palaces figcaption,.portrait-feature figcaption{padding:9px 2px;color:var(--muted);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase}.portrait-feature{display:grid;grid-template-columns:minmax(260px,.8fr) 1.2fr;gap:44px;align-items:center}.portrait-feature img{width:100%;max-height:470px;object-fit:cover}.portrait-feature blockquote{margin:30px 0 0;padding:20px 24px;border-left:4px solid var(--gold);background:#eee1c5;font-family:"GFS Didot",serif;font-size:1.35rem}.map-feature{display:grid;grid-template-columns:1.4fr .8fr;gap:30px;align-items:center;margin:60px 0}.map-feature img{width:100%;border:8px solid #e6d5b4;box-shadow:0 8px 25px rgba(53,24,17,.15)}.rulers{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:25px 0}.rulers article{background:var(--night);color:white}.rulers img{width:100%;height:230px;object-fit:cover;filter:saturate(.72)}.rulers span{display:block;padding:14px 14px 0;color:#d8aa65;font-size:.6rem;font-weight:800;letter-spacing:.14em}.rulers h3{margin:0;padding:0 14px 16px;font-size:1.25rem}.palaces{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:45px}.palaces img{width:100%;height:300px;object-fit:cover}.scroll{margin:45px 6%;padding:45px 8%;background:#e6d2a8;box-shadow:inset 0 0 45px rgba(94,59,27,.18);font-family:"GFS Didot",serif;font-size:1.25rem;text-align:center}.scroll hr{width:80px;border:0;border-top:1px solid var(--wine);margin:26px auto}.monarch-feature{display:grid;grid-template-columns:1fr 320px;gap:45px;align-items:center}.monarch-feature img{height:390px;width:100%;object-fit:cover;box-shadow:18px 18px 0 var(--wine)}.changes-list{padding:0;list-style:none;border-top:1px solid var(--line)}.changes-list li{display:grid;grid-template-columns:80px 1fr;gap:22px;padding:25px 0;border-bottom:1px solid var(--line)}.changes-list li>span{color:var(--gold);font-family:"GFS Didot",serif;font-size:2.4rem}.changes-list h3{margin:0;color:var(--wine);font-size:1.45rem}.changes-list p{margin:4px 0}.timeline{position:relative;margin:40px 0 0;padding:0;list-style:none}.timeline:before{content:"";position:absolute;top:10px;bottom:10px;left:134px;width:1px;background:var(--gold)}.timeline li{position:relative;display:grid;grid-template-columns:110px 1fr;gap:50px;align-items:start;padding:0 0 34px}.timeline li:before{content:"";position:absolute;left:129px;top:9px;width:11px;height:11px;border-radius:50%;background:var(--wine);box-shadow:0 0 0 5px var(--paper)}.timeline time{color:var(--wine);font-weight:800;text-align:right}.timeline p{margin:0}.hint{color:var(--muted)}.questions details{border-top:1px solid var(--line)}.questions details:last-child{border-bottom:1px solid var(--line)}.questions summary{display:grid;grid-template-columns:45px 1fr;gap:16px;padding:20px 6px;cursor:pointer;font-family:"GFS Didot",serif;font-size:1.25rem;list-style:none}.questions summary::-webkit-details-marker{display:none}.questions summary span{color:var(--gold);font-family:Manrope,sans-serif;font-size:.7rem;font-weight:800}.questions details>div{padding:0 20px 24px 67px}.questions details>div b{color:var(--wine);font-size:.65rem;letter-spacing:.15em}.questions details>div p{margin:8px 0}.remember{margin:100px 0;padding:55px;background:var(--wine-dark);color:white;scroll-margin-top:30px}.remember h2{margin:0 0 30px;font-size:3rem}.memory-chain{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:25px 0}.memory-chain span{border:1px solid rgba(229,207,158,.5);padding:8px 11px;color:var(--sand);font-size:.75rem}.memory-chain i{color:var(--gold);font-style:normal}footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:45px max(24px,calc((100vw - 1180px)/2));background:var(--night);color:#cbbda8;font-size:.75rem}footer span{color:var(--gold);font-family:"GFS Didot",serif;font-size:2rem}footer a{color:white}
@media(max-width:900px){.topbar>span{display:none}.topbar button{display:block}.hero{min-height:680px}.hero-shade{background:linear-gradient(0deg,rgba(20,12,8,.96) 0%,rgba(20,12,8,.5) 70%,rgba(20,12,8,.3))}.hero-content{padding-bottom:55px}.page-shell{display:block;width:min(100% - 32px,760px)}.lesson-nav{display:none;position:fixed;z-index:20;inset:70px 12px auto;padding:18px;background:var(--night);box-shadow:0 15px 35px rgba(0,0,0,.35)}.lesson-nav.open{display:block}.lesson-nav p{margin-bottom:8px}.lesson-nav a{color:#ded2c0;border-color:rgba(255,255,255,.13)}.chapter{padding:70px 0}.lead-text,.portrait-feature,.map-feature,.monarch-feature{grid-template-columns:1fr}.portrait-feature figure{max-width:520px}.rulers{grid-template-columns:1fr 1fr}.monarch-feature img{width:min(100%,480px);order:-1}.remember{margin:70px -16px 0;padding:40px 24px}}

main img{cursor:zoom-in}
.image-lightbox{width:100vw;max-width:none;height:100vh;max-height:none;margin:0;padding:clamp(52px,7vw,88px);border:0;background:rgba(15,10,8,.95);color:#fff;overflow:auto}
.image-lightbox::backdrop{background:rgba(15,10,8,.8);backdrop-filter:blur(5px)}
.image-lightbox[open]{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center}
.image-lightbox figure{width:100%;height:100%;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;margin:0}
.image-lightbox img{max-width:100%;max-height:calc(100vh - 150px);object-fit:contain;box-shadow:0 18px 60px rgba(0,0,0,.55)}
.image-lightbox figcaption{color:#ead6ad;font-size:.78rem;font-weight:700;letter-spacing:.09em;text-align:center;text-transform:uppercase}
.lightbox-close{position:fixed;z-index:2;top:18px;right:22px;width:44px;height:44px;border:1px solid rgba(255,255,255,.55);background:#651f23;color:#fff;cursor:pointer;font-size:1.8rem;line-height:1}
.lightbox-close:hover,.lightbox-close:focus-visible{background:#a84a42}
.lightbox-arrow{width:54px;height:70px;margin:12px;border:1px solid rgba(234,214,173,.55);background:transparent;color:#ead6ad;cursor:pointer;font-size:1.45rem}
.lightbox-arrow:hover,.lightbox-arrow:focus-visible{border-color:#ead6ad;background:#651f23;color:#fff}
body.lightbox-open{overflow:hidden}
@media(max-width:600px){.image-lightbox{padding:62px 14px 70px}.image-lightbox[open]{grid-template-columns:1fr}.image-lightbox img{max-height:calc(100vh - 155px)}.lightbox-close{top:12px;right:12px}.lightbox-arrow{position:fixed;z-index:2;bottom:12px;width:52px;height:48px;margin:0;background:rgba(15,10,8,.88)}.lightbox-arrow.previous{left:14px}.lightbox-arrow.next{right:14px}}
@media(max-width:560px){.hero{min-height:620px}.hero h1{font-size:3.5rem}.hero-intro{font-size:.95rem}.chapter-heading{grid-template-columns:48px 1fr;gap:13px}.chapter-heading>span{width:46px;height:46px;font-size:1.15rem}.chapter-heading h2{font-size:2.35rem}.lead-text,.problem-grid,.image-triptych,.palaces{grid-template-columns:1fr}.image-triptych img,.palaces img{height:auto}.rulers{grid-template-columns:1fr 1fr}.rulers img{height:180px}.scroll{margin:35px 0;padding:30px 20px}.changes-list li{grid-template-columns:52px 1fr}.timeline:before{left:82px}.timeline li{grid-template-columns:65px 1fr;gap:36px}.timeline li:before{left:77px}.timeline time{font-size:.74rem}.remember h2{font-size:2.4rem}footer{align-items:flex-start;flex-direction:column}}
body{overflow-x:hidden}.hero h1{overflow-wrap:anywhere}.chapter-heading{grid-template-columns:70px minmax(0,1fr)}.chapter-heading>div{min-width:0}
@media(max-width:560px){.topbar{position:fixed;width:100vw;background:rgba(23,18,15,.9);backdrop-filter:blur(8px)}.hero-content{width:calc(100vw - 48px);margin-right:24px;margin-left:24px}.page-shell{width:calc(100vw - 32px)}.hero h1{font-size:2.9rem}.chapter-heading{grid-template-columns:48px minmax(0,1fr)}.chapter-heading h2{overflow-wrap:anywhere}}
.topbar .category-links{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px)}
.topbar .category-links a{color:#fff;text-decoration:none;font-size:.62rem;letter-spacing:.11em}
.topbar .category-links a:hover{color:var(--sand)}
@media(max-width:900px){.topbar .category-links{display:none}}

/* Keep lesson illustrations complete instead of cropping them into fixed frames. */
.image-triptych img,
.portrait-feature img,
.rulers img,
.palaces img,
.monarch-feature img{width:100%;height:auto;max-height:none;object-fit:contain}

/* A more restrained title keeps the portrait and the full heading visible. */
.hero h1{max-width:780px;font-size:clamp(3.1rem,6vw,6.2rem);line-height:.94}
@media(max-width:560px){.hero h1{font-size:2.5rem;line-height:.98}}
.lesson-video{margin-top:65px;padding-top:28px;border-top:1px solid var(--line)}.video-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:14px}.video-heading span{color:var(--wine);font-size:.65rem;font-weight:800;letter-spacing:.16em}.video-heading h3{margin:0;font-size:1.7rem}.video-frame{position:relative;overflow:hidden;width:100%;aspect-ratio:16/9;border:8px solid #e6d5b4;background:var(--night);box-shadow:0 10px 28px rgba(53,24,17,.16)}.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}@media(max-width:560px){.lesson-video{margin-top:45px}.video-heading{display:block}.video-heading h3{margin-top:5px}.video-frame{border-width:4px}}