/* Reading pages: the World Tree's forest panels, aged gold, and painted leaf corners. */
body.sub { margin: 0; background: #102c24; color: #f3edda; font-family: "IBM Plex Sans Thai", sans-serif; font-size: 16px; line-height: 1.8; }
.sub { --reading-gold: #d8bd78; --reading-muted: #c6d2bc; }
.sub *, .sub *::before, .sub *::after { box-sizing: border-box; }
.sub [hidden] { display: none !important; }
.sub h1, .sub h2, .sub h3, .sub .row-text b, .sub .article-nav b { font-family: "Trirong", serif; color: #ead59e; font-weight: 500; line-height: 1.55; text-wrap: pretty; margin-top: 0; overflow-wrap: anywhere; }
.sub a { color: inherit; text-decoration: none; }
.sub button, .sub input { font: inherit; }
.sub button { cursor: pointer; }
.sub a:focus-visible, .sub button:focus-visible, .sub input:focus-visible { outline: 3px solid #f4d990; outline-offset: 5px; }
.sub ::selection { color: #102c24; background: #e6ce8b; }
.sub .wrap { width: min(1200px, calc(100% - 80px)); margin-inline: auto; }
.sub .ico { display: inline-block; flex: 0 0 auto; width: 20px; height: 20px; vertical-align: middle; }
.sub-skip { position: fixed; top: 8px; left: 16px; z-index: 100; padding: 10px 20px; background: #ead59e; color: #102c24 !important; transform: translateY(-200%); }
.sub-skip:focus { transform: none; }
.sub-nav { position: relative; z-index: 20; background: #0b211b; }
.sub-nav-inner { width: min(1440px, calc(100% - 80px)); min-height: 88px; margin: auto; display: flex; gap: 36px; align-items: center; justify-content: space-between; }
.sub-wordmark { color: #e1c782 !important; font: 600 34px/1.2 "Trirong", serif; letter-spacing: -.04em; }
.sub-nav-links { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); font-size: 15px; }
.sub-nav-links a { color: #d5d9c7; white-space: nowrap; padding-block: 8px; }
.sub-nav-links a:hover, .sub-nav-links a[aria-current] { color: #f1d58d; }
.sub-nav-links a[aria-current] { text-decoration: underline; text-underline-offset: 9px; text-decoration-color: #a88c4b; }
.sub-nav-links .sub-beta-link { padding: 9px 20px; color: #152d20; background: #d8bd78; font-weight: 600; }
.sub-nav-links .sub-beta-link:hover { color: #152d20; background: #f0d590; }
.sub-menu { display: none; width: 44px; height: 44px; border: 0; background: transparent; color: #e5cc89; padding: 10px; }
.sub-menu span { display: block; height: 2px; margin: 5px 0; background: currentColor; }
.page-head { isolation: isolate; position: relative; overflow: hidden; padding: 78px 0 58px; background: #173b2e; }
.page-head::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--art) center 47% / cover no-repeat; }
.page-head::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 32, 24, .98), rgba(10, 32, 24, .83) 48%, rgba(10, 32, 24, .23)); }
.page-head h1 { font-size: clamp(38px, 4.8vw, 64px); margin-bottom: 15px; }
.page-head p { margin: 0; max-width: 54ch; color: #e3e7d1; font-size: 17px; }
.board-wrap { padding: 42px 0 90px; }
.board-tools { display: flex; gap: 24px; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 28px; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tabs button { display: flex; align-items: center; gap: 8px; border: 0; padding: 10px 14px; min-height: 44px; color: #d6dcc9; background: #1a3d31; transition: background .2s, color .2s; }
.tabs button span { font-size: 12px; font-variant-numeric: tabular-nums; opacity: .8; }
.tabs button:hover { background: #2b5040; color: #fff5d6; }
.tabs button[aria-selected="true"] { background: #d8bd78; color: #112d22; }
.search { display: flex; gap: 10px; align-items: center; height: 46px; padding: 0 14px; background: #0b221b; min-width: 260px; color: #d8bd78; border: 1px solid #6f7651; }
.search:focus-within { border-color: #f0d590; }
.search input { min-width: 0; width: 100%; color: #f3edda; background: none; border: 0; outline: none; }
.search input::placeholder { color: #bacbb4; opacity: 1; }
.board-summary { margin: -10px 0 18px; color: #b9ccb7; font-size: 14px; }
.board { position: relative; margin: 0; padding: 16px 24px; list-style: none; background: #15382c; border: 1px solid #8b7949; }
.board::before, .board::after { content: ""; pointer-events: none; position: absolute; width: 100px; height: 100px; background-size: contain; background-repeat: no-repeat; z-index: 1; }
.board::before { left: -13px; top: -15px; background-image: url("media/ui/frame-corner-tl@2x.webp"); }
.board::after { right: -13px; bottom: -15px; background-image: url("media/ui/frame-corner-br@2x.webp"); }
.row { padding: 0; }
.row + .row { border-top: 1px solid #355041; }
.row a { display: grid; grid-template-columns: 150px minmax(0, 1fr) 160px; gap: 28px; align-items: center; padding: 28px 12px; transition: background .2s; }
.row a:hover { background: #214333; }
.row a:hover .row-text b { color: #fff0b7; }
.row-meta { display: flex; align-items: flex-start; flex-direction: column; gap: 8px; }
.row-meta time { color: #c6d2bc; font-size: 14px; font-variant-numeric: tabular-nums; }
.row-text b { display: block; font-size: 21px; margin: 0 0 7px; line-height: 1.6; }
.row-text > span { color: #c6d2bc; font-size: 15px; line-height: 1.75; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.row img { display: block; width: 160px; aspect-ratio: 16/10; object-fit: cover; }
.row.pinned { background: #1a3b2c; }
.pin { display: inline-flex; align-items: center; gap: 5px; color: #e9cf8a; font-size: 13px; }
.pin .ico { width: 15px; height: 15px; }
.chip { display: inline-flex; align-items: center; padding: 2px 8px; font-size: 12px; font-weight: 600; line-height: 1.7; background: #2c4938; }
.c-notice { color: #f1d892; background: #4d452a; }
.c-update { color: #d0e4af; background: #324b32; }
.c-event { color: #f1d3bc; background: #594637; }
.c-maintenance { color: #ebddc3; background: #4b4d3c; }
.board-empty { margin: 0; padding: 60px 24px; background: #15382c; color: #cfdbc5; text-align: center; }
.pager { display: flex; justify-content: center; gap: 8px; margin-top: 30px; }
.pager button { width: 44px; height: 44px; border: 0; color: #e1dcbf; background: #234434; font-variant-numeric: tabular-nums; }
.pager button:hover { background: #365b45; }
.pager button[aria-current] { color: #112d22; background: #d8bd78; font-weight: 600; }
.article-wrap { padding: 48px 0 90px; }
.article { max-width: 820px; margin-inline: auto; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 0 0 28px; color: #c6d2bc; font-size: 15px; }
.crumbs a { display: inline-flex; align-items: center; gap: 6px; }
.crumbs a:hover { color: #f1d892; }
.crumbs .sep { width: 13px; color: #9bb39a; }
.article h1 { font-size: clamp(30px, 3vw, 44px); margin: 0; }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 18px 0 30px; color: #c6d2bc; font-size: 14px; }
.cover { margin: 0 0 36px; }
.cover img, .prose figure img, .prose figure video { display: block; width: 100%; height: auto; }
.prose { font-size: 18px; line-height: 1.95; color: #e1e5cf; }
.prose p, .prose ul { max-width: 72ch; }
.prose p { margin: 0 0 1.4em; }
.prose h2 { font-size: 27px; margin: 2em 0 .6em; }
.prose ul { margin: 0 0 1.5em; padding-left: 1.3em; }
.prose li { margin-block: .3em; }
.prose li::marker { color: #d8bd78; }
.prose figure { margin: 0 0 1.6em; }
.article-nav { max-width: 820px; margin: 50px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.article-nav a { display: block; padding: 20px 24px; color: #ead59e; background: #1b4031; transition: background .2s; }
.article-nav a:hover { background: #2a4e3b; }
.article-nav .next { text-align: right; }
.article-nav small { display: block; margin-bottom: 8px; color: #c6d2bc; font-size: 14px; }
.article-nav b { display: block; font-size: 17px; }
.lead { color: #d3dec5; font-size: 18px; }
.patch-wrap { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 54px; align-items: start; padding: 48px 0 90px; }
.patch-index { position: sticky; top: 32px; min-width: 0; }
.patch-index h2 { font-size: 21px; margin: 0 0 18px; }
.patch-index ol { list-style: none; padding: 0; margin: 0; }
.patch-index a { display: block; padding: 12px 16px; margin-bottom: 5px; color: #c7d3bc; }
.patch-index a b, .patch-index a small { display: block; }
.patch-index a b { font-variant-numeric: tabular-nums; font-weight: 500; }
.patch-index a small { font-size: 13px; }
.patch-index a:hover, .patch-index a.on { color: #f1d892; background: #244434; }
.patch-list { min-width: 0; }
.build { position: relative; margin-bottom: 40px; padding: 36px 42px; background: #173b2e; border: 1px solid #7f744a; scroll-margin-top: 24px; }
.build::before { content: ""; position: absolute; width: 88px; height: 88px; top: -13px; left: -14px; background: url("media/ui/frame-corner-tl@2x.webp") center / contain no-repeat; pointer-events: none; }
.build:last-child { margin-bottom: 0; }
.build header { margin-bottom: 30px; }
.build h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: clamp(24px, 2.1vw, 32px); margin: 0 0 12px; font-variant-numeric: tabular-nums; }
.latest { padding: 3px 10px; color: #132e22; background: #c3ce8c; font: 600 12px/1.6 "IBM Plex Sans Thai", sans-serif; }
.build header p { margin: 0; color: #c9d5be; line-height: 1.8; }
.group { margin-top: 25px; }
.group h3 { font-size: 21px; margin: 0 0 8px; color: #e9d393; }
.group ul { list-style: disc; padding-left: 20px; margin: 0; }
.group li { padding: 5px 0 5px 3px; color: #e0e5ce; line-height: 1.85; }
.group li::marker { color: #b3bd7c; }
.sub-footer { padding: 56px 0; background: #0b211b; }
.sub-footer-inner { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 50px; width: min(1200px, calc(100% - 80px)); margin: auto; align-items: start; }
.sub-footer p { margin: 16px 0 0; color: #c0ceb5; font-size: 14px; line-height: 1.9; }
.sub-footer nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; font-size: 14px; }
.sub-footer a:hover { color: #f1d892; }
.sub-footer .sub-footer-note { margin-top: 0; text-align: right; }
@media (max-width: 1080px) {
  .sub-nav-inner { min-height: 78px; }
  .sub-menu { display: block; }
  .sub-nav-links { display: none; position: absolute; top: 78px; inset-inline: 0; padding: 22px 40px 28px; background: #0b211b; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
  .sub-nav-links.open { display: grid; }
  .sub-nav-links a { padding: 9px 0; }
  .sub-nav-links .sub-beta-link { text-align: center; }
  .board-tools { align-items: stretch; }
  .search { flex: 1; }
  .row a { grid-template-columns: 130px minmax(0, 1fr) 130px; gap: 18px; }
  .row img { width: 130px; }
  .patch-wrap { grid-template-columns: 160px minmax(0, 1fr); gap: 28px; }
  .build { padding: 30px; }
}
@media (max-width: 760px) {
  .sub .wrap, .sub-nav-inner, .sub-footer-inner { width: calc(100% - 40px); }
  .sub-wordmark { font-size: 29px; }
  .page-head { padding: 48px 0 40px; }
  .page-head p { font-size: 16px; }
  .board-wrap, .article-wrap { padding: 30px 0 60px; }
  .board-tools { gap: 16px; margin-bottom: 24px; }
  .tabs { gap: 5px; }
  .tabs button { padding: 8px 10px; font-size: 14px; gap: 5px; }
  .search { width: 100%; }
  .board { padding: 12px; }
  .row a { grid-template-columns: minmax(0, 1fr) 90px; padding: 22px 4px; gap: 12px; align-items: start; }
  .row-meta { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 9px; flex-wrap: wrap; }
  .row-text b { font-size: 18px; }
  .row-text > span { font-size: 14px; -webkit-line-clamp: 3; }
  .row img { width: 90px; aspect-ratio: 1; margin-top: 5px; }
  .article h1 { font-size: 30px; }
  .byline { gap: 10px; }
  .prose { font-size: 16px; }
  .prose h2 { font-size: 24px; }
  .article-nav { grid-template-columns: 1fr; }
  .article-nav .next { text-align: left; }
  .patch-wrap { grid-template-columns: 1fr; gap: 24px; padding: 30px 0 60px; }
  .patch-index { position: static; }
  .patch-index h2 { margin-bottom: 10px; }
  .patch-index ol { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; }
  .patch-index li { flex: 0 0 auto; }
  .patch-index a { margin: 0; background: #193b2d; }
  .build { padding: 28px 22px; }
  .build h2 { font-size: 24px; }
  .build header p, .group li { font-size: 15px; }
  .group h3 { font-size: 20px; }
  .sub-footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .sub-footer .sub-footer-note { text-align: left; }
  .sub-nav-links { padding-inline: 24px; }
}
@media (prefers-reduced-motion: reduce) { .sub *, .sub *::before, .sub *::after { scroll-behavior: auto !important; transition: none !important; } }

/* Keep the painted leaf clear of dates on a small news board. */
@media (max-width: 760px) { .board::before, .board::after { width: 70px; height: 70px; } }