/* =======================================================
   MUSEUM OF THE TAHUANTINSUYO
   STYLE SHEET
   Version 2
======================================================= */

:root{

--gold:#c9a227;
--gold-light:#e5c75f;

--green:#1f4d3a;
--green-dark:#16392c;

--stone:#f3efe6;
--stone-dark:#ded7cb;

--text:#202020;
--text-light:#5b5b5b;

--white:#ffffff;

--glass:rgba(255,255,255,.18);

--shadow:0 20px 60px rgba(0,0,0,.18);

--radius:22px;

--transition:.35s ease;

}

/* ===================================================== */

*{

margin:0;

padding:0;

box-sizing:border-box;

}

/* ===================================================== */

html{

scroll-behavior:smooth;

}

/* ===================================================== */

body{

font-family:"Inter",sans-serif;

background:var(--stone);

color:var(--text);

line-height:1.7;

overflow-x:hidden;

}

/* ===================================================== */

h1,h2,h3,h4{

font-family:"Cinzel",serif;

font-weight:700;

letter-spacing:.03em;

}

/* ===================================================== */

a{

text-decoration:none;

color:inherit;

}

/* ===================================================== */

img{

display:block;

max-width:100%;

}

/* ===================================================== */

#loader{

position:fixed;

inset:0;

background:var(--green-dark);

color:white;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

gap:20px;

z-index:9999;

animation:fadeOut 1.2s forwards;

animation-delay:1s;

}

.loader-symbol{

font-size:5rem;

color:var(--gold);

animation:pulse 2s infinite;

}

/* ===================================================== */

.hero{

height:100vh;

position:relative;

background-image:

linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.55)),
url("../images/hero.jpg");

background-size:cover;

background-position:center;

display:flex;

flex-direction:column;

justify-content:space-between;

color:white;

}

/* ===================================================== */

.hero-overlay{

position:absolute;

inset:0;

backdrop-filter:blur(1px);

}

/* ===================================================== */

nav{

position:fixed;

top:0;

left:0;

right:0;

height:90px;

padding:0 60px;

display:flex;

justify-content:space-between;

align-items:center;

background:rgba(20,20,20,.18);

backdrop-filter:blur(14px);

z-index:100;

transition:.4s;

}

/* ===================================================== */

.logo{

display:flex;

align-items:center;

gap:18px;

}

.logo-icon{

font-size:2rem;

color:var(--gold);

}

/* ===================================================== */

.logo h2{

font-size:1.25rem;

}

.logo p{

font-size:.8rem;

opacity:.8;

}

/* ===================================================== */

nav ul{

display:flex;

gap:34px;

list-style:none;

}

nav li{

font-weight:600;

position:relative;

cursor:pointer;

}

nav li::after{

content:"";

position:absolute;

bottom:-6px;

left:0;

height:2px;

width:0;

background:var(--gold);

transition:.3s;

}

nav li:hover::after{

width:100%;

}

/* ===================================================== */

.nav-buttons{

display:flex;

gap:12px;

}

.nav-buttons button{

width:42px;

height:42px;

border-radius:50%;

border:none;

background:rgba(255,255,255,.12);

color:white;

cursor:pointer;

transition:.3s;

font-size:1rem;

}

.nav-buttons button:hover{

background:var(--gold);

color:black;

transform:translateY(-3px);

}

/* ===================================================== */

.hero-content{

position:relative;

z-index:5;

width:min(900px,90%);

margin:auto;

text-align:center;

animation:slideUp 1.2s ease;

}

.subtitle{

letter-spacing:4px;

text-transform:uppercase;

color:var(--gold-light);

font-weight:700;

margin-bottom:15px;

}

.hero-content h1{

font-size:clamp(3rem,7vw,6rem);

margin-bottom:25px;

}

.description{

max-width:720px;

margin:auto;

font-size:1.2rem;

opacity:.9;

margin-bottom:40px;

}

/* ===================================================== */

.enter-button{

display:inline-block;

padding:18px 46px;

border-radius:60px;

background:var(--gold);

color:black;

font-weight:700;

transition:.35s;

box-shadow:0 15px 35px rgba(0,0,0,.25);

}

.enter-button:hover{

transform:translateY(-5px) scale(1.03);

background:var(--gold-light);

}

/* ===================================================== */

.scroll-indicator{

position:absolute;

bottom:40px;

left:50%;

transform:translateX(-50%);

font-size:2rem;

animation:bounce 2s infinite;

}

/* ===================================================== */

main{

max-width:1400px;

margin:auto;

padding:100px 40px;

}

/* ===================================================== */

.intro{

margin-bottom:80px;

text-align:center;

}

.intro h2{

font-size:2.7rem;

margin-bottom:20px;

}

.intro p{

max-width:850px;

margin:auto;

font-size:1.1rem;

}

/* ===================================================== */

.gallery-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:35px;

}

/* ===================================================== */

.gallery-card{

background:var(--glass);

backdrop-filter:blur(14px);

padding:40px;

border-radius:var(--radius);

box-shadow:var(--shadow);

transition:var(--transition);

border:1px solid rgba(255,255,255,.25);

cursor:pointer;

overflow:hidden;

position:relative;

}

.gallery-card::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:100%;

height:100%;

background:linear-gradient(90deg,
transparent,
rgba(255,255,255,.35),
transparent);

transition:.7s;

}

.gallery-card:hover::before{

left:120%;

}

.gallery-card:hover{

transform:translateY(-12px);

}

.gallery-icon{

font-size:3rem;

margin-bottom:20px;

}

.gallery-card h3{

margin-bottom:15px;

font-size:1.5rem;

}

.gallery-card p{

color:var(--text-light);

}

/* ===================================================== */

footer{

padding:80px;

text-align:center;

background:var(--green-dark);

color:white;

margin-top:120px;

}

/* ===================================================== */

@keyframes pulse{

50%{

transform:scale(1.08);

}

}

@keyframes slideUp{

from{

opacity:0;

transform:translateY(60px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes bounce{

50%{

transform:translate(-50%,10px);

}

}

@keyframes fadeOut{

to{

opacity:0;

visibility:hidden;

}

}

/* ===================================================== */
/* Mobile */

@media(max-width:900px){

nav{

padding:20px;

flex-wrap:wrap;

height:auto;

}

nav ul{

display:none;

}

.hero-content h1{

font-size:3rem;

}

.description{

font-size:1rem;

}

main{

padding:60px 20px;

}

.gallery-card{

padding:30px;

}

}/* PART 3C — append to css/style.css */

.society-toolbar{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-bottom:35px}
.museum-search{display:flex;width:min(520px,100%);align-items:center;gap:13px;padding:0 18px;background:rgba(255,255,255,.72);border:1px solid rgba(120,105,78,.18);border-radius:999px;box-shadow:0 10px 30px rgba(25,31,27,.07)}
.museum-search span{color:var(--gold);font-size:1.35rem}
.museum-search input{width:100%;padding:15px 0;background:transparent;border:0;outline:0;color:var(--text);font:inherit}
#societyResultCount{color:var(--text-light);font-size:.85rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.society-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.society-card{position:relative;display:flex;min-height:345px;flex-direction:column;justify-content:space-between;padding:30px;overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(240,235,224,.78));border:1px solid rgba(120,105,78,.16);border-radius:22px;box-shadow:0 18px 45px rgba(25,31,27,.09);cursor:pointer;transition:transform .4s ease,box-shadow .4s ease,border-color .4s ease}
.society-card::after{position:absolute;right:-70px;bottom:-90px;width:230px;height:230px;background:rgba(201,162,39,.08);border:1px solid rgba(201,162,39,.15);border-radius:50%;content:"";transition:transform .5s ease}
.society-card:hover,.society-card:focus-visible{border-color:rgba(201,162,39,.55);box-shadow:0 28px 60px rgba(25,31,27,.15);outline:0;transform:translateY(-9px)}
.society-card:hover::after,.society-card:focus-visible::after{transform:scale(1.17)}
.society-card-top,.society-card-copy,.society-card-footer{position:relative;z-index:1}
.society-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.society-icon{display:grid;width:66px;height:66px;place-items:center;background:var(--green);border-radius:18px;box-shadow:0 12px 25px rgba(31,77,58,.22);color:var(--gold-light);font-size:1.8rem}
.society-category{max-width:190px;color:var(--gold);font-size:.67rem;font-weight:700;letter-spacing:.13em;text-align:right;text-transform:uppercase}
.society-card-copy{margin:35px 0}
.society-card-copy>p{margin-bottom:5px;color:var(--green);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.society-card-copy h3{margin-bottom:14px;font-size:1.7rem}
.society-card-copy>span{color:var(--text-light)}
.society-card-footer{display:flex;justify-content:space-between;align-items:center;padding-top:20px;border-top:1px solid rgba(120,105,78,.14);color:var(--text-light);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.society-card-footer strong{color:var(--gold);font-size:1.4rem;transition:transform .35s ease}
.society-card:hover .society-card-footer strong{transform:translate(4px,-4px)}
.society-empty{padding:70px 25px;background:rgba(255,255,255,.45);border:1px dashed rgba(120,105,78,.3);border-radius:22px;text-align:center}
.society-empty span{color:var(--gold);font-size:3rem}

.global-search{position:fixed;inset:0;z-index:11000;display:grid;place-items:start center;padding:8vh 22px 22px;visibility:hidden;opacity:0;transition:opacity .3s ease,visibility .3s}
.global-search.open{visibility:visible;opacity:1}
.global-search-backdrop{position:absolute;inset:0;background:rgba(5,12,8,.82);backdrop-filter:blur(14px)}
.global-search-panel{position:relative;z-index:1;width:min(900px,100%);max-height:84vh;overflow:hidden;background:var(--stone);border:1px solid rgba(229,199,95,.28);border-radius:24px;box-shadow:0 40px 110px rgba(0,0,0,.48);transform:translateY(-20px) scale(.98);transition:transform .35s ease}
.global-search.open .global-search-panel{transform:none}
.global-search-header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:30px 34px 20px}
.global-search-header h2{font-size:clamp(1.8rem,4vw,2.7rem)}
.global-search-close{display:grid;width:44px;height:44px;place-items:center;background:var(--green);border:0;border-radius:50%;color:white;font-size:1.7rem;cursor:pointer}
.global-search-field{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;margin:0 34px 22px;padding:0 18px;background:white;border:1px solid rgba(120,105,78,.2);border-radius:16px}
.global-search-field>span{color:var(--gold);font-size:1.45rem}
.global-search-field input{width:100%;padding:17px 0;background:transparent;border:0;outline:0;color:var(--text);font:inherit}
.global-search-field kbd{padding:4px 8px;background:var(--stone);border:1px solid rgba(120,105,78,.2);border-radius:6px;color:var(--text-light);font-family:inherit;font-size:.7rem}
.global-search-results{display:grid;gap:10px;max-height:55vh;padding:0 34px 34px;overflow-y:auto}
.global-result{display:grid;grid-template-columns:54px 1fr 25px;gap:17px;align-items:center;width:100%;padding:17px;background:rgba(255,255,255,.63);border:1px solid rgba(120,105,78,.14);border-radius:15px;color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:.3s}
.global-result:hover,.global-result:focus-visible{background:white;border-color:rgba(201,162,39,.55);outline:0;transform:translateX(5px)}
.global-result-icon{display:grid;width:54px;height:54px;place-items:center;background:var(--green);border-radius:14px;color:var(--gold-light);font-size:1.4rem}
.global-result-copy{min-width:0}
.global-result-copy small{display:block;color:var(--gold);font-size:.64rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.global-result-copy strong{display:block;margin:2px 0 4px;font-family:"Cinzel",serif;font-size:1rem}
.global-result-copy p{overflow:hidden;color:var(--text-light);font-size:.8rem;text-overflow:ellipsis;white-space:nowrap}
.global-result-arrow{color:var(--gold);font-size:1.3rem}
.global-search-empty{padding:55px 20px;text-align:center}

body.dark .museum-search,body.dark .society-card,body.dark .society-empty{background:rgba(35,38,36,.82);border-color:rgba(255,255,255,.09)}
body.dark .museum-search input,body.dark .society-card,body.dark .global-search-panel{color:white}
body.dark .society-card-copy>p{color:var(--gold-light)}
body.dark .society-card-copy>span,body.dark .society-card-footer,body.dark #societyResultCount{color:rgba(255,255,255,.66)}
body.dark .global-search-panel{background:#171917}
body.dark .global-search-field,body.dark .global-result{background:rgba(38,42,39,.95);border-color:rgba(255,255,255,.09);color:white}
body.dark .global-search-field input{color:white}
body.dark .global-result:hover{background:rgba(52,57,53,.98)}

@media(max-width:780px){.society-grid{grid-template-columns:1fr}.society-toolbar{align-items:stretch;flex-direction:column}.global-search{padding:14px}.global-search-panel{max-height:calc(100vh - 28px)}.global-search-header{padding:24px 22px 16px}.global-search-field{margin:0 22px 18px}.global-search-results{max-height:calc(100vh - 230px);padding:0 22px 24px}}
@media(max-width:520px){.society-card{min-height:310px;padding:24px}.global-search-field{grid-template-columns:auto 1fr}.global-search-field kbd{display:none}.global-result{grid-template-columns:46px 1fr}.global-result-icon{width:46px;height:46px}.global-result-arrow{display:none}}
/* =======================================================
   PART 3D — EMPERORS GALLERY + TIMELINE
   Append this file to the bottom of css/style.css.
======================================================= */

.timeline-shell {
    margin-bottom: 42px;
    padding: 30px;
    overflow: hidden;
    background:
        linear-gradient(
            145deg,
            rgba(31, 77, 58, 0.98),
            rgba(10, 31, 22, 0.98)
        );
    border: 1px solid rgba(229, 199, 95, 0.25);
    border-radius: 24px;
    box-shadow: var(--shadow);
    color: white;
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    margin-bottom: 28px;
}

.timeline-label,
.featured-period {
    color: var(--gold-light);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.timeline-header h3 {
    margin-top: 4px;
    font-size: 1.8rem;
}

.timeline-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.timeline-controls button {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: 0.3s ease;
}

.timeline-controls button:hover,
.timeline-controls button:focus-visible {
    background: var(--gold);
    color: #111;
    outline: 0;
    transform: translateY(-2px);
}

#timelinePosition {
    min-width: 60px;
    text-align: center;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.82rem;
}

.emperor-timeline {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 18px 4px 9px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}

.emperor-timeline::before {
    position: absolute;
    top: 42px;
    right: 0;
    left: 0;
    height: 2px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(229, 199, 95, 0.55) 5%,
            rgba(229, 199, 95, 0.55) 95%,
            transparent
        );
    content: "";
}

.timeline-stop {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 150px;
    flex: 0 0 150px;
    flex-direction: column;
    align-items: center;
    padding: 0 10px 15px;
    background: transparent;
    border: 0;
    color: white;
    text-align: center;
    cursor: pointer;
    scroll-snap-align: center;
}

.timeline-dot {
    width: 18px;
    height: 18px;
    margin: 16px 0 12px;
    background: var(--green-dark);
    border: 3px solid var(--gold);
    border-radius: 50%;
    box-shadow: 0 0 0 6px rgba(201, 162, 39, 0.09);
    transition: 0.3s ease;
}

.timeline-stop:hover .timeline-dot,
.timeline-stop.active .timeline-dot {
    background: var(--gold);
    box-shadow:
        0 0 0 7px rgba(201, 162, 39, 0.13),
        0 0 24px rgba(229, 199, 95, 0.45);
    transform: scale(1.16);
}

.timeline-number {
    color: var(--gold-light);
    font-family: "Cinzel", serif;
    font-size: 0.74rem;
}

.timeline-stop strong {
    margin-top: 4px;
    font-family: "Cinzel", serif;
    font-size: 0.86rem;
}

.timeline-stop small {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.54);
    font-size: 0.62rem;
}

.featured-emperor {
    display: grid;
    grid-template-columns: minmax(260px, 0.72fr) minmax(420px, 1.35fr);
    min-height: 590px;
    margin-bottom: 95px;
    overflow: hidden;
    background: white;
    border: 1px solid rgba(120, 105, 78, 0.16);
    border-radius: 26px;
    box-shadow: 0 28px 80px rgba(25, 31, 27, 0.14);
}

.featured-emperor-visual {
    position: relative;
    display: flex;
    min-height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 50px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at center,
            rgba(229, 199, 95, 0.18),
            transparent 36%
        ),
        linear-gradient(150deg, var(--green), #0b241a);
    color: white;
    text-align: center;
}

.featured-emperor-visual::before,
.featured-emperor-visual::after {
    position: absolute;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(229, 199, 95, 0.16);
    border-radius: 50%;
    content: "";
}

.featured-emperor-visual::before {
    top: -120px;
    left: -130px;
}

.featured-emperor-visual::after {
    right: -125px;
    bottom: -120px;
}

.featured-emperor-symbol {
    position: relative;
    z-index: 1;
    display: grid;
    width: 165px;
    height: 165px;
    place-items: center;
    border: 1px solid rgba(229, 199, 95, 0.52);
    border-radius: 50%;
    box-shadow:
        0 0 0 18px rgba(229, 199, 95, 0.05),
        0 0 0 36px rgba(229, 199, 95, 0.025);
    color: var(--gold-light);
    font-size: 4.5rem;
}

.featured-emperor-number {
    position: relative;
    z-index: 1;
    margin-top: 38px;
    color: var(--gold-light);
    font-family: "Cinzel", serif;
    font-size: 2.8rem;
}

.featured-emperor-visual p {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.featured-emperor-copy {
    padding: 58px;
}

.featured-emperor-copy h3 {
    margin: 8px 0 18px;
    font-size: clamp(2.4rem, 5vw, 4.4rem);
    line-height: 1.02;
}

.featured-summary {
    margin-bottom: 22px;
    color: var(--green);
    font-size: 1.15rem;
    font-weight: 600;
}

.featured-description {
    color: var(--text-light);
}

.featured-achievements {
    margin-top: 32px;
}

.featured-achievements h4 {
    margin-bottom: 16px;
    font-family: "Cinzel", serif;
}

.featured-achievements ul {
    display: grid;
    gap: 11px;
    list-style: none;
}

.featured-achievements li {
    position: relative;
    padding-left: 24px;
    color: var(--text-light);
}

.featured-achievements li::before {
    position: absolute;
    left: 0;
    color: var(--gold);
    content: "◆";
    font-size: 0.68rem;
}

.featured-emperor blockquote {
    margin-top: 35px;
    padding: 20px 24px;
    background: rgba(201, 162, 39, 0.09);
    border-left: 4px solid var(--gold);
    border-radius: 0 14px 14px 0;
    color: var(--text);
    font-family: "Cinzel", serif;
}

.emperor-grid-heading {
    margin-bottom: 30px;
}

.emperor-grid-heading h3 {
    font-size: 2rem;
}

.emperor-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.emperor-card {
    position: relative;
    min-height: 310px;
    padding: 28px;
    overflow: hidden;
    background: white;
    border: 1px solid rgba(120, 105, 78, 0.15);
    border-radius: 20px;
    box-shadow: 0 14px 38px rgba(25, 31, 27, 0.08);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.emperor-card::after {
    position: absolute;
    right: -60px;
    bottom: -70px;
    width: 180px;
    height: 180px;
    background: rgba(201, 162, 39, 0.07);
    border-radius: 50%;
    content: "";
}

.emperor-card:hover,
.emperor-card:focus-visible,
.emperor-card.active {
    border-color: rgba(201, 162, 39, 0.6);
    box-shadow: 0 24px 55px rgba(25, 31, 27, 0.14);
    outline: 0;
    transform: translateY(-8px);
}

.emperor-card-number {
    position: absolute;
    top: 24px;
    right: 24px;
    color: var(--gold);
    font-family: "Cinzel", serif;
    font-size: 1.1rem;
}

.emperor-card-icon {
    display: grid;
    width: 62px;
    height: 62px;
    margin-bottom: 30px;
    place-items: center;
    background: var(--green);
    border-radius: 17px;
    color: var(--gold-light);
    font-size: 1.7rem;
}

.emperor-card small {
    display: block;
    margin-bottom: 5px;
    color: var(--gold);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.emperor-card strong {
    display: block;
    margin-bottom: 12px;
    font-family: "Cinzel", serif;
    font-size: 1.2rem;
}

.emperor-card p {
    position: relative;
    z-index: 1;
    color: var(--text-light);
    font-size: 0.86rem;
}

.emperor-card-link {
    position: absolute;
    bottom: 25px;
    left: 28px;
    color: var(--green);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Distinct visual themes */

.emperor-theme-gold .featured-emperor-visual,
.emperor-theme-gold .emperor-card-icon {
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.13), transparent 45%),
        linear-gradient(145deg, #8c6718, #2d2108);
}

.emperor-theme-war .featured-emperor-visual,
.emperor-theme-war .emperor-card-icon {
    background: linear-gradient(145deg, #713729, #23110d);
}

.emperor-theme-storm .featured-emperor-visual,
.emperor-theme-storm .emperor-card-icon {
    background: linear-gradient(145deg, #36464e, #11191d);
}

.emperor-theme-night .featured-emperor-visual,
.emperor-theme-night .emperor-card-icon {
    background: linear-gradient(145deg, #222638, #090b13);
}

.emperor-theme-origin .featured-emperor-visual,
.emperor-theme-origin .emperor-card-icon {
    background: linear-gradient(145deg, #9a6e26, #34220a);
}

/* Dark mode */

body.dark .featured-emperor,
body.dark .emperor-card {
    background: rgba(31, 34, 32, 0.96);
    border-color: rgba(255, 255, 255, 0.08);
    color: white;
}

body.dark .featured-summary {
    color: var(--gold-light);
}

body.dark .featured-description,
body.dark .featured-achievements li,
body.dark .emperor-card p {
    color: rgba(255, 255, 255, 0.66);
}

body.dark .featured-emperor blockquote {
    color: white;
}

body.dark .emperor-card-link {
    color: var(--gold-light);
}

/* Responsive */

@media (max-width: 1050px) {
    .emperor-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .featured-emperor {
        grid-template-columns: 1fr;
    }

    .featured-emperor-visual {
        min-height: 360px;
    }
}

@media (max-width: 650px) {
    .timeline-header {
        align-items: flex-start;
        flex-direction: column;
    }

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

    .featured-emperor-copy {
        padding: 36px 25px;
    }

    .featured-emperor-symbol {
        width: 125px;
        height: 125px;
        font-size: 3.4rem;
    }

    .timeline-shell {
        padding: 22px 16px;
    }
}
/* PART 4 */
.religion-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;margin:40px 0}
.religion-card{background:#fff;padding:28px;border-radius:18px;border:1px solid rgba(0,0,0,.08);box-shadow:0 10px 30px rgba(0,0,0,.08);transition:.3s}
.religion-card:hover{transform:translateY(-6px)}
.religion-icon{font-size:2.6rem;margin-bottom:18px;color:#c9a227}
.temple-feature,.festival-strip,.placeholder-panel{margin:36px 0;padding:32px;border-radius:20px;background:linear-gradient(145deg,#1f4d3a,#173126);color:#fff}
.festival-line{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px}
.festival-line span{padding:8px 14px;border:1px solid rgba(255,255,255,.25);border-radius:999px}
body.dark .religion-card{background:#232624;color:#fff}
/* =======================================================
   PART 5 — INTERACTIVE RELIGION EXHIBITS
   Append this file to the bottom of css/style.css.
======================================================= */

.interactive-exhibit {
    margin-top: 40px;
    padding: 38px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.88),
            rgba(237, 231, 217, 0.78)
        );
    border: 1px solid rgba(120, 105, 78, 0.17);
    border-radius: 24px;
    box-shadow: 0 20px 55px rgba(25, 31, 27, 0.1);
}

.interactive-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 25px;
    margin-bottom: 18px;
}

.interactive-heading h3 {
    margin-top: 4px;
    font-size: clamp(1.8rem, 4vw, 2.7rem);
}

.interactive-badge {
    flex: 0 0 auto;
    padding: 8px 13px;
    background: rgba(201, 162, 39, 0.12);
    border: 1px solid rgba(201, 162, 39, 0.3);
    border-radius: 999px;
    color: #8c6818;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.interactive-intro {
    max-width: 850px;
    margin-bottom: 32px;
    color: var(--text-light);
}

.secondary-button {
    background: transparent !important;
    border: 1px solid rgba(120, 105, 78, 0.3) !important;
    color: var(--text) !important;
}

/* Quipu */

.quipu-layout {
    display: grid;
    grid-template-columns: minmax(420px, 1.4fr) minmax(280px, 0.8fr);
    gap: 32px;
}

.quipu-builder,
.quipu-interpretation {
    padding: 28px;
    border-radius: 20px;
}

.quipu-builder {
    background:
        linear-gradient(
            145deg,
            #f2e8d5,
            #dfcfb2
        );
}

.quipu-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.quipu-controls label,
.astronomy-panel label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--text-light);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.quipu-controls select,
.quipu-controls input,
.astronomy-panel select {
    width: 100%;
}

.quipu-controls select,
.astronomy-panel select {
    padding: 12px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(120, 105, 78, 0.25);
    border-radius: 10px;
    color: var(--text);
    font: inherit;
}

.quipu-controls output {
    color: var(--green);
    font-size: 1rem;
}

.quipu-buttons {
    display: flex;
    grid-column: 1 / -1;
    gap: 12px;
}

.quipu-buttons button {
    padding: 12px 18px;
    background: var(--green);
    border: 0;
    border-radius: 999px;
    color: white;
    font-weight: 700;
    cursor: pointer;
}

.quipu-stage {
    position: relative;
    min-height: 360px;
    padding-top: 38px;
    overflow-x: auto;
}

.quipu-main-cord {
    position: absolute;
    top: 35px;
    right: 0;
    left: 0;
    height: 10px;
    background:
        repeating-linear-gradient(
            90deg,
            #7e4b25 0 14px,
            #9f6333 14px 28px
        );
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(74, 43, 22, 0.25);
}

.quipu-strands {
    display: flex;
    min-width: 100%;
    gap: 22px;
    align-items: flex-start;
    padding: 0 18px 20px;
}

.quipu-strand {
    position: relative;
    width: 42px;
    height: 290px;
    flex: 0 0 42px;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.strand-line {
    position: absolute;
    top: 0;
    left: 50%;
    width: 6px;
    height: 100%;
    border-radius: 999px;
    transform: translateX(-50%);
}

.strand-gold .strand-line,
.swatch-gold {
    background: #c99f35;
}

.strand-red .strand-line,
.swatch-red {
    background: #9e3f31;
}

.strand-green .strand-line,
.swatch-green {
    background: #477848;
}

.strand-white .strand-line,
.swatch-white {
    background: #e8e5dc;
    border: 1px solid #c7c0b4;
}

.strand-brown .strand-line,
.swatch-brown {
    background: #744729;
}

.strand-knots {
    position: absolute;
    inset: 55px 0 0;
}

.quipu-knot {
    position: absolute;
    left: 50%;
    width: 18px;
    height: 12px;
    background: currentColor;
    border-radius: 999px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
    transform:
        translateX(-50%)
        translateY(calc(var(--knot-position) * 28px));
}

.strand-gold {
    color: #9f771c;
}

.strand-red {
    color: #713027;
}

.strand-green {
    color: #355f38;
}

.strand-white {
    color: #b9b4a8;
}

.strand-brown {
    color: #57351f;
}

.knot-long {
    width: 26px;
}

.knot-figureEight {
    width: 18px;
    height: 18px;
    border-radius: 50%;
}

.quipu-strand:hover {
    filter: brightness(1.12);
}

.quipu-interpretation {
    background:
        linear-gradient(
            145deg,
            var(--green),
            #112e22
        );
    color: white;
}

.quipu-interpretation h4 {
    margin: 6px 0 12px;
    font-family: "Cinzel", serif;
    font-size: 1.6rem;
}

.quipu-interpretation > p:not(.section-eyebrow) {
    color: rgba(255, 255, 255, 0.72);
}

.quipu-legend {
    display: grid;
    gap: 14px;
    margin-top: 28px;
}

.quipu-legend > div {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 12px;
    align-items: start;
}

.legend-swatch {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    border-radius: 50%;
}

.quipu-legend p {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.8rem;
}

.quipu-legend strong {
    display: block;
    color: white;
}

.exhibit-disclaimer {
    margin-top: 20px;
    color: var(--text-light);
    font-size: 0.78rem;
    font-style: italic;
}

/* Astronomy */

.astronomy-layout {
    display: grid;
    grid-template-columns: minmax(520px, 1.45fr) minmax(260px, 0.65fr);
    gap: 30px;
}

.sky-theatre {
    position: relative;
    min-height: 520px;
    overflow: hidden;
    background:
        radial-gradient(circle at 70% 15%, rgba(255, 255, 255, 0.08), transparent 30%),
        linear-gradient(#10182d, #17243c 60%, #2c3842);
    border-radius: 22px;
    box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.45);
    transition: background 0.6s ease;
}

.sky-stars {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, white 0 1px, transparent 1.5px);
    background-size: 38px 38px;
    opacity: 0.58;
}

.sky-milky-way {
    position: absolute;
    top: 45%;
    left: -10%;
    width: 120%;
    height: 110px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(215, 224, 244, 0.15),
            rgba(255, 255, 255, 0.23),
            rgba(215, 224, 244, 0.14),
            transparent
        );
    filter: blur(12px);
    transform: rotate(-18deg);
}

.sky-sun,
.sky-moon {
    position: absolute;
    border-radius: 50%;
    transition: 0.7s ease;
}

.sky-sun {
    top: 52px;
    right: 80px;
    width: 74px;
    height: 74px;
    background: #f3cb52;
    box-shadow: 0 0 45px rgba(243, 203, 82, 0.65);
}

.sky-moon {
    top: 90px;
    left: 90px;
    width: 45px;
    height: 45px;
    background: #dfe6ef;
    box-shadow: 0 0 25px rgba(223, 230, 239, 0.4);
}

.season-september {
    background: linear-gradient(#1d2741, #323b54 55%, #705946);
}

.season-december {
    background: linear-gradient(#122b45, #22435f 58%, #8a6248);
}

.season-march {
    background: linear-gradient(#19243b, #35415b 58%, #675345);
}

.season-december .sky-sun {
    top: 95px;
    right: 145px;
}

.season-march .sky-moon {
    top: 60px;
    left: 170px;
}

.constellation {
    position: absolute;
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 6px 9px;
    background: rgba(7, 12, 20, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    font-size: 0.72rem;
    transition: 0.3s ease;
}

.constellation:hover,
.constellation.active {
    background: rgba(201, 162, 39, 0.25);
    border-color: var(--gold);
    color: white;
    transform: scale(1.06);
}

.constellation-llama {
    top: 43%;
    left: 42%;
}

.constellation-fox {
    top: 29%;
    left: 62%;
}

.constellation-serpent {
    top: 61%;
    left: 25%;
}

.sky-horizon {
    position: absolute;
    right: -5%;
    bottom: -25px;
    left: -5%;
    height: 150px;
    background:
        linear-gradient(
            145deg,
            transparent 0 20%,
            #17231e 21% 48%,
            #0c1713 49%
        );
    clip-path: polygon(
        0 70%,
        10% 48%,
        18% 62%,
        30% 30%,
        44% 58%,
        57% 21%,
        72% 58%,
        83% 40%,
        100% 66%,
        100% 100%,
        0 100%
    );
}

.astronomy-panel {
    padding: 28px;
    background:
        linear-gradient(
            145deg,
            #17243c,
            #0b1424
        );
    border-radius: 22px;
    color: white;
}

.astronomy-panel select {
    margin-bottom: 28px;
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.17);
    color: white;
}

.astronomy-panel option {
    color: #111;
}

.astronomy-reading,
.constellation-reading {
    padding: 22px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
}

.constellation-reading {
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.7);
}

.astronomy-reading h4,
.constellation-reading h4 {
    margin: 4px 0 10px;
    font-family: "Cinzel", serif;
    font-size: 1.3rem;
}

/* Sacred geography */

.sacred-layout {
    display: grid;
    grid-template-columns: minmax(500px, 1.3fr) minmax(260px, 0.7fr);
    gap: 30px;
}

.ceque-map {
    position: relative;
    min-height: 500px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at center,
            rgba(201, 162, 39, 0.13),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #ebe1cb,
            #d2c09e
        );
    border-radius: 22px;
}

.cusco-core {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    display: grid;
    width: 110px;
    height: 110px;
    place-items: center;
    background: var(--green);
    border: 5px solid rgba(201, 162, 39, 0.7);
    border-radius: 50%;
    box-shadow: 0 18px 35px rgba(31, 77, 58, 0.28);
    color: white;
    text-align: center;
    transform: translate(-50%, -50%);
}

.cusco-core span {
    color: var(--gold-light);
    font-size: 2rem;
}

.cusco-core strong {
    font-family: "Cinzel", serif;
    font-size: 0.8rem;
}

.ceque-ray {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    height: 2px;
    background:
        linear-gradient(
            90deg,
            rgba(201, 162, 39, 0.7),
            transparent
        );
    transform-origin: left center;
}

.ray-1 {
    transform: rotate(-30deg);
}

.ray-2 {
    transform: rotate(40deg);
}

.ray-3 {
    transform: rotate(145deg);
}

.ray-4 {
    transform: rotate(220deg);
}

.huaca-point {
    position: absolute;
    z-index: 4;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(120, 105, 78, 0.25);
    border-radius: 999px;
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-size: 0.75rem;
    transition: 0.3s ease;
}

.huaca-point span {
    width: 11px;
    height: 11px;
    background: var(--gold);
    border-radius: 50%;
}

.huaca-point:hover,
.huaca-point.active {
    background: var(--green);
    color: white;
    transform: scale(1.05);
}

.point-1 {
    top: 15%;
    right: 13%;
}

.point-2 {
    bottom: 16%;
    right: 10%;
}

.point-3 {
    bottom: 13%;
    left: 10%;
}

.point-4 {
    top: 14%;
    left: 12%;
}

.huaca-reading {
    padding: 30px;
    background:
        linear-gradient(
            145deg,
            var(--green),
            #122f23
        );
    border-radius: 22px;
    color: white;
}

.huaca-reading h4 {
    margin: 5px 0 12px;
    font-family: "Cinzel", serif;
    font-size: 1.5rem;
}

.huaca-reading > p:not(.section-eyebrow) {
    color: rgba(255, 255, 255, 0.7);
}

/* Dark mode */

body.dark .interactive-exhibit {
    background:
        linear-gradient(
            145deg,
            rgba(34, 37, 35, 0.97),
            rgba(23, 25, 24, 0.97)
        );
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark .interactive-intro,
body.dark .exhibit-disclaimer {
    color: rgba(255, 255, 255, 0.66);
}

body.dark .interactive-badge {
    color: var(--gold-light);
}

body.dark .secondary-button {
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: white !important;
}

/* Responsive */

@media (max-width: 980px) {
    .quipu-layout,
    .astronomy-layout,
    .sacred-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .interactive-exhibit {
        padding: 25px;
    }

    .interactive-heading {
        flex-direction: column;
    }

    .quipu-controls {
        grid-template-columns: 1fr;
    }

    .astronomy-layout,
    .sacred-layout {
        gap: 20px;
    }

    .sky-theatre,
    .ceque-map {
        min-height: 430px;
    }

    .huaca-point {
        font-size: 0;
        padding: 9px;
    }

    .huaca-point span {
        margin: 0;
    }
}
/* =======================================================
   PART 6 — MILITARY GALLERY + CAMPAIGN MAP
   Append this file to the bottom of css/style.css.
======================================================= */

.military-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 55px;
}

.military-card {
    position: relative;
    min-height: 315px;
    padding: 28px;
    overflow: hidden;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.92),
            rgba(236, 231, 220, 0.82)
        );
    border: 1px solid rgba(120, 105, 78, 0.16);
    border-radius: 20px;
    box-shadow: 0 16px 42px rgba(25, 31, 27, 0.09);
    cursor: pointer;
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.military-card::after {
    position: absolute;
    right: -65px;
    bottom: -80px;
    width: 190px;
    height: 190px;
    background: rgba(126, 58, 38, 0.08);
    border-radius: 50%;
    content: "";
}

.military-card:hover,
.military-card:focus-visible {
    border-color: rgba(126, 58, 38, 0.5);
    box-shadow: 0 26px 58px rgba(25, 31, 27, 0.15);
    outline: 0;
    transform: translateY(-8px);
}

.military-card-icon {
    display: grid;
    width: 66px;
    height: 66px;
    margin-bottom: 30px;
    place-items: center;
    background: linear-gradient(145deg, #743c2e, #2a1510);
    border-radius: 18px;
    color: #f0c76b;
    font-size: 1.8rem;
}

.military-card small {
    display: block;
    margin-bottom: 6px;
    color: #9a5a3f;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.military-card h3 {
    margin-bottom: 13px;
    font-size: 1.5rem;
}

.military-card p {
    position: relative;
    z-index: 1;
    color: var(--text-light);
}

.military-card > span {
    position: absolute;
    bottom: 26px;
    left: 28px;
    color: #743c2e;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Campaign map */

.campaign-layout {
    display: grid;
    grid-template-columns: minmax(500px, 1.35fr) minmax(290px, 0.65fr);
    gap: 30px;
}

.campaign-map-wrap {
    padding: 20px;
    background:
        linear-gradient(
            145deg,
            #d8c6a5,
            #b79b72
        );
    border-radius: 22px;
}

.campaign-map {
    position: relative;
    min-height: 620px;
    overflow: hidden;
    background:
        radial-gradient(circle at 45% 50%, rgba(255, 255, 255, 0.23), transparent 35%),
        linear-gradient(160deg, #d9c9aa, #b59b74);
    border-radius: 18px;
    box-shadow: inset 0 0 45px rgba(80, 55, 30, 0.18);
}

.andes-spine {
    position: absolute;
    top: 4%;
    bottom: 4%;
    left: 52%;
    width: 90px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(111, 86, 55, 0.16),
            rgba(93, 71, 44, 0.33),
            rgba(111, 86, 55, 0.16),
            transparent
        );
    filter: blur(1px);
    transform: rotate(-4deg);
}

.map-region {
    position: absolute;
    z-index: 3;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 11px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(83, 65, 42, 0.2);
    border-radius: 999px;
    color: #493720;
    cursor: pointer;
    opacity: 0.38;
    transition:
        opacity 0.45s ease,
        background 0.45s ease,
        color 0.45s ease,
        transform 0.45s ease,
        box-shadow 0.45s ease;
}

.map-region span {
    width: 13px;
    height: 13px;
    background: #8f7d62;
    border-radius: 50%;
}

.map-region.active {
    background: #7a3d2d;
    box-shadow: 0 10px 25px rgba(89, 44, 31, 0.25);
    color: white;
    opacity: 1;
    transform: scale(1.05);
}

.map-region.active span {
    background: #efc45f;
    box-shadow: 0 0 0 6px rgba(239, 196, 95, 0.16);
}

.region-far-north {
    top: 7%;
    left: 43%;
}

.region-north {
    top: 21%;
    left: 49%;
}

.region-central {
    top: 38%;
    left: 44%;
}

.region-cusco {
    top: 52%;
    left: 49%;
}

.region-titicaca {
    top: 64%;
    left: 55%;
}

.region-coast {
    top: 44%;
    left: 18%;
}

.region-south {
    top: 79%;
    left: 48%;
}

.campaign-route {
    position: absolute;
    z-index: 2;
    width: 4px;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(122, 61, 45, 0.75) 0 10px,
            transparent 10px 18px
        );
    opacity: 0;
    transition: opacity 0.6s ease;
}

.route-north {
    top: 11%;
    left: 53%;
    height: 45%;
    transform: rotate(-3deg);
}

.route-south {
    top: 54%;
    left: 54%;
    height: 33%;
    transform: rotate(4deg);
}

.route-coast {
    top: 39%;
    left: 36%;
    width: 25%;
    height: 4px;
    background:
        repeating-linear-gradient(
            to right,
            rgba(122, 61, 45, 0.75) 0 10px,
            transparent 10px 18px
        );
    transform: rotate(10deg);
}

.phase-pachacutec .route-north,
.phase-pachacutec .route-south,
.phase-tupac .campaign-route,
.phase-huayna .campaign-route,
.phase-civilwar .route-north {
    opacity: 1;
}

.map-compass {
    position: absolute;
    top: 20px;
    right: 22px;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(73, 55, 32, 0.3);
    border-radius: 50%;
    color: #493720;
    font-family: "Cinzel", serif;
}

.campaign-panel {
    padding: 30px;
    background:
        linear-gradient(
            145deg,
            #743c2e,
            #28130e
        );
    border-radius: 22px;
    color: white;
}

.campaign-panel h4 {
    margin: 7px 0 6px;
    font-family: "Cinzel", serif;
    font-size: 1.8rem;
}

#campaignMeta {
    margin-bottom: 18px;
    color: #f0c76b;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#campaignDescription {
    color: rgba(255, 255, 255, 0.72);
}

.campaign-progress {
    height: 7px;
    margin: 28px 0;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
}

#campaignProgressBar {
    width: 20%;
    height: 100%;
    background: #efc45f;
    border-radius: inherit;
    transition: width 0.45s ease;
}

.campaign-controls {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
}

.campaign-controls button,
.campaign-play {
    padding: 11px 12px;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: white;
    cursor: pointer;
    font-weight: 700;
}

.campaign-controls button:last-child {
    text-align: right;
}

#campaignPosition {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.75rem;
}

.campaign-play {
    width: 100%;
    margin-top: 16px;
    background: #efc45f;
    border-color: #efc45f;
    color: #2b160f;
}

.campaign-timeline {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-top: 26px;
}

.campaign-stop {
    position: relative;
    padding: 18px 14px;
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid rgba(120, 105, 78, 0.16);
    border-radius: 15px;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: 0.3s ease;
}

.campaign-stop:hover,
.campaign-stop.active {
    background: var(--green);
    color: white;
    transform: translateY(-4px);
}

.campaign-stop > span {
    display: grid;
    width: 28px;
    height: 28px;
    margin-bottom: 12px;
    place-items: center;
    background: rgba(201, 162, 39, 0.17);
    border-radius: 50%;
    color: var(--gold);
    font-weight: 700;
}

.campaign-stop small {
    display: block;
    margin-bottom: 3px;
    font-size: 0.62rem;
    opacity: 0.65;
}

.campaign-stop strong {
    font-family: "Cinzel", serif;
    font-size: 0.82rem;
}

/* Comparison section */

.military-comparison {
    margin-top: 55px;
    padding: 38px;
    background:
        linear-gradient(
            145deg,
            var(--green),
            #112d21
        );
    border-radius: 24px;
    color: white;
}

.military-comparison > div:first-child {
    margin-bottom: 30px;
}

.military-comparison h3 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
}

.comparison-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.comparison-grid article {
    padding: 24px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
}

.comparison-grid span {
    color: var(--gold-light);
    font-family: "Cinzel", serif;
    font-size: 1.5rem;
}

.comparison-grid h4 {
    margin: 12px 0 8px;
    font-family: "Cinzel", serif;
}

.comparison-grid p {
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.85rem;
}

/* Dark mode */

body.dark .military-card,
body.dark .campaign-stop {
    background: rgba(35, 38, 36, 0.9);
    border-color: rgba(255, 255, 255, 0.08);
    color: white;
}

body.dark .military-card p,
body.dark .campaign-stop small {
    color: rgba(255, 255, 255, 0.65);
}

body.dark .campaign-stop.active {
    background: var(--green);
}

body.dark .campaign-map-wrap {
    background: #2b241c;
}

/* Responsive */

@media (max-width: 1050px) {
    .military-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .campaign-layout {
        grid-template-columns: 1fr;
    }

    .comparison-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .military-grid,
    .comparison-grid {
        grid-template-columns: 1fr;
    }

    .campaign-timeline {
        grid-template-columns: 1fr;
    }

    .campaign-map {
        min-height: 520px;
    }

    .map-region small {
        display: none;
    }

    .map-region {
        padding: 8px;
    }

    .campaign-controls {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .campaign-controls button:last-child {
        text-align: center;
    }
}
/* =======================================================
   PART 7 — ECONOMY, AGRICULTURE, AND TECHNOLOGY
   Append this file to the bottom of css/style.css.
======================================================= */

.economy-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    margin-bottom: 55px;
}

.economy-card {
    position: relative;
    min-height: 320px;
    padding: 26px;
    overflow: hidden;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.94),
            rgba(236, 231, 220, 0.84)
        );
    border: 1px solid rgba(120, 105, 78, 0.16);
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(25, 31, 27, 0.08);
    cursor: pointer;
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.economy-card::after {
    position: absolute;
    right: -60px;
    bottom: -75px;
    width: 180px;
    height: 180px;
    background: rgba(61, 112, 79, 0.08);
    border-radius: 50%;
    content: "";
}

.economy-card:hover,
.economy-card:focus-visible {
    border-color: rgba(61, 112, 79, 0.45);
    box-shadow: 0 25px 58px rgba(25, 31, 27, 0.15);
    outline: 0;
    transform: translateY(-8px);
}

.economy-card-icon {
    display: grid;
    width: 64px;
    height: 64px;
    margin-bottom: 28px;
    place-items: center;
    background: linear-gradient(145deg, #3f7652, #183623);
    border-radius: 18px;
    color: #f1d177;
    font-size: 1.8rem;
}

.economy-card small {
    display: block;
    margin-bottom: 5px;
    color: #3f7652;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.economy-card h3 {
    margin-bottom: 12px;
    font-size: 1.45rem;
}

.economy-card p {
    position: relative;
    z-index: 1;
    color: var(--text-light);
}

.economy-card > span {
    position: absolute;
    bottom: 24px;
    left: 26px;
    color: #3f7652;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Terrace explorer */

.terrace-layout {
    display: grid;
    grid-template-columns: minmax(520px, 1.4fr) minmax(270px, 0.6fr);
    gap: 30px;
}

.terrace-landscape {
    position: relative;
    min-height: 560px;
    overflow: hidden;
    background:
        linear-gradient(#8ec2dc 0 28%, #a8c89a 28% 52%, #8b6c42 52% 100%);
    border-radius: 22px;
    transition: background 0.5s ease;
}

.terrace-sun {
    position: absolute;
    top: 42px;
    right: 60px;
    width: 70px;
    height: 70px;
    background: #f3cf62;
    border-radius: 50%;
    box-shadow: 0 0 40px rgba(243, 207, 98, 0.5);
}

.terrace-mountains {
    position: absolute;
    inset: 18% 0 auto;
    height: 240px;
    background: #587460;
    clip-path: polygon(
        0 80%,
        13% 42%,
        23% 68%,
        39% 22%,
        55% 63%,
        69% 33%,
        83% 70%,
        100% 46%,
        100% 100%,
        0 100%
    );
}

.terrace-layer {
    position: absolute;
    right: 0;
    left: 0;
    height: 90px;
    background:
        linear-gradient(
            to bottom,
            #9b7b50 0 14%,
            #5b7d50 14% 100%
        );
    border-top: 4px solid rgba(91, 63, 37, 0.35);
    clip-path: polygon(0 28%, 100% 0, 100% 100%, 0 100%);
}

.layer-1 {
    bottom: 0;
}

.layer-2 {
    bottom: 72px;
}

.layer-3 {
    bottom: 144px;
}

.layer-4 {
    bottom: 216px;
}

.terrace-water {
    position: absolute;
    right: 10%;
    bottom: 22%;
    width: 6px;
    height: 180px;
    background: rgba(126, 196, 228, 0.75);
    border-radius: 999px;
    transform: rotate(8deg);
}

.altitude-zone {
    position: absolute;
    z-index: 4;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(80, 67, 48, 0.2);
    border-radius: 999px;
    color: #3a3023;
    cursor: pointer;
    font: inherit;
    font-size: 0.74rem;
    transition: 0.3s ease;
}

.altitude-zone:hover,
.altitude-zone.active {
    background: var(--green);
    color: white;
    transform: scale(1.05);
}

.altitude-zone.zone-puna {
    top: 14%;
    left: 20%;
}

.altitude-zone.zone-highland {
    top: 36%;
    left: 48%;
}

.altitude-zone.zone-valley {
    top: 58%;
    left: 22%;
}

.altitude-zone.zone-coast {
    right: 15%;
    bottom: 10%;
}

.terrace-landscape.zone-coast {
    background:
        linear-gradient(#9bd2e7 0 36%, #d7bf79 36% 100%);
}

.terrace-landscape.zone-valley {
    background:
        linear-gradient(#93c9df 0 31%, #82aa71 31% 63%, #85613d 63%);
}

.terrace-landscape.zone-puna {
    background:
        linear-gradient(#7faac2 0 38%, #a7a27d 38% 63%, #6f614a 63%);
}

.terrace-panel {
    padding: 30px;
    background:
        linear-gradient(
            145deg,
            #3f7652,
            #173622
        );
    border-radius: 22px;
    color: white;
}

.terrace-panel h4 {
    margin: 6px 0 4px;
    font-family: "Cinzel", serif;
    font-size: 1.8rem;
}

#terraceAltitude {
    margin-bottom: 22px;
    color: #f1d177;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.terrace-data {
    margin-bottom: 22px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
}

.terrace-data span {
    display: block;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.68rem;
    text-transform: uppercase;
}

.terrace-data strong {
    color: white;
}

#terraceNote {
    color: rgba(255, 255, 255, 0.7);
}

.terrace-selector {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 25px;
}

.terrace-selector button {
    padding: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: white;
    cursor: pointer;
}

.terrace-selector button.active {
    background: #f1d177;
    color: #1d2b20;
}

/* Resource flow */

.resource-flow-layout {
    display: grid;
    grid-template-columns: minmax(520px, 1.4fr) minmax(270px, 0.6fr);
    gap: 30px;
}

.resource-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
}

.resource-stage {
    position: relative;
    display: flex;
    min-height: 230px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 22px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(120, 105, 78, 0.16);
    border-radius: 18px;
    color: var(--text);
    cursor: pointer;
    text-align: center;
    transition: 0.3s ease;
}

.resource-stage:hover,
.resource-stage.active {
    background: var(--green);
    color: white;
    transform: translateY(-5px);
}

.resource-number {
    position: absolute;
    top: 14px;
    right: 14px;
    color: var(--gold);
    font-family: "Cinzel", serif;
}

.resource-icon {
    margin-bottom: 16px;
    font-size: 2rem;
}

.resource-stage strong {
    font-family: "Cinzel", serif;
    font-size: 0.95rem;
}

.resource-arrow {
    position: absolute;
    top: 50%;
    right: -18px;
    z-index: 2;
    color: var(--gold);
    font-size: 1.4rem;
    transform: translateY(-50%);
}

.resource-reading {
    padding: 30px;
    background:
        linear-gradient(
            145deg,
            var(--green),
            #173622
        );
    border-radius: 22px;
    color: white;
}

.resource-reading h4 {
    margin: 6px 0 12px;
    font-family: "Cinzel", serif;
    font-size: 1.55rem;
}

.resource-reading > p:not(.section-eyebrow) {
    color: rgba(255, 255, 255, 0.7);
}

/* Engineering lab */

.engineering-lab {
    display: grid;
    grid-template-columns: minmax(300px, 0.7fr) minmax(500px, 1.3fr);
    gap: 30px;
    margin-top: 45px;
    padding: 38px;
    background:
        linear-gradient(
            145deg,
            #433b33,
            #1f1b18
        );
    border-radius: 24px;
    color: white;
}

.engineering-copy h3 {
    margin: 6px 0 16px;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
}

.engineering-copy p {
    color: rgba(255, 255, 255, 0.68);
}

.engineering-demo {
    padding: 28px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
}

.masonry-wall {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    min-height: 250px;
    align-items: end;
    padding: 20px;
    transition: transform 0.2s ease;
}

.stone {
    display: block;
    min-height: 75px;
    background:
        linear-gradient(
            145deg,
            #93816b,
            #5e5041
        );
    border: 2px solid #3e342b;
    clip-path: polygon(8% 3%, 92% 0, 100% 88%, 86% 100%, 10% 94%, 0 15%);
}

.stone-2,
.stone-6 {
    min-height: 105px;
}

.stone-3,
.stone-7 {
    min-height: 90px;
}

.masonry-wall.shaking {
    animation: wallShake 0.16s linear 10;
}

.masonry-wall.settled {
    animation: wallSettle 0.55s ease;
}

.engineering-controls {
    display: flex;
    gap: 12px;
    margin-top: 15px;
}

.engineering-controls button {
    padding: 11px 16px;
    background: var(--gold);
    border: 0;
    border-radius: 999px;
    color: #211a10;
    cursor: pointer;
    font-weight: 700;
}

#engineeringStatus {
    margin-top: 14px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.8rem;
}

@keyframes wallShake {
    0%, 100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-8px) rotate(-0.4deg);
    }

    75% {
        transform: translateX(8px) rotate(0.4deg);
    }
}

@keyframes wallSettle {
    from {
        transform: translateY(-4px);
    }

    to {
        transform: translateY(0);
    }
}

/* Dark mode */

body.dark .economy-card,
body.dark .resource-stage {
    background: rgba(35, 38, 36, 0.9);
    border-color: rgba(255, 255, 255, 0.08);
    color: white;
}

body.dark .economy-card p {
    color: rgba(255, 255, 255, 0.65);
}

body.dark .resource-stage.active {
    background: var(--green);
}

body.dark .terrace-panel,
body.dark .resource-reading {
    color: white;
}

/* Responsive */

@media (max-width: 1100px) {
    .economy-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .terrace-layout,
    .resource-flow-layout,
    .engineering-lab {
        grid-template-columns: 1fr;
    }

    .resource-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .resource-arrow {
        display: none;
    }
}

@media (max-width: 700px) {
    .economy-grid,
    .resource-flow {
        grid-template-columns: 1fr;
    }

    .terrace-landscape {
        min-height: 470px;
    }

    .altitude-zone {
        font-size: 0;
        padding: 9px;
    }

    .altitude-zone::after {
        width: 11px;
        height: 11px;
        background: var(--gold);
        border-radius: 50%;
        content: "";
    }

    .engineering-lab {
        padding: 25px;
    }

    .masonry-wall {
        grid-template-columns: repeat(2, 1fr);
    }

    .engineering-controls {
        flex-direction: column;
    }
}
/* =======================================================
   PART 8 — FINAL MUSEUM POLISH
   Append this file to the bottom of css/style.css.
======================================================= */

:root {
    --page-scroll: 0%;
}

body::before {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 12000;
    width: var(--page-scroll);
    height: 3px;
    background:
        linear-gradient(
            90deg,
            var(--gold),
            var(--gold-light)
        );
    content: "";
    pointer-events: none;
}

/* Skip link */

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 20000;
    padding: 12px 18px;
    background: var(--gold);
    border-radius: 10px;
    color: #111;
    font-weight: 700;
    transform: translateY(-180%);
    transition: transform 0.25s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

/* Active navigation */

nav a.active,
nav a[aria-current="page"] {
    color: var(--gold-light);
}

nav a.active::after,
nav a[aria-current="page"]::after {
    width: 100%;
}

.nav-unavailable {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Mobile menu button */

.mobile-menu-button {
    display: none;
    width: 46px;
    height: 46px;
    place-content: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    cursor: pointer;
}

.mobile-menu-button span {
    display: block;
    width: 20px;
    height: 2px;
    background: white;
    border-radius: 999px;
}

.mobile-museum-nav {
    position: fixed;
    inset: 0;
    z-index: 15000;
    visibility: hidden;
    opacity: 0;
    transition:
        opacity 0.3s ease,
        visibility 0.3s;
}

.mobile-museum-nav.open {
    visibility: visible;
    opacity: 1;
}

.mobile-nav-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 10, 7, 0.82);
    backdrop-filter: blur(12px);
}

.mobile-nav-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(420px, 92vw);
    height: 100%;
    padding: 30px;
    overflow-y: auto;
    background:
        linear-gradient(
            160deg,
            #173b2d,
            #08150f
        );
    color: white;
    box-shadow: -25px 0 70px rgba(0, 0, 0, 0.35);
    transform: translateX(100%);
    transition: transform 0.35s ease;
}

.mobile-museum-nav.open .mobile-nav-panel {
    transform: translateX(0);
}

.mobile-nav-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 35px;
}

.mobile-nav-header h2 {
    margin-top: 5px;
    font-size: 1.7rem;
}

.mobile-nav-close {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    color: white;
    font-size: 1.7rem;
    cursor: pointer;
}

.mobile-nav-links {
    display: grid;
    gap: 10px;
}

.mobile-nav-links a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 17px 18px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    color: white;
    font-weight: 600;
    transition: 0.3s ease;
}

.mobile-nav-links a:hover,
.mobile-nav-links a.active {
    background: rgba(201, 162, 39, 0.17);
    border-color: rgba(201, 162, 39, 0.38);
    transform: translateX(5px);
}

.mobile-nav-links strong {
    color: var(--gold-light);
}

.mobile-nav-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 28px;
}

.mobile-nav-footer button {
    padding: 13px;
    background: var(--gold);
    border: 0;
    border-radius: 999px;
    color: #151009;
    cursor: pointer;
    font-weight: 700;
}

/* Visit progress */

.museum-progress {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 10px;
}

.museum-progress-track {
    position: absolute;
    right: 0;
    bottom: -8px;
    width: 82px;
    height: 4px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 999px;
}

#museumProgressBar {
    width: 0;
    height: 100%;
    background: var(--gold);
    transition: width 0.4s ease;
}

#museumProgressButton {
    display: flex;
    width: 82px;
    height: 82px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background:
        linear-gradient(
            145deg,
            var(--green),
            #102b20
        );
    border: 2px solid rgba(229, 199, 95, 0.46);
    border-radius: 50%;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
    color: white;
    cursor: pointer;
}

#museumProgressPercent {
    color: var(--gold-light);
    font-family: "Cinzel", serif;
    font-size: 1.15rem;
}

#museumProgressButton small {
    margin-top: 1px;
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.museum-progress-popover {
    position: absolute;
    right: 0;
    bottom: 98px;
    width: 290px;
    padding: 24px;
    background: var(--stone);
    border: 1px solid rgba(120, 105, 78, 0.17);
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.25);
    color: var(--text);
}

.museum-progress-popover h3 {
    margin: 4px 0 18px;
}

.progress-list-item {
    display: grid;
    grid-template-columns: 25px 1fr;
    gap: 9px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid rgba(120, 105, 78, 0.12);
    color: var(--text-light);
}

.progress-list-item.complete {
    color: var(--green);
}

.progress-list-item span {
    color: var(--gold);
}

#resetMuseumProgress {
    width: 100%;
    margin-top: 16px;
    padding: 10px;
    background: transparent;
    border: 1px solid rgba(120, 105, 78, 0.25);
    border-radius: 999px;
    color: var(--text);
    cursor: pointer;
}

/* Back to top */

.back-to-top {
    position: fixed;
    right: 28px;
    bottom: 122px;
    z-index: 8500;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    background: var(--gold);
    border: 0;
    border-radius: 50%;
    box-shadow: 0 13px 30px rgba(0, 0, 0, 0.2);
    color: #151009;
    cursor: pointer;
    font-size: 1.2rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(15px);
    transition: 0.3s ease;
}

.back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* Ready toast */

.museum-ready-toast {
    position: fixed;
    top: 110px;
    right: 24px;
    z-index: 13000;
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 12px;
    align-items: center;
    padding: 14px 18px;
    background: rgba(20, 50, 37, 0.96);
    border: 1px solid rgba(229, 199, 95, 0.3);
    border-radius: 14px;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.24);
    color: white;
    opacity: 0;
    transform: translateX(30px);
    transition: 0.4s ease;
    pointer-events: none;
}

.museum-ready-toast.visible {
    opacity: 1;
    transform: translateX(0);
}

.museum-ready-toast > span {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    background: var(--gold);
    border-radius: 50%;
    color: #111;
    font-weight: 800;
}

.museum-ready-toast strong,
.museum-ready-toast small {
    display: block;
}

.museum-ready-toast small {
    color: rgba(255, 255, 255, 0.64);
}

/* Missing image fallback */

.image-missing {
    min-height: 220px;
    background:
        linear-gradient(
            145deg,
            #d8cfbd,
            #b7a88d
        );
    object-fit: contain;
}

/* Shortcut help */

.shortcut-help {
    position: fixed;
    inset: 0;
    z-index: 17000;
    display: grid;
    place-items: center;
    padding: 20px;
    visibility: hidden;
    opacity: 0;
    transition:
        opacity 0.3s ease,
        visibility 0.3s;
}

.shortcut-help.open {
    visibility: visible;
    opacity: 1;
}

.shortcut-help-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 10, 7, 0.84);
    backdrop-filter: blur(12px);
}

.shortcut-help-panel {
    position: relative;
    z-index: 1;
    width: min(560px, 100%);
    padding: 36px;
    background: var(--stone);
    border: 1px solid rgba(229, 199, 95, 0.24);
    border-radius: 22px;
    box-shadow: 0 35px 90px rgba(0, 0, 0, 0.4);
    color: var(--text);
}

.shortcut-help-panel h2 {
    margin: 5px 0 24px;
}

.shortcut-help-panel dl {
    display: grid;
    gap: 12px;
}

.shortcut-help-panel dl > div {
    display: grid;
    grid-template-columns: minmax(140px, 0.8fr) 1fr;
    gap: 18px;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid rgba(120, 105, 78, 0.14);
}

.shortcut-help-panel kbd {
    display: inline-block;
    margin: 2px;
    padding: 5px 8px;
    background: white;
    border: 1px solid rgba(120, 105, 78, 0.22);
    border-radius: 6px;
    box-shadow: 0 2px 0 rgba(120, 105, 78, 0.16);
    font-family: inherit;
    font-size: 0.75rem;
}

.shortcut-help-close {
    position: absolute;
    top: 18px;
    right: 18px;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    background: var(--green);
    border: 0;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    font-size: 1.6rem;
}

/* Dark mode */

body.dark .museum-progress-popover,
body.dark .shortcut-help-panel {
    background: #181b19;
    border-color: rgba(255, 255, 255, 0.08);
    color: white;
}

body.dark .progress-list-item,
body.dark .shortcut-help-panel dd {
    color: rgba(255, 255, 255, 0.65);
}

body.dark #resetMuseumProgress {
    border-color: rgba(255, 255, 255, 0.16);
    color: white;
}

body.dark .shortcut-help-panel kbd {
    background: #0f1110;
    border-color: rgba(255, 255, 255, 0.12);
    color: white;
}

/* Reduced motion */

.reduced-motion *,
.reduced-motion *::before,
.reduced-motion *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
}

/* Focus visibility */

:focus-visible {
    outline: 3px solid var(--gold-light);
    outline-offset: 4px;
}

/* Print */

@media print {
    nav,
    #loader,
    .museum-progress,
    .back-to-top,
    .museum-ready-toast,
    .mobile-museum-nav,
    .global-search,
    .shortcut-help,
    .interactive-badge,
    button {
        display: none !important;
    }

    body,
    main,
    section,
    article {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
    }

    .museum-section {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}

/* Responsive */

@media (max-width: 900px) {
    nav > ul {
        display: none;
    }

    .mobile-menu-button {
        display: grid;
    }

    .nav-buttons {
        margin-left: auto;
    }
}

@media (max-width: 620px) {
    nav {
        gap: 12px;
    }

    .logo p {
        display: none;
    }

    .nav-buttons button:not(#darkButton) {
        display: none;
    }

    .museum-progress {
        right: 14px;
        bottom: 14px;
    }

    #museumProgressButton {
        width: 68px;
        height: 68px;
    }

    .museum-progress-track {
        width: 68px;
    }

    .museum-progress-popover {
        right: -2px;
        width: min(290px, calc(100vw - 28px));
    }

    .back-to-top {
        right: 24px;
        bottom: 96px;
    }

    .museum-ready-toast {
        top: auto;
        right: 14px;
        bottom: 96px;
        left: 14px;
    }

    .shortcut-help-panel {
        padding: 28px 22px;
    }

    .shortcut-help-panel dl > div {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .mobile-nav-footer {
        grid-template-columns: 1fr;
    }
}

/* =======================================================
   PART 3B — GOVERNMENT GALLERY
======================================================= */

.museum-section {
    margin-top: 130px;
    padding-top: 40px;
    scroll-margin-top: 110px;
}

.section-heading {
    max-width: 850px;
    margin: 0 auto 70px;
    text-align: center;
}

.section-eyebrow {
    margin-bottom: 12px;
    color: var(--gold);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.section-heading h2 {
    margin-bottom: 24px;
    font-size: clamp(2.2rem, 5vw, 4.2rem);
    line-height: 1.12;
}

.section-introduction {
    color: var(--text-light);
    font-size: 1.08rem;
}

.government-layout {
    display: grid;
    grid-template-columns: minmax(250px, 0.72fr) minmax(450px, 1.6fr);
    gap: 55px;
    align-items: start;
}

.government-context {
    position: sticky;
    top: 130px;
    padding: 40px;
    overflow: hidden;
    background:
        linear-gradient(
            145deg,
            rgba(31, 77, 58, 0.96),
            rgba(15, 42, 31, 0.98)
        );
    border: 1px solid rgba(229, 199, 95, 0.24);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: white;
}

.government-context::after {
    position: absolute;
    right: -80px;
    bottom: -100px;
    width: 230px;
    height: 230px;
    border: 1px solid rgba(229, 199, 95, 0.18);
    border-radius: 50%;
    content: "";
}

.context-number {
    display: block;
    margin-bottom: 25px;
    color: var(--gold-light);
    font-family: "Cinzel", serif;
    font-size: 4.5rem;
    line-height: 1;
    opacity: 0.4;
}

.government-context h3 {
    margin-bottom: 20px;
    font-size: 1.75rem;
    line-height: 1.3;
}

.government-context > p {
    color: rgba(255, 255, 255, 0.78);
}

.context-stat {
    display: flex;
    flex-direction: column;
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.context-stat strong {
    color: var(--gold-light);
    font-family: "Cinzel", serif;
    font-size: 1.8rem;
}

.context-stat span {
    color: rgba(255, 255, 255, 0.67);
    font-size: 0.83rem;
}

.context-instruction {
    margin-top: 35px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.08);
    border-left: 3px solid var(--gold);
    border-radius: 0 10px 10px 0;
    font-size: 0.87rem;
}

.government-hierarchy {
    position: relative;
    min-height: 750px;
    padding: 25px 0;
}

.hierarchy-line {
    position: absolute;
    top: 53px;
    bottom: 53px;
    left: 42px;
    width: 2px;
    background:
        linear-gradient(
            to bottom,
            transparent,
            var(--gold) 8%,
            var(--gold) 92%,
            transparent
        );
    opacity: 0.55;
}

.government-nodes {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.government-node {
    position: relative;
    display: grid;
    grid-template-columns: 74px 1fr 35px;
    gap: 22px;
    align-items: center;
    width: 100%;
    padding: 22px 24px 22px 6px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(120, 105, 78, 0.16);
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(25, 31, 27, 0.08);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    opacity: 0;
    transform: translateX(35px);
    animation:
        hierarchyNodeEnter 0.7s ease forwards;
    animation-delay: var(--node-delay);
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        background 0.35s ease;
}

.government-node::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--gold);
    content: "";
    transform: scaleY(0);
    transition: transform 0.35s ease;
}

.government-node:hover,
.government-node:focus-visible {
    background: white;
    border-color: rgba(201, 162, 39, 0.55);
    box-shadow: 0 20px 45px rgba(25, 31, 27, 0.14);
    outline: none;
    transform: translateX(9px);
}

.government-node:hover::before,
.government-node:focus-visible::before {
    transform: scaleY(1);
}

.node-level {
    position: absolute;
    top: 8px;
    right: 20px;
    color: var(--text-light);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.55;
}

.node-icon {
    position: relative;
    z-index: 2;
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    background:
        linear-gradient(
            145deg,
            var(--green),
            var(--green-dark)
        );
    border: 3px solid var(--stone);
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.48);
    color: var(--gold-light);
    font-size: 1.75rem;
}

.node-copy {
    display: flex;
    flex-direction: column;
}

.node-copy strong {
    font-family: "Cinzel", serif;
    font-size: 1.18rem;
}

.node-copy small {
    margin-top: 4px;
    color: var(--text-light);
}

.node-arrow {
    color: var(--gold);
    font-size: 1.45rem;
    transition: transform 0.35s ease;
}

.government-node:hover .node-arrow {
    transform: translateX(6px);
}

/* =======================================================
   EXHIBIT MODAL
======================================================= */

body.modal-open {
    overflow: hidden;
}

.exhibit-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 24px;
    visibility: hidden;
    opacity: 0;
    transition:
        visibility 0.4s,
        opacity 0.4s ease;
}

.exhibit-modal.open {
    visibility: visible;
    opacity: 1;
}

.exhibit-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 14, 10, 0.82);
    backdrop-filter: blur(12px);
}

.exhibit-dialog {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(240px, 0.75fr) minmax(360px, 1.35fr);
    width: min(1050px, 96vw);
    max-height: min(780px, 90vh);
    overflow: hidden;
    background: var(--stone);
    border: 1px solid rgba(229, 199, 95, 0.34);
    border-radius: 24px;
    box-shadow: 0 40px 110px rgba(0, 0, 0, 0.45);
    transform: translateY(30px) scale(0.97);
    transition: transform 0.45s ease;
}

.exhibit-modal.open .exhibit-dialog {
    transform: translateY(0) scale(1);
}

.modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 4;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    color: white;
    font-size: 1.8rem;
    cursor: pointer;
    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.modal-close:hover,
.modal-close:focus-visible {
    background: var(--gold);
    color: #111;
    outline: none;
    transform: rotate(90deg);
}

.exhibit-visual {
    position: relative;
    display: flex;
    min-height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 60px 35px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at center,
            rgba(229, 199, 95, 0.17),
            transparent 45%
        ),
        linear-gradient(
            150deg,
            var(--green),
            #0c251b
        );
    color: white;
    text-align: center;
}

.exhibit-visual::before,
.exhibit-visual::after {
    position: absolute;
    width: 280px;
    height: 280px;
    border: 1px solid rgba(229, 199, 95, 0.16);
    border-radius: 50%;
    content: "";
}

.exhibit-visual::before {
    top: -120px;
    left: -130px;
}

.exhibit-visual::after {
    right: -120px;
    bottom: -130px;
}

.exhibit-large-icon {
    position: relative;
    z-index: 1;
    display: grid;
    width: 150px;
    height: 150px;
    place-items: center;
    margin-bottom: 30px;
    border: 1px solid rgba(229, 199, 95, 0.5);
    border-radius: 50%;
    box-shadow:
        0 0 0 15px rgba(229, 199, 95, 0.05),
        0 0 0 30px rgba(229, 199, 95, 0.025);
    color: var(--gold-light);
    font-size: 4rem;
}

.exhibit-category {
    position: relative;
    z-index: 1;
    color: var(--gold-light);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.exhibit-content {
    padding: 58px;
    overflow-y: auto;
}

.exhibit-subtitle {
    margin-bottom: 7px;
    color: var(--gold);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.exhibit-content h2 {
    margin-bottom: 18px;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.08;
}

.exhibit-summary {
    margin-bottom: 24px;
    color: var(--green);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.55;
}

.exhibit-description {
    color: var(--text-light);
}

.exhibit-responsibilities {
    margin-top: 34px;
}

.exhibit-responsibilities h3 {
    margin-bottom: 17px;
    font-size: 1.05rem;
}

.exhibit-responsibilities ul {
    display: grid;
    gap: 11px;
    list-style: none;
}

.exhibit-responsibilities li {
    position: relative;
    padding-left: 25px;
    color: var(--text-light);
}

.exhibit-responsibilities li::before {
    position: absolute;
    top: 0;
    left: 0;
    color: var(--gold);
    content: "◆";
    font-size: 0.72rem;
}

.museum-fact {
    margin-top: 38px;
    padding: 22px 24px;
    background: rgba(201, 162, 39, 0.1);
    border-left: 4px solid var(--gold);
    border-radius: 0 14px 14px 0;
}

.museum-fact span {
    display: block;
    margin-bottom: 6px;
    color: var(--gold);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.museum-fact p {
    color: var(--text);
}

/* =======================================================
   DARK MODE — PART 3B
======================================================= */

body.dark .section-introduction,
body.dark .government-node small,
body.dark .exhibit-description,
body.dark .exhibit-responsibilities li {
    color: rgba(255, 255, 255, 0.68);
}

body.dark .government-node {
    background: rgba(35, 38, 36, 0.86);
    border-color: rgba(255, 255, 255, 0.09);
    color: white;
}

body.dark .government-node:hover,
body.dark .government-node:focus-visible {
    background: rgba(50, 54, 51, 0.98);
}

body.dark .node-icon {
    border-color: #171917;
}

body.dark .exhibit-dialog {
    background: #171917;
    color: white;
}

body.dark .exhibit-summary {
    color: var(--gold-light);
}

body.dark .museum-fact p {
    color: white;
}

/* =======================================================
   PART 3B ANIMATIONS
======================================================= */

@keyframes hierarchyNodeEnter {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* =======================================================
   PART 3B RESPONSIVE STYLES
======================================================= */

@media (max-width: 950px) {
    .government-layout {
        grid-template-columns: 1fr;
    }

    .government-context {
        position: relative;
        top: auto;
    }

    .government-hierarchy {
        min-height: auto;
    }

    .exhibit-dialog {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }

    .exhibit-visual {
        min-height: 260px;
        padding: 55px 30px;
    }

    .exhibit-large-icon {
        width: 110px;
        height: 110px;
        margin-bottom: 22px;
        font-size: 3rem;
    }

    .exhibit-content {
        overflow-y: visible;
    }
}

@media (max-width: 600px) {
    .museum-section {
        margin-top: 90px;
    }

    .government-context {
        padding: 30px 25px;
    }

    .government-node {
        grid-template-columns: 58px 1fr 22px;
        gap: 15px;
        padding: 20px 15px 20px 4px;
    }

    .node-icon {
        width: 58px;
        height: 58px;
        font-size: 1.4rem;
    }

    .node-copy strong {
        font-size: 1rem;
    }

    .node-copy small {
        font-size: 0.75rem;
    }

    .hierarchy-line {
        left: 32px;
    }

    .exhibit-modal {
        padding: 10px;
    }

    .exhibit-dialog {
        width: 100%;
        max-height: 95vh;
        border-radius: 18px;
    }

    .exhibit-content {
        padding: 35px 24px;
    }

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


/* =======================================================
   PART 9 — BILINGUAL CONTROL + STABILITY HOTFIX
======================================================= */

.language-toggle {
    display: inline-flex !important;
    width: auto !important;
    min-width: 78px;
    height: 42px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 12px;
    border-radius: 999px !important;
    font-size: 0.72rem !important;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.language-toggle i {
    opacity: 0.45;
    font-style: normal;
}

.language-toggle [data-language-option] {
    opacity: 0.45;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.language-toggle [data-language-option].active {
    color: var(--gold-light);
    opacity: 1;
}

.language-toggle:hover [data-language-option].active {
    color: #111;
}

.language-toggle-mobile {
    width: 100% !important;
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    color: white !important;
}

/* Keep the vertical-ecology illustration inside its own grid cell. */
.terrace-layout,
.terrace-landscape,
.terrace-panel {
    min-width: 0;
}

.terrace-landscape {
    width: 100%;
    isolation: isolate;
    contain: layout paint;
}

.terrace-landscape.zone-highland,
.terrace-landscape.zone-puna,
.terrace-landscape.zone-valley,
.terrace-landscape.zone-coast {
    position: relative;
    inset: auto;
    right: auto;
    bottom: auto;
    left: auto;
    top: auto;
}

@media (max-width: 620px) {
    .nav-buttons .language-toggle {
        display: inline-flex !important;
    }
}


/* Bilingual text-node reliability */
.intro-text > p > span { display: block; }
.intro-text > p > span + span { margin-top: 0.35rem; }
footer > p + p { margin-top: 0.35rem; opacity: 0.78; }


/* =======================================================
   CARD FOOTER OVERLAP FIX + FOUR-SUYU COMPASS
======================================================= */

.military-card,
.economy-card {
    display: flex;
    height: 100%;
    flex-direction: column;
}

.military-card p,
.economy-card p {
    margin-bottom: 24px;
}

.military-card > span,
.economy-card > span {
    position: relative;
    z-index: 2;
    right: auto;
    bottom: auto;
    left: auto;
    display: block;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid rgba(120, 105, 78, 0.14);
}

body.dark .military-card > span,
body.dark .economy-card > span {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.suyu-compass-exhibit {
    margin-top: 56px;
    padding: 38px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.92),
            rgba(231, 224, 208, 0.82)
        );
    border: 1px solid rgba(120, 105, 78, 0.17);
    border-radius: 24px;
    box-shadow: 0 22px 60px rgba(25, 31, 27, 0.11);
}

.suyu-compass-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 16px;
}

.suyu-compass-heading h3 {
    margin-top: 5px;
    font-size: clamp(1.9rem, 4vw, 2.8rem);
}

.suyu-compass-badge {
    flex: 0 0 auto;
    padding: 8px 13px;
    background: rgba(201, 162, 39, 0.12);
    border: 1px solid rgba(201, 162, 39, 0.3);
    border-radius: 999px;
    color: #806017;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.suyu-compass-intro {
    max-width: 900px;
    margin-bottom: 30px;
    color: var(--text-light);
}

.suyu-compass-layout {
    display: grid;
    grid-template-columns: minmax(500px, 1.25fr) minmax(300px, 0.75fr);
    gap: 30px;
    align-items: stretch;
}

.suyu-compass-map {
    position: relative;
    min-height: 570px;
    overflow: hidden;
    background:
        radial-gradient(circle at center, rgba(229, 199, 95, 0.25), transparent 22%),
        radial-gradient(circle at center, rgba(31, 77, 58, 0.08), transparent 55%),
        linear-gradient(145deg, #e5dac4, #c7b48f);
    border: 1px solid rgba(94, 72, 43, 0.18);
    border-radius: 22px;
    box-shadow: inset 0 0 60px rgba(86, 61, 35, 0.12);
}

.suyu-compass-map::before,
.suyu-compass-map::after {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    background: rgba(93, 70, 42, 0.22);
    content: "";
    transform: translate(-50%, -50%);
}

.suyu-compass-map::before {
    width: 2px;
    height: 82%;
}

.suyu-compass-map::after {
    width: 82%;
    height: 2px;
}

.suyu-axis {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 39%;
    height: 2px;
    background: linear-gradient(90deg, rgba(201, 162, 39, 0.72), transparent);
    transform-origin: left center;
}

.suyu-axis-nw {
    transform: rotate(225deg);
}

.suyu-axis-ne {
    transform: rotate(315deg);
}

.suyu-axis-se {
    transform: rotate(45deg);
}

.suyu-axis-sw {
    transform: rotate(135deg);
}

.suyu-cardinal {
    position: absolute;
    z-index: 4;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(94, 72, 43, 0.18);
    border-radius: 50%;
    color: #5a4327;
    font-family: "Cinzel", serif;
    font-weight: 700;
}

.suyu-cardinal-north {
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
}

.suyu-cardinal-east {
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
}

.suyu-cardinal-south {
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
}

.suyu-cardinal-west {
    top: 50%;
    left: 18px;
    transform: translateY(-50%);
}

.suyu-compass-button {
    position: absolute;
    z-index: 3;
    display: grid;
    width: min(205px, 36%);
    min-height: 130px;
    align-content: center;
    padding: 20px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(94, 72, 43, 0.18);
    border-radius: 18px;
    box-shadow: 0 13px 32px rgba(73, 53, 31, 0.1);
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.suyu-compass-button small {
    margin-bottom: 5px;
    color: var(--gold);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.suyu-compass-button strong {
    font-family: "Cinzel", serif;
    font-size: 1rem;
}

.suyu-compass-button > span {
    position: absolute;
    right: 16px;
    bottom: 12px;
    color: var(--gold);
    font-size: 1.45rem;
}

.suyu-compass-button:hover,
.suyu-compass-button:focus-visible,
.suyu-compass-button.active {
    background: var(--green);
    border-color: rgba(229, 199, 95, 0.55);
    box-shadow: 0 18px 40px rgba(31, 77, 58, 0.24);
    color: white;
    outline: none;
    transform: translateY(-5px) scale(1.02);
}

.suyu-nw {
    top: 13%;
    left: 8%;
}

.suyu-ne {
    top: 13%;
    right: 8%;
}

.suyu-se {
    right: 8%;
    bottom: 13%;
}

.suyu-sw {
    bottom: 13%;
    left: 8%;
}

.suyu-cusco-center {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    display: flex;
    width: 122px;
    height: 122px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(145deg, var(--green), var(--green-dark));
    border: 5px solid rgba(229, 199, 95, 0.75);
    border-radius: 50%;
    box-shadow: 0 18px 42px rgba(31, 77, 58, 0.3);
    color: white;
    text-align: center;
    transform: translate(-50%, -50%);
}

.suyu-cusco-center > span {
    color: var(--gold-light);
    font-size: 1.8rem;
}

.suyu-cusco-center strong {
    font-family: "Cinzel", serif;
    font-size: 0.9rem;
}

.suyu-cusco-center small {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.suyu-compass-reading {
    padding: 30px;
    background: linear-gradient(145deg, var(--green), #102d21);
    border-radius: 22px;
    color: white;
}

.suyu-compass-reading h4 {
    margin: 5px 0 6px;
    font-family: "Cinzel", serif;
    font-size: 1.8rem;
}

.suyu-reading-direction {
    margin-bottom: 25px;
    color: var(--gold-light);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.suyu-reading-item {
    margin-top: 16px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
}

.suyu-reading-item > span {
    display: block;
    margin-bottom: 7px;
    color: var(--gold-light);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.suyu-reading-item p {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.88rem;
}

.suyu-compass-note {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.56);
    font-size: 0.75rem;
    font-style: italic;
}

body.dark .suyu-compass-exhibit {
    background: linear-gradient(145deg, rgba(35, 38, 36, 0.96), rgba(21, 24, 22, 0.96));
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark .suyu-compass-intro {
    color: rgba(255, 255, 255, 0.66);
}

body.dark .suyu-compass-badge {
    color: var(--gold-light);
}

body.dark .suyu-compass-map {
    background:
        radial-gradient(circle at center, rgba(229, 199, 95, 0.18), transparent 22%),
        linear-gradient(145deg, #332d25, #1d1a16);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark .suyu-compass-button {
    background: rgba(43, 46, 43, 0.92);
    border-color: rgba(255, 255, 255, 0.09);
    color: white;
}

body.dark .suyu-compass-button.active,
body.dark .suyu-compass-button:hover,
body.dark .suyu-compass-button:focus-visible {
    background: var(--green);
}

@media (max-width: 1050px) {
    .suyu-compass-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .suyu-compass-exhibit {
        padding: 25px;
    }

    .suyu-compass-heading {
        flex-direction: column;
    }

    .suyu-compass-map {
        min-height: 620px;
    }

    .suyu-compass-button {
        width: 38%;
        min-height: 125px;
        padding: 15px;
    }

    .suyu-nw,
    .suyu-sw {
        left: 5%;
    }

    .suyu-ne,
    .suyu-se {
        right: 5%;
    }
}

@media (max-width: 500px) {
    .suyu-compass-map {
        min-height: 690px;
    }

    .suyu-compass-button {
        width: 42%;
        min-height: 135px;
    }

    .suyu-cusco-center {
        width: 105px;
        height: 105px;
    }

    .suyu-compass-button strong {
        font-size: 0.85rem;
    }
}