/* ชมรม AI นิติศาสตร์: page layout.
   Components come from components.css, every value from tokens.css (both copied from the Brand Book).
   One paper page for the whole site: listing pages are built to scan, article pages to read for a long time. */

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { overflow-x: clip; text-rendering: optimizeLegibility; } /* clip, not hidden: hidden would make body a scroll box and stop the sticky header and contents */
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip { position: absolute; left: var(--space-4); top: -100px; z-index: 60; padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); background: var(--primary); color: var(--on-primary); text-decoration: none; }
.skip:focus { top: var(--space-3); }

/* the sticky header's height; anything else that sticks, and every jump to a heading, sits below it */
:root { --hh: 72px; }
@media (max-width: 860px) { :root { --hh: 64px; } }
html { scroll-padding-top: calc(var(--hh) + var(--space-4)); }

/* Layout */
.wrap { box-sizing: border-box; max-width: var(--container); margin: 0 auto; padding-left: max(var(--space-6), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-6), env(safe-area-inset-right, 0px)); }
.section { padding-block: var(--space-16); border-top: 1px solid var(--line); }
.section--first { border-top: 0; padding-top: var(--space-8); }
.stack { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); align-items: start; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-6); margin-bottom: var(--space-6); }
.section-lede { margin: calc(-1 * var(--space-3)) 0 var(--space-6); max-width: 40em; color: var(--ink-muted); font-size: 16px; line-height: 28px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--space-8); }
.lede { margin: 0; max-width: 40em; color: var(--ink-muted); font-size: 17px; line-height: 30px; text-wrap: pretty; }

/* Page tops: a plain title, one line on what is here, then the way in */
.page-head { padding-block: var(--space-12) var(--space-8); }
.page-head-inner, .page-head-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); min-width: 0; }
.page-title { margin: 0; max-width: 22em; color: var(--ink); font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 40px); line-height: 1.4; font-weight: 500; text-wrap: balance; }
.page-sub { margin: calc(-1 * var(--space-2)) 0 0; color: var(--ink-muted); font-size: 16px; line-height: 26px; }
/* the count or name above a page title is a quiet fact, not a decoration */
.page-head .lac-eyebrow { color: var(--ink-muted); font-weight: 400; }
.page-top { padding-top: var(--space-8); }

/* Promises a reader can check */
.promises { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.promises li { display: block; padding: var(--space-4) 0; border-bottom: 1px solid var(--line); color: var(--ink-muted); font-size: 15px; line-height: 26px; }
.promises strong { display: block; margin-bottom: var(--space-1); color: var(--ink); font-size: 16px; font-weight: 600; }
.promises--row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--space-8); margin-top: var(--space-6); border-top: 0; }
.promises--row li { border-top: 1px solid var(--line); border-bottom: 0; }
/* a section of law named in running text carries the logo's brackets */
.cite-mark { color: var(--accent); font-weight: 500; white-space: nowrap; }
.cite-mark::before { content: "[ "; font-family: var(--font-mono); }
.cite-mark::after { content: " ]"; font-family: var(--font-mono); }

/* Lists close with a rule */
.news-list .lac-news:last-child, .cards .lac-card:last-child { border-bottom: 1px solid var(--line); }
.cards .lac-card { border-bottom: 0; }
.news-summary { margin: 0; max-width: 40em; color: var(--ink-muted); font-size: 15px; line-height: 26px; }
/* a short news item: why it matters and how far the information goes, each led by a bold label */
.news-note { margin: 0; max-width: 40em; color: var(--ink); font-size: 15px; line-height: 26px; }
.news-note b { margin-right: .35em; font-weight: 600; }
.news-related { margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 22px; }
/* above the link that covers the whole item */
.news-related a { position: relative; z-index: 1; color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* FAQ */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-12); align-items: start; }
.faq-intro { display: flex; flex-direction: column; gap: var(--space-4); }
.contact { margin: 0; color: var(--ink); font-size: 15px; line-height: 26px; }

/* Closing invitation: one line and one button */
.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-8); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); }
.cta-text { display: flex; flex-direction: column; gap: var(--space-1); }
.cta-title { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 36px; font-weight: 500; }
.cta-note { margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 24px; }

/* Knowledge: levels and topics are the way in; search narrows the list */

/* Filter bar: sticks under the header while the list scrolls */
.filterbar { position: sticky; top: var(--hh); z-index: 5; border-block: 1px solid var(--line); background: var(--surface); }
.filterbar-inner { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-2); }
.chips { display: flex; flex: 1; gap: var(--space-2); min-width: 0; padding: 4px 2px; overflow-x: auto; scrollbar-width: thin; }
.chip-count { margin-left: var(--space-2); color: inherit; font-size: 13px; opacity: .75; font-variant-numeric: tabular-nums; }
.search { position: relative; flex: none; width: 300px; }
.search svg { position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--ink-muted); pointer-events: none; }
.search input { box-sizing: border-box; width: 100%; height: 44px; padding: 0 var(--space-4) 0 40px; border: 1px solid var(--line-strong); border-radius: var(--radius-full); background: var(--surface-raised); color: var(--ink); font-family: var(--font-sans); font-size: 16px; }
.search input::placeholder { color: var(--ink-muted); }
.search input:focus-visible { outline: 2px solid transparent; border-color: var(--accent); box-shadow: var(--focus-ring); }

.results { padding-block: var(--space-8) var(--space-16); }
.results-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-2); }
.results-meta p { margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 22px; }
/* nothing found: a tone step, not a dashed box (dashed means what a party claims) */
.empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-12) var(--space-6); border-radius: 20px; background: var(--surface-panel); color: var(--ink-muted); text-align: center; }
.empty p { margin: 0; }
.empty-code { color: var(--ink); font-family: var(--font-mono); font-size: 16px; line-height: 26px; }
.empty-code::before { content: "[ "; color: var(--accent); }
.empty-code::after { content: " ]"; color: var(--accent); }

/* Knowledge with no filter: one group per pillar, its number, name and what it covers */
.pillars { display: flex; flex-direction: column; gap: var(--space-12); }
.pillar-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--space-1) var(--space-4); margin-bottom: var(--space-2); }
.pillar-num { display: grid; place-items: center; width: 32px; height: 32px; margin-top: 2px; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); font-size: 14px; font-weight: 600; }
.pillar-title { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 34px; font-weight: 600; }
.pillar-desc { margin: var(--space-1) 0 0; max-width: 46em; color: var(--ink-muted); font-size: 15px; line-height: 26px; }
.pillar-more { align-self: center; font-size: 14px; }
.pillar-empty { margin: 0; padding: var(--space-4) 0; border-top: 1px solid var(--line); color: var(--ink-muted); font-size: 15px; line-height: 26px; }

/* the pages' requests for help: a plain panel with the form link still to be filled in */
.suggest { padding-block: 0 var(--space-16); }
.suggest-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-8); padding: var(--space-6) var(--space-8); }
.suggest-title { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 34px; font-weight: 600; }
.suggest-link { margin: 0; color: var(--ink); font-size: 15px; line-height: 24px; }
.suggest-link--pending { color: var(--ink-muted); }
.suggest--after-paper { padding-top: var(--space-16); }

/* News page: the latest analysis first, then the years */
.page-head-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); align-items: end; }
.policy { display: flex; flex-direction: column; gap: var(--space-2); }
.policy-title { margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 22px; font-weight: 500; }
.policy .promises li { padding-block: var(--space-3); font-size: 14px; line-height: 24px; }
.policy .promises strong { font-size: 15px; }
.news-feature { padding-block: var(--space-8) 0; }
.feature-card { position: relative; display: block; padding: var(--space-6) var(--space-8); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-md); background: var(--surface-raised); }
.feature-card-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); max-width: 44em; }
.feature-card-text .lac-eyebrow { color: var(--accent); }
.feature-card-title { margin: 0; font-family: var(--font-display); font-size: 26px; line-height: 40px; font-weight: 600; text-wrap: pretty; }
.feature-card-link { color: var(--ink); text-decoration: none; }
.feature-card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.feature-card:hover .feature-card-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.feature-card-link:focus-visible { outline: none; }
.feature-card-link:focus-visible::after { box-shadow: var(--focus-ring); }
.feature-card-summary { margin: 0; color: var(--ink); font-size: 16px; line-height: 28px; }
.feature-card-meta { margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 22px; }
.feature-card-more { color: var(--link); font-size: 15px; line-height: 24px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.feature-more { margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.feature-more li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.feature-more a { color: var(--ink); font-weight: 500; }
.feature-more span { color: var(--ink-muted); font-size: 14px; }
.news-paper { margin-top: var(--space-8); }
.timeline { padding-block: var(--space-6) var(--space-8); }
.timeline-meta { margin: 0 0 var(--space-6); color: var(--ink-muted); font-size: 14px; line-height: 22px; }
/* each Buddhist Era year is a chapter; the year stays beside its news while scrolling */
.year-group { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.year-group + .year-group { margin-top: var(--space-8); }
.year { position: sticky; top: calc(var(--hh) + 80px); align-self: start; margin: 0; color: var(--ink); font-family: var(--font-display); font-size: 40px; line-height: 48px; font-weight: 500; font-variant-numeric: tabular-nums; }
.year-label { display: block; color: var(--ink-muted); font-family: var(--font-sans); font-size: 13px; line-height: 20px; font-weight: 500; }
.year-group .lac-news:first-child { padding-top: 0; border-top: 0; }
.year-group .news-list .lac-news:last-child { border-bottom: 0; }

/* Works page: the three stages are a real sequence, so they are numbered; each one also filters the list */
.stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); width: 100%; margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.stages li { display: flex; }
.stage { display: flex; flex-direction: column; gap: 2px; box-sizing: border-box; width: 100%; min-height: 48px; padding: var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; transition: border-color .15s ease-out, background-color .15s ease-out; }
.stage:hover { border-color: var(--ink); }
.stage[aria-pressed="true"] { border-color: var(--accent); background: var(--sky-soft); }
.stage:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.stage-step { color: var(--accent); font-size: 13px; line-height: 20px; font-weight: 500; }
.stage-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.stage-status { gap: var(--space-2); color: var(--ink); font-family: var(--font-display); font-size: 18px; line-height: 28px; font-weight: 600; }
.stage-count { color: var(--ink-muted); font-size: 13px; line-height: 20px; white-space: nowrap; }
.stage-desc { color: var(--ink-muted); font-size: 14px; line-height: 22px; }
.propose-panel { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-6); }
.propose-panel .promises { align-self: stretch; }

/* About page */
.section--tight { padding-block: var(--space-8) var(--space-12); border-top: 0; }
.mission { margin: var(--space-2) 0 0; max-width: 30em; color: var(--ink); font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 26px); line-height: 1.6; font-weight: 400; text-wrap: pretty; }
.do-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-6); }
.do-item { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "count unit" "name name" "desc desc"; align-items: baseline; gap: var(--space-1) var(--space-2); padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); text-decoration: none; transition: border-color .15s ease-out; }
.do-item:hover { border-color: var(--ink); }
.do-item:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.do-count { grid-area: count; font-family: var(--font-display); font-size: 40px; line-height: 48px; font-weight: 500; font-variant-numeric: tabular-nums; }
.do-unit { grid-area: unit; color: var(--ink-muted); font-size: 14px; line-height: 22px; }
.do-name { grid-area: name; margin-top: var(--space-2); font-family: var(--font-display); font-size: 20px; line-height: 30px; font-weight: 600; }
.do-name::after { content: " \2192"; color: var(--accent); }
.do-item:hover .do-name { text-decoration: underline; text-underline-offset: 5px; }
.do-desc { grid-area: desc; color: var(--ink-muted); font-size: 15px; line-height: 26px; }
.traits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--space-8); margin-top: var(--space-6); }
.trait { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6) 0 0; border-top: 1px solid var(--line); }
.trait.lac-panel { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
.trait p { margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 26px; }
.trait-name { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: 26px; line-height: 38px; font-weight: 600; }
.trait .trait-example { margin-top: auto; padding-top: var(--space-3); color: var(--ink); font-size: 14px; line-height: 24px; }
.trait-example > span:not(.nw) { display: block; color: var(--accent); font-size: 13px; line-height: 20px; font-weight: 500; }
.mark-parts { display: flex; flex-direction: column; margin: var(--space-4) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.mark-parts li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-4); align-items: start; padding: var(--space-4) 0; border-bottom: 1px solid var(--line); color: var(--ink-muted); font-size: 15px; line-height: 26px; }
.mark-parts strong { display: block; color: var(--ink); font-size: 16px; font-weight: 600; }
.mark-glyph { display: inline-flex; align-items: center; height: 26px; color: var(--accent); font-family: var(--font-mono); font-size: 16px; white-space: pre; }
.mark-glyph--dots { letter-spacing: .12em; }
.mark-cursor { display: inline-block; width: 8px; height: 20px; background: var(--brand-sky); }
.mark-stage { display: grid; place-items: center; min-height: 300px; margin: 0; padding: var(--space-12) var(--space-8); box-sizing: border-box; background-image: radial-gradient(circle, var(--line-strong) 1px, transparent 1.4px); background-size: 16px 16px; }
.mark-stage svg { width: 100%; max-width: 420px; height: auto; }
.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.team-role { display: flex; flex-direction: column; gap: var(--space-1); padding-top: var(--space-4); border-top: 1px solid var(--line-strong); }
.team-title { color: var(--ink-muted); font-size: 13px; line-height: 20px; font-weight: 500; }
.team-name { color: var(--ink); font-size: 17px; line-height: 28px; }
.team-name.lac-blank { font-size: 15px; }
.team-desc { color: var(--ink-muted); font-size: 14px; line-height: 22px; }
.join-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-8); padding: var(--space-8); }
.join-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.section--cta { border-top: 0; padding-top: 0; }

/* Join page: fields, choices, the consent line and the status box are Brand Book components */
.join-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-12); align-items: start; padding-block: var(--space-4) var(--space-16); }
.join-intro { position: sticky; top: calc(var(--hh) + var(--space-6)); display: flex; flex-direction: column; gap: var(--space-4); }
.join-main { display: flex; flex-direction: column; gap: var(--space-12); min-width: 0; }
/* after you apply: a real sequence, so it is numbered */
.steps { margin: var(--space-2) 0 0; padding: 0; list-style: none; counter-reset: step; border-top: 1px solid var(--line); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4) 0; border-bottom: 1px solid var(--line); color: var(--ink-muted); font-size: 15px; line-height: 26px; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); font-size: 13px; font-weight: 600; }
.steps strong { display: block; color: var(--ink); font-weight: 600; }
.join-form, .form-done { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-8); }
.form-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.form-title { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 36px; font-weight: 600; }
.form-note { margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 22px; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.choice-list { display: flex; flex-direction: column; gap: var(--space-2); }
.picked { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.consent { padding-top: var(--space-2); border-top: 1px solid var(--line); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.form-done { align-items: flex-start; }
.form-done p { margin: 0; color: var(--ink-muted); }
.form-done b { color: var(--ink); font-weight: 500; }
.privacy-title { margin: 0 0 var(--space-4); font-family: var(--font-display); font-size: 20px; line-height: 30px; font-weight: 600; }
.privacy-list { margin: 0; border-top: 1px solid var(--line); }
.privacy-list div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-6); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.privacy-list dt { color: var(--ink); font-size: 15px; line-height: 26px; font-weight: 500; }
.privacy-list dd { margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 26px; }
/* honeypot field: kept out of sight and out of the tab order */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* 404 */
.notfound { padding-block: var(--space-16); }
.notfound-inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.notfound-code { margin: 0; color: var(--accent); font-family: var(--font-mono); font-size: 56px; line-height: 1.2; font-weight: 500; }
.notfound-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-2); }

/* ---------- Article page ---------- */
.reading-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 3px; pointer-events: none; }
.reading-progress span { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; }
.article-head { padding-block: var(--space-8) var(--space-8); }
.article-head-inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); max-width: calc(var(--measure) + 240px); }
.crumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); color: var(--ink-muted); font-size: 14px; line-height: 22px; font-weight: 500; }
.crumbs a { color: var(--ink-muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.article-labels { justify-content: flex-start; gap: var(--space-3); }
.article-title { margin: 0; font-family: var(--font-display); font-size: clamp(30px, 3.6vw, 44px); line-height: 1.4; font-weight: 600; text-wrap: balance; }
.article-dek { margin: 0; max-width: var(--measure); color: var(--ink-muted); font-size: 19px; line-height: 33px; text-wrap: pretty; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); width: 100%; padding-top: var(--space-4); border-top: 1px solid var(--line); color: var(--ink-muted); font-size: 14px; line-height: 22px; }
.article-meta b { color: var(--ink); font-weight: 500; }
.article-tools { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; }
/* the topic picture is decoration: the article opens on its words */
.article-cover { display: none; }

.article-layout { display: grid; grid-template-columns: 220px minmax(0, var(--measure)); justify-content: center; gap: var(--space-16); padding-block: var(--space-8) var(--space-16); }
.toc { position: sticky; top: calc(var(--hh) + var(--space-6)); align-self: start; }
.toc-title { margin: 0 0 var(--space-3); color: var(--ink-muted); font-size: 13px; line-height: 20px; font-weight: 500; }
.toc ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line); }
.toc a { display: block; margin-left: -1px; padding: var(--space-2) var(--space-4); border-left: 2px solid transparent; color: var(--ink-muted); font-size: 14px; line-height: 22px; text-decoration: none; transition: color .15s ease-out, border-color .15s ease-out; }
.toc a:hover { color: var(--ink); }
.toc a.is-active { border-left-color: var(--accent); color: var(--ink); }
.toc a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.prose { min-width: 0; color: var(--ink); font-size: 18px; line-height: 32px; }
.prose > * { margin: 0; }
.prose > * + * { margin-top: var(--space-6); }
.prose h2 { margin-top: var(--space-16); font-family: var(--font-display); font-size: 28px; line-height: 42px; font-weight: 600; scroll-margin-top: calc(var(--hh) + var(--space-4)); }
.prose h2 + * { margin-top: var(--space-4); }
.prose strong { font-weight: 600; }
.prose a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.prose .lac-cite { margin-block: var(--space-8); }
.checklist { display: flex; flex-direction: column; gap: var(--space-3); padding: 0; list-style: none; }
.checklist li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); }
.checklist li::before { content: "[ ]"; color: var(--accent); font-family: var(--font-mono); font-size: 16px; white-space: pre; }
.article-end { display: flex; flex-direction: column; gap: var(--space-6); margin-top: var(--space-16); padding-top: var(--space-8); border-top: 1px solid var(--line); }
.prose .refs-title { margin: 0; font-size: 14px; line-height: 22px; font-weight: 500; color: var(--ink-muted); }
.refs { margin: 0; padding-left: var(--space-6); color: var(--ink-muted); font-size: 15px; line-height: 26px; }
.notice { margin: 0; padding: var(--space-4) var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink-muted); font-size: 16px; line-height: 28px; }
.notice strong { color: var(--ink); }
.ai-note { margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 22px; }
.related { padding-block: var(--space-12) var(--space-16); border-top: 1px solid var(--line); }

/* ---------- Narrow screens ---------- */
@media (max-width: 900px) {
  .cards, .paths, .promises--row, .do-grid, .traits { grid-template-columns: minmax(0, 1fr); }
  .split, .faq, .page-head-split, .join-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .join-panel { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .join-intro { position: static; }
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stages { grid-template-columns: minmax(0, 1fr); }
  .filterbar-inner { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .search { width: auto; }
  .year-group { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .year { position: static; font-size: 32px; line-height: 40px; }
  .year-label { display: inline; margin-right: var(--space-2); }
  .article-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .toc { position: static; padding: var(--space-4) var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); }
  .toc ol { border-left: 0; }
  .toc a { margin-left: 0; padding-inline: 0; border-left: 0; }
}
@media (max-width: 640px) {
  .wrap { padding-left: max(var(--space-4), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-4), env(safe-area-inset-right, 0px)); }
  .section { padding-block: var(--space-12); }
  .section--first { padding-top: var(--space-6); }
  .page-head { padding-block: var(--space-8) var(--space-6); }
  .path { padding: var(--space-4); }
  .path-title { font-size: 19px; line-height: 30px; }
  .cta { padding: var(--space-6) var(--space-4); }
  .cta .lac-btn { width: 100%; }
  .suggest-panel, .propose-panel, .join-panel { padding: var(--space-6) var(--space-4); }
  /* levels and stages: one tap target each, side by side, the name and count only */
  .stage { padding: var(--space-3); }
  .stage-head { flex-direction: column; align-items: flex-start; gap: 0; }
  .stage-status { font-size: 15px; line-height: 24px; }
  .pillar-head { grid-template-columns: auto minmax(0, 1fr); }
  .pillar-more { grid-column: 2; justify-self: start; }
  .feature-card { padding: var(--space-4); }
  .feature-card-title { font-size: 21px; line-height: 34px; }
  .join-layout { padding-top: 0; }
  .join-form, .form-done { padding: var(--space-6) var(--space-4); }
  .field-row, .choice-grid { grid-template-columns: minmax(0, 1fr); }
  .privacy-list div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .mark-stage { min-height: 200px; padding: var(--space-8) var(--space-4); }
  .notfound-code { font-size: 40px; }
  .article-tools { margin-left: 0; }
  .prose { font-size: 17px; line-height: 31px; }
  .prose h2 { font-size: 23px; line-height: 36px; margin-top: var(--space-12); }
  .article-dek { font-size: 17px; line-height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .path, .level-tile, .stage, .do-item, .toc a { transition: none; }
}

/* Print: pages print as plain black on white, with link addresses written out */
@media print {
  :root, [data-theme] { --surface: #fff; --surface-raised: #fff; --surface-panel: #fff; --ink: #000; --ink-muted: #333; --line: #bbb; --line-strong: #888; --accent: #000; --link: #000; color-scheme: light; }
  body { background: #fff; color: #000; }
  .skip, .lac-header, .lac-footer, .toc, .article-tools, .related, .reading-progress, .lac-to-top, .lac-mobile-menu, .article-cover, .filterbar { display: none !important; }
  .article-head { padding-top: 0; }
  .article-title { font-size: 24pt; line-height: 1.3; }
  .article-dek { font-size: 13pt; line-height: 1.6; }
  .article-layout { display: block; padding: 0; }
  .prose { font-size: 12pt; line-height: 1.75; }
  .prose h2 { font-size: 16pt; line-height: 1.4; margin-top: 18pt; break-after: avoid; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .lac-cite { break-inside: avoid; background: none; }
}

/* News, works and the inner pages in the magazine direction */
.news-tally { margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 24px; }
/* sections are set apart by space and surface, not by hairlines */
.section { border-top: 0; padding-block: 88px; }
.section--tight { padding-block: var(--space-8) var(--space-12); }

/* news: the newest analysis on the club's blue */
.feature-card.news-cover { padding: var(--space-8) var(--space-12) var(--space-8) var(--space-8); border: 0; border-radius: 20px; background: var(--cover); color: var(--on-cover); }
.news-cover .feature-card-text { max-width: 48em; gap: var(--space-3); }
.news-cover .feature-card-title { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.35; }
.news-cover .feature-card-link { color: var(--on-cover); }
.news-cover .feature-card-link:focus-visible::after { box-shadow: 0 0 0 3px var(--on-cover); }
.news-cover .feature-card-meta { color: var(--on-cover-muted); }
.news-cover .feature-card-summary { color: var(--on-cover); font-size: 17px; line-height: 30px; }
.news-cover .feature-card-more { display: inline-flex; align-items: center; min-height: 48px; margin-top: var(--space-2); padding: 0 var(--space-6); border-radius: var(--radius-full); background: #ffffff; color: #1f44b4; font-weight: 600; text-decoration: none; }
/* news: the list beside a column of the principles and the request for news */
.news-layout { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-12) 64px; align-items: start; }
.news-aside { position: sticky; top: calc(var(--hh) + 80px); display: flex; flex-direction: column; gap: var(--space-6); margin-top: var(--space-6); }
.news-aside .policy { padding: var(--space-6); border-radius: 18px; background: var(--surface-panel); }
.news-aside .promises { border-top: 0; }
.news-aside .promises li { border-bottom: 0; padding-block: var(--space-2); }
.news-ask { display: flex; flex-direction: column; gap: var(--space-2); padding: 0 var(--space-6); }
.news-ask .suggest-title { font-size: 20px; line-height: 30px; }
.news-ask .lede { font-size: 15px; line-height: 26px; }
.year-group { grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-6); border-top: 0; padding-top: var(--space-4); }
.year-group + .year-group { margin-top: var(--space-12); }
.year { font-size: 36px; line-height: 44px; color: var(--accent); }

/* works: the three stages as one path, the projects as wide entries with who they need */
.page-head-grid > .stages { grid-column: 1 / -1; display: flex; gap: 0; margin-top: 0; }
.page-head-grid > .stages li { position: relative; flex: 1 1 0; min-width: 0; }
.page-head-grid > .stages li + li { padding-left: var(--space-8); }
.page-head-grid > .stages li + li::before { content: ""; position: absolute; left: 6px; top: 50%; width: 18px; border-top: 2px solid var(--line-strong); }
.page-head-grid > .stages li + li::after { content: ""; position: absolute; left: 20px; top: calc(50% - 4px); border: 5px solid transparent; border-left: 7px solid var(--line-strong); border-right: 0; }
#works-grid.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
#works-grid .lac-card.lac-card--work { padding: var(--space-6); border: 0; border-radius: 18px; background: var(--surface-raised); }
#works-grid .lac-card--work .lac-card-title { font-size: 22px; line-height: 34px; }
#works-grid .lac-card--work .lac-card-meta { color: var(--ink); font-size: 14px; }
.cards .lac-card--work:last-child { border-bottom: 0; }
.propose { background: var(--surface-panel); }
.propose-panel.lac-panel { border: 0; }

/* about: the mission as the page's one large statement */
.mission { max-width: 22em; font-size: clamp(24px, 2.8vw, 36px); line-height: 1.55; font-weight: 500; }

@media (max-width: 900px) {
  .news-layout { grid-template-columns: minmax(0, 1fr); }
  .news-aside { position: static; }
  #works-grid.cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .section { padding-block: 56px; }
  .feature-card.news-cover { padding: var(--space-6) var(--space-4); }
  .news-ask { padding: 0; }
  .year-group { grid-template-columns: minmax(0, 1fr); }
  .year { font-size: 28px; line-height: 36px; }
  .page-head-grid > .stages { flex-direction: column; }
  .page-head-grid > .stages li + li { padding: 20px 0 0; }
  .page-head-grid > .stages li + li::before { left: 24px; top: 2px; width: 0; height: 12px; border-top: 0; border-left: 2px solid var(--line-strong); }
  .page-head-grid > .stages li + li::after { left: 20px; top: 12px; border: 5px solid transparent; border-top: 7px solid var(--line-strong); border-bottom: 0; }
  .page-head-grid > .stages .stage { padding: var(--space-2) var(--space-4); }
  .page-head-grid > .stages .stage-head { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-3); }
  #works-grid .lac-card.lac-card--work { padding: var(--space-4); }
}

/* =====================================================================
   Magazine direction (after v32): one lead story on the club's blue, and the club's own way of marking
   statements as its visual language. Dashed = what a party claims, solid = what the court has ordered,
   hollow = not yet decided. Surfaces change by tone, not by lines; sections differ in composition.
   ===================================================================== */
/* the lead story and the case map are Brand Book components (LeadStory, CaseMap in components.css);
   their blue comes from tokens.css (--cover, --cover-raised, --on-cover, --on-cover-muted) */

.section-title { margin: 0 0 var(--space-8); color: var(--ink); font-family: var(--font-display); font-size: clamp(26px, 2.6vw, 36px); line-height: 1.35; font-weight: 600; text-wrap: balance; }

/* masthead: the club in one line, beside what it does */


/* read now: the published article with its own diagram, the news beside it */
.flow { margin: var(--space-6) 0; padding: var(--space-6); border-radius: 18px; background: var(--surface-panel); }
.flow-title { margin-bottom: var(--space-4); color: var(--ink); font-size: 15px; line-height: 24px; font-weight: 600; }
.flow-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr); align-items: center; gap: var(--space-3); }
.flow-row + .flow-row { margin-top: var(--space-3); }
.flow-step { margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--surface-raised); color: var(--ink); font-size: 15px; line-height: 24px; }
.flow-step small { display: block; margin-top: 2px; color: var(--ink-muted); font-size: 13px; line-height: 20px; }
.flow-row--strict .flow-step:last-child { background: var(--cover); color: var(--on-cover); font-weight: 600; }
.flow-row--strict .flow-step:last-child small { color: var(--on-cover-muted); font-weight: 400; }
.flow-row--strict .cite-mark { color: var(--on-cover); }
.flow-arrow { margin: 0; color: var(--accent); font-size: 20px; line-height: 1; }
.latest { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.latest-list { display: grid; gap: var(--space-2); width: 100%; margin: 0; padding: 0; list-style: none; }
.latest-list a { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); margin-inline: calc(-1 * var(--space-4)); border-radius: 12px; color: var(--ink); font-size: 16px; line-height: 26px; font-weight: 500; text-decoration: none; transition: background-color .15s ease-out; }
.latest-list a:hover { background: var(--surface-panel); }
.latest-list a:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.latest-list time { color: var(--ink-muted); font-size: 13px; line-height: 20px; font-weight: 400; }

/* being written: an index of coming articles by category, on one tone step down */

/* join in: the invitation beside the projects that need people */
.joinin-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-12) 72px; align-items: start; }
.joinin-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.joinin-text .section-title { margin: 0; }
.joinin-lead { margin: 0; color: var(--ink); font-size: 17px; line-height: 30px; }
.joinin-projects { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-6) var(--space-8); border-radius: 20px; background: var(--surface-panel); }
.joinin-projects-title { margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 24px; font-weight: 600; }
.project-list { display: grid; width: 100%; margin: 0; padding: 0; list-style: none; }
.project-list li { padding: var(--space-3) 0; }
.project-list a { color: var(--ink); font-family: var(--font-display); font-size: 20px; line-height: 30px; font-weight: 600; text-decoration: none; }
.project-list a:hover { text-decoration: underline; text-underline-offset: 5px; }
.project-list .proj-needs { display: block; color: var(--ink-muted); font-size: 14px; line-height: 22px; }

/* a press answers at once; nothing moves by itself */
.lac-btn, .lac-tag, .stage, .lac-theme-toggle, .lac-menu-toggle { transition-property: background-color, border-color, color, transform; transition-duration: .15s, .15s, .15s, .12s; transition-timing-function: ease-out; }
.lac-btn:active, .lac-tag:active, .stage:active, .lac-theme-toggle:active, .lac-menu-toggle:active { transform: scale(.97); }

@media (max-width: 640px) {
  .flow { padding: var(--space-4); }
  .flow-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .flow-arrow { transform: rotate(90deg); justify-self: start; margin-left: var(--space-4); }
  .joinin-projects { padding: var(--space-4) var(--space-6); }
}
@media (prefers-reduced-motion: reduce) {
  .lac-btn, .lac-tag, .stage, .lac-theme-toggle, .lac-menu-toggle, .latest-list a { transition: none; }
  .lac-btn:active, .lac-tag:active, .stage:active, .lac-theme-toggle:active, .lac-menu-toggle:active { transform: none; }
}

.page-head-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: end; gap: var(--space-6) var(--space-12); }
/* levels: one row of compact choices */

/* a readable article: the section of law in the club's brackets on the blue, beside the entry */

/* being written: the whole width as one index on a tone step */
/* filtered: the matches in two groups */

@media (max-width: 900px) {
  .page-head-grid { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   Briefs: news analyses (news/<id>.html) and knowledge articles built from the four-part prompts
   by tools/build-page.js. Same reading layout as an article; each part is numbered.
   ===================================================================== */
.brief-asof { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink-muted); font-size: 13px; line-height: 20px; font-weight: 500; }
.brief-asof::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* the four parts: a numbered heading each */
.prose .brief-h2 { display: flex; align-items: baseline; gap: var(--space-3); }
.brief-num { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--sky-ink); font-family: var(--font-mono); font-size: 16px; line-height: 1; font-weight: 500; transform: translateY(-4px); }
.prose .brief-h3 { margin-top: var(--space-8); font-family: var(--font-display); font-size: 22px; line-height: 32px; font-weight: 500; }
.prose .brief-h3 + * { margin-top: var(--space-3); }

/* 1. summary on a lit panel */
.brief-summary { padding: var(--space-6) var(--space-6) var(--space-6) var(--space-8); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: inset 3px 0 0 var(--accent); font-size: 19px; line-height: 34px; }
.brief-summary > * { margin: 0; }
.brief-summary > * + * { margin-top: var(--space-3); }

/* key and value rows (lac-facts) can hold paragraphs and lists */
.prose .lac-facts dd > * { margin: 0; }
.prose .lac-facts dd > * + * { margin-top: var(--space-2); }
.prose .lac-facts ul, .prose .lac-facts ol { padding-left: var(--space-6); }

/* lines tagged fact / argument / ruling / opinion, on a thin path */
.claims { position: relative; display: flex; flex-direction: column; gap: var(--space-4); padding: 0 0 0 var(--space-6); list-style: none; }
.claims::before { content: ""; position: absolute; left: 4px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(var(--accent), color-mix(in srgb, var(--line-strong) 60%, transparent)); }
.claims > li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.claims > li > p, .claims > li > ul { margin: 0; }
.claims > li::before { content: ""; position: absolute; left: calc(-1 * var(--space-6) + 1px); top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1.5px var(--line-strong); }

/* points of view and audiences: each sub-part of part 3 on its own panel */
.brief-card { padding: var(--space-6); }
.prose .brief-card > .brief-h3 { margin-top: 0; font-size: 20px; line-height: 30px; }
.brief-card > * { margin: 0; }
.brief-card > * + * { margin-top: var(--space-3); }

/* 4. sources, numbered so [1] in the text can point at them */
.source-list { display: flex; flex-direction: column; gap: var(--space-3); padding: 0; list-style: none; counter-reset: src; }
.source-list > li { counter-increment: src; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); font-size: 16px; line-height: 26px; scroll-margin-top: calc(var(--hh) + var(--space-6)); }
.source-list > li::before { content: counter(src); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sky-soft); color: var(--sky-ink); font-family: var(--font-mono); font-size: 13px; }
.source-list > li:target { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.source-list a { word-break: break-word; }
.ref { margin-left: 2px; font-family: var(--font-mono); font-size: .75em; vertical-align: super; line-height: 0; }
.prose .ref a { text-decoration: none; }

@media (max-width: 640px) {
  .brief-summary { padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6); font-size: 17px; line-height: 30px; }
  .brief-num { width: 30px; height: 30px; font-size: 14px; }
  .brief-card { padding: var(--space-4); }
}
@media print {
  .brief-summary, .source-list > li { background: none; box-shadow: none; }
}
.brief-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
.brief-table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 27px; }
.brief-table th, .brief-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.brief-table th { color: var(--ink-muted); font-size: 14px; font-weight: 500; background: var(--surface-raised); }
.brief-table tr:last-child td { border-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .feature-card, .feature-card-more::after { transition: none; }
  .feature-card:hover { transform: none; }
}

/* =====================================================================
   Briefs, easier to read: a lead note, the timeline with a date column and folding years,
   a claim filter, stacked points, decided / open columns, and short source rows
   ===================================================================== */
.toc { max-height: calc(100vh - var(--hh) - var(--space-16)); overflow-y: auto; scrollbar-width: thin; }
.toc.is-scrollable:not(.at-end) { -webkit-mask-image: linear-gradient(#000 calc(100% - 48px), transparent); mask-image: linear-gradient(#000 calc(100% - 48px), transparent); }
.toc.is-scrollable:not(.at-start):not(.at-end) { -webkit-mask-image: linear-gradient(transparent, #000 32px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(transparent, #000 32px, #000 calc(100% - 48px), transparent); }
.toc.is-scrollable.at-end:not(.at-start) { -webkit-mask-image: linear-gradient(transparent, #000 32px); mask-image: linear-gradient(transparent, #000 32px); }
/* how to read the page: the four tags as a key, each real chip beside what it means */
.brief-howto-body .claims:not(.has-dates) { margin: var(--space-3) 0; border-top: 0; }
.brief-howto-body .claims:not(.has-dates) > li { padding: var(--space-1) 0; border-bottom: 0; }
.brief-howto-body .claims .tl-body { flex-direction: row; align-items: baseline; gap: var(--space-3); }
.brief-howto-body .claims .lac-claim { flex: none; min-width: 96px; justify-content: flex-start; }
.brief-howto-body .claims:not(.has-dates) > li > .tl-body > p { margin: 0; font-size: 16px; line-height: 26px; }
.toc-sub { margin: 0 0 var(--space-2); padding: 0; list-style: none; }
.toc-sub a { padding: 3px var(--space-4) 3px var(--space-8); font-size: 14px; line-height: 22px; }
.brief-lead { padding: var(--space-3) var(--space-4); border-left: 2px solid var(--line-strong); color: var(--ink-muted); font-size: 15px; line-height: 26px; }
.brief-lead > * { margin: 0; }
.prose .lac-case-status { margin-top: var(--space-6); }
.prose .lac-facts { padding: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }

/* the timeline: date | tag and what happened, on one lit line */
.claims.has-dates { gap: 0; padding-left: 0; }
.claims.has-dates::before { left: 127px; top: 18px; bottom: 18px; }
.claims.has-dates > li { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 32px; padding: var(--space-3) 0; }
.claims.has-dates > li::before { left: 124px; top: calc(var(--space-3) + 8px); }
.tl-date { padding-top: 1px; color: var(--ink); font-size: 14px; line-height: 22px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.tl-body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.prose .tl-body > p { margin: 0; font-size: 16px; line-height: 28px; }
.prose .tl-body > ul { margin: 0; padding-left: 20px; font-size: 15px; line-height: 26px; }
.claims > li[data-claim="ruling"]::before { background: var(--accent); box-shadow: 0 0 0 1.5px var(--accent); }
/* folding years */
.tl-year { border-top: 1px solid var(--line); }
.prose > .tl-year + .tl-year { margin-top: 0; }
.tl-year:last-of-type { border-bottom: 1px solid var(--line); }
.tl-year > summary { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) 0; cursor: pointer; list-style: none; }
.tl-year > summary::-webkit-details-marker { display: none; }
.tl-year > summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border: solid var(--ink-muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .2s ease-out; }
.tl-year[open] > summary::after { transform: rotate(-135deg); }
.tl-year > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.tl-year-label { color: var(--ink); font-family: var(--font-display); font-size: 22px; line-height: 32px; font-weight: 500; }
.tl-year-count { padding: 0 10px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-muted); font-size: 14px; line-height: 22px; }
.prose .tl-year > .claims { margin: 0 0 var(--space-4); }
/* the claim filter */
.claim-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); }
.claim-filter-label { margin-right: var(--space-1); color: var(--ink-muted); font-size: 14px; line-height: 22px; }
.claim-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border: 1px solid transparent; border-radius: var(--radius-full); background: none; color: var(--ink); font: inherit; font-size: 14px; line-height: 22px; cursor: pointer; }
.claim-chip:first-of-type { padding-left: 12px; border-color: var(--line-strong); }
.claim-chip:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.claim-chip.is-selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.claim-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.claim-chip .chip-count { margin: 0; color: var(--ink-muted); }
.prose .claim-filter-note { margin: var(--space-2) 0 0; color: var(--ink-muted); font-size: 14px; line-height: 22px; }
.prose .claim-filter-note:empty { display: none; }
#prose[data-claim-filter="fact"] .tl-item:not([data-claim="fact"]),
#prose[data-claim-filter="argument"] .tl-item:not([data-claim="argument"]),
#prose[data-claim-filter="ruling"] .tl-item:not([data-claim="ruling"]),
#prose[data-claim-filter="opinion"] .tl-item:not([data-claim="opinion"]) { display: none; }

/* issues and doctrines: the point in bold, its explanation under it */
.prose .brief-points { display: flex; flex-direction: column; margin-bottom: 0; border-top: 1px solid var(--line); }
.brief-point { padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.brief-point dt { color: var(--ink); font-size: 17px; line-height: 28px; font-weight: 600; }
.brief-point dd { margin: var(--space-1) 0 0; color: var(--ink-muted); font-size: 16px; line-height: 28px; }
.brief-point dd > * { margin: 0; }
.brief-point dd > * + * { margin-top: var(--space-2); }

/* decided and not yet decided, side by side, in the club's marks: ordered = solid, not yet decided = hollow
   (dashed is kept for what a party claims) */
.brief-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.brief-col { padding: var(--space-6); }
.prose .brief-col-title { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: 18px; line-height: 28px; font-weight: 600; }
.brief-col-title::before { content: ""; flex: none; width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%; }
.brief-col.is-done .brief-col-title::before { background: var(--accent); }
.prose .brief-col.is-open { border-color: var(--line-strong); background: transparent; }
.brief-col.is-open .brief-col-title::before { border: 2px solid var(--ink-muted); }
.prose .brief-col ul { margin: 0; padding-left: 20px; font-size: 15px; line-height: 26px; }
.brief-col li + li { margin-top: var(--space-1); }

/* sources: type, title as the link, then date and site; long lists fold after ten (article.js) */
.source-list > li { align-items: start; }
.src-main { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.src-type { padding: 0 8px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-muted); font-size: 13px; line-height: 20px; font-weight: 600; }
.src-type--court { background: var(--sky-soft); color: var(--sky-ink); }
.src-type--statement { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--ink); }
.prose .src-title { color: var(--ink); font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.prose a.src-title:hover { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.prose a.src-title::after { content: "\2197"; margin-left: 4px; color: var(--link); font-size: .85em; }
.src-meta { color: var(--ink-muted); font-size: 14px; line-height: 22px; }
.src-head { display: block; }
.src-head > .dagger { margin-left: 4px; }
.source-list.is-collapsed > li:nth-child(n + 11) { display: none; }
.prose .source-more { margin-top: var(--space-3); }

@media (max-width: 760px) {
  .claims.has-dates::before { left: 4px; top: 10px; bottom: 10px; }
  .claims.has-dates > li { grid-template-columns: minmax(0, 1fr); row-gap: 4px; padding: var(--space-3) 0 var(--space-3) var(--space-6); }
  .claims.has-dates > li::before { left: 1px; top: calc(var(--space-3) + 7px); }
  .tl-date { text-align: left; }
  .brief-columns { grid-template-columns: minmax(0, 1fr); }
  .brief-col { padding: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
  .tl-year > summary::after { transition: none; }
}
@media print {
  .claim-filter, .source-more { display: none !important; }
  .source-list.is-collapsed > li { display: grid !important; }
}

/* =====================================================================
   Briefs, guided: "know it in 30 seconds", terms that explain themselves,
   and a reading bar with the contents as a sheet on phones and tablets
   ===================================================================== */
/* know it in 30 seconds: the lit panel at the top of part 1; the full summary under it is plain text */
.brief-quick { padding: var(--space-6) var(--space-8) var(--space-4); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: inset 3px 0 0 var(--accent); }
.brief-quick > .lac-eyebrow { margin: 0; }
.prose .brief-quick-list { display: flex; flex-direction: column; margin: var(--space-3) 0 0; }
.brief-quick-list > div { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: var(--space-6); padding: var(--space-4) 0; border-top: 1px solid var(--line); }
.brief-quick-list > div:first-child { border-top: 0; }
.brief-quick-list dt { padding-top: 2px; color: var(--sky-ink); font-size: 16px; line-height: 28px; font-weight: 600; }
.brief-quick-list dd { margin: 0; color: var(--ink); font-size: 18px; line-height: 32px; }
.brief-quick-list dd > p { margin: 0; }
.brief-quick-sub { margin: var(--space-1) 0; padding-left: var(--space-6); }
.brief-quick-sub li + li { margin-top: 2px; }
.prose .brief-summary--full { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 17px; line-height: 30px; }
.prose .brief-full-label { color: var(--ink-muted); font-size: 13px; line-height: 20px; font-weight: 500; }

/* terms: a dotted line under the word, its meaning one tap away */
.prose a.term { color: inherit; text-decoration: underline dotted; text-decoration-color: color-mix(in srgb, var(--accent) 85%, transparent); text-decoration-thickness: 2px; text-underline-offset: 5px; cursor: help; }
.prose a.term:hover, .prose a.term[aria-expanded="true"] { color: var(--link); text-decoration-style: solid; text-decoration-thickness: 1px; }
.prose a.term:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.term-pop { position: absolute; z-index: 60; width: min(360px, calc(100vw - 32px)); box-sizing: border-box; padding: var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: 0 18px 48px rgb(0 0 0 / .35); color: var(--ink); }
.term-pop:focus { outline: none; }
.term-pop:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.term-pop-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-2); margin: 0; }
.term-pop-head .glossary-term { font-size: 16px; line-height: 24px; font-weight: 600; }
.term-pop-head .glossary-th { color: var(--ink-muted); font-size: 14px; line-height: 22px; }
.term-pop-def { margin: var(--space-2) 0 0; font-size: 16px; line-height: 27px; }
.term-pop-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); font-size: 14px; line-height: 22px; }
.term-pop-foot a { color: var(--link); text-underline-offset: 3px; }
.term-pop-close { min-height: 32px; padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-full); background: none; color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
.term-pop-close:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* the glossary at the end: the terms this page uses, in the order a reader meets them */
.prose .glossary-note { color: var(--ink-muted); font-size: 16px; line-height: 27px; }
.prose .glossary-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: 0; }
.glossary-item { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); scroll-margin-top: calc(var(--hh) + var(--space-6)); }
.glossary-item:target { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.glossary-item dt { display: flex; flex-direction: column; }
.glossary-term { color: var(--ink); font-size: 16px; line-height: 24px; font-weight: 600; }
.glossary-th { color: var(--ink-muted); font-size: 14px; line-height: 22px; font-weight: 500; }
.glossary-item dd { margin: var(--space-2) 0 0; color: var(--ink-muted); font-size: 16px; line-height: 27px; }

/* the reading bar and the contents sheet: only where the contents are not beside the text */
.read-bar { display: none; }
.toc-sheet { width: 100%; max-width: 640px; max-height: min(80vh, 640px); margin: auto auto 0; padding: 0; border: 1px solid var(--line-strong); border-bottom: 0; border-radius: 20px 20px 0 0; background: var(--surface-raised); color: var(--ink); box-shadow: 0 -16px 48px rgb(0 0 0 / .4); }
.toc-sheet[open] { display: flex; flex-direction: column; }
.toc-sheet::backdrop { background: rgb(4 7 20 / .55); }
.toc-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-3) var(--space-6); border-bottom: 1px solid var(--line); }
.toc-sheet-title { margin: 0; color: var(--ink-muted); font-size: 13px; line-height: 20px; font-weight: 500; }
.toc-sheet-close { min-height: 36px; padding: 0 var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-full); background: none; color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
.toc-sheet-close:focus-visible, .toc-sheet a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.toc-sheet-body { overflow-y: auto; padding: var(--space-2) var(--space-6) max(var(--space-6), env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain; }
.toc-sheet ol { margin: 0; padding: 0; list-style: none; }
.toc-sheet a { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 16px; line-height: 24px; font-weight: 500; text-decoration: none; }
.toc-sheet .toc-sub a { padding: 8px 0 8px var(--space-4); color: var(--ink-muted); font-size: 16px; line-height: 24px; font-weight: 400; }
.toc-sheet a.is-active { color: var(--link); font-weight: 600; }
.toc-sheet a.is-active::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 var(--space-2) 2px 0; border-radius: 50%; background: var(--accent); }
@media (max-width: 900px) {
  .read-bar { position: fixed; left: max(var(--space-4), env(safe-area-inset-left, 0px)); right: calc(max(var(--space-6), env(safe-area-inset-right, 0px)) + 44px + var(--space-3)); bottom: max(var(--space-6), env(safe-area-inset-bottom, 0px)); z-index: 40; display: flex; align-items: center; gap: var(--space-2); max-width: 520px; height: 44px; box-sizing: border-box; padding: 0 var(--space-4) 0 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-full); background: color-mix(in srgb, var(--surface-raised) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgb(0 0 0 / .25); color: var(--ink); font: inherit; text-align: left; cursor: pointer; visibility: hidden; opacity: 0; transform: translateY(8px); transition: opacity .2s ease-out, transform .2s ease-out, visibility 0s linear .2s; }
  .read-bar.is-shown { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .read-bar:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
  .read-bar-part { flex: none; padding: 0 10px; border-radius: var(--radius-full); background: var(--sky-soft); color: var(--sky-ink); font-size: 13px; line-height: 30px; font-weight: 500; }
  .read-bar-part:empty { display: none; }
  .read-bar-label { flex: 1; min-width: 0; overflow: hidden; padding-left: 4px; font-size: 14px; line-height: 22px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
  .read-bar-icon { flex: none; width: 8px; height: 8px; border: solid var(--ink-muted); border-width: 1.5px 0 0 1.5px; transform: translateY(2px) rotate(45deg); }
  .lac-menu-open .read-bar { display: none; }
}
@media (max-width: 760px) {
  .brief-quick { padding: var(--space-4) var(--space-4) var(--space-2) var(--space-6); }
  .brief-quick-list > div { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: var(--space-3) 0; }
  .brief-quick-list dt { padding-top: 0; font-size: 14px; line-height: 22px; }
  .brief-quick-list dd { font-size: 17px; line-height: 30px; }
  .prose .glossary-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .term-pop { position: fixed; top: auto !important; left: 12px !important; right: 12px; bottom: max(12px, env(safe-area-inset-bottom, 0px)); width: auto; box-shadow: 0 -12px 40px rgb(0 0 0 / .4); }
}
@media (prefers-reduced-motion: reduce) {
  .read-bar { transition: none; }
}
@media print {
  .read-bar, .toc-sheet, .term-pop { display: none !important; }
  .prose a.term { text-decoration: none; }
  .brief-quick { background: none; box-shadow: none; }
}
/* the cover label on a phone: the case code shrinks to fit instead of running past the frame */
@media (max-width: 640px) {
  .article-cover.lac-card-cover--art .lac-card-cover-code { max-width: calc(100% - var(--space-8)); box-sizing: border-box; padding: var(--space-1) var(--space-4); font-size: clamp(18px, 6.4vw, 28px); line-height: 1.4; white-space: normal; text-align: center; }
}

/* =====================================================================
   Briefs, editorial: the point first (slim cover, contents as a button on narrow screens, the reading note folded),
   a colour per kind of statement and per group, and thin rules instead of boxes outside the three key panels
   ===================================================================== */
.article-cover--slim { aspect-ratio: auto; height: 176px; margin-top: var(--space-8); }

/* the timeline marks take the colour of their kind; the shapes stay, so colour is never the only cue */
.claims > li[data-claim="fact"]::before { background: var(--ink); box-shadow: 0 0 0 1.5px var(--ink); }
.claims > li[data-claim="argument"]::before { background: linear-gradient(90deg, var(--amber-ink) 50%, var(--surface) 50%); box-shadow: 0 0 0 1.5px var(--amber-ink); }
.claims > li[data-claim="opinion"]::before { background: var(--surface); box-shadow: 0 0 0 1.5px var(--violet-ink); }
.claim-chip.is-selected { border-color: var(--line-strong); background: color-mix(in srgb, var(--ink) 8%, transparent); }

/* how to read this page: a folded note under the claim filter (or above part 1 when there is no timeline) */
.prose > .brief-howto, .prose > .claim-filter + .claim-filter-note + .brief-howto { margin-top: var(--space-3); }
.brief-howto > summary { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; color: var(--link); font-size: 14px; line-height: 22px; font-weight: 500; cursor: pointer; list-style: none; }
.brief-howto > summary::-webkit-details-marker { display: none; }
.brief-howto > summary::before { content: "i"; display: grid; place-items: center; width: 18px; height: 18px; box-sizing: border-box; border: 1.5px solid currentColor; border-radius: 50%; font-family: var(--font-mono); font-size: 11px; line-height: 1; font-weight: 600; }
.brief-howto > summary::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease-out; }
.brief-howto[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.brief-howto > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.brief-howto-body { margin-top: var(--space-2); padding-left: var(--space-4); border-left: 2px solid var(--line-strong); color: var(--ink-muted); font-size: 16px; line-height: 27px; }
.brief-howto-body > * { margin: 0; }
.brief-howto-body > * + * { margin-top: var(--space-2); }

/* part 3: one group per coloured rule, its picture in a tinted square */
/* colour is kept for the tags the page key explains: the groups differ by picture, all on the same quiet rule */
.brief-side { --side-ink: var(--line-strong); --side-soft: color-mix(in srgb, var(--ink) 7%, transparent); --side-text: var(--ink); padding-left: var(--space-6); border-left: 2px solid var(--side-ink); }
.prose > .brief-side + .brief-side { margin-top: var(--space-12); }
.brief-side > * { margin: 0; }
.brief-side > * + * { margin-top: var(--space-3); }
.prose .brief-side > .brief-h3 { display: flex; align-items: center; gap: var(--space-3); margin-top: 0; font-size: 20px; line-height: 30px; }
.brief-side-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--side-soft); color: var(--side-text); }
.brief-side-icon svg { width: 20px; height: 20px; }
.brief-side .brief-point dt { color: var(--ink); }

/* thin rules instead of boxes: sources and the glossary */
.source-list { gap: 0; border-top: 1px solid var(--line); }
.source-list > li { padding: var(--space-3) 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
.source-list > li:target { border-color: var(--line); background: color-mix(in srgb, var(--accent) 8%, transparent); box-shadow: inset 3px 0 0 var(--accent); padding-left: var(--space-3); }
.prose .glossary-list { gap: 0 var(--space-8); border-top: 1px solid var(--line); }
.glossary-item { padding: var(--space-4) 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
.glossary-item:target { background: color-mix(in srgb, var(--accent) 8%, transparent); box-shadow: inset 3px 0 0 var(--accent); padding-left: var(--space-3); }

/* phones and tablets: the contents fold into one button that opens the sheet (article.js) */
.toc-open { display: none; }
@media (max-width: 900px) {
  .toc.has-sheet { padding: 0; border: 0; background: none; }
  .toc.has-sheet > .toc-title, .toc.has-sheet > ol { display: none; }
  .toc-open { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-3); width: 100%; min-height: 52px; box-sizing: border-box; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
  .toc-open:hover { border-color: var(--line-strong); }
  .toc-open:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
  .toc-open-label { font-size: 16px; line-height: 24px; font-weight: 600; }
  .toc-open-count { color: var(--ink-muted); font-size: 14px; line-height: 22px; }
  .toc-open-icon { width: 8px; height: 8px; margin-left: auto; border: solid var(--ink-muted); border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); }
}
@media (max-width: 640px) {
  .article-cover--slim { height: 112px; margin-top: var(--space-6); }
  .brief-side { padding-left: var(--space-4); }
  .prose .brief-side > .brief-h3 { font-size: 18px; line-height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .brief-howto > summary::after { transition: none; }
}
@media print {
  .brief-howto > summary::after { display: none; }
  .brief-howto-body { display: block; }
}
/* the first part starts right under the contents, not a full heading gap below */
.prose > .brief-h2:first-child { margin-top: 0; }

/* =====================================================================
   Briefs, plain: docket numbers set small, key events marked, and a switch between key events and all of them
   ===================================================================== */
.docref { color: var(--ink-muted); font-size: .8em; }
#prose[data-tl="key"] .tl-item:not(.is-key) { display: none; }
.tl-key { display: block; width: fit-content; margin: 4px 0 0 auto; padding: 0 8px; border-radius: var(--radius-full); background: var(--sky-soft); color: var(--sky-ink); font-size: 13px; line-height: 20px; font-weight: 600; }
.claims.has-dates > li.is-key::before { left: 122px; top: calc(var(--space-3) + 6px); width: 11px; height: 11px; }
/* the controls above the timeline: the scope switch, then the kinds */
.claim-filter { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.claim-kinds { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.tl-scope { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.tl-scope-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--space-3); border: 1px solid transparent; border-radius: var(--radius-full); background: none; color: var(--ink-muted); font: inherit; font-size: 14px; line-height: 22px; font-weight: 500; cursor: pointer; }
.tl-scope-btn:hover { color: var(--ink); }
.tl-scope-btn.is-selected { border-color: var(--line-strong); background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgb(0 0 0 / .18); }
.tl-scope-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tl-scope-btn .chip-count { margin: 0; color: var(--ink-muted); }
@media (max-width: 760px) {
  .tl-key { display: inline-block; margin: 0 0 0 var(--space-2); vertical-align: 1px; }
  .claims.has-dates > li.is-key::before { left: -1px; top: calc(var(--space-3) + 5px); }
}
@media print {
  .tl-scope { display: none; }
  #prose[data-tl="key"] .tl-item { display: grid !important; }
}
/* the full summary, folded under the quick lines: when opened it reads as body text, not as a side note */
.prose > .brief-full { margin-top: var(--space-4); }
.brief-full > .brief-howto-body { color: var(--ink); font-size: 17px; line-height: 30px; }
.prose > .brief-full + h2 { margin-top: var(--space-12); }

/* =====================================================================
   Briefs, reviewed: one card style, three text sizes (18 body · 15 detail · 13 label), dates that never break,
   quiet citations, status chips, the steps for Thai newsrooms, chips drawn alike, and one dock on phones
   ===================================================================== */
/* one card style inside the article: a 1px line, no drop shadow, no gradient; the quick lines keep their sky rule */
.prose .lac-panel { border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: none; }
.prose .lac-panel::after { display: none; }

/* type: body 18 in full ink, details 15, labels 13; sub-headings carry weight */
.prose .brief-h3 { font-weight: 600; }
.tl-year-label { font-size: 20px; line-height: 30px; font-weight: 600; }
.prose .tl-body > p { font-size: 18px; line-height: 32px; }
.prose .tl-body > ul { margin-top: 2px; color: var(--ink-muted); font-size: 16px; line-height: 27px; }
.brief-point dt { font-size: 18px; line-height: 30px; font-weight: 600; }
.brief-point dd { color: var(--ink); font-size: 18px; line-height: 32px; }
.prose .brief-col ul { font-size: 16px; line-height: 28px; }
.prose > #sources ~ p, .prose > #sources ~ ul:not(.source-list) { color: var(--ink-muted); font-size: 16px; line-height: 27px; }
.article-title, .prose h2, .prose h3, .brief-point dt, .lac-stages b { text-wrap: balance; }
.prose p, .prose li, .prose dd, .article-dek { text-wrap: pretty; }
.nw { white-space: nowrap; }

/* citations: one small bracket per group, docket numbers and English originals small and grey, † quiet */
.prose .ref { margin-left: 3px; color: var(--ink-muted); font-family: var(--font-sans); font-size: 13px; font-weight: 500; line-height: 0; vertical-align: super; white-space: nowrap; }
.prose .ref a { color: var(--link); text-decoration: none; }
.prose .ref a:hover { text-decoration: underline; }
.docref, .orig { color: var(--ink-muted); font-size: .8em; }
.prose .dagger { margin-left: 1px; font-size: 13px; line-height: 0; vertical-align: super; }
/* the dagger is a tiny mark; its link reaches a finger-sized area around it without moving the words */
.prose .dagger a { display: inline-block; padding: 4px 9px; margin: -4px -7px; line-height: 16px; color: var(--ink-muted); text-decoration: none; }
.prose .dagger a:hover { color: var(--link); }

/* the table of claims: the name with its status chip and date under it, then what it means; on phones each row is a card */
.brief-table--status thead th:nth-child(1) { width: 36%; }
.brief-table tbody th[scope="row"] { background: none; color: var(--ink); font-size: 16px; line-height: 26px; font-weight: 600; }
.brief-row-name { display: block; }
.brief-row-status { display: block; margin-top: var(--space-2); font-weight: 400; }
.status { display: inline-block; padding: 1px 10px; border: 1px solid transparent; border-radius: var(--radius-full); font-size: 13px; line-height: 20px; font-weight: 600; white-space: nowrap; }
.status--live { border-color: color-mix(in srgb, var(--teal-ink) 50%, transparent); background: var(--teal-soft); color: var(--teal-ink); }
.status--open { border-color: var(--line-strong); background: none; color: var(--ink); }
.status--out { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.status--part { border-color: color-mix(in srgb, var(--ink) 40%, transparent); background: none; color: var(--ink); }
.status::before { content: ""; display: inline-block; box-sizing: border-box; width: 8px; height: 8px; margin-right: 6px; border: 1.5px solid currentColor; border-radius: 50%; vertical-align: 0; }
.status--live::before, .status--out::before { background: currentColor; }
.status--part::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }

/* what Thai newsrooms can do now: numbered steps on the one card style */
.brief-actions { padding: var(--space-6) var(--space-8); border: 1px solid color-mix(in srgb, var(--violet-ink) 50%, transparent); border-radius: var(--radius-md); background: none; }
.brief-actions-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.prose .brief-actions-title { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 32px; font-weight: 600; }
.prose .brief-actions-list { display: flex; flex-direction: column; gap: var(--space-4); margin: var(--space-4) 0 0; padding: 0; list-style: none; counter-reset: step; }
.brief-actions-list > li { counter-increment: step; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-3); font-size: 18px; line-height: 30px; }
.brief-actions-list > li::before { content: counter(step); display: grid; place-items: center; width: 32px; height: 32px; margin-top: -1px; border-radius: 50%; background: var(--violet-soft); color: var(--violet-ink); font-size: 15px; line-height: 1; font-weight: 600; }
.prose .brief-actions-note { margin: var(--space-4) 0 0; color: var(--ink-muted); font-size: 13px; line-height: 20px; }

/* filter chips drawn alike: an outline, the kind's mark, its name and count */
.claim-chip, .claim-chip:first-of-type { gap: 6px; padding: 3px 12px; border: 1px solid var(--line); color: var(--ink); }
.claim-chip.is-selected { border-color: var(--line-strong); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.chip-mark { flex: none; width: 9px; height: 9px; box-sizing: border-box; border-radius: 50%; }
.chip-mark--fact { background: var(--ink); }
.chip-mark--argument { border: 1.5px solid var(--amber-ink); background: linear-gradient(90deg, var(--amber-ink) 50%, transparent 50%); }
.chip-mark--ruling { border-radius: 2px; background: var(--accent); }
.chip-mark--opinion { border: 1.5px solid var(--violet-ink); }
.claim-kinds { align-self: stretch; min-width: 0; }

/* phones and tablets: the reading bar and "back to top" in one dock */
.read-dock { display: none; }
@media (max-width: 900px) {
  .read-dock { position: fixed; left: max(var(--space-4), env(safe-area-inset-left, 0px)); right: max(var(--space-4), env(safe-area-inset-right, 0px)); bottom: max(var(--space-4), env(safe-area-inset-bottom, 0px)); z-index: 40; display: flex; gap: var(--space-2); max-width: 600px; margin-inline: auto; visibility: hidden; opacity: 0; transform: translateY(8px); transition: opacity .2s ease-out, transform .2s ease-out, visibility 0s linear .2s; }
  .read-dock.is-shown { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .read-dock .read-bar { position: static; flex: 1; min-width: 0; max-width: none; visibility: visible; opacity: 1; transform: none; transition: none; }
  .read-top { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-full); background: color-mix(in srgb, var(--surface-raised) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgb(0 0 0 / .25); color: var(--ink); cursor: pointer; }
  .read-top:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
  .read-docked .lac-to-top { visibility: hidden; opacity: 0; pointer-events: none; }
  .lac-menu-open .read-dock { display: none; }
}
@media (max-width: 760px) {
  .brief-table-wrap { overflow: visible; border: 0; border-radius: 0; }
  .brief-table, .brief-table tbody, .brief-table tr, .brief-table th, .brief-table td { display: block; width: auto; }
  .brief-table thead { display: none; }
  .brief-table tr { padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
  .brief-table tbody tr:first-child { border-top: 1px solid var(--line); }
  .brief-table th, .brief-table td { padding: 3px 0; border: 0; }
  .brief-table td::before { content: attr(data-label); display: block; color: var(--ink-muted); font-size: 13px; line-height: 20px; font-weight: 500; }
  .brief-table tbody th[scope="row"] { padding-bottom: var(--space-2); font-size: 17px; line-height: 28px; }
  .brief-table--status td { font-size: 16px; line-height: 27px; }
  .prose .tl-body > p, .brief-point dd, .brief-actions-list > li { font-size: 17px; line-height: 30px; }
  .brief-actions { padding: var(--space-4); }
}
@media (max-width: 640px) {
  .claim-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .claim-filter-label { display: none; }
  .claim-kinds .claim-chip:first-of-type { grid-column: 1 / -1; }
  .claim-kinds .chip-count { margin-left: auto; }
  .claim-chip, .claim-filter-label { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .read-dock { transition: none; }
}
@media print {
  .read-dock { display: none !important; }
  .brief-actions { border-color: #bbb; }
}
@media (max-width: 900px) {
  .article-layout { padding-top: var(--space-6); }
}

/* =====================================================================
   Briefs, second review: nothing wider than the screen, one "selected" look, facts in dark text,
   a folded Thai-first glossary, tagged lists without a timeline rail, and quieter fixes
   ===================================================================== */
html { overflow-x: clip; }
.claim-filter { flex-wrap: nowrap; min-width: 0; }
.claim-filter > * { max-width: 100%; }

/* selected means the same everywhere: a sky outline on a sky tint */
.tl-scope-btn.is-selected, .claim-chip.is-selected { border-color: var(--accent); background: var(--sky-soft); color: var(--ink); box-shadow: none; }
.tl-scope-btn.is-selected .chip-count, .claim-chip.is-selected .chip-count { color: var(--sky-ink); }
.claim-chip[aria-disabled="true"] { display: none; }

/* anything that carries a fact is dark; grey is only for meta (dates of sources, notes, counts) */
.prose .tl-body > ul { color: var(--ink); }
.glossary-item dd { color: var(--ink); }
.prose .brief-side > .brief-h3 { font-size: 22px; line-height: 32px; }
.orig { font-size: inherit; }
.docref { white-space: nowrap; }

/* decided / still waiting: each card as tall as its own list */
.brief-columns { align-items: start; }
/* the case keys: two even columns, no holes */
.lac-case-keys { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* tagged lines that are not a timeline (e.g. what scholars say): stacked rows, no rail */
.claims:not(.has-dates) { gap: 0; padding-left: 0; border-top: 1px solid var(--line); }
.claims:not(.has-dates)::before, .claims:not(.has-dates) > li::before { display: none; }
.claims:not(.has-dates) > li { padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.claims:not(.has-dates) .tl-date:empty { display: none; }
.claims:not(.has-dates) > li > .tl-body > p { font-size: 18px; line-height: 32px; }

/* the glossary folds under its heading; Thai term first */
.glossary-fold > summary { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-full); color: var(--ink); font-size: 16px; line-height: 22px; font-weight: 500; cursor: pointer; list-style: none; }
.glossary-fold > summary::-webkit-details-marker { display: none; }
.glossary-fold > summary::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease-out; }
.glossary-fold[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.glossary-fold > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.glossary-fold[open] > .glossary-list { margin-top: var(--space-4); }
.glossary-item dt .glossary-th { color: var(--ink); font-size: 16px; line-height: 24px; font-weight: 600; }
.glossary-item dt .glossary-term { color: var(--ink-muted); font-size: 14px; line-height: 22px; font-weight: 500; }
.term-pop-head .glossary-th { color: var(--ink); font-size: 16px; line-height: 24px; font-weight: 600; }
.term-pop-head .glossary-term { color: var(--ink-muted); font-size: 14px; line-height: 22px; font-weight: 400; }

@media (max-width: 760px) {
  .prose .brief-side > .brief-h3 { font-size: 20px; line-height: 30px; }
  .claims:not(.has-dates) > li > .tl-body > p { font-size: 17px; line-height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .glossary-fold > summary::after { transition: none; }
}
@media print {
  .glossary-fold > summary { display: none; }
  .glossary-fold > .glossary-list { display: grid !important; }
}

/* =====================================================================
   Briefs, third review: status with its date in one cell, wider text column, shallower lists on phones,
   solid bottom controls, the Thai takeaway group, and back-to-top stepping aside at the footer
   ===================================================================== */
.status-when { display: block; margin-top: 4px; color: var(--ink-muted); font-size: 14px; line-height: 22px; }
.docref { font-size: 13px; }
.read-bar, .read-top { background: color-mix(in srgb, var(--surface-raised) 97%, transparent); }
.lac-to-top.is-by-footer { opacity: 0; transform: translateY(8px); pointer-events: none; }
.brief-side--thai { --side-ink: var(--ink); --side-soft: var(--ink); --side-text: var(--surface); }
@media (max-width: 760px) {
  .prose .tl-body > ul { padding-left: 18px; }
  .prose .tl-body ul ul { padding-left: 14px; }
}

/* ---------- reader-first pages (body.reading) ----------
   A page with a short version (## ฉบับย่อ) opens on a calm paper page in one column: the short version in plain words,
   then the detail as folds. Light by default; dark is a soft charcoal, not navy. One accent colour, no glow */
/* the palette is the site palette (tokens.css): paper, or charcoal when the reader turns the dark page on */
body.reading { background: var(--surface); }
.reading .article-head.lac-backdrop::before, .reading .article-head.lac-backdrop::after { display: none; }
.reading .article-head.lac-pagehead { border-image: none; border-bottom: 0; }
.reading .article-head-inner { max-width: 720px; }
.reading .article-layout.is-reading { display: block; max-width: 720px; padding-block: var(--space-8) var(--space-24); }
.reading .article-title { font-size: 40px; line-height: 1.35; font-weight: 600; background: none; -webkit-text-fill-color: currentColor; color: var(--ink); }
.reading .article-dek { color: var(--ink-muted); font-size: 20px; line-height: 1.75; }
.reading .reading-progress span { box-shadow: none; }

/* the short version: plain paragraphs, question headings, a simple line of steps, the to-do box */
.read-short { color: var(--ink); font-size: 18px; line-height: 1.8; }
/* where the short version starts: a label on a rule in the accent, then how long and where the rest is */
.read-short > .read-start { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-3); margin: 0 0 var(--space-6); padding-top: var(--space-4); border-top: 2px solid var(--accent); color: var(--ink-muted); font-size: 15px; line-height: 24px; }
.read-start b { color: var(--accent); font-size: 16px; font-weight: 600; }
.read-short > p { margin: 0 0 16px; }
.prose .read-short .read-h2 { margin: 48px 0 12px; font-family: var(--font-display); font-size: 24px; line-height: 1.45; font-weight: 600; color: var(--ink); }
.prose .read-short .read-h2:first-child { margin-top: 0; }
.read-list { margin: 0 0 16px; padding-left: 22px; }
.read-list li { margin-bottom: 10px; }
.read-steps { margin: 8px 0 16px; padding: 0; list-style: none; border-left: 2px solid var(--line-strong); }
.read-steps li { position: relative; padding: 0 0 14px 22px; color: var(--ink-muted); }
.read-steps li::before { content: ""; position: absolute; left: -7px; top: 10px; width: 12px; height: 12px; box-sizing: border-box; border: 2px solid var(--line-strong); border-radius: 50%; background: var(--surface); }
.read-steps li.is-done::before { border-color: var(--ink-muted); background: var(--ink-muted); }
.read-steps li.is-now { color: var(--ink); font-weight: 600; }
.read-steps li.is-now::before { border-color: var(--accent); background: var(--accent); }
.read-steps small { display: block; color: var(--ink-muted); font-size: 15px; line-height: 1.6; font-weight: 400; }
.read-todo { margin: 8px 0 0; padding: var(--space-5, 20px) 22px; border-radius: var(--radius-md); background: var(--surface-raised); }
.read-todo ol { margin: 0; padding-left: 22px; }
.read-todo li { margin-bottom: 8px; }
/* a sample in the short version: a template to copy, or a pretend AI answer, marked by its label */
.read-sample { margin: 8px 0 16px; padding: 14px 18px; border-left: 3px solid var(--line-strong, var(--line)); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--surface-panel); color: var(--ink); font-size: 17px; line-height: 1.75; }
.read-sample > strong:first-child { display: block; margin-bottom: 2px; color: var(--ink-muted); font-family: var(--font-display); font-size: 14px; font-weight: 600; line-height: 1.6; }
ol.read-list { padding-left: 26px; }
/* where to go after the short version; only drawn when the next guide can be read */
.read-next { margin: 32px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); }
.prose .read-next p { margin: 0; }
.prose .read-next .read-next-label { color: var(--ink-muted); font-size: 14px; line-height: 1.6; }
.prose .read-next .read-next-title { margin-top: 2px; font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 1.5; }
.prose .read-next .read-next-note { margin-top: 4px; color: var(--ink-muted); font-size: 16px; line-height: 1.7; }
.prose .read-note { margin: 12px 0 0; color: var(--ink-muted); font-size: 15px; line-height: 1.6; }

/* the detail: one quiet list of folds under a rule */
.read-deep { margin-top: var(--space-16); padding-top: var(--space-6); border-top: 1px solid var(--line-strong); }
.prose .read-deep-title { margin: 0 0 6px; font-family: var(--font-display); font-size: 20px; line-height: 1.5; font-weight: 600; }
.prose .read-deep-note { margin: 0 0 var(--space-4); color: var(--ink-muted); font-size: 15px; line-height: 1.6; }
.read-deep > .brief-howto { margin: 0 0 var(--space-2); }
.read-fold { border-bottom: 1px solid var(--line); }
.read-fold > summary { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: 14px 0; list-style: none; cursor: pointer; font-weight: 500; }
.read-fold > summary::-webkit-details-marker { display: none; }
.read-fold > summary::after { content: ""; flex: none; align-self: center; width: 8px; height: 8px; margin-left: var(--space-2); border-right: 1.5px solid var(--ink-muted); border-bottom: 1.5px solid var(--ink-muted); transform: rotate(45deg); transition: transform .15s ease-out; }
.read-fold[open] > summary::after { transform: rotate(-135deg); }
.read-fold-title { flex: 1; }
.read-fold-count { color: var(--ink-muted); font-size: 15px; font-weight: 400; white-space: nowrap; }
.read-fold > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.read-fold-body { padding: 4px 0 var(--space-8); }
.read-fold-body > .brief-columns, .read-fold-body > .brief-table-wrap, .read-fold-body > .claim-filter { margin-top: 0; }
@media (max-width: 640px) {
  .reading .article-title { font-size: 28px; line-height: 1.4; }
  .reading .article-dek { font-size: 18px; }
  .read-short { font-size: 17px; }
  .prose .read-short .read-h2 { margin-top: 40px; font-size: 22px; }
}

/* where to start: three reading paths, each three ready articles in order (assets/js/paths.js, drawn by home.js) */
.path + .path { margin-top: var(--space-4); }
.path { padding: var(--space-6) var(--space-8); border-radius: 20px; background: var(--surface-panel); }
.path-title { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 32px; font-weight: 600; }
.path-for { margin: 4px 0 0; color: var(--ink-muted); font-size: 15px; line-height: 24px; }
.path-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.path-step { display: flex; flex-direction: column; gap: var(--space-2); padding: 20px; border-radius: 14px; background: var(--surface-raised); }
.path-num { color: var(--accent); font-size: 13px; line-height: 20px; font-weight: 600; }
.path-link { color: var(--ink); font-family: var(--font-display); font-size: 18px; line-height: 28px; font-weight: 600; text-decoration: none; }
.path-link:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.path-link:focus-visible { outline: 2px solid transparent; border-radius: 4px; box-shadow: var(--focus-ring); }
.path-learn { margin: 0; color: var(--ink); font-size: 15px; line-height: 25px; text-wrap: pretty; }
.path-learn b { margin-right: .35em; font-weight: 600; }
.path-meta { margin: auto 0 0; padding-top: var(--space-2); color: var(--ink-muted); font-size: 13px; line-height: 20px; }
.path-more { margin: 20px 0 0; }
/* stories past the path's three: a title and what it helps with */
.path-next { margin: var(--space-6) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.path-next-title { margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 24px; font-weight: 600; }
.path-next-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.path-next-link { color: var(--ink); font-family: var(--font-display); font-size: 16px; line-height: 26px; font-weight: 600; }
.path-next-link:focus-visible { outline: 2px solid transparent; border-radius: 4px; box-shadow: var(--focus-ring); }
.path-next-help { margin: 2px 0 0; color: var(--ink-muted); font-size: 15px; line-height: 24px; text-wrap: pretty; }
@media (max-width: 720px) { .path-next-list { grid-template-columns: minmax(0, 1fr); } }

/* case and policy tracker (tracker.html): a case, a law and a policy are labelled and grouped apart */
.track-kinds-wrap { padding-block: var(--space-8) 0; }
.track-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3) var(--space-8); margin: 0; }
.track-kinds > div { display: flex; align-items: baseline; gap: var(--space-3); }
.track-kinds dt { flex: none; }
.track-kinds dd { margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 22px; }
.track-type { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: var(--radius-full); font-size: 13px; line-height: 20px; font-weight: 600; white-space: nowrap; }
.track-type--case { background: var(--sky-soft); color: var(--sky-ink); }
.track-type--law { background: var(--teal-soft); color: var(--teal-ink); }
.track-type--policy { background: var(--amber-soft); color: var(--amber-ink); }
.track-group { border-top: 0; padding-block: var(--space-12) 0; }
.track-group .section-title { margin-bottom: var(--space-6); }
.track { padding: var(--space-8); border-radius: 20px; }
.track + .track { margin-top: var(--space-6); }
.track-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.track-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; }
.track-where { color: var(--ink-muted); font-size: 14px; line-height: 22px; }
.track-title { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: clamp(22px, 2vw, 26px); line-height: 1.4; font-weight: 600; text-wrap: balance; }
.track-asof { margin: 0; color: var(--ink); font-size: 15px; line-height: 24px; font-weight: 600; }
.track-status { margin-top: 20px; padding: var(--space-4) 20px; border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; background: var(--surface-panel); }
.track-label { margin: 0 0 4px; color: var(--ink-muted); font-size: 13px; line-height: 20px; font-weight: 600; }
.track-status p + p { margin: 0; max-width: 46em; color: var(--ink); font-size: 16px; line-height: 28px; text-wrap: pretty; }
.track-facts { display: grid; gap: var(--space-4); margin: var(--space-6) 0 0; }
.track-facts > div { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--space-2) var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.track-facts dt { color: var(--ink); font-size: 15px; line-height: 26px; font-weight: 600; }
.track-facts dd { margin: 0; max-width: 46em; color: var(--ink); font-size: 15px; line-height: 26px; text-wrap: pretty; }
.track-facts ul { margin: 0; padding-left: 1.2em; }
.track-facts dd p { margin: 0; }
.track-facts li + li { margin-top: 4px; }
.track-facts .track-docs { margin-top: var(--space-2); }
.track-docs a { color: var(--link); text-underline-offset: 3px; }
.track-more { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-3); margin: 20px 0 0; color: var(--ink-muted); font-size: 15px; line-height: 24px; }
.track-note { border-top: 0; padding-block: var(--space-12) 96px; }
.track-rules { margin: var(--space-4) 0 0; max-width: 46em; padding-left: 1.2em; color: var(--ink-muted); font-size: 15px; line-height: 26px; }
.track-rules li + li { margin-top: 4px; }

@media (max-width: 900px) {
  .track-kinds { grid-template-columns: minmax(0, 1fr); }
  .track-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (max-width: 640px) {
  .path { padding: var(--space-4); }
  .path-step { padding: var(--space-4); }
  .track { padding: 20px; }
  .track-group { padding-top: var(--space-8); }
  .track-note { padding-bottom: 56px; }
}

/* links into the reading paths and the tracker (html scroll-padding-top already keeps anchors below the sticky header) */
.news-tracker-link { margin: 0; }

/* join: until the form can send, a notice above it says so (join.js hides it once ENDPOINT is set) */
.join-pending { border-color: var(--amber-ink); background: var(--amber-soft); }
.join-pending strong { color: var(--amber-ink); }
.join-pending span { color: var(--ink); }
/* which channels work today, read before the form; "not open" keeps the same amber as the notice above */
.channels { margin: 0; }
.channels-title { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: 18px; line-height: 28px; font-weight: 600; }
.channels-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.channels-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 15px; line-height: 24px; }
.channel-state { flex: none; padding: 0 10px; border-radius: var(--radius-full); background: var(--amber-soft); color: var(--amber-ink); font-size: 13px; line-height: 22px; font-weight: 600; }
.channel-state--open { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.steps-lead, .form-pending, .privacy-pending { margin: 0; color: var(--amber-ink); font-size: 14px; line-height: 22px; font-weight: 600; }
.form-pending { flex-basis: 100%; }
.privacy-pending { margin-bottom: var(--space-4); }
.join-state { margin: 0; color: var(--amber-ink); font-size: 15px; line-height: 24px; font-weight: 600; }
.join-actions .join-state { flex-basis: 100%; }

/* a deep article says so before the reader clicks; the tracker opens with what the entry is; dates on the news page */
.path-flag { align-self: flex-start; padding: 2px 10px; border-radius: var(--radius-full); background: var(--amber-soft); color: var(--amber-ink); font-size: 13px; line-height: 20px; font-weight: 600; }
.track-what { margin: var(--space-4) 0 0; max-width: 46em; color: var(--ink); font-size: 16px; line-height: 28px; text-wrap: pretty; }
.track-what b { margin-right: .35em; font-weight: 600; }
.track-status p + p + p { margin-top: var(--space-2); }
.track-caution { margin: 0; max-width: 40em; color: var(--ink); font-size: 15px; line-height: 26px; }
.timeline-note { margin: 0 0 var(--space-4); color: var(--ink-muted); font-size: 14px; line-height: 22px; }
.brief-review { display: inline-flex; align-items: center; color: var(--amber-ink); font-size: 13px; line-height: 20px; font-weight: 600; }

/* Home and knowledge, round 6: a knowledge magazine for students. Type size and space set the order of things;
   blue goes only on the reading button, the chosen path and the lead story. */
.hero { padding-block: var(--space-8); }
.hero-inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: var(--space-6) var(--space-12); }
.hero-title { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: clamp(46px, 7vw, 96px); line-height: 1.18; font-weight: 600; }
.hero-side { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding-bottom: var(--space-2); }
.hero-lead { margin: 0; color: var(--ink); font-size: clamp(18px, 1.6vw, 21px); line-height: 1.6; text-wrap: pretty; }
.hero-cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); box-sizing: border-box; min-height: 56px; padding: 0 var(--space-8); border-radius: var(--radius-full); background: var(--cover); color: var(--on-cover); font-size: 17px; line-height: 26px; font-weight: 600; text-decoration: none; }
.hero-cta:hover { background: var(--cover-raised); }
.hero-cta:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.hero-join { margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 22px; }
.hero-join a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.hero-join a:focus-visible { outline: 2px solid transparent; border-radius: 4px; box-shadow: var(--focus-ring); }

.paths { padding-block: var(--space-6) var(--space-12); border-top: 0; }
.paths-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--space-6); }
.paths-head .section-title { margin: 0; }
.paths-lead { margin: 0; color: var(--ink-muted); font-size: 16px; line-height: 28px; text-wrap: pretty; }
.paths-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin: var(--space-6) 0 var(--space-4); counter-reset: path; }
.path-choice { counter-increment: path; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: 2px var(--space-3); box-sizing: border-box; min-height: 44px; padding: var(--space-3) 0 var(--space-3); border: 0; border-top: 3px solid var(--line-strong); border-radius: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.path-choice::before { content: counter(path); grid-row: 1 / span 2; color: var(--ink-muted); font-family: var(--font-display); font-size: 34px; line-height: 40px; font-weight: 500; }
.path-choice b { font-family: var(--font-display); font-size: 20px; line-height: 30px; font-weight: 600; }
.path-choice span { color: var(--ink-muted); font-size: 15px; line-height: 24px; text-wrap: balance; }
.path-choice:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.path-choice[aria-pressed="true"] { border-top-color: var(--accent); }
.path-choice[aria-pressed="true"]::before { color: var(--accent); }
.path-choice[aria-pressed="true"] span { color: var(--ink); }
.path-choice:focus-visible { outline: 2px solid transparent; border-radius: 6px; box-shadow: var(--focus-ring); }
.path-num { color: var(--ink-muted); }
/* the picker already names the open path, so its heading stays for screen readers only */
.paths.has-pick .path-head { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.paths.has-pick .path-steps { margin-top: 0; }

.home-lead { padding-block: 0 var(--space-12); }
.home-lead-card.lac-lead { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: end; gap: var(--space-6) var(--space-12); padding: var(--space-12); border-radius: 24px; }
.home-lead-head { display: flex; flex-direction: column; gap: var(--space-2); }
.home-lead-kicker { margin: 0; color: var(--on-cover-muted); font-size: 14px; line-height: 22px; font-weight: 600; }
.home-lead-card .lac-lead-title { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.3; }
.home-lead-card .lac-lead-sub { font-size: clamp(18px, 1.6vw, 22px); }
.home-lead-body { display: flex; flex-direction: column; gap: var(--space-4); }
.home-lead-card .lac-lead-dek { font-size: 16px; line-height: 28px; }

.readnow { padding-block: var(--space-6) var(--space-16); }
.readnow-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12) 72px; align-items: start; }
.readnow .section-title { margin-bottom: var(--space-3); font-size: clamp(24px, 2.2vw, 30px); }
.pick-list { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.pick { display: flex; flex-direction: column; gap: 4px; padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.pick-link { color: var(--ink); font-family: var(--font-display); font-size: 20px; line-height: 30px; font-weight: 600; text-decoration: none; }
.pick-link:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.pick-link:focus-visible { outline: 2px solid transparent; border-radius: 4px; box-shadow: var(--focus-ring); }
.pick-dek { margin: 0; color: var(--ink); font-size: 15px; line-height: 25px; text-wrap: pretty; }
.pick-meta { margin: 0; color: var(--ink-muted); font-size: 13px; line-height: 20px; }
.picks-more { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: var(--space-4) 0 0; }
.faq-intro .section-title { margin: 0; font-size: clamp(24px, 2.2vw, 30px); }
.faq-lead { margin: 0; color: var(--ink); font-size: 16px; line-height: 28px; text-wrap: pretty; }
.joinin, .home-faq { padding-block: var(--space-16); }

/* knowledge: title, search, filters, then the list. Nothing here counts articles that cannot be read */
.kb-head { padding-block: var(--space-8) var(--space-4); }
.kb-head .page-head-inner { gap: 4px; }
.kb-head .lede { font-size: 16px; line-height: 26px; }
.kb-tools { border-block: 1px solid var(--line); background: var(--surface); }
.kb-tools-inner { display: grid; grid-template-columns: 340px minmax(0, 1fr); align-items: start; gap: var(--space-2) var(--space-6); padding-block: var(--space-3); }
.kb-tools .search { grid-row: span 2; width: 100%; }
.kb-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.kb-chips .lac-tag { min-height: 40px; padding: 0 14px; font-size: 14px; line-height: 22px; cursor: pointer; }
/* "all" is the resting state and stays quiet, so a filter that is really on is the one that stands out */
.kb-chips .lac-tag[data-topic=""][aria-pressed="true"], .kb-chips .lac-tag[data-level=""][aria-pressed="true"] { border-color: var(--ink); background: var(--surface-panel); color: var(--ink); }
.results { padding-block: var(--space-6) var(--space-8); }
.results-meta { justify-content: flex-start; gap: 2px var(--space-3); margin-bottom: var(--space-3); }
.kb-list-title { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: 20px; line-height: 30px; font-weight: 600; }
.results-meta .lac-btn { margin-left: auto; }
.kb-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-12); border-top: 1px solid var(--line); }
.kb-list[hidden] { display: none; }
.kb-ready-entry.lac-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: var(--space-4) 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }
.kb-ready-entry.lac-card:hover { background: none; box-shadow: none; transform: none; }
.kb-ready-entry:hover .lac-card-title a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.kb-ready-kicker { margin: 0; color: var(--ink-muted); font-size: 13px; line-height: 20px; font-weight: 600; }
.kb-ready-title { font-size: 20px; line-height: 30px; font-weight: 600; }
.kb-ready-dek { margin: 0; color: var(--ink); font-size: 15px; line-height: 25px; text-wrap: pretty; }
/* the starting story: first in the same list, set apart by size and order rather than by a box */
.kb-start-entry.lac-card { grid-column: 1 / -1; gap: var(--space-2); padding-block: var(--space-4) var(--space-6); }
.kb-start-kicker { margin: 0; color: var(--accent); font-size: 14px; line-height: 22px; font-weight: 600; }
.kb-start-title { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.3; font-weight: 600; }
.kb-start-dek { margin: 0; max-width: 40em; color: var(--ink); font-size: 17px; line-height: 29px; text-wrap: pretty; }
.kb-start-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-4); margin: 0; }
.kb-start-go { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 44px; color: var(--link); font-size: 16px; line-height: 26px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.kb-start-go::after { content: "\2192"; margin-left: var(--space-1); }
.kb-start-go:focus-visible { outline: 2px solid transparent; border-radius: 4px; box-shadow: var(--focus-ring); }
.kb-ready-meta { margin: 0; color: var(--ink-muted); font-size: 13px; line-height: 20px; }
.kb-start { margin: var(--space-6) 0 0; }

.kb-later { padding-block: var(--space-4) var(--space-12); scroll-margin-top: calc(var(--hh) + 120px); }
.kb-later[hidden] { display: none; }
.kb-later-panel { padding: var(--space-8); border-radius: 20px; background: var(--surface-panel); }
.kb-later-head { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: baseline; gap: 4px var(--space-12); }
.kb-later-head p { margin: 0; color: var(--ink); font-size: 15px; line-height: 25px; }
.kb-later-title { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: 22px; line-height: 32px; font-weight: 600; }
.kb-later-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6) var(--space-8); margin-top: var(--space-6); }
.kb-col-title { margin: 0; color: var(--ink); font-size: 15px; line-height: 24px; font-weight: 600; }
.kb-wait-list { margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.kb-wait-entry { display: flex; flex-direction: column; padding: var(--space-2) 0; border-top: 1px solid var(--line); }
.kb-wait-title { color: var(--ink); font-size: 15px; line-height: 24px; }
.kb-wait-meta { color: var(--ink-muted); font-size: 13px; line-height: 20px; }

/* the case map in the analysis: the page's own paper or charcoal, so it reads like the article around it.
   Blue is kept for the heading, the open choice and what the court ordered; the line style tells the kinds apart */
.case-map { margin-bottom: var(--space-6); padding: var(--space-3); border-radius: 20px; background: var(--surface-panel); color: var(--ink); }
.case-map .lac-casemap { padding: var(--space-4); border-radius: 14px; background: var(--surface-raised); }
.case-map .lac-casemap-title { color: var(--accent); }
.case-map .lac-casemap-filter button { border: 1px solid var(--line-strong); background: transparent; color: var(--ink); }
.case-map .lac-casemap-filter button:hover { border-color: var(--ink); background: var(--surface-panel); }
.case-map .lac-casemap-filter button[aria-pressed="true"] { border-color: var(--cover); background: var(--cover); color: var(--on-cover); }
.case-map .lac-casemap-filter button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.case-map .lac-party span, .case-map .lac-casemap-sued, .case-map .lac-casemap-court-label { color: var(--ink-muted); }
.case-map .lac-casemap-sued::before { background: var(--line-strong); }
.case-map .lac-casemap-sued::after { border-left-color: var(--line-strong); }
@media (max-width: 900px) {
  .case-map .lac-casemap-sued::after { border-left-color: transparent; border-top-color: var(--line-strong); }
}
.case-map .lac-casemap-court { background: var(--surface-panel); }
.case-map .lac-lane-title { align-items: baseline; margin-top: 0; color: var(--ink); }
.case-map .lac-lane-title::before { content: none; }
.lane-tag { flex: none; box-sizing: border-box; padding: 0 8px; border: 2px dashed var(--ink-muted); border-radius: 6px; color: var(--ink); font-size: 13px; line-height: 20px; font-weight: 600; }
.lane-tag--defense { border-style: dotted; }
.lane-tag--ruled { border: 2px solid var(--cover); background: var(--cover); color: var(--on-cover); }
.lane-tag--open { border: 2px solid var(--ink-muted); border-radius: var(--radius-full); }
.case-map .lac-lane ul { margin: 0; padding: 0; list-style: none; }
.case-map .lac-lane li { margin: 0; color: var(--ink); }
.case-map .lac-lane li::before { content: none; }
.case-map .lac-lane--claim li { border: 2px dashed var(--line-strong); }
.case-map .lac-lane--defense li { border-style: dotted; }
.case-map .lac-lane--ruled li { border-left: 4px solid var(--accent); border-radius: 4px 12px 12px 4px; background: var(--sky-soft); color: var(--ink); }
.case-map .lac-lane--open li { border: 2px solid var(--line-strong); }
/* a filter never fades text: what does not match keeps a readable colour and loses its emphasis, what matches gains a blue edge */
.case-map .lac-casemap[data-show="claim"] .lac-lane:not([data-kind="claim"]), .case-map .lac-casemap[data-show="ruled"] .lac-lane:not([data-kind="ruled"]), .case-map .lac-casemap[data-show="open"] .lac-lane:not([data-kind="open"]) { opacity: 1; }
.case-map .lac-casemap[data-show="claim"] .lac-lane:not([data-kind="claim"]) li, .case-map .lac-casemap[data-show="ruled"] .lac-lane:not([data-kind="ruled"]) li, .case-map .lac-casemap[data-show="open"] .lac-lane:not([data-kind="open"]) li { border-color: var(--line); background: transparent; color: var(--ink-muted); }
.case-map .lac-casemap[data-show="claim"] .lac-lane[data-kind="claim"] li, .case-map .lac-casemap[data-show="open"] .lac-lane[data-kind="open"] li { border-color: var(--accent); }
.case-map .lac-legend { margin-top: var(--space-4); padding: var(--space-4) var(--space-4) var(--space-2); border-top: 0; font-size: 14px; line-height: 22px; }
.case-map .lac-legend dd { color: var(--ink); }
.case-map .lac-mark--claim { border-color: var(--ink-muted); }
.lac-mark--defense { border: 2px dotted var(--ink-muted); }
.case-map .lac-mark--ruled { border-left: 4px solid var(--accent); background: var(--sky-soft); }
.case-map .lac-mark--open { border-color: var(--ink-muted); }
.case-map .lac-mark--dagger { color: var(--ink); }

@media (min-width: 901px) {
  .kb-tools { position: sticky; top: var(--hh); z-index: 5; }
}
@media (max-width: 900px) {
  .hero-inner, .home-lead-card.lac-lead, .readnow-grid, .joinin-grid, .kb-later-head, .kb-tools-inner, .kb-list { grid-template-columns: minmax(0, 1fr); }
  .paths-pick { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .path-steps { grid-template-columns: minmax(0, 1fr); }
  .kb-tools .search { grid-row: auto; }
  .kb-list { gap: 0; }
}
@media (max-width: 640px) {
  .hero { padding-block: var(--space-4) var(--space-6); }
  .hero-inner { gap: var(--space-3); }
  .hero-side { gap: var(--space-3); }
  .hero-cta { width: 100%; }
  .paths { padding-block: var(--space-2) var(--space-8); }
  .paths-pick { margin-top: var(--space-3); }
  .path-choice { padding-block: var(--space-2); }
  .path-choice::before { font-size: 28px; line-height: 34px; }
  .path-choice b { font-size: 18px; line-height: 28px; }
  .path-choice span { font-size: 14px; line-height: 22px; }
  .home-lead { padding-bottom: var(--space-8); }
  .home-lead-card.lac-lead { gap: var(--space-4); padding: var(--space-6); border-radius: 20px; }
  .lac-lead-actions .lac-lead-btn { min-height: 48px; }
  .readnow { padding-block: var(--space-2) var(--space-8); }
  .joinin, .home-faq { padding-block: var(--space-8); }
  .kb-head { padding-block: var(--space-4) var(--space-3); }
  .kb-chips .lac-tag { padding: 0 12px; }
  .kb-later-panel { padding: var(--space-6) var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
  .path-choice { transition: none; }
}
@media print {
  .hero-cta, .hero-join, .kb-tools { display: none; }
}

/* home: the way in for readers with no background, and Thai news lines */
.start-entry { display: flex; flex-direction: column; gap: 2px; margin: var(--space-4) 0 0; padding: var(--space-4) var(--space-5, 20px); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--surface-panel); color: var(--ink); text-decoration: none; }
.start-entry b { font-family: var(--font-display); font-size: 19px; line-height: 30px; font-weight: 600; }
.start-entry span { color: var(--ink-muted); font-size: 15px; line-height: 24px; }
.start-entry:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.start-entry:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.latest-meta, .latest-check { display: block; color: var(--ink-muted); font-size: 13px; line-height: 20px; }
.news-review { margin: 0; color: var(--ink-muted); font-size: 13px; line-height: 20px; }

/* start page */
.st-status { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-3); margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 22px; }
.st-jump { display: flex; flex-wrap: wrap; gap: var(--space-1, 4px) var(--space-4); font-size: 15px; line-height: 26px; }
.st-body { max-width: 760px; padding-bottom: var(--space-16); }
.st-part { padding-block: var(--space-8); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--hh) + var(--space-2)); }
.st-part p, .st-part li { font-size: 17px; line-height: 30px; }
.st-part > p, .st-topic > p { margin: 0 0 var(--space-3); }
.st-kicker { margin: 0; color: var(--accent); font-size: 14px; line-height: 22px; font-weight: 600; }
.st-h2 { margin: 2px 0 var(--space-3); font-family: var(--font-display); font-size: 28px; line-height: 40px; font-weight: 600; }
.st-h3 { margin: var(--space-6) 0 var(--space-2); font-family: var(--font-display); font-size: 20px; line-height: 32px; font-weight: 600; }
.st-h4 { margin: 0 0 var(--space-1, 4px); font-family: var(--font-display); font-size: 17px; line-height: 28px; font-weight: 600; }
.st-note { color: var(--ink-muted); }
.st-part p.st-note { font-size: 15px; line-height: 26px; }
.st-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-3); }
.st-compare-col { padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-panel); }
.st-compare-col ul { margin: 0; padding-left: 20px; }
.st-compare-col li { font-size: 16px; line-height: 27px; }
.st-scene { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--amber-soft); }
.st-scene b { display: block; color: var(--amber-ink); font-size: 14px; line-height: 22px; }
.st-flow { margin: var(--space-4) 0; padding: 0; list-style: none; counter-reset: flow; }
.st-node { position: relative; counter-increment: flow; padding: 0 0 var(--space-3) 48px; }
.st-node::before { content: counter(flow); position: absolute; left: 0; top: 6px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--cover); color: #fff; font-size: 15px; font-weight: 600; }
.st-node::after { content: ""; position: absolute; left: 16px; top: 44px; bottom: 2px; border-left: 2px solid var(--line-strong); }
.st-node:last-child::after { display: none; }
.st-node details { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); }
.st-node summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 46px; padding: 6px var(--space-4); cursor: pointer; list-style: none; }
.st-node summary::-webkit-details-marker { display: none; }
.st-node summary::after { content: "+"; color: var(--ink-muted); font-size: 22px; line-height: 1; }
.st-node details[open] summary::after { content: "−"; }
.st-node summary:focus-visible, .st-alt summary:focus-visible { outline: 2px solid transparent; border-radius: var(--radius-md); box-shadow: var(--focus-ring); }
.st-node-title { font-family: var(--font-display); font-size: 17px; line-height: 28px; font-weight: 600; }
.st-node-body { padding: 0 var(--space-4) var(--space-3); }
.st-node-body p, .st-node-body li { margin: 0; font-size: 16px; line-height: 28px; }
.st-node-body ul { margin: 0; padding-left: 20px; }
.st-alt { margin: var(--space-2) 0 0; }
.st-alt summary { cursor: pointer; color: var(--link); font-size: 15px; line-height: 26px; }
.st-alt p { margin: var(--space-2) 0 0; font-size: 16px; line-height: 28px; }
.st-sample { margin: 0 0 var(--space-3); padding: 14px 18px; border-left: 3px solid var(--line-strong); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: var(--surface-panel); font-size: 17px; line-height: 30px; }
.st-sample b { display: block; color: var(--ink-muted); font-size: 14px; line-height: 22px; }
.st-quiz fieldset { margin: 0; padding: 0; border: 0; }
.st-quiz legend { padding: 0; margin-bottom: var(--space-2); font-family: var(--font-display); font-size: 18px; line-height: 30px; font-weight: 600; }
.st-opt { display: flex; align-items: flex-start; gap: var(--space-2); min-height: 44px; margin-bottom: var(--space-2); padding: 8px var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); cursor: pointer; font-size: 16px; line-height: 27px; }
.st-opt input { flex: none; width: 20px; height: 20px; min-height: 0; margin: 4px 0 0; accent-color: var(--accent); }
.st-opt:has(input:checked) { border-color: var(--accent); }
.st-opt:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.st-answer { padding: var(--space-3) var(--space-4); border-left: 3px solid var(--accent); background: var(--surface-panel); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.st-answers:not(.is-ready) .st-answer { margin-bottom: var(--space-2); }
.st-part .st-answer p { margin: 0; font-size: 16px; line-height: 28px; }
.st-part .st-answer p.st-answer-head { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.st-part p.st-more { margin: var(--space-2) 0 0; font-size: 15px; line-height: 26px; }
.st-wait { color: var(--amber-ink); font-size: 14px; }
.st-table { display: grid; gap: var(--space-3); margin: 0 0 var(--space-4); }
.st-row { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-panel); }
.st-row p { margin: 0; font-size: 16px; line-height: 28px; }
.st-check b { margin-right: .35em; font-weight: 600; }
.st-links { margin: 0; padding-left: 20px; }
.st-topic { padding-top: var(--space-1, 4px); }
.st-tag { display: inline-block; margin-right: var(--space-2); padding: 0 8px; border-radius: 6px; background: var(--sky-soft); color: var(--ink); font-size: 13px; line-height: 22px; font-weight: 600; }
.st-tag--intl { background: var(--surface-panel); border: 1px solid var(--line-strong); }
.st-part p.st-read { font-size: 15px; line-height: 26px; }
.st-sources ol { margin: 0 0 var(--space-3); padding-left: 22px; }
.st-sources li { font-size: 15px; line-height: 26px; margin-bottom: var(--space-2); }
.st-part .ref { margin-left: 2px; font-size: 12px; }
.st-jump a, .st-part a, .lede a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.st-part .ref a { color: var(--link); text-decoration: none; }
@media (max-width: 640px) {
  .st-compare { grid-template-columns: minmax(0, 1fr); }
  .st-h2 { font-size: 24px; line-height: 36px; }
  .st-part p, .st-part li { font-size: 16px; line-height: 28px; }
}

/* News page: the first screen is news, not an introduction. Each item shows three answers; the rest folds away. */
.news-head.page-head { padding-block: var(--space-6) var(--space-4); }
.news-head .page-title { margin: 0; }
.news-head .lede { margin-top: var(--space-1, 4px); font-size: 16px; line-height: 26px; }
.news-paper { margin-top: 0; }
.chips-row { display: flex; flex: 1 1 0; align-items: center; gap: var(--space-2); min-width: 0; }
.chips-label { flex: none; color: var(--ink-muted); font-size: 13px; line-height: 20px; }
.timeline { padding-block: var(--space-4) var(--space-8); }
.news-result { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-3); margin: 0 0 var(--space-4); color: var(--ink-muted); font-size: 14px; line-height: 22px; }
.news-clear { min-height: 44px; padding: 0; border: 0; background: none; color: var(--link); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.news-clear[hidden] { display: none; }
.news-sec + .news-sec { margin-top: var(--space-8); }
.news-sec-title { margin: 0 0 var(--space-2); color: var(--ink); font-family: var(--font-display); font-size: 22px; line-height: 32px; font-weight: 600; }
.news-sec-count { margin-left: var(--space-2); color: var(--ink-muted); font-family: var(--font-sans); font-size: 14px; line-height: 22px; font-weight: 400; }
.news-sec-note { margin: 0 0 var(--space-3); color: var(--ink-muted); font-size: 14px; line-height: 22px; }
.news-sec .lac-news:first-child { padding-top: var(--space-3); border-top: 0; }
.lac-news-title { font-size: 20px; line-height: 32px; }
.lac-news .lac-news-link::after { content: none; }
.lac-news .lac-news-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.lac-news .lac-news-link:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.news-glance { display: grid; gap: var(--space-2); max-width: 42em; margin: 0; }
.news-glance dt { color: var(--ink-muted); font-size: 13px; line-height: 20px; font-weight: 600; }
.news-glance dd { margin: 0; color: var(--ink); font-size: 16px; line-height: 27px; }
.news-by { margin-left: var(--space-1, 4px); padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 6px; font-size: 12px; line-height: 18px; font-weight: 500; white-space: nowrap; }
.news-review { margin: 0; color: var(--ink-muted); font-size: 13px; line-height: 20px; }
.news-open { margin: 0; }
.news-next { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); margin: 0; font-size: 15px; line-height: 26px; }
.news-next-label { color: var(--ink-muted); font-size: 13px; font-weight: 600; }
.news-next a, .news-more-next a, .news-docs a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.news-next-help { display: block; flex-basis: 100%; color: var(--ink-muted); font-size: 14px; line-height: 22px; }
.news-more { margin-top: var(--space-1, 4px); }
.news-more > summary { display: flex; align-items: center; min-height: 44px; color: var(--link); font-size: 15px; line-height: 24px; font-weight: 500; cursor: pointer; }
.news-more > summary:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.news-more-body { max-width: 42em; padding: var(--space-3) var(--space-4) var(--space-4); border-radius: var(--radius-md); background: var(--surface-panel); }
.news-more-body p { margin: 0 0 var(--space-2); color: var(--ink); font-size: 15px; line-height: 26px; }
.news-part { margin: var(--space-4) 0 var(--space-1, 4px); color: var(--ink); font-family: var(--font-display); font-size: 15px; line-height: 24px; font-weight: 600; }
.news-part:first-child { margin-top: 0; }
.news-dates { display: grid; gap: var(--space-2); margin: 0; }
.news-dates dt { color: var(--ink-muted); font-size: 13px; line-height: 20px; }
.news-dates dd { margin: 0; color: var(--ink); font-size: 15px; line-height: 25px; }
.news-docs, .news-more-next { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 25px; }
.news-doc-meta { display: block; color: var(--ink-muted); font-size: 13px; line-height: 21px; }
.news-past-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.news-past-item { border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--hh) + var(--space-2)); }
.news-past-item .news-more { margin: 0; }
.news-past-item .news-more > summary { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 0 var(--space-3); align-items: baseline; padding-block: var(--space-2); color: var(--ink); font-weight: 400; }
.news-past-item time { color: var(--ink-muted); font-size: 14px; line-height: 24px; }
.news-past-title { font-size: 16px; line-height: 26px; font-weight: 500; }
.news-past-type { grid-column: 2; color: var(--ink-muted); font-size: 13px; line-height: 20px; }
.news-past-item .news-more-body { margin-bottom: var(--space-3); }
.lac-news { scroll-margin-top: calc(var(--hh) + var(--space-2)); }
.latest-status { display: block; color: var(--ink); font-size: 14px; line-height: 22px; font-weight: 400; }
@media (max-width: 900px) {
  .filterbar { position: static; }
  .chips-row { flex: none; }
  .news-past-item .news-more > summary { grid-template-columns: minmax(0, 1fr); }
  .news-past-type { grid-column: 1; }
}
@media (max-width: 640px) {
  .news-head.page-head { padding-block: var(--space-4) var(--space-3); }
  .news-more-body { padding-inline: var(--space-3); }
}

/* About page: what the club links, where to begin, how to take part, then what is promised and what is done */
.ab-lede { margin-top: var(--space-2); }
.ab-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.ab-cols li { padding-top: var(--space-3); border-top: 1px solid var(--line-strong); }
.ab-h { margin: 0 0 var(--space-1, 4px); color: var(--ink); font-family: var(--font-display); font-size: 18px; line-height: 28px; font-weight: 600; }
.ab-cols p { margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 26px; }
.ab-steps { display: grid; gap: var(--space-3); max-width: 44em; margin: var(--space-4) 0 0; padding-left: 1.5em; font-size: 16px; line-height: 26px; }
.ab-steps a { color: var(--link); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ab-steps li > span { display: block; color: var(--ink-muted); font-size: 15px; line-height: 24px; }
.ab-teams { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.ab-teams li { padding-top: var(--space-3); border-top: 1px solid var(--line-strong); }
.ab-teams b { display: block; color: var(--ink); font-size: 16px; line-height: 26px; font-weight: 600; }
.ab-teams li > span { color: var(--ink-muted); font-size: 15px; line-height: 24px; }
.do-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.do-grid--4 .do-unit { align-self: center; }
.ab-done { display: grid; max-width: 44em; margin: var(--space-4) 0 0; border-top: 1px solid var(--line); }
.ab-done > div { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 0 var(--space-4); padding-block: var(--space-2); border-bottom: 1px solid var(--line); }
.ab-done dt { color: var(--ink-muted); font-size: 15px; line-height: 26px; }
.ab-done dd { margin: 0; color: var(--ink); font-size: 15px; line-height: 26px; }
@media (max-width: 900px) {
  .ab-cols, .do-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .ab-teams { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ab-done > div { grid-template-columns: minmax(0, 1fr); }
}
.ab-done a { color: var(--link); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* About: a planned activity in the club's own words, with pictures cut from its posters */
.ab-event { max-width: 52em; margin: var(--space-4) 0 0; }
.ab-event-title { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: 24px; line-height: 34px; font-weight: 600; }
.ab-event-theme { margin: var(--space-1) 0 var(--space-4); color: var(--ink); font-size: 17px; line-height: 28px; font-weight: 500; }
.ab-event-when { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-2); color: var(--ink); font-size: 16px; line-height: 26px; font-weight: 600; }
.ab-event-where, .ab-event-by { margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 24px; }
.ab-event-by b { color: var(--ink); font-weight: 600; }
.ab-event-text { max-width: 44em; margin: var(--space-4) 0; color: var(--ink); font-size: 16px; line-height: 27px; }
.ab-event-parts { display: grid; gap: var(--space-3); max-width: 44em; margin: 0 0 var(--space-6); }
.ab-event-parts > div { padding-top: var(--space-3); border-top: 1px solid var(--line); }
.ab-event-h { margin: 0 0 var(--space-1); color: var(--ink); font-size: 16px; line-height: 26px; font-weight: 600; }
.ab-event-parts p { margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 25px; }
.ab-event-gallery > p { max-width: 44em; margin: 0; color: var(--ink-muted); font-size: 15px; line-height: 24px; }
.ab-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-3) 0; padding: 0; list-style: none; }
.ab-gallery figure { margin: 0; }
.ab-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.ab-gallery figcaption { margin-top: var(--space-2); color: var(--ink); font-size: 15px; line-height: 22px; font-weight: 500; }
.ab-event-note { margin: var(--space-4) 0 0; color: var(--ink-muted); font-size: 15px; line-height: 24px; }
@media (max-width: 640px) {
  .ab-gallery { grid-template-columns: minmax(0, 1fr); }
  .ab-gallery li { max-width: 300px; }
}

/* After an article: the next question, then the link that answers it */
.read-on { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-8); }
.read-on-item { margin: 0; padding-top: var(--space-3); border-top: 1px solid var(--line-strong); }
.read-on-ask { display: block; margin-bottom: var(--space-1, 4px); color: var(--ink-muted); font-size: 15px; line-height: 24px; }
.read-on-item a { color: var(--link); font-size: 17px; line-height: 28px; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (max-width: 760px) { .read-on { grid-template-columns: minmax(0, 1fr); } }

/* Practice lesson: the problem, the output and the explanation each sit in their own block */
.pr-block { margin: var(--space-6) 0; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); }
.pr-block--case { background: var(--amber-soft); border-color: transparent; }
.pr-block--case .pr-kicker { color: var(--amber-ink); }
.pr-block--output { background: var(--surface-panel); border-color: transparent; }
.pr-block .read-h2 { margin-top: 0; }
.pr-kicker { margin: 0 0 var(--space-1, 4px); color: var(--accent); font-size: 14px; line-height: 22px; font-weight: 600; }
.pr-note { color: var(--ink-muted); font-size: 15px; line-height: 26px; }
.pr-output, .pr-rows { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.pr-output { counter-reset: pr; }
.pr-output li { counter-increment: pr; position: relative; padding-left: 28px; font-size: 16px; line-height: 28px; }
.pr-output li::before { content: counter(pr) "."; position: absolute; left: 0; color: var(--ink-muted); }
.pr-output b { font-weight: 600; }
.pr-rows li { padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
.pr-rows li:last-child { padding-bottom: 0; border-bottom: 0; }
.pr-rows p { margin: var(--space-1, 4px) 0 0; font-size: 16px; line-height: 28px; }
.pr-tag { display: inline-block; padding: 0 8px; border-radius: 6px; border: 1px solid var(--line-strong); color: var(--ink); font-size: 14px; line-height: 24px; font-weight: 600; }
.pr-tag--ok { background: var(--sky-soft); border-color: transparent; }
.pr-tag--add { background: var(--amber-soft); border-color: transparent; color: var(--amber-ink); }
.pr-q { margin: 0 0 var(--space-5, 20px); padding: 0; border: 0; }
.pr-q legend { padding: 0; margin-bottom: var(--space-2); font-family: var(--font-display); font-size: 17px; line-height: 28px; font-weight: 600; }
.pr-why { padding: var(--space-3) var(--space-4); border-left: 3px solid var(--accent); background: var(--surface-panel); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.pr-why[hidden] { display: none; }
.pr-why p { margin: 0; font-size: 16px; line-height: 28px; }
.pr-why .pr-why-head { font-family: var(--font-display); font-weight: 600; }
@media (max-width: 640px) {
  .pr-block { padding: var(--space-3); }
  .pr-why { padding: var(--space-2) var(--space-3); }
}

/* Three followed issues, in the side column of the news page */
.news-watch { display: grid; gap: var(--space-3); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.news-watch a { color: var(--link); font-size: 16px; line-height: 26px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.news-watch li > span { display: block; color: var(--ink-muted); font-size: 15px; line-height: 25px; }

/* Reading comfort: Thai small print stays at 14px or more, and 15px on a computer, where the page is read from further away */
.news-glance dt, .news-dates dt, .news-doc-meta, .news-review, .news-past-type, .news-sec-note, .latest-meta, .latest-check, .path-meta, .pick-meta, .path-num,
.kb-wait-meta, .kb-ready-meta, .kb-ready-kicker, .lac-news-month, .lac-news-kind, .team-title, .trait-example > span:not(.nw), .chips-label, .do-unit, .news-next-label, .path-flag, .latest-list time { font-size: 14px; line-height: 22px; }
.news-by { padding: 0; border: 0; color: var(--ink-muted); font-size: inherit; font-weight: 400; white-space: normal; }
.pr-block .read-h2, .read-short .pr-block .read-h2 { margin: 0 0 var(--space-2); }
.pr-q .st-opt { align-items: center; min-height: 44px; padding-block: 6px; }
.pr-q .st-opt input { margin-top: 0; }
.pr-q .st-opt > span { margin: 0; line-height: 26px; }
@media (min-width: 901px) {
  .news-glance dt, .news-dates dt, .news-doc-meta, .news-review, .news-past-type, .news-sec-note, .latest-meta, .latest-list time, .latest-check, .path-meta, .pick-meta, .path-num,
  .kb-wait-meta, .kb-ready-meta, .kb-ready-kicker, .lac-news-month, .lac-news-kind, .team-title, .team-desc, .trait-example > span:not(.nw), .trait .trait-example, .chips-label, .do-unit, .proj-needs, .hero-join { font-size: 15px; line-height: 24px; }
  .news-glance { gap: var(--space-3); }
  .news-glance dd { font-size: 17px; line-height: 30px; }
  .news-next, .latest-status, .news-result { font-size: 15px; line-height: 26px; }
  .news-next-help, .news-more-body p, .news-dates dd, .news-docs, .news-more-next { font-size: 16px; line-height: 28px; }
  .news-aside .promises li, .promises { font-size: 15px; line-height: 26px; }
}

/* ---------- UX update 10 Nov 2569: what the club is, where to go, what is open ---------- */
/* home: the name, the faculty, and two ways on; joining has its own line */
.hero-org { margin: var(--space-3) 0 0; color: var(--ink-muted); font-size: clamp(17px, 1.7vw, 22px); line-height: 1.5; font-weight: 500; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); }
.hero-more { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-size: 17px; line-height: 26px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.hero-more:hover { text-decoration-thickness: 2px; }
.hero-more:focus-visible { outline: 2px solid transparent; border-radius: 4px; box-shadow: var(--focus-ring); }
.hero-join { font-size: 15px; line-height: 24px; }
.hero-join b { color: var(--ink); font-weight: 600; }

/* about: the camp card leads to the camp page; on a phone the poster comes first */
.camp-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; gap: var(--space-8); max-width: 62rem; margin: var(--space-4) 0 0; }
.camp-poster-link { display: block; border-radius: var(--radius-sm); }
.camp-poster-link img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: inherit; }
.camp-poster-link:hover img { border-color: var(--ink-muted); }
.camp-poster-link:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.camp-card .ab-event-title { margin-top: var(--space-3); }
.camp-card-text { max-width: 36em; margin: 0 0 var(--space-3); color: var(--ink); font-size: 16px; line-height: 27px; }
.camp-card-go { margin: var(--space-4) 0 0; }

/* the camp page */
.camp-page { padding-top: var(--space-6); }
.camp-back { margin: 0 0 var(--space-4); font-size: 16px; line-height: 26px; }
.camp-back--end { margin: var(--space-8) 0 0; }
.camp-source-link { color: var(--link); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.camp-source-link:focus-visible, .camp-jump a:focus-visible { outline: 2px solid transparent; border-radius: 4px; box-shadow: var(--focus-ring); }
.camp-detail { max-width: 52em; }
.camp-detail .ab-event-title { margin: 0; font-size: clamp(28px, 4vw, 38px); line-height: 1.3; }
.camp-facts { display: grid; max-width: 44em; margin: var(--space-4) 0; border-top: 1px solid var(--line); }
.camp-facts > div { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr); gap: 0 var(--space-4); padding-block: var(--space-2); border-bottom: 1px solid var(--line); }
.camp-facts dt { color: var(--ink-muted); font-size: 15px; line-height: 26px; }
.camp-facts dd { margin: 0; color: var(--ink); font-size: 16px; line-height: 26px; }
.camp-jump { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); margin: 0 0 var(--space-4); }
.camp-jump a { display: inline-flex; align-items: center; min-height: 44px; color: var(--link); font-size: 16px; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.camp-detail [id] { scroll-margin-top: 100px; }
.camp-detail .ab-event-h { font-size: 19px; line-height: 28px; }
.camp-detail .ab-event-parts ul { margin: 0; padding-left: 1.2em; color: var(--ink-muted); font-size: 16px; line-height: 27px; }
.camp-detail .ab-event-parts li + li { margin-top: var(--space-1); }
.camp-detail .ab-event-gallery > p { font-size: 16px; line-height: 27px; }
.camp-detail .ab-gallery figcaption { font-size: 16px; line-height: 24px; }
.camp-sources { max-width: 44em; margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.camp-sources p { margin: 0 0 var(--space-3); color: var(--ink); font-size: 16px; line-height: 27px; }
.camp-source-list { display: grid; gap: var(--space-3); margin: var(--space-3) 0 var(--space-4); }
.camp-source-list dt { color: var(--ink); font-size: 16px; line-height: 26px; font-weight: 600; }
.camp-source-list dd { margin: 0; color: var(--ink-muted); font-size: 16px; line-height: 27px; }

/* join: what can be done now, and the form as a sample under a fold */
.join-now { margin: var(--space-3) 0 0; color: var(--ink); font-size: 15px; line-height: 26px; }
.join-now a { color: var(--link); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.join-sample > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); min-height: 56px; padding: var(--space-3) var(--space-12) var(--space-3) var(--space-6); position: relative; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); cursor: pointer; list-style: none; font-size: 18px; line-height: 28px; font-weight: 600; }
.join-sample > summary::-webkit-details-marker { display: none; }
.join-sample > summary::after { content: ''; position: absolute; right: var(--space-6); top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.join-sample[open] > summary::after { margin-top: -2px; transform: rotate(-135deg); }
.join-sample > summary small { color: var(--ink-muted); font-size: 15px; line-height: 24px; font-weight: 400; }
.join-sample > summary:hover { border-color: var(--ink); }
.join-sample > summary:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.join-sample[open] > summary { margin-bottom: var(--space-4); }
.join-sample--open > summary { display: none; }

/* works: what a person who joins would do */
.lac-card-role { margin: var(--space-2) 0 0; color: var(--ink); font-size: 15px; line-height: 24px; }
.lac-card-role b { font-weight: 600; }

/* start: try the practice first, then come back */
.st-try { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: var(--space-4) 0 0; }
.st-try span { color: var(--ink-muted); font-size: 15px; line-height: 24px; }
.st-after { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); margin: var(--space-4) 0 0; }
.st-after a { display: inline-flex; align-items: center; min-height: 44px; color: var(--link); font-size: 16px; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

@media (max-width: 760px) {
  .camp-card { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
}
@media (max-width: 640px) {
  .hero-org { margin-top: var(--space-2); }
  .hero-actions { flex-direction: column; align-items: stretch; align-self: stretch; gap: var(--space-1); }
  .hero-more { justify-content: center; min-height: 48px; }
  .hero-join { font-size: 14px; line-height: 22px; }
  .camp-facts > div { grid-template-columns: minmax(0, 1fr); }
  .join-sample > summary { padding-left: var(--space-4); }
  .join-sample > summary::after { right: var(--space-4); }
  .lac-to-top.is-quiet { visibility: hidden; opacity: 0; pointer-events: none; }
}
@media print { .hero-more, .st-try, .st-after, .camp-jump { display: none; } }