/*
  Plearnprai Library Atmosphere
  Quiet botanical reading space: connect with self, others, nature.
*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;600;700&display=swap");

:root {
  --bg: #f3f7ef;
  --bg-soft: #e9f1e5;
  --paper: #fffef8;
  --ink: #26342b;
  --ink-soft: #5f6f63;
  --thai: #28543f;
  --thai-dark: #183629;
  --gold: #a97935;
  --green: #527d50;
  --teal: #28736d;
  --warm: #b86633;
  --line: #d9e4d3;
  --shadow: 0 1px 0 rgba(255,255,255,.65), 0 12px 38px rgba(43, 82, 55, .09);
  --shadow-hover: 0 6px 18px rgba(38, 52, 43, .08), 0 22px 62px rgba(43, 82, 55, .16);
  --radius: 8px;
  --font-body: "Noto Sans Thai", Tahoma, system-ui, sans-serif;
  --font-heading: "Noto Sans Thai", Tahoma, system-ui, sans-serif;
}

html,
body {
  font-family: var(--font-body) !important;
  font-weight: 400;
  letter-spacing: 0;
}

body {
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 18% 8%, rgba(205, 226, 185, .68) 0 12%, transparent 31%),
    radial-gradient(circle at 88% 4%, rgba(155, 203, 190, .48) 0 10%, transparent 30%),
    radial-gradient(circle at 82% 92%, rgba(230, 209, 160, .38) 0 12%, transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.74), rgba(240,247,236,.92));
  color: var(--ink);
  line-height: 1.78;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font-family: var(--font-body) !important;
}

p,
li,
td,
.description,
.lead {
  font-weight: 400;
}

h1,
h2,
h3,
h4,
aside.toc h1,
.book h3,
.cover h1,
header.hero h1 {
  font-family: var(--font-heading) !important;
  font-weight: 700;
  letter-spacing: 0;
}

.topbar,
aside.toc,
aside.toc a,
.muted,
.sub,
.en-title {
  font-weight: 400;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(120deg, transparent 0 47%, rgba(82,125,80,.055) 47% 48%, transparent 48% 100%),
    linear-gradient(60deg, transparent 0 48%, rgba(40,115,109,.045) 48% 49%, transparent 49% 100%);
  background-size: 92px 92px, 132px 132px;
  opacity: .7;
}

::selection {
  background: rgba(168, 121, 53, .28);
}

header.hero,
.cover {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(24,54,41,.95) 0%, rgba(40,115,109,.84) 62%, rgba(82,125,80,.86) 100%) !important;
  color: #fff;
}

header.hero::before,
.cover::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.14), transparent 22%),
    radial-gradient(circle at 80% 12%, rgba(218, 235, 199, .16), transparent 26%),
    linear-gradient(120deg, transparent 0 48%, rgba(255,255,255,.075) 48% 49%, transparent 49% 100%);
  background-size: auto, auto, 86px 86px;
}

header.hero > *,
.cover > * {
  position: relative;
  z-index: 1;
}

header.hero h1,
.cover h1,
.cover .subtitle {
  color: #fff !important;
}

.cover h1 span,
.cover h2,
.cover h3 {
  color: rgba(255,255,255,.92) !important;
}

header.hero .tagline,
header.hero .mission,
.cover .subtitle {
  color: rgba(255,255,255,.9) !important;
}

header.hero .badge,
.cover .ribbon {
  background: rgba(255,255,255,.16) !important;
  border: 1px solid rgba(255,255,255,.28);
  color: #fff !important;
}

.cover .pill {
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(255,255,255,.55) !important;
  color: var(--thai) !important;
}

aside.toc {
  background:
    linear-gradient(180deg, rgba(255,254,248,.96), rgba(232,241,226,.96)),
    radial-gradient(circle at 10% 0%, rgba(168,121,53,.16), transparent 28%) !important;
  border-right-color: var(--line) !important;
}

aside.toc h1,
h1.book,
h1.part,
h2.chapter,
h2.sen-title,
h3.sub,
section.collection h2 {
  color: var(--thai) !important;
}

.topbar,
.discovery {
  background: rgba(250, 253, 247, .9) !important;
  backdrop-filter: blur(12px);
}

.book,
.principle,
.sen-banner,
.tri > div,
.quad > div,
.sen-info,
.taste-banner,
.recipe,
.wheel .seg,
table,
.heart,
.lens,
.converge,
.diverge,
.warn,
.case,
.note,
.empty-state {
  background-color: var(--paper);
  border-color: var(--line);
  box-shadow: var(--shadow);
}

.book,
.principle,
.sen-banner,
.tri > div,
.quad > div,
.sen-info,
.taste-banner,
.recipe,
.wheel .seg {
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.book:hover {
  border-color: rgba(168, 121, 53, .58);
  box-shadow: var(--shadow-hover);
}

.spirit {
  background:
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(244,249,240,.96)),
    radial-gradient(circle at 12% 0%, rgba(168,121,53,.12), transparent 30%) !important;
}

.spirit-kicker,
.book .number {
  color: var(--gold) !important;
}

.reading-note,
.converge {
  background: #edf6eb !important;
}

.heart {
  background: linear-gradient(180deg, #fff9e8, #f4f0d8) !important;
}

.lens.ttm,
.lens.ayu,
.lens.tcm,
.lens.clin,
.lens.modal,
.lens.self {
  background: linear-gradient(180deg, rgba(255,254,248,.96), rgba(239,247,234,.94)) !important;
}

.warn,
.diverge {
  background: #fbefeb !important;
}

.note {
  background: #edf3f5 !important;
}

footer {
  background:
    linear-gradient(180deg, rgba(238,246,232,.95), rgba(225,238,219,.95)) !important;
}

@media (max-width: 760px) {
  body {
    background-image:
      radial-gradient(circle at 8% 4%, rgba(205, 226, 185, .55) 0 10%, transparent 28%),
      linear-gradient(180deg, rgba(255,255,255,.8), rgba(240,247,236,.96));
  }

  header.hero,
  .cover {
    background:
      linear-gradient(145deg, rgba(24,54,41,.98) 0%, rgba(40,115,109,.9) 100%) !important;
  }
}

@media (max-width: 900px) {
  aside.toc {
    max-height: 230px;
    overflow-y: auto;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    padding: 14px 16px !important;
  }

  aside.toc h1 {
    font-size: 14px !important;
    margin-bottom: 2px !important;
  }

  aside.toc .sub {
    margin-bottom: 8px !important;
  }

  aside.toc nav {
    margin-top: 8px !important;
  }

  main {
    padding-top: 18px !important;
    max-width: 100% !important;
    overflow-x: hidden;
  }

  .topbar {
    margin: -18px -20px 16px !important;
    padding: 8px 16px !important;
    gap: 10px;
    flex-wrap: wrap;
  }

  .cover {
    padding: 34px 16px 28px !important;
    max-width: 100%;
  }

  .cover h1 {
    font-size: 26px !important;
    overflow-wrap: anywhere;
  }

  .cover h1 span {
    display: block !important;
    font-size: 17px !important;
    max-width: 300px;
    margin-left: auto !important;
    margin-right: auto !important;
    line-height: 1.45;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
  }

  .cover .subtitle {
    max-width: 310px;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-wrap: anywhere;
  }

  .cover .stripe {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 7px !important;
    justify-items: center;
  }

  .cover .pill {
    max-width: 310px;
    white-space: normal;
  }
}