@import url("https://fonts.googleapis.com/css2?family=Trirong:ital,wght@0,400;0,600;0,700;1,400&family=Sarabun:wght@400;500;600&display=swap");
/* Skin "สยามพิมพ์เก่า" (middle period: Thonburi, early Rattanakosin, the reform era, 2475):
   letterpress newspaper of old Siam. Sepia newsprint, black ink, indigo (คราม) and vermilion,
   double rules like a masthead, halftone dots, serif headlines. Loaded after era.css. */
:root{
  --paper:#EFE6D2; --panel:#F8F2E3; --ink:#1D1A16; --muted:#5E5446; --line:#C9BBA0; --soft:#E6DBC3;
  --red:#9E2B25; --blue:#22365A; --green:#3F5B3A; --sun:#C99A2E; --sun-ink:#6B4F12; --violet:#5B3D63; --teal:#2B5E5C; --pink:#8E3A52; --gold:#9C7A2A;
  --sky1:#EFE6D2; --sky2:#EFE6D2; --shadow:3px 3px 0 rgba(29,26,22,.85); --r:2px;
  --display:"Trirong","Taviraj",serif; --body:"Sarabun","Anuphan",system-ui,sans-serif;
  --sea:#D5DDDC; --land:#F6EFDD; --neigh:#E2D7BF;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#1A1815; --panel:#24211C; --ink:#EDE3CF; --muted:#B9AC95; --line:#4A4337; --soft:#2C2822;
  --red:#E06A5E; --blue:#9DB3D9; --green:#9BBE93; --sun:#E3B85A; --gold:#E3B85A;
  --sky1:#1A1815; --sky2:#1A1815; --sea:#1C2324; --land:#26221C; --neigh:#1F1C17; --shadow:3px 3px 0 rgba(0,0,0,.6)}}
:root[data-theme="dark"]{
  --paper:#1A1815; --panel:#24211C; --ink:#EDE3CF; --muted:#B9AC95; --line:#4A4337; --soft:#2C2822;
  --red:#E06A5E; --blue:#9DB3D9; --green:#9BBE93; --sun:#E3B85A; --gold:#E3B85A;
  --sky1:#1A1815; --sky2:#1A1815; --sea:#1C2324; --land:#26221C; --neigh:#1F1C17; --shadow:3px 3px 0 rgba(0,0,0,.6)}

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='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .24 0 0 0 0 .15 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
h1,h2,h3,.sec h2,.ch h2,.hero h1{font-family:var(--display);font-weight:700;letter-spacing:0}
h2,.sec h2,.ch h2{color:var(--ink)}

/* boxes: ruled like printed panels, hard offset shadow like a stamped block */
.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:1.5px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow)}
.rel:hover,.person:hover,.era-card:hover,.fc:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}

/* masthead nav */
.topnav{background:var(--paper);color:var(--ink);backdrop-filter:none;border-bottom:0;box-shadow:0 3px 0 var(--paper),0 4px 0 var(--ink),0 7px 0 var(--paper),0 8px 0 var(--ink)}
.topnav .home{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.02em}
.topnav .home::before{background:var(--ink);border-radius:50%;box-shadow:inset 0 0 0 3px var(--paper),inset 0 0 0 5px var(--red)}
.skinbtn{background:var(--panel);border:1.5px solid var(--ink);border-radius:2px}
.passport{background:var(--red);color:#FBF3E2!important;border-radius:2px;box-shadow:2px 2px 0 var(--ink)}
.eras a.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.progress i{background:var(--red);height:3px}

/* hero: front page with halftone, column rules and a masthead frame */
.hero{color:var(--ink);border-bottom:0;
  background:
    radial-gradient(circle,rgba(29,26,22,.16) 1px,transparent 1.3px) 0 0/7px 7px,
    linear-gradient(180deg,var(--paper),color-mix(in srgb,var(--paper) 88%,var(--sun)))!important}
.hero canvas{display:none}
.hero::before{content:"";position:absolute;inset:18px 18px 60px;border-top:4px double var(--ink);border-bottom:4px double var(--ink);pointer-events:none;z-index:0}
.hero::after{height:56px;background:var(--paper)!important;border-top:1.5px solid var(--ink)}
.hero .in{padding:52px 28px 120px}
.hero h1{color:var(--ink);font-weight:700;line-height:1.2}
.hero h1 span{background:none;color:var(--red);padding:0;border:0;box-shadow:none}
.hero .lede{color:var(--ink);opacity:.92;font-family:"Trirong",serif;font-style:italic;column-gap:32px}
.crumbs,.crumbs a{color:var(--ink)}
.kicker{background:var(--ink)!important;color:var(--paper)!important;border-radius:0!important;box-shadow:none!important;letter-spacing:.08em}
.hero .span{background:transparent;color:var(--red);transform:none;border:1.5px solid var(--red);border-radius:0;font-family:var(--display);font-weight:600}
.fact::before{background:var(--blue)!important;height:3px}
.hero-art{background:radial-gradient(circle,var(--panel) 0 56%,var(--ink) 56.5% 58%,transparent 58.5%);filter:grayscale(1) contrast(1.1);color:var(--ink)}
.hero-art .ln{stroke:var(--ink)}
.photo{background:var(--panel);border:1.5px solid var(--ink);border-radius:0;box-shadow:2px 2px 0 var(--ink)}
.hero .by,.hero .by span{color:var(--muted)}

/* section heads like newspaper section labels */
.sec .no,.ch-no{background:var(--blue)!important;color:#F8F2E3!important;border:0;border-radius:0;font-family:var(--display);font-weight:600;letter-spacing:.06em}
.sec + .sec,.ch + .ch{border-top:4px double var(--ink)}
.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}

.pull{background:transparent;color:var(--ink);border:0;border-top:3px solid var(--ink);border-bottom:1px solid var(--ink);border-radius:0;font-family:"Trirong",serif;font-style:italic;font-weight:400;box-shadow:none;padding:18px 6px}
.pull::before{color:var(--red)}
.river::before{background:var(--ink);width:2px;left:15px}
.stop::before{background:var(--paper);border:2px solid var(--ink);border-radius:0}
.stop .when{font-family:var(--display);font-weight:700;color:var(--red)}
.full{background:var(--ink);color:var(--paper);border-radius:0;font-family:var(--display);font-weight:600;box-shadow:3px 3px 0 var(--red)}
.know{border-color:var(--ink)}
.know::before{content:"ข่าว";font-size:12px;background:var(--red);color:#fff;border-radius:0}
.know.flipped::before{content:"✓";background:var(--green)}
.know .reveal{background:var(--ink);color:var(--paper);border-radius:0}
.person .mono{background:var(--paper);border:1.5px solid var(--ink);color:var(--ink);border-radius:0;font-family:var(--display)}
.person .th-person{filter:sepia(.5) contrast(1.05);border-radius:0;border-color:var(--ink)}
.rel .ico{background:radial-gradient(circle,rgba(29,26,22,.12) 1px,transparent 1.3px) 0 0/6px 6px}
.rel .rt{background:var(--ink);color:var(--paper);border-radius:0}
.rel .th-rel{filter:sepia(.45) contrast(1.05);border-radius:0}
.debate{border-left:5px solid var(--blue)}
.visit{border-left:5px solid var(--green)}
#sites td a .th-site{border-radius:0;border-color:var(--ink);filter:sepia(.4)}
.wp-cover img{border:1.5px solid var(--ink);border-radius:0;box-shadow:6px 6px 0 var(--ink);filter:sepia(.3) contrast(1.05)}
.wp-gallery img{border:1.5px solid var(--ink);border-radius:0;filter:sepia(.3)}
.wp-cover figcaption,.wp-gallery figcaption{font-family:"Trirong",serif;font-style:italic}

.end{background:var(--ink)!important;color:var(--paper)!important;border-top:4px double var(--paper)}
.end::before{display:none}
.end a,.end h2{color:#F2D38B!important}
.end p,.end .src{color:var(--paper)!important;opacity:.9}
.era-card .en{border-radius:0;background:var(--ink);color:var(--paper)}
.stat b{font-family:var(--display);font-weight:700;color:var(--red)}
.totop{background:var(--ink);color:var(--paper);border-radius:0;box-shadow:3px 3px 0 var(--red)}
a.xl{color:var(--blue);text-decoration-thickness:1px;text-underline-offset:3px}
::selection{background:color-mix(in srgb,var(--sun) 50%,transparent)}