/* === reset === */
/* _shared/css/reset.css — print reset, element-agnostic.
   Always assembled first. Uses no tokens. */

* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

/* === tokens === */
/* gold-default — theme foundation: fonts, design tokens, page setup.
   Style: premium-editorial | Palette: warm-gold | Typography: serif-classic-vn
   Shared elements reference only the tokens defined here. */

/* ---------- Fonts (Vietnamese subsets, embedded) ---------- */

@font-face {
  font-family: "Playfair Display";
  src: url("fonts/PlayfairDisplay-Bold.ttf");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Playfair Display";
  src: url("fonts/PlayfairDisplay-ExtraBold.ttf");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Lora";
  src: url("fonts/Lora-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Lora";
  src: url("fonts/Lora-Italic.ttf");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Lora";
  src: url("fonts/Lora-SemiBold.ttf");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Be Vietnam Pro";
  src: url("fonts/BeVietnamPro-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Be Vietnam Pro";
  src: url("fonts/BeVietnamPro-Medium.ttf");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Be Vietnam Pro";
  src: url("fonts/BeVietnamPro-SemiBold.ttf");
  font-weight: 600;
  font-style: normal;
}

/* ---------- Design tokens (the API shared elements depend on) ---------- */

:root {
  /* type */
  --font-display: "Playfair Display", Cambria, serif;
  --font-body: "Lora", Cambria, "Times New Roman", serif;
  --font-sans: "Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
  --font-size-base: 10.8pt;
  --line-height-base: 1.62;

  /* color — surfaces & text */
  --paper: #fffaf0;
  --panel: #faf3e3;
  --ink: #211d18;
  --ink-warm: #41372c;
  --muted: #756d62;
  --rule: #d8c48d;

  /* color — accents */
  --accent-primary: #c79a3d;
  --accent-secondary: #7a2f31;
  --accent-tertiary: #63705f;
  --accent-soft: rgba(199, 154, 61, 0.16);
  --accent-warning: #B4402F;
  --accent-warning-soft: rgba(180, 64, 47, 0.13);
  --accent-line: rgba(199, 154, 61, 0.6);

  /* color — dark surfaces (cover) */
  --dark-surface: #1f1b18;
  --on-dark: #f6efdd;
  --on-dark-soft: #cdbfa4;
  --on-dark-dim: #94896f;
}

/* ---------- Page setup (named pages, running header, page number) ---------- */

@page {
  size: A5;
  margin: 18mm 16mm 20mm 16mm;
  background: #fffaf0;
  @top-center {
    content: string(chapter-title);
    color: #8a7c5e;
    font-family: "Be Vietnam Pro", Arial, sans-serif;
    font-size: 7.5pt;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  @bottom-center {
    content: counter(page);
    color: #8a7c5e;
    font-family: "Be Vietnam Pro", Arial, sans-serif;
    font-size: 8.5pt;
  }
}

@page cover {
  margin: 0;
  background: #1f1b18;
  @top-center { content: ""; }
  @bottom-center { content: ""; }
}

@page imprint {
  margin: 24mm 20mm;
  background: #fffaf0;
  @top-center { content: ""; }
  @bottom-center { content: ""; }
}

@page toc {
  margin: 20mm 18mm 22mm 18mm;
  background: #fffaf0;
  @top-center { content: ""; }
}

/* === base === */
/* _shared/css/base.css — element-agnostic document defaults.
   Assembled after the theme's tokens.css, so every value is a token. */

html {
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  hyphens: auto;
  overflow-wrap: break-word;
}

body {
  margin: 0;
  background: var(--paper);
  counter-reset: figure;
}

/* PDF outline (clickable bookmarks panel). Chapter titles are level 1, body
   section headings level 2 — regardless of which chapter/body variant is used. */
.chapter__opener h1 {
  bookmark-level: 1;
  bookmark-label: content();
}

.chapter__body h2 {
  bookmark-level: 2;
  bookmark-label: content();
}

/* === layout:cover === */
/* cover/framed — token-driven. Theme defines @page cover. */

.cover {
  page: cover;
  break-after: page;
  position: relative;
  height: 210mm;
  background: var(--dark-surface);
  color: var(--on-dark);
}

.cover__image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cover__veil {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(31, 27, 24, 0.72);
}

.cover__frame {
  position: absolute;
  top: 8mm;
  right: 8mm;
  bottom: 8mm;
  left: 8mm;
  border: 0.5mm solid var(--accent-primary);
  z-index: 1;
}

.cover__inner {
  position: absolute;
  top: 1.6mm;
  right: 1.6mm;
  bottom: 1.6mm;
  left: 1.6mm;
  border: 0.2mm solid var(--accent-line);
  padding: 14mm 12mm;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
}

.cover__label {
  margin: 0;
  color: var(--accent-primary);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 8pt;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.cover__label-rule {
  display: inline-block;
  vertical-align: middle;
  width: 12mm;
  height: 0.2mm;
  margin: 0 3.5mm;
  background: var(--accent-line);
}

.cover__title-block {
  margin: 0 auto;
  max-width: 92%;
}

.cover h1 {
  margin: 0;
  color: var(--on-dark);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30pt;
  line-height: 1.18;
  overflow-wrap: break-word;
}

.cover__title-rule {
  width: 26mm;
  height: 0.45mm;
  margin: 9mm auto 8mm;
  background: var(--accent-primary);
}

.cover__subtitle {
  max-width: 80%;
  margin: 0 auto;
  color: var(--on-dark-soft);
  font-family: var(--font-body);
  font-style: italic;
  font-size: 12.5pt;
  line-height: 1.45;
}

.cover__author {
  margin: 0;
  color: var(--accent-primary);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10.5pt;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.cover__publisher {
  margin: 3mm 0 0;
  color: var(--on-dark-dim);
  font-family: var(--font-sans);
  font-size: 7.5pt;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

/* === layout:imprint === */
/* imprint/standard — token-driven. Theme defines @page imprint. */

.imprint {
  page: imprint;
  break-after: page;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 160mm;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 9pt;
  line-height: 1.7;
}

.imprint__mark {
  margin: 0 0 10mm;
  color: var(--accent-primary);
  font-weight: 600;
  font-size: 8pt;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.imprint h2 {
  margin: 0 0 4mm;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15pt;
  line-height: 1.25;
}

.imprint p {
  margin: 0 0 2.5mm;
}

/* === layout:toc === */
/* toc/editorial — token-driven. Theme defines @page toc. */

.toc {
  page: toc;
  break-after: page;
  padding-top: 6mm;
}

.section-kicker {
  margin: 0 0 4mm;
  color: var(--accent-primary);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 8pt;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.toc h2 {
  margin: 0 0 12mm;
  padding-bottom: 6mm;
  border-bottom: 0.5mm solid var(--accent-primary);
  color: var(--accent-secondary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24pt;
  line-height: 1.2;
}

.toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.toc__row {
  padding: 4.6mm 1mm;
  border-bottom: 0.2mm solid var(--rule);
}

.toc__row a {
  display: block;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: break-word;
}

.toc__num {
  display: inline-block;
  width: 11mm;
  color: var(--accent-primary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14pt;
  vertical-align: baseline;
}

.toc__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11.5pt;
}

.toc__row a::after {
  content: leader(" ") target-counter(attr(href), page);
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 9pt;
}

/* === layout:chapter:numbered-rule === */
/* chapter/numbered-rule — token-driven chapter opener.
   Scoped to .chapter--numbered-rule so themes can mix chapter variants. */

.chapter {
  break-before: page;
}

.chapter--numbered-rule .chapter__opener {
  position: relative;
  margin: 0 0 12mm;
  padding: 14mm 0 0;
}

.chapter--numbered-rule .chapter__ghost {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  color: var(--accent-soft);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 60pt;
  line-height: 1;
}

.chapter--numbered-rule .chapter__number {
  position: relative;
  z-index: 2;
  margin: 0 0 6mm;
  color: var(--accent-primary);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 8.5pt;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.chapter--numbered-rule .chapter__opener h1 {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: 78%;
  color: var(--accent-secondary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 23pt;
  line-height: 1.22;
  string-set: chapter-title content();
  break-after: avoid;
  break-inside: avoid;
  overflow-wrap: break-word;
}

.chapter--numbered-rule .chapter__rule {
  position: relative;
  z-index: 2;
  width: 30mm;
  height: 0.5mm;
  margin-top: 8mm;
  background: var(--accent-primary);
}

/* === layout:body === */
/* body/single — single-column body typography. Token-driven.
   Styles standard Markdown output inside .chapter__body. Skill id: body-single. */

.chapter__body h2,
.chapter__body h3 {
  break-after: avoid;
  break-inside: avoid;
  line-height: 1.3;
  overflow-wrap: break-word;
}

.chapter__body h2 {
  margin: 9mm 0 3.5mm;
  color: var(--accent-secondary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14pt;
}

.chapter__body h3 {
  margin: 7mm 0 2.5mm;
  color: var(--accent-tertiary);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 9.5pt;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.chapter__body p,
.chapter__body li,
.chapter__body blockquote {
  orphans: 3;
  widows: 3;
}

.chapter__body p {
  margin: 0 0 4.2mm;
  text-align: justify;
  overflow-wrap: break-word;
}

.chapter__body ul,
.chapter__body ol {
  margin: 0 0 4.5mm 1.5mm;
  padding-left: 5.5mm;
}

.chapter__body li {
  margin-bottom: 1.8mm;
  overflow-wrap: break-word;
}

.chapter__body ul > li::marker {
  color: var(--accent-primary);
}

.chapter__body ol > li::marker {
  color: var(--accent-primary);
  font-family: var(--font-sans);
  font-size: 9pt;
}

.chapter__body strong {
  font-weight: 600;
  color: var(--ink-warm);
}

.chapter__body pre,
.chapter__body code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 9pt;
}

.chapter__body pre {
  margin: 5mm 0;
  padding: 4mm 5mm;
  background: var(--panel);
  border: 0.2mm solid var(--rule);
  break-inside: avoid;
}

/* === component:lead-paragraph === */
/* component: lead-paragraph — emphasize the first line of each chapter.
   (Drop caps clip Vietnamese stacked accents in WeasyPrint; a styled first
   line is the safe equivalent.) Skill id: drop-cap (lead variant). */

.chapter__content > p:first-of-type::first-line {
  color: var(--ink-warm);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* === component:pull-quote === */
/* component: pull-quote — styles Markdown blockquotes. Skill id: pull-quote. */

.chapter__body blockquote {
  margin: 7mm 2mm;
  padding: 4.5mm 6mm 4.5mm 7mm;
  border-left: 0.9mm solid var(--accent-primary);
  background: var(--panel);
  break-inside: avoid;
  overflow-wrap: break-word;
}

.chapter__body blockquote p {
  margin: 0;
  color: var(--ink-warm);
  font-style: italic;
  font-size: 11.6pt;
  line-height: 1.55;
  text-align: left;
}

.chapter__body blockquote p + p {
  margin-top: 2.5mm;
}

/* === component:figure === */
/* component: figure — images with captions. Skill id: figure-caption.
   Two forms:
     1. plain `![](x.png)` + `*caption*`  -> img with a muted caption
     2. `:::figure … :::` block           -> numbered figure (Hình N. …) */

.chapter__body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 7mm auto 3mm;
  break-inside: avoid;
}

.chapter__body img + em {
  display: block;
  margin: 0 0 6mm;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 8pt;
  font-style: normal;
  text-align: center;
}

/* Numbered figure block */
.chapter__body .c-figure {
  counter-increment: figure;
  margin: 7mm 0;
  break-inside: avoid;
}

.chapter__body .c-figure img {
  margin: 0 auto 2mm;
}

.chapter__body .c-figure p {
  margin: 0;
  text-align: center;
}

.chapter__body .c-figure p:last-child {
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 8.5pt;
}

.chapter__body .c-figure p:last-child::before {
  content: "Hình " counter(figure) ". ";
  color: var(--accent-primary);
  font-weight: 600;
}

/* === component:styled-table === */
/* component: styled-table — header panel, hairline rows. Skill id: styled-table. */

.chapter__body table {
  width: 100%;
  max-width: 100%;
  margin: 5mm 0 6mm;
  border-collapse: collapse;
  break-inside: avoid;
  font-size: 9.5pt;
}

.chapter__body th {
  padding: 2.6mm 3mm;
  background: var(--panel);
  border-bottom: 0.4mm solid var(--accent-primary);
  color: var(--accent-secondary);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 8.5pt;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
}

.chapter__body td {
  padding: 2.4mm 3mm;
  border-bottom: 0.2mm solid var(--rule);
}

/* === component:scene-break === */
/* component: scene-break — styles Markdown `---` as a short accent rule.
   Skill id: scene-break-ornament. */

.chapter__body hr {
  width: 24mm;
  height: 0.35mm;
  margin: 8mm auto;
  border: 0;
  background: var(--accent-primary);
}

/* === component:callout === */
/* component: callout - labelled aside panels.
   Tones are modifier classes on the same primitive, e.g. `:::callout key`. */

.chapter__body .c-callout {
  margin: 6mm 0;
  padding: 4mm 5mm 4.2mm;
  border-left: 1mm solid var(--accent-primary);
  background: var(--panel);
  break-inside: avoid;
  overflow-wrap: break-word;
}

.chapter__body .c-callout::before {
  content: "LƯU Ý";
  display: block;
  margin-bottom: 2mm;
  color: var(--accent-primary);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 8pt;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* note (default tone) — the quiet, neutral aside: grey bar, no accent. */
.chapter__body .c-callout--note {
  border-left-color: var(--muted);
}

.chapter__body .c-callout--note::before {
  color: var(--muted);
}

/* key — the emphasised "remember this": accent bar + faint accent tint. */
.chapter__body .c-callout--key {
  background: var(--accent-soft, var(--panel));
}

.chapter__body .c-callout--key::before {
  content: "GHI NHỚ";
}

/* warning — the alert: warm-red accent + faint warning tint. */
.chapter__body .c-callout--warning {
  border-left-color: var(--accent-warning, var(--accent-primary));
  background: var(--accent-warning-soft, var(--panel));
}

.chapter__body .c-callout--warning::before {
  content: "CẢNH BÁO";
  color: var(--accent-warning, var(--accent-primary));
}

/* action — the imperative "do this now": heavier bar. */
.chapter__body .c-callout--action {
  border-left-width: 1.8mm;
}

.chapter__body .c-callout--action::before {
  content: "HÀNH ĐỘNG";
}

.chapter__body .c-callout--exercise::before {
  content: "BÀI TẬP";
}

.chapter__body .c-callout--summary::before {
  content: "TÓM TẮT";
}

.chapter__body .c-callout--definition::before,
.chapter__body .c-callout--has-label::before {
  content: none;
  display: none;
}

.chapter__body .c-callout--definition > p:first-child > strong:first-child,
.chapter__body .c-callout--has-label > p:first-child > strong:first-child {
  display: block;
  margin-bottom: 1.5mm;
  color: var(--accent-primary);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 8.3pt;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.chapter__body .c-callout--definition > p:first-child > strong:first-child {
  color: var(--accent-secondary);
  letter-spacing: 0;
  text-transform: none;
}

.chapter__body .c-callout--side {
  float: right;
  width: 45%;
  margin: 0 0 4mm 5mm;
  padding: 3.4mm 4mm;
  font-size: 0.92em;
}

.chapter__body .c-callout--summary {
  padding: 5mm 5.5mm;
}

.chapter__body .c-callout--summary.c-callout--own-page {
  break-before: page;
  margin-top: 0;
  padding: 8mm;
}

.chapter__body .c-callout > :first-child {
  margin-top: 0;
}

.chapter__body .c-callout > :last-child {
  margin-bottom: 0;
}

.chapter__body .c-callout ul,
.chapter__body .c-callout ol {
  margin-bottom: 0;
}

/* === grids === */
/* page-layout grids — generated by skills/ebook-design/scripts/layouts.py.
   Apply .g-<id> to a container; direct children are the cells.
   WeasyPrint 60+ supports CSS grid; verify any layout in a real build. */
/* In book flow a grid needs an explicit height for its fr rows; override
   --grid-height per use, or set height:100%% inside a full-page wrapper. */
.g { display: grid; gap: var(--grid-gap, 3mm); width: 100%; height: var(--grid-height, 125mm); break-inside: avoid; }
/* content cells: direct children of a grid become the tiles */
.g > * { margin: 0; min-width: 0; min-height: 0; overflow: hidden; }
.g img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 1mm; }
.g p { margin: 0; }

/* :::team — a card grid of members (avatar + name + role) */
.team { display: grid; gap: 6mm; margin: 6mm 0; }
.team-1 { grid-template-columns: 1fr; }
.team-2 { grid-template-columns: repeat(2, 1fr); }
.team-3 { grid-template-columns: repeat(3, 1fr); }
.team-4 { grid-template-columns: repeat(4, 1fr); }
.team-5 { grid-template-columns: repeat(5, 1fr); }
.team-6 { grid-template-columns: repeat(6, 1fr); }
.team > * { margin: 0; text-align: center; break-inside: avoid; }
.team img { width: 24mm; height: 24mm; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 2mm; }
.team strong { display: block; }

/* :::columns N — flowing newspaper text (CSS multi-column) */
.cols { column-gap: 7mm; margin: 5mm 0; }
.cols-2 { column-count: 2; }
.cols-3 { column-count: 3; }
.cols > :first-child { margin-top: 0; }
.cols h2, .cols h3 { column-span: all; }

/* Flowing columns can use justification, but compact panels need natural word
   spacing; justified Vietnamese in narrow cards creates distracting gaps. */
.cols p, .cols li { text-align: justify; hyphens: auto; }

/* :::panels <layout> — text boxes arranged by a catalog layout. Rows size to
   content (no fr rows pulling in blank space) and the grid may flow across a
   page break between boxes; each box stays whole. */
.panels.g { gap: 2mm; height: auto; grid-template-rows: none; grid-auto-rows: min-content; align-items: start; break-inside: auto; }
.panels > * { overflow: visible; align-self: start; break-inside: avoid; padding: 2mm 1.5mm 2.1mm 1.8mm; background: var(--panel); border-radius: 1.5mm; }
.panels > * > :first-child { margin-top: 0; }
.panels > * > :last-child { margin-bottom: 0; }
/* tighter, denser type so narrow boxes hold more per line */
.panels p, .panels li {
  font-family: var(--font-sans);
  font-size: 8.85pt;
  line-height: 1.32;
  text-align: justify;
  text-align-last: left;
  text-wrap: pretty;
  word-spacing: normal;
  hyphens: auto;
}
.panels p::first-letter,
.panels li::first-letter,
.panels p > strong:first-child::first-letter {
  text-transform: uppercase;
}
/* Keep the leading bold term inline so short cards do not waste a full line. */
.panels p > strong:first-child::after { content: ": "; white-space: normal; }
.panels--title-top p > strong:first-child {
  display: block;
  margin: 0 0 0.8mm;
  text-align: center;
  line-height: 1.15;
}
.panels--title-top p, .panels--title-top li {
  text-align: center;
  text-align-last: center;
  hyphens: manual;
}
.panels--title-top p > strong:first-child::after { content: ""; }
.panels img { border-radius: 1mm; }

/* `:::grid <layout> page` — a feature image grid that takes its own full page,
   filling the content area (no mid-page gap, never split across a break).
   `.g.g--page` outranks the base `.g` height. */
.g.g--page { break-before: page; height: var(--page-fill, 168mm); }
.g-blank { display: grid; gap: var(--grid-gap, 3mm); grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.g-col-1 { display: grid; gap: var(--grid-gap, 3mm); grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.g-col-2 { display: grid; gap: var(--grid-gap, 3mm); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.g-col-3 { display: grid; gap: var(--grid-gap, 3mm); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.g-col-4 { display: grid; gap: var(--grid-gap, 3mm); grid-template-columns: repeat(4,minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
.g-row-2 { display: grid; gap: var(--grid-gap, 3mm); grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
.g-row-3 { display: grid; gap: var(--grid-gap, 3mm); grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(3,minmax(0, 1fr)); }
.g-row-4 { display: grid; gap: var(--grid-gap, 3mm); grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(4,minmax(0, 1fr)); }
.g-row-5 { display: grid; gap: var(--grid-gap, 3mm); grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(5,minmax(0, 1fr)); }
.g-row-6 { display: grid; gap: var(--grid-gap, 3mm); grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(6,minmax(0, 1fr)); }
.g-grid-2x2 { display: grid; gap: var(--grid-gap, 3mm); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
.g-grid-large { display: grid; gap: var(--grid-gap, 3mm); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(3,minmax(0, 1fr)); }
.g-grid-3x3 { display: grid; gap: var(--grid-gap, 3mm); grid-template-columns: repeat(3,minmax(0, 1fr)); grid-template-rows: repeat(3,minmax(0, 1fr)); }
.g-grid-small { display: grid; gap: var(--grid-gap, 3mm); grid-template-columns: repeat(5,minmax(0, 1fr)); grid-template-rows: repeat(7,minmax(0, 1fr)); }
.g-mosaic-1 { display: grid; gap: var(--grid-gap, 3mm); grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 2fr) minmax(0, 1fr); grid-template-areas: "a" "b"; }
.g-mosaic-1 > :nth-child(1) { grid-area: a; }
.g-mosaic-1 > :nth-child(2) { grid-area: b; }
.g-mosaic-2 { display: grid; gap: var(--grid-gap, 3mm); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 2fr) minmax(0, 1fr); grid-template-areas: "a a" "b c"; }
.g-mosaic-2 > :nth-child(1) { grid-area: a; }
.g-mosaic-2 > :nth-child(2) { grid-area: b; }
.g-mosaic-2 > :nth-child(3) { grid-area: c; }
.g-mosaic-3 { display: grid; gap: var(--grid-gap, 3mm); grid-template-columns: repeat(4,minmax(0, 1fr)); grid-template-rows: minmax(0, 3fr) minmax(0, 1fr); grid-template-areas: "a a a a" "b c d e"; }
.g-mosaic-3 > :nth-child(1) { grid-area: a; }
.g-mosaic-3 > :nth-child(2) { grid-area: b; }
.g-mosaic-3 > :nth-child(3) { grid-area: c; }
.g-mosaic-3 > :nth-child(4) { grid-area: d; }
.g-mosaic-3 > :nth-child(5) { grid-area: e; }
.g-mosaic-4 { display: grid; gap: var(--grid-gap, 3mm); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "a a b" "c c c" "d e e"; }
.g-mosaic-4 > :nth-child(1) { grid-area: a; }
.g-mosaic-4 > :nth-child(2) { grid-area: b; }
.g-mosaic-4 > :nth-child(3) { grid-area: c; }
.g-mosaic-4 > :nth-child(4) { grid-area: d; }
.g-mosaic-4 > :nth-child(5) { grid-area: e; }
.g-mosaic-5 { display: grid; gap: var(--grid-gap, 3mm); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "a a b" "c d d" "c e e"; }
.g-mosaic-5 > :nth-child(1) { grid-area: a; }
.g-mosaic-5 > :nth-child(2) { grid-area: b; }
.g-mosaic-5 > :nth-child(3) { grid-area: c; }
.g-mosaic-5 > :nth-child(4) { grid-area: d; }
.g-mosaic-5 > :nth-child(5) { grid-area: e; }
.g-mosaic-6 { display: grid; gap: var(--grid-gap, 3mm); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "a b" "a b" "a c"; }
.g-mosaic-6 > :nth-child(1) { grid-area: a; }
.g-mosaic-6 > :nth-child(2) { grid-area: b; }
.g-mosaic-6 > :nth-child(3) { grid-area: c; }
.g-mosaic-7 { display: grid; gap: var(--grid-gap, 3mm); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "a b" "a c" "d c"; }
.g-mosaic-7 > :nth-child(1) { grid-area: a; }
.g-mosaic-7 > :nth-child(2) { grid-area: b; }
.g-mosaic-7 > :nth-child(3) { grid-area: c; }
.g-mosaic-7 > :nth-child(4) { grid-area: d; }
.g-mosaic-8 { display: grid; gap: var(--grid-gap, 3mm); grid-template-columns: repeat(4,minmax(0, 1fr)); grid-template-rows: repeat(4,minmax(0, 1fr)); grid-template-areas: "a a b c" "a a d d" "e f f g" "e h i g"; }
.g-mosaic-8 > :nth-child(1) { grid-area: a; }
.g-mosaic-8 > :nth-child(2) { grid-area: b; }
.g-mosaic-8 > :nth-child(3) { grid-area: c; }
.g-mosaic-8 > :nth-child(4) { grid-area: d; }
.g-mosaic-8 > :nth-child(5) { grid-area: e; }
.g-mosaic-8 > :nth-child(6) { grid-area: f; }
.g-mosaic-8 > :nth-child(7) { grid-area: g; }
.g-mosaic-8 > :nth-child(8) { grid-area: h; }
.g-mosaic-8 > :nth-child(9) { grid-area: i; }
.g-hero-caption { display: grid; gap: var(--grid-gap, 3mm); grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); grid-template-rows: minmax(0, 2fr) minmax(0, 1fr); grid-template-areas: "a b" "a c"; }
.g-hero-caption > :nth-child(1) { grid-area: a; }
.g-hero-caption > :nth-child(2) { grid-area: b; }
.g-hero-caption > :nth-child(3) { grid-area: c; }
.g-hero-strip { display: grid; gap: var(--grid-gap, 3mm); grid-template-columns: repeat(3,minmax(0, 1fr)); grid-template-rows: minmax(0, 2.3fr) minmax(0, 1fr); grid-template-areas: "a a a" "b c d"; }
.g-hero-strip > :nth-child(1) { grid-area: a; }
.g-hero-strip > :nth-child(2) { grid-area: b; }
.g-hero-strip > :nth-child(3) { grid-area: c; }
.g-hero-strip > :nth-child(4) { grid-area: d; }
.g-golden-stack { display: grid; gap: var(--grid-gap, 3mm); grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); grid-template-rows: repeat(3,minmax(0, 1fr)); grid-template-areas: "a b" "a c" "a d"; }
.g-golden-stack > :nth-child(1) { grid-area: a; }
.g-golden-stack > :nth-child(2) { grid-area: b; }
.g-golden-stack > :nth-child(3) { grid-area: c; }
.g-golden-stack > :nth-child(4) { grid-area: d; }
.g-triptych { display: grid; gap: var(--grid-gap, 3mm); grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.g-thirds { display: grid; gap: var(--grid-gap, 3mm); grid-template-columns: repeat(3,minmax(0, 1fr)); grid-template-rows: repeat(3,minmax(0, 1fr)); grid-template-areas: "a b b" "a b b" "c c c"; }
.g-thirds > :nth-child(1) { grid-area: a; }
.g-thirds > :nth-child(2) { grid-area: b; }
.g-thirds > :nth-child(3) { grid-area: c; }
.g-feature-quad { display: grid; gap: var(--grid-gap, 3mm); grid-template-columns: repeat(3,minmax(0, 1fr)); grid-template-rows: repeat(3,minmax(0, 1fr)); grid-template-areas: "a a b" "a a c" "d e f"; }
.g-feature-quad > :nth-child(1) { grid-area: a; }
.g-feature-quad > :nth-child(2) { grid-area: b; }
.g-feature-quad > :nth-child(3) { grid-area: c; }
.g-feature-quad > :nth-child(4) { grid-area: d; }
.g-feature-quad > :nth-child(5) { grid-area: e; }
.g-feature-quad > :nth-child(6) { grid-area: f; }
.g-l-wrap { display: grid; gap: var(--grid-gap, 3mm); grid-template-columns: repeat(3,minmax(0, 1fr)); grid-template-rows: repeat(3,minmax(0, 1fr)); grid-template-areas: "a a b" "a a b" "c c b"; }
.g-l-wrap > :nth-child(1) { grid-area: a; }
.g-l-wrap > :nth-child(2) { grid-area: b; }
.g-l-wrap > :nth-child(3) { grid-area: c; }
.g-sidebar-stack { display: grid; gap: var(--grid-gap, 3mm); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: repeat(4,minmax(0, 1fr)); grid-template-areas: "a b" "a c" "a d" "a e"; }
.g-sidebar-stack > :nth-child(1) { grid-area: a; }
.g-sidebar-stack > :nth-child(2) { grid-area: b; }
.g-sidebar-stack > :nth-child(3) { grid-area: c; }
.g-sidebar-stack > :nth-child(4) { grid-area: d; }
.g-sidebar-stack > :nth-child(5) { grid-area: e; }
.g-masonry { display: grid; gap: var(--grid-gap, 3mm); grid-template-columns: repeat(3,minmax(0, 1fr)); grid-template-rows: repeat(4,minmax(0, 1fr)); grid-template-areas: "a b c" "a b c" "d b e" "d f e"; }
.g-masonry > :nth-child(1) { grid-area: a; }
.g-masonry > :nth-child(2) { grid-area: b; }
.g-masonry > :nth-child(3) { grid-area: c; }
.g-masonry > :nth-child(4) { grid-area: d; }
.g-masonry > :nth-child(5) { grid-area: e; }
.g-masonry > :nth-child(6) { grid-area: f; }
.g-banner-grid { display: grid; gap: var(--grid-gap, 3mm); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.5fr); grid-template-areas: "a a" "b c" "d e"; }
.g-banner-grid > :nth-child(1) { grid-area: a; }
.g-banner-grid > :nth-child(2) { grid-area: b; }
.g-banner-grid > :nth-child(3) { grid-area: c; }
.g-banner-grid > :nth-child(4) { grid-area: d; }
.g-banner-grid > :nth-child(5) { grid-area: e; }
.g-collage { display: grid; gap: var(--grid-gap, 3mm); grid-template-columns: repeat(4,minmax(0, 1fr)); grid-template-rows: repeat(4,minmax(0, 1fr)); grid-template-areas: "a a b b" "a a c d" "e e c d" "e e f f"; }
.g-collage > :nth-child(1) { grid-area: a; }
.g-collage > :nth-child(2) { grid-area: b; }
.g-collage > :nth-child(3) { grid-area: c; }
.g-collage > :nth-child(4) { grid-area: d; }
.g-collage > :nth-child(5) { grid-area: e; }
.g-collage > :nth-child(6) { grid-area: f; }
.g-feature-spread { display: grid; gap: var(--grid-gap, 3mm); grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); grid-template-areas: "a b c" "d b e" "d b f"; }
.g-feature-spread > :nth-child(1) { grid-area: a; }
.g-feature-spread > :nth-child(2) { grid-area: b; }
.g-feature-spread > :nth-child(3) { grid-area: c; }
.g-feature-spread > :nth-child(4) { grid-area: d; }
.g-feature-spread > :nth-child(5) { grid-area: e; }
.g-feature-spread > :nth-child(6) { grid-area: f; }
.g-section-3 { display: grid; gap: var(--grid-gap, 3mm); grid-template-columns: repeat(3,minmax(0, 1fr)); grid-template-rows: minmax(0, 0.7fr) minmax(0, 1.6fr) minmax(0, 0.7fr); grid-template-areas: "h h h" "a b c" "f f f"; }
.g-section-3 > :nth-child(1) { grid-area: h; }
.g-section-3 > :nth-child(2) { grid-area: a; }
.g-section-3 > :nth-child(3) { grid-area: b; }
.g-section-3 > :nth-child(4) { grid-area: c; }
.g-section-3 > :nth-child(5) { grid-area: f; }
.g-section-4 { display: grid; gap: var(--grid-gap, 3mm); grid-template-columns: repeat(4,minmax(0, 1fr)); grid-template-rows: minmax(0, 0.7fr) minmax(0, 1.6fr) minmax(0, 0.7fr); grid-template-areas: "h h h h" "a b c d" "f f f f"; }
.g-section-4 > :nth-child(1) { grid-area: h; }
.g-section-4 > :nth-child(2) { grid-area: a; }
.g-section-4 > :nth-child(3) { grid-area: b; }
.g-section-4 > :nth-child(4) { grid-area: c; }
.g-section-4 > :nth-child(5) { grid-area: d; }
.g-section-4 > :nth-child(6) { grid-area: f; }
.g-section-2x3 { display: grid; gap: var(--grid-gap, 3mm); grid-template-columns: repeat(3,minmax(0, 1fr)); grid-template-rows: minmax(0, 0.7fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.7fr); grid-template-areas: "h h h" "a b c" "d e f" "g g g"; }
.g-section-2x3 > :nth-child(1) { grid-area: h; }
.g-section-2x3 > :nth-child(2) { grid-area: a; }
.g-section-2x3 > :nth-child(3) { grid-area: b; }
.g-section-2x3 > :nth-child(4) { grid-area: c; }
.g-section-2x3 > :nth-child(5) { grid-area: d; }
.g-section-2x3 > :nth-child(6) { grid-area: e; }
.g-section-2x3 > :nth-child(7) { grid-area: f; }
.g-section-2x3 > :nth-child(8) { grid-area: g; }
.g-section-2x4 { display: grid; gap: var(--grid-gap, 3mm); grid-template-columns: repeat(4,minmax(0, 1fr)); grid-template-rows: minmax(0, 0.7fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.6fr); grid-template-areas: "h h h h" "a b c d" "e f g i" "j j j j"; }
.g-section-2x4 > :nth-child(1) { grid-area: h; }
.g-section-2x4 > :nth-child(2) { grid-area: a; }
.g-section-2x4 > :nth-child(3) { grid-area: b; }
.g-section-2x4 > :nth-child(4) { grid-area: c; }
.g-section-2x4 > :nth-child(5) { grid-area: d; }
.g-section-2x4 > :nth-child(6) { grid-area: e; }
.g-section-2x4 > :nth-child(7) { grid-area: f; }
.g-section-2x4 > :nth-child(8) { grid-area: g; }
.g-section-2x4 > :nth-child(9) { grid-area: i; }
.g-section-2x4 > :nth-child(10) { grid-area: j; }
.g-feature-rows { display: grid; gap: var(--grid-gap, 3mm); grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); grid-template-rows: minmax(0, 0.7fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "h h" "a b" "c d" "e f"; }
.g-feature-rows > :nth-child(1) { grid-area: h; }
.g-feature-rows > :nth-child(2) { grid-area: a; }
.g-feature-rows > :nth-child(3) { grid-area: b; }
.g-feature-rows > :nth-child(4) { grid-area: c; }
.g-feature-rows > :nth-child(5) { grid-area: d; }
.g-feature-rows > :nth-child(6) { grid-area: e; }
.g-feature-rows > :nth-child(7) { grid-area: f; }
.g-centered-band { display: grid; gap: var(--grid-gap, 3mm); grid-template-columns: repeat(3,minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); grid-template-areas: "h h h" "a b c" "f f f"; }
.g-centered-band > :nth-child(1) { grid-area: h; }
.g-centered-band > :nth-child(2) { grid-area: a; }
.g-centered-band > :nth-child(3) { grid-area: b; }
.g-centered-band > :nth-child(4) { grid-area: c; }
.g-centered-band > :nth-child(5) { grid-area: f; }

/* === matter === */
/* Front/back matter & part dividers — full-page structural blocks driven by
   directives (`:::part`, `:::dedication`, `:::epigraph`, `:::about`). Token-driven
   and always assembled, so any theme supports them. Use `##` (not `#`) for
   titles inside a directive — a `#` H1 would be parsed as a new chapter. */

.c-part {
  break-before: page;
  break-after: page;
  min-height: 165mm;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.c-part::before,
.c-part::after {
  content: "";
  width: 30mm;
  height: 0.6mm;
  background: var(--accent-primary);
}

.c-part::before { margin-bottom: 9mm; }
.c-part::after { margin-top: 9mm; }

.c-part h2,
.c-part p {
  margin: 0;
  max-width: 80%;
  color: var(--accent-secondary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26pt;
  line-height: 1.3;
}

.c-part .kicker,
.c-part em {
  display: block;
  margin-bottom: 5mm;
  color: var(--accent-primary);
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 600;
  font-size: 9pt;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.c-dedication {
  break-before: page;
  min-height: 150mm;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.c-dedication p {
  max-width: 70%;
  color: var(--muted);
  font-style: italic;
  font-size: 13pt;
  line-height: 1.6;
}

.c-epigraph {
  margin: 9mm auto;
  max-width: 78%;
  text-align: center;
}

.c-epigraph p {
  margin: 0 0 2mm;
  color: var(--muted);
  font-style: italic;
  font-size: 11pt;
  line-height: 1.55;
}

.c-epigraph p:last-child {
  font-style: normal;
  font-family: var(--font-sans);
  font-size: 8.5pt;
  letter-spacing: 0.05em;
}

.c-about {
  break-before: page;
  padding-top: 8mm;
}

.c-about h2 {
  margin: 0 0 5mm;
  color: var(--accent-secondary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16pt;
}

.c-closing {
  break-before: page;
  min-height: 165mm;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Down-arrow motif sitting ABOVE the heading: a thin rule (::before) with a
   chevron (::after) tucked under it. `order` pulls both pseudo-elements to the
   top of the flex column so the chevron never lands on the footer text. */
.c-closing::before {
  order: -2;
  content: "";
  display: block;
  width: 0.25mm;
  height: 20mm;
  background: var(--ink);
}

.c-closing::after {
  order: -1;
  content: "";
  display: block;
  width: 4mm;
  height: 4mm;
  margin-top: -2.4mm;
  margin-bottom: 12mm;
  border-right: 0.25mm solid var(--ink);
  border-bottom: 0.25mm solid var(--ink);
  transform: rotate(45deg);
}

.c-closing h2,
.c-closing p:first-child {
  margin: 0;
  max-width: 86%;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 34pt;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.c-closing p {
  margin: 5mm 0 0;
  max-width: 70%;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 8.5pt;
  line-height: 1.45;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}


/* === AI Native Lab sample polish === */
.cover__label{letter-spacing:.18em;text-transform:uppercase;color:#d8c48d!important}
.cover__label::after{content:"Preview Sample";display:block;margin-top:10mm;font-family:var(--font-sans);font-size:8pt;color:#cdbfa4;letter-spacing:.22em}
.cover__publisher{font-size:8pt;letter-spacing:.16em;text-transform:uppercase;color:#cdbfa4!important}
.chapter__content blockquote{
  margin: 1.3em 0 1.5em 0;
  padding: 1em 1.1em 1em 1.25em;
  border-left: 4px solid var(--accent-primary);
  background: linear-gradient(90deg, rgba(199,154,61,.13), rgba(255,246,228,.72));
  color: var(--ink-warm);
  border-radius: 0 10px 10px 0;
  break-inside: avoid;
}
.chapter__content blockquote strong{
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 8.2pt;
  color: var(--accent-secondary);
}
.chapter__content table{
  width:100%;
  border-collapse: separate;
  border-spacing:0;
  margin: 1.3em 0 1.7em;
  font-family: var(--font-sans);
  font-size: 8.4pt;
  line-height:1.45;
  break-inside: avoid;
  box-shadow: 0 0 0 1px rgba(199,154,61,.45);
}
.chapter__content th{
  background:#1f1b18;
  color:#f6efdd;
  text-transform: uppercase;
  letter-spacing:.04em;
  font-weight:600;
  padding: .62em .72em;
}
.chapter__content td{
  border-top:1px solid rgba(199,154,61,.35);
  padding:.62em .72em;
  vertical-align: top;
  background: rgba(255,246,228,.55);
}
.chapter__content tr:nth-child(even) td{background: rgba(255,250,240,.95)}
.chapter__content ul{background:rgba(122,47,49,.055);padding:1em 1.2em 1em 1.9em;border-radius:10px;border:1px solid rgba(122,47,49,.16);break-inside:avoid}
.chapter__content h2{border-top:1px solid rgba(199,154,61,.55);padding-top:.8em;margin-top:1.6em;color:var(--accent-secondary)}
p,li,blockquote{orphans:3;widows:3} h1,h2,h3{break-after:avoid;break-inside:avoid;overflow-wrap:break-word} img,table,blockquote{break-inside:avoid}