:root {
  --sp-paper: #f7f7f3; --sp-surface: #fdfdfb; --sp-ink: #353533; --sp-muted: #60605f;
  --sp-line: #dddcdf; --sp-accent: #71345e; --sp-soft: #f0edf1;
  --sp-font: 'IBM Plex Sans Thai', Tahoma, sans-serif;
  --sp-display: 'Noto Serif Thai', Tahoma, serif;
  --sp-measure: 68ch;
}
:root[data-sp-theme='dark'] {
  --sp-paper: #211f26; --sp-surface: #29262e; --sp-ink: #eeeae6; --sp-muted: #c4bec7;
  --sp-line: #49424e; --sp-accent: #e3add6; --sp-soft: #332c38; color-scheme: dark;
}
body { font-family: var(--sp-font); font-size: 18px; font-weight: 400; line-height: 1.85; color: var(--sp-ink); background: var(--sp-paper); }
#wrapwrap, #wrap, #top, #top .navbar, #footer, .o_footer { background-color: var(--sp-paper); color: var(--sp-ink); }
#top { border-bottom: 1px solid var(--sp-line); }
#top .navbar-brand { color: var(--sp-accent); font-family: var(--sp-display); font-weight: 500; font-size: 1.45rem; letter-spacing: -.025em; }
#top .navbar-brand strong { font-weight: 500; }
#top .nav-link { color: var(--sp-ink); font-size: 16px; min-height: 44px; display: inline-flex; align-items: center; }
#top .nav-link:hover, a { color: var(--sp-accent); }
a { text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
button, .btn, input:not([type='range']), select { min-height: 44px; }
:where(a, button, input, select, summary):focus-visible { outline: 3px solid var(--sp-accent); outline-offset: 3px; }
.text-muted, .text-600 { color: var(--sp-muted) !important; }
.btn-primary { --bs-btn-bg: var(--sp-accent); --bs-btn-border-color: var(--sp-accent); --bs-btn-color: var(--sp-paper); --bs-btn-hover-bg: var(--sp-ink); --bs-btn-hover-color: var(--sp-paper); --bs-btn-hover-border-color: var(--sp-ink); font-weight: 500; border-radius: .5rem; }
.btn-outline-primary { --bs-btn-color: var(--sp-accent); --bs-btn-border-color: var(--sp-accent); --bs-btn-hover-bg: var(--sp-accent); --bs-btn-hover-color: var(--sp-paper); border-radius: .5rem; }
.sp-theme-toggle { border: 1px solid var(--sp-line); color: var(--sp-ink); background: var(--sp-surface); font: inherit; font-size: 14px; padding: .25rem .7rem; border-radius: .5rem; white-space: nowrap; }
.sp-section { padding-block: 2.5rem; }
.sp-home-intro { max-width: 76ch; padding-block: 3rem 2.25rem; }
.sp-eyebrow { color: var(--sp-muted); font-size: 14px; font-weight: 500; letter-spacing: .12em; margin-bottom: .75rem; }
.sp-page-title { font-size: clamp(2.25rem, 4vw, 3.75rem); line-height: 1.3; letter-spacing: 0; color: var(--sp-ink); font-weight: 500; margin-bottom: 1rem; }
.sp-lead { font-size: clamp(1.125rem, 1.4vw, 1.3rem); max-width: 64ch; line-height: 1.85; color: var(--sp-muted); }
.sp-home-paths { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1.75rem; }
.sp-home-paths a { display: inline-flex; gap: .65rem; align-items: baseline; min-height: 44px; border-bottom: 1px solid var(--sp-line); text-decoration: none; font-weight: 500; }
.sp-home-paths span { font-weight: 400; font-size: 14px; color: var(--sp-muted); }
.sp-section-rule { border-top: 1px solid var(--sp-line); }
.sp-section-heading { display: flex; flex-wrap: wrap; gap: 1rem; align-items: baseline; justify-content: space-between; margin-bottom: 1.5rem; }
.sp-section-heading h2 { font-size: 1.6rem; font-weight: 500; }
.sp-post-list { max-width: 76ch; }
.sp-post-row { padding-block: 1.75rem; border-top: 1px solid var(--sp-line); }
.sp-post-meta { display: flex; gap: .6rem; align-items: center; color: var(--sp-muted); font-size: 14px; margin-bottom: .5rem; }
.sp-post-title { font-size: clamp(1.4rem, 2vw, 1.85rem); line-height: 1.5; font-weight: 500; }
.sp-post-title a { color: var(--sp-ink); text-decoration: none; }
.sp-post-title a:hover { color: var(--sp-accent); text-decoration: underline; }
.sp-post-excerpt { color: var(--sp-muted); max-width: var(--sp-measure); }
.sp-post-tags, .sp-topic-links { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.sp-post-tags a { font-size: 14px; }
.sp-topic-links a { padding-block: .3rem; min-height: 44px; }
.sp-empty { padding: 1.5rem 0; border-top: 1px solid var(--sp-line); max-width: 76ch; }
.sp-empty h2 { font-size: 1.2rem; line-height: 1.6; }
.sp-empty p { color: var(--sp-muted); }
.sp-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem; padding: 1.5rem 0 2rem; }
.sp-filters > div { min-width: 150px; }
.sp-filters label { display: block; font-size: 16px; margin-bottom: .35rem; font-weight: 500; }
.sp-filters select, .sp-filters input { width: 100%; border: 1px solid var(--sp-line); border-radius: .5rem; background: var(--sp-surface); color: var(--sp-ink); font: inherit; font-size: 16px; padding: .5rem .75rem; }
.sp-filter-search { flex: 1; max-width: 32ch; }
.sp-reset { display: inline-flex; min-height: 44px; align-items: center; }
.sp-pagination { display: flex; gap: 2rem; margin-top: 1.5rem; }
.sp-toc { background: var(--sp-soft); padding: 1rem 1.5rem; border-radius: .75rem; margin-block: 1.25rem 2rem; }
.sp-toc summary { font-weight: 500; cursor: pointer; min-height: 44px; }
.sp-toc ol { margin: .5rem 0 0; padding-left: 1.25rem; }
.sp-toc li { margin-block: .3rem; }
.sp-toc-sub { margin-left: 1rem; font-size: 16px; }
.sp-media, .supaket-reading-demo { background: var(--sp-soft); border: 1px solid var(--sp-line); border-radius: .75rem; padding: 1.5rem; margin-block: 2rem; }
.sp-media audio { width: 100%; }
.sp-media a { overflow-wrap: anywhere; }
.sp-video-frame { aspect-ratio: 16 / 9; margin-block: 1rem; }
.sp-video-frame iframe { border: 0; width: 100%; height: 100%; }
.sp-demo-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.sp-demo-controls label { display: block; font-weight: 500; font-size: 16px; }
.sp-demo-controls input { width: 100%; min-height: 44px; accent-color: var(--sp-accent); }
.sp-demo-controls output { font-size: 16px; color: var(--sp-muted); }
.sp-demo-sample { background: var(--sp-surface); padding: 1rem; line-height: 1.85; margin-block: 1rem; border-radius: .35rem; overflow-wrap: anywhere; }
.o_wblog_post_content_field { font-family: var(--sp-font); font-size: 18px; line-height: 1.9; color: var(--sp-ink); max-width: var(--sp-measure); }
.o_wblog_post_content_field p { margin-bottom: 1.4rem; }
.o_wblog_post_content_field h2 { font-size: 1.6rem; line-height: 1.6; margin-block: 2.75rem 1rem; font-weight: 500; scroll-margin-top: 6rem; }
.o_wblog_post_content_field h3 { font-size: 1.25rem; line-height: 1.6; margin-block: 2rem .75rem; scroll-margin-top: 6rem; }
.o_wblog_post_name { font-size: clamp(2rem, 3.5vw, 3rem) !important; line-height: 1.5; color: var(--sp-ink) !important; }
.o_wblog_post_subtitle { font-size: 1.15rem; color: var(--sp-muted) !important; line-height: 1.8; }
#o_wblog_post_top .o_wblog_post_page_cover { min-height: 0 !important; padding-block: 2rem !important; height: auto !important; background: var(--sp-paper) !important; }
#o_wblog_post_top .o_record_cover_filter { display: none; }
#o_wblog_post_top .o_wblog_post_title { text-align: left; max-width: 76ch; margin-inline: auto; }
#o_wblog_post_content_jump { display: none; }
pre, code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
pre { overflow: auto; padding: 1rem; background: var(--sp-soft); border-radius: .5rem; }
.form-control, .form-select, .dropdown-menu, .offcanvas { background: var(--sp-surface); color: var(--sp-ink); border-color: var(--sp-line); }
.dropdown-item { color: var(--sp-ink); }
.dropdown-item:hover { background: var(--sp-soft); color: var(--sp-ink); }
@media (max-width: 767px) { body { font-size: 17px; } .sp-section { padding-block: 1.75rem; } .sp-home-intro { padding-block: 2rem; } .sp-demo-controls { grid-template-columns: 1fr; } .sp-filter-search { max-width: none; } .sp-filters > div { flex: 1 1 100%; } .sp-toc, .supaket-reading-demo { padding: 1rem; } #top .navbar-brand { font-size: 1.3rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Personal editorial composition: a writing column beside quieter collections. */
.sp-editorial-home .container { max-width: 1240px; padding-inline: 24px; }
.sp-editorial-intro { padding-block: 42px 36px; }
.sp-editorial-intro h1 { font-family: var(--sp-display); font-weight: 400; font-size: 30px; line-height: 1.7; max-width: 31ch; margin: 0 0 20px; letter-spacing: 0; }
.sp-intro-text { font-size: 18px; font-weight: 400; line-height: 1.9; max-width: 77ch; margin-bottom: 16px; color: var(--sp-muted); }
.sp-text-link { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; }
.sp-editorial-grid::before, .sp-editorial-grid::after { content: none; display: none; }
.sp-editorial-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 38px; }
.sp-editorial-body { padding-block: 16px 34px; }
.sp-editorial-body h2, .sp-editorial-topics h2 { font-family: var(--sp-display); font-weight: 400; font-size: 26px; line-height: 1.7; margin-bottom: 10px; }
.sp-editorial-body .sp-section-heading { gap: 12px; margin-bottom: 0; }
.sp-section-note, .sp-form-section p { color: var(--sp-muted); font-size: 17px; font-weight: 400; }
.sp-writing { scroll-margin-top: 96px; }
.sp-writing .sp-post-list { max-width: none; }
.sp-writing .sp-post-row { padding-block: 24px; }
.sp-writing .sp-post-title { font-family: var(--sp-display); font-weight: 500; font-size: 25px; line-height: 1.7; }
.sp-writing .sp-post-excerpt { font-size: 18px; font-weight: 400; }
.sp-post-meta { font-size: 14px; font-weight: 400; }
.sp-other-forms h2 { font-size: 23px; }
.sp-form-section { padding-block: 14px 18px; }
.sp-form-section h3 { font-size: 19px; font-weight: 500; margin-bottom: 5px; }
.sp-form-section h3 a { display: inline-flex; min-height: 44px; align-items: center; }
.sp-form-section p { margin-bottom: 7px; }
.sp-form-section .sp-collection-status { font-size: 14px; margin-bottom: 0; }
.sp-editorial-topics { padding-block: 16px 38px; }
.sp-editorial-topics h2 { font-size: 23px; }
.sp-editorial-topics .sp-topic-links { gap: 5px 24px; }
.sp-toc { background: var(--sp-soft); border-radius: 4px; }
.o_wblog_post_name { font-family: var(--sp-display); font-weight: 400 !important; line-height: 1.7 !important; }
.o_wblog_post_content_field h2, .o_wblog_post_content_field h3 { font-family: var(--sp-display); font-weight: 500; line-height: 1.8; }
.o_wblog_post_content_field { font-weight: 400; }
#footer strong { font-weight: 500; }
#top .o_nav_link_btn { font-weight: 400; border-radius: 4px; }
@media (min-width: 768px) { .sp-editorial-intro { padding-block: 52px 40px; } .sp-editorial-intro h1 { font-size: 43px; line-height: 1.65; } .sp-intro-text { font-size: 20px; } .sp-editorial-grid { grid-template-columns: minmax(0,2fr) minmax(240px,1fr); gap: 64px; } .sp-editorial-body h2 { font-size: 30px; } .sp-other-forms h2 { font-size: 24px; } .sp-editorial-topics { padding-block: 22px 44px; } }
@media (min-width: 1200px) { .sp-editorial-intro h1 { font-size: 49px; } .sp-editorial-grid { gap: 80px; } }