/* Skin "แผนที่สมบัติ": old map paper, red dashed routes, handwritten headings, X marks the spot. Loaded after era.css. */
:root{
  --paper:#FBF5E8; --panel:#FFFDF7; --ink:#3A2A1C; --muted:#7A6450; --line:#E3D3B4; --soft:#F4EAD4;
  --red:#C8412F; --blue:#2C6E8F; --green:#3E7D4C; --sun:#E9B44C; --sun-ink:#B07F1F; --violet:#7A4F8A; --teal:#2C8C86; --pink:#B84D74; --gold:#9A6A1E;
  --sky1:#FBF5E8; --sky2:#FBF5E8; --shadow:0 2px 0 rgba(58,42,28,.12); --r:10px;
  --display:"Itim","Mitr",system-ui,sans-serif;
  --sea:#CFE3E6; --land:#FFFAEE; --neigh:#EFE3C8;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#1E1912; --panel:#29221A; --ink:#F2E6D0; --muted:#BDA98C; --line:#43382A; --soft:#30281E;
  --red:#F07A63; --blue:#7FB8D4; --green:#8FC79A; --sun:#F2C66B; --gold:#F2C66B;
  --sky1:#1E1912; --sky2:#1E1912; --sea:#1B2A2C; --land:#2E261C; --neigh:#241E16}}
:root[data-theme="dark"]{
  --paper:#1E1912; --panel:#29221A; --ink:#F2E6D0; --muted:#BDA98C; --line:#43382A; --soft:#30281E;
  --red:#F07A63; --blue:#7FB8D4; --green:#8FC79A; --sun:#F2C66B; --gold:#F2C66B;
  --sky1:#1E1912; --sky2:#1E1912; --sea:#1B2A2C; --land:#2E261C; --neigh:#241E16}

body{background:radial-gradient(1200px 600px at 10% 0,color-mix(in srgb,var(--sun) 10%,transparent),transparent 70%),var(--paper);font-size:18px;line-height:1.95}
h1,h2,h3,.sec h2,.ch h2,.hero h1{font-weight:400;letter-spacing:.01em}
.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{
  border:2px dashed var(--line);box-shadow:var(--shadow);background-color:var(--panel)}
.person:nth-child(odd),.rel:nth-child(odd),.era-card:nth-child(odd){transform:rotate(-.4deg)}
.person:nth-child(even),.rel:nth-child(even),.era-card:nth-child(even){transform:rotate(.4deg)}
.rel:hover,.person:hover,.era-card:hover,.fc:hover{transform:rotate(0) translateY(-3px)!important;border-color:var(--red);border-style:solid}

.topnav{background:var(--paper);border-bottom:2px dashed var(--line);backdrop-filter:none}
.topnav .home{font-family:var(--display);font-size:18px}
.topnav .home::before{background:conic-gradient(var(--red) 0 25%,var(--panel) 0 50%,var(--red) 0 75%,var(--panel) 0);border:2px solid var(--ink);box-shadow:none}
.passport{background:var(--red);color:#fff!important;box-shadow:0 3px 0 color-mix(in srgb,var(--red) 60%,#000)}
.eras a.on{background:var(--red);border-color:var(--red);color:#fff}
.progress i{background:repeating-linear-gradient(90deg,var(--red) 0 12px,transparent 12px 20px);height:5px}

/* hero: map with compass rose and a dashed route */
.hero{background:
  linear-gradient(color-mix(in srgb,var(--line) 55%,transparent) 1px,transparent 1px) 0 0/40px 40px,
  linear-gradient(90deg,color-mix(in srgb,var(--line) 55%,transparent) 1px,transparent 1px) 0 0/40px 40px,var(--paper)!important;color:var(--ink);border-bottom:2px dashed var(--line)}
.hero::after{display:none}
.hero::before{content:"";position:absolute;left:-40px;right:-40px;bottom:30px;height:120px;z-index:-1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 90 C200 20 320 110 520 60 S860 10 1000 70 S1160 90 1200 40' fill='none' stroke='%23C8412F' stroke-width='3' stroke-dasharray='10 9' stroke-linecap='round'/%3E%3Cpath d='M1150 22 l20 20 m0 -20 l-20 20' stroke='%23C8412F' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.hero .in{padding:40px 24px 120px}
.hero h1 span{background:none;color:var(--red);padding:0;border:0;box-shadow:none}
.hero .span{background:var(--red);color:#fff;transform:rotate(-2deg);border-radius:4px}
.kicker{background:var(--panel);border:2px dashed var(--line);box-shadow:none;color:var(--ink)}
.fact{border-top:2px dashed var(--line)}
.fact::before{content:"✕";font-family:var(--display);color:var(--red);font-size:18px;line-height:1}
.hero-art{background:radial-gradient(circle,var(--panel) 0 55%,var(--ink) 55.5% 57%,transparent 57.5%),
  conic-gradient(from 0deg,transparent 0 45deg,color-mix(in srgb,var(--red) 30%,transparent) 45deg 46deg,transparent 46deg 135deg,color-mix(in srgb,var(--red) 30%,transparent) 135deg 136deg,transparent 136deg);filter:none}
.hero-art .ln{stroke:var(--ink)}
.photo{background:var(--panel);border:2px dashed var(--line);box-shadow:none}

.sec .no,.ch-no{background:none!important;color:var(--red)!important;border:2px solid var(--red);border-radius:4px;transform:rotate(-3deg);font-family:var(--display);font-weight:400}
.sec + .sec,.ch + .ch{border-top:2px dashed var(--line)}
.sec .no::before,.ch-no::before{content:"✕ "}
.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:var(--panel);color:var(--ink);border:2px solid var(--ink);border-radius:4px;transform:rotate(-1deg);font-family:var(--display);font-weight:400;box-shadow:4px 4px 0 color-mix(in srgb,var(--ink) 18%,transparent)}
.pull::before{display:none}

.river::before{background:repeating-linear-gradient(180deg,var(--red) 0 10px,transparent 10px 18px);width:3px;left:14px}
.stop::before{background:var(--panel);border:3px solid var(--c,var(--red))}
.stop .when{font-family:var(--display);font-weight:400}

.full{background:var(--red);box-shadow:0 4px 0 color-mix(in srgb,var(--red) 60%,#000);border-radius:8px;font-family:var(--display);font-weight:400}
.know{border:2px dashed var(--red)}
.know::before{content:"✕";background:var(--red);color:#fff;border-radius:6px}
.know.flipped::before{content:"!";background:var(--green)}
.know .reveal{background:var(--sun);border-radius:6px}
.person .mono{background:var(--panel);border:2px solid var(--ink);color:var(--red);border-radius:6px}
.rel .ico{background:radial-gradient(circle,color-mix(in srgb,var(--sun) 40%,var(--panel)) 0 60%,transparent 61%)}
.rel .rt{background:var(--red);border-radius:4px}
.debate{border-color:var(--violet)}
.visit{border-left:6px solid var(--green)}
.tm-wrap{border-style:solid}
.end{background:var(--ink)!important;color:var(--paper)!important}
.end::before{display:none}
.end a,.end h2{color:var(--sun)!important}
.end p,.end .src{color:var(--paper)!important;opacity:.9}
.era-card .en{border-radius:6px;background:var(--red);color:#fff}
.stat b{font-family:var(--display);font-weight:400;color:var(--red)}
.totop{background:var(--red);color:#fff;box-shadow:0 4px 0 color-mix(in srgb,var(--red) 60%,#000)}