/* =============================================================================
   layout.css — Editorial layout grammar translated into vanilla CSS.
   Tailwind spacing unit = .25rem  →  mt-8=2rem, mt-7=1.75rem, mt-10=2.5rem,
   mt-12=3rem, mt-24=6rem, mt-32=8rem, mt-64=16rem. Breakpoints: sm 640, md 768,
   lg 1024, xl 1280.
   ============================================================================= */

/* ---- Container: max-w-(--breakpoint-2xl) p-4 pb-20 sm:p-6 md:p-10 --------- */
.ms-main {
  max-width: 1536px;
  margin-inline: auto;
  padding: 1rem;
  padding-bottom: 5rem;
}
@media (min-width: 640px) { .ms-main { padding: 1.5rem; padding-bottom: 5rem; } }
@media (min-width: 768px) { .ms-main { padding: 2.5rem; padding-bottom: 5rem; } }

/* ---- Masthead: grid items-center gap-[6%] pb-10 lg:grid-cols-2 ----------- */
.masthead {
  display: grid;
  align-items: center;
  gap: 6%;
  padding-bottom: 2.5rem;
}
@media (min-width: 1024px) { .masthead { grid-template-columns: 1fr 1fr; } }
.masthead .tagline { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase;
  line-height: 1.6; color: var(--text-muted); }
@media (min-width: 1024px) { .masthead .tagline { text-align: right; } }
@media (min-width: 1024px) { .masthead .live-metrics { justify-self: end; } }

/* ---- Figure frame: relative w-full bg texture, top strip, rotated caps --- */
.figure-ms { position: relative; width: 100%; margin: 0; background-image: url("../assets/img/paper-texture.svg");
  background-repeat: repeat; font-family: var(--font-mono); font-size: 10px; }
.figure-ms::before {        /* the textured top hairline (h-0.5 inset-x-0 top-0) */
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--color-black) 30%, transparent) 0 2px, transparent 2px 5px);
}
.figure-ms .bp { display: block; width: 100%; height: auto; padding: 1.5rem .5rem .5rem; }
/* rotated mono margin captions (origin-top-left rotate-90), top-left & top-right */
.cap-vert { position: absolute; top: .25rem; left: 1.125rem; transform-origin: top left; transform: rotate(90deg);
  background: var(--background); padding-inline: .15rem; text-transform: uppercase; letter-spacing: .06em;
  color: color-mix(in srgb, var(--color-black) 45%, transparent); white-space: nowrap; }
.cap-vert.right { left: auto; right: 1.125rem; transform-origin: bottom right; transform: rotate(90deg) translateY(-100%); }
.figure-ms figcaption.flat { position: static; padding: .5rem .75rem 0; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-faint); }

/* ---- Intro: CSS multi-column justified flow ------------------------------ */
/* w-full columns-1 gap-x-[6%] text-justify text-sm leading-[160%] [column-fill:balance] md:columns-2 */
.intro-flow {
  width: 100%;
  columns: 1;
  column-gap: 6%;
  column-fill: balance;
  text-align: justify;
  font-size: var(--text-sm);
  line-height: 160%;
  margin-top: 2.5rem;            /* mt-10 wrapper */
}
@media (min-width: 768px) {
  .intro-flow { columns: 2; }
  .intro-flow .col-break { break-before: column; }
}
.intro-flow > p { margin: 0 0 0; }
.intro-flow > p + p,
.intro-flow > figure + p,
.intro-flow > p.spaced { margin-top: 2rem; }            /* mt-8 paragraph rhythm */
.intro-flow figure { break-inside: avoid; margin: 2rem 0; }
/* drop cap: first-letter:[-webkit-initial-letter:2] */
.intro-flow .dropcap::first-letter {
  -webkit-initial-letter: 2; initial-letter: 2;
  font-family: var(--font-serif); font-weight: 600; padding-right: .12em; color: var(--text-color);
}

/* ---- Chapter marker: mt-32 grid-cols-[1fr_auto_1fr] items-center gap-x-4 -- */
.marker {
  margin-top: 8rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0 1rem;
  font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: .06em; color: color-mix(in srgb, var(--color-black) 50%, transparent);
}
.marker::before, .marker::after { content: ""; height: 14px;
  background-image: radial-gradient(currentColor 1px, transparent 1.5px); background-size: 14px 14px;
  background-repeat: repeat-x; color: color-mix(in srgb, var(--color-black) 30%, transparent); }

/* ---- Big section row: mt-64 grid gap-y-16 lg:grid-cols-3 gap-x-[6%] ------- */
.section-row { margin-top: 16rem; display: grid; align-items: center; gap: 4rem 0; }
@media (min-width: 1024px) { .section-row { grid-template-columns: repeat(3, 1fr); column-gap: 6%; } }
.section-row .span-2 { grid-column: auto; }
@media (min-width: 1024px) { .section-row .span-2 { grid-column: span 2; } }

/* ---- Section heading: serif h3 + sup count + full black rule + label ----- */
.sec-head { margin-top: 6rem; display: grid; grid-template-columns: 1fr; align-items: center; gap: .5rem; }
@media (min-width: 768px) { .sec-head { grid-template-columns: auto 1fr auto; gap: 0 1rem; } }
.sec-head h3 { position: relative; font-family: var(--font-serif); font-weight: 400; font-size: var(--text-4xl);
  margin: 0; width: fit-content; }
.sec-head h3 sup { position: absolute; top: -.25rem; right: -1.25rem; font-family: var(--font-mono);
  font-size: 10px; color: color-mix(in srgb, var(--color-black) 50%, transparent); }
.sec-head .rule-solid { height: 1px; width: 100%; background: var(--color-black); }
.sec-head .sec-label { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase;
  color: color-mix(in srgb, var(--color-black) 60%, transparent); }

/* ---- Table of contents: ol columns md:2 xl:3 px-8 list-decimal ----------- */
.toc-ms { margin-top: 6rem; columns: 1; column-gap: 6%; padding-inline: 2rem; list-style: decimal; }
@media (min-width: 768px) { .toc-ms { columns: 2; } }
@media (min-width: 1280px) { .toc-ms { columns: 3; } }
.toc-ms > li { break-inside: avoid; }
.toc-ms .toc-group { break-inside: avoid; }
.toc-ms .toc-group:not(:first-child) { margin-top: 1.75rem; }   /* not-first:mt-7 */
.toc-ms .toc-group > .group-title { font-family: var(--font-serif); font-size: var(--text-lg); color: var(--text-color); text-decoration: none; display: block; }
.toc-ms .toc-group > a.group-title:hover { color: var(--accent); }
.toc-ms .toc-group ul { margin-top: 1rem; list-style: disc; padding-left: 1.1rem; }
.toc-ms .toc-row { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 0 .25rem;
  text-decoration: none; line-height: 1.75; }       /* text-sm/7 */
.toc-ms .toc-row .t { font-size: var(--text-sm); color: var(--text-color);
  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent);
  text-decoration-thickness: 1px; text-underline-offset: 2px; }
.toc-ms .toc-row .dots { align-self: center; height: 10px;
  background-image: radial-gradient(color-mix(in srgb, var(--color-black) 45%, transparent) 1px, transparent 1.4px);
  background-size: 6px 6px; background-position: 0 bottom; background-repeat: repeat-x; }
.toc-ms .toc-row .pg { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-black) 50%, transparent); white-space: nowrap; }
.toc-ms .toc-row:hover .t { color: var(--accent); text-decoration-color: var(--accent); }
.toc-ms .toc-row:hover .pg { color: var(--accent); }

/* ---- Progress widget: rows grid-cols-[2rem_1fr] border-b p-4 mono --------- */
.progress-ms { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; }
.progress-ms .row { display: grid; grid-template-columns: 2rem 1fr; gap: 0 1rem; align-items: center;
  padding: 1rem; border-bottom: 1px solid color-mix(in srgb, var(--color-black) 10%, transparent); }
.progress-ms .row.head { justify-content: space-between; }
.progress-ms .row:last-child { border-bottom: 0; }
.progress-ms .track { height: 8px; background: var(--ink-fill-2); border-radius: 9999px; overflow: hidden;
  display: inline-flex; }
.progress-ms .track > span { display: block; height: 100%; background: var(--accent); }
.progress-ms .rowflex { display: flex; align-items: center; gap: .75rem; }

/* ---- Footer: mt-32 mono uppercase, centered credits + pattern band ------- */
.footer-ms { margin-top: 8rem; width: 100%; font-family: var(--font-mono); font-size: var(--text-xs);
  text-transform: uppercase; color: var(--text-color); }
.footer-ms .stars { text-align: center; }
.footer-ms .credits { margin: 16rem auto 0; text-align: center; line-height: 1.8; color: var(--text-muted); max-width: 48rem; }
.footer-ms .credits .disclaimer { margin-top: .75rem; font-size: 9px; color: color-mix(in srgb, var(--color-black) 35%, transparent); text-transform: uppercase; letter-spacing: .04em; }
.footer-ms .band { margin-top: 6rem; height: 44px; opacity: .2;
  background-image: radial-gradient(var(--color-black) 1px, transparent 1.6px); background-size: 8px 8px; }