@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&display=swap');
:root{--ink:#182d2a;--muted:#687873;--paper:#f7f6f0;--white:#fff;--green:#1f5a49;--green2:#2e7761;--gold:#d9a84e;--line:#e2e5dc;--soft:#eaf0e7;--shadow:0 18px 55px #183c2d13}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Be Vietnam Pro',sans-serif}a{color:inherit;text-decoration:none}.topbar{height:78px;padding:0 5.4%;display:flex;align-items:center;justify-content:space-between;background:#fbfaf5;border-bottom:1px solid #e7e8df;position:sticky;top:0;z-index:500}.brand{display:flex;gap:12px;align-items:center}.brand-mark{width:43px;height:43px;border-radius:50%;background:#da251d;color:#ffed00;display:grid;place-items:center;font-family:Arial,sans-serif;font-size:27px;line-height:1;border:1px solid #f2d7a1;outline:1px solid #da251d;outline-offset:3px}.brand b{font-size:13px;letter-spacing:1.1px;display:block}.brand small{display:block;color:var(--muted);font-size:11px;margin-top:4px}.topbar nav{display:flex;gap:34px;font-size:12px;font-weight:600;color:#50615b}.topbar nav a:hover,.text-link:hover{color:var(--green2)}.icon-btn{border:1px solid var(--line);background:transparent;border-radius:50%;width:36px;height:36px;cursor:pointer;font-size:17px}
.hero{padding:74px 8% 60px;display:grid;grid-template-columns:1fr .88fr;gap:7%;min-height:430px;overflow:hidden;background:radial-gradient(ellipse at 80% 20%,#e4ead8 0,transparent 46%),var(--paper)}.eyebrow{font-size:10px;letter-spacing:2px;color:#7e8a68;font-weight:800;margin-bottom:16px}.hero h1{font-size:clamp(36px,4.3vw,59px);line-height:1.12;letter-spacing:-2px;margin:0 0 21px;font-weight:800}.hero h1 em{font-family:'Playfair Display',serif;font-weight:600;color:var(--green2);letter-spacing:-1.8px}.hero-copy>p{max-width:510px;font-size:13px;line-height:1.9;color:var(--muted)}.hero-actions{display:flex;align-items:center;gap:25px;margin-top:29px}.primary-btn{background:var(--green);color:#fff;padding:14px 18px;border-radius:4px;font-size:12px;font-weight:700;box-shadow:0 8px 18px #1f5a4920}.primary-btn span{margin-left:18px;color:#e8c779}.text-link{font-size:12px;font-weight:700}.hero-note{font-size:10px;color:#75837b;margin-top:32px}.live-dot,.map-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#65a57d;margin-right:8px}.hero-art{min-height:300px;position:relative;border-radius:48% 48% 5px 5px;background:linear-gradient(155deg,#dce6d2,#b8d0bd 52%,#739c86);overflow:hidden;border:1px solid #b3c6b3;box-shadow:inset 0 0 0 12px #ffffff22}.hero-art:before{content:"";position:absolute;width:65%;height:120%;left:18%;top:-10%;background:#f0ead6;clip-path:polygon(45% 0,60% 6%,52% 13%,64% 20%,56% 28%,69% 35%,57% 43%,65% 50%,54% 58%,58% 67%,43% 75%,49% 83%,36% 92%,27% 100%,20% 88%,30% 78%,20% 69%,28% 60%,15% 52%,24% 44%,18% 34%,29% 24%,22% 15%,35% 8%);filter:drop-shadow(8px 10px 0 #315d4c24);opacity:.94}.sun{position:absolute;right:15%;top:12%;width:75px;height:75px;border-radius:50%;background:#e7c87e;box-shadow:0 0 0 17px #e7c87e22}.contour{position:absolute;border:1px solid #557b6738;border-radius:50%;width:140%;height:70%;left:-20%;transform:rotate(-22deg)}.contour1{top:22%}.contour2{top:49%;transform:rotate(20deg)}.hero-stamp{position:absolute;right:12%;bottom:20%;background:#fff9e9;color:var(--green);width:93px;height:93px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-size:32px;box-shadow:0 12px 35px #284e3525;border:1px solid #dfc98b}.hero-stamp small{font:700 8px 'Be Vietnam Pro';letter-spacing:1px}.hero-caption{position:absolute;left:8%;bottom:8%;font-size:9px;letter-spacing:2px;color:#315d4c;font-weight:800}.art-label{position:absolute;font-size:8px;letter-spacing:1px;color:#496d5b;font-weight:800}.label-north{left:14%;top:22%}.label-central{right:24%;top:47%}.label-south{left:22%;bottom:24%}
.stats{background:var(--green);color:#fff;display:grid;grid-template-columns:repeat(4,1fr);padding:24px 9%}.stats div{padding:2px 22px;border-right:1px solid #ffffff2c}.stats div:last-child{border:0}.stats strong{font-size:25px;display:block;color:#e5c47b;letter-spacing:-.5px}.stats span{font-size:10px;color:#d0ded4;display:block;margin-top:5px}
main{max-width:1500px;margin:auto}.map-layout{padding:82px 6% 78px;display:grid;grid-template-columns:340px 1fr;gap:32px}.map-intro h2,.section-head h2,.about-section h2{font-size:28px;line-height:1.25;letter-spacing:-.8px;margin:0 0 12px}.map-intro>p,.section-head>p{font-size:12px;line-height:1.8;color:var(--muted)}.searchbox{display:flex;align-items:center;gap:10px;border:1px solid #dfe4da;background:#fff;border-radius:5px;padding:0 12px;height:44px;margin:22px 0 14px}.searchbox>span{font-size:22px;color:#829287}.searchbox input{border:0;outline:0;min-width:0;flex:1;font:11px 'Be Vietnam Pro';background:transparent}.searchbox kbd{font-size:10px;color:#89968e}.filter-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}.filter{font:10px 'Be Vietnam Pro';border:1px solid #e0e5dc;border-radius:3px;padding:7px 9px;background:transparent;color:#65766d;cursor:pointer}.filter.active,.filter:hover{background:var(--green);border-color:var(--green);color:#fff}.province-list{max-height:490px;overflow:auto;padding-right:5px}.province-item{display:flex;align-items:center;gap:11px;padding:12px 10px;border-bottom:1px solid #e6e8e0;cursor:pointer;transition:.15s}.province-item:hover,.province-item.selected{background:#e9efe6;border-radius:4px}.province-no{font-size:10px;color:#8e9c8d;width:23px}.province-item b{font-size:11px;display:block}.province-item small{font-size:9px;color:#7d8b83;display:block;margin-top:4px}.province-arrow{margin-left:auto;color:#9aa69c;font-size:15px}.map-wrap{border:1px solid #dfe5d9;background:#e9eee4;border-radius:7px;overflow:hidden;min-height:590px;box-shadow:var(--shadow);position:relative}.map-toolbar{height:49px;background:#fbfcf7;display:flex;align-items:center;justify-content:space-between;padding:0 17px;font-size:10px;color:#64756a;border-bottom:1px solid #dfe5d9}.map-toolbar button{background:transparent;border:0;color:#61756a;font:10px 'Be Vietnam Pro';cursor:pointer}#map{height:540px;width:100%;background:#e4ecdf}.map-footnote{padding:9px 14px;font-size:9px;color:#849087;background:#fbfcf7}.leaflet-popup-content-wrapper{border-radius:4px;font-family:'Be Vietnam Pro';box-shadow:0 5px 20px #163b291e}.leaflet-popup-content{font-size:12px}.popup-title{font-weight:800;margin-bottom:4px}.popup-sub{font-size:10px;color:#6d7c72}
.feature-section{padding:65px 6% 88px;background:#f0f1e9}.section-head{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:27px}.section-head>p{max-width:350px;margin:0 0 4px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.feature-card{border-radius:6px;min-height:230px;padding:25px;position:relative;overflow:hidden}.feature-history{background:#e1e8dc}.feature-culture{background:#efe4ce}.feature-nature{background:#d9e7e4}.feature-icon{width:37px;height:37px;display:grid;place-items:center;border-radius:50%;background:#ffffff9c;font-size:19px;color:var(--green);margin-bottom:21px}.feature-tag{font-size:9px;letter-spacing:1.4px;color:#75856f;font-weight:800}.feature-card h3{font-size:20px;margin:8px 0}.feature-card p{font-size:11px;line-height:1.8;color:#66756c;max-width:300px}.feature-card>span{position:absolute;bottom:21px;left:25px;font-size:9px;color:#506d5b;font-weight:700}
.about-section{padding:72px 8%;display:grid;grid-template-columns:80px 1fr auto;align-items:center;gap:25px;background:#fbfaf5}.about-emblem{width:66px;height:66px;border:1px solid #f2d7a1;border-radius:50%;display:grid;place-items:center;background:#da251d;color:#ffed00;font-family:Arial,sans-serif;font-size:42px;line-height:1;outline:1px solid #da251d;outline-offset:4px}.about-section h2{font-size:25px}.about-section p{max-width:650px;font-size:11px;line-height:1.9;color:var(--muted)}.about-pills{display:flex;flex-direction:column;gap:7px}.about-pills span{white-space:nowrap;padding:8px 11px;border:1px solid var(--line);border-radius:3px;font-size:9px;color:#61756a}
footer{display:flex;justify-content:space-between;padding:23px 6%;font-size:10px;color:#7e8b82;background:#eeefe7;border-top:1px solid #e0e4da}
.detail-backdrop{position:fixed;inset:0;background:#14291f80;z-index:800;opacity:0;visibility:hidden;transition:.25s}.detail-panel{position:fixed;right:0;top:0;height:100dvh;width:min(540px,100%);overflow:auto;background:#fbfaf5;z-index:810;transform:translateX(105%);transition:transform .3s ease;box-shadow:-20px 0 60px #0b201a25}.detail-panel.open{transform:translateX(0)}.detail-backdrop.open{opacity:1;visibility:visible}.close-btn{position:absolute;right:18px;top:18px;z-index:2;border:0;border-radius:50%;width:34px;height:34px;background:#fff;color:#244b3c;font-size:25px;cursor:pointer;box-shadow:0 3px 15px #0001}.detail-cover{height:175px;position:relative;background:linear-gradient(130deg,#d7e4d2,#6d9b81);overflow:hidden}.cover-grid{position:absolute;inset:-30%;background:repeating-radial-gradient(ellipse at center,transparent 0 22px,#ffffff38 23px 24px);transform:rotate(-20deg)}.cover-label{position:absolute;left:28px;top:25px;font-size:9px;letter-spacing:2px;color:#244f3e;font-weight:800}.cover-initial{position:absolute;right:35px;bottom:-20px;font-family:'Playfair Display';font-size:110px;color:#ffffffa8;font-weight:700}.detail-content{padding:28px}.detail-content h2{font-size:33px;letter-spacing:-1px;margin:0 0 10px}.detail-lead{font-size:13px;line-height:1.8;color:#65776b;margin:0 0 22px}.old-names{background:#edf1e8;border-left:3px solid #c5a45c;padding:13px 15px;margin-bottom:25px}.mini-label{font-size:9px;letter-spacing:1.3px;color:#7b896f;font-weight:800}.old-names p{font-size:12px;font-weight:700;margin:7px 0 0}.detail-tabs{display:flex;gap:5px;border-bottom:1px solid var(--line);overflow:auto}.tab{white-space:nowrap;border:0;background:transparent;padding:12px 10px;font:10px 'Be Vietnam Pro';color:#738077;cursor:pointer;border-bottom:2px solid transparent}.tab.active{color:var(--green);border-bottom-color:var(--gold);font-weight:800}.tab-content{min-height:135px;padding:20px 0;color:#53675b;font-size:12px;line-height:1.9}.tab-content p{margin:0}.tab-content ul{margin:0;padding-left:18px}.tab-content li{margin-bottom:6px}.image-section{border-top:1px solid var(--line);padding-top:20px}.image-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.image-tile{height:92px;border-radius:4px;background-size:cover;background-position:center;position:relative;overflow:hidden}.image-tile span{position:absolute;left:7px;bottom:6px;color:white;font-size:9px;font-weight:700;text-shadow:0 1px 4px #000}.image-note{font-size:9px;line-height:1.7;color:#8a958b}.source-link{display:inline-block;margin-top:10px;color:var(--green);font-size:11px;font-weight:800;border-bottom:1px solid #b9c8b8;padding-bottom:5px}
body.dark{--paper:#14231e;--ink:#e9eee7;--muted:#a6b5a9;--white:#1e3029;--line:#35483e;--soft:#24392f;background:var(--paper);color:var(--ink)}body.dark .topbar,body.dark .about-section{background:#182b23;border-color:#314238}body.dark .hero{background:radial-gradient(ellipse at 80% 20%,#2a4635 0,transparent 46%),var(--paper)}body.dark .map-intro .searchbox,body.dark .searchbox,body.dark .map-toolbar,body.dark .map-footnote{background:#1d3028;border-color:#35483e}body.dark .searchbox input{color:var(--ink)}body.dark .province-item{border-color:#2c4035}body.dark .province-item:hover,body.dark .province-item.selected{background:#2b4436}body.dark .feature-section{background:#1a2b23}body.dark .feature-history{background:#293d30}body.dark .feature-culture{background:#403a2a}body.dark .feature-nature{background:#263c38}body.dark .detail-panel{background:#182b23}body.dark .old-names{background:#263b2e}body.dark footer{background:#17271f;border-color:#314238}
@media(max-width:900px){.hero{padding:55px 6%;grid-template-columns:1fr .7fr;gap:4%}.map-layout{grid-template-columns:1fr;padding:55px 5%}.province-list{max-height:250px;display:grid;grid-template-columns:repeat(2,1fr);gap:0 8px}.map-wrap{min-height:430px}#map{height:430px}.about-section{grid-template-columns:60px 1fr}.about-pills{grid-column:2;flex-direction:row;flex-wrap:wrap}.about-pills span{white-space:normal}.topbar nav{gap:15px}}
@media(max-width:600px){.topbar{height:68px;padding:0 5%}.topbar nav{display:none}.brand b{font-size:11px}.hero{display:block;padding:49px 6% 35px}.hero-art{margin-top:32px;min-height:230px}.hero h1{font-size:39px}.stats{grid-template-columns:repeat(2,1fr);padding:19px 5%;gap:16px}.stats div{padding:0 12px;border-right:0}.stats strong{font-size:22px}.map-layout{padding:48px 5%}.map-intro h2,.section-head h2{font-size:25px}.province-list{grid-template-columns:1fr}.map-wrap{min-height:380px}#map{height:380px}.section-head{display:block}.section-head>p{margin-top:12px}.feature-section{padding:50px 5%}.feature-grid{grid-template-columns:1fr}.feature-card{min-height:210px}.about-section{padding:45px 7%;grid-template-columns:1fr;gap:15px}.about-pills{grid-column:1}.about-section h2{font-size:24px}footer{gap:10px;flex-wrap:wrap;padding:20px 5%}.detail-content{padding:22px}.detail-content h2{font-size:29px}}

.map-controls{display:flex;gap:7px;align-items:center}.map-controls button{border:1px solid #dce4d9;background:#fff;padding:7px 9px;border-radius:3px;font-size:9px;white-space:nowrap}.map-controls button.active{background:#1f5a49;color:#fff;border-color:#1f5a49}
.province-boundary{fill:#c9d9be;fill-opacity:.28;color:#477b5e;weight:1.5;opacity:.85}
.island-pin{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#d59a3e;color:#fff;border:2px solid #fff;box-shadow:0 2px 9px #183a2c55;font-size:11px;font-weight:800}
.island-section{padding:68px 6% 76px;background:#fbfaf5}.island-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.island-card{background:#f0f2e9;border:1px solid #e1e6dc;border-radius:5px;padding:18px;cursor:pointer;transition:.18s;min-height:150px;display:flex;flex-direction:column}.island-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px #183c2d12;border-color:#b6c9b5}.island-card .island-no{font-size:9px;color:#b08335;letter-spacing:1.5px;font-weight:800}.island-card h3{font-size:16px;margin:12px 0 6px}.island-card p{font-size:10px;line-height:1.7;color:#6e7d72;margin:0}.island-card small{font-size:9px;color:#849087;margin-top:auto;padding-top:12px}.island-disclaimer{font-size:10px;line-height:1.8;color:#7a877c;margin-top:20px;max-width:1050px}.island-cover{background:linear-gradient(135deg,#c8dfd9,#6ba6a4 55%,#286f79)}.island-tab{white-space:nowrap;border:0;background:transparent;padding:12px 10px;font:10px 'Be Vietnam Pro';color:#738077;cursor:pointer;border-bottom:2px solid transparent}.island-tab.active{color:var(--green);border-bottom-color:var(--gold);font-weight:800}.image-credit{display:block;background:#fff;padding:4px 5px;font-size:8px;color:#45644f;text-decoration:underline;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.image-tile{display:flex;flex-direction:column}.image-tile a{margin-top:auto}
@media(max-width:900px){.island-grid{grid-template-columns:repeat(2,1fr)}.map-controls{gap:4px}.map-controls button{padding:6px}}
@media(max-width:600px){.map-toolbar{padding:0 9px}.map-controls button{font-size:8px;padding:5px 6px}.island-section{padding:48px 5%}.island-grid{grid-template-columns:1fr 1fr}.island-card{padding:13px;min-height:165px}.island-card h3{font-size:14px}}
body.dark .island-section{background:#182b23}body.dark .island-card{background:#22372b;border-color:#35483e}body.dark .island-card p,body.dark .island-disclaimer{color:#a5b4a8}body.dark .map-controls button{background:#22372b;color:#dce9dc;border-color:#3b5043}body.dark .map-controls button.active{background:#1f5a49}

/* Robust map UI and accessible controls */
button{font-family:inherit}.province-item{width:100%;text-align:left;border-top:0;border-left:0;border-right:0;background:transparent;color:inherit;font-family:inherit}.province-text{min-width:0;flex:1}.province-text b{display:block}.province-text small{overflow-wrap:anywhere}.list-summary{display:flex;justify-content:space-between;gap:8px;font-size:9px;color:#849087;margin:8px 1px}.map-controls{display:flex;gap:5px;align-items:center}.map-controls button{border:1px solid #dce4d9;background:#fff;padding:7px 8px;border-radius:3px;font-size:9px;white-space:nowrap;cursor:pointer;color:#4d6857}.map-controls button.active{background:#1f5a49;color:#fff;border-color:#1f5a49}.map-controls button:disabled{opacity:.5;cursor:not-allowed}
#map{min-height:540px}.map-legend{display:flex;gap:15px;flex-wrap:wrap;padding:10px 14px;background:#fbfcf7;border-top:1px solid #e1e7dd;font-size:9px;color:#718176}.map-legend span{display:inline-flex;align-items:center;gap:6px}.legend-prov{display:inline-block;width:8px;height:8px;border-radius:50%;background:#2f7052}.legend-island{display:inline-block;width:9px;height:9px;border-radius:50%;background:#d59a3e}.province-marker{display:block;width:12px;height:12px;background:#2f7258;border:2px solid #fff;border-radius:50%;box-shadow:0 1px 7px #183a2c75}.island-marker{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#d59a3e;color:#fff;border:2px solid #fff;box-shadow:0 2px 9px #183a2c55;font-size:11px}.province-marker-wrap,.island-marker-wrap{background:transparent;border:0}.map-error{padding:28px;color:#405d4a;line-height:1.8;font-size:12px}.empty-state,.image-loading{font-size:11px;line-height:1.8;color:#7d8b83;padding:10px}.image-result{min-width:0;display:flex;flex-direction:column;gap:5px}.image-result a{display:block;text-decoration:none}.image-result img{width:100%;height:100px;object-fit:cover;border-radius:4px;background:#e8ece4}.image-result .image-credit{display:block;background:transparent;padding:4px 0;color:#45644f;font-size:8px;text-decoration:underline;line-height:1.5}.image-result small{font-size:8px;line-height:1.5;color:#7b897f;overflow-wrap:anywhere}.tab-extra{margin-top:12px}.island-section{padding:68px 6% 76px;background:#fbfaf5}.island-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.island-card{appearance:none;text-align:left;color:inherit;background:#f0f2e9;border:1px solid #e1e6dc;border-radius:5px;padding:18px;cursor:pointer;transition:.18s;min-height:150px;display:flex;flex-direction:column}.island-card:hover,.island-card:focus-visible{transform:translateY(-2px);box-shadow:0 10px 24px #183c2d12;border-color:#b6c9b5}.island-card .island-no{font-size:9px;color:#b08335;letter-spacing:1.5px;font-weight:800}.island-card h3{font-size:16px;margin:12px 0 6px}.island-card p{font-size:10px;line-height:1.7;color:#6e7d72;margin:0}.island-card small{font-size:9px;color:#849087;margin-top:auto;padding-top:12px}.island-disclaimer{font-size:10px;line-height:1.8;color:#7a877c;margin-top:20px;max-width:1050px}.island-cover{background:linear-gradient(135deg,#c8dfd9,#6ba6a4 55%,#286f79)}.island-tab{white-space:nowrap;border:0;background:transparent;padding:12px 10px;font:10px 'Be Vietnam Pro';color:#738077;cursor:pointer;border-bottom:2px solid transparent}.island-tab.active{color:var(--green);border-bottom-color:var(--gold);font-weight:800}.panel-open{overflow:hidden}
body.dark .map-legend{background:#1d3028;border-color:#35483e;color:#aab9ad}body.dark .map-controls button{background:#22372b;color:#dce9dc;border-color:#3b5043}body.dark .map-controls button.active{background:#1f5a49}body.dark .island-section{background:#182b23}body.dark .island-card{background:#22372b;border-color:#35483e}body.dark .island-card p,body.dark .island-disclaimer{color:#a5b4a8}body.dark .image-result .image-credit{color:#bdd5bf}
@media(max-width:900px){.island-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.map-controls{gap:4px}.map-controls button{padding:6px}.map-layout{grid-template-columns:1fr}.province-list{max-height:330px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 8px}}
@media(max-width:600px){.map-toolbar{padding:0 8px;gap:5px}.map-controls button{font-size:8px;padding:5px}.map-legend{gap:9px}.island-section{padding:48px 5%}.island-grid{grid-template-columns:1fr 1fr}.island-card{padding:13px;min-height:165px}.island-card h3{font-size:14px}.province-list{grid-template-columns:1fr}#map{min-height:390px;height:390px}.map-wrap{min-height:450px}.map-toolbar>span{font-size:9px}}

/* Offline-friendly vector-style fallback map: no raster tile server is requested. */
#map{background-color:#eaf0e5;background-image:
 radial-gradient(ellipse at 18% 25%,#dbe8d4 0 12%,transparent 12.5%),
 radial-gradient(ellipse at 74% 58%,#dce9d5 0 17%,transparent 17.5%),
 radial-gradient(ellipse at 46% 84%,#d5e4d3 0 10%,transparent 10.5%),
 linear-gradient(135deg,#eef2e7,#e3eddf 45%,#eaf0e5)}
.leaflet-container{font-family:'Be Vietnam Pro',sans-serif}
.leaflet-control-attribution{background:#ffffffc9!important;color:#617568!important}
.leaflet-control-attribution a{color:#245b45!important}
body.dark #map{background-color:#1d332b;background-image:
 radial-gradient(ellipse at 18% 25%,#294436 0 12%,transparent 12.5%),
 radial-gradient(ellipse at 74% 58%,#2b4636 0 17%,transparent 17.5%),
 radial-gradient(ellipse at 46% 84%,#294436 0 10%,transparent 10.5%),
 linear-gradient(135deg,#1a2c23,#21382b 45%,#1a2c23)}

/* Per-site history-learning cards: real image beside each explanation */
.site-learning-list{display:flex;flex-direction:column;gap:16px;margin:14px 0 18px}
.site-learning-card{display:grid;grid-template-columns:minmax(150px,34%) minmax(0,1fr);gap:14px;padding:12px;border:1px solid #dce5ee;border-radius:14px;background:#fff;box-shadow:0 2px 8px rgba(22,55,85,.05)}
.site-learning-photo{min-width:0;display:flex;flex-direction:column;gap:6px;align-items:stretch}
.site-photo-link{display:block;position:relative;text-decoration:none;color:#fff}
.site-photo-link img{display:block;width:100%;height:155px;object-fit:cover;border-radius:9px;background:#e8eef3}
.site-photo-link span{position:absolute;right:6px;bottom:6px;background:rgba(9,34,57,.82);border-radius:5px;padding:4px 7px;font-size:11px}
.site-photo-credit{display:block;font-size:10px;line-height:1.4;color:#65758a;overflow-wrap:anywhere}
.site-photo-placeholder{min-height:155px;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;border-radius:9px;background:linear-gradient(135deg,#edf4f8,#dfe9ef);color:#536b7d;font-size:12px}
.site-photo-missing{min-height:110px}
.site-photo-search,.site-google-fallback{display:inline-block;margin-top:7px;color:#145a9e;font-size:12px;font-weight:650;text-decoration:underline;text-underline-offset:2px}
.site-learning-copy h4{margin:0 0 8px;color:#123d77;font-size:15px;line-height:1.35}
.site-learning-copy p{margin:0 0 9px;font-size:13px;line-height:1.65;color:#293b4d}
.site-learning-copy .site-learning-question{padding:8px 10px;border-left:3px solid #6c9bc7;background:#f2f7fb;border-radius:0 7px 7px 0;font-size:12px}
@media(max-width:600px){.site-learning-card{grid-template-columns:1fr}.site-photo-link img{height:190px}.site-photo-placeholder{min-height:130px}}
.site-photo-fallback{display:block;border-radius:9px;overflow:hidden;background:#eaf1f4}
.site-photo-fallback img{display:block;width:100%;height:155px;object-fit:cover}
.site-photo-fallback small{display:block;padding:6px 8px;font-size:10px;line-height:1.35;color:#596f7d}
@media(max-width:600px){.site-photo-fallback img{height:190px}}

/* Text-first historical site cards: no potentially misleading images */
.site-learning-list-text { display: grid; grid-template-columns: 1fr; gap: 12px; }
.site-learning-card-text { display: block; }
.site-learning-card-text .site-learning-copy { width: 100%; min-width: 0; }