/* Vietnam Factbook — "Lacquer & Limestone".
   Warm parchment and ink, lacquer red, jade, and a gold rule. Hairline rules
   instead of boxes; the only filled blocks are the map frame and photos. */
:root{
  --bg:#FCFBF7; --bg2:#F2F5EE; --ink:#16211A; --ink2:#42544A; --ink3:#75857B;
  --rule:#DCE4D8; --rule2:#C3D0BC;
  --green:#186A3B;        /* paddy green — the site's primary */
  --green-dk:#0F4A29; --green-lt:#2E9455; --green-soft:#E6F1E8;
  --gold:#C8952A;         /* ripe rice */
  --ember:#D2691E;        /* the low sun through haze */
  --sunset:#F0A93B;       /* the last of it on the water */
  --red:#B3352C;          /* lacquer, used only for warnings */
  --red-soft:#F6E7E5;
  --link:#186A3B; --link-hover:#2E9455;
  --ok:#186A3B; --warn:#9A6A12; --bad:#B3352C;
  --maxw:1240px; --rad:4px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --shadow:0 1px 2px rgba(16,33,24,.06), 0 8px 24px rgba(16,33,24,.07);
}
html[data-theme="dark"]{
  --bg:#0F1512; --bg2:#161F19; --ink:#E8EFE8; --ink2:#B4C4B8; --ink3:#84958A;
  --rule:#243029; --rule2:#334136;
  --green:#4FB477; --green-dk:#2E9455; --green-lt:#6FCB92; --green-soft:#15251B;
  --gold:#D9B44A; --ember:#E08544; --sunset:#F5BE5C;
  --red:#E07A6E; --red-soft:#2A1C1A;
  --link:#6FCB92; --link-hover:#8FDCAB;
  --ok:#4FB477; --warn:#D9B44A; --bad:#E07A6E;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
img{max-width:100%;height:auto}
html{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.62;-webkit-text-size-adjust:100%}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover);text-decoration:underline}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.22;margin:0 0 .5em}
h1{font-size:2.1rem;letter-spacing:-.01em}
h2{font-size:1.42rem;margin-top:2.2rem}
h3{font-size:1.12rem;margin-top:1.5rem}
p{margin:0 0 1em}
small,.fineprint{font-size:.82rem;color:var(--ink3);line-height:1.5}
hr{border:0;border-top:1px solid var(--rule);margin:2rem 0}

/* ---------- header ---------- */
.topbar{display:flex;align-items:center;gap:14px;padding:10px 20px;background:var(--bg);
  border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:60;flex-wrap:nowrap}
.logo-wrap{flex:0 0 auto;min-width:auto;display:flex;flex-direction:column;line-height:1.05}
.logo{font-family:var(--serif);font-size:1.34rem;font-weight:700;color:var(--ink);
  letter-spacing:-.015em;white-space:nowrap}
.logo:hover{text-decoration:none;color:var(--green)}
.logo span{color:var(--green)}
.logo-img{height:30px;width:auto;display:block}
.tagline{font-size:.7rem;color:var(--ink3);letter-spacing:.02em;white-space:nowrap}
.mainnav{display:flex;align-items:center;gap:2px;flex:1 1 auto;min-width:0}
.mainnav>a,.ddbtn{padding:7px 9px;font-size:.87rem;color:var(--ink2);border-radius:var(--rad);
  white-space:nowrap;cursor:pointer}
.mainnav>a:hover,.ddbtn:hover{background:var(--bg2);color:var(--ink);text-decoration:none}
.dd{position:relative}
.ddmenu{display:none;position:absolute;top:100%;left:0;min-width:230px;background:var(--bg);
  border:1px solid var(--rule);border-radius:var(--rad);padding:6px;z-index:70;
  box-shadow:0 10px 26px rgba(0,0,0,.10)}
.ddmenu.open{display:block}
.ddmenu a{display:block;padding:6px 10px;font-size:.87rem;color:var(--ink2);border-radius:2px}
.ddmenu a:hover{background:var(--bg2);color:var(--ink);text-decoration:none}
.ddmenu .ddhead{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink3);padding:8px 10px 3px;font-weight:600}
.searchwrap{position:relative;flex:0 1 230px;min-width:130px}
#searchBox{width:100%;padding:7px 11px;font-size:16px;border:1px solid var(--rule2);
  border-radius:var(--rad);background:var(--bg);color:var(--ink);font-family:inherit}
#searchBox:focus{outline:none;border-color:var(--green)}
.searchresults{position:absolute;top:105%;left:0;right:0;background:var(--bg);
  border:1px solid var(--rule);border-radius:var(--rad);z-index:80;max-height:65vh;
  overflow:auto;display:none;box-shadow:0 10px 26px rgba(0,0,0,.12)}
.searchresults.open{display:block}
.searchresults a{display:block;padding:8px 11px;font-size:.88rem;color:var(--ink);
  border-bottom:1px solid var(--rule)}
.searchresults a:last-child{border-bottom:0}
.searchresults a:hover{background:var(--bg2);text-decoration:none}
.searchresults .sr-type{float:right;font-size:.72rem;color:var(--ink3)}
.savebtn,.theme-toggle,.userbtn,.burger{background:none;border:0;color:var(--ink2);
  font-size:1.05rem;cursor:pointer;padding:5px 7px;border-radius:var(--rad);position:relative}
.savebtn:hover,.theme-toggle:hover,.userbtn:hover,.burger:hover{background:var(--bg2);color:var(--ink)}
.burger{display:none;font-size:1.2rem}
.favbadge{position:absolute;top:-1px;right:-2px;background:var(--green);color:#fff;
  font-size:.6rem;border-radius:8px;padding:0 4px;font-family:var(--sans)}

/* ---------- offcanvas ---------- */
.offcanvas{position:fixed;top:0;bottom:0;width:308px;background:var(--bg);z-index:100;
  padding:14px 16px;overflow-y:auto;transition:transform .18s ease}
.offcanvas.left{left:0;transform:translateX(-105%);border-right:1px solid var(--rule)}
.offcanvas.right{right:0;transform:translateX(105%);border-left:1px solid var(--rule)}
.offcanvas.open{transform:translateX(0)}
.oc-head{display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid var(--rule);padding-bottom:8px;margin-bottom:10px;font-family:var(--serif)}
.oc-close{background:none;border:0;font-size:1.4rem;cursor:pointer;color:var(--ink2)}
.offcanvas a{display:block;padding:6px 2px;font-size:.92rem;color:var(--ink2)}
.offcanvas details{border-top:1px solid var(--rule);padding:6px 0}
.offcanvas summary{cursor:pointer;font-size:.86rem;font-weight:600;color:var(--ink);
  text-transform:uppercase;letter-spacing:.05em}
.offcanvas details a{padding-left:10px;font-size:.88rem}
.oc-backdrop{position:fixed;inset:0;background:rgba(20,16,10,.42);z-index:90;display:none}
.oc-backdrop.open{display:block}
.oc-row{display:flex;justify-content:space-between;align-items:center;gap:10px;
  border-top:1px solid var(--rule);padding:10px 0;font-size:.88rem}
.oc-view{border-top:1px solid var(--rule);padding-top:10px;font-size:.85rem;color:var(--ink2)}
.oc-view p{margin:0 0 .7em}

/* ---------- layout ---------- */
.page{max-width:var(--maxw);margin:0 auto;padding:26px 20px 56px}
.page > .phero:first-child{margin-top:-26px}
.wide{max-width:1320px}
.narrow{max-width:760px}
.crumbs{font-size:.8rem;color:var(--ink3);margin-bottom:10px}
.crumbs a{color:var(--ink3)}
.lede{font-size:1.06rem;color:var(--ink2);max-width:64ch}
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:38px;align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.sticky{position:sticky;top:76px}

/* ---------- rules, not boxes ---------- */
.rule-top{border-top:1px solid var(--rule);padding-top:14px}
.section{border-top:1px solid var(--rule);padding-top:18px;margin-top:30px}
.section>h2{margin-top:0}
.eyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink3);
  font-weight:600;margin-bottom:6px}
.card{border-top:2px solid var(--rule2);padding:12px 0 4px}
.card h3{margin:0 0 4px;font-size:1.02rem}
.card p{margin:0 0 6px;font-size:.9rem;color:var(--ink2)}
.card .meta{font-size:.76rem;color:var(--ink3)}

.linklist{columns:2;column-gap:34px;font-size:.92rem}
@media(max-width:640px){.linklist{columns:1}}
.linklist a{display:block;padding:3px 0;break-inside:avoid}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.chip{font-size:.74rem;padding:2px 8px;border:1px solid var(--rule2);border-radius:11px;
  color:var(--ink2);white-space:nowrap}
.chip.on{border-color:var(--green);color:var(--green);background:var(--green-soft)}
.chip.jade{border-color:var(--green);color:var(--green)}
.chip.warnc{border-color:var(--warn);color:var(--warn)}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{padding:7px 10px;text-align:right;border-bottom:1px solid var(--rule)}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3);
  font-weight:600;white-space:nowrap;border-bottom:1px solid var(--rule2)}
th.name,td.name{text-align:left}
td.name b{font-weight:600}
tbody tr:hover{background:var(--bg2)}
.tablewrap{overflow-x:auto}
table.sortable thead th{cursor:pointer}
.num{font-variant-numeric:tabular-nums}
.up{color:var(--green)} .down{color:var(--red)}

/* ---------- facts / at a glance ---------- */
.facts{font-size:.92rem;border-top:1px solid var(--rule2)}
.facts div{display:flex;justify-content:space-between;gap:16px;padding:7px 0;
  border-bottom:1px solid var(--rule)}
.facts dt,.facts .k{color:var(--ink3);flex:0 0 auto;font-size:.85rem}
.facts dd,.facts .v{margin:0;text-align:right;font-weight:500}
.provenance{font-size:.75rem;color:var(--ink3);margin-top:6px}

/* ---------- notes ---------- */
.note{border-left:2px solid var(--rule2);padding:2px 0 2px 13px;margin:14px 0;
  font-size:.9rem;color:var(--ink2)}
.note.red{border-left-color:var(--red)}
.note.jade{border-left-color:var(--green)}
.note.gold{border-left-color:var(--gold)}
.note b{color:var(--ink)}

/* ---------- guided summary ---------- */
.guided{border-left:3px solid var(--green);padding:2px 0 2px 15px;margin:0 0 22px;
  font-size:1.02rem;color:var(--ink2);max-width:66ch}
.guided .eyebrow{color:var(--green)}

/* ---------- map ---------- */
.mapframe{border:1px solid var(--rule2);border-radius:var(--rad);overflow:hidden;
  background:var(--bg2);line-height:0}
.mapframe iframe{width:100%;height:290px;border:0;display:block}
.mapcap{font-size:.75rem;color:var(--ink3);padding:6px 2px;line-height:1.5}

/* ---------- body prose ---------- */
.prose{max-width:70ch}
.prose h2{border-top:1px solid var(--rule);padding-top:20px}
.prose ul,.prose ol{padding-left:20px;margin:0 0 1em}
.prose li{margin-bottom:.35em}
.prose table{margin:1em 0}

/* ---------- sources ---------- */
.sources{font-size:.84rem;color:var(--ink2)}
.sources li{margin-bottom:.5em}
.verified{font-size:.8rem;color:var(--ink3);border-top:1px solid var(--rule);
  padding-top:10px;margin-top:8px}

/* ---------- buttons / forms ---------- */
.tbtn,button.tbtn,input[type=submit]{background:var(--green);color:#fff;border:0;
  padding:8px 15px;border-radius:var(--rad);font-size:.88rem;cursor:pointer;
  font-family:inherit}
.tbtn:hover{background:var(--link-hover);text-decoration:none;color:#fff}
.tbtn.ghost{background:none;color:var(--ink2);border:1px solid var(--rule2)}
.tbtn.ghost:hover{border-color:var(--green);color:var(--green)}
input[type=text],input[type=email],input[type=date],input[type=number],select,textarea{
  padding:7px 10px;border:1px solid var(--rule2);border-radius:var(--rad);
  background:var(--bg);color:var(--ink);font-family:inherit;font-size:16px;max-width:100%}
textarea{width:100%;line-height:1.55}
label{font-size:.82rem;color:var(--ink3);display:block;margin-bottom:3px}
.formrow{margin-bottom:14px}

/* ---------- affiliate ---------- */
.aff{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:12px 0;
  margin:20px 0;font-size:.9rem}
.aff .eyebrow{color:var(--ink3)}
.aff a{font-weight:600}

/* ---------- draft banner ---------- */
.draftbar{background:var(--red-soft);border-bottom:1px solid var(--red);padding:8px 20px;
  font-size:.85rem;color:var(--ink)}

/* ---------- trust strip ---------- */
.trust{display:flex;flex-wrap:wrap;gap:0 26px;font-size:.8rem;color:var(--ink3);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:9px 0;
  margin:0 0 22px}
.trust b{color:var(--ink);font-weight:600}

/* ---------- hero ---------- */
.hero{position:relative;border-bottom:1px solid var(--rule);margin-bottom:20px;
  padding-bottom:14px}
.hero h1{margin-bottom:.25em}
.section{margin-top:26px}

/* ---------- footer ---------- */
.megafooter{max-width:var(--maxw);margin:40px auto 0;padding:26px 20px 0;
  border-top:1px solid var(--rule);display:grid;gap:24px;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.mf-col h2{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink3);
  font-family:var(--sans);font-weight:600;margin:0 0 7px}
.mf-col a{display:block;font-size:.85rem;padding:2px 0;color:var(--ink2)}
.footer{max-width:var(--maxw);margin:0 auto;padding:26px 20px 46px;
  display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.f-col b{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink3);margin-bottom:7px}
.f-col a{display:block;font-size:.85rem;padding:2px 0;color:var(--ink2)}
.f-family,.f-sub,.f-langs,.f-legal{grid-column:1/-1}
.f-family{font-size:.83rem;color:var(--ink3);border-top:1px solid var(--rule);padding-top:14px}
.f-sub{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.f-legal{border-top:1px solid var(--rule);padding-top:14px;font-size:.76rem;color:var(--ink3);
  line-height:1.6}
.f-legal p{margin:0 0 .8em}

/* ---------- admin ---------- */
.adminbar{background:var(--bg2);border-bottom:1px solid var(--rule2);padding:7px 20px;
  font-size:.84rem;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.adminbar a{color:var(--ink2)}
.qcheck{font-size:.72rem;color:var(--bad)}
.qok{color:var(--ok)}
.matrix td,.matrix th{text-align:center}
.matrix td.name{text-align:left}
.bar{height:5px;background:var(--rule);border-radius:3px;overflow:hidden;min-width:70px}
.bar i{display:block;height:100%;background:var(--green)}

/* ---------- mobile ---------- */
@media(max-width:1020px){
  .mainnav>a,.ddbtn{padding:6px 6px;font-size:.82rem}
  .tagline{display:none}
}
@media(max-width:860px){
  .mainnav{display:none}
  .burger{display:block}
  .topbar{gap:9px;padding:9px 14px}
  .page{padding:20px 14px 44px}
  h1{font-size:1.62rem}
  .searchwrap{flex:1 1 auto}
}
@media(max-width:520px){
  .logo{font-size:1.14rem}
  .facts div{flex-direction:column;gap:0}
  .facts dd,.facts .v{text-align:left}
}

/* ==========================================================================
   IMAGERY — this is a site about a country; the pictures are the point.
   Every card carries one, every place page opens with one, and every image
   carries its credit because none of them are ours.
   ========================================================================== */

/* ---- photo cards: the default unit of the site ---- */
.pcard{position:relative;display:block;border-radius:var(--rad);overflow:hidden;
  background:var(--bg2);color:var(--ink);text-decoration:none;box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease}
.pcard:hover{text-decoration:none;transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(16,33,24,.08), 0 14px 34px rgba(16,33,24,.14)}
.pcard-img{position:relative;aspect-ratio:4/3;background:var(--bg2);overflow:hidden}
.pcard-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease}
.pcard:hover .pcard-img img{transform:scale(1.045)}
.pcard-img.tall{aspect-ratio:3/4}
.pcard-img.wide{aspect-ratio:16/9}
/* the gradient is what makes white text legible on any photograph */
.pcard-over{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:flex-end;padding:14px 15px 12px;
  background:linear-gradient(to top,rgba(8,20,13,.86) 0%,rgba(8,20,13,.52) 34%,
    rgba(8,20,13,.10) 66%,rgba(8,20,13,0) 100%)}
.pcard-over h3{margin:0;font-size:1.06rem;color:#fff;line-height:1.24;
  text-shadow:0 1px 3px rgba(0,0,0,.5)}
.pcard-over h3 .vi{display:block;font-size:.78rem;font-weight:400;opacity:.86;
  font-family:var(--sans)}
.pcard-over p{margin:5px 0 0;font-size:.82rem;color:rgba(255,255,255,.9);line-height:1.4;
  text-shadow:0 1px 3px rgba(0,0,0,.5)}
.pcard-tag{position:absolute;top:10px;left:10px;font-size:.68rem;letter-spacing:.05em;
  text-transform:uppercase;font-weight:600;color:#fff;background:rgba(8,20,13,.62);
  padding:3px 8px;border-radius:20px;backdrop-filter:blur(3px)}
.pcard-tag.hist{background:rgba(179,53,44,.85)}
/* a card with no photograph yet must still look deliberate, not broken */
.pcard-img.nophoto{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--green-soft),var(--bg2))}
.pcard-img.nophoto span{font-family:var(--serif);font-size:2.6rem;color:var(--green);
  opacity:.32}
html[data-theme="dark"] .pcard-img.nophoto{
  background:linear-gradient(140deg,#14251A,#0F1512)}

.pgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.pgrid.small{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.pgrid.small .pcard-over h3{font-size:.92rem}
.pgrid.big{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}

/* ---- page hero: see "THE SURFACE" below, which owns .phero ---- */

/* ---- gallery on an entity page ---- */
.gallery{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.gallery figure{margin:0}
.gallery img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--rad);display:block;box-shadow:var(--shadow)}
.gallery figcaption{font-size:.74rem;color:var(--ink3);padding-top:5px;line-height:1.45}

/* ---- region strip on the home page ---- */
.regionstrip{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.regionstrip .pcard-img{aspect-ratio:3/2}

/* ---- a photograph beside a block of prose ---- */
.sidefig{float:right;width:min(320px,42%);margin:4px 0 16px 22px}
.sidefig img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--rad);display:block;box-shadow:var(--shadow)}
.sidefig figcaption{font-size:.72rem;color:var(--ink3);padding-top:5px;line-height:1.45}
@media(max-width:640px){.sidefig{float:none;width:100%;margin:0 0 16px}}

@media(max-width:860px){

}

/* where a card borrows a photograph from a place it contains, say so */
.pcard-from{position:absolute;bottom:8px;right:9px;font-size:.63rem;color:rgba(255,255,255,.8);
  background:rgba(8,20,13,.5);padding:2px 7px;border-radius:20px;backdrop-filter:blur(3px);
  z-index:1}

/* ---- climate chart: rainfall bars with a temperature range behind them.
       Pure CSS from the data — no chart library, works in both themes. ---- */
.climatechart{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;
  align-items:end;height:190px;margin:14px 0 4px;padding-top:8px}
.cmonth{display:flex;flex-direction:column;justify-content:flex-end;height:100%;
  position:relative;text-align:center}
.cbar{background:linear-gradient(to top,var(--green),var(--green-lt));
  border-radius:3px 3px 0 0;min-height:2px;position:relative}
.cbar.wet{background:linear-gradient(to top,#1B5E86,#3E93C4)}
.ctemp{position:absolute;left:50%;transform:translateX(-50%);width:5px;border-radius:3px;
  background:linear-gradient(to top,var(--gold),#E0685C);opacity:.9}
.clabel{font-size:.64rem;color:var(--ink3);padding-top:5px;letter-spacing:.02em}
.cval{font-size:.6rem;color:var(--ink3);padding-bottom:2px}
.climatekey{display:flex;gap:16px;flex-wrap:wrap;font-size:.74rem;color:var(--ink3);
  margin-bottom:6px}
.climatekey i{display:inline-block;width:10px;height:10px;border-radius:2px;
  margin-right:5px;vertical-align:-1px}
.climatekey .k-rain{background:#3E93C4}
.climatekey .k-dry{background:var(--green-lt)}
.climatekey .k-temp{background:linear-gradient(to top,var(--gold),#E0685C)}
@media(max-width:620px){.climatechart{height:150px;gap:2px}.clabel{font-size:.55rem}
  .cval{display:none}}

/* thumbnails in data tables — a province row should show the province */
.thumbcell{width:78px;padding:5px 8px 5px 10px}
.rowthumb{width:72px;height:48px;object-fit:cover;border-radius:3px;display:block;
  box-shadow:var(--shadow)}
@media(max-width:620px){.thumbcell,.rowthumb{display:none}}

/* ===========================================================================
   The jungle ground.

   The page sits on a photographic layer of rainforest rather than a flat fill.
   Three rules keep it from wrecking legibility:
     1. the foliage is a FIXED layer behind everything, so it never scrolls with
        the text and never becomes a moving distraction;
     2. the reading surface — the content sheet, the header, the footer — paints
        its own near-opaque paper on top of it, so no body copy is ever set over
        a photograph;
     3. the foliage is deepened and darkened rather than faded, so it reads as a
        real canopy in the margins instead of a washed-out ghost.
   =========================================================================== */
/* ==========================================================================
   THE SURFACE
   The page is one continuous sheet of paper, edge to edge. It is not a card
   floating on a photograph: a light rectangle sitting on foliage reads as an
   image pasted onto a texture, which is exactly what it looked like.
   The foliage earns its place at the FOOT of the page instead, where the
   content resolves back into the canopy it came out of.
   ========================================================================== */
:root{
  --jungle:url("/static/img/art/jungle-light.jpg");
  --sheet:var(--bg);
}
html[data-theme="dark"]{ --jungle:url("/static/img/art/jungle-dark.jpg"); }

body{background:var(--bg)}
.topbar{background:rgba(252,251,247,.86);backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent}
html[data-theme="dark"] .topbar{background:rgba(15,21,18,.84)}
.topbar{border-bottom:1px solid var(--rule)}
.page{background:transparent}

/* ---- the hero owns the top of the window and dissolves into the page ---- */
.phero{position:relative;margin:-26px calc(50% - 50vw) 0;overflow:visible;
  background:var(--bg2)}
.phero-img{position:relative;height:min(78vh,720px);overflow:hidden}
.phero-img img{width:100%;height:100%;object-fit:cover;display:block}
/* the seam: the photograph fades into the paper instead of stopping against it */
.phero-img::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:42%;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(252,251,247,0) 0%, rgba(252,251,247,.06) 38%,
    rgba(252,251,247,.55) 76%, var(--bg) 100%)}
html[data-theme="dark"] .phero-img::after{
  background:linear-gradient(to bottom,
    rgba(15,21,18,0) 0%, rgba(15,21,18,.08) 38%,
    rgba(15,21,18,.58) 76%, var(--bg) 100%)}
/* the title sits above the fade, not in it */
.phero-over{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:center;padding:0 20px 12vh;
  background:linear-gradient(to right,
    rgba(18,10,3,.62) 0%, rgba(18,10,3,.30) 46%, rgba(18,10,3,0) 78%)}
.phero-inner{max-width:var(--maxw);margin:0 auto;width:100%}
.phero-over h1{color:#fff;margin:0 0 10px;max-width:17ch;
  font-size:clamp(2.2rem,5.6vw,4.4rem);line-height:1.02;letter-spacing:-.02em;
  text-shadow:0 2px 24px rgba(20,9,2,.55)}
.phero-over h1 .vi{font-size:.42em;font-weight:400;opacity:.92;display:block;
  font-family:var(--sans);margin-top:10px;letter-spacing:0}
.phero-over .lede{color:rgba(255,255,255,.92);max-width:46ch;font-size:1.06rem;
  text-shadow:0 1px 12px rgba(20,9,2,.6);margin:0}
.phero .chips{margin-top:16px}
.phero .chip{border-color:rgba(255,255,255,.4);color:#fff;background:rgba(18,10,3,.34);
  backdrop-filter:blur(4px)}
.phero .chip a{color:#fff}
.phero .chip.on,.phero .chip.jade{background:rgba(46,148,85,.6);border-color:transparent}
.phero .chip.warnc{background:rgba(179,53,44,.66);border-color:transparent;color:#fff}
.phero .favstar{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);color:#fff}
/* entity pages: shorter than the homepage, same treatment */
.phero.compact .phero-img{height:min(56vh,480px)}
.phero.compact .phero-over{justify-content:flex-end;padding-bottom:9vh}
.phero.compact .phero-over h1{font-size:clamp(1.8rem,3.6vw,3rem)}

/* ---- the canopy at the foot of the page ---- */
/* the page resolves back into the canopy it came out of: one image, darkened,
   fading in from the paper above so there is no seam */
.megafooter{position:relative;margin-top:64px;padding-top:96px;color:#E8EFE8;
  background-image:
    linear-gradient(to bottom, var(--bg) 0, rgba(9,16,11,.55) 88px, rgba(9,16,11,.84) 190px),
    var(--jungle);
  background-size:100% 100%, cover;
  background-position:top center, center 30%;
  background-repeat:no-repeat, no-repeat}
.footer{position:relative;color:#E8EFE8;background:rgba(9,16,11,.88)}
.megafooter .mf-col h2{color:rgba(232,239,232,.6)}
.megafooter .mf-col a,.footer .f-col a{color:rgba(232,239,232,.86)}
.megafooter .mf-col a:hover,.footer .f-col a:hover{color:#fff}
.footer .f-col b{color:rgba(232,239,232,.55)}
.footer .f-legal,.footer .f-family{color:rgba(232,239,232,.5);
  border-top-color:rgba(255,255,255,.12)}
.footer .f-legal a,.footer .f-family a{color:rgba(232,239,232,.78)}
.footer .f-sub input{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);
  color:#fff}
.footer .f-langs select,.footer .f-sub select{background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.2);color:#fff}

/* ---- picture credits: present, quiet, out of the way ---- */
.piccredits{margin:26px 0 0;border-top:1px solid var(--rule);padding-top:10px}
.piccredits summary{font-size:.76rem;color:var(--ink3);cursor:pointer;
  letter-spacing:.03em;text-transform:uppercase}
.piccredits ul{margin:8px 0 0;padding-left:18px;font-size:.76rem;color:var(--ink3);
  line-height:1.6}
.piccredits a{color:var(--ink3);text-decoration:underline}

@media (max-width:1099px){
  .phero-img{height:min(66vh,520px)}
  .phero-over{padding-bottom:9vh}
}

/* ==========================================================================
   GOLDEN SUNSET — Vietnam's light. Green stays the structure; gold is what
   falls on it. Used at the edges of things (the horizon line under a hero, the
   rule under a heading, the mark on a card) rather than as a fill, so it reads
   as light rather than as a second brand colour.
   ========================================================================== */

/* no rule under the hero — it dissolves into the page instead */

/* section headings get a short warm rule instead of a cold hairline */
.section > h2:first-child, .prose h2{position:relative}
.section > h2:first-child::after{
  content:"";position:absolute;left:0;bottom:-7px;width:44px;height:2px;
  background:linear-gradient(90deg,var(--ember),var(--sunset));border-radius:2px}
.section > h2:first-child{padding-bottom:9px}

/* the trust strip reads as a horizon band */
.trust{border-top:0;border-bottom:1px solid var(--rule);margin:6px 0 30px;
  padding:0 0 14px;gap:0 30px}
.trust b{color:var(--ink)}

/* card labels pick up the warmth on hover, so a grid of photographs feels lit */
.pcard-tag{background:rgba(30,15,4,.62)}
.pcard:hover .pcard-tag{background:linear-gradient(90deg,var(--ember),var(--sunset));
  color:#1a0d02}
.pcard-over h3{text-shadow:0 1px 4px rgba(24,10,2,.62)}

/* the guided summary is the one warm block of the page */
.guided{border-left:3px solid var(--sunset)}
.guided .eyebrow{color:var(--ember)}
html[data-theme="dark"] .guided .eyebrow{color:var(--sunset)}

/* the wordmark carries the same sun */
.logo span{background:linear-gradient(92deg,var(--green),var(--ember) 62%,var(--sunset));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* gold only where a note is genuinely a highlight, never for warnings */
.note.gold{border-left-color:var(--sunset)}

/* ---- homepage composition ---- */
.herolinks{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.herolinks .tbtn{padding:11px 22px;font-size:.94rem;border-radius:3px}
.tbtn.ghost.light{background:rgba(255,255,255,.13);color:#fff;
  border:1px solid rgba(255,255,255,.42);backdrop-filter:blur(4px)}
.tbtn.ghost.light:hover{background:rgba(255,255,255,.22);color:#fff;border-color:#fff}

.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:14px}
.sechead h2{margin:0;padding-bottom:9px}
.sechead > a{font-size:.86rem;white-space:nowrap}

/* one tile carries the section, the others sit beside it */
.mosaic{display:grid;gap:16px;grid-template-columns:2fr 1fr;margin-bottom:16px}
.mosaic > :first-child{grid-row:span 2}
.mosaic > :first-child .pcard-img{aspect-ratio:16/10;height:100%;min-height:100%}
.mosaic > :first-child .pcard-over h3{font-size:1.5rem}
.mosaic > :first-child .pcard-over p{font-size:.92rem;max-width:46ch}
@media(max-width:760px){
  .mosaic{grid-template-columns:1fr}
  .mosaic > :first-child{grid-row:auto}
  .mosaic > :first-child .pcard-img{aspect-ratio:4/3;height:auto;min-height:0}
}

/* the one number that explains the whole site */
.bigfact{display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:26px 0}
.bigfact-num{font-family:var(--serif);font-size:clamp(2.4rem,6vw,4rem);line-height:1;
  color:var(--ember);white-space:nowrap;letter-spacing:-.02em}
.bigfact h2{margin:0 0 8px;padding:0}
.bigfact h2::after{display:none}
.bigfact p{margin:0 0 10px;color:var(--ink2);max-width:70ch}
@media(max-width:700px){.bigfact{grid-template-columns:1fr;gap:12px}}