:root{
  --bg: #211c18;
  --bg-deep: #17140f;
  --paper: #f4ead9;
  --paper-dim: #ece0cb;
  --ink: #322a21;
  --ink-soft: #5a4d3f;
  --amber: #c8862f;
  --amber-bright: #e0a751;
  --line: #d8c8a8;
  --panel: #2c261f;
  --font-head: 'Anuphan', 'Noto Sans Thai', sans-serif;
  --font-body: 'IBM Plex Sans Thai', 'Noto Sans Thai', sans-serif;
}

*{box-sizing:border-box;}

body{
  margin:0;
  background: radial-gradient(ellipse at 50% -10%, #3a2f22 0%, var(--bg) 45%, var(--bg-deep) 100%);
  color: var(--paper);
  font-family: var(--font-body);
  min-height:100vh;
}

.site-header{
  text-align:center;
  padding: 28px 16px 6px;
}
.site-header h1{
  font-family: var(--font-head);
  font-weight:700;
  font-size: clamp(22px, 4vw, 34px);
  margin: 0 0 4px;
  color: var(--amber-bright);
  letter-spacing:.02em;
}
.demo-tag{
  margin:0;
  font-size:13px;
  color: #b8a98c;
}

.toolbar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  padding: 14px 16px;
}
.toolbar button{
  font-family: var(--font-body);
  font-size:14px;
  background: var(--panel);
  color: var(--paper);
  border: 1px solid var(--line);
  border-radius:8px;
  padding: 9px 16px;
  cursor:pointer;
}
.toolbar button:hover{ background:#3a3226; }
.toolbar button:focus-visible, a:focus-visible, button:focus-visible{
  outline: 3px solid var(--amber-bright);
  outline-offset: 2px;
}
.toolbar .print-btn{
  background: var(--amber);
  color:#241c10;
  border-color: var(--amber);
  font-weight:600;
}
.toolbar .print-btn:hover{ background: var(--amber-bright); }
.page-indicator{
  min-width:90px;
  text-align:center;
  font-variant-numeric: tabular-nums;
  color:#d7c8ab;
}

#bookWrap{
  display:flex;
  justify-content:center;
  padding: 10px 16px 60px;
}

#book{
  /* page-flip's own stylesheet ships a typo (.sft__wrapper) so the inner
     wrapper never gets position:relative, which leaves .stf__block's
     height:100% without a definite ancestor height to resolve against.
     Pinning an explicit box here fixes it without patching their CSS. */
  width: 840px;
  height: 560px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,.5);
}

/* ---- page (shared look, used inside the flipbook) ---- */
.page{
  background: var(--paper);
  color: var(--ink);
  overflow:hidden;
  position:relative;
  display:flex;
  flex-direction:column;
}
.page-inner{
  padding: 26px 28px;
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.page-number{
  position:absolute;
  bottom:10px;
  right:16px;
  font-size:12px;
  color: var(--ink-soft);
}
.page.page-left .page-number{ left:16px; right:auto; }

.page-cover, .page-back{
  background: linear-gradient(160deg, #2a2117 0%, #1c1710 100%);
  color: var(--paper);
  align-items:center;
  justify-content:center;
  text-align:center;
  border: 1px solid #443626;
}
.page-cover .page-inner, .page-back .page-inner{
  align-items:center;
  justify-content:center;
}
.cover-title{
  font-family: var(--font-head);
  font-weight:700;
  font-size: clamp(24px, 3.2vw, 34px);
  color: var(--amber-bright);
  margin: 0 0 10px;
}
.cover-subtitle{
  font-size:15px;
  color:#cbbb9b;
  margin: 0 0 40px;
}
.cover-org{
  font-size:14px;
  color:#a89873;
  margin-top:50px;
}
.back-title{
  font-family: var(--font-head);
  font-weight:600;
  font-size:20px;
  color: var(--amber-bright);
  margin: 0 0 18px;
}
.back-contact{ font-size:14px; line-height:2; color:#e6d9bd; }

.toc-title{
  font-family: var(--font-head);
  font-weight:700;
  font-size:22px;
  margin: 0 0 18px;
  color: var(--ink);
}
.toc-list{
  list-style:none;
  margin:0; padding:0;
  overflow:auto;
}
.toc-list li{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
  font-size:14px;
}
.toc-list button{
  background:none;
  border:none;
  font: inherit;
  color: var(--ink);
  text-align:left;
  cursor:pointer;
  padding:0;
  flex:1;
}
.toc-list button:hover{ color: var(--amber); }
.toc-page-no{ color: var(--ink-soft); }

.loc-hero{
  width:100%;
  aspect-ratio: 4/3;
  border-radius:10px;
  overflow:hidden;
  background: linear-gradient(135deg, #e4d3ad, #cbb488);
  margin-bottom:12px;
  flex-shrink:0;
}
.loc-hero img, .loc-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.loc-thumbs{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:8px;
}
.loc-thumb{
  aspect-ratio:1;
  border-radius:8px;
  overflow:hidden;
  background: linear-gradient(135deg, #e4d3ad, #cbb488);
}
.img-placeholder{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:6px;
  font-size:11px;
  color:#5f4c30;
  background: repeating-linear-gradient(135deg, #e7d6b1, #e7d6b1 10px, #ddc79c 10px, #ddc79c 20px);
}

.loc-name{
  font-family: var(--font-head);
  font-weight:700;
  font-size:22px;
  margin:0 0 4px;
}
.loc-meta{
  font-size:13px;
  color: var(--ink-soft);
  margin:0 0 14px;
}
.loc-desc{ font-size:14px; line-height:1.65; margin:0 0 14px; overflow:auto; }
.loc-block-title{
  font-family: var(--font-head);
  font-weight:600;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color: var(--amber);
  margin: 12px 0 6px;
}
.loc-list{ margin:0 0 4px; padding-left:18px; font-size:13px; line-height:1.5; }
.loc-contact{ font-size:13px; line-height:1.6; margin-top:6px; }
.loc-contact p{ margin: 2px 0 !important; }

/* ---------- mobile / print flowing sections ---------- */
#scrollBook{
  width:100%;
  max-width:640px;
  display:none;
  flex-direction:column;
  gap:22px;
}
.section{
  background: var(--paper);
  color: var(--ink);
  border-radius:12px;
  padding: 26px 22px;
}
.section-cover, .section-back{
  background: linear-gradient(160deg, #2a2117 0%, #1c1710 100%);
  color: var(--paper);
  text-align:center;
}
.section .loc-hero{ aspect-ratio: 16/10; }
.toc-list.mobile a{
  color: var(--ink);
  text-decoration:none;
  flex:1;
}
.toc-list.mobile a:hover{ color: var(--amber); }

/* !important needed: page-flip sets an inline display style on #book */
body.mobile-mode #book, body.mobile-mode .toolbar{ display:none !important; }
body.mobile-mode #scrollBook{ display:flex; }

@media (max-width: 899px){
  #bookWrap{ padding: 6px 14px 40px; }
}

.load-error{
  max-width:560px;
  margin: 0 auto 20px;
  text-align:center;
  color:#f2b8a0;
  padding: 0 16px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media print{
  .no-print, #book, .toolbar{ display:none !important; }
  body{ background:#fff; color:#000; }
  #bookWrap{ padding:0; }
  #scrollBook{ display:flex !important; max-width:none; gap:0; }
  .section{
    border-radius:0;
    page-break-after: always;
    break-after: page;
    min-height: 95vh;
  }
  .section:last-child{ page-break-after: auto; }
  .section-cover, .section-back{ background:#1c1710 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page{ size: A4; margin: 14mm; }
}