/* "นักสำรวจ" theme: sky above, soil layers below. Scroll = dig deeper. Rounded type, chunky friendly cards. */
:root{
  --paper:#F5F9FF; --panel:#FFFFFF; --ink:#1E2945; --muted:#56627F; --line:#DCE5F3;
  --sun:#FFC93C; --sun-ink:#A86800;
  --gold:#B26D00; --red:#E0532F; --blue:#2E66F0; --green:#159668; --violet:#7A4BDB; --teal:#0C98A6; --pink:#D9488B;
  --sky1:#AEDBFF; --sky2:#E6F4FF;
  --soil1:#F5CF84; --soil2:#E3A562; --soil3:#BE7A44; --soil4:#8A5432;
  --lacquer:#1E2945; --lacquer-ink:#FFFFFF; --lacquer-gold:#FFC93C; --lacquer-soft:#DDE5F7; --lacquer-dim:#A9B5D3;
  --shadow:0 6px 0 rgba(30,41,69,.08), 0 14px 30px -18px rgba(30,41,69,.35);
  --display:"Mitr","Anuphan",system-ui,sans-serif;
  --body:"Anuphan","Sarabun",system-ui,sans-serif;
  --mono:"Mitr","Anuphan",system-ui,sans-serif;
  --r:20px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0E1427; --panel:#18223F; --ink:#EEF2FF; --muted:#A8B3D1; --line:#2A3658;
  --sun:#FFD25C; --sun-ink:#FFD25C;
  --gold:#FFC24A; --red:#FF8565; --blue:#7FA6FF; --green:#4FD3A0; --violet:#B595FF; --teal:#4FD0DC; --pink:#FF8BC0;
  --sky1:#13204A; --sky2:#223268;
  --soil1:#6B4A2A; --soil2:#563A22; --soil3:#432C1A; --soil4:#2E1E12;
  --lacquer:#0A0F20; --lacquer-ink:#FFFFFF; --lacquer-gold:#FFD25C; --lacquer-soft:#C9D3EE; --lacquer-dim:#8E9AC0;
  --shadow:0 6px 0 rgba(0,0,0,.25), 0 14px 30px -18px rgba(0,0,0,.6);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0E1427; --panel:#18223F; --ink:#EEF2FF; --muted:#A8B3D1; --line:#2A3658;
  --sun:#FFD25C; --sun-ink:#FFD25C;
  --gold:#FFC24A; --red:#FF8565; --blue:#7FA6FF; --green:#4FD3A0; --violet:#B595FF; --teal:#4FD0DC; --pink:#FF8BC0;
  --sky1:#13204A; --sky2:#223268;
  --soil1:#6B4A2A; --soil2:#563A22; --soil3:#432C1A; --soil4:#2E1E12;
  --lacquer:#0A0F20; --lacquer-ink:#FFFFFF; --lacquer-gold:#FFD25C; --lacquer-soft:#C9D3EE; --lacquer-dim:#8E9AC0;
  --shadow:0 6px 0 rgba(0,0,0,.25), 0 14px 30px -18px rgba(0,0,0,.6);
  color-scheme:dark}

/* map + group tokens */
:root{--sea:#CFE8FF;--land:#FFFFFF;--neigh:#EEF1F6;--g-pre:#159668;--g-suv:#C98200;--g-dva:#2E66F0;--g-har:#D9488B;--g-svj:#7A4BDB;--g-khm:#E0532F}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--sea:#0F1A38;--land:#22305A;--neigh:#172041;--g-pre:#4FD3A0;--g-suv:#FFC24A;--g-dva:#7FA6FF;--g-har:#FF8BC0;--g-svj:#B595FF;--g-khm:#FF8565}}
:root[data-theme="dark"]{--sea:#0F1A38;--land:#22305A;--neigh:#172041;--g-pre:#4FD3A0;--g-suv:#FFC24A;--g-dva:#7FA6FF;--g-har:#FF8BC0;--g-svj:#B595FF;--g-khm:#FF8565}
.g-pre{--gc:var(--g-pre)} .g-suv{--gc:var(--g-suv)} .g-dva{--gc:var(--g-dva)} .g-har{--gc:var(--g-har)} .g-svj{--gc:var(--g-svj)} .g-khm{--gc:var(--g-khm)}
.k-war{--c:var(--red)} .k-dis{--c:var(--teal)} .k-epi{--c:var(--violet)} .k-pol{--c:var(--blue)} .k-cul{--c:var(--gold)}

*{box-sizing:border-box}
html{scroll-behavior:smooth;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:18.5px;line-height:1.9;padding-inline:16px}
img{max-width:100%}
[hidden]{display:none!important}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;text-wrap:balance;margin:0;line-height:1.35}
p{margin:0}
a{color:var(--blue)}
.yr{font-family:var(--display);font-variant-numeric:tabular-nums}
::selection{background:var(--sun);color:#1E2945}

/* ---------- progress: a little shovel digging across ---------- */
.progress{position:fixed;left:0;right:0;top:0;height:calc(6px + env(safe-area-inset-top,0px));z-index:30;pointer-events:none}
.progress i{position:absolute;left:0;bottom:0;height:6px;width:100%;background:repeating-linear-gradient(90deg,var(--soil2) 0 10px,var(--soil3) 10px 20px);border-radius:0 6px 6px 0;transform-origin:0 50%;transform:scaleX(var(--p,0))}
@supports (animation-timeline: scroll()){
  .progress i{animation:grow linear both;animation-timeline:scroll(root)}
  @keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

/* ---------- top bar ---------- */
.topnav{position:sticky;top:0;z-index:20;margin-inline:-16px;background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:2px solid var(--line);font-size:15px;padding-top:env(safe-area-inset-top,0px)}
.topnav .in{max-width:1120px;margin:0 auto;padding:8px 16px;display:flex;gap:6px 14px;flex-wrap:wrap;align-items:center}
.topnav a{color:var(--ink);text-decoration:none;font-family:var(--display);font-weight:500;padding:4px 10px;border-radius:999px;transition:background .2s}
.topnav a:hover,.topnav a:focus-visible{background:var(--sky2);outline:none}
.topnav .home{font-weight:600;color:var(--ink);display:inline-flex;gap:8px;align-items:center}
.topnav .home::before{content:"";width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff6 0 20%,transparent 21%),var(--sun);box-shadow:0 0 0 3px color-mix(in srgb,var(--sun) 35%,transparent)}
.eras{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.eras a{font-size:13px;min-width:30px;text-align:center;border:2px solid var(--line);padding:0 8px!important}
.eras a.on{background:var(--sun);border-color:var(--sun);color:#1E2945}
.passport{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-size:14px;background:var(--sun);color:#1E2945!important;padding:4px 12px!important;border-radius:999px;box-shadow:0 3px 0 var(--sun-ink)}
.passport b{font-weight:600}
.eras + .passport{margin-left:8px}

/* ---------- hero: sky + soil layers ---------- */
.hero{margin-inline:-16px;position:relative;overflow:hidden;isolation:isolate;color:var(--ink);
  background:linear-gradient(180deg,var(--sky1),var(--sky2) 70%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;z-index:-1;
  background:
   radial-gradient(120% 60px at 20% 0,transparent 58px,var(--soil1) 60px) 0 0/100% 40px no-repeat,
   linear-gradient(var(--soil1),var(--soil1)) 0 30px/100% 26px no-repeat,
   radial-gradient(90% 40px at 70% 0,transparent 38px,var(--soil2) 40px) 0 52px/100% 30px no-repeat,
   linear-gradient(var(--soil2),var(--soil2)) 0 70px/100% 22px no-repeat,
   linear-gradient(var(--soil3),var(--soil3)) 0 92px/100% 16px no-repeat,
   linear-gradient(var(--soil4),var(--soil4)) 0 108px/100% 12px no-repeat}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.hero .in{max-width:1120px;margin:0 auto;padding:44px 24px 150px;display:grid;gap:14px;position:relative}
.crumbs{font-size:14px;color:var(--muted)}
.crumbs a{color:var(--ink);text-decoration:none;font-weight:500}
.crumbs a:hover{text-decoration:underline}
.kicker{justify-self:start;font-family:var(--display);font-size:14px;font-weight:500;letter-spacing:.02em;background:var(--panel);color:var(--ink);padding:4px 14px;border-radius:999px;box-shadow:var(--shadow)}
.hero h1{font-size:clamp(34px,7.2vw,68px);line-height:1.18;max-width:16ch;color:var(--ink)}
.hero .span{justify-self:start;font-family:var(--display);font-size:15px;color:#1E2945;background:var(--sun);padding:2px 12px;border-radius:8px;transform:rotate(-1.2deg)}
.hero .lede{max-width:56ch;font-size:clamp(17px,2.1vw,20px);color:var(--ink);opacity:.86}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-top:8px;max-width:900px}
.fact{background:var(--panel);border-radius:16px;padding:12px 14px;display:grid;gap:2px;min-width:0;box-shadow:var(--shadow);border-top:5px solid var(--fc,var(--blue))}
.fact:nth-child(5n+1){--fc:var(--blue)} .fact:nth-child(5n+2){--fc:var(--green)} .fact:nth-child(5n+3){--fc:var(--sun)} .fact:nth-child(5n+4){--fc:var(--pink)} .fact:nth-child(5n+5){--fc:var(--violet)}
.fact span{font-size:12.5px;color:var(--muted);font-weight:500}
.fact b{font-weight:500;font-size:15.5px;line-height:1.5}
.hero-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.photo{display:inline-flex;gap:6px;align-items:center;font-family:var(--display);font-size:15px;color:var(--ink);text-decoration:none;background:var(--panel);padding:7px 16px;border-radius:999px;box-shadow:var(--shadow);transition:transform .15s}
.photo:hover,.photo:focus-visible{transform:translateY(-2px) rotate(-1deg);outline:none}
.hero-art{position:absolute;right:16px;top:30px;width:min(260px,30vw);height:auto;color:var(--ink);pointer-events:none;
  background:radial-gradient(circle,var(--sun) 0 58%,transparent 59%);border-radius:50%;padding:22px;filter:drop-shadow(0 10px 0 rgba(30,41,69,.08))}
.hero-art .ln{stroke:currentColor;stroke-width:2.4}
.hero-art .faint{opacity:.45}
@media (max-width:760px){.hero-art{width:112px;top:16px;right:8px;padding:12px}.hero h1{max-width:12ch}}
@media (prefers-reduced-motion:no-preference){
  .hero-art{animation:bob 4s ease-in-out infinite}
  @keyframes bob{50%{transform:translateY(-10px) rotate(3deg)}}
  .hero-art .ln{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2s ease-out forwards}
  .hero-art .ln:nth-child(2n){animation-delay:.2s}
  .hero-art .ln:nth-child(3n){animation-delay:.4s}
  @keyframes draw{to{stroke-dashoffset:0}}
  .hero h1{animation:pop-in .7s cubic-bezier(.3,1.5,.5,1) both}
  .hero .lede,.facts{animation:fade-up .7s .15s ease both}
  @keyframes pop-in{from{opacity:0;transform:scale(.9) translateY(14px)}}
  @keyframes fade-up{from{opacity:0;transform:translateY(16px)}}
}

/* ---------- layout + rail ---------- */
.layout{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:210px minmax(0,1fr);gap:44px;padding-block:28px}
@media (max-width:900px){.layout{grid-template-columns:minmax(0,1fr);gap:0}}
.rail{position:sticky;top:calc(64px + env(safe-area-inset-top,0px));align-self:start;font-size:14.5px;line-height:1.45}
.rail .lbl{font-family:var(--display);font-size:13px;color:var(--muted);margin:0 0 8px 4px}
.rail ol{list-style:none;margin:0;padding:8px;display:grid;gap:2px;background:var(--panel);border-radius:var(--r);box-shadow:var(--shadow)}
.rail a{display:block;padding:7px 12px;border-radius:12px;color:var(--muted);text-decoration:none;transition:background .2s,color .2s}
.rail a:hover{background:var(--sky2);color:var(--ink)}
.rail a.on{background:var(--sun);color:#1E2945;font-weight:600}
@media (max-width:900px){
  .rail{top:calc(50px + env(safe-area-inset-top,0px));z-index:10;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);margin-inline:-16px;padding:8px 16px}
  .rail .lbl{display:none}
  .rail ol{display:flex;overflow-x:auto;gap:6px;padding:0;background:none;box-shadow:none;scrollbar-width:none;border-radius:0}
  .rail a{white-space:nowrap;border:2px solid var(--line);border-radius:999px;padding:3px 12px;background:var(--panel)}
  .rail a.on{border-color:var(--sun)}
}

/* ---------- article ---------- */
article{max-width:70ch;min-width:0}
.sec{padding-block:30px 22px;scroll-margin-top:110px;display:grid;gap:18px}
.sec h2{font-size:clamp(25px,4.2vw,34px);display:grid;gap:6px}
.sec .no{justify-self:start;font-family:var(--display);font-size:14px;font-weight:600;color:#fff;background:var(--hc,var(--blue));padding:2px 12px;border-radius:999px}
.sec:nth-of-type(6n+1){--hc:var(--blue)} .sec:nth-of-type(6n+2){--hc:var(--green)} .sec:nth-of-type(6n+3){--hc:var(--red)}
.sec:nth-of-type(6n+4){--hc:var(--violet)} .sec:nth-of-type(6n+5){--hc:var(--teal)} .sec:nth-of-type(6n+6){--hc:var(--pink)}
.sec + .sec{border-top:3px dashed var(--line)}
.drop::first-letter{font-family:var(--display);font-weight:600;float:left;font-size:3em;line-height:1;margin:6px 10px 0 0;padding:4px 12px 8px;background:var(--hc,var(--blue));color:#fff;border-radius:14px}
.pull{position:relative;font-family:var(--display);font-weight:500;font-size:clamp(19px,2.6vw,24px);line-height:1.6;color:var(--ink);background:var(--sun);padding:18px 22px;border-radius:var(--r);margin:4px 0;transform:rotate(-.6deg);box-shadow:var(--shadow)}
.pull::before{content:"";position:absolute;left:28px;bottom:-12px;border:12px solid transparent;border-top-color:var(--sun);border-bottom:0}
.cnote{font-size:15px;color:var(--muted)}
.more{font-size:15px;font-family:var(--display);font-weight:500;text-decoration:none;color:var(--blue);width:max-content;max-width:100%;border-bottom:2px solid currentColor}
.full{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;background:var(--blue);color:#fff!important;text-decoration:none;font-family:var(--display);font-weight:500;font-size:15.5px;border-radius:999px;width:max-content;max-width:100%;box-shadow:0 5px 0 color-mix(in srgb,var(--blue) 60%,#000);transition:transform .12s,box-shadow .12s}
.full:hover,.full:focus-visible{transform:translateY(-2px);outline:none}
.full:active{transform:translateY(3px);box-shadow:0 2px 0 color-mix(in srgb,var(--blue) 60%,#000)}

/* ---------- timeline ---------- */
.tkey{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:14px;color:var(--muted)}
.tkey i{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--c);margin-right:6px;vertical-align:-1px}
.river{position:relative;display:grid;gap:14px;padding-left:34px}
.river::before{content:"";position:absolute;left:12px;top:8px;bottom:8px;width:6px;border-radius:6px;background:repeating-linear-gradient(180deg,var(--soil1) 0 14px,var(--soil2) 14px 28px)}
.stop{position:relative;display:grid;gap:2px;background:var(--panel);border-radius:16px;padding:12px 16px;box-shadow:var(--shadow);transition:transform .2s}
.stop:hover{transform:translateX(4px)}
.stop::before{content:"";position:absolute;left:-29px;top:16px;width:16px;height:16px;border-radius:50%;background:var(--c,var(--sun));border:3px solid var(--paper)}
.stop .when{font-family:var(--display);font-weight:600;font-size:15px;color:var(--c,var(--gold))}
.stop .when small{color:var(--muted);font-size:12.5px;margin-left:8px;font-weight:400}
.stop b{font-weight:600;font-size:17px}
.stop p{font-size:15.5px;color:var(--muted);line-height:1.7}

/* ---------- people / cards ---------- */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.person{background:var(--panel);border-radius:var(--r);padding:18px;display:grid;gap:6px;align-content:start;box-shadow:var(--shadow);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.person:hover{transform:translateY(-5px) rotate(-.8deg)}
.person .mono{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:22px;background:var(--sun);color:#1E2945}
.person h3{font-size:19px}
.person .role{font-size:14px;color:var(--gold);font-weight:500}
.person p{font-size:15.5px;color:var(--muted);line-height:1.7}

/* ---------- know: flip cards ---------- */
.know{position:relative;background:var(--panel);border-radius:var(--r);padding:18px 20px 18px 74px;display:grid;gap:8px;box-shadow:var(--shadow);border:3px solid var(--sun)}
.know::before{content:"?";position:absolute;left:16px;top:16px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:24px;background:var(--sun);color:#1E2945}
.know h3{font-size:18px}
.know p{font-size:16.5px}
.know .reveal{justify-self:start;font:inherit;font-family:var(--display);font-size:15px;font-weight:500;background:var(--sun);color:#1E2945;border:0;border-radius:999px;padding:7px 16px;cursor:pointer;box-shadow:0 4px 0 var(--sun-ink)}
.know .reveal:active{transform:translateY(3px);box-shadow:0 1px 0 var(--sun-ink)}
.know.flipped::before{content:"!";background:var(--green);color:#fff}
@media (prefers-reduced-motion:no-preference){.know.flipped p{animation:flipin .45s ease both}@keyframes flipin{from{opacity:0;transform:rotateX(70deg)}}}

details{background:var(--panel);border-radius:var(--r);box-shadow:var(--shadow)}
summary{cursor:pointer;padding:14px 18px;font-family:var(--display);font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--sky2);color:var(--blue);font-weight:600;transition:transform .25s}
details[open] summary::after{transform:rotate(135deg)}
details .dbody{padding:0 18px 16px;font-size:16.5px;color:var(--muted)}
summary:focus-visible,.rail a:focus-visible,.pn a:focus-visible,.rel:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.links{display:flex;flex-wrap:wrap;gap:10px 18px;font-size:15px}

/* ---------- prev / next ---------- */
.pn{max-width:1120px;margin:28px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.pn{grid-template-columns:1fr}}
.pn a{display:grid;gap:2px;padding:18px 20px;background:var(--panel);border-radius:var(--r);text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:transform .2s}
.pn a:hover{transform:translateY(-3px)}
.pn a span{font-size:13.5px;color:var(--muted)}
.pn a b{font-family:var(--display);font-weight:600;font-size:19px}
.pn .next{text-align:right;background:var(--sky2)}

/* ---------- scroll reveal ---------- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .rv{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 30%}
    @keyframes rise{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}
  }
}

/* ---------- footer: deepest soil ---------- */
.end{margin:48px -16px 0;background:linear-gradient(var(--soil3),var(--soil4));color:#FFF3E2;padding:40px 16px 36px;font-size:14.5px;position:relative}
.end::before{content:"";position:absolute;left:0;right:0;top:-22px;height:24px;background:radial-gradient(30px 22px at 30px 22px,var(--soil3) 98%,transparent) 0 0/60px 24px repeat-x}
.end .in{max-width:1120px;margin:0 auto;display:grid;gap:6px}
.end a{color:#FFE29A}
.totop{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:50px;height:50px;border-radius:50%;border:0;background:var(--sun);color:#1E2945;font-size:20px;font-weight:700;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s,transform .2s;z-index:25;box-shadow:0 5px 0 var(--sun-ink)}
.totop.show{opacity:1;pointer-events:auto}
.totop:hover{transform:translateY(-3px)}

/* ---------- era-1 extras ---------- */
.deep{display:grid;gap:10px;margin-top:6px}
.deep h3{font-size:17px}
.deep ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.deep li{background:var(--panel);border-radius:16px;padding:12px;display:grid;gap:2px;align-content:start;box-shadow:var(--shadow)}
.deep li:nth-child(odd){background:color-mix(in srgb,var(--soil1) 30%,var(--panel))}
.deep li b{font-weight:600;font-size:18px;color:var(--gold)}
.deep li span{font-size:15px;line-height:1.5}
.deep li small{font-size:13px;color:var(--muted)}

.gantt{display:grid;gap:8px;overflow-x:auto;padding:12px;background:var(--panel);border-radius:var(--r);box-shadow:var(--shadow)}
.g-row,.g-axis{display:grid;grid-template-columns:140px minmax(480px,1fr);gap:12px;align-items:center}
@media (max-width:560px){.g-row,.g-axis{grid-template-columns:104px minmax(420px,1fr)}}
.g-lbl{font-size:14px;line-height:1.3;text-align:right;font-weight:500}
.g-track{position:relative;height:24px;background:linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/10% 100%}
.g-axis .g-track{height:34px;background:none;border-bottom:2px solid var(--line)}
.tick{position:absolute;bottom:0;transform:translateX(-50%);display:grid;justify-items:center;gap:2px}
.tick em{font-style:normal;font-size:11.5px;color:var(--muted);white-space:nowrap}
.tick i{width:2px;height:6px;background:var(--muted)}
.tk-mark em{color:var(--red);font-weight:700}
.g-bar{position:absolute;top:3px;bottom:3px;background:var(--c);border-radius:999px;transform-origin:left}
.g-unc{background:repeating-linear-gradient(135deg,var(--c) 0 6px,transparent 6px 11px);border:2px solid var(--c)}
.g-mark{position:absolute;top:-4px;bottom:-4px;width:3px;border-radius:3px;background:var(--red);opacity:.6}
@supports (animation-timeline: view()){@media (prefers-reduced-motion:no-preference){.g-bar{animation:gb linear both;animation-timeline:view();animation-range:entry 10% cover 40%}@keyframes gb{from{transform:scaleX(0)}to{transform:scaleX(1)}}}}

.sfind{font:inherit;font-size:16px;width:100%;max-width:400px;padding:10px 16px;border:2px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink)}
.sfind:focus-visible{outline:none;border-color:var(--sun)}
.reg{font-size:20px;margin-top:6px}
.reg small{font-size:13px;color:var(--muted);font-weight:400}
.tbl{overflow-x:auto;border-radius:var(--r);background:var(--panel);box-shadow:var(--shadow)}
.tbl table{border-collapse:collapse;width:100%;min-width:600px;font-size:15px;line-height:1.55}
.tbl th,.tbl td{text-align:left;padding:10px 14px;border-bottom:2px solid var(--line);vertical-align:top}
.tbl th{font-family:var(--display);font-size:13px;font-weight:500;color:var(--muted);background:var(--sky2)}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .15s}
.tbl tbody tr:hover{background:color-mix(in srgb,var(--sun) 14%,var(--panel))}
.tbl a{font-weight:600;text-decoration:none;color:var(--blue)}
.per{font-size:13px;color:var(--gold);white-space:nowrap;font-weight:500}

.debates{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.debate{position:relative;background:var(--panel);border-radius:var(--r);padding:18px 18px 18px 64px;display:grid;gap:6px;align-content:start;box-shadow:var(--shadow);border:3px dashed var(--violet)}
.debate .q{position:absolute;left:14px;top:16px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:600;color:#fff;background:var(--violet)}
.debate h3{font-size:17.5px}
.debate p{font-size:15.5px;color:var(--muted);line-height:1.7}
.srcs{margin:0;padding-left:22px;font-size:15px;display:grid;gap:4px}

/* ---------- article extras ---------- */
.visit{background:color-mix(in srgb,var(--green) 12%,var(--panel));border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow);border-left:6px solid var(--green)}
.visit p{font-size:17px}
.rels{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.rel{display:grid;gap:4px;align-content:start;padding:16px;background:var(--panel);border-radius:var(--r);text-decoration:none;color:var(--ink);position:relative;box-shadow:var(--shadow);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.rel:hover{transform:translateY(-5px) rotate(-1deg)}
.rel:nth-child(even):hover{transform:translateY(-5px) rotate(1deg)}
@media (prefers-reduced-motion:reduce){.rel,.rel:hover,.person,.person:hover,.stop:hover{transition:none;transform:none}}
.rel .rt{justify-self:start;font-size:12px;font-weight:600;color:#fff;background:var(--teal);padding:1px 10px;border-radius:999px}
.rel b{font-family:var(--display);font-weight:600;font-size:17px;line-height:1.45}
.rel span:last-child{font-size:14.5px;color:var(--muted);line-height:1.6}
.rel .ico{width:58px;height:58px;color:var(--ink);background:radial-gradient(circle,var(--sun) 0 60%,transparent 61%);border-radius:50%;padding:8px;margin-bottom:4px}
.rel .ico .ln{stroke:currentColor;stroke-width:2.6}

/* ---------- map ---------- */
.tmap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-areas:"tools tools" "map card";gap:12px;align-items:start}
@media (max-width:720px){.tmap{grid-template-columns:minmax(0,1fr);grid-template-areas:"tools" "map" "card"}}
.tm-tools{grid-area:tools;display:flex;flex-wrap:wrap;gap:6px}
.tm-chips{display:flex;flex-wrap:wrap;gap:6px}
.chipb{font:inherit;font-family:var(--display);font-size:13.5px;padding:5px 13px;border-radius:999px;border:2px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;display:inline-flex;gap:6px;align-items:center;transition:transform .12s}
.chipb:hover{transform:translateY(-1px)}
.chipb i{width:10px;height:10px;border-radius:50%;background:var(--gc)}
.chipb[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chipb:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.tm-wrap{grid-area:map;position:relative;border-radius:var(--r);background:var(--sea);overflow:hidden;max-height:76vh;aspect-ratio:400/658;box-shadow:var(--shadow)}
.tm-svg{display:block;width:100%;height:100%}
.tm-sea{fill:var(--sea)}
.tm-neigh{fill:var(--neigh);stroke:var(--line);stroke-width:.6}
.tm-prov{fill:var(--land);stroke:var(--line);stroke-width:.4}
.tm-out{fill:none;stroke:var(--ink);stroke-width:1;opacity:.5}
.tm-lab{font-family:var(--display);font-size:11px;fill:var(--muted);text-anchor:middle}
.zoomed .tm-lab{font-size:5px}
.tm-dot{cursor:pointer;outline:none}
.tm-hit{fill:transparent}
.tm-core{fill:var(--gc);stroke:var(--land);stroke-width:1.6}
.tm-dot.off{opacity:.28}
.tm-dot.off .tm-core{fill:var(--muted)}
.tm-dot.on:hover .tm-core,.tm-dot:focus-visible .tm-core,.tm-dot.sel .tm-core{stroke:var(--ink);stroke-width:2.2}
.tm-ring{fill:none;stroke:var(--gc);stroke-width:2.4;opacity:.7}
.zoomed .tm-core{stroke-width:.8} .zoomed .tm-ring{stroke-width:1}
@media (prefers-reduced-motion:no-preference){
  .ready .tm-dot .tm-core{transform-box:fill-box;transform-origin:center;animation:popdot .5s cubic-bezier(.3,1.7,.5,1) both;animation-delay:var(--d)}
  @keyframes popdot{from{transform:scale(0)}}
  .tm-dot.on:hover .tm-core{animation:wob .5s ease}
  @keyframes wob{30%{transform:scale(1.4)}60%{transform:scale(.9)}}
  .tm-ring{transform-origin:center;transform-box:fill-box;animation:pulse 1.6s ease-out infinite}
  @keyframes pulse{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.7);opacity:0}}
}
.tm-tip{position:absolute;transform:translate(-50%,-160%);background:var(--ink);color:var(--paper);font-family:var(--display);font-size:13px;padding:4px 10px;border-radius:999px;white-space:nowrap;pointer-events:none}
.tm-card{grid-area:card;background:var(--panel);border-radius:var(--r);padding:18px;display:grid;gap:8px;align-content:start;min-height:120px;box-shadow:var(--shadow)}
.tm-card b{font-family:var(--display);font-weight:600;font-size:19px;line-height:1.4}
.tm-card p{font-size:15px;color:var(--muted);line-height:1.65}
.tm-g{font-size:13px;font-weight:500;color:var(--gc);display:inline-flex;gap:6px;align-items:center}
.tm-g i{width:10px;height:10px;border-radius:50%;background:var(--gc)}
.tm-pv{font-size:14px}
.tm-here{font-size:13px;color:var(--muted)}

/* ---------- GPS ---------- */
.gp{background:var(--panel);border-radius:var(--r);padding:18px 20px;display:grid;gap:10px;box-shadow:var(--shadow)}
.gp-name{font-family:var(--display);font-weight:600;font-size:18px}
.gp-row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.gp-ll,.tm-ll{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:18px;background:var(--sky2);border-radius:10px;padding:5px 12px;user-select:all;overflow-wrap:anywhere}
.tm-ll{font-size:13px;padding:2px 10px;width:max-content;max-width:100%}
.gp-dms{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:13px;color:var(--muted)}
.gp-nav,.tm-acts{display:flex;flex-wrap:wrap;gap:8px}
.nav{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;font-family:var(--display);font-size:14.5px;text-decoration:none;border-radius:999px;color:#fff!important;transition:transform .12s}
.nav:hover,.nav:focus-visible{transform:translateY(-2px);outline:none}
.nav-g{background:#1E6FD9;box-shadow:0 4px 0 #134c96} .nav-a{background:#3A3A3C;box-shadow:0 4px 0 #1e1e1f} .nav-w{background:#0B8FB8;box-shadow:0 4px 0 #076581}
.navmini{font-size:13px;white-space:nowrap;text-decoration:none}
.conf{display:inline-block;font-family:var(--display);font-size:12.5px;padding:2px 12px;border-radius:999px;color:#fff;margin-right:6px;vertical-align:2px}
.conf-ok{background:var(--green)} .conf-mid{background:var(--gold)} .conf-low{background:var(--red)}
.copy.done{background:var(--green);color:#fff;border-color:var(--green)}

/* ---------- mascot + stamps ---------- */
.buddy{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:end;margin:6px 0 4px}
.buddy svg{width:74px;height:74px}
.bubble{position:relative;background:var(--panel);border-radius:18px 18px 18px 4px;padding:12px 16px;font-size:15.5px;line-height:1.6;box-shadow:var(--shadow)}
.bubble b{font-family:var(--display);font-weight:600}
@media (prefers-reduced-motion:no-preference){.buddy svg{animation:wiggle 3.2s ease-in-out infinite;transform-origin:50% 90%}@keyframes wiggle{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-8deg)}90%{transform:rotate(8deg)}95%{transform:rotate(-4deg)}}}
.stampzone{max-width:1120px;margin:28px auto 0;background:var(--panel);border-radius:var(--r);padding:22px;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;box-shadow:var(--shadow);border:3px dashed var(--line)}
@media (max-width:520px){.stampzone{grid-template-columns:1fr;justify-items:center;text-align:center}}
.stamp{width:110px;height:110px;border-radius:50%;display:grid;place-items:center;border:4px dashed var(--muted);color:var(--muted);opacity:.5;transform:rotate(-10deg);position:relative}
.stamp svg{width:64px;height:64px}
.stamp svg .ln{stroke:currentColor;stroke-width:3}
.stampzone.got{border-color:var(--red)}
.stampzone.got .stamp{border:5px double var(--red);color:var(--red);opacity:1;background:color-mix(in srgb,var(--red) 8%,var(--panel))}
@media (prefers-reduced-motion:no-preference){.stampzone.just .stamp{animation:thump .6s cubic-bezier(.3,1.6,.5,1)}@keyframes thump{0%{transform:scale(2.2) rotate(-30deg);opacity:0}100%{transform:scale(1) rotate(-10deg);opacity:1}}}
.stampzone h3{font-size:20px}
.stampzone p{font-size:15.5px;color:var(--muted)}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:50}
.book{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:10px}
.book a{display:grid;justify-items:center;gap:4px;text-decoration:none;color:var(--muted);font-size:12px;text-align:center;line-height:1.35}
.book .st{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;border:3px dashed var(--line);color:var(--line)}
.book .st svg{width:38px;height:38px} .book .st .ln{stroke:currentColor;stroke-width:3.4}
.book a.got{color:var(--ink)} .book a.got .st{border:4px double var(--red);color:var(--red);transform:rotate(-8deg)}

/* soil wave layers */
.hero::after{height:130px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201200%20130%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2030%20Q100%200%20200%2022%20T400%2020%20T600%2026%20T800%2016%20T1000%2026%20T1200%2018%20V130%20H0Z%22%20fill%3D%22%23F5CF84%22/%3E%3Cpath%20d%3D%22M0%2062%20Q150%2044%20300%2060%20T600%2058%20T900%2064%20T1200%2054%20V130%20H0Z%22%20fill%3D%22%23E3A562%22/%3E%3Cpath%20d%3D%22M0%2092%20Q200%2080%20400%2092%20T800%2090%20T1200%2088%20V130%20H0Z%22%20fill%3D%22%23BE7A44%22/%3E%3Cpath%20d%3D%22M0%20114%20Q300%20106%20600%20114%20T1200%20112%20V130%20H0Z%22%20fill%3D%22%238A5432%22/%3E%3Cg%20fill%3D%22%23FFF3D6%22%20opacity%3D%22.55%22%3E%3Cellipse%20cx%3D%22160%22%20cy%3D%2276%22%20rx%3D%229%22%20ry%3D%225%22/%3E%3Cellipse%20cx%3D%22520%22%20cy%3D%22104%22%20rx%3D%227%22%20ry%3D%224%22/%3E%3Cellipse%20cx%3D%22880%22%20cy%3D%2278%22%20rx%3D%2210%22%20ry%3D%225%22/%3E%3Cellipse%20cx%3D%221080%22%20cy%3D%22104%22%20rx%3D%226%22%20ry%3D%223%22/%3E%3Cellipse%20cx%3D%22350%22%20cy%3D%2244%22%20rx%3D%226%22%20ry%3D%223%22/%3E%3C/g%3E%3C/svg%3E") bottom/100% 100% no-repeat}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201200%20130%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2030%20Q100%200%20200%2022%20T400%2020%20T600%2026%20T800%2016%20T1000%2026%20T1200%2018%20V130%20H0Z%22%20fill%3D%22%236B4A2A%22/%3E%3Cpath%20d%3D%22M0%2062%20Q150%2044%20300%2060%20T600%2058%20T900%2064%20T1200%2054%20V130%20H0Z%22%20fill%3D%22%23563A22%22/%3E%3Cpath%20d%3D%22M0%2092%20Q200%2080%20400%2092%20T800%2090%20T1200%2088%20V130%20H0Z%22%20fill%3D%22%23432C1A%22/%3E%3Cpath%20d%3D%22M0%20114%20Q300%20106%20600%20114%20T1200%20112%20V130%20H0Z%22%20fill%3D%22%232E1E12%22/%3E%3Cg%20fill%3D%22%238A6A48%22%20opacity%3D%22.55%22%3E%3Cellipse%20cx%3D%22160%22%20cy%3D%2276%22%20rx%3D%229%22%20ry%3D%225%22/%3E%3Cellipse%20cx%3D%22520%22%20cy%3D%22104%22%20rx%3D%227%22%20ry%3D%224%22/%3E%3Cellipse%20cx%3D%22880%22%20cy%3D%2278%22%20rx%3D%2210%22%20ry%3D%225%22/%3E%3Cellipse%20cx%3D%221080%22%20cy%3D%22104%22%20rx%3D%226%22%20ry%3D%223%22/%3E%3Cellipse%20cx%3D%22350%22%20cy%3D%2244%22%20rx%3D%226%22%20ry%3D%223%22/%3E%3C/g%3E%3C/svg%3E")}}
:root[data-theme="dark"] .hero::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201200%20130%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2030%20Q100%200%20200%2022%20T400%2020%20T600%2026%20T800%2016%20T1000%2026%20T1200%2018%20V130%20H0Z%22%20fill%3D%22%236B4A2A%22/%3E%3Cpath%20d%3D%22M0%2062%20Q150%2044%20300%2060%20T600%2058%20T900%2064%20T1200%2054%20V130%20H0Z%22%20fill%3D%22%23563A22%22/%3E%3Cpath%20d%3D%22M0%2092%20Q200%2080%20400%2092%20T800%2090%20T1200%2088%20V130%20H0Z%22%20fill%3D%22%23432C1A%22/%3E%3Cpath%20d%3D%22M0%20114%20Q300%20106%20600%20114%20T1200%20112%20V130%20H0Z%22%20fill%3D%22%232E1E12%22/%3E%3Cg%20fill%3D%22%238A6A48%22%20opacity%3D%22.55%22%3E%3Cellipse%20cx%3D%22160%22%20cy%3D%2276%22%20rx%3D%229%22%20ry%3D%225%22/%3E%3Cellipse%20cx%3D%22520%22%20cy%3D%22104%22%20rx%3D%227%22%20ry%3D%224%22/%3E%3Cellipse%20cx%3D%22880%22%20cy%3D%2278%22%20rx%3D%2210%22%20ry%3D%225%22/%3E%3Cellipse%20cx%3D%221080%22%20cy%3D%22104%22%20rx%3D%226%22%20ry%3D%223%22/%3E%3Cellipse%20cx%3D%22350%22%20cy%3D%2244%22%20rx%3D%226%22%20ry%3D%223%22/%3E%3C/g%3E%3C/svg%3E")}
.hero .in{grid-template-columns:minmax(0,1fr)}
.hero .kicker{letter-spacing:0}
.sec{grid-template-columns:minmax(0,1fr)}
@media (max-width:720px){
  .topnav .in{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px;padding:6px 12px}
  .topnav .in::-webkit-scrollbar{display:none}
  .topnav a{white-space:nowrap;flex:none}
  .eras{flex-wrap:nowrap;margin-left:0;flex:none}
  .passport{order:1;margin-left:0}
  .topnav .home{order:0}
}
.sec .no,.rel .rt,.debate .q,.conf,.ch-no,.eras-sec .kicker{color:var(--paper)!important}

/* design switcher (all skins) */
.skinpick{position:relative;flex:none}
.skinbtn{font:inherit;font-family:var(--display);font-size:14px;padding:4px 14px;border-radius:999px;border:2px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer}
.skinbtn::before{content:"";display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:-1px;background:conic-gradient(#FFC400 0 33%,#2F7DF0 0 66%,#F2545B 0)}
.skinmenu{position:absolute;right:0;top:calc(100% + 8px);z-index:40;min-width:230px!important;background:var(--panel);border:2px solid var(--line);border-radius:16px;padding:8px;display:grid;gap:4px;min-width:170px;box-shadow:0 12px 30px -12px rgba(0,0,0,.35)}
.skinmenu button{font:inherit;font-size:15px;text-align:left;display:flex;gap:10px;align-items:center;padding:8px 10px;border:0;border-radius:10px;background:none;color:var(--ink);cursor:pointer}
.skinmenu button:hover,.skinmenu button[aria-pressed="true"]{background:var(--soft,var(--sky2))}
.skinmenu button[aria-pressed="true"]::after{content:"✓";margin-left:auto;color:var(--green)}
.skinmenu i{width:22px;height:22px;border-radius:7px;flex:none}
.sk-app i{background:linear-gradient(135deg,#1FAE6A 50%,#FFC400 50%)}
.sk-map i{background:repeating-linear-gradient(45deg,#FBF5E8 0 4px,#C8412F 4px 6px);border:1px solid #3A2A1C}
.sk-lai i{background:radial-gradient(circle,#E2C27A 0 18%,transparent 19%),conic-gradient(from 45deg,#C9A04A 0 25%,#17110C 0 50%,#C9A04A 0 75%,#17110C 0);border:1px solid #C9A04A}
.sk-auto i{background:conic-gradient(#17110C 0 33%,#C9A04A 0 34%,#EFE6D2 0 66%,#22365A 0 67%,#0F1115 0);border:1px solid #888}
.sk-press i{background:repeating-linear-gradient(0deg,#EFE6D2 0 3px,#1D1A16 3px 4px);border:1px solid #1D1A16}
.sk-now i{background:linear-gradient(135deg,#0F1115 50%,#FF4F2E 50%);border-radius:50%}
.sk-toon i{background:#fff;border:2.5px solid #1B1B1F;box-shadow:2px 2px 0 #1B1B1F}
@media (max-width:720px){.skinmenu{position:fixed;right:12px;top:auto;margin-top:8px}}

/* no drop caps: they split Thai words */
.drop::first-letter,.ch p.drop::first-letter{float:none!important;font:inherit!important;margin:0!important;padding:0!important;background:none!important;border:0!important;color:inherit!important;line-height:inherit!important}
/* reference image links */
.refimg{background:var(--panel);border:2px solid var(--line);border-radius:var(--r);padding:18px;display:grid;gap:12px}
.refbtns{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.refb{display:grid;gap:2px;padding:14px 16px 14px 58px;border-radius:16px;text-decoration:none;color:var(--ink);border:2px solid var(--line);border-bottom-width:4px;position:relative;transition:transform .15s}
.refb:hover,.refb:focus-visible{transform:translateY(-2px);border-color:var(--blue);outline:none}
.refb::before{content:"";position:absolute;left:14px;top:50%;width:32px;height:32px;margin-top:-16px;border-radius:10px;background:var(--rc)}
.refb b{font-family:var(--display);font-weight:600;font-size:16px}
.refb span{font-size:13.5px;color:var(--muted);line-height:1.45}
.rb-c{--rc:linear-gradient(135deg,#990000 0 33%,#339966 33% 66%,#006699 66%)} .rb-w{--rc:#555;} .rb-f{--rc:var(--sun)}
.gp-top{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;justify-content:space-between}
.pin{font-size:14px;font-family:var(--display);color:var(--blue);text-decoration:none;border-bottom:2px solid currentColor}
.nopin{color:var(--muted);border:0;font-family:var(--body);font-size:13px}

/* evidence gallery */
.evs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.ev{margin:0;background:var(--panel);border:2px solid var(--line);border-bottom-width:5px;border-radius:var(--r);overflow:hidden;display:grid;cursor:zoom-in;transition:transform .2s,border-color .2s}
.ev:hover,.ev:focus-visible{transform:translateY(-3px);border-color:var(--blue);outline:none}
.ev-art{position:relative;aspect-ratio:4/3;display:grid;place-items:center;color:var(--ink);
  background:radial-gradient(circle at 50% 55%,color-mix(in srgb,var(--sun) 40%,var(--panel)) 0 38%,transparent 39%),radial-gradient(var(--line) 1.2px,transparent 1.4px) 0 0/14px 14px,var(--soft,var(--paper))}
.ev-art svg{width:62%;height:auto}
.ev-art .ln{stroke:currentColor;stroke-width:2.6}
.ev-art .faint{opacity:.45}
.ev-tag{position:absolute;left:10px;top:10px;font-size:11.5px;font-family:var(--display);background:var(--panel);color:var(--muted);border:1.5px solid var(--line);padding:1px 9px;border-radius:999px}
.ev figcaption{padding:12px 16px 16px;display:grid;gap:5px;align-content:start}
.ev b{font-family:var(--display);font-weight:600;font-size:17px;line-height:1.4}
.ev p{font-size:15px;color:var(--muted);line-height:1.65}
.ev-where{font-size:13.5px;color:var(--ink);background:var(--soft,var(--paper));border-radius:10px;padding:6px 10px;line-height:1.5}
.ev-photo{font-size:14px;font-family:var(--display);color:var(--blue);text-decoration:none;width:max-content;border-bottom:2px solid currentColor;cursor:pointer}
@media (prefers-reduced-motion:no-preference){.ev:hover .ev-art svg{animation:wig .6s ease}@keyframes wig{30%{transform:rotate(-4deg) scale(1.04)}60%{transform:rotate(3deg)}}}
.evbox{border:0;padding:0;border-radius:24px;max-width:min(560px,calc(100vw - 32px));width:100%;background:var(--panel);color:var(--ink);box-shadow:0 30px 80px -20px rgba(0,0,0,.5)}
.evbox::backdrop{background:rgba(10,15,30,.55);backdrop-filter:blur(3px)}
.evbox .ev{cursor:default;border:0;border-radius:0}
.evbox .ev:hover{transform:none}
.evbox .ev-art svg{width:72%}
.evx{position:absolute;right:12px;top:12px;z-index:2;width:38px;height:38px;border-radius:50%;border:2px solid var(--line);background:var(--panel);color:var(--ink);font-size:16px;cursor:pointer}
@media (prefers-reduced-motion:no-preference){.evbox[open]{animation:zoomin .3s cubic-bezier(.3,1.4,.5,1)}@keyframes zoomin{from{transform:scale(.85);opacity:0}}}
.g-mus{--gc:var(--teal)}

/* auto links + backlinks */
a.xl{color:inherit;text-decoration:none;background:linear-gradient(transparent 62%,color-mix(in srgb,var(--sun) 55%,transparent) 62%);border-bottom:2px dotted color-mix(in srgb,var(--blue) 60%,transparent);transition:background .2s}
a.xl:hover,a.xl:focus-visible{background:color-mix(in srgb,var(--sun) 60%,transparent);outline:none}
.chips-bl{display:flex;flex-wrap:wrap;gap:8px}
.blk{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;border:2px solid var(--line);background:var(--panel);color:var(--ink);text-decoration:none;font-size:15px;transition:transform .15s,border-color .15s}
.blk:hover{transform:translateY(-2px);border-color:var(--blue)}
.blk i{font-style:normal;font-size:11.5px;color:#fff;background:var(--bc,var(--blue));padding:1px 9px;border-radius:999px}
.blk.t-place{--bc:var(--green)} .blk.t-person{--bc:var(--pink)} .blk.t-entry{--bc:var(--violet)} .blk.t-topic{--bc:var(--blue)}
.graphlink{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:18px;border-radius:var(--r);border:2px solid var(--line);border-bottom-width:5px;background:var(--panel);text-decoration:none;color:var(--ink)}
.graphlink b{font-family:var(--display);font-size:19px}
.graphlink span{color:var(--muted);font-size:15px}
.graphlink svg{width:90px;height:60px;flex:none}

/* ---------- WordPress cover photo ---------- */
.wp-cover{max-width:1060px;margin:18px auto 28px;padding:0 16px;position:relative;z-index:2}
.wp-cover img{display:block;width:auto;max-width:100%;height:auto;max-height:82vh;object-fit:contain;margin:0 auto;border-radius:18px;border:3px solid var(--ink,#1E2945);box-shadow:6px 6px 0 rgba(0,0,0,.18);background:#eee}
.wp-cover figcaption{font-size:13px;line-height:1.5;opacity:.75;margin-top:8px;text-align:center}
.wp-cover figcaption a{color:inherit;text-decoration:underline}
@media (max-width:760px){.wp-cover{margin:14px auto 20px}.wp-cover img{border-radius:12px;max-height:75vh}}

/* ---------- real-photo gallery from WordPress ---------- */
.wp-gallery{max-width:1060px;margin:0 auto 32px;padding:0 16px}
.wp-gallery h2{font-size:clamp(20px,3vw,26px);margin:0 0 12px}
.wp-gallery .g{columns:3 230px;column-gap:14px}
.wp-gallery figure{margin:0}
.wp-gallery img{display:block;width:100%;height:auto;object-fit:contain;border-radius:12px;border:2px solid var(--ink,#1E2945);background:#eee}
.wp-gallery figcaption{font-size:12px;line-height:1.45;opacity:.75;margin-top:6px}
.wp-gallery figcaption a{color:inherit}

/* ---------- WordPress thumbnails on cards ---------- */
#sites td a .th-site{width:44px;height:44px;object-fit:cover;border-radius:8px;vertical-align:middle;margin-right:8px;border:1.5px solid var(--ink,#1E2945);display:inline-block}
.person .th-person{width:64px;height:64px;object-fit:cover;border-radius:50%;border:2px solid var(--ink,#1E2945);display:block;margin-bottom:6px}
a.rel .th-rel{width:100%;height:auto;aspect-ratio:16/10;object-fit:contain;background:var(--soft,#eee);border-radius:10px;display:block;margin-bottom:8px}
.faq{display:grid;gap:10px}

.wp-gallery figure{break-inside:avoid;margin:0 0 16px}

/* ---------- align content width with the top bar: left edge = logo, right edge = theme button ---------- */
.topnav .in{max-width:1152px!important;padding-left:16px!important;padding-right:16px!important}
.topnav .home{padding-left:0!important}
.hero .in{max-width:1152px!important;padding-left:16px!important;padding-right:16px!important}
.layout,.eras-sec,.pn,.stampzone{max-width:1120px!important}
article,.end .in{max-width:1120px!important}
.wp-cover,.wp-gallery{max-width:1120px!important;padding-left:0!important;padding-right:0!important}
@media (max-width:720px){.topnav .in{padding-left:16px!important;padding-right:16px!important}}