/* ============================================================
   DAP — article pages set like a law review (16 Oct 2026)
   After the Harvard Law Review's article pages, which the user reads and likes: a light
   title block, an abstract under a star, one centred column of serif text with indented
   paragraphs, numbered sections under a short rule, statutes as indented extracts, a
   contents tab at the side. DAP's palette only: white, navy, one deep crimson; no grey
   fills, no gloss. Tones: white (default) and navy night. Loaded on articles only.
   ============================================================ */
.reader{
  --r-bg:#FFFFFF;--r-card:#FFFFFF;--r-ink:#1F2433;--r-ink2:#4E5672;--r-hd:#131C3D;--r-acc:#B3232B;
  --r-rule:rgba(16,23,48,.14);
  --r-size:19px;--r-font:'Literata','Noto Serif Thai',Georgia,serif;--r-lh:1.85;
  --r-col:46rem;
  background:var(--r-bg);color:var(--r-ink);transition:background-color .35s,color .35s;
}
.reader[data-theme=night]{--r-bg:#0D1530;--r-card:#131C3D;--r-ink:#D5D9E3;--r-ink2:#9AA1B5;--r-hd:#FFFFFF;--r-acc:#F0646A;--r-rule:rgba(255,255,255,.14)}
.reader[data-size=s]{--r-size:17px}
.reader[data-size=l]{--r-size:21.5px}
.reader[data-font=sans]{--r-font:var(--sans)}
html[lang=en] .reader{--r-lh:1.6}
.reader ::selection{background:var(--r-acc);color:#fff}
.reader a:focus-visible,.reader button:focus-visible,.reader summary:focus-visible{outline:2px solid var(--r-acc);outline-offset:3px}
.rd-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hl-in{width:min(66rem,92%);margin:0 auto}

/* ---------- title block ---------- */
.hl-crumbs{border-bottom:1px solid var(--r-rule)}
.hl-crumbs .breadcrumb{margin:0;padding:16px 0;color:var(--r-ink2);font-size:13px;text-transform:none;letter-spacing:.01em}
.hl-crumbs .breadcrumb a:hover{color:var(--r-hd)}
.hl-crumbs .breadcrumb .sep{color:var(--r-ink2)}
.hl-title{padding:64px 0 40px}
.hl-top{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px 24px}
.hl-kicker{display:flex;align-items:center;gap:10px;font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.06em;color:var(--r-ink2)}
.hl-kicker a{color:var(--r-acc)}
.hl-kicker a:hover{text-decoration:underline;text-underline-offset:4px}
.hl-dia{font-size:7px;color:#C9CEDC}
.hl-cite{font-family:'Marcellus',serif;font-size:16px;letter-spacing:.06em;color:var(--r-acc)}
.reader h1{margin:18px 0 0;max-width:22em;font-family:'Noto Serif Thai','Literata',Georgia,serif;font-weight:700;font-size:clamp(32px,4.2vw,54px);line-height:1.3;letter-spacing:-.01em;color:var(--r-hd);text-wrap:balance}
html[lang=en] .reader h1{font-family:'Literata',Georgia,serif;line-height:1.15}
/* the author: the photograph from Our People, mounted like a print on a navy plate set a little
   behind and to the right, the plate's foot ruled in crimson (user, 16 Oct 2026: "ใช้เหมือนหน้า Our
   people แล้วทำกรอบให้สวยๆกว่านี้"). The red line is the plate's own edge, never loose. */
.hl-byline{display:flex;align-items:center;gap:34px;margin-top:30px}
.hl-portrait{position:relative;isolation:isolate;flex:none;display:block;width:112px;aspect-ratio:4/5;margin:0 12px 12px 0}
.hl-portrait::before{content:"";position:absolute;z-index:-1;inset:12px -12px -12px 12px;background:#131C3D;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 100%);background-size:25% 100%;
  border-bottom:2px solid var(--r-acc);transition:inset .5s var(--ease,ease)}
.hl-portrait span{position:relative;display:block;width:100%;height:100%;overflow:hidden;background:#131C3D;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 16px 30px -18px rgba(8,14,34,.55)}
.hl-portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:transform .8s var(--ease,ease)}
.hl-portrait:hover img{transform:scale(1.04)}
.hl-portrait:hover::before{inset:16px -16px -16px 16px}
.reader[data-theme=night] .hl-portrait::before{background-color:#22305E}
.hl-portrait-lg{width:150px}
.hl-byline .hl-authors{margin-top:0}
.hl-authors{margin-top:22px;font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:.04em}
.hl-authors a{color:var(--r-acc)}
.hl-authors a:hover{text-decoration:underline;text-underline-offset:4px}
.hl-authors a{font-size:17px}
.hl-authors span{display:block;margin-top:2px;font-weight:400;font-size:13.5px;letter-spacing:0;color:var(--r-ink2)}
.hl-contrib{margin-top:6px;font-family:var(--sans);font-size:13px;color:var(--r-ink2)}
.hl-rule{height:5px;margin:34px 0 18px;border-top:1px solid var(--r-rule);border-bottom:1px solid var(--r-rule)}
.hl-meta{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px 14px;font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:.03em;color:var(--r-hd)}
.hl-meta-link{color:var(--r-acc)}
.hl-meta-link:hover{text-decoration:underline;text-underline-offset:4px}
.hl-actions{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px;margin-top:22px}
.hl-download,.hl-pdf{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 20px;font-family:var(--sans);font-size:14.5px;font-weight:600;letter-spacing:.02em;transition:background .2s,color .2s}
.hl-download{background:var(--r-acc);color:#fff;outline:1px solid var(--r-acc);outline-offset:3px}
.hl-download:hover{background:#921B22}
.hl-pdf{border:1px solid var(--r-rule);color:var(--r-hd)}
.hl-pdf:hover{border-color:var(--r-hd)}
.hl-download svg,.hl-pdf svg{width:18px;height:18px;fill:currentColor}
.reader .hl-tools{display:flex;align-items:center;gap:6px;margin:0;padding:0;border:0}
.reader .share-btn,.rd-set-btn{display:inline-grid;place-items:center;width:40px;height:40px;padding:0;background:transparent;border:1px solid var(--r-rule);color:var(--r-hd);cursor:pointer;transition:background .2s,color .2s}
.reader .share-btn:hover,.rd-set-btn:hover,.rd-set-btn[aria-expanded=true]{background:var(--r-hd);border-color:var(--r-hd);color:var(--r-bg)}
.reader .share-btn svg{width:15px;height:15px;fill:currentColor}
.rd-aa{font-family:'Marcellus',serif;font-size:17px;line-height:1}
.reader .art-share-status{flex-basis:100%;text-align:center;font-size:12.5px;color:var(--r-acc)}
.reader .art-share-status:empty{display:none}
.rd-settings{display:grid;gap:10px;max-width:520px;margin:18px auto 0;padding:18px 22px;background:var(--r-card);border:1px solid var(--r-rule);border-top:2px solid var(--r-acc);font-family:var(--sans)}
.rd-settings[hidden]{display:none}
.rd-set-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.rd-set-row p{flex:0 0 110px;font-size:13px;font-weight:600;color:var(--r-hd)}
.rd-opt{min-height:36px;padding:0 14px;border:1px solid var(--r-rule);background:transparent;color:var(--r-ink);font:inherit;font-size:13.5px;cursor:pointer}
.rd-opt[aria-pressed=true]{background:var(--r-hd);border-color:var(--r-hd);color:var(--r-bg)}

/* ---------- the sheet and its contents tab ---------- */
.hl-sheet{position:relative;padding:20px 0 40px}
.hl-tab{position:sticky;top:130px;float:left;margin-left:max(16px,calc(50% - var(--r-col) / 2 - 110px));z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;border:1px solid var(--r-rule);outline:1px solid var(--r-rule);outline-offset:3px;
  background:var(--r-bg);color:var(--r-acc);font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.12em;cursor:pointer}
.hl-tab span{writing-mode:vertical-rl}
.hl-tab svg{width:14px;height:14px;fill:currentColor}
.hl-tab:hover{background:var(--r-acc);color:#fff}
.hl-contents{position:fixed;left:0;top:0;bottom:0;z-index:90;width:min(420px,88vw);overflow-y:auto;padding:22px 24px 30px;background:var(--r-card);border-right:1px solid var(--r-rule);box-shadow:20px 0 50px -30px rgba(13,21,48,.45);font-family:var(--sans)}
.hl-contents[hidden]{display:none}
.hl-contents-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:12px;border-bottom:2px solid var(--r-acc)}
.hl-contents-head p{font-family:var(--serif);font-size:20px;color:var(--r-hd)}
.hl-contents-x{width:40px;height:40px;border:0;background:none;color:var(--r-hd);font-size:26px;cursor:pointer}
.hl-contents ol{list-style:none;margin:0;padding:0}
.hl-contents a{display:grid;grid-template-columns:34px minmax(0,1fr);gap:4px;padding:10px 0;border-bottom:1px solid var(--r-rule);font-size:14.5px;line-height:1.55;color:var(--r-ink)}
.hl-contents a:hover,.hl-contents a.on{color:var(--r-acc)}
.hl-toc-n{font-family:'Literata',Georgia,serif;color:var(--r-acc)}

/* ---------- the column ---------- */
.hl-body{max-width:var(--r-col);margin:0 auto;padding:0 20px;font-family:var(--r-font);font-size:var(--r-size);line-height:var(--r-lh)}
.hl-body p{margin:0}
.hl-intro p,.hl-sec>p,.hl-part>p{text-indent:2.2em}
.hl-intro p:first-child,.hl-sec>h2+p,.hl-part>h2+p{text-indent:0}
/* the opening paragraph: a crimson initial and, in English, a small-caps first line */
.hl-intro p:first-child::first-letter{float:left;margin:.06em .12em 0 0;font-family:'Literata','Noto Serif Thai',serif;font-size:3.6em;line-height:.82;color:var(--r-acc)}
html[lang=th] .hl-intro p:first-child::first-letter{font-size:3em;line-height:1;margin-top:.04em}
html[lang=en] .hl-intro p:first-child::first-line{font-variant:small-caps;letter-spacing:.04em}

.hl-abstract{margin:28px 0 56px;padding:34px 30px 30px;border:1px solid var(--r-rule)}
.hl-star{display:block;width:30px;height:30px;margin:-50px auto 14px;padding:0 6px;background:var(--r-bg);box-sizing:content-box}
.hl-star svg{width:30px;height:30px;fill:var(--r-hd)}
.hl-abstract h2{margin-bottom:14px;text-align:center;font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.14em;color:var(--r-hd)}
.hl-abstract p{text-indent:0}

.hl-sec,.hl-part{margin-top:2.6em}
.hl-sec h2,.hl-part h2{margin:0 0 .75em;padding-top:.9em;font-family:'Noto Serif Thai','Literata',Georgia,serif;font-weight:600;font-size:1.32em;line-height:1.45;color:var(--r-hd);scroll-margin-top:100px;
  background:linear-gradient(var(--r-rule),var(--r-rule)) 0 0/38px 2px no-repeat}
html[lang=en] .hl-sec h2,html[lang=en] .hl-part h2{font-family:'Literata',Georgia,serif;font-variant:small-caps;letter-spacing:.03em}
.hl-num{color:var(--r-acc);margin-right:.25em}

.hl-law{margin:1.4em 2.2em 1.6em;font-size:.9em;line-height:1.75}
.hl-law figcaption{margin-bottom:.45em;font-family:var(--sans);font-size:.78em;font-weight:600;letter-spacing:.05em;color:var(--r-acc)}
.hl-law blockquote{margin:0;padding-left:1.1em;border-left:2px solid var(--r-acc);color:var(--r-hd)}
.hl-law blockquote p+p{margin-top:.55em}
.hl-note{margin:1.5em 0;padding:1em 1.3em;border-top:1px solid var(--r-rule);border-bottom:1px solid var(--r-rule);font-size:.94em}
.hl-note-k{margin-bottom:.3em !important;font-family:var(--sans);font-size:.76em;font-weight:700;letter-spacing:.1em;color:var(--r-acc)}
.hl-note p{text-indent:0}
.hl-list{margin:.6em 0 .9em 1.6em}
.hl-list li{margin:.3em 0}
.hl-list li::marker{color:var(--r-acc)}
.reader strong,.reader b{color:var(--r-hd)}
.hl-chat{display:flex;flex-direction:column;gap:.55em;margin:1.4em 0;padding:1em;border:1px solid var(--r-rule);font-family:var(--sans);font-size:.85em;line-height:1.65}
.hl-bubble{max-width:86%;align-self:flex-start;padding:.55em .9em;border:1px solid var(--r-rule);border-radius:14px 14px 14px 4px}
.hl-bubble.is-alt{align-self:flex-end;border-radius:14px 14px 4px 14px;border-color:rgba(179,35,43,.3)}
.hl-bubble b{display:block;font-size:.8em;color:var(--r-ink2)}
.hl-table{margin:1.4em 0;overflow-x:auto;font-family:var(--sans);font-size:.78em;line-height:1.6}
.hl-table table{width:100%;border-collapse:collapse;border-top:2px solid var(--r-hd);border-bottom:2px solid var(--r-hd)}
.hl-table th{padding:.7em .8em;text-align:left;vertical-align:bottom;font-weight:600;color:var(--r-hd);border-bottom:1px solid var(--r-hd)}
.hl-table td{padding:.7em .8em;vertical-align:top;border-bottom:1px solid var(--r-rule)}

.hl-faq{border-top:1px solid var(--r-rule)}
.hl-faq:last-of-type{border-bottom:1px solid var(--r-rule)}
.hl-faq summary{display:flex;justify-content:space-between;gap:16px;padding:.8em 0;list-style:none;cursor:pointer;font-weight:600;color:var(--r-hd)}
.hl-faq summary::-webkit-details-marker{display:none}
.hl-faq summary::after{content:"+";flex:none;font-family:var(--sans);color:var(--r-acc)}
.hl-faq[open] summary::after{content:"–"}
.hl-faq p{padding:0 0 1em;text-indent:0}
.hl-steps{margin:0;padding:0;list-style:none;counter-reset:s}
.hl-steps li{counter-increment:s;display:grid;grid-template-columns:2.2em minmax(0,1fr);padding:.55em 0;border-bottom:1px solid var(--r-rule)}
.hl-steps li::before{content:counter(s) ".";color:var(--r-acc);font-weight:600}

/* the letter: framed like the abstract */
.hl-letter{margin:4em 0 0;padding:34px 30px 30px;border:1px solid var(--r-rule)}
.hl-letter-head{display:flex;align-items:center;gap:30px;margin:6px 0 1.4em}
.hl-letter-who{margin-top:.7em;font-family:var(--sans);font-size:.72em;line-height:1.6;color:var(--r-ink2)}
.hl-letter-who a{display:block;font-size:1.25em;font-weight:600;color:var(--r-acc)}
.hl-letter-who span{display:block}
.hl-letter-k{font-family:var(--sans);font-size:.72em;font-weight:700;letter-spacing:.1em;color:var(--r-acc)}
.hl-letter h2{margin:0;font-family:'Noto Serif Thai','Literata',Georgia,serif;font-weight:600;font-size:1.25em;line-height:1.45;color:var(--r-hd);scroll-margin-top:100px}
.hl-letter>p{margin:0 0 1em}
.hl-letter-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.2em}
.hl-letter-actions .btn{padding:12px 22px;font-size:14.5px}
.hl-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--r-rule);background:transparent;color:var(--r-hd);font-family:var(--sans);font-size:14px;font-weight:600;cursor:pointer;transition:background .2s,color .2s}
.hl-btn svg{width:16px;height:16px;fill:currentColor}
.hl-btn:hover{background:var(--r-hd);border-color:var(--r-hd);color:var(--r-bg)}
.hl-letter>.hl-sign{margin:1.6em 0 0;font-family:'Noto Serif Thai','Literata',serif;font-size:1.05em;color:var(--r-hd)}
.hl-sign span{display:block;font-family:var(--sans);font-size:.7em;color:var(--r-ink2)}
.rd-check{margin:1.2em 0 1.4em;padding:1.1em 1.2em;border:1px solid var(--r-rule);font-family:var(--sans);font-size:.84em;line-height:1.65}
.rd-check p{margin:0}
.rd-check-h{font-weight:700;color:var(--r-hd)}
.rd-check-hint{margin:.2em 0 .8em !important;font-size:.9em;color:var(--r-ink2)}
.rd-check ul{list-style:none;margin:0;padding:0}
.rd-check label{display:grid;grid-template-columns:22px minmax(0,1fr);gap:.7em;padding:.55em 0;border-top:1px solid var(--r-rule);cursor:pointer}
.rd-check input{width:18px;height:18px;margin-top:.2em;accent-color:var(--r-acc);cursor:pointer}
.rd-check input:checked+span{color:var(--r-hd);font-weight:500}
.rd-check-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-top:.8em;padding-top:.8em;border-top:1px solid var(--r-rule)}
.rd-check-count{font-weight:600;color:var(--r-hd)}
.rd-check-status{margin-top:.6em !important;font-size:.92em;color:var(--r-acc);white-space:pre-line}
.rd-check-status:empty{display:none}
.hl-disclaim{margin-top:2.4em !important;padding-top:1.1em;border-top:1px solid var(--r-rule);font-family:var(--sans);font-size:13px;line-height:1.8;color:var(--r-ink2)}

/* ---------- keep reading ---------- */
.hl-link{display:inline-flex;font-family:var(--sans);font-size:14px;font-weight:600;color:var(--r-hd);text-decoration:underline;text-decoration-color:var(--r-acc);text-underline-offset:5px}
.hl-link:hover{color:var(--r-acc)}
.rd-more{padding:56px 0 72px;border-top:1px solid var(--r-rule)}
.rd-more-in{width:min(66rem,92%);margin:0 auto}
.rd-more h2{margin-bottom:22px;font-family:var(--serif);font-weight:400;font-size:28px;color:var(--r-hd)}
.rd-more-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:22px}
.rd-more-card{display:flex;flex-direction:column;gap:10px;padding:22px;border:1px solid var(--r-rule);border-top:2px solid var(--r-acc);font-family:var(--sans);transition:border-color .25s}
.rd-more-card:hover{border-color:var(--r-hd)}
.rd-more-cat{font-size:12.5px;color:var(--r-acc)}
.rd-more-t{flex:1;font-family:'Noto Serif Thai',var(--serif);font-size:18px;line-height:1.6;color:var(--r-hd)}

/* ---------- smaller screens ---------- */
@media(max-width:1100px){
  .hl-tab{position:fixed;top:auto;bottom:96px;left:0;float:none;margin:0;padding:12px 7px;border-left:0;outline:0;box-shadow:0 10px 24px -14px rgba(13,21,48,.4)}
}
@media(max-width:760px){
  .rd-more-grid{grid-template-columns:minmax(0,1fr)}
  .hl-title{padding:40px 0 28px}
  .hl-law{margin:1.2em 0 1.4em .6em}
}
@media(max-width:640px){
  .reader{--r-size:18px}
  .reader[data-size=s]{--r-size:16px}
  .reader[data-size=l]{--r-size:20px}
  .hl-abstract,.hl-letter{padding:30px 18px 22px}
  .hl-letter-head{flex-direction:column;align-items:flex-start;gap:18px}
  .hl-portrait-lg{width:132px}
  .hl-byline{gap:24px}.hl-portrait{width:86px;margin:0 10px 10px 0}
  .rd-set-row p{flex-basis:100%}
}
@media(prefers-reduced-motion:reduce){.reader{transition:none}}

/* ---------- print: the article as a clean memorandum ---------- */
@media print{
  .reader{--r-bg:#fff;--r-card:#fff;--r-ink:#000;--r-ink2:#444;--r-hd:#000;--r-acc:#000;--r-rule:#bbb}
  .hl-crumbs,.hl-actions,.rd-settings,.hl-tab,.hl-contents,.rd-more,.hl-letter-actions,.rd-check-foot,.rd-check-hint{display:none !important}
  .hl-title{padding:0 0 12pt}
  .hl-body{max-width:none;padding:0}
}