/* =========================================================
   Base
   ========================================================= */
:root {
  --content-max: 92ch;
  --base-font: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --mono-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --color-text: #111;
  --color-muted: #6b7280;
  --color-accent: #1a56db;
  --brand-blue: rgba(59, 113, 181, 1);
  --brand-blue-subtle: rgba(59, 113, 181, 0.12);
  --brand-blue-muted: rgba(59, 113, 181, 0.2);
  --color-bg: #f3f4f6;
  --color-surface: #ffffff;
  --color-surface-muted: #fafafa;

  --color-link-dark: #1f3a8a;

  --color-border: rgba(0, 0, 0, 0.12);
  --color-border-subtle: rgba(0, 0, 0, 0.08);
  --color-border-muted: rgba(0, 0, 0, 0.12);

  --desktop-rail-w: 5.647rem;
  /* 96 / 17 */
  --desktop-rail-pad: 1.412rem;
  /* 24 / 17 */
  --mobile-nav-h: 3.294rem;
  /* 56 / 17 */
  --mobile-gutter: 0.941rem;
  /* 16 / 17 */
  --drawer-max: 20rem;
  /* 340px ≈ 20rem if root ~17px; see note below */
  --drawer-w: min(86vw, var(--drawer-max));

  /* Shadows */
  --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.06);

  --space-1: 0.235rem;
  /* 4px */
  --space-2: 0.471rem;
  /* 8px */
  --space-3: 0.706rem;
  /* 12px */
  --space-4: 0.941rem;
  /* 16px */
  --space-5: 1.412rem;
  /* 24px */
  --shadow-panel: 0 10px 30px rgba(0, 0, 0, 0.18);

  --tip-accent: #d6a84f;
  --tip-bg: rgba(214, 168, 79, 0.10);
  --icon-pointer: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-hand-index' viewBox='0 0 16 16'%3E%3Cpath d='M6.75 1a.75.75 0 0 1 .75.75V8a.5.5 0 0 0 1 0V5.467l.086-.004c.317-.012.637-.008.816.027.134.027.294.096.448.182.077.042.15.147.15.314V8a.5.5 0 1 0 1 0V6.435l.106-.01c.316-.024.584-.01.708.04.118.046.3.207.486.43.081.096.15.19.2.259V8.5a.5.5 0 0 0 1 0v-1h.342a1 1 0 0 1 .995 1.1l-.271 2.715a2.5 2.5 0 0 1-.317.991l-1.395 2.442a.5.5 0 0 1-.434.252H6.035a.5.5 0 0 1-.416-.223l-1.433-2.15a1.5 1.5 0 0 1-.243-.666l-.345-3.105a.5.5 0 0 1 .399-.546L5 8.11V9a.5.5 0 0 0 1 0V1.75A.75.75 0 0 1 6.75 1M8.5 4.466V1.75a1.75 1.75 0 1 0-3.5 0v5.34l-1.2.24a1.5 1.5 0 0 0-1.196 1.636l.345 3.106a2.5 2.5 0 0 0 .405 1.11l1.433 2.15A1.5 1.5 0 0 0 6.035 16h6.385a1.5 1.5 0 0 0 1.302-.756l1.395-2.441a3.5 3.5 0 0 0 .444-1.389l.271-2.715a2 2 0 0 0-1.99-2.199h-.581a5 5 0 0 0-.195-.248c-.191-.229-.51-.568-.88-.716-.364-.146-.846-.132-1.158-.108l-.132.012a1.26 1.26 0 0 0-.56-.642 2.6 2.6 0 0 0-.738-.288c-.31-.062-.739-.058-1.05-.046zm2.094 2.025'/%3E%3C/svg%3E");

  --icon-check-mark-large: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-check-lg' viewBox='0 0 16 16'%3E%3Cpath d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z'/%3E%3C/svg%3E");

  --icon-check-mark: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-check' viewBox='0 0 16 16'%3E%3Cpath d='M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z'/%3E%3C/svg%3E");

  --icon-info: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20path%3D%22currentColor%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M8%2015A7%207%200%201%201%208%201a7%207%200%200%201%200%2014m0%201A8%208%200%201%200%208%200a8%208%200%200%200%200%2016%22/%3E%3Cpath%20d%3D%22m8.93%206.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738%203.468c-.194.897.105%201.319.808%201.319.545%200%201.178-.252%201.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275%200-.375-.193-.304-.533zM9%204.5a1%201%200%201%201-2%200%201%201%200%200%201%202%200%22/%3E%3C/svg%3E");
  --icon-arrow-right: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'16'%20height%3D'16'%20viewBox%3D'0%200%2016%2016'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M15%202a1%201%200%200%200-1-1H2a1%201%200%200%200-1%201v12a1%201%200%200%200%201%201h12a2%202%200%200%200%201-1zM0%202a2%202%200%200%201%202-2h12a2%202%200%200%201%202%202v12a2%202%200%200%201-2%202H2a2%202%200%200%201-2-2zm4.5%205.5a.5.5%200%200%200%200%201h5.793l-2.147%202.146a.5.5%200%200%200%20.708.708l3-3a.5.5%200%200%200%200-.708l-3-3a.5.5%200%201%200-.708.708L10.293%207.5z'%2F%3E%3C%2Fsvg%3E");
}

html {
  height: 100%;
  overflow-y: scroll;
  /* stabilize scroll root */
  font-size: 17px;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: var(--base-font);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  font-size: 1rem;
}

/* ===== Prose spacing normalization ===== */

p {
  margin: 0.6em 0;
}

code {
  font-family: var(--mono-font);
}

figure[data-figure-type="image"] {
  margin: 2em 0;
}


figure[data-figure-type="image"]>figcaption {
  font-size: 0.9em;
  color: #444;
  margin-bottom: 0.6em;
}


figure[data-figure-type="image"] figcaption::before {
  content: "Figure. ";
  font-weight: 600;
}

.branding {
  font-style: oblique;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}

.branding img {
  height: 0.9em;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: 2px;
}

.branding span {
  color: #444444;
  margin-left: 8px;
  font-style: normal;
  padding: 0;
  transform: translateX(-0.06em);
}

.essay-date {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.85rem;
  line-height: 1.2;
  font-weight: 450;
  color: rgba(0, 0, 0, 0.45);
  font-family: var(--base-font);
  color: rgba(0, 0, 0, 0.45);
  letter-spacing: 0.01em;
}

.essay-meta {
  margin-top: 0.4rem;
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: 0.85rem;
  line-height: 1.2;
  font-weight: 450;
  color: rgba(0, 0, 0, 0.42);
}




.essay-meta .essay-sep {
  color: rgba(0, 0, 0, 0.35);
}


.home-item {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.706rem;
  padding: 24px 26px;
  background: #ffffff;
  margin: 18px 0;
}

.home-item h2 {
  font-size: 1.2rem;
  /* down from 1.3 */
  font-weight: 600;
  /* or 550 if your font supports it */
  line-height: 1.3;
  margin-bottom: 0.6rem;
  margin-top: 0;
}

.home-item p {
  margin: 0 0 14px;
  max-width: 75ch;
}

.home-item .cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  width: 100%;
}


/* A few “don’t overflow on mobile” defaults */
img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

article,
section,
p {
  min-width: 0;
}

.essay-header {
  margin-bottom: 1.5rem;
  /* optional */
}

.essay-header #title {
  margin: 0;
  line-height: 1.12;
}

.essay-header #subtitle {
  margin: 0.45rem 0 0;
  /* closer to the title */
  font-size: 1.125rem;
  /* “deck” size */
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: 0.01em;
  /* less faint */
  color: rgba(0, 0, 0, 0.68);
  /* adjust for your theme */
  max-width: 70ch;
}


.toc {
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-soft);
  padding: 1rem 1rem;
}

.toc ol a {
  font-size: 0.9rem;
}

.toc .toc-section-number {
  font-size: 0.85rem;
}

.toc__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  margin-bottom: 0;
}

.toc__title {
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(0, 0, 0, 0.68);
}

.toc__toggle {
  display: inline-flex;
  align-items: center;
  /* gap: 0.2rem; */
  background-color: #ffffff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-size: 0.8rem;
  cursor: pointer;
  font-variant-caps: all-small-caps;
}

.toc__toggle:hover {
  background-color: var(--brand-blue-subtle);
}

.toc__toggle:hover::after {
  color: var(--brand-blue);
}

.toc__toggle::after {
  content: "\25B8";
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Use em for the numerical profile so it scales with text */
  width: 1em;
  height: 1em;
  font-size: 1.1rem;

  /* Crucial: remove line-height to stop baseline interference */
  line-height: 0;
  vertical-align: middle;
  /* The structural pivot */
  transform-origin: center center;
  transition: transform 0.2s ease;
  /* transform-origin: 50% 50%; */
  /* OPTIONAL: Many fonts have a high baseline. 
     Adjust this arithmetic summary if the icon looks too high. */
  margin-top: 1px;
  margin-left: 1px;

}



.toc__toggle.is-expanded::after {
  /* Rotation stays pure around the center */
  transform: rotate(90deg) translate(10px, 1px);
}

/* Target buttons with the sub-target attribute */
button[data-sub-target] {
  /* Layout & Reset */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 4px 8px;
  background-color: #ffffff;
  /* Your Border & Radius Rules */
  border: 1px solid var(--color-border-subtle);
  border-radius: 999px;
  margin-left: 1em;
  /* Smooth transition for the algorithmic path */
  transition: all 0.2s ease-in-out;
}

button[data-sub-target]:hover {
  background-color: var(--brand-blue-subtle);
}

button[data-sub-target]:hover::before {
  color: var(--brand-blue);
}


/* Inserting and sizing the directional icon */
button[data-sub-target]::before {
  content: "\25B8";
  /* display: inline-block; -> Change this to flex */
  display: flex;
  align-items: center;
  justify-content: center;
  /* border: 1px solid red; */

  /* Force the pseudo-element to fill the button's 24px container */
  width: 1.2rem;
  height: 1.2rem;

  font-size: 1rem;
  line-height: 0;
  /* line-height 0 helps strip font-baseline offsets */
  margin-top: 1px;
  margin-left: 0px;
  /* The structural pivot point */
  transform-origin: center center;
  transform: translate(0.5px, 0px);
  transition: transform 0.2s ease-in-out;
}


/* Target the specific nested list */
ol.no-bullets[id$="-sub"] {
  display: none;
  /* Hidden by default in your procedural logic */
  border-left: 1px solid var(--brand-blue-muted);
  padding-left: 1.2rem;
  margin-left: 0.8rem;
  /* Creates the offset from the parent number */
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  margin-top: -2px;
  padding-top: 2px;
}



/* When the parent is expanded, show the structural anchor */
button[data-sub-target].is-expanded+ol.no-bullets {
  display: block;
}


button[data-sub-target].is-expanded::before {
  transform: rotate(90deg) translate(1px, 1px);
  margin-top: 0px;
  margin-left: 1.5px;

}

/* Ensuring the button maintains its geometric symmetry */
button[data-sub-target] {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Fixed sizing often helps icons feel more like UI controls */
  width: 22px;
  /* Slightly smaller for a tighter data profile */
  height: 22px;
  /* Resetting margin to ensure it doesn't push the line height */
  margin: 0;
  padding: 0;

  border: 1px solid var(--color-border-subtle);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  /* Use vertical-align as a fallback for the arithmetic plane */
  vertical-align: middle;
}

/* The procedural rule for the list item */
.toc-list>li {
  display: flex;
  flex-wrap: wrap;
  /* Allows the sub-list to drop below the header */
  align-items: center;
  /* Vertically aligns number, text, and button */
  gap: 8px;
  /* Consistent arithmetic spacing */
  margin-bottom: 0.5rem;
}

/* Ensuring the sub-list takes up the full width below the header */
.toc-list ol {
  flex-basis: 100%;
  margin-left: 1.5rem;
  /* Indents sub-items for a clear hierarchy */
  margin-top: 0.25rem;
}



.toc:not(.is-collapsed) .toc__toggle::after {
  transform: rotate(90deg);
  /* transform: translateY(0.06em) rotate(90deg) scale(1.35); */
}

.toc__toggle:hover {
  border-color: var(--color-border);
}

.toc ol {
  margin: 0;
  padding-left: 1.2em;
}

.toc .toc__content {
  margin-top: 10px;
  max-height: 2000px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.2s ease, opacity 0.2s ease, margin-top 0.2s ease;
}

.toc.is-collapsed .toc__content {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
}

.toc li+li {
  margin-top: 0.35rem;
}

a {
  color: var(--color-link-dark);
  text-underline-offset: 0.12em;
}

a:hover {
  color: var(--brand-blue);
}

/* =========================================================
   Global Nav (Desktop default: left rail)
   ========================================================= */
/* Global nav */
.global-nav {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 1.059rem;
  /* 18px */
  z-index: 1000;
  padding: 1.412rem 0 0 1.412rem;
  /* 24px */
  border: none;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  transform: translateZ(0);
  isolation: isolate;
}



.global-nav__item {
  width: 2.353rem;
  /* 44px */
  height: 2.353rem;
  /* 44px */
  border-radius: 0.706rem;
  /* 12px */
  border: none;
  background: var(--color-bg);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible;
  color: var(--color-text);
  text-decoration: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70%;
}


.global-nav__item--home {
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'16'%20height%3D'16'%20fill%3D'%23111'%20viewBox%3D'0%200%2016%2016'%3E%3Cpath%20d%3D'M8.354%201.146a.5.5%200%200%200-.708%200l-6%206A.5.5%200%200%200%201.5%207.5v7a.5.5%200%200%200%20.5.5h4.5a.5.5%200%200%200%20.5-.5v-4h2v4a.5.5%200%200%200%20.5.5H14a.5.5%200%200%200%20.5-.5v-7a.5.5%200%200%200-.146-.354L13%205.793V2.5a.5.5%200%200%200-.5-.5h-1a.5.5%200%200%200-.5.5v1.293zM2.5%2014V7.707l5.5-5.5%205.5%205.5V14H10v-4a.5.5%200%200%200-.5-.5h-3a.5.5%200%200%200-.5.5v4z'/%3E%3C%2Fsvg%3E");
}

.global-nav__item--toc {
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'16'%20height%3D'16'%20fill%3D'%23111'%20viewBox%3D'0%200%2016%2016'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M2%202.5a.5.5%200%200%200-.5.5v1a.5.5%200%200%200%20.5.5h1a.5.5%200%200%200%20.5-.5V3a.5.5%200%200%200-.5-.5zM3%203H2v1h1z'/%3E%3Cpath%20d%3D'M5%203.5a.5.5%200%200%201%20.5-.5h9a.5.5%200%200%201%200%201h-9a.5.5%200%200%201-.5-.5M5.5%207a.5.5%200%200%200%200%201h9a.5.5%200%200%200%200-1zm0%204a.5.5%200%200%200%200%201h9a.5.5%200%200%200%200-1z'/%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M1.5%207a.5.5%200%200%201%20.5-.5h1a.5.5%200%200%201%20.5.5v1a.5.5%200%200%201-.5.5H2a.5.5%200%200%201-.5-.5zM2%207h1v1H2zm0%203.5a.5.5%200%200%200-.5.5v1a.5.5%200%200%200%20.5.5h1a.5.5%200%200%200%20.5-.5v-1a.5.5%200%200%200-.5-.5zm1%20.5H2v1h1z'/%3E%3C%2Fsvg%3E");
}

.global-nav__item--back {
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'16'%20height%3D'16'%20fill%3D'%23111'%20viewBox%3D'0%200%2016%2016'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M6%2012.5a.5.5%200%200%200%20.5.5h8a.5.5%200%200%200%20.5-.5v-9a.5.5%200%200%200-.5-.5h-8a.5.5%200%200%200-.5.5v2a.5.5%200%200%201-1%200v-2A1.5%201.5%200%200%201%206.5%202h8A1.5%201.5%200%200%201%2016%203.5v9a1.5%201.5%200%200%201-1.5%201.5h-8A1.5%201.5%200%200%201%205%2012.5v-2a.5.5%200%200%201%201%200z'/%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M.146%208.354a.5.5%200%200%201%200-.708l3-3a.5.5%200%201%201%20.708.708L1.707%207.5H10.5a.5.5%200%200%201%200%201H1.707l2.147%202.146a.5.5%200%200%201-.708.708z'/%3E%3C%2Fsvg%3E");
}

.global-nav__flag {
  position: absolute;
  top: 50%;
  left: 100%;
  background: #2B2F36;
  color: var(--color-bg);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: transform 180ms ease, opacity 180ms ease;

  transform: translate(-0.471rem, -50%);
  /* -8px */
  padding: 0.353rem 0.588rem;
  /* 6px 10px */
  border-radius: 0.353rem;
  /* 6px */
  font-size: 0.706rem;
  /* 12px */
}

.global-nav__item:hover .global-nav__flag,
.global-nav__item:focus-visible .global-nav__flag {
  transform: translate(0.471rem, -50%);
  /* 8px */
  opacity: 1;
}





.global-nav__item:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px rgba(107, 114, 128, 0.55);
}


/* =========================================================
   Main content (Desktop)
   ========================================================= */
main {
  border: 1px solid var(--color-border);
  background: var(--color-surface-muted);
  box-sizing: border-box;
  /* keep it from hiding under the rail */
  margin-left: calc(var(--desktop-rail-w));
  max-width: min(var(--content-max), calc(100% - (2 * var(--mobile-gutter))));

  margin: 0.941rem auto;
  /* 16px */
  padding: 0.941rem;
  /* 16px */
  border-radius: 0.706rem;
  /* 12px */
}

/* If you use sibling selector instead, keep only one system.
   This is more deterministic for your structure:
*/
.global-nav+main {
  margin-left: var(--desktop-rail-w);
}

/* =========================================================
   Typography
   ========================================================= */
h1 {
  font-size: 1.6rem;
  /* ~27px */
  line-height: 1.25;
  font-weight: 600;
  margin: 0 0 1.25rem;
  letter-spacing: 0.005em;
}

h2,
h3,
h4 {
  font-weight: 550;
  letter-spacing: 0.003em;
}

h2 {
  font-size: 1.3rem;
  /* ~22px */
  line-height: 1.35;
  /* margin: 2rem 0 0.75rem; */
}

h3 {
  font-size: 1.1rem;
  /* ~18.7px */
  line-height: 1.4;
  margin: 1.25rem 0 0.5rem;
}

h4 {
  font-size: 0.95rem;
  /* ~16px */
  line-height: 1.4;
  text-transform: uppercase;
  /* optional */
  letter-spacing: 0.04em;
  /* optional */
  margin: 1rem 0 0.25rem;
  color: var(--color-muted);
}


ol {
  padding-left: 1.5em;
}

ol>li::marker {
  font-size: 0.8em;
  color: var(--color-muted);
  font-weight: 500;
}

ul>li::marker {
  font-size: 0.85em;
  color: var(--color-muted);
}


.tip {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border-left: 0.25rem solid var(--tip-accent);
  background: var(--tip-bg);
  font-size: 0.9rem;
  line-height: 1.45;
}

.tip::before {
  width: 1em;
  height: 1em;
  background-color: currentColor;
}

.tip__title {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;

  font-weight: 600;
  text-transform: uppercase;
  font-family: var(--mono-font);
  font-size: 0.85em;
  letter-spacing: 0.08em;

  color: #8a6a00;
  /* tip yellow */
}

.tip__title::before {
  content: "";
  display: inline-block;

  width: 1.2em;
  height: 1.2em;

  background-color: currentColor;

  /* mask via variable (NO shorthand) */
  -webkit-mask-image: var(--icon-info);
  mask-image: var(--icon-info);

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  mask-position: center;

  -webkit-mask-size: contain;
  mask-size: contain;
}




.list-label {
  margin-bottom: 0;
}

.list-block ul,
ol {
  margin-top: 0.235rem;
}

.no-bullets {
  list-style: none;
  padding-left: 1.25rem;

}

data,
time {
  font-family: var(--mono-font);
  font-variant-numeric: slashed-zero tabular-nums;
  /* color: steelblue; */
  /* color: rgb(60, 121, 188); */
  /* color: #006D77; */
  /* color: #0F766E; */
  color: #0B7285;
  font-weight: 500;
}

[data-punct]::after {
  content: attr(data-punct);
  color: var(--color-text);
  font-family: var(--base-font);
  text-decoration: none !important;
}

/* Only links that generate punctuation */
a[data-punct],
a[data-punct]:link,
a[data-punct]:visited,
a[data-punct]:hover,
a[data-punct]:active,
a[data-punct]:focus {
  text-decoration: none !important;
  text-decoration-line: none !important;

  /* in case underline is implemented as a border */
  border-bottom: none !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* underline only the real link text inside */
a[data-punct]>.link-text {
  text-decoration: underline;
}

.link-text::after {
  content: attr(data-punct);
  /* punctuation styling */
  color: var(--color-text);
  font-family: var(--base-font);
  text-decoration: none;
}


/* generated punctuation stays un-underlined */
a[data-punct]::after {
  content: attr(data-punct);
  text-decoration: none !important;
  color: var(--color-text);
  font-family: var(--base-font);
}



strong {
  font-weight: 600;
}



/* =========================================================
   Mobile layout (<= 768px): fixed top bar + drawer TOC
   ========================================================= */
/* =========================================================
   Mobile tuning (<= 768px)
   Assumes: html { font-size: 17px; }  => 1rem = 17px
   ========================================================= */
@media (max-width: 768px) {

  /* --- Layout rhythm --- */
  :root {
    --mobile-gutter: 0.941rem;
    /* 16px */
    --mobile-stack-gap: 0.824rem;
    /* 14px */
    --ledger-marker-size: 0.765rem;
    /* 13px (was 14px) */
  }


  /* Make sure text doesn’t auto-zoom weirdly on iOS */
  html {
    -webkit-text-size-adjust: 100%;
    font-size: 16px;
  }

  main,
  .global-nav+main {
    margin-left: 0;
  }

  main {
    max-width: 100%;
    border: 0;
    border-radius: 0;

    /* tighter but still breathable */
    padding-left: var(--mobile-gutter);
    padding-right: var(--mobile-gutter);

    /* keep content below the fixed header */
    padding-top: calc(0.941rem + var(--mobile-nav-h) + env(safe-area-inset-top));
    padding-bottom: 1.176rem;
    /* 20px */
  }

  /* --- Typography / prose density --- */
  body {
    line-height: 1.55;
  }

  /* slightly tighter on small screens */

  p {
    margin: 0.55em 0;
    /* less vertical whitespace */
  }


  /* Lists: reduce indentation + marker size slightly */
  ol,
  ul {
    padding-left: 1.2em;
  }

  ol>li::marker {
    font-size: 0.78em;
  }


  /* --- Global nav bar remains touch-friendly --- */
  .global-nav {
    top: 0;
    left: 0;
    right: 0;

    padding: 0 var(--mobile-gutter);
    height: calc(var(--mobile-nav-h) + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);

    flex-direction: row;
    align-items: center;
    gap: 0.706rem;
    /* 12px */

    background: var(--color-bg);
    box-shadow: var(--shadow-soft);
    z-index: 3000;
  }

  .global-nav__item {
    width: 2.353rem;
    /* 40px */
    height: 2.353rem;
    /* 40px */
    border-radius: 0.706rem;
    /* 12px */
  }

  .global-nav__flag {
    display: none;
  }

  /* --- TOC drawer: only list area scrolls --- */
  .global-nav__toc[open] .toc-card {
    display: flex;
    flex-direction: column;

    position: fixed;
    top: calc(var(--mobile-nav-h) + env(safe-area-inset-top));
    left: 0;

    height: calc(100dvh - var(--mobile-nav-h) - env(safe-area-inset-top));
    width: var(--drawer-w);

    background: var(--color-surface);
    box-shadow: var(--shadow-panel);
    padding: 0.824rem;
    /* 14px */

    overflow: hidden;
    /* important */
    z-index: 3200;
  }

  .toc-card__header {
    margin-bottom: 0.471rem;
    /* 8px */
    padding: 0.235rem 0;
    /* 4px 0 */
  }

  .toc-card__list-wrap {
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    flex: 1 1 auto;

    /* optional: nicer scroll on iOS */
    -webkit-overflow-scrolling: touch;
  }

  /* --- Books / ledgers: stack and remove “module scroll” feeling --- */
  figure.book {
    /* prevent accidental horizontal page scroll */
    overflow-x: clip;
  }

  .book {
    /* reduce padding so it doesn’t feel like “giant card whitespace” */
    padding: 0.824rem;
    /* 14px */
    gap: var(--mobile-stack-gap);
    border-radius: 0.588rem;
    /* 10px */
  }

  .book>h2 {
    font-size: 0.941rem;
    /* 16px */
    line-height: 1.15;
  }

  .book__ledgers {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--mobile-stack-gap);

    /* critical: avoid a nested scroll region */
    overflow: visible;
  }

  .book__ledgers>.ledger-grid {
    /* keep them centered and readable */
    width: min(100%, 28rem);
  }

  /* reduce cell padding slightly to tighten vertical density */
  .ledger-grid__cell {
    padding: 0.45rem 0.65rem;
  }





  /* --- Section nav: keep it compact on mobile --- */
  .section-nav-container {
    margin-bottom: 0.824rem;
    /* 14px */
  }

  .section-nav {
    padding: 0.4rem 0.6rem;
    border-radius: 0.353rem;
    font-size: 0.82rem;
  }

  .section-nav--prev::before,
  .section-nav--next::after {
    width: 0.882rem;
    /* 15px */
    height: 0.882rem;
    /* 15px */
  }
}


/* =========================================================
   Footer
   ========================================================= */
footer {
  width: 100%;
}

footer small {
  display: block;
  text-align: right;
  font-size: 0.706rem;
  color: #7a818a;
}

.section-nav-container--right {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.824rem;
}

.section-nav--next::after {
  content: "";
  display: inline-block;
  width: 0.941rem;
  height: 0.941rem;
  margin-left: 0.353rem;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: var(--icon-arrow-right);
  mask-image: var(--icon-arrow-right);
}

.section-nav--cta {
  text-decoration: none;
}

#tutorial-contents .toc-intro {
  /* margin: 0.5rem 0 1rem; */
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  /* color: #555; */
  max-width: 65ch;
  font-style: italic;
  color: #666;
}

#tutorial-contents h3 {
  margin-bottom: 0;
}

#tutorial-contents a {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #1f3a8a;
  text-decoration: none;
}

#tutorial-contents li::marker {
  font-size: 0.85em;
}

#tutorial-contents a:hover,
a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;

}

#tutorial-contents ol li::marker {
  font-size: 0.85em;
  color: #6b7280;
  font-weight: 400;
}

#tutorial-contents h3 {
  letter-spacing: 0.02em;
}

/* Reading time badge */
.read-time {
  margin-left: 0.5rem;
  font-size: 0.8rem;
  color: #777;
  white-space: nowrap;
}

/* Optional subtle separator */
.read-time::before {
  content: "•";
  margin-right: 0.4rem;
  color: #bbb;
}


/* Mapping Table Style */
.mapping-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-family: var(--base-font);
  font-size: 0.9rem;
}

.mapping-table th {
  background-color: #000000;
  color: #ffffff;
  text-align: left;
  padding: 10px;
  /* text-transform: uppercase; */
  letter-spacing: 0.05em;
}

.mapping-table td {
  padding: 10px;
  border-bottom: 1px solid #e0e0e0;
}

.mapping-table tr:nth-child(even) {
  background-color: #f1f1f1;
}

.mapping-table tr:hover {
  background-color: #f1f1f1;
}