/* ═══════════════════════════════════════════════════════════════════
   YakRoo design system
   teal = signal / brand · warn = waiting, caution · neutrals biased green
   Every component reads tokens; the tokens are what changes per theme.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --bg:#eef1ef; --surface:#ffffff; --surface-2:#e5eae7;
  --ink:#121a18; --ink-2:#39443f; --muted:#66756f;
  --line:#d2dad6; --line-2:#b6c2bd;
  --edge:#0c7d6d; --edge-ink:#0a5f53; --edge-soft:#d5ebe6;
  --warn:#bd402a; --warn-soft:#f7ddd6;
  --code-bg:#0d1615; --code-ink:#d9e6e2; --code-dim:#6f857f;
  --shadow:0 1px 2px rgba(18,26,24,.05), 0 8px 24px -12px rgba(18,26,24,.18);

  /* per-category accents - set on [data-accent] wrappers */
  --a-teal:#0c7d6d;   --a-teal-soft:#d5ebe6;
  --a-amber:#a16207;  --a-amber-soft:#f6e8cd;
  --a-green:#15803d;  --a-green-soft:#d7edde;
  --a-violet:#6d4aa8; --a-violet-soft:#e6dff5;

  /* Serif headlines against a sans body is the whole visual thesis: a Thai
     publication, not another system-font blog. Serif is display-only. */
  --serif:"Noto Serif Thai","Sarabun",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans Thai","Sukhumvit Set","Noto Sans Thai","Leelawadee UI",Thonburi,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,"Cascadia Code",Consolas,"IBM Plex Sans Thai",monospace;

  --fs-xs:.75rem; --fs-sm:.8125rem; --fs-md:.9375rem;
  --fs-base:1.0625rem; --fs-lg:1.1875rem; --fs-xl:1.4375rem;
  --fs-2xl:1.875rem; --fs-3xl:2.5rem;

  --rule:1px solid var(--line);

  --rail:184px; --colw:67ch;
}

@media (prefers-color-scheme:dark){
  :root{
    --bg:#0d1312; --surface:#141c1a; --surface-2:#1a2422;
    --ink:#e8eeec; --ink-2:#bcc9c4; --muted:#84948f;
    --line:#253230; --line-2:#35443f;
    --edge:#3ed2b7; --edge-ink:#7ee3ce; --edge-soft:#11302a;
    --warn:#f2795e; --warn-soft:#3a1c15;
    --code-bg:#080e0d; --code-ink:#d5e3df; --code-dim:#5d726d;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 28px -14px rgba(0,0,0,.7);
    --a-teal:#3ed2b7;   --a-teal-soft:#11302a;
    --a-amber:#e0a83c;  --a-amber-soft:#332612;
    --a-green:#4ec97e;  --a-green-soft:#12301d;
    --a-violet:#a98ce6; --a-violet-soft:#241c38;
  }
}
:root[data-theme="dark"]{
  --bg:#0d1312; --surface:#141c1a; --surface-2:#1a2422;
  --ink:#e8eeec; --ink-2:#bcc9c4; --muted:#84948f;
  --line:#253230; --line-2:#35443f;
  --edge:#3ed2b7; --edge-ink:#7ee3ce; --edge-soft:#11302a;
  --warn:#f2795e; --warn-soft:#3a1c15;
  --code-bg:#080e0d; --code-ink:#d5e3df; --code-dim:#5d726d;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 28px -14px rgba(0,0,0,.7);
  --a-teal:#3ed2b7;   --a-teal-soft:#11302a;
  --a-amber:#e0a83c;  --a-amber-soft:#332612;
  --a-green:#4ec97e;  --a-green-soft:#12301d;
  --a-violet:#a98ce6; --a-violet-soft:#241c38;
}
:root[data-theme="light"]{
  --bg:#eef1ef; --surface:#ffffff; --surface-2:#e5eae7;
  --ink:#121a18; --ink-2:#39443f; --muted:#66756f;
  --line:#d2dad6; --line-2:#b6c2bd;
  --edge:#0c7d6d; --edge-ink:#0a5f53; --edge-soft:#d5ebe6;
  --warn:#bd402a; --warn-soft:#f7ddd6;
  --code-bg:#0d1615; --code-ink:#d9e6e2; --code-dim:#6f857f;
  --shadow:0 1px 2px rgba(18,26,24,.05), 0 8px 24px -12px rgba(18,26,24,.18);
  --a-teal:#0c7d6d;   --a-teal-soft:#d5ebe6;
  --a-amber:#a16207;  --a-amber-soft:#f6e8cd;
  --a-green:#15803d;  --a-green-soft:#d7edde;
  --a-violet:#6d4aa8; --a-violet-soft:#e6dff5;
}

/* accent resolution - anything inside a [data-accent] uses that hue */
[data-accent="teal"]  {--edge:var(--a-teal);   --edge-soft:var(--a-teal-soft)}
[data-accent="amber"] {--edge:var(--a-amber);  --edge-soft:var(--a-amber-soft)}
[data-accent="green"] {--edge:var(--a-green);  --edge-soft:var(--a-green-soft)}
[data-accent="violet"]{--edge:var(--a-violet); --edge-soft:var(--a-violet-soft)}
[data-accent] {--edge-ink:var(--edge)}

/* ─────────── base ─────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:var(--fs-base); line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--edge-ink); text-underline-offset:.18em; text-decoration-thickness:1px}
a:focus-visible,button:focus-visible{outline:2px solid var(--edge); outline-offset:3px; border-radius:4px}
p{margin:0}
h1,h2,h3,h4{margin:0; text-wrap:balance; line-height:1.28; letter-spacing:-.012em}
h1,h2{font-family:var(--serif); font-weight:700}
img{max-width:100%; height:auto}
code,pre,.mono{font-family:var(--mono); font-variant-ligatures:none}
.muted{color:var(--muted)}
.lbl{
  font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin:0;
}
.skip{position:absolute; left:-9999px; top:0; background:var(--surface); padding:.6rem 1rem; z-index:99}
.skip:focus{left:.5rem; top:.5rem}

.wrap{max-width:1200px; margin:0 auto; padding:0 1.25rem}

/* ─────────── topbar ─────────── */
.topbar{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.topbar-in{
  max-width:1200px; margin:0 auto; padding:.6rem 1.25rem;
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
}
.brand{display:inline-flex; align-items:baseline; gap:.42rem; text-decoration:none; color:var(--ink)}
.brand b{font-family:var(--serif); font-size:1.1875rem; font-weight:700; letter-spacing:-.01em}
.brand span{font-family:var(--mono); font-size:var(--fs-xs); color:var(--muted); letter-spacing:.1em}

/* category dot - a 6px accent mark replaces the emoji icons (emoji as UI icons
   read as clip-art and each one dragged its own hue into the palette) */
.dotc{
  width:6px; height:6px; border-radius:50%; background:var(--edge);
  flex:0 0 auto; margin-right:.5rem; display:inline-block;
}

.hublink{
  /* touch target: >=40px is the Cosmixon-wide minimum (mis-tap sweep 2026-07-29) */
  display:inline-flex; align-items:center; gap:4px; padding:9px 12px; min-height:40px; box-sizing:border-box; border-radius:8px;
  font-size:var(--fs-sm); color:var(--muted); background:transparent;
  border:1px solid var(--line); text-decoration:none;
  transition:color .18s, border-color .18s; white-space:nowrap;
}
.hublink:hover{color:var(--a-teal); border-color:var(--a-teal)}
.cats{display:flex; gap:.05rem; overflow-x:auto; scrollbar-width:none; margin-left:.6rem}
.cats::-webkit-scrollbar{display:none}
.cat{
  white-space:nowrap; text-decoration:none; font-size:var(--fs-sm); color:var(--muted);
  display:inline-flex; align-items:center; min-height:40px; box-sizing:border-box;
  padding:9px 11px; border-radius:8px; transition:background .18s, color .18s;
}
.cat .dotc{opacity:.55; transition:opacity .18s}
.cat:hover{color:var(--ink); background:var(--surface-2)}
.cat:hover .dotc{opacity:1}
.cat.on{color:var(--ink); font-weight:600; box-shadow:inset 0 -2px 0 var(--edge)}
.cat.on .dotc{opacity:1}
.spacer{flex:1}
.tbtn{
  font:inherit; cursor:pointer; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:40px; min-width:40px; box-sizing:border-box; padding:9px;
  background:transparent; color:var(--muted); border:1px solid var(--line);
  transition:color .18s, border-color .18s;
}
.tbtn:hover{color:var(--ink); border-color:var(--a-teal)}
.progress{height:2px; background:var(--a-teal); width:0; transition:width .1s linear}
@media (max-width:680px){
  .cats{order:3; width:100%; margin:.15rem 0 0 -.35rem}
  .spacer{display:none}
  .hublink{margin-left:auto}
}

/* ─────────── home: masthead plate ───────────
   Rules (hairlines) carry the structure instead of a wall of rounded cards.
   The layout is deliberately asymmetric - 7/5, never four equal tiles. */
.plate{border-top:2px solid var(--ink); margin-top:1.6rem; padding-top:.7rem}
.plate-meta{
  display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
  font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
  padding-bottom:.7rem; border-bottom:var(--rule);
}
.plate-meta .sep{color:var(--line-2)}
.plate-grid{
  display:grid; gap:1.6rem 3rem; padding:2.6rem 0 2.4rem;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:end;
}
@media (max-width:860px){ .plate-grid{grid-template-columns:1fr; padding:1.9rem 0 1.7rem; gap:1.7rem} }
.plate-main{display:flex; flex-direction:column; gap:1rem}
.mast-h{
  font-family:var(--serif); font-size:clamp(2.4rem,6.4vw,4.25rem);
  font-weight:700; letter-spacing:-.028em; line-height:1.1;
}
.mast-h em{font-style:normal; color:var(--a-teal)}
.mast-h .arrow{color:var(--line-2); font-weight:400}
.mast-deck{font-size:var(--fs-lg); color:var(--ink-2); max-width:46ch; line-height:1.68}

/* stance column: the site's voice, in the author's words - not a feature grid */
.stance{border-left:var(--rule); padding-left:1.4rem; display:flex; flex-direction:column; gap:.7rem}
@media (max-width:860px){ .stance{border-left:0; border-top:var(--rule); padding:1.2rem 0 0} }
.stance ol{
  list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.62rem;
  counter-reset:st;
}
.stance li{
  counter-increment:st; position:relative; padding-left:1.75rem;
  font-size:var(--fs-md); color:var(--ink-2); line-height:1.6;
}
.stance li::before{
  content:counter(st,decimal-leading-zero); position:absolute; left:0; top:.1em;
  font-family:var(--mono); font-size:var(--fs-xs); color:var(--a-teal); letter-spacing:.02em;
}
.stance-more{font-size:var(--fs-md); text-decoration:none; align-self:flex-start; min-height:40px; display:inline-flex; align-items:center}
.stance-more:hover{text-decoration:underline}

/* ─────────── category index (magazine table of contents) ─────────── */
.index{border-top:var(--rule); display:grid; grid-template-columns:1fr 1fr}
@media (max-width:760px){ .index{grid-template-columns:1fr} }
.idx{
  display:flex; align-items:baseline; gap:1rem; text-decoration:none; color:inherit;
  padding:1.05rem 1.1rem 1.05rem .2rem; border-bottom:var(--rule);
  transition:background .18s, padding-left .18s;
}
.idx:nth-child(odd){border-right:var(--rule)}
@media (max-width:760px){ .idx:nth-child(odd){border-right:0} }
.idx:hover{background:var(--surface); padding-left:.7rem}
.idx-no{
  font-family:var(--mono); font-size:var(--fs-sm); color:var(--edge);
  letter-spacing:.04em; flex:0 0 auto;
}
.idx-body{display:flex; flex-direction:column; gap:.1rem; min-width:0; flex:1}
.idx-nm{font-weight:600; color:var(--ink); font-size:var(--fs-lg)}
.idx-bl{font-size:var(--fs-md); color:var(--muted); line-height:1.5}
.idx-n{
  font-family:var(--mono); font-size:var(--fs-sm); color:var(--muted);
  flex:0 0 auto; font-variant-numeric:tabular-nums;
}

/* ─────────── section headings ─────────── */
.sec-head{display:flex; align-items:baseline; gap:1rem; margin:0 0 1rem}
.sec-lbl{color:var(--ink-2)}
.sec-more{margin-left:auto; font-size:var(--fs-md); text-decoration:none; white-space:nowrap}
.sec-more:hover{text-decoration:underline}

/* ─────────── lead story ───────────
   Full-width editorial slab: no card, no shadow. The accent rule on top and the
   oversized serif headline do the work. */
.lead{padding:2.8rem 0 0}
.lead-a{
  display:grid; gap:.85rem; text-decoration:none; color:inherit; position:relative;
  border-top:3px solid var(--edge); padding:1.5rem 0 2.2rem;
  grid-template-columns:minmax(0,1fr);
}
.lead-mark{
  position:absolute; right:0; top:1.1rem; font-size:clamp(3.4rem,10vw,6.5rem);
  line-height:1; opacity:.14; filter:grayscale(.35); pointer-events:none; user-select:none;
}
.lead-cat{
  font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.14em;
  text-transform:uppercase; color:var(--edge-ink);
}
.lead-a h2{
  font-size:clamp(1.7rem,4.4vw,2.9rem); font-weight:700; letter-spacing:-.024em;
  max-width:22ch; transition:color .18s;
}
.lead-a:hover h2{color:var(--edge-ink)}
.lead-ex{font-size:var(--fs-lg); color:var(--ink-2); max-width:62ch; line-height:1.66}
.lead-foot{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; padding-top:.3rem}
.lead-min{font-family:var(--mono); font-size:var(--fs-xs); color:var(--muted); letter-spacing:.06em}
.lead-go{margin-left:auto; font-size:var(--fs-md); color:var(--edge-ink); font-weight:600; white-space:nowrap}
@media (max-width:640px){ .lead-mark{font-size:3rem; opacity:.1} .lead-a h2{max-width:none} }

/* ─────────── upcoming ─────────── */
.soon{padding:2.4rem 0 1rem; border-top:var(--rule); margin-top:1.4rem}
.soon-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.soon-list li{
  display:flex; align-items:baseline; gap:1rem; padding:.85rem 0; border-bottom:var(--rule);
  color:var(--ink-2); flex-wrap:wrap;
}
.soon-list li:last-child{border-bottom:0}
.soon-cat{
  font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase;
  color:var(--edge-ink); flex:0 0 auto; min-width:9.5rem;
}
.soon-t{flex:1; min-width:0}

/* ─────────── post cards ─────────── */
.cat-block{padding:2.2rem 0 .6rem}
.pgrid{display:grid; gap:0 2.2rem; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); border-top:var(--rule)}
.pcard{
  display:flex; flex-direction:column; gap:.5rem; text-decoration:none; color:inherit;
  padding:1.15rem 0 1.3rem; border-bottom:var(--rule);
  transition:opacity .18s;
}
.pcard:hover h3{color:var(--edge-ink)}
.pcard-top{display:flex; align-items:center; gap:.5rem; justify-content:space-between}
.pcard h3{font-size:var(--fs-lg); font-weight:700; transition:color .18s}
.pcard.sm h3{font-size:var(--fs-base)}
.pcard-ex{font-size:var(--fs-md); color:var(--muted); line-height:1.6}
.pcard.sm .pcard-ex{display:none}
.pcard-min{font-family:var(--mono); font-size:var(--fs-xs); color:var(--muted); white-space:nowrap}
.pcard-foot{display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; margin-top:auto; padding-top:.45rem}
.pcard-go{margin-left:auto; font-size:var(--fs-md); color:var(--edge-ink); font-weight:600; white-space:nowrap}
.chip{
  display:inline-flex; align-items:center; white-space:nowrap;
  font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.08em; text-transform:uppercase;
  color:var(--edge-ink);
}
.tag{
  font-family:var(--mono); font-size:var(--fs-xs); color:var(--muted);
  text-decoration:none; padding:2px 6px; border-radius:5px; background:var(--surface-2);
}
a.tag:hover{color:var(--ink)}

/* ─────────── category / tag hero ─────────── */
.cat-hero{padding:2.6rem 0 1.6rem; display:flex; flex-direction:column; gap:.6rem}
.cat-hero h1{font-size:clamp(1.9rem,5vw,2.9rem); font-weight:740}
.crumbs{font-size:var(--fs-md); color:var(--muted)}
.crumbs a{color:var(--muted)}
.ymyl-note{
  border-left:3px solid var(--warn); background:var(--warn-soft); color:var(--ink-2);
  border-radius:0 12px 12px 0; padding:.8rem 1rem; font-size:var(--fs-md); max-width:62ch;
}
.ymyl-note b{display:block; color:var(--ink); margin-bottom:.15rem}
.empty{
  margin:2rem 0 4rem; text-align:center; padding:2.5rem 1.5rem;
  border:1px dashed var(--line-2); border-radius:12px; display:flex;
  flex-direction:column; gap:.5rem; align-items:center;
}

/* ─────────── article shell ─────────── */
.shell{display:block}
@media (min-width:1120px){
  .shell{display:grid; grid-template-columns:var(--rail) minmax(0,1fr); gap:3.5rem; align-items:start}
}
.rail{display:none}
@media (min-width:1120px){
  .rail{display:block; position:sticky; top:5.2rem; padding:1rem 0 3rem}
}
.rail ol{list-style:none; margin:0; padding:0; position:relative}
.rail ol::before{content:""; position:absolute; left:5px; top:8px; bottom:8px; width:1px; background:var(--line-2)}
.rail li{position:relative; padding:0 0 0 1.5rem}
.rail a{display:block; padding:.28rem 0; font-size:var(--fs-sm); line-height:1.35; color:var(--muted); text-decoration:none; transition:color .18s}
.rail a::before{
  content:""; position:absolute; left:1px; top:.72rem; width:9px; height:9px; border-radius:50%;
  background:var(--bg); border:1.5px solid var(--line-2); transition:all .2s;
}
.rail a:hover{color:var(--ink)}
.rail a.on{color:var(--ink); font-weight:600}
.rail a.on::before{background:var(--a-teal); border-color:var(--a-teal); box-shadow:0 0 0 4px var(--a-teal-soft)}
.rail .cap{margin:0 0 .9rem; padding-left:1.5rem}

.art{max-width:var(--colw); display:flex; flex-direction:column; gap:1.15rem}
.art.doc{margin:0 auto}
.art-head{padding:2.6rem 0 .6rem; display:flex; flex-direction:column; gap:.9rem}
.art-head h1{font-size:clamp(1.9rem,5vw,3rem); font-weight:760; letter-spacing:-.026em; line-height:1.15}
.deck{font-size:var(--fs-lg); color:var(--ink-2); max-width:60ch}
.meta{display:flex; gap:.5rem 1.1rem; flex-wrap:wrap; align-items:center; color:var(--muted); font-size:var(--fs-md)}
.dot{width:3px; height:3px; border-radius:50%; background:var(--line-2)}
.langsw{text-decoration:none}
.art-body{display:flex; flex-direction:column; gap:1.15rem}
.art-tags{display:flex; gap:.4rem; flex-wrap:wrap; padding-top:.5rem}
.art-note{margin-top:1rem}
.related{padding:2rem 0 3rem; border-top:1px solid var(--line); margin-top:1.5rem}
.related .sec-lbl{margin-bottom:.85rem}

/* article prose (markdown output + hand-authored fragments) */
.art-body h2{font-size:var(--fs-2xl); font-weight:700; margin-top:1.2rem}
.art-body h3{font-size:var(--fs-lg); font-weight:680; margin-top:.6rem}
.art-body ul,.art-body ol{margin:0; padding-left:1.4rem; display:flex; flex-direction:column; gap:.45rem}
.art-body li{padding-left:.2rem}
.art-body blockquote{
  margin:0; border-left:3px solid var(--edge); background:var(--edge-soft);
  border-radius:0 12px 12px 0; padding:.85rem 1.05rem; color:var(--ink-2);
}
.art-body strong{font-weight:680; color:var(--ink)}
.art-body pre{
  margin:0; background:var(--code-bg); color:var(--code-ink); border-radius:12px;
  padding:1.05rem 1.15rem; overflow-x:auto; font-size:var(--fs-md); line-height:1.62;
  border:1px solid color-mix(in srgb,var(--code-ink) 10%,transparent);
}
.art-body pre .c{color:var(--code-dim)}
.art-body pre .k{color:#7fd3ff}
.art-body pre .f{color:#7ee3ce}
.art-body pre .s{color:#ffd48a}
.art-body pre .w{color:#ff9d80}
.art-body :not(pre)>code{
  background:var(--surface-2); padding:.1em .38em; border-radius:5px;
  font-size:.9em; border:1px solid var(--line);
}
.art-body table{border-collapse:collapse; width:100%; font-size:var(--fs-md); min-width:30rem}
.art-body th,.art-body td{padding:.62rem .85rem; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
.art-body th{font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:500}
.art-body tr:last-child td{border-bottom:0}
.art-body td.num{font-variant-numeric:tabular-nums; white-space:nowrap}

/* wide content must scroll inside itself, never the page body */
.tblwrap{overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--surface)}
figure{margin:0; display:flex; flex-direction:column; gap:.55rem}
figcaption{font-size:var(--fs-sm); color:var(--muted)}
.bleed{max-width:none; width:100%}
@media (min-width:1120px){ .bleed{width:min(880px,calc(100vw - var(--rail) - 8rem))} }

.card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1.05rem 1.15rem; box-shadow:var(--shadow)}
.adslot{
  border:1px dashed var(--line-2); border-radius:12px; min-height:96px;
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.12em;
}
.adslot:empty::before{content:"โฆษณา"}

/* ─────────── footer ─────────── */
.site-foot{margin-top:4rem; border-top:1px solid var(--line); padding:2.4rem 0 4rem; background:var(--surface)}
.foot-in{display:grid; gap:1.6rem; grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.foot-in nav{display:flex; flex-direction:column; gap:.1rem}
.foot-in nav a{
  font-size:var(--fs-md); text-decoration:none; color:var(--muted);
  display:inline-flex; align-items:center; min-height:34px;
}
.foot-in nav a:hover{color:var(--ink)}
.foot-in nav a .dotc{opacity:.6}
.foot-brand b{font-family:var(--serif)}
.foot-in .lbl{margin-bottom:.35rem}
.foot-brand{font-size:var(--fs-lg)}
.foot-brand b{color:var(--ink)}
.ver{font-family:var(--mono); font-size:var(--fs-xs); margin-top:.4rem}