/* =========================================================================
   THE CAROLINA ROTTWEILER: design system, prefix pdt-
   Vocabulary of the Carolina Piedmont and of a land survey: ridge (site
   header), clearing (home hero, two panels), outcrop (the granite shelf that
   carries the portrait), stand (numbered section), plot (one card),
   quadrat (equal-height card grid), almanac (register grouped by month),
   run (one dated entry), headwater (article head), vista (lead image),
   furrow (reading column, 68ch), shelf (margin note, 22ch), strata (table),
   pack (checklist), washout (common mistakes), overlook (pull quote),
   ford (read next), seam (rule), bottomland (footer).
   Palette: a February in the Piedmont. Pale granite, deep longleaf pine,
   the garnet of a statute binder. No cream, no peach, no terracotta, and no
   blue anywhere on the site.
   No external request, no webfont, no border radius, no shadow, no gradient.
   Dark mode follows prefers-color-scheme.
   ========================================================================= */

:root {
  color-scheme: light dark;

  /* ---- 1. COLOR · the ground ------------------------------------------ */
  --granite:      #E8E9E4;  /* page ground, a barely green grey            */
  --quartz:       #F4F5F1;  /* bright paper: checklists, table heads       */
  --sedge:        #D8DBD2;  /* alternate sections, image frames, holds     */
  --slate:        #191C19;  /* text and titles, a green black              */
  --lichen:       #56604F;  /* captions, standfirsts, secondary dates      */
  --longleaf:     #1C4B39;  /* DOMINANT: links, rules, checklist bar       */
  --longleaf-set: #123324;  /* hover and active state                      */
  --garnet:       #6E1F2A;  /* SECOND COLOR: section numbers, mistake bar  */
  --garnet-set:   #55151F;  /* the garnet cleared for long prose           */
  --seam:         #C7CBC0;  /* one pixel rules, image borders, dividers    */
  --bottomland:   #141711;  /* footer ground                               */

  /* ---- 2. TYPE · system stacks, nothing fetched ------------------------ */
  --title-font: "Kefa", "News Gothic", "Franklin Gothic Book", "Nimbus Sans", "Liberation Sans", Arial, sans-serif;
  --body-font: ui-serif, "New York", "Sitka Subheading", Tinos, "Liberation Serif", "Times New Roman", serif;

  --title-weight: 700;
  --caps-space: 0.12em;

  --body-size: clamp(1.06rem, 1rem + 0.28vw, 1.18rem);
  --body-leading: 1.62;
  --scale-h1: clamp(1.9rem, 1.35rem + 2.2vw, 3.2rem);
  --scale-h2: clamp(1.3rem, 1.12rem + 0.8vw, 1.8rem);
  --scale-h3: clamp(1.08rem, 1.02rem + 0.3vw, 1.28rem);
  --scale-mark: clamp(1.9rem, 1.2rem + 2.6vw, 3rem);

  /* ---- 3. RHYTHM -------------------------------------------------------- */
  --column-width: 68ch;
  --shelf-width: 22ch;
  --column-wide: 1360px;
  --page-margin: clamp(1.1rem, 4vw, 4rem);
  --gutter: clamp(0.9rem, 2.2vw, 2rem);
  --air: clamp(2.2rem, 5vw, 4.6rem);

  /* ---- 4. DETAILS · square corners, one pixel rules --------------------- */
  --seam-fine: 1px solid var(--seam);
  --pace: 140ms ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --granite:      #12150F;
    --quartz:       #1A1E17;
    --sedge:        #232920;
    --slate:        #E3E7DD;
    --lichen:       #A2AC9A;
    --longleaf:     #6FBF9A;
    --longleaf-set: #8FD8B4;
    --garnet:       #D98A93;
    --garnet-set:   #E7AEB5;
    --seam:         #333B2E;
    --bottomland:   #0B0D08;
  }
}

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

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

body {
  margin: 0;
  background: var(--granite);
  color: var(--slate);
  font-family: var(--body-font);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  font-variant-numeric: lining-nums tabular-nums;
}

h1, h2, h3, h4 {
  font-family: var(--title-font);
  font-weight: var(--title-weight);
  line-height: 1.14;
  letter-spacing: -0.006em;
  margin: 0 0 0.5em;
}
h1 { font-size: var(--scale-h1); }
h2 { font-size: var(--scale-h2); }
h3 { font-size: var(--scale-h3); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--longleaf); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--longleaf-set); }
a:focus-visible { outline: 2px solid var(--garnet); outline-offset: 2px; }

::selection { background: var(--garnet); color: var(--quartz); }

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

table { border-collapse: collapse; }

hr { border: 0; }

/* ---- layout ------------------------------------------------------------- */
.pdt-basin {
  max-width: var(--column-wide);
  margin: 0 auto;
  padding-inline: var(--page-margin);
}

.pdt-cutoff {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--quartz);
  color: var(--slate);
  padding: 0.6rem 1rem;
  border-block-end: 2px solid var(--longleaf);
  z-index: 20;
}
.pdt-cutoff:focus { left: 0; }

/* ---- ridge · site header ----------------------------------------------- */
.pdt-ridge {
  background: var(--granite);
  border-block-end: var(--seam-fine);
}

.pdt-ridge__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem var(--gutter);
  padding-block: 0.9rem 0.7rem;
}

.pdt-cairn {
  font-family: var(--title-font);
  font-weight: var(--title-weight);
  font-size: var(--scale-mark);
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--slate);
  text-decoration: none;
  max-width: 22ch;
  display: inline-block;
}
.pdt-cairn:hover { color: var(--slate); }
.pdt-cairn span {
  display: block;
  font-family: var(--body-font);
  font-size: 0.82rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--lichen);
  margin-block-start: 0.45rem;
}

.pdt-trail { margin-inline-start: auto; }
.pdt-trail ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1.4rem;
}
.pdt-trail a {
  font-family: var(--title-font);
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: var(--caps-space);
  color: var(--slate);
  text-decoration: none;
  border-block-end: 2px solid transparent;
  padding-block-end: 2px;
}
.pdt-trail a:hover { color: var(--longleaf); border-block-end-color: var(--longleaf); }
.pdt-trail a[aria-current="page"] { color: var(--garnet); border-block-end-color: var(--garnet); }

/* The standing resources row, on every page but the home. */
.pdt-notch-row {
  background: var(--quartz);
  border-block-end: var(--seam-fine);
}
.pdt-notch-row ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.pdt-notch-row li {
  font-family: var(--title-font);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: var(--caps-space);
  color: var(--lichen);
  padding: 0.45rem 1.1rem;
  border-inline-end: var(--seam-fine);
}
.pdt-notch-row li:first-child { padding-inline-start: 0; }
.pdt-notch-row a { color: var(--longleaf); text-decoration: none; }
.pdt-notch-row a:hover { color: var(--longleaf-set); text-decoration: underline; }

/* ---- creek · breadcrumb ------------------------------------------------- */
.pdt-creek { padding-block: 0.9rem 0; }
.pdt-creek ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  font-family: var(--title-font);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--lichen);
}
.pdt-creek li { display: flex; align-items: baseline; }
.pdt-creek li + li::before { content: "\203A"; margin-inline: 0.55rem; color: var(--seam); }
.pdt-creek a { color: var(--lichen); text-decoration: none; }
.pdt-creek a:hover { color: var(--longleaf); text-decoration: underline; }
.pdt-creek [aria-current="page"] { color: var(--slate); }

/* ---- clearing · home hero, two panels ---------------------------------- */
.pdt-clearing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--gutter);
  align-items: stretch;
  background: var(--granite);
  border-block-end: var(--seam-fine);
}

.pdt-clearing__text {
  padding-block: clamp(1.4rem, 3vw, 2.4rem);
  align-self: center;
}

.pdt-clearing__band {
  font-family: var(--title-font);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: var(--caps-space);
  color: var(--garnet);
  margin: 0 0 0.9rem;
}

.pdt-clearing__text h1 { margin-block-end: 0.5rem; }

.pdt-clearing__swell {
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  color: var(--slate);
  max-width: 56ch;
  margin-block-end: 1.1rem;
}

.pdt-clearing__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.5rem;
  font-family: var(--title-font);
  font-size: 0.85rem;
}
.pdt-clearing__links li { border-inline-start: 3px solid var(--longleaf); padding-inline-start: 0.6rem; }
.pdt-clearing__links a { text-decoration: none; }
.pdt-clearing__links a:hover { text-decoration: underline; }

/* The outcrop: the granite shelf that carries the portrait. One 4:5 image in
   a one pixel seam frame. No text is ever set over an image on this site. */
.pdt-outcrop {
  margin: 0;
  padding: 0.7rem;
  background: var(--sedge);
  border-inline-start: var(--seam-fine);
  display: flex;
  align-items: center;
}
.pdt-outcrop img {
  width: clamp(200px, 15vw, 240px);
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: var(--seam-fine);
}

/* ---- stand · numbered section ------------------------------------------ */
.pdt-stand { padding-block: var(--air) 0; }
.pdt-stand--sunken { background: var(--sedge); padding-block: var(--air); margin-block-start: var(--air); }

.pdt-stand__head {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  border-block-start: 2px solid var(--slate);
  padding-block-start: 0.6rem;
  margin-block-end: 0.4rem;
}
.pdt-stand__num {
  font-family: var(--title-font);
  font-size: 0.8rem;
  letter-spacing: var(--caps-space);
  text-transform: uppercase;
  color: var(--garnet);
  white-space: nowrap;
}
.pdt-stand__head h2 { margin: 0; }
.pdt-stand__lede { color: var(--lichen); margin: 0 0 1.4rem; max-width: 62ch; }

/* ---- quadrat · equal-height card grid ---------------------------------- */
.pdt-quad {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: var(--gutter);
}

/* ---- plot · one card ---------------------------------------------------- */
.pdt-plot {
  display: flex;
  flex-direction: column;
  background: var(--quartz);
  border: var(--seam-fine);
}
.pdt-plot__frame {
  background: var(--sedge);
  border-block-end: var(--seam-fine);
}
.pdt-plot__frame img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.pdt-plot__frame--upright img { aspect-ratio: 4 / 5; }
.pdt-plot__frame--wide img { aspect-ratio: 16 / 9; }

.pdt-plot__body { padding: 0.85rem 0.95rem 1rem; display: flex; flex-direction: column; gap: 0.35rem; }

.pdt-plot__over {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  font-family: var(--title-font);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: var(--caps-space);
  color: var(--lichen);
}
.pdt-plot__num { color: var(--garnet); white-space: nowrap; }

.pdt-plot__title { margin: 0; font-size: 1.06rem; line-height: 1.25; }
.pdt-plot__title a { color: var(--slate); text-decoration: none; }
.pdt-plot__title a:hover { color: var(--longleaf); text-decoration: underline; }

.pdt-plot__note { color: var(--lichen); font-size: 0.95rem; margin: 0; }
.pdt-plot__tag {
  margin: auto 0 0;
  padding-block-start: 0.5rem;
  font-family: var(--title-font);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: var(--caps-space);
  color: var(--longleaf);
}

/* ---- almanac · the register, grouped by month -------------------------- */
.pdt-almanac { list-style: none; margin: 0; padding: 0; }

.pdt-almanac__month { margin-block-end: 1.6rem; }
.pdt-almanac__month > h3 {
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: var(--caps-space);
  color: var(--slate);
  border-inline-start: 4px solid var(--garnet);
  padding-inline-start: 0.6rem;
  margin: 0 0 0.7rem;
}

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

/* ---- run · one dated entry --------------------------------------------- */
.pdt-run {
  display: grid;
  grid-template-columns: 11.5rem minmax(0, 1fr);
  gap: 0 1.2rem;
  padding-block: 0.62rem;
  border-block-end: var(--seam-fine);
}
.pdt-almanac__runs > .pdt-run:nth-child(odd) { background: var(--quartz); }

.pdt-stamp {
  font-family: var(--title-font);
  font-size: 0.82rem;
  color: var(--lichen);
  margin: 0.2rem 0 0;
  white-space: nowrap;
}
.pdt-run__main { min-width: 0; }
.pdt-run__kicker {
  font-family: var(--title-font);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: var(--caps-space);
  color: var(--garnet);
  margin: 0 0 0.15rem;
}
.pdt-run__title { margin: 0 0 0.2rem; font-size: 1.06rem; line-height: 1.28; }
.pdt-run__title a { color: var(--slate); text-decoration: none; }
.pdt-run__title a:hover { color: var(--longleaf); text-decoration: underline; }
.pdt-run__text { color: var(--lichen); font-size: 0.96rem; margin: 0; }

/* ---- tract · any inner page -------------------------------------------- */
.pdt-tract { padding-block-start: 0.4rem; }

.pdt-headwater { padding-block: clamp(1.2rem, 2.6vw, 2.2rem) 0.2rem; }
.pdt-headwater__band {
  font-family: var(--title-font);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: var(--caps-space);
  color: var(--garnet);
  margin: 0 0 0.7rem;
}
.pdt-headwater h1 { max-width: 30ch; margin-block-end: 0.6rem; }
.pdt-headwater__chapo { font-size: clamp(1.08rem, 1.02rem + 0.34vw, 1.26rem); color: var(--slate); max-width: 56ch; margin: 0; }

.pdt-credits {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0.5rem 0 0;
  border-block-start: var(--seam-fine);
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.2rem;
  font-family: var(--title-font);
  font-size: 0.8rem;
  color: var(--lichen);
}
.pdt-credits a { color: var(--lichen); }
.pdt-credits a:hover { color: var(--longleaf); }

/* ---- vista · lead image ------------------------------------------------- */
.pdt-vista {
  margin: 1.2rem 0 0;
  background: var(--sedge);
  border: var(--seam-fine);
  padding: 0.7rem;
}
.pdt-vista img { width: 100%; border: var(--seam-fine); }
.pdt-vista figcaption {
  padding-block-start: 0.55rem;
  color: var(--lichen);
  font-size: 0.92rem;
  max-width: 78ch;
}

/* ---- furrow and shelf · the two fixed columns -------------------------- */
.pdt-columns {
  display: grid;
  grid-template-columns: minmax(0, var(--column-width)) var(--shelf-width);
  justify-content: start;
  gap: 0 3rem;
  padding-block: 1.4rem 0;
}

.pdt-furrow { max-width: var(--column-width); min-width: 0; }
.pdt-furrow > p:first-of-type { margin-block-start: 0; }
.pdt-furrow h2 { margin-block-start: 1.6em; }
.pdt-furrow h3 { margin-block-start: 1.3em; }
.pdt-furrow li { margin-block-end: 0.4em; }
.pdt-furrow ul, .pdt-furrow ol { padding-inline-start: 1.3rem; }

/* The shelf: a margin note that is not sticky. It descends into the flow
   under 1180 px, right after the heading it belongs to. */
.pdt-shelf {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--lichen);
  border-block-start: 2px solid var(--garnet);
  padding-block-start: 0.6rem;
}
.pdt-shelf p { margin: 0 0 0.8em; }
.pdt-shelf a { color: var(--longleaf); }

/* ---- strata · the table ------------------------------------------------- */
.pdt-strata-wrap {
  overflow-x: auto;
  border: var(--seam-fine);
  background: var(--quartz);
  margin-block: 1.4rem;
}

.pdt-strata {
  width: 100%;
  min-width: 46rem;
  font-size: 0.94rem;
}
.pdt-strata caption {
  caption-side: top;
  text-align: start;
  font-family: var(--title-font);
  font-size: 0.86rem;
  color: var(--slate);
  padding: 0.7rem 0.8rem 0.5rem;
}
.pdt-strata th, .pdt-strata td {
  border-block-end: var(--seam-fine);
  padding: 0.55rem 0.8rem;
  text-align: start;
  vertical-align: top;
}
.pdt-strata thead th {
  background: var(--longleaf);
  color: var(--quartz);
  font-family: var(--title-font);
  font-weight: 400;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: var(--caps-space);
}
.pdt-strata tbody th { background: var(--sedge); font-weight: 600; }
.pdt-strata td { color: var(--slate); }
.pdt-strata .pdt-hush { color: var(--lichen); font-style: italic; }

/* ---- pack · the checklist ---------------------------------------------- */
.pdt-pack {
  background: var(--quartz);
  border-inline-start: 3px solid var(--longleaf);
  padding: 1rem 1.2rem;
  margin-block: 1.4rem;
}
.pdt-pack h3 {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: var(--caps-space);
  margin: 0 0 0.6rem;
}
.pdt-pack ul, .pdt-pack ol { margin: 0; padding-inline-start: 1.2rem; }
.pdt-pack li { margin-block-end: 0.35em; }

/* ---- washout · common mistakes ----------------------------------------- */
.pdt-washout {
  background: var(--quartz);
  border-inline-start: 3px solid var(--garnet);
  padding: 1rem 1.2rem;
  margin-block: 1.4rem;
}
.pdt-washout h3 {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: var(--caps-space);
  color: var(--garnet-set);
  margin: 0 0 0.6rem;
}
.pdt-washout ul { margin: 0; padding-inline-start: 1.2rem; }
.pdt-washout li { margin-block-end: 0.4em; }

/* ---- overlook · pull quote --------------------------------------------- */
.pdt-overlook {
  margin: 1.6rem 0;
  padding-inline-start: 1.1rem;
  border-inline-start: 4px solid var(--garnet);
  font-size: clamp(1.1rem, 1.04rem + 0.3vw, 1.28rem);
  line-height: 1.45;
  color: var(--slate);
}
.pdt-overlook p { margin: 0; }

/* ---- ford · read next --------------------------------------------------- */
.pdt-ford {
  margin-block: 2rem 0;
  border-block-start: 2px solid var(--slate);
  padding-block-start: 0.8rem;
}
.pdt-ford h2 {
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: var(--caps-space);
  margin: 0 0 0.6rem;
}
.pdt-ford ul { list-style: none; margin: 0; padding: 0; }
.pdt-ford li { margin-block-end: 0.45em; }

/* ---- seam · the divider ------------------------------------------------- */
.pdt-seam {
  border: 0;
  border-block-start: 1px solid var(--seam);
  width: calc(100% - 4rem);
  margin: var(--air) auto 0 4rem;
}

/* ---- marker · inline geometry ------------------------------------------ */
.pdt-marker { vertical-align: baseline; color: var(--garnet); }
.pdt-marker__rules { color: var(--longleaf); }

/* ---- survey · the signature component ---------------------------------- */
.pdt-survey { margin-block: 1.6rem; }
.pdt-survey > details {
  border: var(--seam-fine);
  background: var(--quartz);
  margin-block-start: 0.5rem;
}
.pdt-survey summary {
  cursor: pointer;
  padding: 0.6rem 0.9rem;
  font-family: var(--title-font);
  font-size: 0.9rem;
}
.pdt-survey summary:hover { color: var(--longleaf); }
.pdt-survey details[open] summary { border-block-end: var(--seam-fine); }
.pdt-survey details > div { padding: 0.6rem 0.9rem 0.9rem; }

/* ---- bottomland · the footer ------------------------------------------- */
.pdt-bottomland {
  margin-block-start: var(--air);
  background: var(--bottomland);
  color: var(--quartz);
}
.pdt-bottomland a { color: var(--quartz); }
.pdt-bottomland a:hover { color: var(--sedge); }
.pdt-bottomland__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.6rem;
  padding-block: 2.2rem 1.6rem;
}
.pdt-bottomland h2 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: var(--caps-space);
  color: var(--sedge);
  margin: 0 0 0.7rem;
}
.pdt-bottomland ul { list-style: none; margin: 0; padding: 0; }
.pdt-bottomland li { margin-block-end: 0.35em; font-size: 0.95rem; }
.pdt-bottomland__base {
  border-block-start: 1px solid var(--seam);
  padding-block: 1rem 1.6rem;
  color: var(--sedge);
  font-family: var(--title-font);
  font-size: 0.8rem;
}

/* ---- print -------------------------------------------------------------- */
@media print {
  .pdt-ridge, .pdt-notch-row, .pdt-trail, .pdt-bottomland, .pdt-cutoff, .pdt-creek { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .pdt-columns { display: block; }
  .pdt-shelf {
    border-block-start: none;
    border-block-end: 1px solid #999;
    margin-block: 0.6em 1.2em;
    padding-block: 0.2em;
  }
  .pdt-furrow a[href^="/"]::after { content: ""; }
  .pdt-pack { break-inside: avoid; }
  .pdt-strata-wrap { overflow: visible; }
  .pdt-strata { min-width: 0; }
}

/* ---- narrow screens ----------------------------------------------------- */
@media (max-width: 1179px) {
  .pdt-columns { display: block; }
  .pdt-shelf { margin-block: 1.2rem 0; max-width: 52ch; }
}

@media (max-width: 899px) {
  .pdt-clearing { grid-template-columns: 1fr; }
  .pdt-outcrop {
    order: 2;
    border-inline-start: none;
    border-block-start: var(--seam-fine);
    justify-content: center;
  }
  .pdt-trail { margin-inline-start: 0; width: 100%; }
  .pdt-trail ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem 1rem; }
  .pdt-run { grid-template-columns: 1fr; gap: 0 0; }
  .pdt-stamp { margin-block-end: 0.15rem; }
}

@media (max-width: 520px) {
  .pdt-trail ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root { --page-margin: 1.1rem; }
}