:root {
	--dhr-ink: #29231f;
	--dhr-muted: #74695e;
	--dhr-paper: #f5efe3;
	--dhr-card: #fffaf0;
	--dhr-red: #94352d;
	--dhr-gold: #b88236;
	--dhr-line: rgba(113, 86, 49, 0.22);
	scroll-behavior: smooth;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 5.5rem; }
body.dhr-body {
	margin: 0;
	background: var(--dhr-paper);
	color: var(--dhr-ink);
	font-family: "Sarabun", "Noto Sans SC", "Noto Sans JP", sans-serif;
}

.dhr-skip {
	position: fixed; top: -5rem; left: 1rem; z-index: 100;
	padding: .8rem 1rem; border-radius: .75rem; background: #fff; color: var(--dhr-red);
	font-size: calc(1rem * var(--reading-scale, 1)); font-weight: 800;
}
.dhr-skip:focus { top: 1rem; }
.dhr-progress { position: fixed; inset: 0 0 auto; z-index: 60; height: 4px; background: rgba(148, 53, 45, .12); }
.dhr-progress span { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--dhr-red), #d59b45); }

.dhr-hero { position: relative; overflow: hidden; padding: clamp(2.5rem, 6vw, 5.8rem) 1.25rem; border-bottom: 1px solid var(--dhr-line); }
.dhr-hero::before { content: attr(data-hero-mark); position: absolute; top: -4rem; left: -1rem; color: rgba(142, 105, 53, .07); font: 900 clamp(7rem, 18vw, 17rem)/1 Georgia, serif; letter-spacing: -.06em; white-space: nowrap; pointer-events: none; }
.dhr-hero__inner { position: relative; width: min(1180px, 100%); margin: 0 auto; display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.dhr-hero__copy { min-width: 0; }
.dhr-hero__tools { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dhr-back { display: inline-flex; align-items: center; gap: .55rem; color: var(--dhr-muted); font-size: calc(.95rem * var(--reading-scale, 1)); font-weight: 750; text-decoration: none; }
.dhr-back:hover { color: var(--dhr-red); }
.dhr-languages { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.dhr-languages a { min-width: 2.75rem; padding: .5rem .65rem; border: 1px solid var(--dhr-line); border-radius: 999px; background: rgba(255, 250, 240, .7); color: var(--dhr-muted); font-size: calc(.875rem * var(--reading-scale, 1)); font-weight: 800; line-height: 1.2; text-align: center; text-decoration: none; }
.dhr-languages a:hover { border-color: var(--dhr-red); color: var(--dhr-red); }
.dhr-languages a[aria-current="page"] { border-color: var(--dhr-red); background: var(--dhr-red); color: #fff; }
.dhr-eyebrow, .dhr-kicker { margin: 2.2rem 0 .65rem; color: var(--dhr-red); font-size: calc(.95rem * var(--reading-scale, 1)); font-weight: 900; letter-spacing: .035em; }
.dhr-hero h1 { margin: 0; max-width: none; font-family: "Noto Serif Thai", "Th Sarabun New", serif; font-size: calc(clamp(3rem, 6.2vw, 5.5rem) * var(--reading-scale, 1)); font-weight: 500; line-height: 1.16; letter-spacing: -.035em; text-wrap: balance; }
.dhr-subtitle { margin: 1.25rem 0 0; max-width: none; color: var(--dhr-red); font-size: calc(clamp(1.35rem, 2.6vw, 2.15rem) * var(--reading-scale, 1)); font-weight: 800; line-height: 1.55; text-wrap: balance; }
.dhr-deck { margin: 1.15rem 0 0; max-width: 68ch; color: var(--dhr-muted); font-size: calc(1.1rem * var(--reading-scale, 1)); line-height: 1.8; }
.dhr-translation-note { display: flex; align-items: center; gap: .5rem; margin: .8rem 0 0; color: var(--dhr-muted); font-size: calc(.875rem * var(--reading-scale, 1)); line-height: 1.6; }
.dhr-start { display: inline-flex; align-items: center; gap: .65rem; margin-top: 1.8rem; padding: .85rem 1.2rem; border-bottom: 2px solid var(--dhr-red); color: var(--dhr-red); font-size: calc(1rem * var(--reading-scale, 1)); font-weight: 900; text-decoration: none; }
.dhr-cover { position: relative; width: 100%; margin: 0; }
.dhr-cover::before { content: ""; position: absolute; inset: 6% -4% -7% 7%; border: 1px solid rgba(148, 53, 45, .25); }
.dhr-cover img { position: relative; display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; border: 1px solid rgba(91, 63, 34, .25); box-shadow: 0 28px 60px -36px rgba(46, 30, 18, .72); }

.dhr-intro, .dhr-toc, .dhr-story, .dhr-sources, .dhr-end { width: min(900px, calc(100% - 2.5rem)); margin-inline: auto; }
.dhr-intro { padding: clamp(4rem, 8vw, 7rem) 0 2.5rem; }
.dhr-kicker { margin: 0 0 .55rem; }
.dhr-intro h2, .dhr-end h2 { margin: 0 0 1.7rem; font-family: "Noto Serif Thai", "Th Sarabun New", serif; font-size: calc(clamp(2rem, 4vw, 3.2rem) * var(--reading-scale, 1)); font-weight: 600; line-height: 1.35; }
.dhr-prose { font-size: calc(1.2rem * var(--reading-scale, 1)); line-height: 1.9; }
.dhr-prose p { margin: 0 0 1.45em; }
.dhr-prose strong { color: var(--dhr-red); font-weight: 850; }
.dhr-prose ul { margin: 0 0 1.5rem; padding-left: 1.5rem; }
.dhr-prose li { margin: .45rem 0; }
.dhr-prose blockquote { margin: 2rem 0; padding: 1rem 1.4rem; border-left: 4px solid var(--dhr-gold); background: rgba(255, 250, 240, .68); color: #5f5146; }

.dhr-toc { margin-top: 2rem; margin-bottom: 5.5rem; border-block: 1px solid var(--dhr-line); }
.dhr-toc summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.2rem .25rem; color: var(--dhr-red); font-size: calc(1.05rem * var(--reading-scale, 1)); font-weight: 900; cursor: pointer; list-style: none; }
.dhr-toc summary::-webkit-details-marker { display: none; }
.dhr-toc summary span { display: inline-flex; align-items: center; gap: .7rem; }
.dhr-toc[open] summary > i { transform: rotate(180deg); }
.dhr-toc nav { padding: .5rem 0 1.5rem; }
.dhr-toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem 2rem; margin: 0; padding: 0; list-style: none; }
.dhr-toc a { display: flex; align-items: baseline; gap: .75rem; padding: .6rem .25rem; color: var(--dhr-ink); font-size: calc(.95rem * var(--reading-scale, 1)); line-height: 1.6; text-decoration: none; }
.dhr-toc a:hover { color: var(--dhr-red); }
.dhr-toc a span { flex: none; color: var(--dhr-gold); font-family: Georgia, serif; font-weight: 800; }

.dhr-story { padding-bottom: 1rem; }
.dhr-chapter { padding: 1rem 0 clamp(5rem, 10vw, 8.5rem); scroll-margin-top: 5.5rem; }
.dhr-chapter__head { margin-bottom: 1.6rem; }
.dhr-chapter__no { display: inline-block; margin-bottom: .45rem; color: var(--dhr-gold); font-size: calc(.9rem * var(--reading-scale, 1)); font-weight: 900; }
.dhr-chapter h2 { margin: 0; max-width: 24ch; font-family: "Noto Serif Thai", "Th Sarabun New", serif; font-size: calc(clamp(2.1rem, 5vw, 3.6rem) * var(--reading-scale, 1)); font-weight: 600; line-height: 1.3; }
.dhr-figure { margin: 0 0 clamp(2.2rem, 5vw, 3.5rem); }
.dhr-figure img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; border: 1px solid var(--dhr-line); box-shadow: 0 25px 55px -40px rgba(48, 31, 18, .82); }
.dhr-figure figcaption { margin-top: .7rem; color: var(--dhr-muted); font-size: calc(.875rem * var(--reading-scale, 1)); line-height: 1.6; text-align: right; }
.dhr-next { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.4rem; color: var(--dhr-red); font-size: calc(.95rem * var(--reading-scale, 1)); font-weight: 850; text-decoration: none; }

.dhr-sources { margin-bottom: 3rem; padding: 1.3rem 1.5rem; border-left: 4px solid var(--dhr-gold); background: rgba(255, 250, 240, .72); }
.dhr-sources h2 { display: flex; align-items: center; gap: .6rem; margin: 0 0 .8rem; color: var(--dhr-red); font-size: calc(1.05rem * var(--reading-scale, 1)); font-weight: 900; }
.dhr-sources ul { display: grid; gap: .55rem; margin: 0; padding-left: 1.25rem; }
.dhr-sources a { color: var(--dhr-ink); font-size: calc(.95rem * var(--reading-scale, 1)); line-height: 1.65; text-decoration-color: rgba(148, 53, 45, .35); text-underline-offset: .2em; }
.dhr-sources a:hover { color: var(--dhr-red); }
.dhr-sources a i { margin-left: .3rem; font-size: .78em; }

.dhr-end { margin-top: 1rem; margin-bottom: 4rem; padding: clamp(2rem, 5vw, 3.5rem); border: 1px solid var(--dhr-line); background: var(--dhr-card); text-align: center; }
.dhr-end > p { margin: 0 0 .55rem; color: var(--dhr-red); font-size: calc(.9rem * var(--reading-scale, 1)); font-weight: 900; }
.dhr-end h2 { margin-bottom: 1.5rem; }
.dhr-end__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
.dhr-end__actions a { display: inline-flex; align-items: center; gap: .55rem; padding: .8rem 1.05rem; border: 1px solid var(--dhr-line); color: var(--dhr-red); font-size: calc(.95rem * var(--reading-scale, 1)); font-weight: 850; text-decoration: none; }
.dhr-end__actions .is-primary { border-color: var(--dhr-red); background: var(--dhr-red); color: #fff; }
.dhr-footer { padding: 2rem 1rem 3rem; color: var(--dhr-muted); font-size: calc(.875rem * var(--reading-scale, 1)); line-height: 1.6; text-align: center; }

html.dhr-night { color-scheme: dark; --dhr-ink: #eee4d6; --dhr-muted: #b8aa98; --dhr-paper: #191613; --dhr-card: #231e19; --dhr-red: #e58b78; --dhr-gold: #d6a75f; --dhr-line: rgba(235, 207, 171, .17); }
html.dhr-night body.dhr-body { background: var(--dhr-paper); }
html.dhr-night [data-pt-topnav] { background: rgba(25, 22, 19, .94) !important; border-color: var(--dhr-line) !important; }
html.dhr-night [data-pt-topnav] a, html.dhr-night [data-pt-topnav] button, html.dhr-night [data-pt-topnav] summary { color: #e9dfd2 !important; }
html.dhr-night .dhr-cover img, html.dhr-night .dhr-figure img { filter: brightness(.84) saturate(.88); }
html.dhr-night .dhr-prose blockquote { background: rgba(255, 255, 255, .035); color: #d3c4b3; }
html.dhr-night .dhr-sources { background: rgba(255, 255, 255, .035); }
html.dhr-night .dhr-languages a { background: rgba(255, 255, 255, .035); }
html.dhr-night .pts-card { background: #231e19; color: var(--dhr-ink); }
html.dhr-night .pts-head h2, html.dhr-night .pts-row h3 { color: var(--dhr-ink); }
html.dhr-night .pts-head p, html.dhr-night .pts-row p, html.dhr-night .pts-switch__state { color: var(--dhr-muted); }
html.dhr-night .pts-row { background: rgba(255, 255, 255, .035); border-color: var(--dhr-line); }

@media (max-width: 820px) { .dhr-hero { padding-top: 2rem; } }

@media (max-width: 600px) {
	.dhr-hero, .dhr-intro, .dhr-toc, .dhr-story, .dhr-sources, .dhr-end { width: 100%; }
	.dhr-hero { padding-inline: 1rem; }
	.dhr-intro, .dhr-toc, .dhr-story { padding-inline: 1rem; }
	.dhr-sources { width: calc(100% - 2rem); }
	.dhr-toc ol { grid-template-columns: 1fr; }
	.dhr-end { width: calc(100% - 2rem); padding-inline: 1.2rem; }
	.dhr-prose { font-size: calc(1.125rem * var(--reading-scale, 1)); line-height: 1.85; }
	.dhr-hero__tools { align-items: flex-start; flex-direction: column; }
	.dhr-languages { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) { :root { scroll-behavior: auto; } }