/* Sandworm Lazarus — site styles
   Role colours are fixed site-wide and match every diagram:
   threat = ผู้โจมตี/ติดเชื้อ, guard = การป้องกัน, warn = จุดเสี่ยง, data = ข้อมูล/เครื่องปกติ */

/* ---------- Fonts (self-hosted) ---------- */
@font-face { font-family: "Chakra Petch"; font-weight: 500; font-display: swap; src: url(../fonts/chakra-petch-thai-500-normal.woff2) format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Chakra Petch"; font-weight: 600; font-display: swap; src: url(../fonts/chakra-petch-thai-600-normal.woff2) format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Chakra Petch"; font-weight: 700; font-display: swap; src: url(../fonts/chakra-petch-thai-700-normal.woff2) format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Chakra Petch"; font-weight: 500; font-display: swap; src: url(../fonts/chakra-petch-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Chakra Petch"; font-weight: 600; font-display: swap; src: url(../fonts/chakra-petch-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Chakra Petch"; font-weight: 700; font-display: swap; src: url(../fonts/chakra-petch-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Anuphan"; font-weight: 400; font-display: swap; src: url(../fonts/anuphan-thai-400-normal.woff2) format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Anuphan"; font-weight: 500; font-display: swap; src: url(../fonts/anuphan-thai-500-normal.woff2) format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Anuphan"; font-weight: 600; font-display: swap; src: url(../fonts/anuphan-thai-600-normal.woff2) format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Anuphan"; font-weight: 400; font-display: swap; src: url(../fonts/anuphan-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Anuphan"; font-weight: 500; font-display: swap; src: url(../fonts/anuphan-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Anuphan"; font-weight: 600; font-display: swap; src: url(../fonts/anuphan-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url(../fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 600; font-display: swap; src: url(../fonts/jetbrains-mono-latin-600-normal.woff2) format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  color-scheme: dark;

  --bg:        oklch(0.145 0.022 240);
  --bg-raise:  oklch(0.185 0.026 238);
  --bg-sunk:   oklch(0.115 0.02 242);
  --line:      oklch(0.36 0.04 230);
  --line-soft: oklch(0.25 0.03 236);
  --ink:       oklch(0.945 0.012 210);
  --ink-2:     oklch(0.8 0.028 215);
  --ink-3:     oklch(0.66 0.034 220);

  --threat:      oklch(0.66 0.225 22);
  --threat-ink:  oklch(0.77 0.165 22);
  --threat-wash: oklch(0.66 0.225 22 / 0.13);
  --guard:       oklch(0.86 0.19 152);
  --guard-wash:  oklch(0.86 0.19 152 / 0.11);
  --warn:        oklch(0.85 0.15 80);
  --warn-wash:   oklch(0.85 0.15 80 / 0.12);
  --data:        oklch(0.83 0.115 215);
  --data-wash:   oklch(0.83 0.115 215 / 0.1);

  --f-display: "Chakra Petch", "Anuphan", system-ui, sans-serif;
  --f-read:    "Anuphan", system-ui, sans-serif;
  --f-code:    "JetBrains Mono", "Anuphan", ui-monospace, monospace;

  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 7rem;

  --measure: 58ch; /* ~68 Thai letters per line at 18px */
  --wide: 1120px;
  --gutter: 16px;
  --chamfer: 12px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--f-read);
  font-size: 1.125rem;
  line-height: 1.8;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--threat); color: oklch(0.99 0 0); }
:focus-visible { outline: 2px solid var(--warn); outline-offset: 3px; border-radius: 2px; }
html { scrollbar-color: var(--line) var(--bg-sunk); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-sunk); }
::-webkit-scrollbar-thumb { background: var(--line); border: 2px solid var(--bg-sunk); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

img, svg { display: block; max-width: 100%; }
a { color: var(--data); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--ink); text-decoration-color: var(--warn); }
code, kbd, .mono { font-family: var(--f-code); font-size: 0.86em; }
code { color: var(--warn); background: var(--bg-sunk); padding: 0.1em 0.4em; border: 1px solid var(--line-soft); }
strong { color: var(--ink); font-weight: 600; }
p, li, dd, figcaption { text-wrap: pretty; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip { position: absolute; left: var(--s-4); top: -4rem; z-index: 50; background: var(--warn); color: var(--bg); padding: var(--s-2) var(--s-4); font-family: var(--f-display); font-weight: 600; text-decoration: none; }
.skip:focus { top: var(--s-4); }
.skip:hover { color: var(--bg); }
@media (min-width: 700px) { :root { --gutter: 32px; } }
@media (min-width: 1100px) { :root { --gutter: 48px; } }

h1, h2, h3 { font-family: var(--f-display); line-height: 1.25; text-wrap: balance; margin: 0; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 700; }
h3 { font-size: 1.3rem; font-weight: 600; }
p { margin: 0 0 var(--s-5); }

/* Role swatch used in legends and inline keys */
.sw { display: inline-block; width: 0.75em; height: 0.75em; margin-right: 0.45em; vertical-align: 0.02em; clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 30% 100%, 0 70%); }
.sw--threat { background: var(--threat); } .sw--guard { background: var(--guard); }
.sw--warn { background: var(--warn); } .sw--data { background: var(--data); }
.t-threat { color: var(--threat-ink); } .t-guard { color: var(--guard); } .t-warn { color: var(--warn); } .t-data { color: var(--data); }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--s-5);
  padding: var(--s-3) var(--gutter);
  background: oklch(0.145 0.022 240 / 0.82);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  border-bottom: 1px solid var(--line-soft);
}
/* On the two hero pages the bar starts as a scrim over the hero, which is the look the hero was built
   for — but it used to be absolutely positioned, so it scrolled away with the hero and the whole rest of
   the page had no navigation at all. It is fixed now and turns into the ordinary solid bar on first
   scroll, so the hero reads exactly as before at rest and the nav is there for the rest of the page. */
.topbar--over { position: fixed; inset: 0 0 auto 0; background-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: transparent; padding-bottom: var(--s-5); transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), padding-bottom 0.3s var(--ease-out); }
.topbar--over::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, oklch(0.12 0.02 240 / 0.92) 0%, oklch(0.12 0.02 240 / 0.6) 70%, transparent 100%); transition: opacity 0.3s var(--ease-out); }
.topbar--over.is-stuck { background-color: oklch(0.145 0.022 240 / 0.82); backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3); border-bottom-color: var(--line-soft); padding-bottom: var(--s-3); }
.topbar--over.is-stuck::before { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .topbar--over, .topbar--over::before { transition: none; } }
.brand { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--ink); text-decoration: none; font-family: var(--f-display); font-weight: 700; letter-spacing: 0.06em; font-size: 0.95rem; text-transform: uppercase; }
.brand svg { width: 30px; height: 30px; flex: none; }
.brand:hover { color: var(--ink); }
.brand b { color: var(--threat-ink); font-weight: 700; }
.topnav { margin-left: auto; display: flex; gap: var(--s-5); }
.topnav a { font-family: var(--f-display); font-weight: 500; font-size: 0.98rem; color: var(--ink-2); text-decoration: none; padding: var(--s-2) 0; border-bottom: 1px solid transparent; white-space: nowrap; }
.topnav a:hover, .topnav a[aria-current] { color: var(--ink); border-bottom-color: var(--warn); }
.crumb { font-family: var(--f-code); font-size: 0.8rem; color: var(--ink-3); }
.crumb a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 0.2em; }
.crumb a:hover { color: var(--ink); }
@media (max-width: 640px) { .topnav { gap: var(--s-4); } .topnav a.opt { display: none; } .crumb { display: none; } .brand { gap: var(--s-2); font-size: 0.88rem; letter-spacing: 0.04em; } .brand svg { width: 26px; height: 26px; } }
@media (max-width: 480px) { .topbar { gap: var(--s-3); } .topnav { gap: var(--s-3); } .topnav a { font-size: 0.92rem; } }

/* ---------- Buttons ---------- */
.btn {
  --c: var(--ink);
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: 0.85em 1.4em 0.85em 1.2em;
  font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.02em;
  color: oklch(0.16 0.02 240); background: var(--c);
  text-decoration: none; border: 0; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)));
  transition: background-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.btn svg { width: 1.1em; height: 1.1em; transition: transform 0.3s var(--ease-out); }
.btn:hover { color: oklch(0.16 0.02 240); background: oklch(0.995 0.004 210); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }
.btn--ghost { --c: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); clip-path: none; }
.btn--ghost:hover { background: var(--bg-raise); color: var(--ink); }

/* ================= HOME ================= */
.hero { position: relative; min-height: min(100svh, 940px); display: grid; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line-soft); }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero::before { /* scrim keeps text legible over the live network */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 70% at 18% 62%, oklch(0.12 0.02 240 / 0.92) 0%, oklch(0.12 0.02 240 / 0.55) 45%, transparent 75%),
    linear-gradient(to top, var(--bg) 0%, transparent 28%);
}
.hero::after { /* scanlines, frame only */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.35;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, oklch(0 0 0 / 0.28) 3px 4px);
}
.hero__inner { align-self: end; width: 100%; max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: 7.5rem var(--gutter) var(--s-7); display: grid; gap: var(--s-6); }
.wordmark { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: clamp(3.1rem, 14vw, 8.75rem); line-height: 0.9; letter-spacing: -0.02em; margin: 0; }
.wordmark span { display: block; }
.wordmark .l2 { color: var(--threat-ink); padding-left: 0.55em; }
.wordmark .ch { display: inline-block; min-width: 0.1em; }
.wordmark .ch.scr { color: var(--data); opacity: 0.85; }
.hero__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6); align-items: end; }
.promise { font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.7; max-width: 34em; color: var(--ink-2); margin: 0 0 var(--s-5); }
.promise strong { color: var(--ink); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.live { font-family: var(--f-code); font-size: 0.8rem; line-height: 1.6; color: var(--ink-2); min-width: 15rem; background: oklch(0.12 0.02 240 / 0.7); border: 1px solid var(--line-soft); padding: var(--s-3) var(--s-4); }
.live__title { font-family: var(--f-display); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.04em; color: var(--ink); margin: 0 0 var(--s-2); display: flex; justify-content: space-between; gap: var(--s-4); }
.live__title i { font-style: normal; color: var(--threat-ink); font-family: var(--f-code); font-size: 0.75rem; }
.live dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 0.15rem var(--s-4); }
.live dt { font-family: var(--f-read); font-size: 0.9rem; color: var(--ink-2); }
.live dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
@media (max-width: 760px) {
  .hero__foot { grid-template-columns: 1fr; }
  .live { min-width: 0; }
  .wordmark .l2 { padding-left: 0.3em; }
}

.section { max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: var(--s-9) var(--gutter) var(--s-8); }
.section__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-6); align-items: end; margin-bottom: var(--s-7); }
.section__head p { margin: 0; color: var(--ink-2); max-width: 36em; }
@media (max-width: 800px) { .section__head { grid-template-columns: 1fr; gap: var(--s-4); } }

/* Lesson index: case-file rows, not cards */
.cases { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.case { border-bottom: 1px solid var(--line); }
.case > a, .case > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; gap: var(--s-5); align-items: center; padding: var(--s-5) 0; color: inherit; text-decoration: none; }
.case__id { font-family: var(--f-code); font-size: 0.85rem; color: var(--ink-3); letter-spacing: 0.04em; }
.case__title { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.3; margin: 0; }
.case__title small { display: block; font-family: var(--f-read); font-weight: 400; font-size: 1rem; color: var(--ink-3); margin-top: 0.15rem; }
.case__state { font-family: var(--f-display); font-weight: 600; font-size: 0.95rem; white-space: nowrap; }
.case--open .case__id { color: var(--ink-3); }
.case--open .case__state { color: var(--ink-2); display: inline-flex; align-items: center; gap: var(--s-2); }
.case--started .case__state { color: var(--warn); }
.case--closed .case__state { color: var(--guard); }
.case--closed .case__title { color: var(--ink-2); }
.case--open a:hover .case__state { color: var(--data); }
.case--open .case__state svg { width: 1.1em; height: 1.1em; transition: transform 0.3s var(--ease-out); }
.case--open a:hover .case__state svg { transform: translateX(5px); }
.case--open a:hover .case__title { color: var(--data); }
.case--soon .case__title { color: var(--ink-2); }
.case--soon .case__state { color: var(--ink-3); font-weight: 500; }
@media (max-width: 640px) {
  .case > a, .case > div { grid-template-columns: 1fr auto; gap: var(--s-2) var(--s-4); }
  .case__id { grid-column: 1 / -1; }
}

/* Colour key section */
.key { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-7); align-items: center; }
.key__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.key__list li { display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--s-3); align-items: baseline; }
.key__list .sw { width: 1rem; height: 1rem; margin: 0; }
.key__list b { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; }
.key__list span { display: block; color: var(--ink-2); font-size: 1rem; line-height: 1.6; }
@media (max-width: 860px) { .key { grid-template-columns: 1fr; } }

.foot { border-top: 1px solid var(--line-soft); background: var(--bg-sunk); }
.foot__inner { max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: var(--s-7) var(--gutter); display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-7); justify-content: space-between; align-items: start; color: var(--ink-3); font-size: 0.95rem; line-height: 1.7; }
.foot p { margin: 0; max-width: 34em; }
.foot__who { flex: none; }

/* ================= LESSON ================= */
.dossier-band { border-bottom: 1px solid var(--line-soft); }
.dossier { max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: var(--s-8) var(--gutter) var(--s-7); position: relative; }
.dossier__file { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-family: var(--f-code); font-size: 0.82rem; color: var(--ink-3); margin: 0 0 var(--s-5); }
.dossier__file .id { color: var(--ink-2); font-weight: 600; }
.dossier h1 { font-size: clamp(2.6rem, 7.4vw, 6rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; max-width: 9.1em; }
.dossier h1 .amp { color: var(--ink-3); }
.dossier__en { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.1rem, 2vw, 1.4rem); color: var(--data); margin: var(--s-3) 0 var(--s-6); letter-spacing: 0.03em; }
.dossier__lede { font-size: clamp(1.15rem, 1.8vw, 1.32rem); line-height: 1.8; color: var(--ink-2); max-width: 38em; margin: 0; }
.dossier__meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--line-soft); font-size: 0.98rem; color: var(--ink-3); }
.dossier__meta b { color: var(--ink); font-weight: 500; }
.dossier__meta a { color: var(--ink); text-decoration-color: var(--ink-3); }
.dossier__meta a:hover { color: var(--threat-ink); }
.foot a { color: var(--ink-2); }
/* the one route to the operator file that is on every page: named, not buried in the sentence above it */
.foot__who { font-family: var(--f-display); font-weight: 600; }
.foot__who a { display: inline-flex; align-items: center; gap: var(--s-2); text-decoration: none; }
.foot__who svg { width: 1em; height: 1em; transition: transform 0.3s var(--ease-out); }
.foot__who a:hover { color: var(--data); }
.foot__who a:hover svg { transform: translateX(4px); }
.foot__who a:focus-visible { outline: 2px solid var(--warn); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .foot__who svg { transition: none; } }
.stamp { position: absolute; right: var(--gutter); top: var(--s-8); font-family: var(--f-display); font-weight: 700; font-size: 1rem; letter-spacing: 0.12em; color: var(--threat-ink); border: 2px solid currentColor; padding: 0.35em 0.8em; transform: rotate(-6deg); opacity: 0.85; text-transform: uppercase; }
@media (max-width: 760px) { .stamp { position: static; display: inline-block; margin-bottom: var(--s-5); } }

.lesson { max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: var(--s-5) var(--gutter) var(--s-9); display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--s-7); }
@media (max-width: 1000px) { .lesson { grid-template-columns: 1fr; } }

/* Kill-chain rail */
.rail { position: sticky; top: 5.5rem; align-self: start; padding-top: var(--s-2); }
.rail__title { font-family: var(--f-display); font-weight: 600; font-size: 0.9rem; color: var(--ink-3); margin: 0 0 var(--s-4); }
.rail ol { list-style: none; margin: 0; padding: 0; position: relative; }
.rail ol::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 0; border-left: 2px dashed var(--line); }
.rail li { position: relative; }
.rail a { display: grid; grid-template-columns: 16px 1fr; gap: var(--s-3); align-items: start; padding: 0.4rem 0; text-decoration: none; color: var(--ink-3); font-family: var(--f-display); font-weight: 500; font-size: 0.98rem; line-height: 1.45; transition: color 0.3s var(--ease-out); }
.rail a::before { content: ""; width: 16px; height: 16px; margin-top: 0.12rem; background: var(--bg); box-shadow: inset 0 0 0 2px var(--line); clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 30% 100%, 0 70%); transition: background-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); }
.rail a:hover { color: var(--ink); }
.rail a.done { color: var(--ink-2); }
.rail a.done::before { background: var(--guard); box-shadow: none; }
.rail a.now { color: var(--ink); }
.rail a.now::before { background: var(--warn); box-shadow: none; }
.rail__note { margin-top: var(--s-5); font-size: 0.88rem; line-height: 1.6; color: var(--ink-3); }
.rail__note .sw { width: 0.7em; height: 0.7em; }
@media (max-width: 1000px) { .rail { display: none; } }

/* Mobile progress strip */
.progress { display: none; }
@media (max-width: 1000px) {
  .progress { display: flex; position: sticky; top: 57px; z-index: 20; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--gutter); background: oklch(0.12 0.02 240 / 0.92); border-bottom: 1px solid var(--line-soft); font-family: var(--f-display); font-size: 0.92rem; color: var(--ink-2); }
  .progress b { color: var(--warn); font-weight: 600; font-family: var(--f-code); font-size: 0.8rem; }
  .progress span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .progress i { position: absolute; left: 0; bottom: -1px; height: 2px; background: var(--guard); width: 0; }
}

/* Reading column */
.prose { min-width: 0; }
.prose > section { padding-top: var(--s-7); }
.prose > section + section { margin-top: var(--s-6); border-top: 1px solid var(--line-soft); }
.prose h2 { margin-bottom: var(--s-5); display: flex; gap: 0.55em; align-items: baseline; flex-wrap: wrap; }
.prose h2 .n { font-family: var(--f-code); font-weight: 600; font-size: 1rem; color: var(--ink-3); letter-spacing: 0.04em; transform: translateY(-0.15em); }
.prose h2 .en { font-family: var(--f-display); font-weight: 500; font-size: 1.05rem; color: var(--ink-3); }
.prose h3 { margin: var(--s-6) 0 var(--s-3); }
.prose p, .prose ul, .prose ol:not(.steps):not(.check), .prose .term, .prose .example { max-width: var(--measure); }
.prose ul { padding-left: 1.2em; margin: 0 0 var(--s-5); }
.prose ul li { margin-bottom: var(--s-2); }
.prose ul li::marker { color: var(--ink-3); }
.lead { font-size: 1.22rem; color: var(--ink); }

.term { margin: var(--s-6) 0; padding: var(--s-4) var(--s-5); background: var(--data-wash); position: relative; }
.term::before, .term::after { content: ""; position: absolute; width: 12px; height: 12px; border: solid var(--data); }
.term::before { left: 0; top: 0; border-width: 1px 0 0 1px; }
.term::after { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.term dt { font-family: var(--f-display); font-weight: 600; color: var(--data); font-size: 1.05rem; }
.term dd { margin: var(--s-1) 0 0; color: var(--ink-2); font-size: 1.02rem; line-height: 1.7; }

.example { margin: var(--s-6) 0; padding: var(--s-5); background: var(--threat-wash); }
.example h3 { margin: 0 0 var(--s-2); font-size: 1.15rem; color: var(--threat-ink); }
.example p { margin: 0; color: var(--ink-2); font-size: 1.02rem; line-height: 1.75; }

/* Figures with code-drawn diagrams */
.fig { margin: var(--s-7) 0; position: relative; padding: var(--s-5) 0 0; }
.fig__frame { position: relative; background: var(--bg-sunk); border: 1px solid var(--line-soft); padding: 16px; }
@media (min-width: 760px) { .fig__frame { padding: 28px; } }
.fig__frame::before, .fig__frame::after { content: ""; position: absolute; width: 22px; height: 22px; border: solid var(--warn); pointer-events: none; }
.fig__frame::before { left: -1px; top: -1px; border-width: 2px 0 0 2px; }
.fig__frame::after { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; }
.fig__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-5); align-items: baseline; margin-bottom: var(--s-4); }
.fig__title { font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; line-height: 1.4; margin: 0; }
.fig__title .mono { color: var(--warn); font-size: 0.72em; margin-right: 0.6em; letter-spacing: 0.04em; }
.fig__dl { font-family: var(--f-display); font-size: 0.92rem; color: var(--ink-3); text-decoration: none; display: inline-flex; gap: var(--s-2); align-items: center; }
.fig__dl svg { width: 1em; height: 1em; }
.fig__dl:hover { color: var(--data); }
.diagram { width: 100%; min-height: 200px; }
.diagram svg { width: 100%; height: auto; overflow: visible; }
.fig figcaption { margin-top: var(--s-4); font-size: 1rem; line-height: 1.7; color: var(--ink-2); max-width: var(--measure); }
.fig details { margin-top: var(--s-3); font-size: 0.98rem; color: var(--ink-2); max-width: var(--measure); }
.fig summary { cursor: pointer; font-family: var(--f-display); font-weight: 500; color: var(--ink-3); list-style: none; display: inline-flex; gap: var(--s-2); align-items: center; }
.fig summary::-webkit-details-marker { display: none; }
.fig summary::before { content: ""; width: 0.55em; height: 0.55em; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform 0.25s var(--ease-out); }
.fig details[open] summary::before { transform: rotate(45deg); }
.fig summary:hover { color: var(--ink); }
.fig details ol { margin: var(--s-3) 0 0; padding-left: 1.4em; }
.fig details li { margin-bottom: var(--s-2); }
@media (min-width: 1240px) { .fig--wide { margin-right: calc(-1 * var(--s-5)); } }

/* Malware family table */
.table { width: 100%; border-collapse: collapse; margin: var(--s-6) 0; font-size: 1rem; line-height: 1.65; }
.table th, .table td { text-align: left; vertical-align: top; padding: var(--s-4) var(--s-4) var(--s-4) 0; border-bottom: 1px solid var(--line-soft); }
.table thead th { font-family: var(--f-display); font-weight: 600; font-size: 0.92rem; color: var(--ink-3); border-bottom: 1px solid var(--line); padding-top: 0; }
.table tbody th { font-family: var(--f-display); font-weight: 600; font-size: 1.12rem; color: var(--ink); width: 9.5rem; }
.table tbody th small { display: block; font-family: var(--f-code); font-weight: 400; font-size: 0.8125rem; color: var(--data); }
.table td { color: var(--ink-2); }
.table td.like { color: var(--ink); }
.table tr.hot th { color: var(--threat-ink); }
@media (max-width: 720px) {
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table, .table tbody, .table tr, .table th, .table td { display: block; width: auto; }
  .table tr { padding: var(--s-4) 0; border-bottom: 1px solid var(--line-soft); }
  .table th, .table td { border: 0; padding: 0.15rem 0; }
  .table td::before { content: attr(data-label) ": "; color: var(--ink-3); font-family: var(--f-display); font-size: 0.9rem; }
  /* fact tables already name the row in a th: don't print the column label as well */
  .table tr > th[scope="row"] ~ td:only-of-type::before { content: none; }
}

/* Response runbook */
.steps { list-style: none; margin: var(--s-6) 0; padding: 0; counter-reset: s; display: grid; gap: 0; max-width: 46rem; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 3.2rem 1fr; gap: var(--s-4); padding: var(--s-5) 0; border-top: 1px solid var(--line-soft); }
.steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--f-code); font-weight: 600; font-size: 1rem; color: var(--ink-3); padding-top: 0.15rem; }
.steps li.stop::before { color: var(--warn); }
.steps h3 { margin: 0 0 var(--s-1); font-size: 1.2rem; }
.steps p { margin: 0; color: var(--ink-2); font-size: 1.02rem; line-height: 1.75; }

/* Summary checklist */
.check { list-style: none; margin: var(--s-5) 0; padding: 0; display: grid; gap: var(--s-3); max-width: 46rem; }
.check li { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--s-3); align-items: start; font-size: 1.08rem; }
.check li svg { width: 1.3rem; height: 1.3rem; margin-top: 0.3rem; color: var(--guard); }

.next { margin-top: var(--s-8); display: grid; grid-template-columns: 1fr auto; gap: var(--s-5); align-items: center; padding: var(--s-6); background: var(--bg-raise); position: relative; }
.next p { margin: 0; }
.next .case__id { display: block; margin-bottom: var(--s-1); }
.next b { font-family: var(--f-display); font-size: 1.4rem; font-weight: 600; }
@media (max-width: 640px) { .next { grid-template-columns: 1fr; } }

/* Entrance: content visible by default; only the wordmark animates (in JS) */
@media (prefers-reduced-motion: no-preference) {
  .rail a::before { transition-duration: 0.45s; }
}

/* ================= LESSON COMPONENTS (shared by all cases) ================= */

/* Level marker in the case-file line */
.lvl { color: var(--ink-3); }

/* Code / log / message samples. Variants carry the role colour on the label only. */
.code { margin: var(--s-6) 0; max-width: 46rem; background: var(--bg-sunk); border: 1px solid var(--line-soft); }
.code__label { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-2) var(--s-4); border-bottom: 1px solid var(--line-soft); font-family: var(--f-display); font-weight: 600; font-size: 0.92rem; color: var(--ink-3); }
.code__label b { font-weight: 600; color: var(--data); }
.code--bad .code__label b { color: var(--threat-ink); }
.code--good .code__label b { color: var(--guard); }
.code--warn .code__label b { color: var(--warn); }
.code pre { margin: 0; padding: var(--s-4); overflow-x: auto; font-family: var(--f-code); font-size: 0.88rem; line-height: 1.7; color: var(--ink-2); tab-size: 2; }
.code pre .hl { color: var(--warn); }
.code pre .bad { color: var(--threat-ink); }
.code pre .ok { color: var(--guard); }
.code pre .dim { color: var(--ink-3); }

/* Myth vs fact */
.myth { margin: var(--s-6) 0; max-width: 46rem; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-soft); }
.myth > div { padding: var(--s-4) var(--s-5); }
.myth > div + div { border-left: 1px solid var(--line-soft); }
.myth h3 { margin: 0 0 var(--s-2); font-size: 1rem; }
.myth .no h3 { color: var(--threat-ink); }
.myth .yes h3 { color: var(--guard); }
.myth .no { background: var(--threat-wash); }
.myth p { margin: 0; font-size: 1.02rem; line-height: 1.7; color: var(--ink-2); }
@media (max-width: 640px) { .myth { grid-template-columns: 1fr; } .myth > div + div { border-left: 0; border-top: 1px solid var(--line-soft); } }

/* Self-check questions */
.quiz { margin: var(--s-6) 0; max-width: 46rem; display: grid; gap: var(--s-2); }
.quiz details { background: var(--bg-raise); padding: var(--s-4) var(--s-5); }
.quiz summary { cursor: pointer; list-style: none; font-family: var(--f-display); font-weight: 600; font-size: 1.08rem; line-height: 1.5; display: grid; grid-template-columns: 1.6rem 1fr; gap: var(--s-2); }
.quiz summary::-webkit-details-marker { display: none; }
.quiz summary::before { content: "?"; font-family: var(--f-code); color: var(--ink-3); }
.quiz details[open] summary::before { content: "→"; color: var(--ink-2); }
.quiz summary:hover { color: var(--warn); }
.quiz details p { margin: var(--s-3) 0 0 1.6rem; color: var(--ink-2); font-size: 1.02rem; line-height: 1.75; }

/* Prev / next case */
.pager { margin-top: var(--s-8); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.pager a { display: block; padding: var(--s-5); background: var(--bg-raise); text-decoration: none; color: var(--ink); transition: background-color 0.25s var(--ease-out); }
.pager a:hover { background: oklch(0.22 0.03 238); color: var(--ink); }
.pager a.nx { text-align: right; grid-column: 2; }
.pager span { display: block; font-family: var(--f-code); font-size: 0.8rem; color: var(--ink-3); margin-bottom: var(--s-1); }
.pager b { font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; line-height: 1.4; }
.pager a:hover b { color: var(--data); }
@media (max-width: 640px) { .pager { grid-template-columns: 1fr; } .pager a.nx { grid-column: 1; } }

/* Home: level groups */
.level { margin-top: var(--s-7); }
.level:first-of-type { margin-top: 0; }
.level__head { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-5); align-items: baseline; margin-bottom: var(--s-4); }
.level__no { font-family: var(--f-code); font-weight: 600; font-size: 0.95rem; color: var(--ink-2); }
.level__head h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; }
.level__head p { grid-column: 2; margin: 0; color: var(--ink-2); font-size: 1.02rem; max-width: 40em; }
@media (max-width: 640px) { .level__head { grid-template-columns: 1fr; } .level__head p { grid-column: 1; } }

/* Glossary */
.gloss-nav { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-5) 0; }
.gloss-nav a { font-family: var(--f-display); font-weight: 600; padding: var(--s-1) var(--s-3); background: var(--bg-raise); text-decoration: none; color: var(--ink-2); }
.gloss-nav a:hover { color: var(--ink); background: oklch(0.22 0.03 238); }
.gloss { margin: 0; max-width: var(--measure); }
.gloss dt { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; margin-top: var(--s-5); color: var(--ink); }
.gloss dt small { font-family: var(--f-code); font-weight: 400; font-size: 0.78rem; color: var(--data); margin-left: var(--s-2); }
.gloss dd { margin: var(--s-1) 0 0; color: var(--ink-2); font-size: 1.02rem; line-height: 1.75; }
.gloss dd a { font-size: 0.92rem; }
.case--special .case__id { color: var(--ink-3); }
.case--special .case__title { color: var(--ink); }
.case--special > a { background: linear-gradient(to right, var(--bg-raise), transparent 70%); padding-left: var(--s-4); padding-right: var(--s-4); }

/* ================= PORTFOLIO ================= */
.op { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--line-soft); }
.op canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: 0.55; }
.op::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(100deg, var(--bg) 0%, oklch(0.145 0.022 240 / 0.9) 45%, oklch(0.145 0.022 240 / 0.4) 100%); }
.op__inner { max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: 8rem var(--gutter) var(--s-8); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
.op__file { font-family: var(--f-code); font-size: 0.82rem; letter-spacing: 0.05em; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0 0 var(--s-4); }
.op__file .id { color: var(--threat-ink); }
.op__head { grid-column: 1 / -1; }
.op h1 [data-word] { white-space: nowrap; display: block; }
.op h1 { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; font-size: clamp(3rem, 15.5vw, 12rem); line-height: 0.88; letter-spacing: -0.02em; margin: 0; }
.op h1 .ch.scr { color: var(--data); }
.op__role { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.25rem, 2.6vw, 1.75rem); line-height: 1.45; margin: var(--s-5) 0 var(--s-4); max-width: 26em; }
.op__role em { font-style: normal; color: var(--ink); font-weight: 600; }
.op__bio { color: var(--ink-2); font-size: 1.12rem; line-height: 1.8; max-width: 36em; margin: 0 0 var(--s-6); }
.op__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (max-width: 900px) { .op__inner { padding-top: 6.5rem; } }

.tally { max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line-soft); }
.tally div { padding: var(--s-6) var(--s-4) var(--s-6) 0; }
.tally div + div { padding-left: var(--s-5); border-left: 1px solid var(--line-soft); }
.tally b { display: block; font-family: var(--f-display); font-weight: 700; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
.tally span { display: block; margin-top: var(--s-2); color: var(--ink-2); font-size: 1rem; line-height: 1.5; }
.tally div:nth-child(1) b { color: var(--threat-ink); } .tally div:nth-child(2) b { color: var(--warn); }
.tally div:nth-child(3) b { color: var(--guard); } .tally div:nth-child(4) b { color: var(--data); }
@media (max-width: 760px) { .tally { grid-template-columns: 1fr 1fr; } .tally div:nth-child(3) { padding-left: 0; border-left: 0; } .tally div:nth-child(n+3) { border-top: 1px solid var(--line-soft); } }

.creed { list-style: none; margin: 0; padding: 0; counter-reset: c; }
.creed li { counter-increment: c; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); padding: var(--s-6) 0; border-top: 1px solid var(--line-soft); align-items: baseline; }
.creed li::before { content: counter(c, decimal-leading-zero); font-family: var(--f-code); font-weight: 600; color: var(--ink-3); font-size: 1rem; }
.creed h3 { font-size: clamp(1.35rem, 2.6vw, 1.9rem); font-weight: 700; line-height: 1.35; }
.creed p { margin: 0; color: var(--ink-2); }
@media (max-width: 860px) { .creed li { grid-template-columns: 3rem 1fr; } .creed p { grid-column: 2; } }

.gallery { display: grid; gap: var(--s-8); }
.gallery__item { display: grid; gap: var(--s-5); }
.gallery__meta { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-2) var(--s-6); align-items: baseline; }
.gallery__meta .case__id, .gallery__meta h3 { grid-column: 1; }
.gallery__meta p { grid-column: 2; grid-row: 1 / span 3; }
.gallery__meta a { grid-column: 1; }
.gallery__meta .case__id { display: block; margin-bottom: var(--s-2); }
.gallery__meta h3 { font-size: 1.45rem; margin-bottom: var(--s-3); }
.gallery__meta p { color: var(--ink-2); font-size: 1.02rem; line-height: 1.75; margin: 0 0 var(--s-4); }
.gallery__meta a { font-family: var(--f-display); font-weight: 600; color: var(--guard); text-decoration: none; }
.gallery__meta a:hover { color: var(--ink); }
.gallery .fig { margin: 0; padding: 0; }
@media (max-width: 800px) { .gallery__meta { grid-template-columns: 1fr; } .gallery__meta p { grid-column: 1; grid-row: auto; } }

.domains { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-7); }
.domains div { padding: var(--s-5) 0; border-top: 1px solid var(--line-soft); }
.domains h3 { font-size: 1.4rem; margin-bottom: var(--s-2); }
.domains h3 .sw { width: 0.8rem; height: 0.8rem; }
.domains p { margin: 0 0 var(--s-2); color: var(--ink-2); font-size: 1rem; line-height: 1.7; }
.domains .tags { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); font-family: var(--f-display); font-size: 0.92rem; }
.domains .tags a { color: var(--ink-3); text-decoration: none; }
.domains .tags a:hover { color: var(--ink); }
@media (max-width: 760px) { .domains { grid-template-columns: 1fr; } }

.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.contact__links { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.contact__links li { border-bottom: 1px solid var(--line); }
.contact__links a { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) 0; text-decoration: none; color: var(--ink); font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; }
.contact__links a span { font-family: var(--f-code); font-weight: 400; font-size: 0.85rem; color: var(--ink-3); align-self: center; }
.contact__links a:hover { color: var(--guard); }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }

/* ---------- motion layer: 3D case-file core + living diagrams ---------- */
.dossier-band { position: relative; overflow: hidden; isolation: isolate; }
.fx3d { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.dossier-band::after { /* keeps the reading side calm over the 3D core */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, var(--bg) 0%, oklch(0.145 0.022 240 / 0.82) 38%, oklch(0.145 0.022 240 / 0) 72%);
}
@media (max-width: 699px) {
  .fx3d { opacity: 0.5; }
  .dossier-band::after { background: linear-gradient(180deg, oklch(0.145 0.022 240 / 0.55), var(--bg) 88%); }
  .dossier { padding-top: var(--s-6); padding-bottom: var(--s-6); }
  .dossier h1 { font-size: clamp(2.1rem, 10.5vw, 2.7rem); }
  .dossier__en { margin-bottom: var(--s-4); }
  .dossier__lede { font-size: 1.06rem; line-height: 1.75; }
  .dossier__meta { margin-top: var(--s-4); gap: var(--s-1) var(--s-5); font-size: 0.92rem; }
}
.fig__dl.is-busy { opacity: 0.6; pointer-events: none; }

@media (prefers-reduced-motion: no-preference) {
  .sl-dash { animation: sl-dash 1.1s linear infinite; }
  .diagram { position: relative; overflow: hidden; }
  .diagram::after { /* a slow scan line over the figure */
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30%; pointer-events: none; transform: translateY(-100%); will-change: transform;
    background: linear-gradient(180deg, transparent, oklch(0.83 0.115 215 / 0.05) 60%, oklch(0.83 0.115 215 / 0.12) 99%, transparent);
    animation: sl-scan 7s linear infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sl-dash { animation: none; }
}
@keyframes sl-card-in { from { opacity: 0; transform: translateY(12px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes sl-dash { to { stroke-dashoffset: -22; } }
@keyframes sl-guard { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 5px var(--guard)); } }
/* moved with transform, not top: no layout work and no layout shift while it runs */
@keyframes sl-scan { from { transform: translateY(-100%); } to { transform: translateY(433%); } }

.fig__play { font: 600 0.85rem var(--f-display); color: var(--ink-3); background: none; border: 1px solid var(--line-soft); padding: 0.2rem 0.6rem; display: inline-flex; gap: 0.4rem; align-items: center; cursor: pointer; }
.fig__play svg { width: 0.85em; height: 0.85em; }
.fig__play:hover { color: var(--data); border-color: var(--data); }
.fig__play:focus-visible { outline: 2px solid var(--warn); outline-offset: 2px; }
.fig__play { margin-left: auto; }

/* ---------- hover glossary (assets/js/gloss.js) ---------- */
.gl { text-decoration: underline dotted var(--data); text-decoration-thickness: 1.5px; text-underline-offset: 0.28em; cursor: help; border-radius: 2px; }
.gl:hover, .gl[aria-expanded="true"] { color: var(--data); background: var(--data-wash); }
.gl:focus-visible { outline: 2px solid var(--warn); outline-offset: 2px; }
.gl-pop {
  position: absolute; z-index: 60; width: min(22rem, calc(100vw - 32px));
  background: var(--bg-raise); border: 1px solid var(--data); color: var(--ink-2);
  padding: 0.85rem 1rem 0.9rem; box-shadow: 0 18px 40px oklch(0 0 0 / 0.55), 0 0 0 1px oklch(0.83 0.115 215 / 0.12);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  font-family: var(--f-read); font-size: 0.95rem; line-height: 1.6;
}
.gl-pop p { margin: 0; }
.gl-pop__tag { font: 600 0.8rem var(--f-display); letter-spacing: 0; color: var(--data); margin-bottom: 0.3rem !important; }
.gl-pop__term { font: 700 1.08rem/1.35 var(--f-display); color: var(--ink); margin-bottom: 0.35rem !important; }
.gl-pop__term small { display: block; font: 500 0.78rem var(--f-code); color: var(--ink-3); margin-top: 0.15rem; }
.gl-pop__links { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; margin-top: 0.6rem !important; font-family: var(--f-display); font-size: 0.88rem; }
.gl-pop__links a { color: var(--data); text-decoration: none; }
.gl-pop__links a:hover { text-decoration: underline; }
@media (prefers-reduced-motion: no-preference) { .gl-pop:not([hidden]) { animation: gl-in 0.16s ease-out; } }
@keyframes gl-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
dl.gloss dt:target { color: var(--data); }
dl.gloss dt:target + dd { background: oklch(0.83 0.115 215 / 0.07); box-shadow: 0 0 0 0.6rem oklch(0.83 0.115 215 / 0.07); }

/* ---------- home: foldable levels (assets/js/levels.js) ---------- */
.level__head { cursor: pointer; }
.level__toggle {
  all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: baseline; flex-wrap: wrap; min-height: 44px;
  gap: 0.2rem 0.9rem; font: inherit; color: inherit;
}
.level__toggle:focus-visible { outline: 2px solid var(--warn); outline-offset: 4px; }
.level__meta { font: 500 0.82rem var(--f-code); color: var(--ink-3); align-self: center; }
.level__chev { order: -1; flex: none; width: 0.7em; height: 0.7em; align-self: center; color: var(--ink-3); transition: transform 0.2s ease; }
.level.is-folded .level__chev { transform: rotate(-90deg); }
.level__head:hover .level__name { color: var(--data); }
.level.is-folded .level__head { margin-bottom: 0; padding-bottom: var(--s-4); border-bottom: 1px solid var(--line-soft); }
/* same spacing folded or open, so a level header never moves under the finger that toggled it */
.level-bar { grid-column: 1 / -1; display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-4); }
.level-bar button {
  font: 600 0.88rem var(--f-display); color: var(--ink-2); background: none; cursor: pointer;
  border: 1px solid var(--line); padding: 0.5rem 1rem; min-height: 44px;
}
.level-bar button:hover { color: var(--data); border-color: var(--data); }
.level-bar button:focus-visible { outline: 2px solid var(--warn); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .level:not(.is-folded) ol.cases { animation: gl-in 0.25s ease-out; } }


.news-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.news-list { display: grid; gap: var(--s-4); grid-template-columns: 1fr; max-width: 820px; }


.news-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.news-chip { font-family: var(--f-display); font-weight: 600; font-size: .7rem; letter-spacing: .07em; padding: .2em .65em; color: var(--c); background: var(--cw); border: 1px solid color-mix(in oklch, var(--c) 38%, transparent); }
.news-card__date { font-family: var(--f-code); font-size: .76rem; color: var(--ink-3); white-space: nowrap; }
.news-card__title { font-size: 1.04rem; line-height: 1.35; margin: 0; }
.news-card__title a { color: var(--ink); text-decoration: none; background-image: linear-gradient(var(--c), var(--c)); background-size: 0% 1.5px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .3s var(--ease-out); }
.news-card__title a:hover, .news-card__title a:focus-visible { background-size: 100% 1.5px; color: var(--c); }
.news-card__src { margin: 0; font-size: .78rem; color: var(--ink-3); }
.news-card__src a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; }
.news-card__src a:hover { color: var(--ink-2); }

@media (min-width: 760px) { .news-card__title { font-size: 1.1rem; } }

/* ============ AI news feed (home band + news.html) ============ */
.section--news { padding-top: var(--s-8); padding-bottom: var(--s-7); border-bottom: 1px solid var(--line-soft); }
.section__head--news { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.news-updated { display: inline-block; color: var(--ink-3); font: 500 0.82rem/1.4 var(--f-code); }
.news-more { align-self: end; justify-self: end; display: inline-flex; align-items: center; gap: var(--s-2); color: var(--data); font-weight: 600; text-decoration: none; white-space: nowrap; }
.news-more svg { width: 1.05em; height: 1.05em; transition: transform 0.3s var(--ease-out); }
.news-more:hover svg { transform: translateX(4px); }
@media (max-width: 800px) { .section__head--news { grid-template-columns: 1fr; } .news-more { justify-self: start; } }

.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.news-grid--all { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .news-grid, .news-grid--all { grid-template-columns: 1fr; } }

.news-card {
  --c: var(--data);
  position: relative; display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5); background: var(--bg-raise);
  border: 1px solid var(--line-soft); border-top: 1px solid color-mix(in oklab, var(--c) 55%, var(--line-soft));
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
  transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}
.news-card:hover { background: oklch(0.21 0.028 238); border-top-color: var(--c); transform: translateY(-2px); }
.news-card--threat { --c: var(--threat-ink); }
.news-card--guard { --c: var(--guard); }
.news-card--warn { --c: var(--warn); }
.news-card--data { --c: var(--data); }

.news-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.news-tag { font: 600 0.72rem/1 var(--f-display); letter-spacing: 0.04em; padding: 0.32em 0.6em; color: oklch(0.14 0.02 240); background: var(--c); clip-path: polygon(0 0, 100% 0, 100% 100%, 6px 100%, 0 calc(100% - 6px)); }
.news-card__date { font: 500 0.78rem/1 var(--f-code); color: var(--ink-3); }
.news-card__title { margin: 0; font: 700 1.08rem/1.35 var(--f-display); color: var(--ink); }
.news-card:hover .news-card__title a { text-decoration: underline; text-decoration-color: var(--ink-3); text-underline-offset: 0.18em; }
.news-card__title a { color: var(--ink); text-decoration: none; }
.news-card__title a::after { content: ""; position: absolute; inset: 0; }
.news-card__src { position: relative; z-index: 1; }
.news-card__summary { margin: 0; color: var(--ink-2); font-size: 0.95rem; line-height: 1.6; }
.news-card__takeaway { margin: 0; margin-top: auto; padding: var(--s-3); background: var(--bg-sunk); border-left: 1px solid var(--line); font-size: 0.88rem; line-height: 1.55; color: var(--ink-2); }
.news-card__takeaway b { color: var(--guard); font-weight: 600; }
.news-card__takeaway--note { border-left: 1px solid var(--line); }
.news-card__takeaway--note b { color: var(--ink); }
.news-card__src, .news-card__srcname { white-space: nowrap; }
.news-card__foot { margin: 0; }
.news-card__src { color: var(--ink-3); font: 500 0.82rem/1.4 var(--f-code); text-decoration: none; }
a.news-card__src:hover { color: var(--data); text-decoration: underline; }

/* news.html */
.news-page { max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: var(--s-7) var(--gutter) var(--s-8); }
.news-filter { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-6); }
.news-chip { font: 600 0.85rem/1 var(--f-display); color: var(--ink-2); background: var(--bg-raise); border: 1px solid var(--line); padding: 0.55em 1em; cursor: pointer; clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)); transition: color 0.25s, background-color 0.25s, border-color 0.25s; }
.news-chip:hover { color: var(--ink); border-color: var(--line); background: oklch(0.22 0.03 238); }
.news-chip.is-on { color: oklch(0.16 0.02 240); background: var(--ink); border-color: var(--ink); }
.news-note { margin: var(--s-7) 0 0; color: var(--ink-3); font-size: 0.85rem; line-height: 1.6; max-width: 60ch; }

/* ---- news detail page (news-item.html) ---- */
.dossier h1.news-h1 { font-size: clamp(1.9rem, 4.6vw, 3.4rem); line-height: 1.25; max-width: 22em; }
.news-item { max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: var(--s-7) var(--gutter) var(--s-8); }
.news-item > section { margin-bottom: var(--s-7); }
.news-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s-4); margin-top: var(--s-4); }
.news-fact { --c: var(--data); display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4) var(--s-5); background: var(--bg-raise); border: 1px solid var(--line-soft); border-top: 3px solid var(--c); clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%); }
.news-fact--threat { --c: var(--threat-ink); } .news-fact--guard { --c: var(--guard); } .news-fact--warn { --c: var(--warn); }
.news-fact__n { font: 700 clamp(1.5rem, 3.2vw, 2.1rem)/1.1 var(--f-display); color: var(--ink); }
.news-fact__l { color: var(--ink-2); font-size: 0.9rem; line-height: 1.5; }
.news-defend { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.news-defend li { position: relative; padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-4) + 1.4rem); border-bottom: 1px solid var(--line-soft); line-height: 1.6; }
.news-defend li::before { content: ""; position: absolute; left: var(--s-4); top: 1.15em; width: 0.7rem; height: 0.7rem; background: var(--guard); clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 30% 100%, 0 70%); }
.news-caution { margin: var(--s-5) 0 0; padding: var(--s-4); background: var(--warn-wash); border-left: 3px solid var(--warn); color: var(--ink-2); font-size: 0.92rem; line-height: 1.65; }
.news-caution b { color: var(--warn); font-weight: 600; }
.news-links { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-6) 0 var(--s-5); }
.news-card__more { display: inline-block; margin-right: var(--s-4); color: var(--ink-3); font-weight: 500; font-size: 0.85rem; text-decoration: none; }
.news-card__more:hover { text-decoration: underline; }
.diagram .sl-bar { transform-box: fill-box; transform-origin: left center; animation: sl-bar-grow 0.9s var(--ease-out) both; }
@keyframes sl-bar-grow { from { transform: scaleX(0.02); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .diagram .sl-bar { animation: none; } }
.dossier h1.news-h1 { word-break: normal; overflow-wrap: normal; line-break: auto; text-wrap: balance; }

/* ---- AI news: region pill, filter rows, home tabs ---- */
.news-card[hidden] { display: none; }
.news-card__tags { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); }
.news-region { font: 600 0.72rem/1 var(--f-display); padding: 0.3em 0.55em; color: var(--ink-2); border: 1px solid var(--line); }
.news-filter { display: grid; gap: var(--s-3); }
.news-filter__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.news-filter__label { min-width: 5.2rem; color: var(--ink-3); font: 600 0.85rem/1 var(--f-display); }
.news-tabs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-5); }
.news-tab { font: 600 0.9rem/1 var(--f-display); color: var(--ink-2); background: var(--bg-raise); border: 1px solid var(--line); padding: 0.6em 1.1em; cursor: pointer; clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)); transition: color 0.25s, background-color 0.25s, border-color 0.25s; }
.news-tab:hover { color: var(--ink); background: oklch(0.22 0.03 238); }
.news-tab.is-on { color: oklch(0.16 0.02 240); background: var(--ink); border-color: var(--ink); }
.news-tab, .news-filter .news-chip, .news-empty .news-chip { min-height: 44px; }
.news-tab:focus-visible, .news-chip:focus-visible { outline: 2px solid var(--warn); outline-offset: 2px; }

/* ---- ai-evolution.html: pros/cons lists, source refs ---- */
.evo h3 { margin-top: var(--s-6); }
.pc-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--s-4); margin-top: var(--s-5); }
.pc-item { --c: var(--guard); padding: var(--s-4) var(--s-5); background: var(--bg-raise); border: 1px solid var(--line-soft); border-left: 3px solid var(--c); clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%); }
.pc-list--con .pc-item { --c: var(--threat-ink); }
.pc-item h3 { margin: 0 0 var(--s-2); font: 700 1.05rem/1.35 var(--f-display); color: var(--c); }
.pc-item p { margin: 0; font-size: 0.93rem; line-height: 1.65; color: var(--ink-2); }
.pc-read { display: grid; gap: var(--s-3); padding-left: 1.3rem; }
.pc-read li { line-height: 1.7; color: var(--ink-2); }
.pc-read b { color: var(--ink); }
a.ref { font: 600 0.72em/1 var(--f-code); color: var(--data); text-decoration: none; margin-left: 0.15em; vertical-align: super; }
a.ref:hover { text-decoration: underline; }
.src-list { padding-left: 1.6rem; display: grid; gap: var(--s-2); font-size: 0.9rem; line-height: 1.55; color: var(--ink-2); }
.src-list li:target { background: oklch(0.22 0.04 215 / 0.5); outline: 1px solid var(--data); }
.news-feature { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin: 0 0 var(--s-5); padding: var(--s-4) var(--s-5); background: var(--bg-raise); border: 1px solid var(--line-soft); border-left: 3px solid var(--data); text-decoration: none; color: var(--ink); }
.news-feature b { font: 700 1.02rem/1.35 var(--f-display); }
.news-feature span { color: var(--ink-2); font-size: 0.9rem; }
.news-feature em { font-style: normal; font: 600 0.9rem/1 var(--f-display); color: var(--data); white-space: nowrap; }
.news-feature:hover { background: oklch(0.21 0.028 238); }

/* ---- home: "AI 3 ปี" showcase ---- */
.section--evo { padding-top: var(--s-8); padding-bottom: var(--s-7); border-bottom: 1px solid var(--line-soft); }
.evo-show { display: grid; gap: var(--s-4); }
.evo-tabs[hidden], .evo-switch[hidden], .evo-panel[hidden], .evo-cards[hidden] { display: none; }
.evo-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.evo-tab { --c: var(--data); display: grid; gap: 0.35rem; text-align: left; padding: var(--s-3) var(--s-4); color: var(--ink-2); background: var(--bg-raise); border: 1px solid var(--line-soft); border-top: 3px solid var(--c); cursor: pointer; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); transition: background-color 0.25s, color 0.25s, border-color 0.25s; }
.evo-tab--2 { --c: var(--guard); } .evo-tab--3 { --c: var(--warn); }
.evo-tab small { font: 600 0.72rem/1.2 var(--f-code); letter-spacing: 0.03em; color: var(--c); }
.evo-tab b { font: 700 1rem/1.35 var(--f-display); }
.evo-tab:hover { background: oklch(0.21 0.028 238); color: var(--ink); }
.evo-tab[aria-selected="true"] { color: var(--ink); background: color-mix(in oklch, var(--c) 14%, var(--bg-raise)); border-color: var(--c); }
.evo-tab:focus-visible, .evo-sw:focus-visible { outline: 2px solid var(--warn); outline-offset: 2px; }
.evo-panel { --c: var(--data); display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s-5); padding: var(--s-5); background: var(--bg-raise); border: 1px solid var(--line-soft); border-left: 3px solid var(--c); }
.evo-panel--2 { --c: var(--guard); } .evo-panel--3 { --c: var(--warn); }
.evo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); align-content: start; }
.evo-list li { line-height: 1.6; color: var(--ink-2); font-size: 0.95rem; }
.evo-list li b { display: block; font: 600 0.76rem/1.3 var(--f-code); color: var(--c); letter-spacing: 0.03em; }
.evo-list a { color: var(--data); }
.evo-nums { display: grid; gap: var(--s-3); align-content: start; }
.evo-num { display: grid; gap: 0.3rem; padding: var(--s-3) var(--s-4); background: var(--bg-sunk); border-top: 3px solid var(--c); }
.evo-num strong { font: 700 clamp(1.5rem, 3.4vw, 2.2rem)/1.1 var(--f-display); color: var(--c); }
.evo-num span { color: var(--ink-2); font-size: 0.86rem; line-height: 1.5; }
.evo-pc { display: grid; gap: var(--s-4); margin-top: var(--s-4); }
.evo-switch { display: inline-flex; gap: var(--s-2); }
.evo-sw { font: 600 0.9rem/1 var(--f-display); color: var(--ink-2); background: var(--bg-raise); border: 1px solid var(--line); padding: 0.6em 1.1em; cursor: pointer; clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)); transition: color 0.25s, background-color 0.25s; }
.evo-sw[aria-selected="true"].evo-sw--pro { color: oklch(0.14 0.02 240); background: var(--guard); border-color: var(--guard); }
.evo-sw[aria-selected="true"].evo-sw--con { color: oklch(0.14 0.02 240); background: var(--threat-ink); border-color: var(--threat-ink); }
.evo-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: var(--s-4); }
.evo-card { --c: var(--guard); padding: var(--s-4) var(--s-5); background: var(--bg-raise); border: 1px solid var(--line-soft); border-left: 3px solid var(--c); clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%); }
.evo-cards--con .evo-card { --c: var(--threat-ink); }
.evo-card h3 { margin: 0 0 var(--s-2); font: 700 1.02rem/1.35 var(--f-display); color: var(--c); }
.evo-card p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--ink-2); }
.evo-note { margin: 0; color: var(--ink-3); font-size: 0.84rem; line-height: 1.6; }
.evo-note a { color: var(--data); }
@media (max-width: 820px) { .evo-panel { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .evo-tabs { grid-template-columns: 1fr; } }
@keyframes evo-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) { .evo-panel:not([hidden]), .evo-cards:not([hidden]) { animation: evo-in 0.35s var(--ease-out); } }

/* ============ Wayfinding + progress (levels.js, lesson.js, finder.js) ============ */
/* home: what the codes and colours mean, right above the list */
.cases-legend { grid-column: 1 / -1; display: grid; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line-soft); }
.section__head .cases-legend p { margin: 0; max-width: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-5); font-size: 0.95rem; color: var(--ink-3); }
.cases-codes p b { font: 600 0.85rem var(--f-code); color: var(--ink-2); margin-right: 0.4em; }
.cases-tools { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4) var(--s-5); margin: 0 0 var(--s-3); }
.cases-tools .finder { flex: 1 1 20rem; max-width: 34rem; margin: 0; }
.cases-tools .level-bar { margin-top: 0; }
.cases-status { margin: 0 0 var(--s-4); }
.cases-legend b[class^="t-"] { font-weight: 600; margin-right: 0.25em; }
.cases-legend a { color: var(--data); }

/* find-as-you-type (home lesson list, glossary) */
.finder { display: grid; grid-template-columns: minmax(0, 34rem); gap: var(--s-2); margin: 0 0 var(--s-6); }
.finder__label { font: 600 0.92rem var(--f-display); color: var(--ink-2); }
.finder__input { width: 100%; min-height: 48px; padding: 0.7rem 1rem; font: 400 1.05rem/1.4 var(--f-read); color: var(--ink); background: var(--bg-sunk); border: 1px solid var(--line); border-radius: 0; caret-color: var(--warn); -webkit-appearance: none; appearance: none; transition: border-color 0.2s var(--ease-out); }
.finder__input::placeholder { color: var(--ink-3); opacity: 1; }
.finder__input:hover { border-color: var(--ink-3); }
.finder__input:focus { border-color: var(--warn); }
.finder__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; cursor: pointer; background: linear-gradient(45deg, transparent 43%, var(--ink-2) 43% 57%, transparent 57%), linear-gradient(-45deg, transparent 43%, var(--ink-2) 43% 57%, transparent 57%); }
.finder__status { margin: 0; min-height: 1.6em; font-size: 0.95rem; color: var(--ink-2); }
.finder__status a { color: var(--data); }
.finder--gloss { margin: var(--s-5) 0 var(--s-3); }
.case[hidden], .level[hidden], dl.gloss [hidden], .prose > section[hidden], .gloss-nav[hidden] { display: none; }

/* lesson: compact colour key under the case-file header */
.dossier__key { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: var(--s-4) 0 0; font-size: 0.92rem; color: var(--ink-3); }
.dossier__key b { font-weight: 600; }

/* lesson: the ending — retell, then close the file */
.closer { position: relative; max-width: 46rem; margin: var(--s-8) 0 0; padding: var(--s-6) 0 0; border-top: 1px solid var(--line); }
.closer h3 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); line-height: 1.35; margin: 0 0 var(--s-3); padding-right: 10rem; }
.closer > p { margin: 0 0 var(--s-3); color: var(--ink-2); }
.closer__goal b { color: var(--ink); font-weight: 600; }
.closer__stamp { position: absolute; right: 0; top: var(--s-6); margin: 0; font-family: var(--f-display); font-weight: 700; font-size: 1rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); border: 2px dashed var(--line); padding: 0.35em 0.8em; transform: rotate(-6deg); opacity: 0.75; transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), opacity 0.3s var(--ease-out); }
.closer.is-closed .closer__stamp { color: var(--guard); border: 2px solid currentColor; opacity: 0.95; }
@media (prefers-reduced-motion: no-preference) {
  .closer.is-closed.is-stamped .closer__stamp { animation: stamp-down 0.42s cubic-bezier(0.2, 0.9, 0.25, 1) both; }
}
@keyframes stamp-down { 0% { transform: rotate(-6deg) scale(1.7); opacity: 0; filter: blur(3px); } 60% { opacity: 1; filter: blur(0); } 100% { transform: rotate(-6deg) scale(1); opacity: 0.95; } }
.closer__ask { list-style: none; counter-reset: q; margin: var(--s-4) 0 var(--s-6); padding: 0; display: grid; gap: var(--s-3); }
.closer__ask li { counter-increment: q; display: grid; grid-template-columns: 2.6rem 1fr; gap: var(--s-3); font-size: 1.08rem; line-height: 1.7; color: var(--ink); }
.closer__ask li::before { content: "Q" counter(q); font: 600 0.88rem/1.95 var(--f-code); color: var(--ink-3); }
.closer__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.closer__btn svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.35; }
.closer__btn:hover svg { transform: none; }
.closer.is-closed .closer__btn { --c: var(--guard); }
.closer.is-closed .closer__btn:hover { background: oklch(0.9 0.17 152); }
.closer.is-closed .closer__btn svg { opacity: 1; }
.closer__ask b { font-weight: 600; color: var(--ink); }
.closer__note { margin: 0; color: var(--ink-2); font-size: 0.98rem; line-height: 1.6; }
.closer__note a { color: var(--data); }
@media (max-width: 640px) {
  .closer__stamp { position: static; display: inline-block; margin-bottom: var(--s-4); }
  .closer h3 { padding-right: 0; }
}

/* news.html: counts, dead ends, status */
.news-chip__n { margin-left: 0.5em; font: 500 0.75rem/1 var(--f-code); color: var(--ink-3); }
.news-chip.is-on .news-chip__n { color: inherit; opacity: 0.7; }
.news-chip:disabled { opacity: 0.4; cursor: not-allowed; background: transparent; }
.news-chip:disabled:hover { color: var(--ink-2); background: transparent; }
.news-status { margin: calc(-1 * var(--s-3)) 0 var(--s-5); font-size: 0.92rem; color: var(--ink-3); }
.news-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-5); background: var(--bg-raise); border: 1px solid var(--line-soft); }
.news-empty[hidden] { display: none; }
.news-empty p { margin: 0; color: var(--ink-2); }
.news-card[hidden] { display: none; }

/* ============ second pass (critique run 2) ============ */
/* home: overall progress under the hero actions */
.hero__progress { margin: var(--s-4) 0 0; font-size: 0.95rem; color: var(--ink-2); }
.hero__progress b { color: var(--guard); font-weight: 600; }
/* home: heading sits with its paragraph; codes legend folds */
#cases .section__head { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
#cases .section__head > p { max-width: 38em; }
.cases-codes summary { cursor: pointer; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; font: 600 0.95rem var(--f-display); color: var(--ink-2); list-style: none; }
.cases-codes summary::-webkit-details-marker { display: none; }
.cases-codes summary::before { content: ""; width: 0.45em; height: 0.45em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.2s var(--ease-out); }
.cases-codes[open] summary::before { transform: rotate(45deg); }
.cases-codes summary:hover { color: var(--ink); }
.cases-codes p { margin: var(--s-1) 0 var(--s-2) !important; }
@media (hover: none) and (pointer: coarse) { #cases .level-bar { display: none; } }
/* home news band on phones: one lead story, the rest as headlines */
@media (max-width: 620px) {
  .section--news .news-grid .news-card + .news-card { padding-top: var(--s-4); padding-bottom: var(--s-4); gap: var(--s-2); }
  .section--news .news-grid .news-card + .news-card .news-card__summary,
  .section--news .news-grid .news-card + .news-card .news-card__foot { display: none; }
  .section--news .news-grid { gap: var(--s-3); }
}
.news-card__title a { display: block; }
/* news.html: type + region tucked under one disclosure */
.news-filter__more { display: grid; gap: var(--s-3); }
.news-filter__more > summary { cursor: pointer; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; font: 600 0.92rem var(--f-display); color: var(--ink-2); list-style: none; width: fit-content; }
.news-filter__more > summary::-webkit-details-marker { display: none; }
.news-filter__more > summary::before { content: ""; width: 0.45em; height: 0.45em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.2s var(--ease-out); }
.news-filter__more[open] > summary::before { transform: rotate(45deg); }
.news-filter__more > summary:hover { color: var(--ink); }
/* news.html: the two analysis links as one quiet line */
.news-features { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-5); margin: 0 0 var(--s-5); padding: 0 0 var(--s-4); border-bottom: 1px solid var(--line-soft); font-size: 0.95rem; color: var(--ink-3); }
.news-features b { font: 600 0.92rem var(--f-display); color: var(--ink-2); }
.news-features a { display: inline-flex; align-items: center; min-height: 44px; color: var(--data); font-weight: 600; text-decoration: none; }
.news-features a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
/* glossary: the finder is never hidden under the sticky bars */
.finder, .finder__input { scroll-margin-top: 7.5rem; }
.finder__more { font: 600 0.92rem var(--f-display); color: var(--data); background: none; border: 0; padding: 0.4rem 0; min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }
.finder__more:hover { color: var(--ink); }

/* ============ third pass (critique run 3) ============ */
#cases.is-searching .level__head p { display: none; }
#cases.is-searching .level { margin-top: var(--s-4); }
#cases .level:not([aria-labelledby]) { margin-top: var(--s-6); }
.stamp { background: oklch(0.145 0.022 240 / 0.9); }
.dossier__meta { align-items: baseline; }
.dossier h1.news-h1 + .dossier__lede { margin-top: var(--s-4); }
@media (min-width: 900px) { .dossier h1.news-h1 { max-width: 16em; } }
.hero__reset { font: 600 0.88rem var(--f-display); color: var(--ink-2); background: none; border: 0; padding: 0.5rem 0; min-height: 44px; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 0.2em; }
.hero__reset:hover { color: var(--ink); }
.finder__tag { font: 500 0.75rem var(--f-code); color: var(--ink-3); border: 1px solid var(--line); padding: 0.1em 0.45em; margin-left: 0.6em; vertical-align: 0.15em; }
.finder__tag[hidden] { display: none; }
.finder__more { justify-self: start; }
.finder__more[hidden] { display: none; }

/* ============ fourth pass ============ */
.news-chip[hidden] { display: none; }
.finder__kbd { font: 500 0.82rem var(--f-read); color: var(--ink-3); }
@media (hover: none) and (pointer: coarse) { .finder__kbd { display: none; } }
/* the full colour key lives next to the list it explains */
.key-more > .key { margin: var(--s-4) 0 var(--s-2); padding: var(--s-5); background: var(--bg-raise); border: 1px solid var(--line-soft); }
.section__head .key-more .key__lead { display: block; margin: 0 0 var(--s-4); color: var(--ink-2); font-size: 1rem; }
.key-more .fig { margin: 0; }
/* lesson pager: "next" leads, on phones it comes first */
.pager a.nx { box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 640px) { .pager a.nx { order: -1; } }
/* glossary: the rail already lists the letter groups on wide screens */
@media (min-width: 1001px) { .gloss-nav { display: none; } }
.gloss dd { max-width: 38em; }

/* ===== Pass 5: targets, states, quieter warnings ===== */
/* touch targets: figure controls, quiz rows, footer links */
.fig__play, .fig__dl, .fig summary { min-height: 44px; }
.fig__play { padding: 0.2rem 0.85rem; }
.quiz summary { min-height: 44px; align-items: center; padding-block: 0.35rem; }
.foot a { padding-block: 0.6em; }
.foot .brand { min-height: 44px; }
/* the sticky strip is solid, so text scrolling under it never shows through */
@media (max-width: 1000px) { .progress { background: var(--bg); } }
/* news caution: a quiet framed note, no coloured side stripe */
.news-caution { border-left: 0; border: 1px solid color-mix(in oklab, var(--warn) 35%, transparent); }
/* home list: reading state sits next to the case code, not only at the far end of the row */
.case--started .case__id::before, .case--closed .case__id::before { content: ""; display: inline-block; width: 0.62em; height: 0.62em; margin-right: 0.5em; vertical-align: 0.04em; clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 30% 100%, 0 70%); }
.case.case--started .case__id::before { background: var(--warn); }
.case.case--closed .case__id::before { background: var(--guard); }
.hero__first { display: inline-flex; align-items: center; min-height: 44px; font: 600 0.88rem var(--f-display); color: var(--ink-2); text-decoration-color: var(--line); text-underline-offset: 0.2em; }
.hero__first:hover { color: var(--ink); }
.cases-codes__list { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); color: var(--ink-2); }
/* case closed: next file is the main action, undo is quiet text */
.closer__btn[hidden], .closer__next[hidden], .closer__undo[hidden] { display: none; }
.closer__next svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.closer__undo { font: 600 0.92rem var(--f-display); color: var(--ink-2); background: none; border: 0; padding: 0.5rem 0; min-height: 44px; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 0.2em; }
.closer__undo:hover { color: var(--ink); }
.closer.is-closed .closer__note { flex-basis: 100%; color: var(--guard); }
/* glossary: search mode */
.is-searching .gloss-nav, p.lead[hidden] { display: none; }
.finder__status a { color: var(--data); }
dl.gloss dt:focus { outline: 2px solid var(--warn); outline-offset: 4px; }
/* industry news (model / chips / policy): no attacker or defender in the story, so no role colour */
.news-card--ink { --c: var(--ink-2); }
.news-tag--ink { color: var(--ink); background: oklch(0.3 0.03 235); }
.news-fact--ink { --c: var(--ink-3); }
.news-chip:disabled .news-chip__n { opacity: 0.8; }

/* ===== Pass 6 ===== */
/* phone strip = contents button; the chain rail opens as a bottom sheet */
@media (max-width: 1000px) {
  html { scroll-padding-top: 7rem; }
  .progress { padding: 4px var(--gutter); }
  .progress__btn { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 44px; padding: 0; cursor: pointer; font: inherit; color: inherit; }
  .progress__btn:focus-visible { outline: 2px solid var(--warn); outline-offset: -3px; }
  .progress__toc { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 0.35em; font-style: normal; font-weight: 600; font-size: 0.88rem; color: var(--ink); }
  .progress__toc svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s var(--ease-out); }
  .progress__btn[aria-expanded="true"] .progress__toc svg { transform: rotate(180deg); }
  .rail.is-sheet { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; max-height: min(72vh, 34rem); overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--gutter) var(--s-6); background: var(--bg-raise); border-top: 1px solid var(--line); box-shadow: 0 -18px 40px oklch(0.05 0.02 240 / 0.6); }
  .rail.is-sheet a { min-height: 44px; align-items: center; padding: 0.3rem 0; }
  .rail.is-sheet a::before { margin-top: 0; }
  .rail.is-sheet ol::before { top: 22px; bottom: 22px; }
  .rail__shade { position: fixed; inset: 0; z-index: 65; background: oklch(0.08 0.02 240 / 0.6); }
}
.rail__sheet-head { display: none; }
.rail.is-sheet .rail__sheet-head { display: flex; align-items: center; gap: var(--s-3); position: sticky; top: 0; z-index: 1; margin: 0 calc(-1 * var(--gutter)) var(--s-3); padding: var(--s-3) var(--gutter); background: var(--bg-raise); border-bottom: 1px solid var(--line-soft); }
.rail__sheet-title { margin: 0 auto 0 0; font: 600 1rem var(--f-display); color: var(--ink); }
.rail__sheet-btn { min-height: 44px; padding: 0 var(--s-3); font: 600 0.9rem var(--f-display); color: var(--ink-2); background: none; border: 1px solid var(--line-soft); cursor: pointer; }
.rail__sheet-btn:hover { color: var(--ink); border-color: var(--line); }
.rail.is-sheet .rail__title { display: none; }
.rail__shade[hidden] { display: none; }
@media (min-width: 1001px) { .rail__shade { display: none; } }
/* a closed file says so in its header; the pager's next card steps aside for the closer's next button */
.dossier__state b { color: var(--guard); }
.closer.is-closed + .pager .nx { display: none; }
/* case codes line up whether or not a row has a state swatch */
.case .case__id::before { content: ""; display: inline-block; width: 0.62em; height: 0.62em; margin-right: 0.5em; vertical-align: 0.04em; clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 30% 100%, 0 70%); background: transparent; }
/* touch targets on phones */
.gloss-nav a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; }
.news-more { min-height: 44px; }
.topbar .brand { min-height: 44px; }
.topnav a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
/* home: the short colour line hides while the full key is open; the key text sits at the top */
.cases-legend:has(#key[open]) > p:first-child { display: none; }
.key { align-items: start; }
@media (min-width: 641px) { .level__no { min-width: 6rem; } }
.news-empty > p:first-child { flex-basis: 100%; }
.news-empty__relax { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; }
.news-empty__relax:empty { display: none; }
/* 404 */
.notfound { max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: var(--s-7) var(--gutter) var(--s-9); }
.notfound > * { max-width: 46rem; }
.notfound__guess { font-size: 1.1rem; margin: 0 0 var(--s-6); }
.notfound__guess a { color: var(--data); font-weight: 600; }
.notfound__find { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2) var(--s-3); align-items: end; margin: 0 0 var(--s-7); }
.notfound__find .finder__label { grid-column: 1 / -1; }
.notfound__go { min-height: 48px; }
.notfound__ways { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); border-top: 1px solid var(--line-soft); padding-top: var(--s-5); color: var(--ink-2); }
.notfound__ways a { display: inline-flex; align-items: center; min-height: 44px; margin-right: var(--s-3); font: 600 1.1rem var(--f-display); color: var(--ink); }
.notfound__ways a:hover { color: var(--data); }
/* phones: one-line wordmark on every page, so the header (and the sticky strip under it) is the same height everywhere */
@media (max-width: 420px) {
  .topbar .brand { font-size: 0.8rem; letter-spacing: 0.02em; gap: 6px; white-space: nowrap; }
  .topbar .brand svg { width: 22px; height: 22px; }
  .topnav { gap: 10px; }
  .topnav a { font-size: 0.88rem; }
}
@media (max-width: 370px) { .topbar .brand { white-space: normal; } }
/* 44px header targets without a taller bar: the sticky strip still sits at 57px */
.topbar { padding-block: 6px; }
/* glossary: which case files use this term most */
.gloss__in { display: block; margin-top: var(--s-2); font: 500 0.85rem var(--f-code); color: var(--ink-3); }
.gloss__in a { display: inline-block; padding: 0.55em 0.2em; margin-right: 0.5em; color: var(--ink-2); text-decoration-color: var(--line); text-underline-offset: 0.2em; }
.gloss__in a:hover { color: var(--data); }
@media (max-width: 640px) { .news-filter__label { flex-basis: 100%; min-width: 0; margin-bottom: 2px; } }

/* ===== Pass 7 ===== */
/* chamfered controls clip an outside ring away: draw the focus ring inside them */
.btn:focus-visible, .news-chip:focus-visible, .news-tab:focus-visible { outline: 3px solid var(--warn); outline-offset: -3px; box-shadow: inset 0 0 0 5px var(--bg); }
.btn--ghost:focus-visible { box-shadow: inset 0 0 0 5px var(--bg); }
/* the open contents sheet holds the page still */
html.sheet-open { overflow: hidden; }
/* nothing to say → no gap under the lesson finder */
.cases-status:empty { display: none; }
#cases .finder__more { justify-self: start; margin: 0 0 var(--s-5); }
/* Thai labels are never letter-spaced, and tags stay readable */
.news-chip, .news-tag, .news-region, .finder__tag { letter-spacing: 0; }
.news-tag, .news-region { font-size: 0.82rem; }
/* small standalone links get a 44px tall hit area without changing the line */
.news-card__src { padding-block: 0.8em; }
.dossier__meta a, [data-ni-source] a { padding-block: 0.7em; }
.gloss__in a { padding: 0.75em 0.2em; }
@media (pointer: coarse) { .gl-pop__links a { display: inline-flex; align-items: center; min-height: 44px; } }
.gloss__in a { font-family: var(--f-read); font-weight: 500; }
.gloss__in a b { font: 600 0.82rem var(--f-code); margin-right: 0.3em; }
/* reserve the space the scripts will fill, so the page doesn't jump */
@media (max-width: 1000px) { .progress { min-height: 53px; box-sizing: border-box; } }
[data-ni-body]:empty { min-height: 100vh; }
[data-news-all]:empty { min-height: 160vh; }
.finder__status:empty { display: none; }
[data-ni-title] { min-height: 2.7em; }
[data-ni-lede] { min-height: 5.2em; }
@media (max-width: 760px) { [data-ni-title] { min-height: 4em; } [data-ni-lede] { min-height: 9em; } }
@media (max-width: 640px) { .nav-long { display: none; } }
/* the contents sheet sits at the bottom, where the thumb is */
.rail.is-sheet { top: auto; }
.fig__said { font: 500 0.85rem var(--f-display); color: var(--guard); }
.fig__said:empty { display: none; }

/* ===== Pass 8 ===== */
/* Thai button labels are not tracked */
.btn { letter-spacing: 0; }
/* headings that receive focus from a script (after paging, a contents jump) don't draw a big ring */
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; }
/* space reserved for the story only until it has arrived */
html.ni-ready [data-ni-title], html.ni-ready [data-ni-lede] { min-height: 0; }
/* 44px hit areas on small standalone links */
.news-card__src { padding-block: 1em; }
.gloss__in a { padding-block: 0.85em; }
.domains .tags a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; }
.gallery__meta a { display: inline-flex; align-items: center; min-height: 44px; }
ul.src { margin: var(--s-3) 0 0; padding-left: 1.2em; font-size: 0.92rem; color: var(--ink-3); }
ul.src li { margin: 0.15em 0; }
ul.src a { display: inline-block; padding-block: 0.65em; color: var(--ink-2); }
.news-nf__h { font-size: 1.15rem; margin: var(--s-6) 0 var(--s-3); }
.news-nf { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: grid; gap: var(--s-2); }
.news-nf a { display: inline-block; padding-block: 0.5em; font-weight: 600; color: var(--ink); }
.news-nf__date { color: var(--ink-3); font-size: 0.9rem; }
.news-chip--clear { margin-top: var(--s-3); }

/* ===== Pass 9 ===== */
/* reset is a chip like the others, and steps aside when the empty state offers its own */
.news-chip--clear { justify-self: start; }
.news-filter__row { row-gap: var(--s-2); }
@media (max-width: 640px) { .news-filter { row-gap: var(--s-4); } }
/* Thai level labels in the reading/display faces, not the code face */
.level__no { font-family: var(--f-display); letter-spacing: 0; }
.level__meta { font: 500 0.88rem var(--f-read); letter-spacing: 0; }
/* phone figure head: controls start under the title instead of floating right */
@media (max-width: 640px) { .fig__head { justify-content: flex-start; } .fig__play { margin-left: 0; } }
.news-nf__date { white-space: nowrap; }
.dossier h1 + .dossier__lede { margin-top: var(--s-4); }
@media (max-width: 1000px) { .progress__btn:focus-visible { outline-offset: 2px; } }
/* last small targets */
.topnav a { min-width: 44px; justify-content: center; }
.news-card__src { padding-block: 1.1em; }
.dossier__meta a, [data-ni-source] a { display: inline-block; padding-block: 0.8em; }
.gl-pop__close { display: none; }
@media (pointer: coarse) { .gl-pop__close { display: inline-flex; align-items: center; min-height: 44px; font: 600 0.88rem var(--f-display); color: var(--ink-2); background: none; border: 0; padding: 0; cursor: pointer; } }
.nowrap { white-space: nowrap; }
@media (max-width: 640px) { .case:not(.case--started):not(.case--closed) .case__id::before { display: none; } }
/* the strip lives inside the page's scroll padding: never scroll the page to "reveal" it */
@media (max-width: 1000px) { .progress, .progress__btn { scroll-margin-top: -8rem; } }

/* ===== Pass 10 ===== */
.news-filter__more .news-filter__row + .news-filter__row { margin-top: var(--s-3); }
.rail.is-sheet a { scroll-margin-top: 4.5rem; scroll-margin-bottom: 1rem; }
@media (pointer: coarse) { .gl-pop__close { min-width: 44px; padding: 0 var(--s-2); justify-content: center; } }

/* ===== Pass 11 ===== */
.prose ul.notfound__ways, .prose ul.news-nf { padding-left: 0; list-style: none; }
.news-nf a { display: inline; padding-block: 0.6em; }
/* phone case rows: the open-file arrow alone, so titles and subtitles get the width */
@media (max-width: 640px) {
  .case--open:not(.case--started):not(.case--closed) .case__state { font-size: 0; gap: 0; }
  .case--open .case__state svg { width: 22px; height: 22px; }
}

/* "หยุดภาพเคลื่อนไหวทุกภาพ" stops everything that moves in figures, not just the walk-through */
html.sl-still .sl-dash, html.sl-still .diagram::after { animation: none; }
html.sl-still .diagram::after { display: none; }
.dossier__key { align-items: center; }
.dossier__key .fig__play--page { margin-left: auto; }
@media (max-width: 640px) { .dossier__key .fig__play--page { margin-left: 0; } }
/* code samples wrap on phones instead of hiding text in a sideways scroller */
@media (max-width: 640px) { .code pre { white-space: pre-wrap; overflow-wrap: anywhere; } }

/* ===== Pass 12 ===== */
/* phone rows keep their words for a started or closed file ("อ่านต่อ" / "ปิดแล้ว"): colour alone would
   clash with the colour key right above, where amber and green mean risk and defence */
@media (max-width: 640px) { .case--started .case__state, .case--closed .case__state { font-size: 0.85rem; } }
/* the page-wide motion switch sits on the header's 3D: a solid face so lines never cross its label */
.dossier__key .fig__play--page { background: var(--bg); }
/* long URLs in quiz questions wrap instead of widening the page on small phones */
.quiz summary { grid-template-columns: 1.6rem minmax(0, 1fr); }
.quiz summary .url { overflow-wrap: anywhere; }
/* result links in the finders' status lines: a taller hit area for thumbs without moving the text */
.finder__status a { padding-block: 0.7em; }
/* on phones the glass top bar showed text scrolling beneath it on lesson pages: make it solid there */
@media (max-width: 1000px) { body:has(.progress) .topbar:not(.topbar--over) { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; } }
/* the page's motion switch is in the HTML; it is not offered when motion is already off */
@media (prefers-reduced-motion: reduce) { [data-motion] { display: none; } }
.gallery__motion { margin: 0; grid-column: 1 / -1; }
.section__head .gallery__motion { color: inherit; }
/* static figures never move */
[data-static] .sl-dash { animation: none; }
.diagram[data-static]::after { display: none; }
/* glossary deep links land with room under the sticky strip */
dl.gloss dt { scroll-margin-top: 1.5rem; }
/* home has no sticky bar over the finder: no extra margin on top of the page's scroll padding */
#cases .finder { scroll-margin-top: 0; }
/* "ล้างประวัติแล้ว · เลิกทำ" takes the progress line's place for a moment */
.hero__progress--note { color: var(--ink-2); }

/* ===== Pass 13: operator capabilities + verified credentials (portfolio) ===== */
.kit__h { font-size: 1.15rem; font-weight: 600; color: var(--ink-3); letter-spacing: 0.02em; margin: 0 0 var(--s-4); }
.creds__wrap > .kit__h { margin-top: var(--s-8); }
/* tools as rows, not a second card grid: the domain reads on the left, what it is built with on the right */
.kit { margin: 0; }
.kit > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--s-2) var(--s-6); padding: var(--s-4) 0; border-top: 1px solid var(--line-soft); align-items: baseline; }
.kit > div:last-child { border-bottom: 1px solid var(--line-soft); }
.kit dt { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; color: var(--ink); }
.kit dd { margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); font-family: var(--f-display); font-size: 1rem; color: var(--ink-2); max-width: 52em; }
.kit dd span { display: inline-flex; align-items: center; gap: 0.45em; white-space: nowrap; }
/* one size, one stroke weight: brand marks are filled, the security tools are drawn here in stroke.
   Colour comes from the row, taken from the site's own key, so a glance at the shelf tells you which
   trade you are looking at. Lit instruments on a dark console: carried at three-quarter strength with a
   soft emission so thirty-one of them read as a set, and coming up full under the cursor. */
.kit > div { --ico: var(--ink-3); }
.kit > [data-k="code"] { --ico: var(--data); }
.kit > [data-k="web"] { --ico: var(--guard); }
.kit > [data-k="net"] { --ico: var(--warn); }
.kit > [data-k="re"] { --ico: oklch(0.8 0.19 25); } /* --threat lifted to the lightness of the other three keys */
.kit__ico { width: 1.35em; height: 1.35em; flex: none;
  color: color-mix(in oklab, var(--ico) 76%, var(--bg));
  filter: drop-shadow(0 0 3px color-mix(in oklab, var(--ico) 26%, transparent));
  transition: color 0.25s var(--ease-out), filter 0.25s var(--ease-out); }
.kit__ico--drawn { width: 1.45em; height: 1.45em; }
.kit dd span { transition: color 0.25s var(--ease-out); }
.kit dd span:hover { color: var(--ink); }
.kit dd span:hover .kit__ico { color: var(--ico);
  filter: drop-shadow(0 0 7px color-mix(in oklab, var(--ico) 52%, transparent)); }
@media (max-width: 700px) { .kit > div { grid-template-columns: 1fr; } }

/* eighteen credentials, seventeen from one issuer: an index, not an exhibit wall. Grouping by issuer
   writes the issuer once instead of eighteen times, and each course is a row that opens its own scan.
   Hours sit in the last column because they are what separates a twelve-hour course from a one-hour one. */
.creds { display: grid; gap: 0; }
/* closed, the section is five issuer marks and five counts — the shelf, not the wall. Same chevron
   and behaviour a figure's text alternative uses, so the fold is a control the reader already knows. */
.creds__org { border-bottom: 1px solid var(--line-soft); }
.creds__org:first-child { border-top: 1px solid var(--line-soft); }
.creds__org > summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: auto 9rem auto 1fr; align-items: center; gap: var(--s-4); padding: var(--s-4) 0; min-height: 44px; }
.creds__org > summary::-webkit-details-marker { display: none; }
.creds__org > summary::before { content: ""; flex: none; width: 0.5em; height: 0.5em; border: solid var(--ink-3); border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform 0.25s var(--ease-out), border-color 0.25s var(--ease-out); }
.creds__org[open] > summary::before { transform: rotate(45deg); }
.creds__org > summary:hover::before { border-color: var(--guard); }
.creds__org > summary:focus-visible { outline: 2px solid var(--warn); outline-offset: 3px; }
.creds__org > ul { padding-bottom: var(--s-5); }
@media (prefers-reduced-motion: reduce) { .creds__org > summary::before { transition: none; } }
/* the issuer's own mark, cut to white on transparent, carries the group instead of its name in type.
   The wide one-line marks and Cisco's three-line block are sized to the same optical weight, not the
   same height, so the three sit level. */
.creds__logo { display: block; width: auto; height: auto; max-height: 2rem; max-width: 100%; justify-self: start; }
.creds__org[data-org="cisco"] .creds__logo { max-height: 3.1rem; }
@media (max-width: 700px) { .creds__org > summary { grid-template-columns: auto 7.5rem auto 1fr; gap: var(--s-3); } .creds__logo { max-height: 1.7rem; } .creds__org[data-org="cisco"] .creds__logo { max-height: 2.6rem; } }
.creds__n { font-family: var(--f-code); font-size: 0.85rem; letter-spacing: 0; text-transform: none; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.creds__org ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr)); gap: 0 var(--s-7); }
/* the row: code and course. The whole line opens the scan. */
.cert { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: var(--s-4); min-height: 44px; padding: var(--s-3) 0; border-top: 1px solid var(--line-soft); text-decoration: none; color: inherit; transition: border-color 0.25s var(--ease-out); }
.cert__id { font-family: var(--f-code); font-size: 0.82rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cert__name { font-family: var(--f-display); font-weight: 600; font-size: 1.02rem; line-height: 1.4; color: var(--ink); transition: color 0.25s var(--ease-out); }
.cert:hover { border-top-color: var(--guard); }
.cert:hover .cert__name { color: var(--guard); }
.cert:focus-visible { outline: 2px solid var(--warn); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .cert, .cert__name { transition: none; } }
.creds__stamp { margin: var(--s-6) 0 0; font-family: var(--f-display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.12em; color: var(--guard); border: 2px solid currentColor; padding: 0.3em 0.7em; display: inline-block; transform: rotate(-3deg); }
@media (prefers-reduced-motion: reduce) { .creds__go svg, .kit__ico, .kit dd span { transition: none; } }

/* the certificate viewer: the document at full size with the issuer check one step below it */
.lb { width: min(96vw, 1180px); max-height: 92vh; padding: 0; border: 1px solid var(--line); background: var(--bg-raise); color: var(--ink); overflow: auto; }
.lb::backdrop { background: oklch(0.08 0.02 240 / 0.86); }
.lb__fig { margin: 0; padding: 0 var(--s-5) var(--s-5); display: grid; gap: var(--s-4); }
/* the document never pushes the issuer check off screen: it gives up height first */
.lb__img { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(92vh - 10rem); margin-inline: auto; background: var(--bg-sunk); border: 1px solid var(--line-soft); }
.lb__cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-5); }
.lb__title { margin: 0; font-family: var(--f-display); font-weight: 600; color: var(--ink-2); font-size: 1rem; }
.lb__act { margin: 0; }
/* [open] carries the layout: putting display on .lb itself would defeat the UA rule that hides a closed dialog */
.lb[open] { display: flex; flex-direction: column; }
.lb__fig { min-height: 0; }
.lb__x { align-self: flex-end; flex: none; margin: var(--s-3) var(--s-3) 0 0; width: 44px; height: 44px; display: grid; place-items: center; background: var(--bg-sunk); border: 1px solid var(--line-soft); color: var(--ink-2); cursor: pointer; }
.lb__x svg { width: 20px; height: 20px; }
.lb__x:hover { color: var(--ink); border-color: var(--guard); }
.lb__x:focus-visible { outline: 2px solid var(--warn); outline-offset: 2px; }
@media (max-width: 640px) { .lb__fig { padding: 0 var(--s-4) var(--s-4); } .lb__cap { gap: var(--s-3); display: block; } .lb__img { max-height: calc(92vh - 16rem); } }