/* Office Lab — stylesheet dùng chung cho mọi trang.
   Ý tưởng: trang sổ kế toán (giấy ngà, kẻ dòng, dòng tổng gạch đôi, con dấu trạng thái)
   kèm vài chi tiết bảng tính dùng tiết chế (thanh công thức, số dòng, #N/A).
   Thêm trang mới: chỉ dùng class có sẵn ở đây. Không style inline, không script (CSP chặn). */

/* ---------- Fonts tự host (OFL). Mỗi họ 2 subset: vietnamese + latin ---------- */
@font-face { font-family: "Newsreader"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/assets/fonts/nr-vietnamese-400.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Newsreader"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/assets/fonts/nr-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("/assets/fonts/nr-vietnamese-500.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Newsreader"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("/assets/fonts/nr-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: "Be Vietnam Pro"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/assets/fonts/bvp-vietnamese-400.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/assets/fonts/bvp-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/assets/fonts/bvp-vietnamese-600.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/assets/fonts/bvp-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/assets/fonts/mono-vietnamese-400.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/assets/fonts/mono-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("/assets/fonts/mono-vietnamese-500.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("/assets/fonts/mono-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

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

  --paper: #f4efe4;      /* giấy sổ */
  --paper-2: #ebe4d4;    /* giấy đậm hơn: hover, khối phụ */
  --card: #fbf8f1;       /* phiếu rời */
  --ink: #1d1a16;
  --ink-2: #4a443b;
  --muted: #655d51;      /* ≥ 5:1 trên --paper */
  --rule: #cfc5b1;       /* kẻ dòng mảnh */
  --red: #a3271b;        /* mực đỏ kế toán: nhấn, nhãn mục */
  --green: #2f5d3a;      /* dấu "đang dùng" */
  --amber: #7f5410;      /* dấu "thử nghiệm" */

  --serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --wrap: 74rem;
  --gutter: 1.25rem;
  --label-col: 0;        /* cột nhãn bên trái, bật ở desktop */
  --sec-pad: 4rem;
}

@media (min-width: 60rem) {
  :root {
    --gutter: 3rem;
    --label-col: 12.5rem;
    --sec-pad: 6rem;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.7 var(--sans);
  overflow-wrap: break-word;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.015em;
}

/* Tiêu đề tiếng Việt: dấu chồng (Ắ, Ộ, Ể) cần line-height ≥ 1.1 với serif có x-height thấp */
h1 { font-size: clamp(2.5rem, 1.4rem + 4.6vw, 5rem); line-height: 1.1; letter-spacing: -0.022em; }
h2 { font-size: clamp(1.9rem, 1.4rem + 1.9vw, 2.9rem); line-height: 1.15; }
h3 { font-size: 1.6rem; line-height: 1.2; }

p, ul, ol, dl { margin: 0; }
p + p { margin-top: 1rem; }

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--red); }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

code {
  font-family: var(--mono);
  font-size: 0.86em;
  padding: 0.05em 0.3em;
  background: var(--paper-2);
}

img { max-width: 100%; height: auto; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link { position: absolute; left: -999px; top: 0; }
.skip-link:focus { left: var(--gutter); top: 0.5rem; background: var(--card); padding: 0.5rem 0.75rem; z-index: 10; }

/* Nhãn chữ máy: dùng cho số mục, cột bảng, ngày, trạng thái */
.mono {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---------- Masthead ---------- */
.masthead { border-bottom: 1px solid var(--ink); }

.masthead .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-top: 1.1rem;
  padding-bottom: 0.9rem;
}

.logo {
  font: 500 1.65rem/1 var(--serif);
  letter-spacing: -0.01em;
  text-decoration: none;
}

.lang-link {
  font: 500 0.8rem/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--red);
}

.nav { order: 3; width: 100%; }
.nav ul {
  display: flex;
  gap: 1.25rem;
  margin: 0;
  padding: 0.25rem 0 0;
  list-style: none;
  overflow-x: auto;
  white-space: nowrap;
  font-size: 0.95rem;
}
.nav a { text-decoration: none; color: var(--ink-2); }
.nav a:hover { color: var(--red); }

@media (min-width: 60rem) {
  .nav { order: 0; width: auto; margin-left: auto; }
  .nav ul { padding: 0; gap: 1.75rem; }
}

/* Thanh công thức kiểu bảng tính, chỉ dùng ở đầu trang chủ */
.fx {
  border-bottom: 1px solid var(--rule);
  background: var(--card);
}
.fx .wrap {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: stretch;
  font: 400 0.85rem/1.4 var(--mono);
}
.fx .ref { padding: 0.55rem 1rem 0.55rem 0; border-right: 1px solid var(--rule); color: var(--muted); }
.fx .fn { padding: 0.55rem 0.9rem; border-right: 1px solid var(--rule); color: var(--muted); font-style: italic; }
.fx .val { padding: 0.55rem 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx .val b { font-weight: 500; color: var(--red); }

/* ---------- Hero trang chủ ---------- */
.hero { padding: 3.5rem 0 3rem; border-bottom: 1px solid var(--ink); }

.hero .wrap { display: grid; gap: 3rem; }

@media (min-width: 60rem) {
  .hero { padding: 6.5rem 0 5rem; }
  .hero .wrap { grid-template-columns: minmax(0, 1fr) 19rem; gap: 5rem; align-items: end; }
}

.hero h1 { max-width: 15em; }
.hero .lead { margin-top: 1.75rem; }

.lead { font-size: 1.2rem; line-height: 1.65; color: var(--ink-2); max-width: 36em; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2.25rem; }

.btn {
  display: inline-block;
  padding: 0.9rem 1.4rem;
  background: var(--ink);
  color: var(--paper);
  font: 600 1rem/1.2 var(--sans);
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.btn:hover { background: var(--red); color: var(--paper); }

.text-link {
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 0.15s ease;
}

/* Ghi chú lề bên phải hero */
.margin-note { border-top: 2px solid var(--ink); padding-top: 0.9rem; }
.margin-note .mono { color: var(--muted); }
.margin-note .q { margin-top: 0.6rem; font: 400 1.35rem/1.35 var(--serif); }
.margin-note dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem 1rem;
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
  font: 400 0.85rem/1.4 var(--mono);
}
.margin-note dt { color: var(--ink-2); }
.margin-note dd { margin: 0; color: var(--red); text-align: right; }

/* ---------- Section ---------- */
.sec { padding: var(--sec-pad) 0; border-bottom: 1px solid var(--ink); }
.sec--tint { background: var(--card); }

.sec-head { display: grid; gap: 0.9rem; margin-bottom: 2.5rem; }
@media (min-width: 60rem) {
  .sec-head { grid-template-columns: var(--label-col) minmax(0, 1fr); gap: 3rem; margin-bottom: 3.5rem; }
}
.sec-head .sec-no { color: var(--red); padding-top: 0.85rem; }
.sec-head h2 { max-width: 20em; }
.sec-head p:not(.sec-no) { margin-top: 0.9rem; color: var(--ink-2); max-width: 38em; }

/* Khối nội dung thụt theo cột nhãn */
.indent { max-width: 44rem; }
@media (min-width: 60rem) { .indent { margin-left: calc(var(--label-col) + 3rem); } }

/* ---------- Sổ: các dòng kẻ ---------- */
.ledger { border-top: 1px solid var(--ink); list-style: none; margin: 0; padding: 0; }

.ledger-row {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 0.25rem 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 60rem) {
  .ledger-row { grid-template-columns: var(--label-col) minmax(0, 1fr) 11rem; gap: 3rem; padding: 1.4rem 0; }
}
.ledger-row .no { font: 400 0.85rem/2.1 var(--mono); color: var(--muted); }
.ledger-row .item { font: 400 1.45rem/1.35 var(--serif); }
.ledger-row .freq { grid-column: 2; color: var(--muted); }
@media (min-width: 60rem) { .ledger-row .freq { grid-column: auto; text-align: right; padding-top: 0.5rem; } }

/* Dòng tổng: gạch đôi như cuối bảng kế toán */
.ledger-total {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 1rem;
  padding-top: 1.25rem;
}
@media (min-width: 60rem) { .ledger-total { grid-template-columns: var(--label-col) minmax(0, 1fr); gap: 3rem; } }
.ledger-total .no { font: 500 1rem/1.7 var(--mono); color: var(--red); }
.ledger-total p { max-width: 38em; padding-bottom: 1.1rem; border-bottom: 3px double var(--ink); }

/* ---------- Danh mục công cụ ---------- */
.catalog { width: 100%; border-collapse: collapse; }
.catalog caption { text-align: left; }
.catalog th {
  padding: 0 1rem 0.75rem 0;
  border-bottom: 1px solid var(--ink);
  text-align: left;
  font: 500 0.75rem/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.catalog td { padding: 1.6rem 1rem 1.6rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.catalog tbody tr { transition: background-color 0.15s ease; }
.catalog tbody tr.is-tool:hover { background: var(--paper-2); }
.catalog .code { font: 400 0.85rem/1.9 var(--mono); color: var(--muted); white-space: nowrap; width: 5.5rem; }
.catalog .name { font: 500 1.7rem/1.15 var(--serif); width: 14rem; }
.catalog .name a { text-decoration: none; }
.catalog .name a::after { content: " →"; color: var(--red); font-family: var(--sans); font-size: 1.1rem; }
.catalog .who { color: var(--ink-2); width: 12rem; }
.catalog .state { width: 10rem; text-align: right; }
.catalog tr.is-next td { color: var(--muted); }
.catalog tr.is-next .note { font: 400 1.2rem/1.5 var(--serif); }

@media (max-width: 59.99rem) {
  .catalog thead { display: none; }
  .catalog, .catalog tbody { display: block; }
  .catalog tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.4rem 1rem;
    padding: 1.35rem 0;
    border-bottom: 1px solid var(--rule);
  }
  .catalog td { display: block; padding: 0; border: 0; width: auto; }
  .catalog .code { grid-column: 1; grid-row: 1; }
  .catalog .state { grid-column: 2; grid-row: 1; }
  .catalog .name, .catalog .what, .catalog .who, .catalog .note { grid-column: 1 / -1; }
}

/* Con dấu trạng thái */
.stamp {
  display: inline-block;
  padding: 0.35rem 0.55rem;
  border: 1.5px solid currentColor;
  font: 500 0.72rem/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(-2deg);
}
.stamp--dang-dung { color: var(--green); }
.stamp--thu-nghiem { color: var(--amber); }
.stamp--sap-ra-mat { color: var(--muted); }

/* Khối "Làm riêng" */
.slip {
  display: grid;
  gap: 1.25rem;
  margin-top: 3rem;
  padding: 1.75rem;
  border: 1px solid var(--ink);
  background: var(--card);
}
@media (min-width: 60rem) {
  .slip { grid-template-columns: calc(var(--label-col) - 1.75rem) minmax(0, 1fr) auto; gap: 3rem; align-items: center; padding: 2rem 1.75rem; }
}
.slip .mono { color: var(--red); }
.slip h3 { margin-bottom: 0.6rem; }
.slip p { color: var(--ink-2); max-width: 38em; }

/* ---------- Nguyên tắc ---------- */
.rules { display: grid; border-top: 1px solid var(--ink); list-style: none; margin: 0; padding: 0; }
@media (min-width: 60rem) { .rules { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rules li { padding: 1.5rem 0 1.75rem; border-bottom: 1px solid var(--rule); }
@media (min-width: 60rem) {
  .rules li { padding: 1.75rem 1.75rem 0 0; margin-right: 1.75rem; border-bottom: 0; border-right: 1px solid var(--rule); }
  .rules li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
}
.rules .mono { color: var(--red); }
.rules h3 { margin: 0.75rem 0; }
.rules p { color: var(--ink-2); font-size: 1rem; }

/* ---------- Case study (phiếu) ---------- */
.cases { display: grid; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.case { border: 1px solid var(--ink); background: var(--card); }
.case-top {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem;
  padding: 0.85rem 1.5rem; border-bottom: 1px solid var(--ink); color: var(--muted);
}
.case h3 { padding: 1.75rem 1.5rem 0.5rem; font-size: 1.9rem; }
.case dl {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  padding: 0 1.5rem 1.75rem;
}
@media (min-width: 60rem) { .case dl { grid-template-columns: calc(var(--label-col) - 1.5rem) minmax(0, 1fr); column-gap: 3rem; } }
.case dt, .case dd { margin: 0; padding: 0.95rem 0; border-bottom: 1px solid var(--rule); }
.case dt { font: 500 0.78rem/1.9 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.case dd { font-size: 1.1rem; }
.case dt.total, .case dd.total { border-bottom: 3px double var(--ink); }
.na { font-family: var(--mono); color: var(--red); margin-right: 0.6rem; }
.pending { color: var(--muted); }

/* ---------- Liên hệ ---------- */
.mail { font: 400 clamp(1.6rem, 1.1rem + 2vw, 2.6rem)/1.2 var(--serif); text-decoration: none; border-bottom: 1px solid var(--ink); }
.mail:hover { border-color: var(--red); }

/* ---------- Trang công cụ ---------- */
.tool-head { padding: 2.5rem 0 3rem; border-bottom: 1px solid var(--ink); }
@media (min-width: 60rem) { .tool-head { padding: 4rem 0 4.5rem; } }
.crumb { color: var(--muted); margin-bottom: 2rem; }
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--red); }
.tool-head .grid { display: grid; gap: 2rem; }
@media (min-width: 60rem) { .tool-head .grid { grid-template-columns: minmax(0, 1fr) 17rem; gap: 5rem; align-items: end; } }
.tool-head .lead { margin-top: 1.5rem; }

.spec { border-top: 2px solid var(--ink); }
.spec dl { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); }
.spec dt, .spec dd { margin: 0; padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }
.spec dt { font: 500 0.75rem/1.9 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.spec dd { font-size: 0.98rem; }

/* Danh sách đánh số kiểu sổ trong trang công cụ */
.points { list-style: none; margin-block: 0; padding: 0; border-top: 1px solid var(--ink); counter-reset: pt; }
.points li {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
  counter-increment: pt;
}
.points li::before { content: counter(pt, decimal-leading-zero); font: 400 0.85rem/1.95 var(--mono); color: var(--muted); }
.points--warn li::before { content: "!" counter(pt); color: var(--red); }

.io { display: grid; border: 1px solid var(--ink); background: var(--card); }
@media (min-width: 48rem) { .io { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.io > div { padding: 1.5rem; }
.io > div + div { border-top: 1px solid var(--ink); }
@media (min-width: 48rem) { .io > div + div { border-top: 0; border-left: 1px solid var(--ink); } }
.io .mono { color: var(--red); }
.io h3 { margin: 0.5rem 0 1rem; }
.io ul { padding-left: 1.1rem; }
.io li + li { margin-top: 0.4rem; }
.io p + ul, .io ul + p { margin-top: 0.8rem; }

/* Khung ảnh demo: chỗ trống, sẽ thay bằng ảnh chụp dữ liệu giả */
.figure { margin: 0; }
.figure .frame {
  display: grid; place-items: center;
  min-height: 15rem; padding: 1.5rem;
  border: 1px dashed var(--ink);
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, var(--rule) 39px 40px),
    var(--card);
  color: var(--muted);
  text-align: center;
}
@media (min-width: 60rem) { .figure .frame { min-height: 24rem; } }
.figure .frame span { background: var(--card); padding: 0.4rem 0.75rem; }
.figure figcaption { margin-top: 0.75rem; color: var(--muted); font-size: 0.95rem; }

/* ---------- Trang đơn (privacy, 404) ---------- */
.page { padding: 3rem 0 4.5rem; }
@media (min-width: 60rem) { .page { padding: 5rem 0 7rem; } }
.page h1 { font-size: clamp(2.3rem, 1.5rem + 3vw, 3.8rem); }
.page .lead { margin-top: 1.25rem; }
.page .updated { margin-top: 2rem; color: var(--muted); }

.split { display: grid; gap: 3rem; }
@media (min-width: 48rem) { .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; } }
.split > div { border-top: 2px solid var(--ink); padding-top: 1rem; }
.split h1, .split h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); margin: 1rem 0; }

/* ---------- Footer ---------- */
.footer { padding: 2.25rem 0 3rem; color: var(--muted); }
.footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; }
.footer ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; list-style: none; margin: 0; padding: 0; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--red); }