@import url("https://fonts.googleapis.com/css2?family=Sarabun:wght@400;500;600&family=Taviraj:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");
/* Skin "ลายรดน้ำ": gold-on-lacquer like a Thai manuscript cabinet (ตู้พระธรรมลายรดน้ำ) and samut khoi pages.
   Ivory reading pages, black-lacquer hero and footer, gold prajam-yam ornaments, cinnabar (ชาด) accents. Loaded after era.css. */
:root{
  --paper:#F6EFDF; --panel:#FFFCF3; --ink:#24190F; --muted:#6E5C45; --line:#DCCBA4; --soft:#EFE4C8;
  --red:#A3312A; --blue:#1F5468; --green:#4C6B37; --sun:#C9A04A; --sun-ink:#7A5714; --violet:#6A3F6E; --teal:#1F6B66; --pink:#9B3F5B; --gold:#B8862B;
  --lacquer:#17110C; --lacquer2:#2A1A12; --goldhi:#E2C27A;
  --sky1:#F6EFDF; --sky2:#F6EFDF; --shadow:0 1px 0 rgba(36,25,15,.08),0 10px 24px -18px rgba(36,25,15,.45); --r:8px;
  --display:"Taviraj","Sarabun",serif; --body:"Sarabun","Anuphan",system-ui,sans-serif;
  --sea:#D7E2DF; --land:#FFFBF0; --neigh:#EEE3C9;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#14100C; --panel:#1F1913; --ink:#F1E6CC; --muted:#BFAE8D; --line:#4A3B26; --soft:#2A2118;
  --red:#E07562; --blue:#86B9CC; --green:#A9C48E; --sun:#D9AE5A; --gold:#D9AE5A; --lacquer:#0C0907; --lacquer2:#1C130D;
  --sky1:#14100C; --sky2:#14100C; --sea:#16201F; --land:#241D15; --neigh:#1B1510}}
:root[data-theme="dark"]{
  --paper:#14100C; --panel:#1F1913; --ink:#F1E6CC; --muted:#BFAE8D; --line:#4A3B26; --soft:#2A2118;
  --red:#E07562; --blue:#86B9CC; --green:#A9C48E; --sun:#D9AE5A; --gold:#D9AE5A; --lacquer:#0C0907; --lacquer2:#1C130D;
  --sky1:#14100C; --sky2:#14100C; --sea:#16201F; --land:#241D15; --neigh:#1B1510}

body{font-family:var(--body);font-size:18px;line-height:1.95;color:var(--ink);
  background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .2 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
h1,h2,h3,.sec h2,.ch h2,.hero h1{font-family:var(--display);font-weight:600;letter-spacing:0;line-height:1.35}
.hero h1{font-weight:700}
h2,.sec h2,.ch h2{color:var(--red)}

/* cards: thin gold frame with an inner hairline, like a gilded panel */
.rail ol,.fact,.stop,.person,.know,details,.pn a,.deep li,.gantt,.tbl,.debate,.visit,.rel,.tm-wrap,.tm-card,.gp,.stampzone,.bubble,.stat,.fc,.ebox,.rcap,.era-card{
  background-color:var(--panel);border:1px solid color-mix(in srgb,var(--gold) 55%,var(--line));border-radius:var(--r);
  box-shadow:inset 0 0 0 3px var(--panel),inset 0 0 0 4px color-mix(in srgb,var(--gold) 28%,transparent),var(--shadow)}
.rel:hover,.person:hover,.era-card:hover,.fc:hover{transform:translateY(-3px);border-color:var(--gold);
  box-shadow:inset 0 0 0 3px var(--panel),inset 0 0 0 4px var(--gold),0 16px 30px -18px rgba(36,25,15,.6)}

/* top bar: black lacquer with gold */
.topnav{background:var(--lacquer);border-bottom:1px solid var(--gold);backdrop-filter:none;color:var(--goldhi)}
.topnav a,.topnav .home{color:var(--goldhi)!important}
.topnav .home{font-family:var(--display);font-size:18px}
.topnav .home::before{background:radial-gradient(circle,var(--goldhi) 0 22%,transparent 23%),conic-gradient(from 45deg,var(--gold) 0 25%,var(--lacquer2) 0 50%,var(--gold) 0 75%,var(--lacquer2) 0);border:1.5px solid var(--goldhi);border-radius:4px;transform:rotate(45deg);box-shadow:none}
.skinbtn{background:transparent;color:var(--goldhi);border-color:color-mix(in srgb,var(--gold) 60%,transparent)}
.passport{background:linear-gradient(180deg,var(--goldhi),var(--gold));color:var(--lacquer)!important;box-shadow:0 2px 0 #6E4E14}
.eras a.on{background:var(--red);border-color:var(--red);color:#FFF6E2}
.progress i{background:linear-gradient(90deg,var(--gold),var(--goldhi),var(--gold));height:3px}

/* hero: lacquer with gold prajam-yam lattice and a triangular border band at the base */
.hero{color:#F3E7C9;border-bottom:0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23C9A04A' stroke-width='1' opacity='.18'%3E%3Cpath d='M28 13c5 6 5 10 0 15c-5-5-5-9 0-15zM43 28c-6 5-10 5-15 0c5-5 9-5 15 0zM28 43c-5-6-5-10 0-15c5 5 5 9 0 15zM13 28c6-5 10-5 15 0c-5 5-9 5-15 0z'/%3E%3Cpath d='M0 0l7 7M56 0l-7 7M0 56l7-7M56 56l-7-7' opacity='.6'/%3E%3C/g%3E%3Ccircle cx='28' cy='28' r='2.4' fill='%23C9A04A' opacity='.25'/%3E%3C/svg%3E") 0 0/56px 56px,
    radial-gradient(900px 420px at 80% 10%,color-mix(in srgb,var(--red) 22%,transparent),transparent 70%),
    linear-gradient(180deg,var(--lacquer),var(--lacquer2))!important}
.hero canvas{display:none}
.hero::after{height:34px;background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='34' viewBox='0 0 36 34'%3E%3Cpath d='M0 34L18 6L36 34Z' fill='%23C9A04A'/%3E%3Cpath d='M8 34L18 18L28 34Z' fill='%2317110C'/%3E%3Ccircle cx='18' cy='12' r='2' fill='%2317110C'/%3E%3C/svg%3E") 0 100%/36px 34px repeat-x,var(--lacquer2)!important;border-top:1px solid var(--gold)}
.hero::before{content:"";position:absolute;inset:14px 14px 48px;border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);outline:1px solid color-mix(in srgb,var(--gold) 25%,transparent);outline-offset:5px;pointer-events:none;z-index:0}
.hero .in{padding:48px 28px 110px}
.hero h1{color:#F7E9C4;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.hero h1 span{background:none;color:var(--goldhi);padding:0;border:0;box-shadow:none}
.hero .lede{color:#F6EDD6;opacity:1;font-size:clamp(17px,2.2vw,20px);line-height:1.9;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.crumbs,.crumbs a{color:var(--goldhi)}
.kicker{background:transparent;color:var(--goldhi);border:1px solid var(--gold);box-shadow:none}
.hero .span{background:var(--red);color:#FFF4DC;transform:none;border-radius:3px;border:1px solid var(--goldhi)}
.hero .fact{color:var(--ink)}
.fact::before{background:var(--gold)!important;height:3px}
.hero-art{background:radial-gradient(circle,var(--lacquer) 0 54%,var(--gold) 54.5% 56%,transparent 56.5%),
  radial-gradient(circle,transparent 0 60%,color-mix(in srgb,var(--gold) 40%,transparent) 60.5% 61.5%,transparent 62%);filter:none;color:var(--goldhi)}
.hero-art .ln{stroke:var(--goldhi)}
.photo{background:transparent;color:var(--goldhi)!important;border:1px solid var(--gold);box-shadow:none}
.hero .photo:hover{background:color-mix(in srgb,var(--gold) 18%,transparent)}

/* section numbers: gold lozenge tag */
.sec .no,.ch-no{background:var(--lacquer)!important;color:var(--goldhi)!important;border:1px solid var(--gold);border-radius:3px;font-family:var(--display);font-weight:400;letter-spacing:.02em}
.sec .no::before,.ch-no::before{content:"◆ ";color:var(--gold)}
.sec + .sec,.ch + .ch{border-top:0;background-image:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold) 80%,transparent),linear-gradient(90deg,transparent,color-mix(in srgb,var(--gold) 45%,transparent) 30%,color-mix(in srgb,var(--gold) 45%,transparent) 70%,transparent);background-size:100% 1px,100% 1px;background-position:0 0,0 5px;background-repeat:no-repeat}
.drop::first-letter,.ch p.drop::first-letter{float:none;font:inherit;font-size:inherit;margin:0;padding:0;background:none;border:0;color:inherit;line-height:inherit}

/* quotes in a classical serif, framed like an inscription */
.pull{background:var(--lacquer);color:#F3E2B8;border:1px solid var(--gold);border-radius:4px;font-family:"Taviraj",serif;font-style:italic;font-weight:400;
  box-shadow:inset 0 0 0 5px var(--lacquer),inset 0 0 0 6px color-mix(in srgb,var(--gold) 55%,transparent)}
.pull::before{color:var(--gold)}

.river::before{background:linear-gradient(180deg,var(--gold),var(--red));width:2px;left:15px}
.stop::before{background:var(--panel);border:2px solid var(--c,var(--gold));border-radius:2px;transform:rotate(45deg)}
.stop .when{font-family:var(--display);font-weight:400;color:var(--red)}

.full{background:var(--red);color:#FFF4DC;border:1px solid var(--goldhi);border-radius:4px;font-family:var(--display);font-weight:400;box-shadow:0 3px 0 #5E1A15}
.know{border-color:var(--gold)}
.know::before{content:"◆";background:var(--lacquer);color:var(--goldhi);border-radius:3px}
.know.flipped::before{content:"✓";background:var(--green);color:#fff}
.know .reveal{background:var(--goldhi);color:var(--lacquer);border-radius:3px}
.person .mono{background:var(--lacquer);border:1px solid var(--gold);color:var(--goldhi);border-radius:50%;font-family:var(--display)}
.person .th-person{border-color:var(--gold);box-shadow:0 0 0 3px var(--panel),0 0 0 4px var(--gold)}
.rel .ico{background:radial-gradient(circle,color-mix(in srgb,var(--gold) 22%,var(--panel)) 0 60%,transparent 61%)}
.rel .rt{background:var(--lacquer);color:var(--goldhi);border-radius:3px}
.debate{border-left:4px solid var(--violet)}
.visit{border-left:4px solid var(--green)}
#sites td a .th-site{border-color:var(--gold)}
.wp-cover img{border:1px solid var(--gold);border-radius:6px;box-shadow:0 0 0 6px var(--panel),0 0 0 7px var(--gold),0 22px 40px -24px rgba(0,0,0,.6)}
.wp-gallery img{border:1px solid var(--gold);border-radius:4px}
.wp-gallery h2{color:var(--red)}

/* footer: lacquer board */
.end{background:linear-gradient(180deg,var(--lacquer2),var(--lacquer))!important;color:#EADCBC!important;border-top:1px solid var(--gold)}
.end::before{display:none}
.end a,.end h2{color:var(--goldhi)!important}
.end p,.end .src{color:#EADCBC!important;opacity:.9}
.era-card .en{border-radius:3px;background:var(--lacquer);color:var(--goldhi)}
.stat b{font-family:var(--display);font-weight:400;color:var(--red)}
.totop{background:var(--lacquer);color:var(--goldhi);border:1px solid var(--gold);box-shadow:none}
a.xl{color:var(--red);text-decoration-color:color-mix(in srgb,var(--gold) 70%,transparent);text-underline-offset:3px}
::selection{background:color-mix(in srgb,var(--gold) 45%,transparent)}
.topnav .passport,.topnav a.passport{color:var(--lacquer)!important}
.hero .kicker{color:var(--goldhi)!important;background:transparent!important;border:1px solid var(--gold)!important;box-shadow:none!important}
.hero .by,.hero .by span{color:#D8C79F!important;opacity:1}
.hero .by a{color:var(--goldhi)!important}

/* readability: dark veil behind hero text so the lattice never crosses the words */
.hero .in{background:radial-gradient(ellipse 85% 75% at 30% 45%,rgba(20,14,10,.92) 0%,rgba(20,14,10,.75) 55%,rgba(20,14,10,0) 85%)}
.hero h1{text-shadow:0 2px 6px rgba(0,0,0,.6)}
.topnav .home,.eras a,.kicker,.hero .span,.sec .no,.ch-no,.stop .when,.full,.stat b{font-family:"Sarabun",system-ui,sans-serif!important;font-weight:600!important}
.hero .span{font-size:15px}